feat(rtl): Add Support for right to left slides (SSENSE#394)

* feat(rtl): support rtl direction * chore(build): build library * fix(rtl): add extra slides based on drag momentum
mostafafallahi · Mar 21, 2019 · 5245812 · 5245812
1 parent c85df61
commit 5245812
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/dist/vue-carousel.min.js b/dist/vue-carousel.min.js
diff --git a/docs/themes/vue/source/js/vue-carousel.min.js b/docs/themes/vue/source/js/vue-carousel.min.js
diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -329,6 +329,13 @@ export default {
      */
     value: {
       type: Number
+    },
+    /**
+     * Support right to left
+     */
+    rtl: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -433,6 +440,8 @@ export default {
     currentOffset() {
       if (this.isCenterModeEnabled) {
         return 0;
+      } else if (this.rtl) {
+        return (this.offset - this.dragOffset) * 1;
       } else {
         return (this.offset + this.dragOffset) * -1;
       }
@@ -756,7 +765,11 @@ export default {
         this.dragOffset = this.dragOffset + Math.sign(deltaX) * (width / 2);
       }
 
-      this.offset += this.dragOffset;
+      if (this.rtl) {
+        this.offset -= this.dragOffset;
+      } else {
+        this.offset += this.dragOffset;
+      }
       this.dragOffset = 0;
       this.dragging = false;
 
@@ -794,10 +807,19 @@ export default {
 
       this.dragOffset = newOffsetX;
       const nextOffset = this.offset + this.dragOffset;
-      if (nextOffset < 0) {
-        this.dragOffset = -Math.sqrt(-this.resistanceCoef * this.dragOffset);
-      } else if (nextOffset > this.maxOffset) {
-        this.dragOffset = Math.sqrt(this.resistanceCoef * this.dragOffset);
+
+      if (this.rtl) {
+        if (this.offset == 0 && this.dragOffset > 0) {
+          this.dragOffset = Math.sqrt(this.resistanceCoef * this.dragOffset);
+        } else if (this.offset == this.maxOffset && this.dragOffset < 0) {
+          this.dragOffset = -Math.sqrt(-this.resistanceCoef * this.dragOffset);
+        }
+      } else {
+        if (nextOffset < 0) {
+          this.dragOffset = -Math.sqrt(-this.resistanceCoef * this.dragOffset);
+        } else if (nextOffset > this.maxOffset) {
+          this.dragOffset = Math.sqrt(this.resistanceCoef * this.dragOffset);
+        }
       }
     },
     onResize() {
@@ -813,11 +835,19 @@ export default {
     },
     render() {
       // add extra slides depending on the momemtum speed
-      this.offset +=
-        Math.max(
-          -this.currentPerPage + 1,
-          Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
-        ) * this.slideWidth;
+      if (this.rtl) {
+        this.offset -=
+          Math.max(
+            -this.currentPerPage + 1,
+            Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
+          ) * this.slideWidth;
+      } else {
+        this.offset +=
+          Math.max(
+            -this.currentPerPage + 1,
+            Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
+          ) * this.slideWidth;
+      }
 
       // & snap the new offset on a slide or page if scrollPerPage
       const width = this.scrollPerPage