Add initial onboarding app package

2026-04-27 20:41:37 +02:00 · 2023-12-19 09:13:33 +01:00
parent 4663645212
commit 70dd482276
9 changed files with 369 additions and 0 deletions
@@ -0,0 +1,90 @@
+class Slider {
+
+    element;
+    slides;
+    template;
+    data;
+    activeSlide = 0;
+    slideDuration;
+    autoplayInterval;
+    ip;
+
+    constructor(element, template, data, slideDuration = 10000) {
+        this.element = document.querySelector(element);
+        this.template = document.querySelector(template);
+        this.data = data;
+        this.slideDuration = slideDuration;
+        this.ip = location.host;
+
+        // append slides
+        for (let i = 0; i < this.data.length; i++) {
+            let slide = this.template.content.cloneNode(true);
+            let type = this.data[i].image.split('.').pop().toLowerCase();
+
+            switch (type) {
+                // image
+                case "png":
+                case "jpg":
+                case "webp":
+                case "gif":
+                    let img = document.createElement("img");
+                    img.src = this.data[i].image;
+                    slide.querySelector(".image").appendChild(img);
+                    break;
+
+                case "mp4":
+                case "webm":
+                    let video = document.createElement("video");
+                    video.autoplay = true;
+                    video.loop = true;
+                    video.muted = true;
+                    video.src = "./slides/" + this.data[i].image;
+                    slide.querySelector(".image").appendChild(video);
+                    break;
+
+                default:
+                    break;
+            }
+
+            // texts
+            let hasText = this.data[i].title || this.data[i].description;
+            if (hasText) {
+                let title = slide.querySelector(".description h1");
+                let description = slide.querySelector(".description p");
+                title.textContent = this.data[i].title;
+                description.textContent = this.data[i].description;
+            }
+
+            // slide
+            let newslide = this.element.appendChild(slide);
+            let slideNode = document.querySelector(element + " .slide:last-child");
+            slideNode.id = "slide-" + i;
+            slideNode.classList.toggle("no-text", !hasText);
+        }
+
+        // observe scroll position
+        this.element.onscroll = e => this.onScroll(e);
+
+        // start auto play
+        this.autoplayInterval = setInterval(() => { this.next(); }, this.slideDuration);
+    }
+
+    onScroll(e) {
+        this.activeSlide = Math.round(e.target.scrollLeft / 640);
+    }
+
+    next() {
+        let targetSlide = this.activeSlide >= (this.data.length - 1) ? 0 : this.activeSlide + 1;
+        this.element.scrollTo(targetSlide * 640, 0);
+    }
+
+    previous() {
+        let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1
+        this.element.scrollTo(targetSlide * 640, 0);
+    }
+
+    stop() {
+        clearInterval(this.autoplayInterval);
+    }
+
+}