bootstrap 5.0.0.beta2 → 5.0.0.beta3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|