diff --git a/js/src/modal.js b/js/src/modal.js index 332d636d0f05..40fd226bf66e 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -113,7 +113,7 @@ class Modal extends BaseComponent { return } - if (this._element.classList.contains(CLASS_NAME_FADE)) { + if (this._isAnimated()) { this._isTransitioning = true } @@ -164,9 +164,9 @@ class Modal extends BaseComponent { } this._isShown = false - const transition = this._element.classList.contains(CLASS_NAME_FADE) + const isAnimated = this._isAnimated() - if (transition) { + if (isAnimated) { this._isTransitioning = true } @@ -180,7 +180,7 @@ class Modal extends BaseComponent { EventHandler.off(this._element, EVENT_CLICK_DISMISS) EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS) - if (transition) { + if (isAnimated) { const transitionDuration = getTransitionDurationFromElement(this._element) EventHandler.one(this._element, 'transitionend', event => this._hideModal(event)) @@ -229,7 +229,7 @@ class Modal extends BaseComponent { } _showElement(relatedTarget) { - const transition = this._element.classList.contains(CLASS_NAME_FADE) + const isAnimated = this._isAnimated() const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { @@ -247,7 +247,7 @@ class Modal extends BaseComponent { modalBody.scrollTop = 0 } - if (transition) { + if (isAnimated) { reflow(this._element) } @@ -268,7 +268,7 @@ class Modal extends BaseComponent { }) } - if (transition) { + if (isAnimated) { const transitionDuration = getTransitionDurationFromElement(this._dialog) EventHandler.one(this._dialog, 'transitionend', transitionComplete) @@ -332,16 +332,13 @@ class Modal extends BaseComponent { } _showBackdrop(callback) { - const animate = this._element.classList.contains(CLASS_NAME_FADE) ? - CLASS_NAME_FADE : - '' - + const isAnimated = this._isAnimated() if (this._isShown && this._config.backdrop) { this._backdrop = document.createElement('div') this._backdrop.className = CLASS_NAME_BACKDROP - if (animate) { - this._backdrop.classList.add(animate) + if (isAnimated) { + this._backdrop.classList.add(CLASS_NAME_FADE) } document.body.appendChild(this._backdrop) @@ -363,13 +360,13 @@ class Modal extends BaseComponent { } }) - if (animate) { + if (isAnimated) { reflow(this._backdrop) } this._backdrop.classList.add(CLASS_NAME_SHOW) - if (!animate) { + if (!isAnimated) { callback() return } @@ -386,7 +383,7 @@ class Modal extends BaseComponent { callback() } - if (this._element.classList.contains(CLASS_NAME_FADE)) { + if (isAnimated) { const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop) EventHandler.one(this._backdrop, 'transitionend', callbackRemove) emulateTransitionEnd(this._backdrop, backdropTransitionDuration) @@ -398,6 +395,10 @@ class Modal extends BaseComponent { } } + _isAnimated() { + return this._element.classList.contains(CLASS_NAME_FADE) + } + _triggerBackdropTransition() { const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) if (hideEvent.defaultPrevented) {