finish up slider (mostly)

2024-08-27 09:10:05 +02:00
parent fba3a837e0
commit e7a8fb1b84
4 changed files with 290 additions and 4 deletions
--- a/components/slider/js/slider.js
+++ b/components/slider/js/slider.js
@@ -0,0 +1,118 @@
+const fetchedElements = document.getElementsByClassName('slider-element');
+const sliderElements = [];
+let okToMove = true;
+let currentSlideIndex = 0;
+const sliderContainer = document.getElementsByClassName('slider-container')[0];
+function sliderGoToIndex(index) {
+    if (okToMove) {
+        if (index < sliderElements.length && index >= 0) {
+            okToMove = false;
+            // Determine next and previous elements
+            let previousElement = 0;
+            let nextElement = 0;
+            if (index < sliderElements.length - 1) {
+                nextElement = index + 1;
+            }
+            else {
+                nextElement = 0;
+            }
+            if (index === 0) {
+                previousElement = sliderElements.length - 1;
+            }
+            else {
+                previousElement = index - 1;
+            }
+            // Determine move direction:
+            // true = next, false = previous
+            let moveDirection = true;
+            if ((index < currentSlideIndex || (index === sliderElements.length - 1 && currentSlideIndex === 0)) && !(index === 0 && currentSlideIndex === sliderElements.length - 1)) {
+                moveDirection = false;
+            }
+            /*
+                Add correct classes to all elements
+            */
+            // New current element
+            sliderElements[index].classList.add('current');
+            sliderElements[index].classList.remove('next');
+            sliderElements[index].classList.remove('past');
+            // New next element
+            if (moveDirection) {
+                sliderElements[nextElement].classList.add('future');
+            }
+            else {
+                sliderElements[nextElement].classList.add('next');
+            }
+            sliderElements[nextElement].classList.remove('current');
+            sliderElements[nextElement].classList.remove('past');
+            // new past element
+            sliderElements[previousElement].classList.add('past');
+            sliderElements[previousElement].classList.remove('current');
+            sliderElements[previousElement].classList.remove('next');
+            // Glitch fixes
+            setTimeout(() => {
+                if (moveDirection) {
+                    sliderElements[nextElement].classList.add('next');
+                    sliderElements[nextElement].classList.remove('future');
+                }
+                currentSlideIndex = index;
+                setTimeout(() => {
+                    okToMove = true;
+                }, 750);
+            }, 1000);
+        }
+        else if (index < 0) {
+            sliderGoToIndex(sliderElements.length - 1);
+        }
+        else {
+            sliderGoToIndex(0);
+        }
+    }
+}
+function sliderControl(action) {
+    if (action === 'next') {
+        sliderGoToIndex(currentSlideIndex + 1);
+    }
+    else if (action === 'previous') {
+        sliderGoToIndex(currentSlideIndex - 1);
+    }
+    sliderAutoAdvance();
+}
+let sliderAutoAdvanceInterval = 0;
+let sliderInterval = 0;
+function activateSlider(interval) {
+    sliderAutoAdvanceInterval = interval;
+    sliderContainer.addEventListener('mouseenter', () => {
+        stopSliderAutoAdvance();
+    });
+    sliderContainer.addEventListener('mouseleave', () => {
+        sliderAutoAdvance();
+    });
+    document.addEventListener('blur', () => {
+        stopSliderAutoAdvance();
+    });
+    window.addEventListener('focus', () => {
+        sliderAutoAdvance();
+    });
+    sliderAutoAdvance();
+}
+const sliderAutoAdvance = () => {
+    if (sliderAutoAdvanceInterval > 0) {
+        stopSliderAutoAdvance();
+        sliderInterval = setInterval(() => {
+            sliderGoToIndex(currentSlideIndex + 1);
+        }, sliderAutoAdvanceInterval);
+    }
+};
+const stopSliderAutoAdvance = () => {
+    try {
+        clearInterval(sliderInterval);
+    }
+    catch (e) { }
+    ;
+};
+for (let el in fetchedElements) {
+    if (fetchedElements[el].className) {
+        sliderElements.push(fetchedElements[el]);
+    }
+}
+sliderGoToIndex(0);