Навигация клавиатурой по сетам

src/public/css/styles-main.css

@@ -149,9 +149,13 @@
     
 .b-foto {
     padding: 4px;
-    
 }
 
+    .b-foto.focus {
+        background-color: #717171;
+        border-radius: 6px;
+    }
+
     .b-foto_inner {
         position: relative;
         border-radius: 4px;
@@ -160,6 +164,7 @@
         height: calc(50vh - 30px);
     }
     
+    
     .b-foto_inner-fict
         {
         height: calc(50vh - 30px);
@@ -196,6 +201,13 @@
                 {
                 border-width: 4px;
                 }
+            
+                /*
+            .b-foto_inner.focus .b-foto_border
+                {
+                border-width: 4px;
+                border-color: #F8F9FA;
+                }*/
         
         .b-foto_number {
             display: none;

src/public/fotos.dat

-{"10-foto":{"1":["a1654670926-1.jpg","a1654670926-10.jpg"],"2":["a1654670926-2.jpg","a1654670926-3.jpg"],"3":["a1654670926-4.jpg","a1654670926-5.jpg"]},"2-foto":{"1":["a1654670926-1.jpg","a1654670926-2.jpg"]},"3-foto":{"1":["a1654665594-1.jpg","a1654665594-2.jpg"]},"4-foto":{"1":["a1654663117-1.jpg","a1654663117-2.jpg"]},"5-foto":"","6-foto":{"1":["a1654670995-1.jpg","a1654670995-3.jpg"],"2":["a1654670995-2.jpg","a1654670995-4.jpg"]},"7-foto":"","8-foto":"","9-foto":"","B-KazwCAcxM":{"1":["a1654670926-1.jpg","a1654670926-4.jpg"],"2":["a1654670926-2.jpg","a1654670926-3.jpg"]},"B24WGzEo8v_":"","B9RwSi4oPAh":""}
\ No newline at end of file

src/public/js/script-main.js

@@ -14,7 +14,7 @@ $(document).ready(function(){
         $saveButton = $('.btn.btn-primary.save-folders'),
         colorsActive = $foldersContentWrap.data('colors'),
         pairsCount = $foldersContentWrap.data('pairs_count'),
-        storageName = 'im_fotos',
+        storageName = 'im_fotos1',
         dataLS = null,
         folderTypeStorage = null,
         folderStorage = null,
@@ -90,7 +90,7 @@ $(document).ready(function(){
                 '   <% } %>' +
                 '   <% }) %>  \n' +
                 '   <% if ((files.length % 2) != 0) { %>' +
-                '   <div class="b-foto"><div class="b-foto_inner-fict"></div></div>' +
+                '   <div class="b-foto fict"><div class="b-foto_inner-fict"></div></div>' +
                 '   <% } %>' +
                 '   </div>' +
                 '</div>'
@@ -135,7 +135,7 @@ $(document).ready(function(){
     
     function SetPairedFotos(folderName, folderType)
     {
-        console.log('AAA SetPairedFotos ', folderName, folderType);
+        //console.log('AAA SetPairedFotos ', folderName, folderType);
 
         var sourceData = null;
 
@@ -351,13 +351,13 @@ $(document).ready(function(){
                 type: $('.b-list_folders.active').data('type'),
             };
     
-        console.log('AAA SaveLsState ', data);
+        //console.log('AAA SaveLsState ', data);
         localStorage.setItem(storageName, JSON.stringify(data));
     }
     
     function SetStateFromLs()
     {
-        console.log('AAA SetStateFromLs');
+        //console.log('AAA SetStateFromLs');
         
         dataLS = JSON.parse(localStorage.getItem(storageName));
         folderTypeStorage = dataLS.type;
@@ -375,7 +375,15 @@ $(document).ready(function(){
                 $('.b-list_folders-item[data-folder="' + item + '"] b', $listFolders).text(Object.keys(dataStorage[item]).length);
             }
         });
-        $('.b-list_folders-item[data-folder="' + folderStorage + '"]').trigger( "click", {data: 'emul'});
+        
+        if (folderTypeStorage == 'new')     ShowFoldersNew();
+        if (folderTypeStorage == 'arch')    ShowFoldersArch();
+        
+        var $curFolder = $('.b-list_folders-item[data-folder="' + folderStorage + '"]');
+        $curFolder.parents('.b-list_folders').animate({
+            scrollTop: $curFolder.offset().top
+        }, 100);
+        $curFolder.trigger( "click", {data: 'emul'});
 
         $saveButton.removeClass('disabled');
     }
@@ -468,10 +476,10 @@ $(document).ready(function(){
         {
             var
                 $activeFolder = $('.b-preview_inner.active .b-folder-content.active', $foldersContentWrap),
-                $fotos = $('.b-foto_inner', $activeFolder);
+                $fotoFocused = $('.b-foto.focus', $activeFolder);
                 
-            if ($fotos.length == 2) {
-                $fotos.first().click();
+            if ($fotoFocused.length>0) {
+                $('.b-foto_inner', $fotoFocused).click();
             }
         }
         
@@ -479,8 +487,15 @@ $(document).ready(function(){
         if (e.keyCode == 40)
         {
             var
-                $activeFolderItemList = $('.b-list_folders-item.active'),
+                $activeFolderList = $('.b-list_folders.active'),
+                $activeFolderItemList = $('.b-list_folders-item.active', $activeFolderList),
+                $nextFolderItem;
+            
+            if ($activeFolderItemList.length>0) {
                 $nextFolderItem = $activeFolderItemList.next();
+            } else {
+                $nextFolderItem = $('.b-list_folders-item', $activeFolderList).first();
+            }
             
             $nextFolderItem.click();
         }
@@ -489,11 +504,96 @@ $(document).ready(function(){
         if (e.keyCode == 38)
         {
             var
-                $activeFolderItemList = $('.b-list_folders-item.active'),
+                $activeFolderList = $('.b-list_folders.active'),
+                $activeFolderItemList = $('.b-list_folders-item.active', $activeFolderList),
+                $previousFolderItem;
+            
+            if ($activeFolderItemList.length>0) {
                 $previousFolderItem = $activeFolderItemList.prev();
+            } else {
+                $previousFolderItem = $('.b-list_folders-item', $activeFolderList).first();
+            }
             
             $previousFolderItem.click();
         }
+        
+        // Влево
+        if (e.keyCode == 37)
+        {
+            var
+                $activePreviewInner = $('.b-preview_inner.active'),
+                $folderContent = $('.b-folder-content.active', $activePreviewInner),
+                $fotoFocused = $('.b-foto.focus', $folderContent),
+                $prevFoto,
+                unFocusAll = false;
+                
+            if ($fotoFocused.length>0) {
+                var
+                    $double = $fotoFocused.parents('.b-foto-double'),
+                    $prevDouble = $double.prev('.b-foto-double');
+                
+                if ($fotoFocused.index($('.b-foto', $double)) == 0) {
+                    if ($prevDouble.length>0) {
+                        $prevFoto = $('.b-foto', $prevDouble).first();
+                    } else {
+                        //$prevFoto = $fotoFocused;
+                        unFocusAll = true;
+                    }
+                } else {
+                    if ($prevDouble.length>0) {
+                        $prevFoto = $('.b-foto', $prevDouble).last();
+                        if ($prevFoto.hasClass('fict')) $prevFoto = $fotoFocused;
+                    } else {
+                        $prevDouble = $('.b-foto-double', $folderContent).last();
+                        $prevFoto = $('.b-foto', $prevDouble).first();
+                    }
+                }
+            }
+            
+            $('.b-foto', $folderContent).removeClass('focus');
+            if (!unFocusAll) {
+                $prevFoto.addClass('focus');
+            }
+        }
+        
+        // Вправо
+        if (e.keyCode == 39)
+        {
+            var
+                $activePreviewInner = $('.b-preview_inner.active'),
+                $folderContent = $('.b-folder-content.active', $activePreviewInner),
+                $fotoFocused = $('.b-foto.focus', $folderContent),
+                $nextFoto;
+                
+            if ($fotoFocused.length>0) {
+                var
+                    $double = $fotoFocused.parents('.b-foto-double'),
+                    $nextDouble = $double.next('.b-foto-double');
+                
+                if ($fotoFocused.index($('.b-foto', $double)) == 0) {
+                    if ($nextDouble.length>0) {
+                        $nextFoto = $('.b-foto', $nextDouble).first();
+                    } else {
+                        $nextDouble = $('.b-foto-double', $folderContent).first();
+                        $nextFoto = $('.b-foto', $nextDouble).last();
+                    }
+                } else {
+                    if ($nextDouble.length>0) {
+                        $nextFoto = $('.b-foto', $nextDouble).last();
+                        if ($nextFoto.hasClass('fict')) $nextFoto = $fotoFocused;
+                    } else {
+                        $nextFoto = $fotoFocused;
+                    }
+                }
+                
+            } else {
+                $nextFoto = $('.b-foto', $folderContent).first();
+            }
+            
+            $('.b-foto', $folderContent).removeClass('focus');
+            $nextFoto.addClass('focus');
+        }
+        
     
     });
     
@@ -668,6 +768,8 @@ $(document).ready(function(){
         
         SaveLsState();
         
+        $selectFoldersType.blur(); // убираем фокус
+        
         // Загрузка списка папок:
         /*
         if ($('li', $('.b-list_folders.' + type)).length == 0) {