Add optional auto-slide feature to SlideshowExt

CHANGELOG.md

@@ -28,3 +28,8 @@
 * Abhängigkeiten, ungenutztes CSS und JavaScript der Original-Website
 * Nicht zum Theme gehörende Bilder
 * Twig-Funktion dirFiles
+
+# v0.2.1 (16.09.2023)
+
+## Hinzugefügt
+* SlideshowExt kann die Slideshow zusätzlich zur Benutzerinteraktion auch über JavaScript automatisch abspielen

README.md

@@ -17,7 +17,7 @@ Die folgenden Module können einer modularen Website hinzugefügt werden:
 | -------- | -------- |
 | Autoslideshow | Automatisch ablaufende, einfache Bilder-Slideshow |
 | Boxlist | Zeile aus Kästchen mit Bildern, Links, Titeln und kurzen Beschreibungstexten, für den Abschnitt "Unser Weltenverbund" der Startseite genutzt |
-| Slideshowext | Erweiterte Slideshow mit Bildern, Texten und Links, die manuell durchschritten werden kann |
+| Slideshowext | Erweiterte Slideshow mit Bildern, Texten und Links, die manuell durchschritten werden kann. Kann zusätzlich auch automatisch ablaufen (JavaScript benötigt). |
 | Textbg | Normaler Text (Markdown) mit Hintergrundbild und/oder -Farbe |
 
 ### Optionale Komponenten

blueprints/modular/slideshowext.yaml

@@ -13,6 +13,14 @@ form:
       validate:
         required: true
         type: int
+    header.autoslideinterval:
+      type: text
+      label: Anzeigedauer (AutoSlide)
+      help: 'Zeit in Sekunden, bis automatisch zum nächsten Bild gewechselt wird. 0, um automatische Wechsel zu deaktivieren.'
+      default: 0
+      validate:
+        required: true
+        type: int
     header.slides:
       type: list
       style: vertical

js/slideshowext.js

@@ -0,0 +1,31 @@
+let intervs = {};
+
+function autoslide(el) {
+    let children = el.children('input:checked');
+    let next = children.next('input');
+    if(next.length == 0) {
+        next = el.children('input').first();
+    }
+    next.prop('checked', true);
+}
+
+$(function() {
+    $('.slideshow-ext').each((index, vel) => {
+        let el = $(vel);
+        let interval = Number(el.data('autoslide-interval'));
+        if (interval <= 0) {
+            return;
+        }
+
+        intervs[el] = setInterval(autoslide, interval * 1000, el);
+    });
+
+    $('.slideshow-ext label').on('click', function(event) {
+        let el = event.currentTarget();
+        let interval = Number(el.data('autoslide-interval'));
+        if(interval > 0) {
+            clearInterval(intervs[el]);
+            intervs[el] = setInterval(autoslide, interval * 1000, el);
+        } 
+    });
+}, );

templates/modular/slideshowext.html.twig

@@ -40,11 +40,12 @@
         }
     {% endset %}
     {% do assets.addInlineCss(slideStyle, 90) %}
+    {% if page.header.autoslideinterval > 0 %}{% do assets.addJs('theme://js/slideshowext.js', 90) %}{% endif %}
 {% endblock %}
 <div class="page-cell-fullwidth">
     <div class="text-tab-content grid-prop current-tab">
         <div class="text-inner">
-            <div class="slideshow-ext">
+            <div class="slideshow-ext"{% if page.header.autoslideinterval > 0 %} data-autoslide-interval="{{ page.header.autoslideinterval }}"{% endif %}>
                 {% for image in slides %}
                     <input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} />
                 {% endfor %}