From 7211bdb558a33ba3aa6cf9fbd09c7a9a9d16e5e6 Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Thu, 1 Feb 2024 20:36:03 +0100
Subject: [PATCH] unify JS functions

---
 static/js/snap-gallery.js | 66 +++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js
index c7eeb7f..3a3d156 100644
--- a/static/js/snap-gallery.js
+++ b/static/js/snap-gallery.js
@@ -14,44 +14,50 @@ function closeLightbox(id) {
   document.getElementById(lightbox_baseid + id).style.display = "none";
 }
 
+// Move lightbox to the specified item
+function openLightboxItem(id, n) {
+  showItem(lightbox_baseid, id, imageIndex[id] = n, ".snap-lightbox-inner");
+}
+
 // Next/previous controls for lightbox
 function moveLightboxItem(id, n) {
-  showLightboxItem(id, imageIndex[id] += n);
+  showItem(lightbox_baseid, id, imageIndex[id] += n, ".snap-lightbox-inner");
 }
 
 // Next/previous controls for slideshow
 function moveSlideshowItem(id, n) {
-  showSlideshowItem(id, imageIndex[id] += n);
+  showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image");
 }
 
-// Move lightbox to the specified item
-function openLightboxItem(id, n) {
-  showLightboxItem(id, imageIndex[id] = n);
-}
+// In the slideshow or lightbox, make a specific image visible, make others hidden
+function showItem(baseId, id, n, className) {
+  // Get elements that shall be rotated
+  const element = document.getElementById(baseId + id);
+  const items = element.querySelectorAll(className);
 
-// TODO: Unify these functions
-// In the lightbox, make a specific image visible, make others hidden
-function showLightboxItem(id, n) {
-  var i;
-  var lightbox = document.getElementById(lightbox_baseid + id);
-  var images = lightbox.querySelectorAll(".snap-lightbox-inner");
-  if (n > images.length) { imageIndex[id] = 1 }
-  if (n < 1) { imageIndex[id] = images.length }
-  for (i = 0; i < images.length; i++) {
-    images[i].style.display = "none";
-  }
-  images[imageIndex[id] - 1].style.display = "inline-block";
-}
+  // Increment item index
+  const updateIndex = () => {
+    if (n > items.length) {
+      imageIndex[id] = 1;
+    }
+    if (n < 1) {
+      imageIndex[id] = items.length;
+    }
+  };
 
-// In the slideshow, make a specific image visible, make others hidden
-function showSlideshowItem(id, n) {
-  var i;
-  var slideshow = document.getElementById(slideshow_baseid + id);
-  var images = slideshow.querySelectorAll(".snap-image");
-  if (n > images.length) { imageIndex[id] = 1 }
-  if (n < 1) { imageIndex[id] = images.length }
-  for (i = 0; i < images.length; i++) {
-    images[i].style.display = "none";
-  }
-  images[imageIndex[id] - 1].style.display = "block";
+  // hide all selected elements
+  const hideAllItems = () => {
+    for (let i = 0; i < items.length; i++) {
+      items[i].style.display = "none";
+    }
+  };
+
+  // make desired item visible
+  const showCurrentItem = () => {
+    items[imageIndex[id] - 1].style.display = "inline-block";
+  };
+
+  updateIndex();
+  hideAllItems();
+  showCurrentItem();
 }