Decouple BackDrop from modal (#32439)

* 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 <[email protected]>

2 files changed, 131 insertions, 1 deletions

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
new file mode 100644
index 000000000..ab14c23fe
--- /dev/null
+++ b/js/src/util/backdrop.js
@@ -0,0 +1,123 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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 { 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'
+
+class Backdrop {
+  constructor(config) {
+    this._config = this._getConfig(config)
+    this._isAppended = false
+    this._element = null
+  }
+
+  show(callback) {
+    if (!this._config.isVisible) {
+      execute(callback)
+      return
+    }
+
+    this._append()
+
+    if (this._config.isAnimated) {
+      reflow(this._getElement())
+    }
+
+    this._getElement().classList.add(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      execute(callback)
+    })
+  }
+
+  hide(callback) {
+    if (!this._config.isVisible) {
+      execute(callback)
+      return
+    }
+
+    this._getElement().classList.remove(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      this.dispose()
+      execute(callback)
+    })
+  }
+
+  // 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)
+      }
+
+      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
+    }
+
+    this._config.rootElement.appendChild(this._getElement())
+
+    this._isAppended = true
+  }
+
+  dispose() {
+    if (!this._isAppended) {
+      return
+    }
+
+    this._getElement().parentNode.removeChild(this._element)
+    this._isAppended = false
+  }
+
+  _emulateAnimation(callback) {
+    if (!this._config.isAnimated) {
+      execute(callback)
+      return
+    }
+
+    const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement())
+    EventHandler.one(this._getElement(), 'transitionend', () => execute(callback))
+    emulateTransitionEnd(this._getElement(), backdropTransitionDuration)
+  }
+}
+
+export default Backdrop
diff --git a/js/src/util/index.js b/js/src/util/index.js
index f19d76e03..c27c470e9 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -230,6 +230,12 @@ const defineJQueryPlugin = (name, plugin) => {
   })
 }
 
+const execute = callback => {
+  if (typeof callback === 'function') {
+    callback()
+  }
+}
+
 export {
   getUID,
   getSelectorFromElement,
@@ -247,5 +253,6 @@ export {
   getjQuery,
   onDOMContentLoaded,
   isRTL,
-  defineJQueryPlugin
+  defineJQueryPlugin,
+  execute
 }