rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
js/src/modal.js
View File

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