From 1d7feaf4a5569efb45fa1532d5c784fa4fb1815d Mon Sep 17 00:00:00 2001
From: Anonymous Contributor <anonymous@invalid>
Date: Sat, 16 Sep 2023 18:24:27 +0200
Subject: [PATCH] Add optional auto-slide feature to SlideshowExt

---
 CHANGELOG.md                             |  7 +++++-
 README.md                                |  2 +-
 blueprints/modular/slideshowext.yaml     |  8 ++++++
 js/slideshowext.js                       | 31 ++++++++++++++++++++++++
 templates/modular/slideshowext.html.twig |  3 ++-
 5 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 js/slideshowext.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fdb5e9..b7075ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,4 +27,9 @@
 ## Entfernt
 * Abhängigkeiten, ungenutztes CSS und JavaScript der Original-Website
 * Nicht zum Theme gehörende Bilder
-* Twig-Funktion dirFiles
\ No newline at end of file
+* Twig-Funktion dirFiles
+
+# v0.2.1 (16.09.2023)
+
+## Hinzugefügt
+* SlideshowExt kann die Slideshow zusätzlich zur Benutzerinteraktion auch über JavaScript automatisch abspielen
\ No newline at end of file
diff --git a/README.md b/README.md
index cf47a96..5235b9b 100644
--- a/README.md
+++ b/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
diff --git a/blueprints/modular/slideshowext.yaml b/blueprints/modular/slideshowext.yaml
index 74cd9f5..e13ab52 100644
--- a/blueprints/modular/slideshowext.yaml
+++ b/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
diff --git a/js/slideshowext.js b/js/slideshowext.js
new file mode 100644
index 0000000..ad156b2
--- /dev/null
+++ b/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);
+        } 
+    });
+}, );
\ No newline at end of file
diff --git a/templates/modular/slideshowext.html.twig b/templates/modular/slideshowext.html.twig
index 71e6fa5..e03a7dd 100644
--- a/templates/modular/slideshowext.html.twig
+++ b/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 %}