bootstrap 5.0.0.beta2 → 5.0.0.beta3
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-sprockets.js +1 -0
- data/assets/javascripts/bootstrap.js +2051 -2009
- data/assets/javascripts/bootstrap.min.js +2 -2
- data/assets/javascripts/bootstrap/alert.js +75 -118
- data/assets/javascripts/bootstrap/base-component.js +23 -37
- data/assets/javascripts/bootstrap/button.js +39 -78
- data/assets/javascripts/bootstrap/carousel.js +284 -364
- data/assets/javascripts/bootstrap/collapse.js +178 -247
- data/assets/javascripts/bootstrap/dom/data.js +34 -47
- data/assets/javascripts/bootstrap/dom/event-handler.js +71 -77
- data/assets/javascripts/bootstrap/dom/manipulator.js +23 -21
- data/assets/javascripts/bootstrap/dom/selector-engine.js +20 -28
- data/assets/javascripts/bootstrap/dropdown.js +195 -265
- data/assets/javascripts/bootstrap/modal.js +256 -344
- data/assets/javascripts/bootstrap/offcanvas.js +508 -0
- data/assets/javascripts/bootstrap/popover.js +88 -157
- data/assets/javascripts/bootstrap/scrollspy.js +134 -212
- data/assets/javascripts/bootstrap/tab.js +108 -142
- data/assets/javascripts/bootstrap/toast.js +113 -183
- data/assets/javascripts/bootstrap/tooltip.js +297 -392
- data/assets/stylesheets/_bootstrap-grid.scss +1 -1
- data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
- data/assets/stylesheets/_bootstrap.scss +2 -1
- data/assets/stylesheets/bootstrap/_accordion.scss +22 -32
- data/assets/stylesheets/bootstrap/_buttons.scss +2 -0
- data/assets/stylesheets/bootstrap/_card.scss +1 -1
- data/assets/stylesheets/bootstrap/_dropdown.scss +3 -6
- data/assets/stylesheets/bootstrap/_list-group.scss +11 -0
- data/assets/stylesheets/bootstrap/_modal.scss +2 -0
- data/assets/stylesheets/bootstrap/_nav.scss +7 -0
- data/assets/stylesheets/bootstrap/_navbar.scss +2 -0
- data/assets/stylesheets/bootstrap/_offcanvas.scss +77 -0
- data/assets/stylesheets/bootstrap/_progress.scss +3 -0
- data/assets/stylesheets/bootstrap/_reboot.scss +7 -21
- data/assets/stylesheets/bootstrap/_spinners.scss +4 -0
- data/assets/stylesheets/bootstrap/_transitions.scss +2 -0
- data/assets/stylesheets/bootstrap/_utilities.scss +65 -37
- data/assets/stylesheets/bootstrap/_variables.scss +138 -30
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +0 -4
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +6 -1
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +11 -1
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +2 -0
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +1 -1
- data/tasks/updater/network.rb +7 -1
- metadata +6 -4
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap modal.js v5.0.0-
|
2
|
+
* Bootstrap modal.js v5.0.0-beta3 (https://getbootstrap.com/)
|
3
3
|
* Copyright 2011-2021 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
|
*/
|
@@ -17,78 +17,28 @@
|
|
17
17
|
var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
18
18
|
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
19
19
|
|
20
|
-
function _defineProperties(target, props) {
|
21
|
-
for (var i = 0; i < props.length; i++) {
|
22
|
-
var descriptor = props[i];
|
23
|
-
descriptor.enumerable = descriptor.enumerable || false;
|
24
|
-
descriptor.configurable = true;
|
25
|
-
if ("value" in descriptor) descriptor.writable = true;
|
26
|
-
Object.defineProperty(target, descriptor.key, descriptor);
|
27
|
-
}
|
28
|
-
}
|
29
|
-
|
30
|
-
function _createClass(Constructor, protoProps, staticProps) {
|
31
|
-
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
32
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
33
|
-
return Constructor;
|
34
|
-
}
|
35
|
-
|
36
|
-
function _extends() {
|
37
|
-
_extends = Object.assign || function (target) {
|
38
|
-
for (var i = 1; i < arguments.length; i++) {
|
39
|
-
var source = arguments[i];
|
40
|
-
|
41
|
-
for (var key in source) {
|
42
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
43
|
-
target[key] = source[key];
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
47
|
-
|
48
|
-
return target;
|
49
|
-
};
|
50
|
-
|
51
|
-
return _extends.apply(this, arguments);
|
52
|
-
}
|
53
|
-
|
54
|
-
function _inheritsLoose(subClass, superClass) {
|
55
|
-
subClass.prototype = Object.create(superClass.prototype);
|
56
|
-
subClass.prototype.constructor = subClass;
|
57
|
-
|
58
|
-
_setPrototypeOf(subClass, superClass);
|
59
|
-
}
|
60
|
-
|
61
|
-
function _setPrototypeOf(o, p) {
|
62
|
-
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
63
|
-
o.__proto__ = p;
|
64
|
-
return o;
|
65
|
-
};
|
66
|
-
|
67
|
-
return _setPrototypeOf(o, p);
|
68
|
-
}
|
69
|
-
|
70
20
|
/**
|
71
21
|
* --------------------------------------------------------------------------
|
72
|
-
* Bootstrap (v5.0.0-
|
22
|
+
* Bootstrap (v5.0.0-beta3): util/index.js
|
73
23
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
74
24
|
* --------------------------------------------------------------------------
|
75
25
|
*/
|
76
|
-
|
77
|
-
|
26
|
+
const MILLISECONDS_MULTIPLIER = 1000;
|
27
|
+
const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
78
28
|
|
79
|
-
|
29
|
+
const toType = obj => {
|
80
30
|
if (obj === null || obj === undefined) {
|
81
|
-
return
|
31
|
+
return `${obj}`;
|
82
32
|
}
|
83
33
|
|
84
34
|
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
|
85
35
|
};
|
86
36
|
|
87
|
-
|
88
|
-
|
37
|
+
const getSelector = element => {
|
38
|
+
let selector = element.getAttribute('data-bs-target');
|
89
39
|
|
90
40
|
if (!selector || selector === '#') {
|
91
|
-
|
41
|
+
let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes,
|
92
42
|
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
93
43
|
// `document.querySelector` will rightfully complain it is invalid.
|
94
44
|
// See https://github.com/twbs/bootstrap/issues/32273
|
@@ -108,23 +58,23 @@
|
|
108
58
|
return selector;
|
109
59
|
};
|
110
60
|
|
111
|
-
|
112
|
-
|
61
|
+
const getElementFromSelector = element => {
|
62
|
+
const selector = getSelector(element);
|
113
63
|
return selector ? document.querySelector(selector) : null;
|
114
64
|
};
|
115
65
|
|
116
|
-
|
66
|
+
const getTransitionDurationFromElement = element => {
|
117
67
|
if (!element) {
|
118
68
|
return 0;
|
119
69
|
} // Get transition-duration of the element
|
120
70
|
|
121
71
|
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
72
|
+
let {
|
73
|
+
transitionDuration,
|
74
|
+
transitionDelay
|
75
|
+
} = window.getComputedStyle(element);
|
76
|
+
const floatTransitionDuration = Number.parseFloat(transitionDuration);
|
77
|
+
const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
|
128
78
|
|
129
79
|
if (!floatTransitionDuration && !floatTransitionDelay) {
|
130
80
|
return 0;
|
@@ -136,18 +86,16 @@
|
|
136
86
|
return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
|
137
87
|
};
|
138
88
|
|
139
|
-
|
89
|
+
const triggerTransitionEnd = element => {
|
140
90
|
element.dispatchEvent(new Event(TRANSITION_END));
|
141
91
|
};
|
142
92
|
|
143
|
-
|
144
|
-
return (obj[0] || obj).nodeType;
|
145
|
-
};
|
93
|
+
const isElement = obj => (obj[0] || obj).nodeType;
|
146
94
|
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
95
|
+
const emulateTransitionEnd = (element, duration) => {
|
96
|
+
let called = false;
|
97
|
+
const durationPadding = 5;
|
98
|
+
const emulatedDuration = duration + durationPadding;
|
151
99
|
|
152
100
|
function listener() {
|
153
101
|
called = true;
|
@@ -155,46 +103,45 @@
|
|
155
103
|
}
|
156
104
|
|
157
105
|
element.addEventListener(TRANSITION_END, listener);
|
158
|
-
setTimeout(
|
106
|
+
setTimeout(() => {
|
159
107
|
if (!called) {
|
160
108
|
triggerTransitionEnd(element);
|
161
109
|
}
|
162
110
|
}, emulatedDuration);
|
163
111
|
};
|
164
112
|
|
165
|
-
|
166
|
-
Object.keys(configTypes).forEach(
|
167
|
-
|
168
|
-
|
169
|
-
|
113
|
+
const typeCheckConfig = (componentName, config, configTypes) => {
|
114
|
+
Object.keys(configTypes).forEach(property => {
|
115
|
+
const expectedTypes = configTypes[property];
|
116
|
+
const value = config[property];
|
117
|
+
const valueType = value && isElement(value) ? 'element' : toType(value);
|
170
118
|
|
171
119
|
if (!new RegExp(expectedTypes).test(valueType)) {
|
172
|
-
throw new TypeError(componentName.toUpperCase()
|
120
|
+
throw new TypeError(`${componentName.toUpperCase()}: ` + `Option "${property}" provided type "${valueType}" ` + `but expected type "${expectedTypes}".`);
|
173
121
|
}
|
174
122
|
});
|
175
123
|
};
|
176
124
|
|
177
|
-
|
125
|
+
const isVisible = element => {
|
178
126
|
if (!element) {
|
179
127
|
return false;
|
180
128
|
}
|
181
129
|
|
182
130
|
if (element.style && element.parentNode && element.parentNode.style) {
|
183
|
-
|
184
|
-
|
131
|
+
const elementStyle = getComputedStyle(element);
|
132
|
+
const parentNodeStyle = getComputedStyle(element.parentNode);
|
185
133
|
return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
|
186
134
|
}
|
187
135
|
|
188
136
|
return false;
|
189
137
|
};
|
190
138
|
|
191
|
-
|
192
|
-
return element.offsetHeight;
|
193
|
-
};
|
139
|
+
const reflow = element => element.offsetHeight;
|
194
140
|
|
195
|
-
|
196
|
-
|
197
|
-
|
141
|
+
const getjQuery = () => {
|
142
|
+
const {
|
143
|
+
jQuery
|
144
|
+
} = window;
|
198
145
|
|
199
146
|
if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
|
200
147
|
return jQuery;
|
@@ -203,7 +150,7 @@
|
|
203
150
|
return null;
|
204
151
|
};
|
205
152
|
|
206
|
-
|
153
|
+
const onDOMContentLoaded = callback => {
|
207
154
|
if (document.readyState === 'loading') {
|
208
155
|
document.addEventListener('DOMContentLoaded', callback);
|
209
156
|
} else {
|
@@ -211,19 +158,19 @@
|
|
211
158
|
}
|
212
159
|
};
|
213
160
|
|
214
|
-
|
161
|
+
const isRTL = () => document.documentElement.dir === 'rtl';
|
215
162
|
|
216
|
-
|
217
|
-
onDOMContentLoaded(
|
218
|
-
|
163
|
+
const defineJQueryPlugin = (name, plugin) => {
|
164
|
+
onDOMContentLoaded(() => {
|
165
|
+
const $ = getjQuery();
|
219
166
|
/* istanbul ignore if */
|
220
167
|
|
221
168
|
if ($) {
|
222
|
-
|
169
|
+
const JQUERY_NO_CONFLICT = $.fn[name];
|
223
170
|
$.fn[name] = plugin.jQueryInterface;
|
224
171
|
$.fn[name].Constructor = plugin;
|
225
172
|
|
226
|
-
$.fn[name].noConflict =
|
173
|
+
$.fn[name].noConflict = () => {
|
227
174
|
$.fn[name] = JQUERY_NO_CONFLICT;
|
228
175
|
return plugin.jQueryInterface;
|
229
176
|
};
|
@@ -231,96 +178,101 @@
|
|
231
178
|
});
|
232
179
|
};
|
233
180
|
|
181
|
+
/**
|
182
|
+
* --------------------------------------------------------------------------
|
183
|
+
* Bootstrap (v5.0.0-beta3): modal.js
|
184
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
185
|
+
* --------------------------------------------------------------------------
|
186
|
+
*/
|
234
187
|
/**
|
235
188
|
* ------------------------------------------------------------------------
|
236
189
|
* Constants
|
237
190
|
* ------------------------------------------------------------------------
|
238
191
|
*/
|
239
192
|
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
193
|
+
const NAME = 'modal';
|
194
|
+
const DATA_KEY = 'bs.modal';
|
195
|
+
const EVENT_KEY = `.${DATA_KEY}`;
|
196
|
+
const DATA_API_KEY = '.data-api';
|
197
|
+
const ESCAPE_KEY = 'Escape';
|
198
|
+
const Default = {
|
246
199
|
backdrop: true,
|
247
200
|
keyboard: true,
|
248
201
|
focus: true
|
249
202
|
};
|
250
|
-
|
203
|
+
const DefaultType = {
|
251
204
|
backdrop: '(boolean|string)',
|
252
205
|
keyboard: 'boolean',
|
253
206
|
focus: 'boolean'
|
254
207
|
};
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
208
|
+
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
209
|
+
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
|
210
|
+
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
211
|
+
const EVENT_SHOW = `show${EVENT_KEY}`;
|
212
|
+
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
213
|
+
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
|
214
|
+
const EVENT_RESIZE = `resize${EVENT_KEY}`;
|
215
|
+
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
|
216
|
+
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
|
217
|
+
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;
|
218
|
+
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;
|
219
|
+
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
220
|
+
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure';
|
221
|
+
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
222
|
+
const CLASS_NAME_OPEN = 'modal-open';
|
223
|
+
const CLASS_NAME_FADE = 'fade';
|
224
|
+
const CLASS_NAME_SHOW = 'show';
|
225
|
+
const CLASS_NAME_STATIC = 'modal-static';
|
226
|
+
const SELECTOR_DIALOG = '.modal-dialog';
|
227
|
+
const SELECTOR_MODAL_BODY = '.modal-body';
|
228
|
+
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]';
|
229
|
+
const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]';
|
230
|
+
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
231
|
+
const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
279
232
|
/**
|
280
233
|
* ------------------------------------------------------------------------
|
281
234
|
* Class Definition
|
282
235
|
* ------------------------------------------------------------------------
|
283
236
|
*/
|
284
237
|
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
_this._isBodyOverflowing = false;
|
297
|
-
_this._ignoreBackdropClick = false;
|
298
|
-
_this._isTransitioning = false;
|
299
|
-
_this._scrollbarWidth = 0;
|
300
|
-
return _this;
|
238
|
+
class Modal extends BaseComponent__default['default'] {
|
239
|
+
constructor(element, config) {
|
240
|
+
super(element);
|
241
|
+
this._config = this._getConfig(config);
|
242
|
+
this._dialog = SelectorEngine__default['default'].findOne(SELECTOR_DIALOG, this._element);
|
243
|
+
this._backdrop = null;
|
244
|
+
this._isShown = false;
|
245
|
+
this._isBodyOverflowing = false;
|
246
|
+
this._ignoreBackdropClick = false;
|
247
|
+
this._isTransitioning = false;
|
248
|
+
this._scrollbarWidth = 0;
|
301
249
|
} // Getters
|
302
250
|
|
303
251
|
|
304
|
-
|
252
|
+
static get Default() {
|
253
|
+
return Default;
|
254
|
+
}
|
305
255
|
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
};
|
256
|
+
static get DATA_KEY() {
|
257
|
+
return DATA_KEY;
|
258
|
+
} // Public
|
310
259
|
|
311
|
-
_proto.show = function show(relatedTarget) {
|
312
|
-
var _this2 = this;
|
313
260
|
|
261
|
+
toggle(relatedTarget) {
|
262
|
+
return this._isShown ? this.hide() : this.show(relatedTarget);
|
263
|
+
}
|
264
|
+
|
265
|
+
show(relatedTarget) {
|
314
266
|
if (this._isShown || this._isTransitioning) {
|
315
267
|
return;
|
316
268
|
}
|
317
269
|
|
318
|
-
if (this.
|
270
|
+
if (this._isAnimated()) {
|
319
271
|
this._isTransitioning = true;
|
320
272
|
}
|
321
273
|
|
322
|
-
|
323
|
-
relatedTarget
|
274
|
+
const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, {
|
275
|
+
relatedTarget
|
324
276
|
});
|
325
277
|
|
326
278
|
if (this._isShown || showEvent.defaultPrevented) {
|
@@ -339,25 +291,19 @@
|
|
339
291
|
|
340
292
|
this._setResizeEvent();
|
341
293
|
|
342
|
-
EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS,
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
if (event.target === _this2._element) {
|
348
|
-
_this2._ignoreBackdropClick = true;
|
294
|
+
EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event));
|
295
|
+
EventHandler__default['default'].on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
|
296
|
+
EventHandler__default['default'].one(this._element, EVENT_MOUSEUP_DISMISS, event => {
|
297
|
+
if (event.target === this._element) {
|
298
|
+
this._ignoreBackdropClick = true;
|
349
299
|
}
|
350
300
|
});
|
351
301
|
});
|
352
302
|
|
353
|
-
this._showBackdrop(
|
354
|
-
|
355
|
-
});
|
356
|
-
};
|
357
|
-
|
358
|
-
_proto.hide = function hide(event) {
|
359
|
-
var _this3 = this;
|
303
|
+
this._showBackdrop(() => this._showElement(relatedTarget));
|
304
|
+
}
|
360
305
|
|
306
|
+
hide(event) {
|
361
307
|
if (event) {
|
362
308
|
event.preventDefault();
|
363
309
|
}
|
@@ -366,7 +312,7 @@
|
|
366
312
|
return;
|
367
313
|
}
|
368
314
|
|
369
|
-
|
315
|
+
const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE);
|
370
316
|
|
371
317
|
if (hideEvent.defaultPrevented) {
|
372
318
|
return;
|
@@ -374,9 +320,9 @@
|
|
374
320
|
|
375
321
|
this._isShown = false;
|
376
322
|
|
377
|
-
|
323
|
+
const isAnimated = this._isAnimated();
|
378
324
|
|
379
|
-
if (
|
325
|
+
if (isAnimated) {
|
380
326
|
this._isTransitioning = true;
|
381
327
|
}
|
382
328
|
|
@@ -391,30 +337,24 @@
|
|
391
337
|
EventHandler__default['default'].off(this._element, EVENT_CLICK_DISMISS);
|
392
338
|
EventHandler__default['default'].off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
|
393
339
|
|
394
|
-
if (
|
395
|
-
|
396
|
-
EventHandler__default['default'].one(this._element, 'transitionend',
|
397
|
-
return _this3._hideModal(event);
|
398
|
-
});
|
340
|
+
if (isAnimated) {
|
341
|
+
const transitionDuration = getTransitionDurationFromElement(this._element);
|
342
|
+
EventHandler__default['default'].one(this._element, 'transitionend', event => this._hideModal(event));
|
399
343
|
emulateTransitionEnd(this._element, transitionDuration);
|
400
344
|
} else {
|
401
345
|
this._hideModal();
|
402
346
|
}
|
403
|
-
}
|
404
|
-
|
405
|
-
_proto.dispose = function dispose() {
|
406
|
-
[window, this._element, this._dialog].forEach(function (htmlElement) {
|
407
|
-
return EventHandler__default['default'].off(htmlElement, EVENT_KEY);
|
408
|
-
});
|
347
|
+
}
|
409
348
|
|
410
|
-
|
349
|
+
dispose() {
|
350
|
+
[window, this._element, this._dialog].forEach(htmlElement => EventHandler__default['default'].off(htmlElement, EVENT_KEY));
|
351
|
+
super.dispose();
|
411
352
|
/**
|
412
353
|
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
413
354
|
* Do not move `document` in `htmlElements` array
|
414
355
|
* It will remove `EVENT_CLICK_DATA_API` event that should remain
|
415
356
|
*/
|
416
357
|
|
417
|
-
|
418
358
|
EventHandler__default['default'].off(document, EVENT_FOCUSIN);
|
419
359
|
this._config = null;
|
420
360
|
this._dialog = null;
|
@@ -424,25 +364,25 @@
|
|
424
364
|
this._ignoreBackdropClick = null;
|
425
365
|
this._isTransitioning = null;
|
426
366
|
this._scrollbarWidth = null;
|
427
|
-
}
|
367
|
+
}
|
428
368
|
|
429
|
-
|
369
|
+
handleUpdate() {
|
430
370
|
this._adjustDialog();
|
431
371
|
} // Private
|
432
|
-
;
|
433
372
|
|
434
|
-
|
435
|
-
|
373
|
+
|
374
|
+
_getConfig(config) {
|
375
|
+
config = { ...Default,
|
376
|
+
...config
|
377
|
+
};
|
436
378
|
typeCheckConfig(NAME, config, DefaultType);
|
437
379
|
return config;
|
438
|
-
}
|
439
|
-
|
440
|
-
_proto._showElement = function _showElement(relatedTarget) {
|
441
|
-
var _this4 = this;
|
380
|
+
}
|
442
381
|
|
443
|
-
|
382
|
+
_showElement(relatedTarget) {
|
383
|
+
const isAnimated = this._isAnimated();
|
444
384
|
|
445
|
-
|
385
|
+
const modalBody = SelectorEngine__default['default'].findOne(SELECTOR_MODAL_BODY, this._dialog);
|
446
386
|
|
447
387
|
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
448
388
|
// Don't move modal's DOM position
|
@@ -463,7 +403,7 @@
|
|
463
403
|
modalBody.scrollTop = 0;
|
464
404
|
}
|
465
405
|
|
466
|
-
if (
|
406
|
+
if (isAnimated) {
|
467
407
|
reflow(this._element);
|
468
408
|
}
|
469
409
|
|
@@ -473,71 +413,60 @@
|
|
473
413
|
this._enforceFocus();
|
474
414
|
}
|
475
415
|
|
476
|
-
|
477
|
-
if (
|
478
|
-
|
416
|
+
const transitionComplete = () => {
|
417
|
+
if (this._config.focus) {
|
418
|
+
this._element.focus();
|
479
419
|
}
|
480
420
|
|
481
|
-
|
482
|
-
EventHandler__default['default'].trigger(
|
483
|
-
relatedTarget
|
421
|
+
this._isTransitioning = false;
|
422
|
+
EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, {
|
423
|
+
relatedTarget
|
484
424
|
});
|
485
425
|
};
|
486
426
|
|
487
|
-
if (
|
488
|
-
|
427
|
+
if (isAnimated) {
|
428
|
+
const transitionDuration = getTransitionDurationFromElement(this._dialog);
|
489
429
|
EventHandler__default['default'].one(this._dialog, 'transitionend', transitionComplete);
|
490
430
|
emulateTransitionEnd(this._dialog, transitionDuration);
|
491
431
|
} else {
|
492
432
|
transitionComplete();
|
493
433
|
}
|
494
|
-
}
|
495
|
-
|
496
|
-
_proto._enforceFocus = function _enforceFocus() {
|
497
|
-
var _this5 = this;
|
434
|
+
}
|
498
435
|
|
436
|
+
_enforceFocus() {
|
499
437
|
EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop
|
500
438
|
|
501
|
-
EventHandler__default['default'].on(document, EVENT_FOCUSIN,
|
502
|
-
if (document !== event.target &&
|
503
|
-
|
439
|
+
EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => {
|
440
|
+
if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) {
|
441
|
+
this._element.focus();
|
504
442
|
}
|
505
443
|
});
|
506
|
-
}
|
507
|
-
|
508
|
-
_proto._setEscapeEvent = function _setEscapeEvent() {
|
509
|
-
var _this6 = this;
|
444
|
+
}
|
510
445
|
|
446
|
+
_setEscapeEvent() {
|
511
447
|
if (this._isShown) {
|
512
|
-
EventHandler__default['default'].on(this._element, EVENT_KEYDOWN_DISMISS,
|
513
|
-
if (
|
448
|
+
EventHandler__default['default'].on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
449
|
+
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
514
450
|
event.preventDefault();
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
_this6._triggerBackdropTransition();
|
451
|
+
this.hide();
|
452
|
+
} else if (!this._config.keyboard && event.key === ESCAPE_KEY) {
|
453
|
+
this._triggerBackdropTransition();
|
519
454
|
}
|
520
455
|
});
|
521
456
|
} else {
|
522
457
|
EventHandler__default['default'].off(this._element, EVENT_KEYDOWN_DISMISS);
|
523
458
|
}
|
524
|
-
}
|
525
|
-
|
526
|
-
_proto._setResizeEvent = function _setResizeEvent() {
|
527
|
-
var _this7 = this;
|
459
|
+
}
|
528
460
|
|
461
|
+
_setResizeEvent() {
|
529
462
|
if (this._isShown) {
|
530
|
-
EventHandler__default['default'].on(window, EVENT_RESIZE,
|
531
|
-
return _this7._adjustDialog();
|
532
|
-
});
|
463
|
+
EventHandler__default['default'].on(window, EVENT_RESIZE, () => this._adjustDialog());
|
533
464
|
} else {
|
534
465
|
EventHandler__default['default'].off(window, EVENT_RESIZE);
|
535
466
|
}
|
536
|
-
}
|
537
|
-
|
538
|
-
_proto._hideModal = function _hideModal() {
|
539
|
-
var _this8 = this;
|
467
|
+
}
|
540
468
|
|
469
|
+
_hideModal() {
|
541
470
|
this._element.style.display = 'none';
|
542
471
|
|
543
472
|
this._element.setAttribute('aria-hidden', true);
|
@@ -548,40 +477,38 @@
|
|
548
477
|
|
549
478
|
this._isTransitioning = false;
|
550
479
|
|
551
|
-
this._showBackdrop(
|
480
|
+
this._showBackdrop(() => {
|
552
481
|
document.body.classList.remove(CLASS_NAME_OPEN);
|
553
482
|
|
554
|
-
|
483
|
+
this._resetAdjustments();
|
555
484
|
|
556
|
-
|
485
|
+
this._resetScrollbar();
|
557
486
|
|
558
|
-
EventHandler__default['default'].trigger(
|
487
|
+
EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN);
|
559
488
|
});
|
560
|
-
}
|
489
|
+
}
|
561
490
|
|
562
|
-
|
491
|
+
_removeBackdrop() {
|
563
492
|
this._backdrop.parentNode.removeChild(this._backdrop);
|
564
493
|
|
565
494
|
this._backdrop = null;
|
566
|
-
}
|
567
|
-
|
568
|
-
_proto._showBackdrop = function _showBackdrop(callback) {
|
569
|
-
var _this9 = this;
|
495
|
+
}
|
570
496
|
|
571
|
-
|
497
|
+
_showBackdrop(callback) {
|
498
|
+
const isAnimated = this._isAnimated();
|
572
499
|
|
573
500
|
if (this._isShown && this._config.backdrop) {
|
574
501
|
this._backdrop = document.createElement('div');
|
575
502
|
this._backdrop.className = CLASS_NAME_BACKDROP;
|
576
503
|
|
577
|
-
if (
|
578
|
-
this._backdrop.classList.add(
|
504
|
+
if (isAnimated) {
|
505
|
+
this._backdrop.classList.add(CLASS_NAME_FADE);
|
579
506
|
}
|
580
507
|
|
581
508
|
document.body.appendChild(this._backdrop);
|
582
|
-
EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS,
|
583
|
-
if (
|
584
|
-
|
509
|
+
EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, event => {
|
510
|
+
if (this._ignoreBackdropClick) {
|
511
|
+
this._ignoreBackdropClick = false;
|
585
512
|
return;
|
586
513
|
}
|
587
514
|
|
@@ -589,59 +516,60 @@
|
|
589
516
|
return;
|
590
517
|
}
|
591
518
|
|
592
|
-
if (
|
593
|
-
|
519
|
+
if (this._config.backdrop === 'static') {
|
520
|
+
this._triggerBackdropTransition();
|
594
521
|
} else {
|
595
|
-
|
522
|
+
this.hide();
|
596
523
|
}
|
597
524
|
});
|
598
525
|
|
599
|
-
if (
|
526
|
+
if (isAnimated) {
|
600
527
|
reflow(this._backdrop);
|
601
528
|
}
|
602
529
|
|
603
530
|
this._backdrop.classList.add(CLASS_NAME_SHOW);
|
604
531
|
|
605
|
-
if (!
|
532
|
+
if (!isAnimated) {
|
606
533
|
callback();
|
607
534
|
return;
|
608
535
|
}
|
609
536
|
|
610
|
-
|
537
|
+
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
611
538
|
EventHandler__default['default'].one(this._backdrop, 'transitionend', callback);
|
612
539
|
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
613
540
|
} else if (!this._isShown && this._backdrop) {
|
614
541
|
this._backdrop.classList.remove(CLASS_NAME_SHOW);
|
615
542
|
|
616
|
-
|
617
|
-
|
543
|
+
const callbackRemove = () => {
|
544
|
+
this._removeBackdrop();
|
618
545
|
|
619
546
|
callback();
|
620
547
|
};
|
621
548
|
|
622
|
-
if (
|
623
|
-
|
624
|
-
|
549
|
+
if (isAnimated) {
|
550
|
+
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
625
551
|
EventHandler__default['default'].one(this._backdrop, 'transitionend', callbackRemove);
|
626
|
-
emulateTransitionEnd(this._backdrop,
|
552
|
+
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
627
553
|
} else {
|
628
554
|
callbackRemove();
|
629
555
|
}
|
630
556
|
} else {
|
631
557
|
callback();
|
632
558
|
}
|
633
|
-
}
|
559
|
+
}
|
634
560
|
|
635
|
-
|
636
|
-
|
561
|
+
_isAnimated() {
|
562
|
+
return this._element.classList.contains(CLASS_NAME_FADE);
|
563
|
+
}
|
637
564
|
|
638
|
-
|
565
|
+
_triggerBackdropTransition() {
|
566
|
+
const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE_PREVENTED);
|
639
567
|
|
640
568
|
if (hideEvent.defaultPrevented) {
|
641
569
|
return;
|
642
570
|
}
|
643
571
|
|
644
|
-
|
572
|
+
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
645
573
|
|
646
574
|
if (!isModalOverflowing) {
|
647
575
|
this._element.style.overflowY = 'hidden';
|
@@ -649,16 +577,16 @@
|
|
649
577
|
|
650
578
|
this._element.classList.add(CLASS_NAME_STATIC);
|
651
579
|
|
652
|
-
|
580
|
+
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog);
|
653
581
|
EventHandler__default['default'].off(this._element, 'transitionend');
|
654
|
-
EventHandler__default['default'].one(this._element, 'transitionend',
|
655
|
-
|
582
|
+
EventHandler__default['default'].one(this._element, 'transitionend', () => {
|
583
|
+
this._element.classList.remove(CLASS_NAME_STATIC);
|
656
584
|
|
657
585
|
if (!isModalOverflowing) {
|
658
|
-
EventHandler__default['default'].one(
|
659
|
-
|
586
|
+
EventHandler__default['default'].one(this._element, 'transitionend', () => {
|
587
|
+
this._element.style.overflowY = '';
|
660
588
|
});
|
661
|
-
emulateTransitionEnd(
|
589
|
+
emulateTransitionEnd(this._element, modalTransitionDuration);
|
662
590
|
}
|
663
591
|
});
|
664
592
|
emulateTransitionEnd(this._element, modalTransitionDuration);
|
@@ -667,71 +595,67 @@
|
|
667
595
|
} // ----------------------------------------------------------------------
|
668
596
|
// the following methods are used to handle overflowing modals
|
669
597
|
// ----------------------------------------------------------------------
|
670
|
-
;
|
671
598
|
|
672
|
-
_proto._adjustDialog = function _adjustDialog() {
|
673
|
-
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
674
599
|
|
675
|
-
|
676
|
-
|
600
|
+
_adjustDialog() {
|
601
|
+
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
602
|
+
|
603
|
+
if (!this._isBodyOverflowing && isModalOverflowing && !isRTL() || this._isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
604
|
+
this._element.style.paddingLeft = `${this._scrollbarWidth}px`;
|
677
605
|
}
|
678
606
|
|
679
|
-
if (this._isBodyOverflowing && !isModalOverflowing && !isRTL || !this._isBodyOverflowing && isModalOverflowing && isRTL) {
|
680
|
-
this._element.style.paddingRight = this._scrollbarWidth
|
607
|
+
if (this._isBodyOverflowing && !isModalOverflowing && !isRTL() || !this._isBodyOverflowing && isModalOverflowing && isRTL()) {
|
608
|
+
this._element.style.paddingRight = `${this._scrollbarWidth}px`;
|
681
609
|
}
|
682
|
-
}
|
610
|
+
}
|
683
611
|
|
684
|
-
|
612
|
+
_resetAdjustments() {
|
685
613
|
this._element.style.paddingLeft = '';
|
686
614
|
this._element.style.paddingRight = '';
|
687
|
-
}
|
615
|
+
}
|
688
616
|
|
689
|
-
|
690
|
-
|
617
|
+
_checkScrollbar() {
|
618
|
+
const rect = document.body.getBoundingClientRect();
|
691
619
|
this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth;
|
692
620
|
this._scrollbarWidth = this._getScrollbarWidth();
|
693
|
-
}
|
694
|
-
|
695
|
-
_proto._setScrollbar = function _setScrollbar() {
|
696
|
-
var _this11 = this;
|
621
|
+
}
|
697
622
|
|
623
|
+
_setScrollbar() {
|
698
624
|
if (this._isBodyOverflowing) {
|
699
|
-
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight',
|
700
|
-
return calculatedValue + _this11._scrollbarWidth;
|
701
|
-
});
|
625
|
+
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
702
626
|
|
703
|
-
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight',
|
704
|
-
return calculatedValue - _this11._scrollbarWidth;
|
705
|
-
});
|
627
|
+
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth);
|
706
628
|
|
707
|
-
this._setElementAttributes('body', 'paddingRight',
|
708
|
-
return calculatedValue + _this11._scrollbarWidth;
|
709
|
-
});
|
629
|
+
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
710
630
|
}
|
711
631
|
|
712
632
|
document.body.classList.add(CLASS_NAME_OPEN);
|
713
|
-
}
|
633
|
+
}
|
714
634
|
|
715
|
-
|
716
|
-
SelectorEngine__default['default'].find(selector).forEach(
|
717
|
-
|
718
|
-
|
635
|
+
_setElementAttributes(selector, styleProp, callback) {
|
636
|
+
SelectorEngine__default['default'].find(selector).forEach(element => {
|
637
|
+
if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
|
638
|
+
return;
|
639
|
+
}
|
640
|
+
|
641
|
+
const actualValue = element.style[styleProp];
|
642
|
+
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
719
643
|
Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue);
|
720
644
|
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px';
|
721
645
|
});
|
722
|
-
}
|
646
|
+
}
|
723
647
|
|
724
|
-
|
648
|
+
_resetScrollbar() {
|
725
649
|
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
726
650
|
|
727
651
|
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
728
652
|
|
729
653
|
this._resetElementAttributes('body', 'paddingRight');
|
730
|
-
}
|
654
|
+
}
|
731
655
|
|
732
|
-
|
733
|
-
SelectorEngine__default['default'].find(selector).forEach(
|
734
|
-
|
656
|
+
_resetElementAttributes(selector, styleProp) {
|
657
|
+
SelectorEngine__default['default'].find(selector).forEach(element => {
|
658
|
+
const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
|
735
659
|
|
736
660
|
if (typeof value === 'undefined' && element === document.body) {
|
737
661
|
element.style[styleProp] = '';
|
@@ -740,24 +664,26 @@
|
|
740
664
|
element.style[styleProp] = value;
|
741
665
|
}
|
742
666
|
});
|
743
|
-
}
|
667
|
+
}
|
744
668
|
|
745
|
-
|
669
|
+
_getScrollbarWidth() {
|
746
670
|
// thx d.walsh
|
747
|
-
|
671
|
+
const scrollDiv = document.createElement('div');
|
748
672
|
scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER;
|
749
673
|
document.body.appendChild(scrollDiv);
|
750
|
-
|
674
|
+
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
751
675
|
document.body.removeChild(scrollDiv);
|
752
676
|
return scrollbarWidth;
|
753
677
|
} // Static
|
754
|
-
;
|
755
678
|
|
756
|
-
Modal.jQueryInterface = function jQueryInterface(config, relatedTarget) {
|
757
|
-
return this.each(function () {
|
758
|
-
var data = Data__default['default'].getData(this, DATA_KEY);
|
759
679
|
|
760
|
-
|
680
|
+
static jQueryInterface(config, relatedTarget) {
|
681
|
+
return this.each(function () {
|
682
|
+
let data = Data__default['default'].get(this, DATA_KEY);
|
683
|
+
const _config = { ...Default,
|
684
|
+
...Manipulator__default['default'].getDataAttributes(this),
|
685
|
+
...(typeof config === 'object' && config ? config : {})
|
686
|
+
};
|
761
687
|
|
762
688
|
if (!data) {
|
763
689
|
data = new Modal(this, _config);
|
@@ -765,28 +691,15 @@
|
|
765
691
|
|
766
692
|
if (typeof config === 'string') {
|
767
693
|
if (typeof data[config] === 'undefined') {
|
768
|
-
throw new TypeError(
|
694
|
+
throw new TypeError(`No method named "${config}"`);
|
769
695
|
}
|
770
696
|
|
771
697
|
data[config](relatedTarget);
|
772
698
|
}
|
773
699
|
});
|
774
|
-
}
|
775
|
-
|
776
|
-
_createClass(Modal, null, [{
|
777
|
-
key: "Default",
|
778
|
-
get: function get() {
|
779
|
-
return Default;
|
780
|
-
}
|
781
|
-
}, {
|
782
|
-
key: "DATA_KEY",
|
783
|
-
get: function get() {
|
784
|
-
return DATA_KEY;
|
785
|
-
}
|
786
|
-
}]);
|
700
|
+
}
|
787
701
|
|
788
|
-
|
789
|
-
}(BaseComponent__default['default']);
|
702
|
+
}
|
790
703
|
/**
|
791
704
|
* ------------------------------------------------------------------------
|
792
705
|
* Data Api implementation
|
@@ -795,31 +708,30 @@
|
|
795
708
|
|
796
709
|
|
797
710
|
EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
798
|
-
|
799
|
-
|
800
|
-
var target = getElementFromSelector(this);
|
711
|
+
const target = getElementFromSelector(this);
|
801
712
|
|
802
713
|
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
803
714
|
event.preventDefault();
|
804
715
|
}
|
805
716
|
|
806
|
-
EventHandler__default['default'].one(target, EVENT_SHOW,
|
717
|
+
EventHandler__default['default'].one(target, EVENT_SHOW, showEvent => {
|
807
718
|
if (showEvent.defaultPrevented) {
|
808
719
|
// only register focus restorer if modal will actually get shown
|
809
720
|
return;
|
810
721
|
}
|
811
722
|
|
812
|
-
EventHandler__default['default'].one(target, EVENT_HIDDEN,
|
813
|
-
if (isVisible(
|
814
|
-
|
723
|
+
EventHandler__default['default'].one(target, EVENT_HIDDEN, () => {
|
724
|
+
if (isVisible(this)) {
|
725
|
+
this.focus();
|
815
726
|
}
|
816
727
|
});
|
817
728
|
});
|
818
|
-
|
729
|
+
let data = Data__default['default'].get(target, DATA_KEY);
|
819
730
|
|
820
731
|
if (!data) {
|
821
|
-
|
822
|
-
|
732
|
+
const config = { ...Manipulator__default['default'].getDataAttributes(target),
|
733
|
+
...Manipulator__default['default'].getDataAttributes(this)
|
734
|
+
};
|
823
735
|
data = new Modal(target, config);
|
824
736
|
}
|
825
737
|
|