Fix wrong carousel transformation, direction to order (#33499)
This commit is contained in:
parent
800aa622d3
commit
0795a778f2
|
@ -336,10 +336,10 @@ class Carousel extends BaseComponent {
|
||||||
|
|
||||||
if (event.key === ARROW_LEFT_KEY) {
|
if (event.key === ARROW_LEFT_KEY) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this._slide(DIRECTION_LEFT)
|
this._slide(DIRECTION_RIGHT)
|
||||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this._slide(DIRECTION_RIGHT)
|
this._slide(DIRECTION_LEFT)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -509,10 +509,10 @@ class Carousel extends BaseComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isRTL()) {
|
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) {
|
_orderToDirection(order) {
|
||||||
|
@ -521,10 +521,10 @@ class Carousel extends BaseComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isRTL()) {
|
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
|
// Static
|
||||||
|
|
|
@ -317,7 +317,7 @@ describe('Carousel', () => {
|
||||||
expect(carousel._addTouchEventListeners).toHaveBeenCalled()
|
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) {
|
if (!supportPointerEvent) {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
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) {
|
if (!supportPointerEvent) {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
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')
|
Simulator.setType('touch')
|
||||||
clearPointerEvents()
|
clearPointerEvents()
|
||||||
document.documentElement.ontouchstart = () => {}
|
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')
|
Simulator.setType('touch')
|
||||||
clearPointerEvents()
|
clearPointerEvents()
|
||||||
document.documentElement.ontouchstart = () => {}
|
document.documentElement.ontouchstart = () => {}
|
||||||
|
@ -601,7 +601,7 @@ describe('Carousel', () => {
|
||||||
const carousel = new Carousel(carouselEl, {})
|
const carousel = new Carousel(carouselEl, {})
|
||||||
|
|
||||||
const onSlide = e => {
|
const onSlide = e => {
|
||||||
expect(e.direction).toEqual('right')
|
expect(e.direction).toEqual('left')
|
||||||
expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
|
expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
|
||||||
expect(e.from).toEqual(0)
|
expect(e.from).toEqual(0)
|
||||||
expect(e.to).toEqual(1)
|
expect(e.to).toEqual(1)
|
||||||
|
@ -613,7 +613,7 @@ describe('Carousel', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSlide2 = e => {
|
const onSlide2 = e => {
|
||||||
expect(e.direction).toEqual('left')
|
expect(e.direction).toEqual('right')
|
||||||
done()
|
done()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -636,7 +636,7 @@ describe('Carousel', () => {
|
||||||
const carousel = new Carousel(carouselEl, {})
|
const carousel = new Carousel(carouselEl, {})
|
||||||
|
|
||||||
const onSlid = e => {
|
const onSlid = e => {
|
||||||
expect(e.direction).toEqual('right')
|
expect(e.direction).toEqual('left')
|
||||||
expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
|
expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
|
||||||
expect(e.from).toEqual(0)
|
expect(e.from).toEqual(0)
|
||||||
expect(e.to).toEqual(1)
|
expect(e.to).toEqual(1)
|
||||||
|
@ -648,7 +648,7 @@ describe('Carousel', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSlid2 = e => {
|
const onSlid2 = e => {
|
||||||
expect(e.direction).toEqual('left')
|
expect(e.direction).toEqual('right')
|
||||||
done()
|
done()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1069,13 +1069,13 @@ describe('Carousel', () => {
|
||||||
const carouselEl = fixtureEl.querySelector('div')
|
const carouselEl = fixtureEl.querySelector('div')
|
||||||
const carousel = new Carousel(carouselEl, {})
|
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('prev')).toEqual('prev')
|
||||||
expect(carousel._directionToOrder('right')).toEqual('next')
|
expect(carousel._directionToOrder('right')).toEqual('prev')
|
||||||
expect(carousel._directionToOrder('next')).toEqual('next')
|
expect(carousel._directionToOrder('next')).toEqual('next')
|
||||||
|
|
||||||
expect(carousel._orderToDirection('next')).toEqual('right')
|
expect(carousel._orderToDirection('next')).toEqual('left')
|
||||||
expect(carousel._orderToDirection('prev')).toEqual('left')
|
expect(carousel._orderToDirection('prev')).toEqual('right')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => {
|
it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => {
|
||||||
|
@ -1086,13 +1086,13 @@ describe('Carousel', () => {
|
||||||
const carousel = new Carousel(carouselEl, {})
|
const carousel = new Carousel(carouselEl, {})
|
||||||
expect(util.isRTL()).toEqual(true, 'rtl has to be true')
|
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('prev')).toEqual('prev')
|
||||||
expect(carousel._directionToOrder('right')).toEqual('prev')
|
expect(carousel._directionToOrder('right')).toEqual('next')
|
||||||
expect(carousel._directionToOrder('next')).toEqual('next')
|
expect(carousel._directionToOrder('next')).toEqual('next')
|
||||||
|
|
||||||
expect(carousel._orderToDirection('next')).toEqual('left')
|
expect(carousel._orderToDirection('next')).toEqual('right')
|
||||||
expect(carousel._orderToDirection('prev')).toEqual('right')
|
expect(carousel._orderToDirection('prev')).toEqual('left')
|
||||||
document.documentElement.dir = 'ltl'
|
document.documentElement.dir = 'ltl'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1106,11 +1106,11 @@ describe('Carousel', () => {
|
||||||
|
|
||||||
carousel._slide('left')
|
carousel._slide('left')
|
||||||
expect(spy).toHaveBeenCalledWith('left')
|
expect(spy).toHaveBeenCalledWith('left')
|
||||||
expect(spy2).toHaveBeenCalledWith('prev')
|
expect(spy2).toHaveBeenCalledWith('next')
|
||||||
|
|
||||||
carousel._slide('right')
|
carousel._slide('right')
|
||||||
expect(spy).toHaveBeenCalledWith('right')
|
expect(spy).toHaveBeenCalledWith('right')
|
||||||
expect(spy2).toHaveBeenCalledWith('next')
|
expect(spy2).toHaveBeenCalledWith('prev')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
|
it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
|
||||||
|
@ -1124,11 +1124,11 @@ describe('Carousel', () => {
|
||||||
|
|
||||||
carousel._slide('left')
|
carousel._slide('left')
|
||||||
expect(spy).toHaveBeenCalledWith('left')
|
expect(spy).toHaveBeenCalledWith('left')
|
||||||
expect(spy2).toHaveBeenCalledWith('next')
|
expect(spy2).toHaveBeenCalledWith('prev')
|
||||||
|
|
||||||
carousel._slide('right')
|
carousel._slide('right')
|
||||||
expect(spy).toHaveBeenCalledWith('right')
|
expect(spy).toHaveBeenCalledWith('right')
|
||||||
expect(spy2).toHaveBeenCalledWith('prev')
|
expect(spy2).toHaveBeenCalledWith('next')
|
||||||
|
|
||||||
document.documentElement.dir = 'ltl'
|
document.documentElement.dir = 'ltl'
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue