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
+// In the slideshow or lightbox, make a specific image visible, make others hidden
-function openLightboxItem(id, n) {
+function showItem(baseId, id, n, className) {
-  showLightboxItem(id, imageIndex[id] = n);
+  // Get elements that shall be rotated
-}
+  const element = document.getElementById(baseId + id);
+  const items = element.querySelectorAll(className);
 
-// TODO: Unify these functions
+  // Increment item index
-// In the lightbox, make a specific image visible, make others hidden
+  const updateIndex = () => {
-function showLightboxItem(id, n) {
+    if (n > items.length) {
-  var i;
+      imageIndex[id] = 1;
-  var lightbox = document.getElementById(lightbox_baseid + id);
+    }
-  var images = lightbox.querySelectorAll(".snap-lightbox-inner");
+    if (n < 1) {
-  if (n > images.length) { imageIndex[id] = 1 }
+      imageIndex[id] = items.length;
-  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";
-}
 
-// In the slideshow, make a specific image visible, make others hidden
+  // hide all selected elements
-function showSlideshowItem(id, n) {
+  const hideAllItems = () => {
-  var i;
+    for (let i = 0; i < items.length; i++) {
-  var slideshow = document.getElementById(slideshow_baseid + id);
+      items[i].style.display = "none";
-  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++) {
+  // make desired item visible
-    images[i].style.display = "none";
+  const showCurrentItem = () => {
-  }
+    items[imageIndex[id] - 1].style.display = "inline-block";
-  images[imageIndex[id] - 1].style.display = "block";
+  };
+
+  updateIndex();
+  hideAllItems();
+  showCurrentItem();
 }