Add slideshow to gallery

Slideshow solution for PhotoSwipe by jtbr.
Source: dimsemenov/PhotoSwipe#753 (comment)

Change-Id: Ied57db2f109eacbced0f6971263cbcb3062c2bbc

resources/js/photoinit.js

@@ -4,6 +4,11 @@ function initPhotoSwipeFromDOM (gallerySelector) {
 
     let gallery;
 
+    var ssRunning = false,
+        ssOnce = false,
+        ssDelay = 2500 /*ms*/,
+        ssButtonClass = '.pswp__button--playpause';
+
     const parseThumbnailElements = function (container) {
         return $(container).find('>a').map(function () {
             const element = $(this);
@@ -140,6 +145,18 @@ function initPhotoSwipeFromDOM (gallerySelector) {
         gallery.listen('beforeChange', resetMailForm);
         gallery.listen('close', resetMailForm);
 
+        setSlideshowState(ssButtonClass, false /* not running from the start */);
+
+        // start timer for the next slide in slideshow after prior image has loaded
+        gallery.listen('afterChange', function() {
+            if (ssRunning && ssOnce) {
+                ssOnce = false;
+                setTimeout(gotoNextSlide, ssDelay);
+            }
+        });
+        gallery.listen('destroy', function() { gallery = null; });
+
+
         gallery.init();
     };
 
@@ -196,6 +213,31 @@ function initPhotoSwipeFromDOM (gallerySelector) {
         photoBooth.toggleMailDialog(img);
     });
 
+    /* slideshow management */
+    $(ssButtonClass).on('click', function(e) {
+        // toggle slideshow on/off
+        setSlideshowState(this, !ssRunning);
+    });
+
+    function setSlideshowState(el, running) {
+        if (running) {
+            setTimeout(gotoNextSlide, ssDelay / 2.0 /* first time wait less */);
+        }
+        var title = running ? "Pause Slideshow" : "Play Slideshow";
+        $(el).removeClass(running ? "play" : "pause") // change icons defined in css
+            .addClass(running ? "pause" : "play")
+            .prop('title', title);
+        ssRunning = running;
+    }
+
+    function gotoNextSlide() {
+        if (ssRunning && !!gallery) {
+            ssOnce = true;
+            gallery.next();
+            // start counter for next slide in 'afterChange' listener
+        }
+    }
+
     $(gallerySelector).on('click', onThumbnailClick);
 }
 

resources/sass/vendor/_photoswipe.scss

@@ -35,3 +35,22 @@
         width: 100%;
     }
 }
+
+/* set play/pause button */
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /*serve if resolution high enough & browser supports */
+    .pswp--svg .pswp__button--playpause.play, .pswp--svg .pswp__button--playpause.play:before {
+        background-image: url('../img/play-wh.svg');
+    }
+    .pswp--svg .pswp__button--playpause.pause, .pswp--svg .pswp__button--playpause.pause:before {
+        background-image: url('../img/pause-wh.svg');
+    }
+}
+.pswp__button--playpause.play, .pswp__button--playpause.play:before {
+    background: url('../img/play-wh.png') 12px 12px/20px 20px no-repeat;
+}
+.pswp__button--playpause.pause, .pswp__button--playpause.pause:before {
+    background: url('../img/pause-wh.png') 12px 12px/20px 20px no-repeat;
+}
+.pswp__button {
+    outline: none;
+}

template/pswp.template.php

@@ -49,6 +49,9 @@ class="fa fa-times"></i></button>
                 <button class="pswp__button pswp__button--print-chroma-keying" title="Chroma Key"><i class="fa fa-paint-brush"></i></button>
                 <?php endif; ?>
 
+                <!-- custom slideshow button: -->
+                <button class="pswp__button pswp__button--playpause" title="Play Slideshow"></button>
+
                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                 <!-- element will get class pswp__preloader--active when preloader is running -->
                 <div class="pswp__preloader">