add config obj to backdrop helper | tests for rootElement | use trans…

…itionend helper
twbs · Apr 14, 2021 · f68d69b · f68d69b
1 parent 7d8dbca
commit f68d69b
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 89 deletions.
diff --git a/js/src/modal.js b/js/src/modal.js
@@ -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
@@ -214,9 +215,10 @@ class Modal extends BaseComponent {
   // Private
 
   _initializeBackDrop() {
-    const isAnimated = this._isAnimated()
-
-    return new Backdrop((this._config.backdrop), isAnimated)
+    return new Backdrop({
+      isVisible: Boolean(this._config.backdrop), // 'static' option want to translated as 'true', and booleans will keep their value
+      isAnimated: this._isAnimated()
+    })
   }
 
   _getConfig(config) {
@@ -340,7 +342,7 @@ class Modal extends BaseComponent {
 
       if (this._config.backdrop === true) {
         this.hide()
-      } else {
+      } else if (this._config.backdrop === 'static') {
         this._triggerBackdropTransition()
       }
     })

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
@@ -1,112 +1,122 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.0.0-beta2): util/backdrop.js
+ * Bootstrap (v5.0.0-beta3): util/backdrop.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
 
 import EventHandler from '../dom/event-handler'
-import { execute, getTransitionDurationFromElement, reflow } from './index'
+import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index'
 
+const Default = {
+  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
+  isAnimated: false,
+  rootElement: document.body // give the choice to place backdrop under different elements
+}
+
+const DefaultType = {
+  isVisible: 'boolean',
+  isAnimated: 'boolean',
+  rootElement: 'element'
+}
+const NAME = 'backdrop'
 const CLASS_NAME_BACKDROP = 'modal-backdrop'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
-const EVENT_MOUSEDOWN = 'mousedown.bs.backdrop'
-
 class Backdrop {
-  constructor(isVisible = true, isAnimated = false) {
-    this._isVisible = isVisible
-    this._isAnimated = isAnimated
+  constructor(config) {
+    this._config = this._getConfig(config)
     this._isAppended = false
-    this._elem = this._createElement()
-  }
-
-  _get() {
-    return this._elem
-  }
-
-  onClick(callback) {
-    this._clickCallback = callback
+    this._element = null
   }
 
   show(callback) {
-    if (!this._isVisible) {
+    if (!this._config.isVisible) {
       execute(callback)
       return
     }
 
-    if (this._isAnimated) {
-      this._get().classList.add(CLASS_NAME_FADE)
-    }
-
     this._append()
 
-    if (this._isAnimated) {
-      reflow(this._get())
+    if (this._config.isAnimated) {
+      reflow(this._getElement())
     }
 
-    this._get().classList.add(CLASS_NAME_SHOW)
+    this._getElement().classList.add(CLASS_NAME_SHOW)
 
     this._emulateAnimation(() => {
       execute(callback)
     })
   }
 
   hide(callback) {
-    EventHandler.off(this._get(), EVENT_MOUSEDOWN)
-
-    if (!this._isVisible) {
+    if (!this._config.isVisible) {
       execute(callback)
       return
     }
 
-    this._get().classList.remove(CLASS_NAME_SHOW)
+    this._getElement().classList.remove(CLASS_NAME_SHOW)
 
     this._emulateAnimation(() => {
-      this._remove()
+      this.dispose()
       execute(callback)
     })
   }
 
-  _createElement() {
-    const backdrop = document.createElement('div')
-    backdrop.className = CLASS_NAME_BACKDROP
+  // Private
+
+  _getElement() {
+    if (!this._element) {
+      const backdrop = document.createElement('div')
+      backdrop.className = CLASS_NAME_BACKDROP
+      if (this._config.isAnimated) {
+        backdrop.classList.add(CLASS_NAME_FADE)
+      }
 
-    return backdrop
+      this._element = backdrop
+    }
+
+    return this._element
+  }
+
+  _getConfig(config) {
+    config = {
+      ...Default,
+      ...(typeof config === 'object' ? config : {})
+    }
+    typeCheckConfig(NAME, config, DefaultType)
+    return config
   }
 
   _append() {
     if (this._isAppended) {
       return
     }
 
-    document.body.appendChild(this._get())
-
-    EventHandler.on(this._get(), EVENT_MOUSEDOWN, () => {
-      execute(this._clickCallback)
-    })
+    this._config.rootElement.appendChild(this._getElement())
 
     this._isAppended = true
   }
 
-  _remove() {
+  dispose() {
     if (!this._isAppended) {
       return
     }
 
-    this._get().parentNode.removeChild(this._get())
+    this._getElement().parentNode.removeChild(this._element)
     this._isAppended = false
   }
 
   _emulateAnimation(callback) {
-    if (!this._isAnimated) {
+    if (!this._config.isAnimated) {
       execute(callback)
       return
     }
 
-    const backdropTransitionDuration = getTransitionDurationFromElement(this._get())
-    setTimeout(() => execute(callback), backdropTransitionDuration + 5)
+    const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement())
+    EventHandler.one(this._getElement(), 'transitionend', () => execute(callback))
+    emulateTransitionEnd(this._getElement(), backdropTransitionDuration)
   }
 }