Merge js-components 'transitionend' listener callbacks into one method

js/src/alert.js

@@ -7,9 +7,7 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
+  getElementFromSelector
-  getElementFromSelector,
-  getTransitionDurationFromElement
 } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -75,15 +73,8 @@ class Alert extends BaseComponent {
   _removeElement(element) {
     element.classList.remove(CLASS_NAME_SHOW)
 
-    if (!element.classList.contains(CLASS_NAME_FADE)) {
+    const isAnimated = element.classList.contains(CLASS_NAME_FADE)
-      this._destroyElement(element)
+    this._queueCallback(() => this._destroyElement(element), element, isAnimated)
-      return
-    }
-
-    const transitionDuration = getTransitionDurationFromElement(element)
-
-    EventHandler.one(element, 'transitionend', () => this._destroyElement(element))
-    emulateTransitionEnd(element, transitionDuration)
   }
 
   _destroyElement(element) {

js/src/base-component.js

@@ -6,6 +6,11 @@
  */
 
 import Data from './dom/data'
+import {
+  emulateTransitionEnd,
+  execute,
+  getTransitionDurationFromElement
+} from './util/index'
 import EventHandler from './dom/event-handler'
 
 /**
@@ -34,6 +39,18 @@ class BaseComponent {
     this._element = null
   }
 
+  _queueCallback(callback, element, isAnimated = true) {
+    if (!isAnimated) {
+      execute(callback)
+      return
+    }
+
+    const transitionDuration = getTransitionDurationFromElement(element)
+    EventHandler.one(element, 'transitionend', () => execute(callback))
+
+    emulateTransitionEnd(element, transitionDuration)
+  }
+
   /** Static */
 
   static getInstance(element) {

js/src/carousel.js

@@ -7,9 +7,7 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
   getElementFromSelector,
-  getTransitionDurationFromElement,
   isRTL,
   isVisible,
   reflow,
@@ -454,6 +452,15 @@ class Carousel extends BaseComponent {
     this._setActiveIndicatorElement(nextElement)
     this._activeElement = nextElement
 
+    const triggerSlidEvent = () => {
+      EventHandler.trigger(this._element, EVENT_SLID, {
+        relatedTarget: nextElement,
+        direction: eventDirectionName,
+        from: activeElementIndex,
+        to: nextElementIndex
+      })
+    }
+
     if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
       nextElement.classList.add(orderClassName)
 
@@ -462,9 +469,7 @@ class Carousel extends BaseComponent {
       activeElement.classList.add(directionalClassName)
       nextElement.classList.add(directionalClassName)
 
-      const transitionDuration = getTransitionDurationFromElement(activeElement)
+      const completeCallBack = () => {
-
-      EventHandler.one(activeElement, 'transitionend', () => {
         nextElement.classList.remove(directionalClassName, orderClassName)
         nextElement.classList.add(CLASS_NAME_ACTIVE)
 
@@ -472,28 +477,16 @@ class Carousel extends BaseComponent {
 
         this._isSliding = false
 
-        setTimeout(() => {
+        setTimeout(triggerSlidEvent, 0)
-          EventHandler.trigger(this._element, EVENT_SLID, {
+      }
-            relatedTarget: nextElement,
-            direction: eventDirectionName,
-            from: activeElementIndex,
-            to: nextElementIndex
-          })
-        }, 0)
-      })
 
-      emulateTransitionEnd(activeElement, transitionDuration)
+      this._queueCallback(completeCallBack, activeElement, true)
     } else {
       activeElement.classList.remove(CLASS_NAME_ACTIVE)
       nextElement.classList.add(CLASS_NAME_ACTIVE)
 
       this._isSliding = false
-      EventHandler.trigger(this._element, EVENT_SLID, {
+      triggerSlidEvent()
-        relatedTarget: nextElement,
-        direction: eventDirectionName,
-        from: activeElementIndex,
-        to: nextElementIndex
-      })
     }
 
     if (isCycling) {

js/src/collapse.js

@@ -7,10 +7,8 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
   getSelectorFromElement,
   getElementFromSelector,
-  getTransitionDurationFromElement,
   isElement,
   reflow,
   typeCheckConfig
@@ -200,11 +198,8 @@ class Collapse extends BaseComponent {
 
     const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
     const scrollSize = `scroll${capitalizedDimension}`
-    const transitionDuration = getTransitionDurationFromElement(this._element)
 
-    EventHandler.one(this._element, 'transitionend', complete)
+    this._queueCallback(complete, this._element, true)
-
-    emulateTransitionEnd(this._element, transitionDuration)
     this._element.style[dimension] = `${this._element[scrollSize]}px`
   }
 
@@ -250,10 +245,8 @@ class Collapse extends BaseComponent {
     }
 
     this._element.style[dimension] = ''
-    const transitionDuration = getTransitionDurationFromElement(this._element)
 
-    EventHandler.one(this._element, 'transitionend', complete)
+    this._queueCallback(complete, this._element, true)
-    emulateTransitionEnd(this._element, transitionDuration)
   }
 
   setTransitioning(isTransitioning) {

js/src/modal.js

@@ -176,14 +176,7 @@ class Modal extends BaseComponent {
     EventHandler.off(this._element, EVENT_CLICK_DISMISS)
     EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS)
 
-    if (isAnimated) {
+    this._queueCallback(() => this._hideModal(), this._element, isAnimated)
-      const transitionDuration = getTransitionDurationFromElement(this._element)
-
-      EventHandler.one(this._element, 'transitionend', event => this._hideModal(event))
-      emulateTransitionEnd(this._element, transitionDuration)
-    } else {
-      this._hideModal()
-    }
   }
 
   dispose() {
@@ -271,14 +264,7 @@ class Modal extends BaseComponent {
       })
     }
 
-    if (isAnimated) {
+    this._queueCallback(transitionComplete, this._dialog, isAnimated)
-      const transitionDuration = getTransitionDurationFromElement(this._dialog)
-
-      EventHandler.one(this._dialog, 'transitionend', transitionComplete)
-      emulateTransitionEnd(this._dialog, transitionDuration)
-    } else {
-      transitionComplete()
-    }
   }
 
   _enforceFocus() {

js/src/offcanvas.js

@@ -7,9 +7,7 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
   getElementFromSelector,
-  getTransitionDurationFromElement,
   isDisabled,
   isVisible,
   typeCheckConfig
@@ -124,9 +122,7 @@ class Offcanvas extends BaseComponent {
       EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
     }
 
-    const transitionDuration = getTransitionDurationFromElement(this._element)
+    this._queueCallback(completeCallBack, this._element, true)
-    EventHandler.one(this._element, 'transitionend', completeCallBack)
-    emulateTransitionEnd(this._element, transitionDuration)
   }
 
   hide() {
@@ -159,9 +155,7 @@ class Offcanvas extends BaseComponent {
       EventHandler.trigger(this._element, EVENT_HIDDEN)
     }
 
-    const transitionDuration = getTransitionDurationFromElement(this._element)
+    this._queueCallback(completeCallback, this._element, true)
-    EventHandler.one(this._element, 'transitionend', completeCallback)
-    emulateTransitionEnd(this._element, transitionDuration)
   }
 
   dispose() {

js/src/tab.js

@@ -7,9 +7,7 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
   getElementFromSelector,
-  getTransitionDurationFromElement,
   isDisabled,
   reflow
 } from './util/index'
@@ -125,11 +123,8 @@ class Tab extends BaseComponent {
     const complete = () => this._transitionComplete(element, active, callback)
 
     if (active && isTransitioning) {
-      const transitionDuration = getTransitionDurationFromElement(active)
       active.classList.remove(CLASS_NAME_SHOW)
-
+      this._queueCallback(complete, element, true)
-      EventHandler.one(active, 'transitionend', complete)
-      emulateTransitionEnd(active, transitionDuration)
     } else {
       complete()
     }

js/src/toast.js

@@ -7,8 +7,6 @@
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
-  getTransitionDurationFromElement,
   reflow,
   typeCheckConfig
 } from './util/index'
@@ -112,14 +110,8 @@ class Toast extends BaseComponent {
     this._element.classList.remove(CLASS_NAME_HIDE)
     reflow(this._element)
     this._element.classList.add(CLASS_NAME_SHOWING)
-    if (this._config.animation) {
-      const transitionDuration = getTransitionDurationFromElement(this._element)
 
-      EventHandler.one(this._element, 'transitionend', complete)
+    this._queueCallback(complete, this._element, this._config.animation)
-      emulateTransitionEnd(this._element, transitionDuration)
-    } else {
-      complete()
-    }
   }
 
   hide() {
@@ -139,14 +131,7 @@ class Toast extends BaseComponent {
     }
 
     this._element.classList.remove(CLASS_NAME_SHOW)
-    if (this._config.animation) {
+    this._queueCallback(complete, this._element, this._config.animation)
-      const transitionDuration = getTransitionDurationFromElement(this._element)
-
-      EventHandler.one(this._element, 'transitionend', complete)
-      emulateTransitionEnd(this._element, transitionDuration)
-    } else {
-      complete()
-    }
   }
 
   dispose() {

js/src/tooltip.js

@@ -9,9 +9,7 @@ import * as Popper from '@popperjs/core'
 
 import {
   defineJQueryPlugin,
-  emulateTransitionEnd,
   findShadowRoot,
-  getTransitionDurationFromElement,
   getUID,
   isElement,
   isRTL,
@@ -315,13 +313,8 @@ class Tooltip extends BaseComponent {
       }
     }
 
-    if (this.tip.classList.contains(CLASS_NAME_FADE)) {
+    const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
-      const transitionDuration = getTransitionDurationFromElement(this.tip)
+    this._queueCallback(complete, this.tip, isAnimated)
-      EventHandler.one(this.tip, 'transitionend', complete)
-      emulateTransitionEnd(this.tip, transitionDuration)
-    } else {
-      complete()
-    }
   }
 
   hide() {
@@ -367,15 +360,8 @@ class Tooltip extends BaseComponent {
     this._activeTrigger[TRIGGER_FOCUS] = false
     this._activeTrigger[TRIGGER_HOVER] = false
 
-    if (this.tip.classList.contains(CLASS_NAME_FADE)) {
+    const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
-      const transitionDuration = getTransitionDurationFromElement(tip)
+    this._queueCallback(complete, this.tip, isAnimated)
-
-      EventHandler.one(tip, 'transitionend', complete)
-      emulateTransitionEnd(tip, transitionDuration)
-    } else {
-      complete()
-    }
-
     this._hoverState = ''
   }