Carousel: reorder variables and refactor method to use it inline

Author: GeoSot

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 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,13 +347,18 @@ class Carousel extends BaseComponent {
 
     this._isSliding = true
 
+    const isCycling = Boolean(this._interval)
     if (isCycling) {
       this.pause()
     }
 
     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())

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()
     })
   })