Refactor logic

renamed slideshow() to update(), which is called each interval in setInterval
transition logic moved to getNextSlide() and fadeInImage()

Author: dustymethod

BrowserImageSlideshow.html

@@ -19,7 +19,6 @@
         height: 100%;
         border-color: transparent;
     }
-
     body {
         background-color: transparent;
         margin: auto;
@@ -31,7 +30,7 @@
 <script src="images/images.js"></script>
 <script src="settings.js"></script>
 <script>
-    
+
     // modes (defined in settings.js):
     // 0: Random order (default)
     // 1: Alphabetical order
@@ -55,7 +54,7 @@
         images[i] = "images/" + images[i];
         indexes.push(i);
     }
-    
+
     // setup img elements
     let topImage = document.createElement("img");
     let botImage = document.createElement("img");
@@ -64,7 +63,7 @@
     imageContainer.appendChild(topImage);
     topImage.id = "topImage";
     botImage.id = "botImage";
-    
+
     // prevent white outline by setting initial transparency
     topImage.style.opacity = "0.0";
     botImage.style.opacity = "0.0";
@@ -85,79 +84,63 @@
     function randomizeIndex(max) {
         index = Math.floor(Math.random() * max); // [0, max)
     }
-    
-    function nextSlide() {
+
+    function update() {
         if (index === images.length-1 && stopOnLastImage === true) {
-            clearInterval(slideshowFunc); // stop slideshow on last slide
-        } else {
-            if (index === images.length-1) { // if end of loop, start new loop
-                if (mode === 0) {
-                    shuffle(indexes);
-                } else if (mode === 2) {
-                    randomizeIndex(images.length);
-                }
-                index = 0;
-            } else { // next slide
-                index++;
-            }
+            clearInterval(slideshowFunc);
+            return;
         }
-
-        fadeInTop = !fadeInTop;
+        getNextSlide();
     }
-    
-    function slideshow() {
-        if (fadeInTop) {
-            topImage.src = images[indexes[index]];
-            
-            $("#botImage").animate(
-                { opacity: 0.0 },
-                { duration: fadeDuration }
-            );
-            
-            $("#topImage").animate(
-                { opacity: 1.0 },
-                {
-                    duration: fadeDuration,
-                    done: nextSlide
-                }
-            );
-
-        } else {
-            botImage.src = images[indexes[index]];
-            
-            $("#botImage").animate(
-                { opacity: 1.0 },
-                { duration: fadeDuration }
-            );
-            
-            $("#topImage").animate(
-                { opacity: 0.0 },
-                {
-                    duration: fadeDuration,
-                    done: nextSlide
-                }
-            );
+
+    function getNextSlide() {
+        index = index === images.length - 1 ? 0 : index + 1;
+        if (index === 0 && mode === 0) {
+            shuffle(indexes);
         }
+        
+        let imageSrc = images[indexes[index]];
+        fadeInImage(imageSrc);
     }
-    
+
+    function fadeInImage(imageSrc) {
+        if (fadeInTop) { topImage.src = imageSrc; }
+        else { botImage.src = imageSrc; }
+        
+        const botTarget = fadeInTop ? 0.0 : 1.0;
+        const topTarget = fadeInTop ? 1.0 : 0.0;
+        
+        $("#botImage").animate(
+            { opacity: botTarget },
+            { duration: fadeDuration }
+        );
+
+        $("#topImage").animate(
+            { opacity: topTarget },
+            { duration: fadeDuration }
+        );
+        
+        fadeInTop = !fadeInTop;
+    }
+
     if (mode === 0) { // random mode
         shuffle(indexes);
     } else if (mode === 2) { // choose random image to start on
         randomizeIndex(images.length);
     }
 
     // if only 1 image in slide show, fade in the image
-    if (images.length == 1) {
+    if (images.length > 0) {
         botImage.src = images[indexes[0]];
 
         $("#botImage").animate(
             { opacity: 1.0 },
             { duration: fadeDuration }
         );
+    }
 
-    // else start the slideshow
-    } else if (images.length > 1) {
-        slideshow();
-        slideshowFunc = setInterval(slideshow, slideDuration);
+    // start slideshow
+    if (images.length > 1) {
+        slideshowFunc = setInterval(update, slideDuration);
     }
 </script>