import {
defineJQueryPlugin,
- emulateTransitionEnd,
- getElementFromSelector,
- getTransitionDurationFromElement
+ getElementFromSelector
} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
_removeElement(element) {
element.classList.remove(CLASS_NAME_SHOW)
- if (!element.classList.contains(CLASS_NAME_FADE)) {
- this._destroyElement(element)
- return
- }
-
- const transitionDuration = getTransitionDurationFromElement(element)
-
- EventHandler.one(element, 'transitionend', () => this._destroyElement(element))
- emulateTransitionEnd(element, transitionDuration)
+ const isAnimated = element.classList.contains(CLASS_NAME_FADE)
+ this._queueCallback(() => this._destroyElement(element), element, isAnimated)
}
_destroyElement(element) {
*/
import Data from './dom/data'
+import {
+ emulateTransitionEnd,
+ execute,
+ getTransitionDurationFromElement
+} from './util/index'
import EventHandler from './dom/event-handler'
/**
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) {
import {
defineJQueryPlugin,
- emulateTransitionEnd,
getElementFromSelector,
- getTransitionDurationFromElement,
isRTL,
isVisible,
reflow,
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)
activeElement.classList.add(directionalClassName)
nextElement.classList.add(directionalClassName)
- const transitionDuration = getTransitionDurationFromElement(activeElement)
-
- EventHandler.one(activeElement, 'transitionend', () => {
+ const completeCallBack = () => {
nextElement.classList.remove(directionalClassName, orderClassName)
nextElement.classList.add(CLASS_NAME_ACTIVE)
this._isSliding = false
- setTimeout(() => {
- EventHandler.trigger(this._element, EVENT_SLID, {
- relatedTarget: nextElement,
- direction: eventDirectionName,
- from: activeElementIndex,
- to: nextElementIndex
- })
- }, 0)
- })
+ setTimeout(triggerSlidEvent, 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, {
- relatedTarget: nextElement,
- direction: eventDirectionName,
- from: activeElementIndex,
- to: nextElementIndex
- })
+ triggerSlidEvent()
}
if (isCycling) {
import {
defineJQueryPlugin,
- emulateTransitionEnd,
getSelectorFromElement,
getElementFromSelector,
- getTransitionDurationFromElement,
isElement,
reflow,
typeCheckConfig
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
const scrollSize = `scroll${capitalizedDimension}`
- const transitionDuration = getTransitionDurationFromElement(this._element)
- EventHandler.one(this._element, 'transitionend', complete)
-
- emulateTransitionEnd(this._element, transitionDuration)
+ this._queueCallback(complete, this._element, true)
this._element.style[dimension] = `${this._element[scrollSize]}px`
}
}
this._element.style[dimension] = ''
- const transitionDuration = getTransitionDurationFromElement(this._element)
- EventHandler.one(this._element, 'transitionend', complete)
- emulateTransitionEnd(this._element, transitionDuration)
+ this._queueCallback(complete, this._element, true)
}
setTransitioning(isTransitioning) {
EventHandler.off(this._element, EVENT_CLICK_DISMISS)
EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS)
- if (isAnimated) {
- const transitionDuration = getTransitionDurationFromElement(this._element)
-
- EventHandler.one(this._element, 'transitionend', event => this._hideModal(event))
- emulateTransitionEnd(this._element, transitionDuration)
- } else {
- this._hideModal()
- }
+ this._queueCallback(() => this._hideModal(), this._element, isAnimated)
}
dispose() {
})
}
- if (isAnimated) {
- const transitionDuration = getTransitionDurationFromElement(this._dialog)
-
- EventHandler.one(this._dialog, 'transitionend', transitionComplete)
- emulateTransitionEnd(this._dialog, transitionDuration)
- } else {
- transitionComplete()
- }
+ this._queueCallback(transitionComplete, this._dialog, isAnimated)
}
_enforceFocus() {
import {
defineJQueryPlugin,
- emulateTransitionEnd,
getElementFromSelector,
- getTransitionDurationFromElement,
isDisabled,
isVisible,
typeCheckConfig
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
}
- const transitionDuration = getTransitionDurationFromElement(this._element)
- EventHandler.one(this._element, 'transitionend', completeCallBack)
- emulateTransitionEnd(this._element, transitionDuration)
+ this._queueCallback(completeCallBack, this._element, true)
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDDEN)
}
- const transitionDuration = getTransitionDurationFromElement(this._element)
- EventHandler.one(this._element, 'transitionend', completeCallback)
- emulateTransitionEnd(this._element, transitionDuration)
+ this._queueCallback(completeCallback, this._element, true)
}
dispose() {
import {
defineJQueryPlugin,
- emulateTransitionEnd,
getElementFromSelector,
- getTransitionDurationFromElement,
isDisabled,
reflow
} from './util/index'
const complete = () => this._transitionComplete(element, active, callback)
if (active && isTransitioning) {
- const transitionDuration = getTransitionDurationFromElement(active)
active.classList.remove(CLASS_NAME_SHOW)
-
- EventHandler.one(active, 'transitionend', complete)
- emulateTransitionEnd(active, transitionDuration)
+ this._queueCallback(complete, element, true)
} else {
complete()
}
import {
defineJQueryPlugin,
- emulateTransitionEnd,
- getTransitionDurationFromElement,
reflow,
typeCheckConfig
} from './util/index'
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)
- emulateTransitionEnd(this._element, transitionDuration)
- } else {
- complete()
- }
+ this._queueCallback(complete, this._element, this._config.animation)
}
hide() {
}
this._element.classList.remove(CLASS_NAME_SHOW)
- if (this._config.animation) {
- const transitionDuration = getTransitionDurationFromElement(this._element)
-
- EventHandler.one(this._element, 'transitionend', complete)
- emulateTransitionEnd(this._element, transitionDuration)
- } else {
- complete()
- }
+ this._queueCallback(complete, this._element, this._config.animation)
}
dispose() {
import {
defineJQueryPlugin,
- emulateTransitionEnd,
findShadowRoot,
- getTransitionDurationFromElement,
getUID,
isElement,
isRTL,
}
}
- if (this.tip.classList.contains(CLASS_NAME_FADE)) {
- const transitionDuration = getTransitionDurationFromElement(this.tip)
- EventHandler.one(this.tip, 'transitionend', complete)
- emulateTransitionEnd(this.tip, transitionDuration)
- } else {
- complete()
- }
+ const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
+ this._queueCallback(complete, this.tip, isAnimated)
}
hide() {
this._activeTrigger[TRIGGER_FOCUS] = false
this._activeTrigger[TRIGGER_HOVER] = false
- if (this.tip.classList.contains(CLASS_NAME_FADE)) {
- const transitionDuration = getTransitionDurationFromElement(tip)
-
- EventHandler.one(tip, 'transitionend', complete)
- emulateTransitionEnd(tip, transitionDuration)
- } else {
- complete()
- }
-
+ const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
+ this._queueCallback(complete, this.tip, isAnimated)
this._hoverState = ''
}