bootstrap 5.1.1 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/javascripts/bootstrap/alert.js +18 -153
- data/assets/javascripts/bootstrap/base-component.js +44 -127
- data/assets/javascripts/bootstrap/button.js +16 -80
- data/assets/javascripts/bootstrap/carousel.js +225 -497
- data/assets/javascripts/bootstrap/collapse.js +79 -262
- data/assets/javascripts/bootstrap/dom/data.js +6 -8
- data/assets/javascripts/bootstrap/dom/event-handler.js +95 -133
- data/assets/javascripts/bootstrap/dom/manipulator.js +25 -29
- data/assets/javascripts/bootstrap/dom/selector-engine.js +17 -59
- data/assets/javascripts/bootstrap/dropdown.js +124 -342
- data/assets/javascripts/bootstrap/modal.js +122 -767
- data/assets/javascripts/bootstrap/offcanvas.js +102 -671
- data/assets/javascripts/bootstrap/popover.js +42 -124
- data/assets/javascripts/bootstrap/scrollspy.js +186 -269
- data/assets/javascripts/bootstrap/tab.js +222 -221
- data/assets/javascripts/bootstrap/toast.js +41 -227
- data/assets/javascripts/bootstrap/tooltip.js +283 -629
- data/assets/javascripts/bootstrap/util/backdrop.js +165 -0
- data/assets/javascripts/bootstrap/util/component-functions.js +46 -0
- data/assets/javascripts/bootstrap/util/config.js +79 -0
- data/assets/javascripts/bootstrap/util/focustrap.js +129 -0
- data/assets/javascripts/bootstrap/util/index.js +350 -0
- data/assets/javascripts/bootstrap/util/sanitizer.js +122 -0
- data/assets/javascripts/bootstrap/util/scrollbar.js +138 -0
- data/assets/javascripts/bootstrap/util/swipe.js +155 -0
- data/assets/javascripts/bootstrap/util/template-factory.js +177 -0
- data/assets/javascripts/bootstrap-global-this-define.js +1 -1
- data/assets/javascripts/bootstrap-sprockets.js +16 -7
- data/assets/javascripts/bootstrap.js +2094 -1891
- data/assets/javascripts/bootstrap.min.js +3 -3
- data/assets/stylesheets/_bootstrap-grid.scss +3 -6
- data/assets/stylesheets/_bootstrap-reboot.scss +3 -7
- data/assets/stylesheets/_bootstrap.scss +4 -6
- data/assets/stylesheets/bootstrap/_accordion.scss +52 -24
- data/assets/stylesheets/bootstrap/_alert.scss +18 -4
- data/assets/stylesheets/bootstrap/_badge.scss +14 -5
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +22 -10
- data/assets/stylesheets/bootstrap/_button-group.scss +3 -0
- data/assets/stylesheets/bootstrap/_buttons.scss +97 -22
- data/assets/stylesheets/bootstrap/_card.scss +55 -37
- data/assets/stylesheets/bootstrap/_close.scss +1 -1
- data/assets/stylesheets/bootstrap/_containers.scss +1 -1
- data/assets/stylesheets/bootstrap/_dropdown.scss +83 -75
- data/assets/stylesheets/bootstrap/_functions.scss +7 -7
- data/assets/stylesheets/bootstrap/_grid.scss +3 -3
- data/assets/stylesheets/bootstrap/_helpers.scss +1 -0
- data/assets/stylesheets/bootstrap/_list-group.scss +44 -27
- data/assets/stylesheets/bootstrap/_maps.scss +54 -0
- data/assets/stylesheets/bootstrap/_modal.scss +71 -43
- data/assets/stylesheets/bootstrap/_nav.scss +53 -20
- data/assets/stylesheets/bootstrap/_navbar.scss +91 -150
- data/assets/stylesheets/bootstrap/_offcanvas.scss +119 -59
- data/assets/stylesheets/bootstrap/_pagination.scss +66 -21
- data/assets/stylesheets/bootstrap/_placeholders.scss +1 -1
- data/assets/stylesheets/bootstrap/_popover.scss +90 -52
- data/assets/stylesheets/bootstrap/_progress.scss +20 -9
- data/assets/stylesheets/bootstrap/_reboot.scss +25 -40
- data/assets/stylesheets/bootstrap/_root.scss +40 -21
- data/assets/stylesheets/bootstrap/_spinners.scss +38 -22
- data/assets/stylesheets/bootstrap/_tables.scss +38 -25
- data/assets/stylesheets/bootstrap/_toasts.scss +35 -16
- data/assets/stylesheets/bootstrap/_tooltip.scss +61 -56
- data/assets/stylesheets/bootstrap/_type.scss +2 -0
- data/assets/stylesheets/bootstrap/_utilities.scss +43 -26
- data/assets/stylesheets/bootstrap/_variables.scss +118 -124
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +3 -6
- data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +14 -3
- data/assets/stylesheets/bootstrap/forms/_form-check.scss +28 -5
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +12 -37
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +2 -1
- data/assets/stylesheets/bootstrap/forms/_input-group.scss +15 -7
- data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +10 -0
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +2 -2
- data/assets/stylesheets/bootstrap/helpers/_position.scss +7 -1
- data/assets/stylesheets/bootstrap/helpers/_ratio.scss +2 -2
- data/assets/stylesheets/bootstrap/helpers/_vr.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +7 -3
- data/assets/stylesheets/bootstrap/mixins/_banner.scss +9 -0
- data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +8 -8
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +32 -95
- data/assets/stylesheets/bootstrap/mixins/_container.scss +4 -2
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -0
- data/assets/stylesheets/bootstrap/mixins/_gradients.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +13 -12
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +4 -25
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +12 -9
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +12 -4
- data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +1 -1
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +9 -4
- metadata +16 -4
|
@@ -1,622 +1,31 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Bootstrap modal.js v5.
|
|
3
|
-
* Copyright 2011-
|
|
2
|
+
* Bootstrap modal.js v5.2.0 (https://getbootstrap.com/)
|
|
3
|
+
* Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
|
4
4
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
7
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./
|
|
8
|
-
typeof define === 'function' && define.amd ? define(['./
|
|
9
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.
|
|
10
|
-
}(this, (function (
|
|
7
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index'), require('./dom/event-handler'), require('./dom/selector-engine'), require('./util/scrollbar'), require('./base-component'), require('./util/backdrop'), require('./util/focustrap'), require('./util/component-functions')) :
|
|
8
|
+
typeof define === 'function' && define.amd ? define(['./util/index', './dom/event-handler', './dom/selector-engine', './util/scrollbar', './base-component', './util/backdrop', './util/focustrap', './util/component-functions'], factory) :
|
|
9
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.Index, global.EventHandler, global.SelectorEngine, global.Scrollbar, global.BaseComponent, global.Backdrop, global.Focustrap, global.ComponentFunctions));
|
|
10
|
+
})(this, (function (index, EventHandler, SelectorEngine, ScrollBarHelper, BaseComponent, Backdrop, FocusTrap, componentFunctions) { 'use strict';
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
|
|
15
|
+
const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
|
16
|
+
const ScrollBarHelper__default = /*#__PURE__*/_interopDefaultLegacy(ScrollBarHelper);
|
|
17
|
+
const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
|
18
|
+
const Backdrop__default = /*#__PURE__*/_interopDefaultLegacy(Backdrop);
|
|
19
|
+
const FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
|
|
18
20
|
|
|
19
21
|
/**
|
|
20
22
|
* --------------------------------------------------------------------------
|
|
21
|
-
* Bootstrap (v5.
|
|
23
|
+
* Bootstrap (v5.2.0): modal.js
|
|
22
24
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
23
25
|
* --------------------------------------------------------------------------
|
|
24
26
|
*/
|
|
25
|
-
const MILLISECONDS_MULTIPLIER = 1000;
|
|
26
|
-
const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
|
27
|
-
|
|
28
|
-
const toType = obj => {
|
|
29
|
-
if (obj === null || obj === undefined) {
|
|
30
|
-
return `${obj}`;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const getSelector = element => {
|
|
37
|
-
let selector = element.getAttribute('data-bs-target');
|
|
38
|
-
|
|
39
|
-
if (!selector || selector === '#') {
|
|
40
|
-
let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes,
|
|
41
|
-
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
|
42
|
-
// `document.querySelector` will rightfully complain it is invalid.
|
|
43
|
-
// See https://github.com/twbs/bootstrap/issues/32273
|
|
44
|
-
|
|
45
|
-
if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) {
|
|
46
|
-
return null;
|
|
47
|
-
} // Just in case some CMS puts out a full URL with the anchor appended
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
|
51
|
-
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return selector;
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
const getElementFromSelector = element => {
|
|
61
|
-
const selector = getSelector(element);
|
|
62
|
-
return selector ? document.querySelector(selector) : null;
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
const getTransitionDurationFromElement = element => {
|
|
66
|
-
if (!element) {
|
|
67
|
-
return 0;
|
|
68
|
-
} // Get transition-duration of the element
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
let {
|
|
72
|
-
transitionDuration,
|
|
73
|
-
transitionDelay
|
|
74
|
-
} = window.getComputedStyle(element);
|
|
75
|
-
const floatTransitionDuration = Number.parseFloat(transitionDuration);
|
|
76
|
-
const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
|
|
77
|
-
|
|
78
|
-
if (!floatTransitionDuration && !floatTransitionDelay) {
|
|
79
|
-
return 0;
|
|
80
|
-
} // If multiple durations are defined, take the first
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
transitionDuration = transitionDuration.split(',')[0];
|
|
84
|
-
transitionDelay = transitionDelay.split(',')[0];
|
|
85
|
-
return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
const triggerTransitionEnd = element => {
|
|
89
|
-
element.dispatchEvent(new Event(TRANSITION_END));
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const isElement = obj => {
|
|
93
|
-
if (!obj || typeof obj !== 'object') {
|
|
94
|
-
return false;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
if (typeof obj.jquery !== 'undefined') {
|
|
98
|
-
obj = obj[0];
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return typeof obj.nodeType !== 'undefined';
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
const getElement = obj => {
|
|
105
|
-
if (isElement(obj)) {
|
|
106
|
-
// it's a jQuery object or a node element
|
|
107
|
-
return obj.jquery ? obj[0] : obj;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
if (typeof obj === 'string' && obj.length > 0) {
|
|
111
|
-
return document.querySelector(obj);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
return null;
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
const typeCheckConfig = (componentName, config, configTypes) => {
|
|
118
|
-
Object.keys(configTypes).forEach(property => {
|
|
119
|
-
const expectedTypes = configTypes[property];
|
|
120
|
-
const value = config[property];
|
|
121
|
-
const valueType = value && isElement(value) ? 'element' : toType(value);
|
|
122
|
-
|
|
123
|
-
if (!new RegExp(expectedTypes).test(valueType)) {
|
|
124
|
-
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
const isVisible = element => {
|
|
130
|
-
if (!isElement(element) || element.getClientRects().length === 0) {
|
|
131
|
-
return false;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
const isDisabled = element => {
|
|
138
|
-
if (!element || element.nodeType !== Node.ELEMENT_NODE) {
|
|
139
|
-
return true;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
if (element.classList.contains('disabled')) {
|
|
143
|
-
return true;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
if (typeof element.disabled !== 'undefined') {
|
|
147
|
-
return element.disabled;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
|
|
151
|
-
};
|
|
152
27
|
/**
|
|
153
|
-
* Trick to restart an element's animation
|
|
154
|
-
*
|
|
155
|
-
* @param {HTMLElement} element
|
|
156
|
-
* @return void
|
|
157
|
-
*
|
|
158
|
-
* @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
|
|
159
|
-
*/
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
const reflow = element => {
|
|
163
|
-
// eslint-disable-next-line no-unused-expressions
|
|
164
|
-
element.offsetHeight;
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
const getjQuery = () => {
|
|
168
|
-
const {
|
|
169
|
-
jQuery
|
|
170
|
-
} = window;
|
|
171
|
-
|
|
172
|
-
if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
|
|
173
|
-
return jQuery;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
return null;
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
const DOMContentLoadedCallbacks = [];
|
|
180
|
-
|
|
181
|
-
const onDOMContentLoaded = callback => {
|
|
182
|
-
if (document.readyState === 'loading') {
|
|
183
|
-
// add listener on the first call when the document is in loading state
|
|
184
|
-
if (!DOMContentLoadedCallbacks.length) {
|
|
185
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
186
|
-
DOMContentLoadedCallbacks.forEach(callback => callback());
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
DOMContentLoadedCallbacks.push(callback);
|
|
191
|
-
} else {
|
|
192
|
-
callback();
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
const isRTL = () => document.documentElement.dir === 'rtl';
|
|
197
|
-
|
|
198
|
-
const defineJQueryPlugin = plugin => {
|
|
199
|
-
onDOMContentLoaded(() => {
|
|
200
|
-
const $ = getjQuery();
|
|
201
|
-
/* istanbul ignore if */
|
|
202
|
-
|
|
203
|
-
if ($) {
|
|
204
|
-
const name = plugin.NAME;
|
|
205
|
-
const JQUERY_NO_CONFLICT = $.fn[name];
|
|
206
|
-
$.fn[name] = plugin.jQueryInterface;
|
|
207
|
-
$.fn[name].Constructor = plugin;
|
|
208
|
-
|
|
209
|
-
$.fn[name].noConflict = () => {
|
|
210
|
-
$.fn[name] = JQUERY_NO_CONFLICT;
|
|
211
|
-
return plugin.jQueryInterface;
|
|
212
|
-
};
|
|
213
|
-
}
|
|
214
|
-
});
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
const execute = callback => {
|
|
218
|
-
if (typeof callback === 'function') {
|
|
219
|
-
callback();
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
|
|
223
|
-
const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
|
|
224
|
-
if (!waitForTransition) {
|
|
225
|
-
execute(callback);
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
const durationPadding = 5;
|
|
230
|
-
const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
|
|
231
|
-
let called = false;
|
|
232
|
-
|
|
233
|
-
const handler = ({
|
|
234
|
-
target
|
|
235
|
-
}) => {
|
|
236
|
-
if (target !== transitionElement) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
called = true;
|
|
241
|
-
transitionElement.removeEventListener(TRANSITION_END, handler);
|
|
242
|
-
execute(callback);
|
|
243
|
-
};
|
|
244
|
-
|
|
245
|
-
transitionElement.addEventListener(TRANSITION_END, handler);
|
|
246
|
-
setTimeout(() => {
|
|
247
|
-
if (!called) {
|
|
248
|
-
triggerTransitionEnd(transitionElement);
|
|
249
|
-
}
|
|
250
|
-
}, emulatedDuration);
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* --------------------------------------------------------------------------
|
|
255
|
-
* Bootstrap (v5.1.1): util/scrollBar.js
|
|
256
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
257
|
-
* --------------------------------------------------------------------------
|
|
258
|
-
*/
|
|
259
|
-
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
|
260
|
-
const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
|
261
|
-
|
|
262
|
-
class ScrollBarHelper {
|
|
263
|
-
constructor() {
|
|
264
|
-
this._element = document.body;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
getWidth() {
|
|
268
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
|
269
|
-
const documentWidth = document.documentElement.clientWidth;
|
|
270
|
-
return Math.abs(window.innerWidth - documentWidth);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
hide() {
|
|
274
|
-
const width = this.getWidth();
|
|
275
|
-
|
|
276
|
-
this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
|
283
|
-
|
|
284
|
-
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
_disableOverFlow() {
|
|
288
|
-
this._saveInitialAttribute(this._element, 'overflow');
|
|
289
|
-
|
|
290
|
-
this._element.style.overflow = 'hidden';
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
_setElementAttributes(selector, styleProp, callback) {
|
|
294
|
-
const scrollbarWidth = this.getWidth();
|
|
295
|
-
|
|
296
|
-
const manipulationCallBack = element => {
|
|
297
|
-
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
|
298
|
-
return;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
this._saveInitialAttribute(element, styleProp);
|
|
302
|
-
|
|
303
|
-
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
|
304
|
-
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
this._applyManipulationCallback(selector, manipulationCallBack);
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
reset() {
|
|
311
|
-
this._resetElementAttributes(this._element, 'overflow');
|
|
312
|
-
|
|
313
|
-
this._resetElementAttributes(this._element, 'paddingRight');
|
|
314
|
-
|
|
315
|
-
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
|
316
|
-
|
|
317
|
-
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
_saveInitialAttribute(element, styleProp) {
|
|
321
|
-
const actualValue = element.style[styleProp];
|
|
322
|
-
|
|
323
|
-
if (actualValue) {
|
|
324
|
-
Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue);
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
_resetElementAttributes(selector, styleProp) {
|
|
329
|
-
const manipulationCallBack = element => {
|
|
330
|
-
const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
|
|
331
|
-
|
|
332
|
-
if (typeof value === 'undefined') {
|
|
333
|
-
element.style.removeProperty(styleProp);
|
|
334
|
-
} else {
|
|
335
|
-
Manipulator__default['default'].removeDataAttribute(element, styleProp);
|
|
336
|
-
element.style[styleProp] = value;
|
|
337
|
-
}
|
|
338
|
-
};
|
|
339
|
-
|
|
340
|
-
this._applyManipulationCallback(selector, manipulationCallBack);
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
_applyManipulationCallback(selector, callBack) {
|
|
344
|
-
if (isElement(selector)) {
|
|
345
|
-
callBack(selector);
|
|
346
|
-
} else {
|
|
347
|
-
SelectorEngine__default['default'].find(selector, this._element).forEach(callBack);
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
isOverflowing() {
|
|
352
|
-
return this.getWidth() > 0;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
/**
|
|
358
|
-
* --------------------------------------------------------------------------
|
|
359
|
-
* Bootstrap (v5.1.1): util/backdrop.js
|
|
360
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
361
|
-
* --------------------------------------------------------------------------
|
|
362
|
-
*/
|
|
363
|
-
const Default$2 = {
|
|
364
|
-
className: 'modal-backdrop',
|
|
365
|
-
isVisible: true,
|
|
366
|
-
// if false, we use the backdrop helper without adding any element to the dom
|
|
367
|
-
isAnimated: false,
|
|
368
|
-
rootElement: 'body',
|
|
369
|
-
// give the choice to place backdrop under different elements
|
|
370
|
-
clickCallback: null
|
|
371
|
-
};
|
|
372
|
-
const DefaultType$2 = {
|
|
373
|
-
className: 'string',
|
|
374
|
-
isVisible: 'boolean',
|
|
375
|
-
isAnimated: 'boolean',
|
|
376
|
-
rootElement: '(element|string)',
|
|
377
|
-
clickCallback: '(function|null)'
|
|
378
|
-
};
|
|
379
|
-
const NAME$2 = 'backdrop';
|
|
380
|
-
const CLASS_NAME_FADE$1 = 'fade';
|
|
381
|
-
const CLASS_NAME_SHOW$1 = 'show';
|
|
382
|
-
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$2}`;
|
|
383
|
-
|
|
384
|
-
class Backdrop {
|
|
385
|
-
constructor(config) {
|
|
386
|
-
this._config = this._getConfig(config);
|
|
387
|
-
this._isAppended = false;
|
|
388
|
-
this._element = null;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
show(callback) {
|
|
392
|
-
if (!this._config.isVisible) {
|
|
393
|
-
execute(callback);
|
|
394
|
-
return;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
this._append();
|
|
398
|
-
|
|
399
|
-
if (this._config.isAnimated) {
|
|
400
|
-
reflow(this._getElement());
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
this._getElement().classList.add(CLASS_NAME_SHOW$1);
|
|
404
|
-
|
|
405
|
-
this._emulateAnimation(() => {
|
|
406
|
-
execute(callback);
|
|
407
|
-
});
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
hide(callback) {
|
|
411
|
-
if (!this._config.isVisible) {
|
|
412
|
-
execute(callback);
|
|
413
|
-
return;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
this._getElement().classList.remove(CLASS_NAME_SHOW$1);
|
|
417
|
-
|
|
418
|
-
this._emulateAnimation(() => {
|
|
419
|
-
this.dispose();
|
|
420
|
-
execute(callback);
|
|
421
|
-
});
|
|
422
|
-
} // Private
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
_getElement() {
|
|
426
|
-
if (!this._element) {
|
|
427
|
-
const backdrop = document.createElement('div');
|
|
428
|
-
backdrop.className = this._config.className;
|
|
429
|
-
|
|
430
|
-
if (this._config.isAnimated) {
|
|
431
|
-
backdrop.classList.add(CLASS_NAME_FADE$1);
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
this._element = backdrop;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
return this._element;
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
_getConfig(config) {
|
|
441
|
-
config = { ...Default$2,
|
|
442
|
-
...(typeof config === 'object' ? config : {})
|
|
443
|
-
}; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
|
444
|
-
|
|
445
|
-
config.rootElement = getElement(config.rootElement);
|
|
446
|
-
typeCheckConfig(NAME$2, config, DefaultType$2);
|
|
447
|
-
return config;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
_append() {
|
|
451
|
-
if (this._isAppended) {
|
|
452
|
-
return;
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
this._config.rootElement.append(this._getElement());
|
|
456
|
-
|
|
457
|
-
EventHandler__default['default'].on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
|
458
|
-
execute(this._config.clickCallback);
|
|
459
|
-
});
|
|
460
|
-
this._isAppended = true;
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
dispose() {
|
|
464
|
-
if (!this._isAppended) {
|
|
465
|
-
return;
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
EventHandler__default['default'].off(this._element, EVENT_MOUSEDOWN);
|
|
469
|
-
|
|
470
|
-
this._element.remove();
|
|
471
|
-
|
|
472
|
-
this._isAppended = false;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
_emulateAnimation(callback) {
|
|
476
|
-
executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
/**
|
|
482
|
-
* --------------------------------------------------------------------------
|
|
483
|
-
* Bootstrap (v5.1.1): util/focustrap.js
|
|
484
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
485
|
-
* --------------------------------------------------------------------------
|
|
486
|
-
*/
|
|
487
|
-
const Default$1 = {
|
|
488
|
-
trapElement: null,
|
|
489
|
-
// The element to trap focus inside of
|
|
490
|
-
autofocus: true
|
|
491
|
-
};
|
|
492
|
-
const DefaultType$1 = {
|
|
493
|
-
trapElement: 'element',
|
|
494
|
-
autofocus: 'boolean'
|
|
495
|
-
};
|
|
496
|
-
const NAME$1 = 'focustrap';
|
|
497
|
-
const DATA_KEY$1 = 'bs.focustrap';
|
|
498
|
-
const EVENT_KEY$1 = `.${DATA_KEY$1}`;
|
|
499
|
-
const EVENT_FOCUSIN = `focusin${EVENT_KEY$1}`;
|
|
500
|
-
const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$1}`;
|
|
501
|
-
const TAB_KEY = 'Tab';
|
|
502
|
-
const TAB_NAV_FORWARD = 'forward';
|
|
503
|
-
const TAB_NAV_BACKWARD = 'backward';
|
|
504
|
-
|
|
505
|
-
class FocusTrap {
|
|
506
|
-
constructor(config) {
|
|
507
|
-
this._config = this._getConfig(config);
|
|
508
|
-
this._isActive = false;
|
|
509
|
-
this._lastTabNavDirection = null;
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
activate() {
|
|
513
|
-
const {
|
|
514
|
-
trapElement,
|
|
515
|
-
autofocus
|
|
516
|
-
} = this._config;
|
|
517
|
-
|
|
518
|
-
if (this._isActive) {
|
|
519
|
-
return;
|
|
520
|
-
}
|
|
521
|
-
|
|
522
|
-
if (autofocus) {
|
|
523
|
-
trapElement.focus();
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
EventHandler__default['default'].off(document, EVENT_KEY$1); // guard against infinite focus loop
|
|
527
|
-
|
|
528
|
-
EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => this._handleFocusin(event));
|
|
529
|
-
EventHandler__default['default'].on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event));
|
|
530
|
-
this._isActive = true;
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
deactivate() {
|
|
534
|
-
if (!this._isActive) {
|
|
535
|
-
return;
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
this._isActive = false;
|
|
539
|
-
EventHandler__default['default'].off(document, EVENT_KEY$1);
|
|
540
|
-
} // Private
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
_handleFocusin(event) {
|
|
544
|
-
const {
|
|
545
|
-
target
|
|
546
|
-
} = event;
|
|
547
|
-
const {
|
|
548
|
-
trapElement
|
|
549
|
-
} = this._config;
|
|
550
|
-
|
|
551
|
-
if (target === document || target === trapElement || trapElement.contains(target)) {
|
|
552
|
-
return;
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
const elements = SelectorEngine__default['default'].focusableChildren(trapElement);
|
|
556
|
-
|
|
557
|
-
if (elements.length === 0) {
|
|
558
|
-
trapElement.focus();
|
|
559
|
-
} else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
|
|
560
|
-
elements[elements.length - 1].focus();
|
|
561
|
-
} else {
|
|
562
|
-
elements[0].focus();
|
|
563
|
-
}
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
_handleKeydown(event) {
|
|
567
|
-
if (event.key !== TAB_KEY) {
|
|
568
|
-
return;
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
_getConfig(config) {
|
|
575
|
-
config = { ...Default$1,
|
|
576
|
-
...(typeof config === 'object' ? config : {})
|
|
577
|
-
};
|
|
578
|
-
typeCheckConfig(NAME$1, config, DefaultType$1);
|
|
579
|
-
return config;
|
|
580
|
-
}
|
|
581
|
-
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
/**
|
|
585
|
-
* --------------------------------------------------------------------------
|
|
586
|
-
* Bootstrap (v5.1.1): util/component-functions.js
|
|
587
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
588
|
-
* --------------------------------------------------------------------------
|
|
589
|
-
*/
|
|
590
|
-
|
|
591
|
-
const enableDismissTrigger = (component, method = 'hide') => {
|
|
592
|
-
const clickEvent = `click.dismiss${component.EVENT_KEY}`;
|
|
593
|
-
const name = component.NAME;
|
|
594
|
-
EventHandler__default['default'].on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
|
|
595
|
-
if (['A', 'AREA'].includes(this.tagName)) {
|
|
596
|
-
event.preventDefault();
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
if (isDisabled(this)) {
|
|
600
|
-
return;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
const target = getElementFromSelector(this) || this.closest(`.${name}`);
|
|
604
|
-
const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
|
|
605
|
-
|
|
606
|
-
instance[method]();
|
|
607
|
-
});
|
|
608
|
-
};
|
|
609
|
-
|
|
610
|
-
/**
|
|
611
|
-
* --------------------------------------------------------------------------
|
|
612
|
-
* Bootstrap (v5.1.1): modal.js
|
|
613
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
614
|
-
* --------------------------------------------------------------------------
|
|
615
|
-
*/
|
|
616
|
-
/**
|
|
617
|
-
* ------------------------------------------------------------------------
|
|
618
28
|
* Constants
|
|
619
|
-
* ------------------------------------------------------------------------
|
|
620
29
|
*/
|
|
621
30
|
|
|
622
31
|
const NAME = 'modal';
|
|
@@ -624,26 +33,14 @@
|
|
|
624
33
|
const EVENT_KEY = `.${DATA_KEY}`;
|
|
625
34
|
const DATA_API_KEY = '.data-api';
|
|
626
35
|
const ESCAPE_KEY = 'Escape';
|
|
627
|
-
const Default = {
|
|
628
|
-
backdrop: true,
|
|
629
|
-
keyboard: true,
|
|
630
|
-
focus: true
|
|
631
|
-
};
|
|
632
|
-
const DefaultType = {
|
|
633
|
-
backdrop: '(boolean|string)',
|
|
634
|
-
keyboard: 'boolean',
|
|
635
|
-
focus: 'boolean'
|
|
636
|
-
};
|
|
637
36
|
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
|
638
37
|
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
|
|
639
38
|
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
|
640
39
|
const EVENT_SHOW = `show${EVENT_KEY}`;
|
|
641
40
|
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
|
642
41
|
const EVENT_RESIZE = `resize${EVENT_KEY}`;
|
|
643
|
-
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
|
|
644
|
-
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
|
|
645
|
-
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;
|
|
646
42
|
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;
|
|
43
|
+
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
|
|
647
44
|
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
|
648
45
|
const CLASS_NAME_OPEN = 'modal-open';
|
|
649
46
|
const CLASS_NAME_FADE = 'fade';
|
|
@@ -653,23 +50,31 @@
|
|
|
653
50
|
const SELECTOR_DIALOG = '.modal-dialog';
|
|
654
51
|
const SELECTOR_MODAL_BODY = '.modal-body';
|
|
655
52
|
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]';
|
|
53
|
+
const Default = {
|
|
54
|
+
backdrop: true,
|
|
55
|
+
focus: true,
|
|
56
|
+
keyboard: true
|
|
57
|
+
};
|
|
58
|
+
const DefaultType = {
|
|
59
|
+
backdrop: '(boolean|string)',
|
|
60
|
+
focus: 'boolean',
|
|
61
|
+
keyboard: 'boolean'
|
|
62
|
+
};
|
|
656
63
|
/**
|
|
657
|
-
*
|
|
658
|
-
* Class Definition
|
|
659
|
-
* ------------------------------------------------------------------------
|
|
64
|
+
* Class definition
|
|
660
65
|
*/
|
|
661
66
|
|
|
662
|
-
class Modal extends BaseComponent__default
|
|
67
|
+
class Modal extends BaseComponent__default.default {
|
|
663
68
|
constructor(element, config) {
|
|
664
|
-
super(element);
|
|
665
|
-
this.
|
|
666
|
-
this._dialog = SelectorEngine__default['default'].findOne(SELECTOR_DIALOG, this._element);
|
|
69
|
+
super(element, config);
|
|
70
|
+
this._dialog = SelectorEngine__default.default.findOne(SELECTOR_DIALOG, this._element);
|
|
667
71
|
this._backdrop = this._initializeBackDrop();
|
|
668
72
|
this._focustrap = this._initializeFocusTrap();
|
|
669
73
|
this._isShown = false;
|
|
670
|
-
this._ignoreBackdropClick = false;
|
|
671
74
|
this._isTransitioning = false;
|
|
672
|
-
this._scrollBar = new
|
|
75
|
+
this._scrollBar = new ScrollBarHelper__default.default();
|
|
76
|
+
|
|
77
|
+
this._addEventListeners();
|
|
673
78
|
} // Getters
|
|
674
79
|
|
|
675
80
|
|
|
@@ -677,6 +82,10 @@
|
|
|
677
82
|
return Default;
|
|
678
83
|
}
|
|
679
84
|
|
|
85
|
+
static get DefaultType() {
|
|
86
|
+
return DefaultType;
|
|
87
|
+
}
|
|
88
|
+
|
|
680
89
|
static get NAME() {
|
|
681
90
|
return NAME;
|
|
682
91
|
} // Public
|
|
@@ -691,7 +100,7 @@
|
|
|
691
100
|
return;
|
|
692
101
|
}
|
|
693
102
|
|
|
694
|
-
const showEvent = EventHandler__default
|
|
103
|
+
const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, {
|
|
695
104
|
relatedTarget
|
|
696
105
|
});
|
|
697
106
|
|
|
@@ -700,10 +109,7 @@
|
|
|
700
109
|
}
|
|
701
110
|
|
|
702
111
|
this._isShown = true;
|
|
703
|
-
|
|
704
|
-
if (this._isAnimated()) {
|
|
705
|
-
this._isTransitioning = true;
|
|
706
|
-
}
|
|
112
|
+
this._isTransitioning = true;
|
|
707
113
|
|
|
708
114
|
this._scrollBar.hide();
|
|
709
115
|
|
|
@@ -711,19 +117,7 @@
|
|
|
711
117
|
|
|
712
118
|
this._adjustDialog();
|
|
713
119
|
|
|
714
|
-
this.
|
|
715
|
-
|
|
716
|
-
this._setResizeEvent();
|
|
717
|
-
|
|
718
|
-
EventHandler__default['default'].on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
|
|
719
|
-
EventHandler__default['default'].one(this._element, EVENT_MOUSEUP_DISMISS, event => {
|
|
720
|
-
if (event.target === this._element) {
|
|
721
|
-
this._ignoreBackdropClick = true;
|
|
722
|
-
}
|
|
723
|
-
});
|
|
724
|
-
});
|
|
725
|
-
|
|
726
|
-
this._showBackdrop(() => this._showElement(relatedTarget));
|
|
120
|
+
this._backdrop.show(() => this._showElement(relatedTarget));
|
|
727
121
|
}
|
|
728
122
|
|
|
729
123
|
hide() {
|
|
@@ -731,36 +125,26 @@
|
|
|
731
125
|
return;
|
|
732
126
|
}
|
|
733
127
|
|
|
734
|
-
const hideEvent = EventHandler__default
|
|
128
|
+
const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
|
|
735
129
|
|
|
736
130
|
if (hideEvent.defaultPrevented) {
|
|
737
131
|
return;
|
|
738
132
|
}
|
|
739
133
|
|
|
740
134
|
this._isShown = false;
|
|
741
|
-
|
|
742
|
-
const isAnimated = this._isAnimated();
|
|
743
|
-
|
|
744
|
-
if (isAnimated) {
|
|
745
|
-
this._isTransitioning = true;
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
this._setEscapeEvent();
|
|
749
|
-
|
|
750
|
-
this._setResizeEvent();
|
|
135
|
+
this._isTransitioning = true;
|
|
751
136
|
|
|
752
137
|
this._focustrap.deactivate();
|
|
753
138
|
|
|
754
139
|
this._element.classList.remove(CLASS_NAME_SHOW);
|
|
755
140
|
|
|
756
|
-
|
|
757
|
-
EventHandler__default['default'].off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
|
|
758
|
-
|
|
759
|
-
this._queueCallback(() => this._hideModal(), this._element, isAnimated);
|
|
141
|
+
this._queueCallback(() => this._hideModal(), this._element, this._isAnimated());
|
|
760
142
|
}
|
|
761
143
|
|
|
762
144
|
dispose() {
|
|
763
|
-
[window, this._dialog]
|
|
145
|
+
for (const htmlElement of [window, this._dialog]) {
|
|
146
|
+
EventHandler__default.default.off(htmlElement, EVENT_KEY);
|
|
147
|
+
}
|
|
764
148
|
|
|
765
149
|
this._backdrop.dispose();
|
|
766
150
|
|
|
@@ -775,35 +159,22 @@
|
|
|
775
159
|
|
|
776
160
|
|
|
777
161
|
_initializeBackDrop() {
|
|
778
|
-
return new
|
|
162
|
+
return new Backdrop__default.default({
|
|
779
163
|
isVisible: Boolean(this._config.backdrop),
|
|
780
|
-
// 'static' option will be translated to true, and booleans will keep their value
|
|
164
|
+
// 'static' option will be translated to true, and booleans will keep their value,
|
|
781
165
|
isAnimated: this._isAnimated()
|
|
782
166
|
});
|
|
783
167
|
}
|
|
784
168
|
|
|
785
169
|
_initializeFocusTrap() {
|
|
786
|
-
return new
|
|
170
|
+
return new FocusTrap__default.default({
|
|
787
171
|
trapElement: this._element
|
|
788
172
|
});
|
|
789
173
|
}
|
|
790
174
|
|
|
791
|
-
_getConfig(config) {
|
|
792
|
-
config = { ...Default,
|
|
793
|
-
...Manipulator__default['default'].getDataAttributes(this._element),
|
|
794
|
-
...(typeof config === 'object' ? config : {})
|
|
795
|
-
};
|
|
796
|
-
typeCheckConfig(NAME, config, DefaultType);
|
|
797
|
-
return config;
|
|
798
|
-
}
|
|
799
|
-
|
|
800
175
|
_showElement(relatedTarget) {
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
const modalBody = SelectorEngine__default['default'].findOne(SELECTOR_MODAL_BODY, this._dialog);
|
|
804
|
-
|
|
805
|
-
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
|
806
|
-
// Don't move modal's DOM position
|
|
176
|
+
// try to append dynamic modal
|
|
177
|
+
if (!document.body.contains(this._element)) {
|
|
807
178
|
document.body.append(this._element);
|
|
808
179
|
}
|
|
809
180
|
|
|
@@ -816,14 +187,13 @@
|
|
|
816
187
|
this._element.setAttribute('role', 'dialog');
|
|
817
188
|
|
|
818
189
|
this._element.scrollTop = 0;
|
|
190
|
+
const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog);
|
|
819
191
|
|
|
820
192
|
if (modalBody) {
|
|
821
193
|
modalBody.scrollTop = 0;
|
|
822
194
|
}
|
|
823
195
|
|
|
824
|
-
|
|
825
|
-
reflow(this._element);
|
|
826
|
-
}
|
|
196
|
+
index.reflow(this._element);
|
|
827
197
|
|
|
828
198
|
this._element.classList.add(CLASS_NAME_SHOW);
|
|
829
199
|
|
|
@@ -833,35 +203,49 @@
|
|
|
833
203
|
}
|
|
834
204
|
|
|
835
205
|
this._isTransitioning = false;
|
|
836
|
-
EventHandler__default
|
|
206
|
+
EventHandler__default.default.trigger(this._element, EVENT_SHOWN, {
|
|
837
207
|
relatedTarget
|
|
838
208
|
});
|
|
839
209
|
};
|
|
840
210
|
|
|
841
|
-
this._queueCallback(transitionComplete, this._dialog,
|
|
211
|
+
this._queueCallback(transitionComplete, this._dialog, this._isAnimated());
|
|
842
212
|
}
|
|
843
213
|
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
this.hide();
|
|
850
|
-
} else if (!this._config.keyboard && event.key === ESCAPE_KEY) {
|
|
851
|
-
this._triggerBackdropTransition();
|
|
852
|
-
}
|
|
853
|
-
});
|
|
854
|
-
} else {
|
|
855
|
-
EventHandler__default['default'].off(this._element, EVENT_KEYDOWN_DISMISS);
|
|
856
|
-
}
|
|
857
|
-
}
|
|
214
|
+
_addEventListeners() {
|
|
215
|
+
EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
|
216
|
+
if (event.key !== ESCAPE_KEY) {
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
858
219
|
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
220
|
+
if (this._config.keyboard) {
|
|
221
|
+
event.preventDefault();
|
|
222
|
+
this.hide();
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
this._triggerBackdropTransition();
|
|
227
|
+
});
|
|
228
|
+
EventHandler__default.default.on(window, EVENT_RESIZE, () => {
|
|
229
|
+
if (this._isShown && !this._isTransitioning) {
|
|
230
|
+
this._adjustDialog();
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
EventHandler__default.default.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
|
|
234
|
+
if (event.target !== event.currentTarget) {
|
|
235
|
+
// click is inside modal-dialog
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (this._config.backdrop === 'static') {
|
|
240
|
+
this._triggerBackdropTransition();
|
|
241
|
+
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
if (this._config.backdrop) {
|
|
246
|
+
this.hide();
|
|
247
|
+
}
|
|
248
|
+
});
|
|
865
249
|
}
|
|
866
250
|
|
|
867
251
|
_hideModal() {
|
|
@@ -882,73 +266,47 @@
|
|
|
882
266
|
|
|
883
267
|
this._scrollBar.reset();
|
|
884
268
|
|
|
885
|
-
EventHandler__default
|
|
269
|
+
EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
|
|
886
270
|
});
|
|
887
271
|
}
|
|
888
272
|
|
|
889
|
-
_showBackdrop(callback) {
|
|
890
|
-
EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, event => {
|
|
891
|
-
if (this._ignoreBackdropClick) {
|
|
892
|
-
this._ignoreBackdropClick = false;
|
|
893
|
-
return;
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
if (event.target !== event.currentTarget) {
|
|
897
|
-
return;
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
if (this._config.backdrop === true) {
|
|
901
|
-
this.hide();
|
|
902
|
-
} else if (this._config.backdrop === 'static') {
|
|
903
|
-
this._triggerBackdropTransition();
|
|
904
|
-
}
|
|
905
|
-
});
|
|
906
|
-
|
|
907
|
-
this._backdrop.show(callback);
|
|
908
|
-
}
|
|
909
|
-
|
|
910
273
|
_isAnimated() {
|
|
911
274
|
return this._element.classList.contains(CLASS_NAME_FADE);
|
|
912
275
|
}
|
|
913
276
|
|
|
914
277
|
_triggerBackdropTransition() {
|
|
915
|
-
const hideEvent = EventHandler__default
|
|
278
|
+
const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE_PREVENTED);
|
|
916
279
|
|
|
917
280
|
if (hideEvent.defaultPrevented) {
|
|
918
281
|
return;
|
|
919
282
|
}
|
|
920
283
|
|
|
921
|
-
const
|
|
922
|
-
|
|
923
|
-
scrollHeight,
|
|
924
|
-
style
|
|
925
|
-
} = this._element;
|
|
926
|
-
const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed
|
|
284
|
+
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
|
285
|
+
const initialOverflowY = this._element.style.overflowY; // return if the following background transition hasn't yet completed
|
|
927
286
|
|
|
928
|
-
if (
|
|
287
|
+
if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) {
|
|
929
288
|
return;
|
|
930
289
|
}
|
|
931
290
|
|
|
932
291
|
if (!isModalOverflowing) {
|
|
933
|
-
style.overflowY = 'hidden';
|
|
292
|
+
this._element.style.overflowY = 'hidden';
|
|
934
293
|
}
|
|
935
294
|
|
|
936
|
-
classList.add(CLASS_NAME_STATIC);
|
|
295
|
+
this._element.classList.add(CLASS_NAME_STATIC);
|
|
937
296
|
|
|
938
297
|
this._queueCallback(() => {
|
|
939
|
-
classList.remove(CLASS_NAME_STATIC);
|
|
298
|
+
this._element.classList.remove(CLASS_NAME_STATIC);
|
|
940
299
|
|
|
941
|
-
|
|
942
|
-
this.
|
|
943
|
-
|
|
944
|
-
}, this._dialog);
|
|
945
|
-
}
|
|
300
|
+
this._queueCallback(() => {
|
|
301
|
+
this._element.style.overflowY = initialOverflowY;
|
|
302
|
+
}, this._dialog);
|
|
946
303
|
}, this._dialog);
|
|
947
304
|
|
|
948
305
|
this._element.focus();
|
|
949
|
-
}
|
|
950
|
-
|
|
951
|
-
|
|
306
|
+
}
|
|
307
|
+
/**
|
|
308
|
+
* The following methods are used to handle overflowing modals
|
|
309
|
+
*/
|
|
952
310
|
|
|
953
311
|
|
|
954
312
|
_adjustDialog() {
|
|
@@ -958,12 +316,14 @@
|
|
|
958
316
|
|
|
959
317
|
const isBodyOverflowing = scrollbarWidth > 0;
|
|
960
318
|
|
|
961
|
-
if (
|
|
962
|
-
|
|
319
|
+
if (isBodyOverflowing && !isModalOverflowing) {
|
|
320
|
+
const property = index.isRTL() ? 'paddingLeft' : 'paddingRight';
|
|
321
|
+
this._element.style[property] = `${scrollbarWidth}px`;
|
|
963
322
|
}
|
|
964
323
|
|
|
965
|
-
if (
|
|
966
|
-
|
|
324
|
+
if (!isBodyOverflowing && isModalOverflowing) {
|
|
325
|
+
const property = index.isRTL() ? 'paddingRight' : 'paddingLeft';
|
|
326
|
+
this._element.style[property] = `${scrollbarWidth}px`;
|
|
967
327
|
}
|
|
968
328
|
}
|
|
969
329
|
|
|
@@ -991,51 +351,46 @@
|
|
|
991
351
|
|
|
992
352
|
}
|
|
993
353
|
/**
|
|
994
|
-
*
|
|
995
|
-
* Data Api implementation
|
|
996
|
-
* ------------------------------------------------------------------------
|
|
354
|
+
* Data API implementation
|
|
997
355
|
*/
|
|
998
356
|
|
|
999
357
|
|
|
1000
|
-
EventHandler__default
|
|
1001
|
-
const target = getElementFromSelector(this);
|
|
358
|
+
EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|
359
|
+
const target = index.getElementFromSelector(this);
|
|
1002
360
|
|
|
1003
361
|
if (['A', 'AREA'].includes(this.tagName)) {
|
|
1004
362
|
event.preventDefault();
|
|
1005
363
|
}
|
|
1006
364
|
|
|
1007
|
-
EventHandler__default
|
|
365
|
+
EventHandler__default.default.one(target, EVENT_SHOW, showEvent => {
|
|
1008
366
|
if (showEvent.defaultPrevented) {
|
|
1009
367
|
// only register focus restorer if modal will actually get shown
|
|
1010
368
|
return;
|
|
1011
369
|
}
|
|
1012
370
|
|
|
1013
|
-
EventHandler__default
|
|
1014
|
-
if (isVisible(this)) {
|
|
371
|
+
EventHandler__default.default.one(target, EVENT_HIDDEN, () => {
|
|
372
|
+
if (index.isVisible(this)) {
|
|
1015
373
|
this.focus();
|
|
1016
374
|
}
|
|
1017
375
|
});
|
|
1018
|
-
}); // avoid conflict when clicking
|
|
376
|
+
}); // avoid conflict when clicking modal toggler while another one is open
|
|
1019
377
|
|
|
1020
|
-
const
|
|
378
|
+
const alreadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR);
|
|
1021
379
|
|
|
1022
|
-
if (
|
|
1023
|
-
Modal.getInstance(
|
|
380
|
+
if (alreadyOpen) {
|
|
381
|
+
Modal.getInstance(alreadyOpen).hide();
|
|
1024
382
|
}
|
|
1025
383
|
|
|
1026
384
|
const data = Modal.getOrCreateInstance(target);
|
|
1027
385
|
data.toggle(this);
|
|
1028
386
|
});
|
|
1029
|
-
enableDismissTrigger(Modal);
|
|
387
|
+
componentFunctions.enableDismissTrigger(Modal);
|
|
1030
388
|
/**
|
|
1031
|
-
* ------------------------------------------------------------------------
|
|
1032
389
|
* jQuery
|
|
1033
|
-
* ------------------------------------------------------------------------
|
|
1034
|
-
* add .Modal to jQuery only if jQuery is present
|
|
1035
390
|
*/
|
|
1036
391
|
|
|
1037
|
-
defineJQueryPlugin(Modal);
|
|
392
|
+
index.defineJQueryPlugin(Modal);
|
|
1038
393
|
|
|
1039
394
|
return Modal;
|
|
1040
395
|
|
|
1041
|
-
}))
|
|
396
|
+
}));
|