Issue #86 Add RTL support to swiffy-slider library

.vscode/settings-linux.json

@@ -0,0 +1,66 @@
+{
+    "workbench.colorTheme": "Tomorrow Night Blue",
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[html]": {
+        "editor.defaultFormatter": "vscode.html-language-features"
+    },
+    "files.associations": {
+        "*.cshtml": "razor"
+    },
+    "html.format.wrapLineLength": 0,
+    "liveServer.settings.donotShowInfoMsg": true,
+    "liveServer.settings.root": "/docs",
+    "liveServer.settings.CustomBrowser": "chrome",
+    "es6-css-minify.cssMinPath": "/dist/css",
+    "es6-css-minify.genCSSmap": true,
+    "es6-css-minify.genJSmap": true,
+    "es6-css-minify.jsMinPath": "/dist/js",
+    "es6-css-minify.minifyOnSave": "yes",
+    "es6-css-minify.enableAutoprefixer": true,
+    "es6-css-minify.enableAutoprefixerSelection": true,
+    "es6-css-minify.js": {
+        "mangle": true,
+        "compress": {
+            "unused": true
+        },
+        "output": {
+            "quote_style": 0
+        },
+        "warnings": true
+    },
+    "es6-css-minify.css": {
+        "rebase": false
+    },
+    "emeraldwalk.runonsave": {
+        "commands": [
+            {
+                "match": ".*",
+                "isAsync": true,
+                "cmd": "echo 'File saved: ${file} '"
+            },
+            {
+                "match": "src/.*js$",
+                "isAsync": true,
+                "cmd": "sleep .1 && cp src/*.js dist/js/"
+            },
+            {
+                "match": "src/.*css$",
+                "isAsync": true,
+                "cmd": "sleep .1 && cp src/*.css dist/css/"
+            },
+            {
+                "match": ".css$",
+                "isAsync": true,
+                "cmd": "sleep .6 && cp  dist/css/*.min.* docs/assets/css/"
+            },
+            {
+                "match": ".js$",
+                "isAsync": true,
+                "cmd": "sleep .3 && cp  dist/js/*.min.* docs/assets/js/"
+            },
+        ]
+    },
+    "liveServer.settings.port": 5501
+}

dist/css/swiffy-slider.css

@@ -90,7 +90,7 @@
 .slider-item-ratio .slider-container>*>* {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -102,7 +102,7 @@
 
 .slider-item-ratio .slider-container>*::after {
     display: block;
-    padding-top: calc( 100% / (var(--swiffy-slider-item-ratio)));
+    padding-block-start: calc( 100% / (var(--swiffy-slider-item-ratio)));
     content: "";
 }
 
@@ -148,9 +148,9 @@
 
 .slider-indicators {
     position: absolute;
-    right: 2rem;
+    inset-inline-end: 2rem;
     bottom: 0;
-    left: 2rem;
+    inset-inline-start: 2rem;
     display: flex;
     justify-content: center;
     padding: 0;
@@ -217,7 +217,7 @@
 .slider-nav {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     bottom: 0;
     border: 0;
     background-color: transparent;
@@ -251,6 +251,9 @@
     width: 3rem;
     height: 3rem;
 }
+[dir=rtl] .slider-nav::after {
+    transform: rotate(180deg);
+}
 
 .slider-nav-arrow .slider-nav::after {
     mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>");
@@ -339,10 +342,13 @@
 .slider-nav.slider-nav-next::after {
     transform: rotate(180deg);
 }
+[dir=rtl] .slider-nav.slider-nav-next::after {
+    transform: unset;
+}
 
 .slider-nav.slider-nav-next {
-    right: 0;
-    left: unset;
+    inset-inline-end:0;
+    inset-inline-start: unset;
 }
 
 .slider-nav-visible .slider-nav {
@@ -482,24 +488,24 @@
         content: " ";
         display: block;
         position: absolute;
-        left: calc((var(--swiffy-slider-item-gap)/2)*-1);
+        inset-inline-start: calc((var(--swiffy-slider-item-gap)/2)*-1);
         top: 0;
         /*FF fix setting w+h to 1 px - otherwise snap will not occur*/
         width: 1px;
         height: 1px;
         scroll-snap-align: var(--swiffy-slider-snap-align);
     }
     .slider-nav-outside-expand .slider-nav {
-        margin-left: -4rem;
+        margin-inline-start: -4rem;
     }
     .slider-nav-outside-expand .slider-nav.slider-nav-next {
-        margin-right: -4rem;
+        margin-inline-end: -4rem;
     }
     .slider-nav-sm.slider-nav-outside-expand .slider-nav {
-        margin-left: -3.5rem;
+        margin-inline-start: -3.5rem;
     }
     .slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next {
-        margin-right: -3.5rem;
+        margin-inline-end: -3.5rem;
     }
     .slider-indicators-sm.slider-indicators {
         display: none;
@@ -535,7 +541,7 @@
         content: " ";
         display: block;
         position: absolute;
-        left: calc((var(--swiffy-slider-item-gap)/2)*-1);
+        inset-inline-start: calc((var(--swiffy-slider-item-gap)/2)*-1);
         top: 0;
         /*FF fix setting w+h to 1 px - otherwise snap will not occur*/
         width: 1px;
@@ -609,4 +615,4 @@
     .slider-item-nosnap-touch {
         --swiffy-slider-snap-align: unset;
     }
-}
+}

dist/js/swiffy-slider.esm.js

@@ -49,19 +49,27 @@ export 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;
-            }
-            if (container.scrollLeft < 1 && !next && !noloop) {
-                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+                    container.scrollLeft + container.offsetWidth * directionFactor :
+                    container.scrollLeft - container.offsetWidth * directionFactor;
             }
-            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
-                scrollLeftPosition = 0;
+            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;
             }
             container.scroll({
                 left: scrollLeftPosition,
@@ -84,8 +92,11 @@ export 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"
             });
         },
@@ -131,4 +142,4 @@ export const swiffyslider = function() {
             }
         }
     };
-}();
+}();