Fix wrong carousel transformation, direction to order (#33499)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 76581ca5d42c418db86e0ad13e13fbb8907f91e9..e336abb1eda2cb63ef2fb63df98bbbb858471dfe 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -336,10 +336,10 @@ class Carousel extends BaseComponent {
 
     if (event.key === ARROW_LEFT_KEY) {
       event.preventDefault()
-      this._slide(DIRECTION_LEFT)
+      this._slide(DIRECTION_RIGHT)
     } else if (event.key === ARROW_RIGHT_KEY) {
       event.preventDefault()
-      this._slide(DIRECTION_RIGHT)
+      this._slide(DIRECTION_LEFT)
     }
   }
 
@@ -509,10 +509,10 @@ class Carousel extends BaseComponent {
     }
 
     if (isRTL()) {
-      return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT
+      return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT
     }
 
-    return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV
+    return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV
   }
 
   _orderToDirection(order) {
@@ -521,10 +521,10 @@ class Carousel extends BaseComponent {
     }
 
     if (isRTL()) {
-      return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT
+      return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT
     }
 
-    return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT
+    return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
   }
 
   // Static

diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index dc3006fffd2be7f8d3b113eb5245c1a714de241a..75c3bbd6d8dcb927b4a09eccc837bc8a81b6630e 100644 (file)
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -317,7 +317,7 @@ describe('Carousel', () => {
       expect(carousel._addTouchEventListeners).toHaveBeenCalled()
     })
 
-    it('should allow swiperight and call _slide with pointer events', done => {
+    it('should allow swiperight and call _slide (prev) with pointer events', done => {
       if (!supportPointerEvent) {
         expect().nothing()
         done()
@@ -362,7 +362,7 @@ describe('Carousel', () => {
       })
     })
 
-    it('should allow swipeleft and call previous with pointer events', done => {
+    it('should allow swipeleft and call next with pointer events', done => {
       if (!supportPointerEvent) {
         expect().nothing()
         done()
@@ -408,7 +408,7 @@ describe('Carousel', () => {
       })
     })
 
-    it('should allow swiperight and call _slide with touch events', done => {
+    it('should allow swiperight and call _slide (prev) with touch events', done => {
       Simulator.setType('touch')
       clearPointerEvents()
       document.documentElement.ontouchstart = () => {}
@@ -447,7 +447,7 @@ describe('Carousel', () => {
       })
     })
 
-    it('should allow swipeleft and call _slide with touch events', done => {
+    it('should allow swipeleft and call _slide (next) with touch events', done => {
       Simulator.setType('touch')
       clearPointerEvents()
       document.documentElement.ontouchstart = () => {}
@@ -601,7 +601,7 @@ describe('Carousel', () => {
       const carousel = new Carousel(carouselEl, {})
 
       const onSlide = e => {
-        expect(e.direction).toEqual('right')
+        expect(e.direction).toEqual('left')
         expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
         expect(e.from).toEqual(0)
         expect(e.to).toEqual(1)
@@ -613,7 +613,7 @@ describe('Carousel', () => {
       }
 
       const onSlide2 = e => {
-        expect(e.direction).toEqual('left')
+        expect(e.direction).toEqual('right')
         done()
       }
 
@@ -636,7 +636,7 @@ describe('Carousel', () => {
       const carousel = new Carousel(carouselEl, {})
 
       const onSlid = e => {
-        expect(e.direction).toEqual('right')
+        expect(e.direction).toEqual('left')
         expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
         expect(e.from).toEqual(0)
         expect(e.to).toEqual(1)
@@ -648,7 +648,7 @@ describe('Carousel', () => {
       }
 
       const onSlid2 = e => {
-        expect(e.direction).toEqual('left')
+        expect(e.direction).toEqual('right')
         done()
       }
 
@@ -1069,13 +1069,13 @@ describe('Carousel', () => {
       const carouselEl = fixtureEl.querySelector('div')
       const carousel = new Carousel(carouselEl, {})
 
-      expect(carousel._directionToOrder('left')).toEqual('prev')
+      expect(carousel._directionToOrder('left')).toEqual('next')
       expect(carousel._directionToOrder('prev')).toEqual('prev')
-      expect(carousel._directionToOrder('right')).toEqual('next')
+      expect(carousel._directionToOrder('right')).toEqual('prev')
       expect(carousel._directionToOrder('next')).toEqual('next')
 
-      expect(carousel._orderToDirection('next')).toEqual('right')
-      expect(carousel._orderToDirection('prev')).toEqual('left')
+      expect(carousel._orderToDirection('next')).toEqual('left')
+      expect(carousel._orderToDirection('prev')).toEqual('right')
     })
 
     it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => {
@@ -1086,13 +1086,13 @@ describe('Carousel', () => {
       const carousel = new Carousel(carouselEl, {})
       expect(util.isRTL()).toEqual(true, 'rtl has to be true')
 
-      expect(carousel._directionToOrder('left')).toEqual('next')
+      expect(carousel._directionToOrder('left')).toEqual('prev')
       expect(carousel._directionToOrder('prev')).toEqual('prev')
-      expect(carousel._directionToOrder('right')).toEqual('prev')
+      expect(carousel._directionToOrder('right')).toEqual('next')
       expect(carousel._directionToOrder('next')).toEqual('next')
 
-      expect(carousel._orderToDirection('next')).toEqual('left')
-      expect(carousel._orderToDirection('prev')).toEqual('right')
+      expect(carousel._orderToDirection('next')).toEqual('right')
+      expect(carousel._orderToDirection('prev')).toEqual('left')
       document.documentElement.dir = 'ltl'
     })
 
@@ -1106,11 +1106,11 @@ describe('Carousel', () => {
 
       carousel._slide('left')
       expect(spy).toHaveBeenCalledWith('left')
-      expect(spy2).toHaveBeenCalledWith('prev')
+      expect(spy2).toHaveBeenCalledWith('next')
 
       carousel._slide('right')
       expect(spy).toHaveBeenCalledWith('right')
-      expect(spy2).toHaveBeenCalledWith('next')
+      expect(spy2).toHaveBeenCalledWith('prev')
     })
 
     it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
@@ -1124,11 +1124,11 @@ describe('Carousel', () => {
 
       carousel._slide('left')
       expect(spy).toHaveBeenCalledWith('left')
-      expect(spy2).toHaveBeenCalledWith('next')
+      expect(spy2).toHaveBeenCalledWith('prev')
 
       carousel._slide('right')
       expect(spy).toHaveBeenCalledWith('right')
-      expect(spy2).toHaveBeenCalledWith('prev')
+      expect(spy2).toHaveBeenCalledWith('next')
 
       document.documentElement.dir = 'ltl'
     })