dynamicweb#86 add RTL support in swiffy-slider.js

heyyo-droid · Mar 1, 2024 · 00a0efb · 00a0efb
1 parent 84b3710
commit 00a0efb
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 24 deletions.
diff --git a/dist/js/swiffy-slider.js b/dist/js/swiffy-slider.js
@@ -45,18 +45,30 @@ const swiffyslider = function() {
             const slides = container.children;
             const gapWidth = parseInt(window.getComputedStyle(container).columnGap);
             const scrollStep = slides[0].offsetWidth + gapWidth;
+
+            const directionSlider = window.getComputedStyle(sliderElement, null).getPropertyValue('direction');
+            let directionFactor = (directionSlider == 'ltr') ? 1 : -1;
+
             let scrollLeftPosition = next ?
-                container.scrollLeft + scrollStep :
-                container.scrollLeft - scrollStep;
+                container.scrollLeft + scrollStep * directionFactor :
+                container.scrollLeft - scrollStep * directionFactor;
             if (fullpage) {
                 scrollLeftPosition = next ?
-                    container.scrollLeft + container.offsetWidth :
-                    container.scrollLeft - container.offsetWidth;
+                    container.scrollLeft + container.offsetWidth * directionFactor :
+                    container.scrollLeft - container.offsetWidth * directionFactor;
+            }
+            if (directionSlider == 'ltr') {
+                if (container.scrollLeft < 1 && !next && !noloop)
+                    scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+                if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop)
+                    scrollLeftPosition = 0;
+            } else {
+                if (container.scrollLeft > -1 && !next && !noloop)
+                    scrollLeftPosition = (container.scrollWidth - container.offsetWidth) * directionFactor;
+                if (container.scrollLeft <= (container.scrollWidth - container.offsetWidth) * directionFactor && next && !noloop)
+                    scrollLeftPosition = 0;
             }
-            if (container.scrollLeft < 1 && !next && !noloop)
-                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
-            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop)
-                scrollLeftPosition = 0;
+
             container.scroll({
                 left: scrollLeftPosition,
                 behavior: nodelay ? "auto" : "smooth"
@@ -78,8 +90,11 @@ const swiffyslider = function() {
             const gapWidth = parseInt(window.getComputedStyle(container).columnGap);
             const scrollStep = container.children[0].offsetWidth + gapWidth;
             const nodelay = sliderElement.classList.contains("slider-nav-nodelay");
+
+            const directionSlider = getComputedStyle(sliderElement, null).getPropertyValue('direction');
+            let directionFactor = (directionSlider == 'ltr') ? 1 : -1;
             container.scroll({
-                left: (scrollStep * slideIndex),
+                left: (scrollStep * slideIndex * directionFactor),
                 behavior: nodelay ? "auto" : "smooth"
             });
         },
@@ -138,4 +153,4 @@ if (!document.currentScript.hasAttribute("data-noinit")) {
             }
         }
     }
-}
+}
diff --git a/dist/js/swiffy-slider.min.js b/dist/js/swiffy-slider.min.js
diff --git a/dist/js/swiffy-slider.min.js.map b/dist/js/swiffy-slider.min.js.map