From 33404c7a37f933ea1a29f1dd0167726d9f94cfd6 Mon Sep 17 00:00:00 2001
From: Karl <karl@k-world.me.uk>
Date: Mon, 30 Jun 2025 14:28:27 +0100
Subject: [PATCH] keyboard support in the lightbox

---
 routes/gallery_routes.py | 26 +++++++++-----------------
 templates/gallery.html   | 39 ++++++++++++++++++++++++++++-----------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/routes/gallery_routes.py b/routes/gallery_routes.py
index a8673b7..84c1017 100644
--- a/routes/gallery_routes.py
+++ b/routes/gallery_routes.py
@@ -31,28 +31,20 @@ def gallery():
 def get_favourites_route():
     return jsonify(get_favourites())
 
-@bp.route("/favourites/add", methods=["POST"])
-def add_favourite():
-    data = request.get_json()
-    filename = data.get("filename")
-    if not filename:
-        return jsonify({"status": "error", "message": "Filename missing"}), 400
-    
-    favourites = get_favourites()
-    if filename not in favourites:
-        favourites.append(filename)
-        save_favourites(favourites)
-    return jsonify({"status": "success"})
-
-@bp.route("/favourites/remove", methods=["POST"])
-def remove_favourite():
+@bp.route("/favourites/toggle", methods=["POST"])
+def toggle_favourite():
     data = request.get_json()
     filename = data.get("filename")
     if not filename:
         return jsonify({"status": "error", "message": "Filename missing"}), 400
         
     favourites = get_favourites()
+    is_favourited = False
     if filename in favourites:
         favourites.remove(filename)
-        save_favourites(favourites)
-    return jsonify({"status": "success"})
+    else:
+        favourites.append(filename)
+        is_favourited = True
+        
+    save_favourites(favourites)
+    return jsonify({"status": "success", "favourited": is_favourited})
diff --git a/templates/gallery.html b/templates/gallery.html
index 1ec1829..9e987da 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -204,7 +204,7 @@
     <div class="gallery" id="gallery"></div>
 
     <!-- Lightbox -->
-    <div class="lightbox" id="lightbox">
+    <div class="lightbox" id="lightbox" tabindex="-1" onkeyup="handleLightboxKeys(event)">
         <span class="close" onclick="closeLightbox()">&times;</span>
         <span class="favourite-heart" id="favourite-heart" onclick="toggleFavourite()">&#9825;</span>
         <span class="arrow left" onclick="prevImage()">&#10094;</span>
@@ -297,7 +297,9 @@
             const images = getGalleryImages();
             currentIndex = images.indexOf(imgEl);
             showImageAndLoadDetails(currentIndex);
-            document.getElementById("lightbox").style.display = "flex";
+            const lightbox = document.getElementById("lightbox");
+            lightbox.style.display = "flex";
+            lightbox.focus();
         }
 
         function updateFavouriteHeart(isFavourited) {
@@ -310,10 +312,8 @@
             const images = getGalleryImages();
             const imgEl = images[currentIndex];
             const filename = imgEl.dataset.filename;
-            let isFavourited = imgEl.dataset.favourited === 'true';
 
-            const url = isFavourited ? '/favourites/remove' : '/favourites/add';
-            fetch(url, {
+            fetch('/favourites/toggle', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ filename: filename })
@@ -321,17 +321,22 @@
             .then(response => response.json())
             .then(data => {
                 if (data.status === 'success') {
-                    isFavourited = !isFavourited;
+                    const isFavourited = data.favourited;
                     imgEl.dataset.favourited = isFavourited;
                     updateFavouriteHeart(isFavourited);
-                    // Update the main image list
+                    
                     const originalImage = allImages.find(img => img.filename === filename);
                     if (originalImage) {
                         originalImage.favourited = isFavourited;
-                   }
-               }
-           });
-       }
+                    }
+                    
+                    if (showingFavourites) {
+                        filteredImages = allImages.filter(img => img.favourited);
+                        renderGallery();
+                    }
+                }
+            });
+        }
 
         function showImageAndLoadDetails(index) {
             const images = getGalleryImages();
@@ -404,6 +409,18 @@
                 }
             }
         }
+
+        function handleLightboxKeys(e) {
+            if (e.key === 'f') {
+                toggleFavourite();
+            } else if (e.key === 'Escape') {
+                closeLightbox();
+            } else if (e.key === 'ArrowLeft') {
+                prevImage();
+            } else if (e.key === 'ArrowRight') {
+                nextImage();
+            }
+        }
     </script>
 </body>