mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki Activity

Decouple BackDrop from modal (#32439)

Browse Source 
* Create backdrop.js util

* revert breaking changes

remove PromiseTimout usage

revert class name

* one more test | change bundlewatch.config

* add config obj to backdrop helper | tests for rootElement | use transitionend helper

* Minor tweaks — Renaming

Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
This commit is contained in:
GeoSot
2021-04-14 23:28:50 +03:00
committed by GitHub
parent 0122e020d6
commit 80085a12f6
7 changed files with 386 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
js/src/modal.js
View File

@@ -20,6 +20,7 @@ import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import { getWidth as getScrollBarWidth, hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar'
import BaseComponent from './base-component'
import Backdrop from './util/backdrop'
/**
* ------------------------------------------------------------------------
@@ -58,7 +59,6 @@ const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_BACKDROP = 'modal-backdrop'
const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
@@ -81,7 +81,7 @@ class Modal extends BaseComponent {
this._config = this._getConfig(config)
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
this._backdrop = null
this._backdrop = this._initializeBackDrop()
this._isShown = false
this._ignoreBackdropClick = false
this._isTransitioning = false
@@ -201,6 +201,7 @@ class Modal extends BaseComponent {
this._config = null
this._dialog = null
this._backdrop.dispose()
this._backdrop = null
this._isShown = null
this._ignoreBackdropClick = null
@@ -213,6 +214,13 @@ class Modal extends BaseComponent {
// Private
_initializeBackDrop() {
return new Backdrop({
isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
isAnimated: this._isAnimated()
})
}
_getConfig(config) {
config = {
...Default,
@@ -313,7 +321,7 @@ class Modal extends BaseComponent {
this._element.removeAttribute('aria-modal')
this._element.removeAttribute('role')
this._isTransitioning = false
this._showBackdrop(() => {
this._backdrop.hide(() => {
document.body.classList.remove(CLASS_NAME_OPEN)
this._resetAdjustments()
scrollBarReset()
@@ -321,73 +329,25 @@ class Modal extends BaseComponent {
})
}
_removeBackdrop() {
this._backdrop.parentNode.removeChild(this._backdrop)
this._backdrop = null
}
_showBackdrop(callback) {
const isAnimated = this._isAnimated()
if (this._isShown && this._config.backdrop) {
this._backdrop = document.createElement('div')
this._backdrop.className = CLASS_NAME_BACKDROP
if (isAnimated) {
this._backdrop.classList.add(CLASS_NAME_FADE)
}
document.body.appendChild(this._backdrop)
EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
if (this._ignoreBackdropClick) {
this._ignoreBackdropClick = false
return
}
if (event.target !== event.currentTarget) {
return
}
if (this._config.backdrop === 'static') {
this._triggerBackdropTransition()
} else {
this.hide()
}
})
if (isAnimated) {
reflow(this._backdrop)
}
this._backdrop.classList.add(CLASS_NAME_SHOW)
if (!isAnimated) {
callback()
EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
if (this._ignoreBackdropClick) {
this._ignoreBackdropClick = false
return
}
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop)
EventHandler.one(this._backdrop, 'transitionend', callback)
emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
} else if (!this._isShown && this._backdrop) {
this._backdrop.classList.remove(CLASS_NAME_SHOW)
const callbackRemove = () => {
this._removeBackdrop()
callback()
if (event.target !== event.currentTarget) {
return
}
if (isAnimated) {
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop)
EventHandler.one(this._backdrop, 'transitionend', callbackRemove)
emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
} else {
callbackRemove()
if (this._config.backdrop === true) {
this.hide()
} else if (this._config.backdrop === 'static') {
this._triggerBackdropTransition()
}
} else {
callback()
}
})
this._backdrop.show(callback)
}
_isAnimated() {