diff --git a/js/src/carousel.js b/js/src/carousel.js index afe02f5b7b..bc89a404f0 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -277,17 +277,6 @@ class Carousel extends BaseComponent { return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap) } - _triggerSlideEvent(relatedTarget, fromIndex, eventDirectionName) { - const targetIndex = this._getItemIndex(relatedTarget) - - return EventHandler.trigger(this._element, EVENT_SLIDE, { - relatedTarget, - direction: eventDirectionName, - from: fromIndex, - to: targetIndex - }) - } - _setActiveIndicatorElement(index) { if (!this._indicatorsElement) { return @@ -320,17 +309,12 @@ class Carousel extends BaseComponent { _slide(directionOrOrder, element) { const order = this._directionToOrder(directionOrOrder) + const activeElement = this._getActive() const activeElementIndex = this._getItemIndex(activeElement) + const nextElement = element || this._getItemByOrder(order, activeElement) - const nextElementIndex = this._getItemIndex(nextElement) - const isCycling = Boolean(this._interval) - - const isNext = order === ORDER_NEXT - const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END - const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV - const eventDirectionName = this._orderToDirection(order) if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) { this._isSliding = false @@ -341,7 +325,17 @@ class Carousel extends BaseComponent { return } - const slideEvent = this._triggerSlideEvent(nextElement, activeElementIndex, eventDirectionName) + const triggerEvent = eventName => { + return EventHandler.trigger(this._element, eventName, { + relatedTarget: nextElement, + direction: this._orderToDirection(order), + from: activeElementIndex, + to: nextElementIndex + }) + } + + const slideEvent = triggerEvent(EVENT_SLIDE) + if (slideEvent.defaultPrevented) { return } @@ -353,6 +347,7 @@ class Carousel extends BaseComponent { this._isSliding = true + const isCycling = Boolean(this._interval) if (isCycling) { this.pause() } @@ -360,6 +355,10 @@ class Carousel extends BaseComponent { this._setActiveIndicatorElement(nextElementIndex) this._activeElement = nextElement + const isNext = order === ORDER_NEXT + const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END + const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV + nextElement.classList.add(orderClassName) reflow(nextElement) @@ -375,12 +374,7 @@ class Carousel extends BaseComponent { this._isSliding = false - EventHandler.trigger(this._element, EVENT_SLID, { - relatedTarget: nextElement, - direction: eventDirectionName, - from: activeElementIndex, - to: nextElementIndex - }) + triggerEvent(EVENT_SLID) } this._queueCallback(completeCallBack, activeElement, this._isAnimated()) diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 175f9562c6..4070f0f9d4 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -214,7 +214,7 @@ describe('Carousel', () => { const carouselEl = fixtureEl.querySelector('div') const carousel = new Carousel(carouselEl, {}) - spyOn(carousel, '_triggerSlideEvent') + spyOn(EventHandler, 'trigger') carousel._isSliding = true @@ -225,7 +225,7 @@ describe('Carousel', () => { carouselEl.dispatchEvent(keydown) } - expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() + expect(EventHandler.trigger).not.toHaveBeenCalled() }) it('should wrap around from end to start when wrap option is true', () => { @@ -546,7 +546,7 @@ describe('Carousel', () => { const carousel = new Carousel(carouselEl) carousel._isSliding = true - spyOn(carousel, '_triggerSlideEvent') + spyOn(EventHandler, 'trigger') Simulator.gestures.swipe(carouselEl, { deltaX: 300, @@ -560,7 +560,7 @@ describe('Carousel', () => { }) setTimeout(() => { - expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() + expect(EventHandler.trigger).not.toHaveBeenCalled() delete document.documentElement.ontouchstart restorePointerEvents() resolve() @@ -639,12 +639,12 @@ describe('Carousel', () => { const carouselEl = fixtureEl.querySelector('div') const carousel = new Carousel(carouselEl, {}) - spyOn(carousel, '_triggerSlideEvent') + spyOn(EventHandler, 'trigger') carousel._isSliding = true carousel.next() - expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() + expect(EventHandler.trigger).not.toHaveBeenCalled() }) it('should not fire slid when slide is prevented', () => { @@ -858,12 +858,12 @@ describe('Carousel', () => { const carouselEl = fixtureEl.querySelector('div') const carousel = new Carousel(carouselEl, {}) - spyOn(carousel, '_triggerSlideEvent') + spyOn(EventHandler, 'trigger') carousel._isSliding = true carousel.prev() - expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() + expect(EventHandler.trigger).not.toHaveBeenCalled() }) })