Add RTL-support.

Iran-110 · Jul 14, 2021 · 957af3a · 957af3a
1 parent eb8fd1b
commit 957af3a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 31 deletions.
diff --git a/src/InnerSlider.vue b/src/InnerSlider.vue
@@ -166,7 +166,7 @@ export default {
       }
       let setTrackStyle = false
       for (let key of Object.keys(this.$props)) {
-        if (!nextProps.hasOwnProperty(key)) {
+        if (!nextProps.hasOwnProperty.call(nextProps, key)) {
           setTrackStyle = true
           break
         }
@@ -217,6 +217,7 @@ export default {
     ssrInit() {
       const preClones = getPreClones(this.spec)
       const postClones = getPostClones(this.spec)
+      // console.log(this.currentSlide, this.slideCount, preClones, postClones)
       if (this.variableWidth) {
         let trackWidth = [],
           trackLeft = []
@@ -500,14 +501,10 @@ export default {
     },
     play() {
       var nextIndex
-      if (this.rtl) {
-        nextIndex = this.currentSlide - this.slidesToScroll
+      if (canGoNext({ ...this.$props, ...this.$data })) {
+        nextIndex = this.currentSlide + this.slidesToScroll
       } else {
-        if (canGoNext({ ...this.$props, ...this.$data })) {
-          nextIndex = this.currentSlide + this.slidesToScroll
-        } else {
-          return false
-        }
+        return false
       }
 
       this.slideHandler(nextIndex)
@@ -680,7 +677,8 @@ export default {
     })
 
     return (
-      <div class={className} dir={!this.unslick ? 'ltr' : false}>
+      // <div class={className} dir={!this.unslick ? 'ltr' : false}>
+      <div class={className} dir={!this.rtl ? 'ltr' : 'rtl'}>
         {!this.unslick ? prevArrow : ''}
         <div
           ref="list"

diff --git a/src/SliderTrack.vue b/src/SliderTrack.vue
@@ -124,8 +124,14 @@ export default {
           } else {
             child = <div />
           }
-          let childStyle = getSlideStyle({ ...spec, index })
-          let slideClasses = getSlideClasses({ ...spec, index })
+          let childStyle = getSlideStyle({
+            ...spec,
+            index,
+          })
+          let slideClasses = getSlideClasses({
+            ...spec,
+            index,
+          })
           // push a cloned element of the desired slide
           slides.push(
             this.cloneSlide(child, {
@@ -159,7 +165,10 @@ export default {
               if (key >= startIndex) {
                 child = elem
               }
-              slideClasses = getSlideClasses({ ...spec, index: key })
+              slideClasses = getSlideClasses({
+                ...spec,
+                index: key,
+              })
               preCloneSlides.push(
                 this.cloneSlide(child, {
                   key: 'precloned' + getKey(child, key),
@@ -180,7 +189,10 @@ export default {
               if (key < endIndex) {
                 child = elem
               }
-              slideClasses = getSlideClasses({ ...spec, index: key })
+              slideClasses = getSlideClasses({
+                ...spec,
+                index: key,
+              })
               postCloneSlides.push(
                 this.cloneSlide(child, {
                   key: 'postcloned' + getKey(child, key),
@@ -209,7 +221,7 @@ export default {
     const slides = this.renderSlides(this.$props, this.$slots.default)
     return (
       <div
-        class={{ 'slick-track': true, 'slick-center': this.$props.centerMode }}
+        class={{ 'slick-track': true, 'slick-center': this.centerMode }}
         style={this.trackStyle}>
         {slides}
       </div>

diff --git a/src/innerSliderUtils.js b/src/innerSliderUtils.js
@@ -240,7 +240,7 @@ export const swipeMove = (e, spec) => {
     positionOffset = touchObject.curY > touchObject.startY ? 1 : -1
 
   let dotCount = Math.ceil(slideCount / slidesToScroll)
-  let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping)
+  let swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping, rtl)
   let touchSwipeLength = touchObject.swipeLength
   if (!infinite) {
     if (
@@ -260,11 +260,7 @@ export const swipeMove = (e, spec) => {
     state['swiped'] = true
   }
   if (!vertical) {
-    if (!rtl) {
-      swipeLeft = curLeft + touchSwipeLength * positionOffset
-    } else {
-      swipeLeft = curLeft - touchSwipeLength * positionOffset
-    }
+    swipeLeft = curLeft + touchSwipeLength * positionOffset
   } else {
     swipeLeft =
       curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset
@@ -303,6 +299,7 @@ export const swipeEnd = (e, spec) => {
     swipeToSlide,
     scrolling,
     onSwipe,
+    rtl,
   } = spec
   if (!dragging) {
     if (swipe) e.preventDefault()
@@ -311,7 +308,7 @@ export const swipeEnd = (e, spec) => {
   let minSwipe = verticalSwiping
     ? listHeight / touchThreshold
     : listWidth / touchThreshold
-  let swipeDirection = getSwipeDirection(touchObject, verticalSwiping)
+  let swipeDirection = getSwipeDirection(touchObject, verticalSwiping, rtl)
   // reset the state of touch related state variables.
   let state = {
     dragging: false,
@@ -590,7 +587,11 @@ export const slideHandler = spec => {
 export const getWidth = elem => (elem && elem.offsetWidth) || 0
 export const getHeight = elem => (elem && elem.offsetHeight) || 0
 
-export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
+export const getSwipeDirection = (
+  touchObject,
+  verticalSwiping = false,
+  rtl = false,
+) => {
   var xDist, yDist, r, swipeAngle
   xDist = touchObject.startX - touchObject.curX
   yDist = touchObject.startY - touchObject.curY
@@ -603,10 +604,10 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
     (swipeAngle <= 45 && swipeAngle >= 0) ||
     (swipeAngle <= 360 && swipeAngle >= 315)
   ) {
-    return 'left'
+    return !rtl ? 'left' : 'right'
   }
   if (swipeAngle >= 135 && swipeAngle <= 225) {
-    return 'right'
+    return !rtl ? 'right' : 'left'
   }
   if (verticalSwiping === true) {
     if (swipeAngle >= 35 && swipeAngle <= 135) {
@@ -643,9 +644,6 @@ export const initializedState = spec => {
   let listHeight = slideHeight * spec.slidesToShow
   let currentSlide =
     spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide
-  if (spec.rtl && spec.currentSlide === undefined) {
-    currentSlide = slideCount - 1 - spec.initialSlide
-  }
   let lazyLoadedList = spec.lazyLoadedList || []
   let slidesToLoad = getOnDemandLazySlides(
     { currentSlide, lazyLoadedList },
@@ -781,7 +779,10 @@ export const getTotalSlides = spec =>
     : getPreClones(spec) + spec.slideCount + getPostClones(spec)
 
 export const checkSpecKeys = (spec, keysArray) =>
-  keysArray.reduce((value, key) => value && spec.hasOwnProperty(key), true)
+  keysArray.reduce(
+    (value, key) => value && spec.hasOwnProperty.call(spec, key),
+    true,
+  )
     ? null
     : console.error('Keys Missing:', spec) // eslint-disable-line no-console
 
@@ -806,14 +807,15 @@ export const getTrackCSS = spec => {
     WebkitTransition: '',
   }
   if (spec.useTransform) {
+    const correctedLeft = spec.rtl ? -spec.left : spec.left
     let WebkitTransform = !spec.vertical
-      ? 'translate3d(' + spec.left + 'px, 0px, 0px)'
+      ? 'translate3d(' + correctedLeft + 'px, 0px, 0px)'
       : 'translate3d(0px, ' + spec.left + 'px, 0px)'
     let transform = !spec.vertical
-      ? 'translate3d(' + spec.left + 'px, 0px, 0px)'
+      ? 'translate3d(' + correctedLeft + 'px, 0px, 0px)'
       : 'translate3d(0px, ' + spec.left + 'px, 0px)'
     let msTransform = !spec.vertical
-      ? 'translateX(' + spec.left + 'px)'
+      ? 'translateX(' + correctedLeft + 'px)'
       : 'translateY(' + spec.left + 'px)'
     style = {
       ...style,