Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-07-05 14:06:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

keyboard support in the lightbox

Browse Source
This commit is contained in:
Karl 2025-06-30 14:28:27 +01:00
parent 0b7e0ca59d
commit 33404c7a37
2 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
routes/gallery_routes.py
View File

@ -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)
else:
favourites.append(filename)
is_favourited = True
save_favourites(favourites)
return jsonify({"status": "success"})
return jsonify({"status": "success", "favourited": is_favourited})

31
templates/gallery.html
View File

@ -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,14 +321,19 @@
.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();
}
}
});
}
@ -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>