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 %}