1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): util/backdrop.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import EventHandler from '../dom/event-handler'
|
---|
9 | import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
|
---|
10 |
|
---|
11 | const Default = {
|
---|
12 | className: 'modal-backdrop',
|
---|
13 | isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
|
---|
14 | isAnimated: false,
|
---|
15 | rootElement: 'body', // give the choice to place backdrop under different elements
|
---|
16 | clickCallback: null
|
---|
17 | }
|
---|
18 |
|
---|
19 | const DefaultType = {
|
---|
20 | className: 'string',
|
---|
21 | isVisible: 'boolean',
|
---|
22 | isAnimated: 'boolean',
|
---|
23 | rootElement: '(element|string)',
|
---|
24 | clickCallback: '(function|null)'
|
---|
25 | }
|
---|
26 | const NAME = 'backdrop'
|
---|
27 | const CLASS_NAME_FADE = 'fade'
|
---|
28 | const CLASS_NAME_SHOW = 'show'
|
---|
29 |
|
---|
30 | const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
|
---|
31 |
|
---|
32 | class Backdrop {
|
---|
33 | constructor(config) {
|
---|
34 | this._config = this._getConfig(config)
|
---|
35 | this._isAppended = false
|
---|
36 | this._element = null
|
---|
37 | }
|
---|
38 |
|
---|
39 | show(callback) {
|
---|
40 | if (!this._config.isVisible) {
|
---|
41 | execute(callback)
|
---|
42 | return
|
---|
43 | }
|
---|
44 |
|
---|
45 | this._append()
|
---|
46 |
|
---|
47 | if (this._config.isAnimated) {
|
---|
48 | reflow(this._getElement())
|
---|
49 | }
|
---|
50 |
|
---|
51 | this._getElement().classList.add(CLASS_NAME_SHOW)
|
---|
52 |
|
---|
53 | this._emulateAnimation(() => {
|
---|
54 | execute(callback)
|
---|
55 | })
|
---|
56 | }
|
---|
57 |
|
---|
58 | hide(callback) {
|
---|
59 | if (!this._config.isVisible) {
|
---|
60 | execute(callback)
|
---|
61 | return
|
---|
62 | }
|
---|
63 |
|
---|
64 | this._getElement().classList.remove(CLASS_NAME_SHOW)
|
---|
65 |
|
---|
66 | this._emulateAnimation(() => {
|
---|
67 | this.dispose()
|
---|
68 | execute(callback)
|
---|
69 | })
|
---|
70 | }
|
---|
71 |
|
---|
72 | // Private
|
---|
73 |
|
---|
74 | _getElement() {
|
---|
75 | if (!this._element) {
|
---|
76 | const backdrop = document.createElement('div')
|
---|
77 | backdrop.className = this._config.className
|
---|
78 | if (this._config.isAnimated) {
|
---|
79 | backdrop.classList.add(CLASS_NAME_FADE)
|
---|
80 | }
|
---|
81 |
|
---|
82 | this._element = backdrop
|
---|
83 | }
|
---|
84 |
|
---|
85 | return this._element
|
---|
86 | }
|
---|
87 |
|
---|
88 | _getConfig(config) {
|
---|
89 | config = {
|
---|
90 | ...Default,
|
---|
91 | ...(typeof config === 'object' ? config : {})
|
---|
92 | }
|
---|
93 |
|
---|
94 | // use getElement() with the default "body" to get a fresh Element on each instantiation
|
---|
95 | config.rootElement = getElement(config.rootElement)
|
---|
96 | typeCheckConfig(NAME, config, DefaultType)
|
---|
97 | return config
|
---|
98 | }
|
---|
99 |
|
---|
100 | _append() {
|
---|
101 | if (this._isAppended) {
|
---|
102 | return
|
---|
103 | }
|
---|
104 |
|
---|
105 | this._config.rootElement.append(this._getElement())
|
---|
106 |
|
---|
107 | EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
---|
108 | execute(this._config.clickCallback)
|
---|
109 | })
|
---|
110 |
|
---|
111 | this._isAppended = true
|
---|
112 | }
|
---|
113 |
|
---|
114 | dispose() {
|
---|
115 | if (!this._isAppended) {
|
---|
116 | return
|
---|
117 | }
|
---|
118 |
|
---|
119 | EventHandler.off(this._element, EVENT_MOUSEDOWN)
|
---|
120 |
|
---|
121 | this._element.remove()
|
---|
122 | this._isAppended = false
|
---|
123 | }
|
---|
124 |
|
---|
125 | _emulateAnimation(callback) {
|
---|
126 | executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
|
---|
127 | }
|
---|
128 | }
|
---|
129 |
|
---|
130 | export default Backdrop
|
---|