Правка в структуре верстки под колонки одиноковой ширины для всех значений

src/public/css/styles-main.css

@@ -49,6 +49,11 @@
         /*opacity: 1 !important;*/
         }
         
+        .b-list_folders-item.active b
+            {
+            font-weight: bold;
+            }
+        
     /*.b-list_folders.new .b-list_folders-item.viewed*/
     .b-list_folders-item.viewed 
         {
@@ -89,19 +94,27 @@
     
     .b-folder-content .sorted
         {
+        margin: 0;
+        /*
         margin-left: -10px;
-        margin-right: 20px;
+        margin-right: 20px;*/
         }
         
     .b-folder-content .not-sorted
         {
+        margin: 0;
+        /*
         margin-left: -20px;
+        */
         }
         
+.b-foto-double
+    {
+    padding: 0;
+    }
     
 .b-foto {
     padding: 4px;
-    
 }
 
         

src/public/js/script-main.js

@@ -13,9 +13,9 @@ $(document).ready(function(){
         $saveButton = $('.btn.btn-primary.save-folders'),
         colorsActive = $foldersContentWrap.data('colors'),
         pairsCount = $foldersContentWrap.data('pairs_count'),
-        currentNumToSelect = {},
-        hasSelectedFoto = {},
-        archiveData = {};
+        currentNumToSelect = {},    // Номер пары для очередного выбора
+        hasSelectedFoto = {},       // Выбрали одну картинку (есть подсвеченное фото)
+        archiveData = {};           // Данные о фото, находящихся в архиве
     
     function StartLoading()
     {
@@ -52,7 +52,7 @@ $(document).ready(function(){
     function MarkArchFolderViewed(folderName, $this)
     {
         if ($this.parents('.b-preview_inner').hasClass('arch')) {
-            console.log('AAA MarkArchFolderViewed ', folderName);
+            //console.log('AAA MarkArchFolderViewed ', folderName);
             $('.b-list_folders-item[data-folder="' + folderName + '"]').addClass('viewed');
             $saveButton.removeClass('disabled');
         }
@@ -64,23 +64,40 @@ $(document).ready(function(){
         var
             $target,
             folder,
-            cols,        
-            templateFolderContent = _.template('' +
+            templateFolderContent,
+            templateFolderContentCommon = _.template('' +
                 '<div class="b-folder-content row active" data-folder="<%= folderName %>">' +
-                '   <div class="sorted">' +
-                '   </div>' +
-                '   <div class="not-sorted col row">' +
+                '   <div class="b-foto-double col">' +
                 '   <% _.each(files, function(item, ind) { %>   \n' +
-                '       <div class="b-foto col-<%= cols %> order-<%= ind+1 %>" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
+                '       <div class="b-foto" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
                 '           <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
                 '               <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
                 '               <div class="b-foto_number"></div>' +
                 '           </div>' +
                 '       </div>' +
+                '   <% if (((ind % 2) != 0) && (ind<files.length-1)) { %>' +
+                '   </div>' +
+                '   <div class="b-foto-double col">' +
+                '   <% } %>' +
                 '   <% }) %>  \n' +
                 '   </div>' +
                 '</div>'
+            ),
+            templateFolderContent23 = _.template('' +
+                '<div class="b-folder-content row active" data-folder="<%= folderName %>">' +
+                '   <% _.each(files, function(item, ind) { %>   \n' +
+                '   <div class="b-foto-double col">' +
+                '       <div class="b-foto" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
+                '           <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
+                '               <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
+                '               <div class="b-foto_number"></div>' +
+                '           </div>' +
+                '       </div>' +
+                '   </div>' +
+                '   <% }) %>  \n' +
+                '</div>'
             );
+            
         
         if (folderType == 'new') {
             folder = '/fotos/' + folderName;
@@ -91,33 +108,16 @@ $(document).ready(function(){
             $target = $foldersArchContentWrap;
         }
         
-        switch (data.length) {
-            case 2:
-            case 3:
-                cols = 4;
-                break;
-            case 4:
-                cols = 6;
-                break;
-            case 5:
-            case 6:
-                cols = 4;
-                break;
-            case 7:
-            case 8:
-                cols = 3;
-                break;
-            case 9:
-            case 10:
-                cols = 2;
-                break;
-            default:
-              cols = 2;
+        if (data.length > 3) {
+            templateFolderContent = templateFolderContentCommon;
+        } else {
+            templateFolderContent = templateFolderContent23;
         }
+        
 
-        $target.append(templateFolderContent({folderName: folderName, folder: folder, files: data, cols: cols}));
+        $target.append(templateFolderContent({folderName: folderName, folder: folder, files: data}));
         currentNumToSelect[folderName] = 1;
-        hasSelectedFoto[folderName] = false; // Выбрали одну картинку (есть подсвеченное фото)
+        hasSelectedFoto[folderName] = false;
     }
     
     function SetPairedFotos(folderName, folderType)
@@ -128,16 +128,10 @@ $(document).ready(function(){
                 if (pairs.length > 0)
                 {
                     var $folderContentWrap = $('.b-folder-content[data-folder="' + folderName + '"]', $foldersArchContentWrap);
-                    
                     pairs.forEach(function(pair){
-                        //$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).click();
-                        //$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).click();
                         $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
                         $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
                     });
-                    
-                    //$('.b-list_folders-item[data-folder="' + folderName + '"]').removeClass('viewed');
-                    //$saveButton.addClass('disabled');
                 }
             }
         }
@@ -160,7 +154,7 @@ $(document).ready(function(){
     
     function getCurrenNumToSelect($folderWrap)
     {
-        for (let n = 1; n <= pairsCount; n++) {
+        for (let n = 1; n <= pairsCount+1; n++) {
             if ($('.b-foto_inner[data-num="' + n + '"]', $folderWrap).length == 0) return n;
         }
     }
@@ -170,62 +164,112 @@ $(document).ready(function(){
         var
             pairsCount = currentNumToSelect[folderName]-1,
             $folderListItem = $('.b-list_folders-item[data-folder="' + folderName + '"]');
-            
+        
         $folderListItem.attr('data-pairsCount', pairsCount);
         $('b', $folderListItem).text((pairsCount == 0) ? '' : pairsCount);
     }
     
-    function SetDataGroupContents($currentFolderWrap)
+    function CreatePair($currentFolderWrap, $pairedFoto, $this)
     {
-        var
-            $sorted = $('.sorted', $currentFolderWrap),
-            $notSorted = $('.not-sorted', $currentFolderWrap),
-            $fotoSorted = $('.b-foto', $sorted),
-            $fotoNotSorted = $('.b-foto', $notSorted),
-            $fotoAll = $('.b-foto', $currentFolderWrap),
-            sorted = $fotoSorted.length,
-            notSorted = $('.b-foto', $fotoNotSorted).length,
-            common = $fotoAll.length,
-            sortedCol, notSortedCol, fotoSortedCol, fotoNotSortedCol;
+        console.log('AAA CreatePair ', $currentFolderWrap);
+        $pairedFoto.addClass('paired');
+        $this.addClass('paired');
+        
+        var countFotosInFolder = $('.b-foto', $currentFolderWrap).length;
+        
+        if (countFotosInFolder == 2) {
+            return false;
+        }
+        
+        if (countFotosInFolder == 3) {
             
-            // [sorted-Col, notSorted-Col, fotoSorted-Col, fotoNotSorted-Col]
-            var configColNumbers = {
-                2: {0:[0,12,0,4], 2:[12,0,4,0]},
-                3: {0:[0,12,0,4], 2:[8,4,6,12]},
-                4: {0:[0,12,0,6], 2:[6,6,12,12], 4: [12,0,6,0]},
-                5: {0:[0,12,0,4], 2:[4,8,12,6], 4: [8,4,6,12]},
-                6: {0:[0,12,0,4], 2:[4,8,12,6], 4: [8,4,6,12], 6: [12,0,4,0]},
-                7: {0:[0,12,0,3], 2:[3,9,12,4], 4: [6,6,6,6], 6: [9,3,4,12]},
-                8: {0:[0,12,0,3], 2:[3,9,12,4], 4: [6,6,6,6], 6: [9,3,4,12], 8: [12,0,3,0]},
-                9: {0:[0,12,0,2], 2:[3,9,12,3], 4: [5,7,6,4], 6: [6,6,4,5], 8: [9,3,3,12]},
-                10: {0:[0,12,0,2], 2:[2,10,12,3], 4: [4,8,6,4], 6: [6,6,4,5], 8: [10,2,3,12], 10: [12,0,2,0]},
-            }
+            var
+                $divDoublePair1 = $('<div class="b-foto-double col pair">'),
+                $divDoublePair2 = $('<div class="b-foto-double col pair">'),
+                $fotoPair = $pairedFoto.parent('.b-foto'),
+                $fotoThis = $this.parent('.b-foto'),
+                foto1 = $fotoPair.remove(),
+                foto2 = $fotoThis.remove();
+
+            foto1.appendTo($divDoublePair1);
+            foto2.appendTo($divDoublePair2);
+
+            $divDoublePair2.prependTo($currentFolderWrap);
+            $divDoublePair1.prependTo($currentFolderWrap);
             
-    
-            //console.log('AAA common = ', common, ' ', sorted, ' ', notSorted);
-            if (sorted == 0) {
-                $sorted.removeClass('row');
-            } else {
-                $sorted.addClass('row');
-            }
             
-            for (let i = 0; i <= 12; i++) {
-                $sorted.removeClass('col-' + i);
-                $notSorted.removeClass('col-' + i);
-                $fotoAll.removeClass('col-' + i);
-            }
+            RegroupRemainingFotos($currentFolderWrap);
             
-            sortedCol = configColNumbers[common][sorted][0];
-            notSortedCol = configColNumbers[common][sorted][1];
-            fotoSortedCol = configColNumbers[common][sorted][2];
-            fotoNotSortedCol = configColNumbers[common][sorted][3];
+            return false;
+        }
+         
+        
+        var
+            $divDoublePair = $('<div class="b-foto-double col pair">'),
+            $fotoPair = $pairedFoto.parent('.b-foto'),
+            $fotoThis = $this.parent('.b-foto'),
+            foto1 = $fotoPair.remove(),
+            foto2 = $fotoThis.remove();
+    
+        foto1.appendTo($divDoublePair);
+        foto2.appendTo($divDoublePair);
+        
+        var $doublePaired = $('.b-foto-double.pair', $currentFolderWrap);
+        
+        if ($doublePaired.length > 0) {
+            $divDoublePair.insertAfter($doublePaired.last());
+        } else {
+            $divDoublePair.prependTo($currentFolderWrap);
+        }
+        
+        RegroupRemainingFotos($currentFolderWrap);
+    }
+    
+    function DestroyPair($currentFolderWrap, $pairedFotos)
+    {
+        $pairedFotos.parents('.b-foto-double').removeClass('pair');
+        
+        var countFotosInFolder = $('.b-foto', $currentFolderWrap).length;
+        
+        if (countFotosInFolder == 2) {
+            return false;
+        }
 
-            $sorted.addClass('col-' + sortedCol);
-            $notSorted.addClass('col-' + notSortedCol);
-            $fotoSorted.addClass('col-' + fotoSortedCol);
-            $fotoNotSorted.addClass('col-' + fotoNotSortedCol);
-            
-            
+        if (countFotosInFolder == 3) {
+            return false;
+        }
+        
+        
+        RegroupRemainingFotos($currentFolderWrap);
+    }
+    
+    function RegroupRemainingFotos($currentFolderWrap)
+    {
+        // Перегруппируем оставшиеся фото:
+        var
+            $remainingFotos = $('.b-foto-double:not(.pair) .b-foto', $currentFolderWrap);
+        
+        console.log('AAA $remainingFotos ', $remainingFotos.length);
+        
+        $remainingFotos.remove();
+        $('.b-foto-double:not(.pair)', $currentFolderWrap).remove();
+        
+        
+        if ($remainingFotos.length>0) {
+            var
+                $divDoublePair = $('<div class="b-foto-double col">');
+                
+            $remainingFotos.each(function(ind){
+                //console.log('AAA $remainingFotos ', ind);
+                $(this).appendTo($divDoublePair);
+
+                if (((ind % 2) != 0) && (ind<$remainingFotos.length-1)) {
+                    $divDoublePair.appendTo($currentFolderWrap);
+                    $divDoublePair = $('<div class="b-foto-double col">');
+                }
+            });
+            $divDoublePair.appendTo($currentFolderWrap);
+        }
     }
     
     function ShowFoldersNew()
@@ -281,10 +325,8 @@ $(document).ready(function(){
     $foldersContentWrap.on('click', '.b-foto_inner', function(event, param){
         
         var isEmul = false;
-        if (param) {
-            if (param['data'] == 'emul') {
-                isEmul = true;
-            }
+        if (param && (param['data'] == 'emul')) {
+            isEmul = true;
         }
         
         var
@@ -309,25 +351,13 @@ $(document).ready(function(){
                 //console.log('AAA выбор 2-е фото для пары (пара сформирована)');
                 num = currentNumToSelect[folderName];
                 $pairedFoto = $('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap);
-                $this.addClass('paired');
-                $pairedFoto.addClass('paired');
                 
-                var
-                    $fotoThis = $this.parent('.b-foto'),
-                    $fotoPair = $pairedFoto.parent('.b-foto'),
-                    foto1 = $pairedFoto.parent('.b-foto').remove(),
-                    foto2 = $this.parent('.b-foto').remove();
-
-                $fotoPair.removeClass('order-' + $fotoPair.data('ind') ).addClass('order-' + num);
-                $fotoThis.removeClass('order-' + $fotoThis.data('ind') ).addClass('order-' + (num+5));
-                foto1.appendTo($('.sorted',$currentFolderWrap));
-                foto2.appendTo($('.sorted',$currentFolderWrap));
-                SetDataGroupContents($currentFolderWrap);
+                CreatePair($currentFolderWrap, $pairedFoto, $this);
+                
                 if (!isEmul) {
                     MarkArchFolderViewed(folderName, $this);
                 }
                 
-                
                 currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
                 hasSelectedFoto[folderName] = false;
                 $currentFolderWrap.removeClass('has-selected');
@@ -363,14 +393,9 @@ $(document).ready(function(){
             }
             
             if ($this.hasClass('paired')) {
-                $pairedFotos.each(function(){
-                    var
-                        $this = $(this).parent('.b-foto'),
-                        foto = $this.remove();
-                    $this.removeClass('order-' + pairedNum).removeClass('order-' + (pairedNum+5)).addClass('order-' + $this.data('ind') );
-                    foto.appendTo($('.not-sorted',$currentFolderWrap));
-                });
-                SetDataGroupContents($currentFolderWrap);
+                //console.log('AAA расформировываем пару');
+                DestroyPair($currentFolderWrap, $pairedFotos);
+                
                 MarkArchFolderViewed(folderName, $this);
             }