modal: move common code to a new `isAnimated` method (#33056)

This commit is contained in:
GeoSot 2021-03-08 18:35:59 +02:00 committed by GitHub
parent 548be2ed66
commit e163d98845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 16 deletions

View File

@ -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) {