bootstrap 5.0.2 → 5.1.3
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/alert.js +78 -48
- data/assets/javascripts/bootstrap/base-component.js +22 -17
- data/assets/javascripts/bootstrap/button.js +19 -12
- data/assets/javascripts/bootstrap/carousel.js +66 -44
- data/assets/javascripts/bootstrap/collapse.js +114 -131
- data/assets/javascripts/bootstrap/dom/data.js +5 -5
- data/assets/javascripts/bootstrap/dom/event-handler.js +11 -5
- data/assets/javascripts/bootstrap/dom/manipulator.js +6 -6
- data/assets/javascripts/bootstrap/dom/selector-engine.js +49 -7
- data/assets/javascripts/bootstrap/dropdown.js +96 -106
- data/assets/javascripts/bootstrap/modal.js +241 -87
- data/assets/javascripts/bootstrap/offcanvas.js +203 -57
- data/assets/javascripts/bootstrap/popover.js +25 -58
- data/assets/javascripts/bootstrap/scrollspy.js +47 -66
- data/assets/javascripts/bootstrap/tab.js +41 -22
- data/assets/javascripts/bootstrap/toast.js +124 -29
- data/assets/javascripts/bootstrap/tooltip.js +122 -104
- data/assets/javascripts/bootstrap-sprockets.js +7 -7
- data/assets/javascripts/bootstrap.js +660 -630
- data/assets/javascripts/bootstrap.min.js +2 -2
- data/assets/stylesheets/_bootstrap-grid.scss +3 -1
- data/assets/stylesheets/_bootstrap-reboot.scss +2 -4
- data/assets/stylesheets/_bootstrap.scss +2 -1
- data/assets/stylesheets/bootstrap/_card.scss +2 -1
- data/assets/stylesheets/bootstrap/_functions.scss +51 -12
- data/assets/stylesheets/bootstrap/_grid.scss +11 -0
- data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
- data/assets/stylesheets/bootstrap/_mixins.scss +1 -0
- data/assets/stylesheets/bootstrap/_modal.scss +1 -11
- data/assets/stylesheets/bootstrap/_navbar.scss +30 -1
- data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -0
- data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
- data/assets/stylesheets/bootstrap/_reboot.scss +12 -8
- data/assets/stylesheets/bootstrap/_root.scss +40 -2
- data/assets/stylesheets/bootstrap/_tables.scss +8 -4
- data/assets/stylesheets/bootstrap/_toasts.scss +2 -2
- data/assets/stylesheets/bootstrap/_transitions.scss +6 -0
- data/assets/stylesheets/bootstrap/_utilities.scss +44 -8
- data/assets/stylesheets/bootstrap/_variables.scss +184 -11
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +1 -1
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +2 -0
- data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
- data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
- data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +29 -10
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +27 -6
- data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +1 -1
- data/bootstrap.gemspec +3 -3
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +6 -2
- metadata +12 -8
@@ -1,21 +1,27 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap modal.js v5.
|
2
|
+
* Bootstrap modal.js v5.1.3 (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
|
*/
|
6
6
|
(function (global, factory) {
|
7
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/
|
8
|
-
typeof define === 'function' && define.amd ? define(['./dom/
|
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('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) :
|
8
|
+
typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
|
9
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
|
10
|
+
})(this, (function (EventHandler, Manipulator, SelectorEngine, BaseComponent) { '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 Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
|
16
|
+
const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
17
|
+
const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
18
18
|
|
19
|
+
/**
|
20
|
+
* --------------------------------------------------------------------------
|
21
|
+
* Bootstrap (v5.1.3): util/index.js
|
22
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
23
|
+
* --------------------------------------------------------------------------
|
24
|
+
*/
|
19
25
|
const MILLISECONDS_MULTIPLIER = 1000;
|
20
26
|
const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
21
27
|
|
@@ -102,7 +108,7 @@
|
|
102
108
|
}
|
103
109
|
|
104
110
|
if (typeof obj === 'string' && obj.length > 0) {
|
105
|
-
return
|
111
|
+
return document.querySelector(obj);
|
106
112
|
}
|
107
113
|
|
108
114
|
return null;
|
@@ -128,7 +134,35 @@
|
|
128
134
|
return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
129
135
|
};
|
130
136
|
|
131
|
-
const
|
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
|
+
/**
|
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
|
+
};
|
132
166
|
|
133
167
|
const getjQuery = () => {
|
134
168
|
const {
|
@@ -218,7 +252,7 @@
|
|
218
252
|
|
219
253
|
/**
|
220
254
|
* --------------------------------------------------------------------------
|
221
|
-
* Bootstrap (v5.
|
255
|
+
* Bootstrap (v5.1.3): util/scrollBar.js
|
222
256
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
223
257
|
* --------------------------------------------------------------------------
|
224
258
|
*/
|
@@ -287,18 +321,18 @@
|
|
287
321
|
const actualValue = element.style[styleProp];
|
288
322
|
|
289
323
|
if (actualValue) {
|
290
|
-
Manipulator__default
|
324
|
+
Manipulator__default.default.setDataAttribute(element, styleProp, actualValue);
|
291
325
|
}
|
292
326
|
}
|
293
327
|
|
294
328
|
_resetElementAttributes(selector, styleProp) {
|
295
329
|
const manipulationCallBack = element => {
|
296
|
-
const value = Manipulator__default
|
330
|
+
const value = Manipulator__default.default.getDataAttribute(element, styleProp);
|
297
331
|
|
298
332
|
if (typeof value === 'undefined') {
|
299
333
|
element.style.removeProperty(styleProp);
|
300
334
|
} else {
|
301
|
-
Manipulator__default
|
335
|
+
Manipulator__default.default.removeDataAttribute(element, styleProp);
|
302
336
|
element.style[styleProp] = value;
|
303
337
|
}
|
304
338
|
};
|
@@ -310,7 +344,7 @@
|
|
310
344
|
if (isElement(selector)) {
|
311
345
|
callBack(selector);
|
312
346
|
} else {
|
313
|
-
SelectorEngine__default
|
347
|
+
SelectorEngine__default.default.find(selector, this._element).forEach(callBack);
|
314
348
|
}
|
315
349
|
}
|
316
350
|
|
@@ -322,11 +356,12 @@
|
|
322
356
|
|
323
357
|
/**
|
324
358
|
* --------------------------------------------------------------------------
|
325
|
-
* Bootstrap (v5.
|
326
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/
|
359
|
+
* Bootstrap (v5.1.3): util/backdrop.js
|
360
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
327
361
|
* --------------------------------------------------------------------------
|
328
362
|
*/
|
329
|
-
const Default$
|
363
|
+
const Default$2 = {
|
364
|
+
className: 'modal-backdrop',
|
330
365
|
isVisible: true,
|
331
366
|
// if false, we use the backdrop helper without adding any element to the dom
|
332
367
|
isAnimated: false,
|
@@ -334,17 +369,17 @@
|
|
334
369
|
// give the choice to place backdrop under different elements
|
335
370
|
clickCallback: null
|
336
371
|
};
|
337
|
-
const DefaultType$
|
372
|
+
const DefaultType$2 = {
|
373
|
+
className: 'string',
|
338
374
|
isVisible: 'boolean',
|
339
375
|
isAnimated: 'boolean',
|
340
376
|
rootElement: '(element|string)',
|
341
377
|
clickCallback: '(function|null)'
|
342
378
|
};
|
343
|
-
const NAME$
|
344
|
-
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
379
|
+
const NAME$2 = 'backdrop';
|
345
380
|
const CLASS_NAME_FADE$1 = 'fade';
|
346
381
|
const CLASS_NAME_SHOW$1 = 'show';
|
347
|
-
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$
|
382
|
+
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$2}`;
|
348
383
|
|
349
384
|
class Backdrop {
|
350
385
|
constructor(config) {
|
@@ -390,7 +425,7 @@
|
|
390
425
|
_getElement() {
|
391
426
|
if (!this._element) {
|
392
427
|
const backdrop = document.createElement('div');
|
393
|
-
backdrop.className =
|
428
|
+
backdrop.className = this._config.className;
|
394
429
|
|
395
430
|
if (this._config.isAnimated) {
|
396
431
|
backdrop.classList.add(CLASS_NAME_FADE$1);
|
@@ -403,12 +438,12 @@
|
|
403
438
|
}
|
404
439
|
|
405
440
|
_getConfig(config) {
|
406
|
-
config = { ...Default$
|
441
|
+
config = { ...Default$2,
|
407
442
|
...(typeof config === 'object' ? config : {})
|
408
443
|
}; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
409
444
|
|
410
445
|
config.rootElement = getElement(config.rootElement);
|
411
|
-
typeCheckConfig(NAME$
|
446
|
+
typeCheckConfig(NAME$2, config, DefaultType$2);
|
412
447
|
return config;
|
413
448
|
}
|
414
449
|
|
@@ -417,9 +452,9 @@
|
|
417
452
|
return;
|
418
453
|
}
|
419
454
|
|
420
|
-
this._config.rootElement.
|
455
|
+
this._config.rootElement.append(this._getElement());
|
421
456
|
|
422
|
-
EventHandler__default
|
457
|
+
EventHandler__default.default.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
423
458
|
execute(this._config.clickCallback);
|
424
459
|
});
|
425
460
|
this._isAppended = true;
|
@@ -430,7 +465,7 @@
|
|
430
465
|
return;
|
431
466
|
}
|
432
467
|
|
433
|
-
EventHandler__default
|
468
|
+
EventHandler__default.default.off(this._element, EVENT_MOUSEDOWN);
|
434
469
|
|
435
470
|
this._element.remove();
|
436
471
|
|
@@ -445,7 +480,136 @@
|
|
445
480
|
|
446
481
|
/**
|
447
482
|
* --------------------------------------------------------------------------
|
448
|
-
* Bootstrap (v5.
|
483
|
+
* Bootstrap (v5.1.3): util/focustrap.js
|
484
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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.3): 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.3): modal.js
|
449
613
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
450
614
|
* --------------------------------------------------------------------------
|
451
615
|
*/
|
@@ -475,7 +639,6 @@
|
|
475
639
|
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
476
640
|
const EVENT_SHOW = `show${EVENT_KEY}`;
|
477
641
|
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
478
|
-
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
|
479
642
|
const EVENT_RESIZE = `resize${EVENT_KEY}`;
|
480
643
|
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
|
481
644
|
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
|
@@ -486,22 +649,23 @@
|
|
486
649
|
const CLASS_NAME_FADE = 'fade';
|
487
650
|
const CLASS_NAME_SHOW = 'show';
|
488
651
|
const CLASS_NAME_STATIC = 'modal-static';
|
652
|
+
const OPEN_SELECTOR = '.modal.show';
|
489
653
|
const SELECTOR_DIALOG = '.modal-dialog';
|
490
654
|
const SELECTOR_MODAL_BODY = '.modal-body';
|
491
655
|
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]';
|
492
|
-
const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]';
|
493
656
|
/**
|
494
657
|
* ------------------------------------------------------------------------
|
495
658
|
* Class Definition
|
496
659
|
* ------------------------------------------------------------------------
|
497
660
|
*/
|
498
661
|
|
499
|
-
class Modal extends BaseComponent__default
|
662
|
+
class Modal extends BaseComponent__default.default {
|
500
663
|
constructor(element, config) {
|
501
664
|
super(element);
|
502
665
|
this._config = this._getConfig(config);
|
503
|
-
this._dialog = SelectorEngine__default
|
666
|
+
this._dialog = SelectorEngine__default.default.findOne(SELECTOR_DIALOG, this._element);
|
504
667
|
this._backdrop = this._initializeBackDrop();
|
668
|
+
this._focustrap = this._initializeFocusTrap();
|
505
669
|
this._isShown = false;
|
506
670
|
this._ignoreBackdropClick = false;
|
507
671
|
this._isTransitioning = false;
|
@@ -527,7 +691,7 @@
|
|
527
691
|
return;
|
528
692
|
}
|
529
693
|
|
530
|
-
const showEvent = EventHandler__default
|
694
|
+
const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, {
|
531
695
|
relatedTarget
|
532
696
|
});
|
533
697
|
|
@@ -551,9 +715,8 @@
|
|
551
715
|
|
552
716
|
this._setResizeEvent();
|
553
717
|
|
554
|
-
EventHandler__default
|
555
|
-
|
556
|
-
EventHandler__default['default'].one(this._element, EVENT_MOUSEUP_DISMISS, event => {
|
718
|
+
EventHandler__default.default.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
|
719
|
+
EventHandler__default.default.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
|
557
720
|
if (event.target === this._element) {
|
558
721
|
this._ignoreBackdropClick = true;
|
559
722
|
}
|
@@ -563,16 +726,12 @@
|
|
563
726
|
this._showBackdrop(() => this._showElement(relatedTarget));
|
564
727
|
}
|
565
728
|
|
566
|
-
hide(
|
567
|
-
if (event && ['A', 'AREA'].includes(event.target.tagName)) {
|
568
|
-
event.preventDefault();
|
569
|
-
}
|
570
|
-
|
729
|
+
hide() {
|
571
730
|
if (!this._isShown || this._isTransitioning) {
|
572
731
|
return;
|
573
732
|
}
|
574
733
|
|
575
|
-
const hideEvent = EventHandler__default
|
734
|
+
const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
|
576
735
|
|
577
736
|
if (hideEvent.defaultPrevented) {
|
578
737
|
return;
|
@@ -590,29 +749,24 @@
|
|
590
749
|
|
591
750
|
this._setResizeEvent();
|
592
751
|
|
593
|
-
|
752
|
+
this._focustrap.deactivate();
|
594
753
|
|
595
754
|
this._element.classList.remove(CLASS_NAME_SHOW);
|
596
755
|
|
597
|
-
EventHandler__default
|
598
|
-
EventHandler__default
|
756
|
+
EventHandler__default.default.off(this._element, EVENT_CLICK_DISMISS);
|
757
|
+
EventHandler__default.default.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
|
599
758
|
|
600
759
|
this._queueCallback(() => this._hideModal(), this._element, isAnimated);
|
601
760
|
}
|
602
761
|
|
603
762
|
dispose() {
|
604
|
-
[window, this._dialog].forEach(htmlElement => EventHandler__default
|
763
|
+
[window, this._dialog].forEach(htmlElement => EventHandler__default.default.off(htmlElement, EVENT_KEY));
|
605
764
|
|
606
765
|
this._backdrop.dispose();
|
607
766
|
|
608
|
-
|
609
|
-
/**
|
610
|
-
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
611
|
-
* Do not move `document` in `htmlElements` array
|
612
|
-
* It will remove `EVENT_CLICK_DATA_API` event that should remain
|
613
|
-
*/
|
767
|
+
this._focustrap.deactivate();
|
614
768
|
|
615
|
-
|
769
|
+
super.dispose();
|
616
770
|
}
|
617
771
|
|
618
772
|
handleUpdate() {
|
@@ -628,9 +782,15 @@
|
|
628
782
|
});
|
629
783
|
}
|
630
784
|
|
785
|
+
_initializeFocusTrap() {
|
786
|
+
return new FocusTrap({
|
787
|
+
trapElement: this._element
|
788
|
+
});
|
789
|
+
}
|
790
|
+
|
631
791
|
_getConfig(config) {
|
632
792
|
config = { ...Default,
|
633
|
-
...Manipulator__default
|
793
|
+
...Manipulator__default.default.getDataAttributes(this._element),
|
634
794
|
...(typeof config === 'object' ? config : {})
|
635
795
|
};
|
636
796
|
typeCheckConfig(NAME, config, DefaultType);
|
@@ -640,11 +800,11 @@
|
|
640
800
|
_showElement(relatedTarget) {
|
641
801
|
const isAnimated = this._isAnimated();
|
642
802
|
|
643
|
-
const modalBody = SelectorEngine__default
|
803
|
+
const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog);
|
644
804
|
|
645
805
|
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
646
806
|
// Don't move modal's DOM position
|
647
|
-
document.body.
|
807
|
+
document.body.append(this._element);
|
648
808
|
}
|
649
809
|
|
650
810
|
this._element.style.display = 'block';
|
@@ -667,17 +827,13 @@
|
|
667
827
|
|
668
828
|
this._element.classList.add(CLASS_NAME_SHOW);
|
669
829
|
|
670
|
-
if (this._config.focus) {
|
671
|
-
this._enforceFocus();
|
672
|
-
}
|
673
|
-
|
674
830
|
const transitionComplete = () => {
|
675
831
|
if (this._config.focus) {
|
676
|
-
this.
|
832
|
+
this._focustrap.activate();
|
677
833
|
}
|
678
834
|
|
679
835
|
this._isTransitioning = false;
|
680
|
-
EventHandler__default
|
836
|
+
EventHandler__default.default.trigger(this._element, EVENT_SHOWN, {
|
681
837
|
relatedTarget
|
682
838
|
});
|
683
839
|
};
|
@@ -685,19 +841,9 @@
|
|
685
841
|
this._queueCallback(transitionComplete, this._dialog, isAnimated);
|
686
842
|
}
|
687
843
|
|
688
|
-
_enforceFocus() {
|
689
|
-
EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop
|
690
|
-
|
691
|
-
EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => {
|
692
|
-
if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) {
|
693
|
-
this._element.focus();
|
694
|
-
}
|
695
|
-
});
|
696
|
-
}
|
697
|
-
|
698
844
|
_setEscapeEvent() {
|
699
845
|
if (this._isShown) {
|
700
|
-
EventHandler__default
|
846
|
+
EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
701
847
|
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
702
848
|
event.preventDefault();
|
703
849
|
this.hide();
|
@@ -706,15 +852,15 @@
|
|
706
852
|
}
|
707
853
|
});
|
708
854
|
} else {
|
709
|
-
EventHandler__default
|
855
|
+
EventHandler__default.default.off(this._element, EVENT_KEYDOWN_DISMISS);
|
710
856
|
}
|
711
857
|
}
|
712
858
|
|
713
859
|
_setResizeEvent() {
|
714
860
|
if (this._isShown) {
|
715
|
-
EventHandler__default
|
861
|
+
EventHandler__default.default.on(window, EVENT_RESIZE, () => this._adjustDialog());
|
716
862
|
} else {
|
717
|
-
EventHandler__default
|
863
|
+
EventHandler__default.default.off(window, EVENT_RESIZE);
|
718
864
|
}
|
719
865
|
}
|
720
866
|
|
@@ -736,12 +882,12 @@
|
|
736
882
|
|
737
883
|
this._scrollBar.reset();
|
738
884
|
|
739
|
-
EventHandler__default
|
885
|
+
EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
|
740
886
|
});
|
741
887
|
}
|
742
888
|
|
743
889
|
_showBackdrop(callback) {
|
744
|
-
EventHandler__default
|
890
|
+
EventHandler__default.default.on(this._element, EVENT_CLICK_DISMISS, event => {
|
745
891
|
if (this._ignoreBackdropClick) {
|
746
892
|
this._ignoreBackdropClick = false;
|
747
893
|
return;
|
@@ -766,7 +912,7 @@
|
|
766
912
|
}
|
767
913
|
|
768
914
|
_triggerBackdropTransition() {
|
769
|
-
const hideEvent = EventHandler__default
|
915
|
+
const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE_PREVENTED);
|
770
916
|
|
771
917
|
if (hideEvent.defaultPrevented) {
|
772
918
|
return;
|
@@ -851,28 +997,36 @@
|
|
851
997
|
*/
|
852
998
|
|
853
999
|
|
854
|
-
EventHandler__default
|
1000
|
+
EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
855
1001
|
const target = getElementFromSelector(this);
|
856
1002
|
|
857
1003
|
if (['A', 'AREA'].includes(this.tagName)) {
|
858
1004
|
event.preventDefault();
|
859
1005
|
}
|
860
1006
|
|
861
|
-
EventHandler__default
|
1007
|
+
EventHandler__default.default.one(target, EVENT_SHOW, showEvent => {
|
862
1008
|
if (showEvent.defaultPrevented) {
|
863
1009
|
// only register focus restorer if modal will actually get shown
|
864
1010
|
return;
|
865
1011
|
}
|
866
1012
|
|
867
|
-
EventHandler__default
|
1013
|
+
EventHandler__default.default.one(target, EVENT_HIDDEN, () => {
|
868
1014
|
if (isVisible(this)) {
|
869
1015
|
this.focus();
|
870
1016
|
}
|
871
1017
|
});
|
872
|
-
});
|
1018
|
+
}); // avoid conflict when clicking moddal toggler while another one is open
|
1019
|
+
|
1020
|
+
const allReadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR);
|
1021
|
+
|
1022
|
+
if (allReadyOpen) {
|
1023
|
+
Modal.getInstance(allReadyOpen).hide();
|
1024
|
+
}
|
1025
|
+
|
873
1026
|
const data = Modal.getOrCreateInstance(target);
|
874
1027
|
data.toggle(this);
|
875
1028
|
});
|
1029
|
+
enableDismissTrigger(Modal);
|
876
1030
|
/**
|
877
1031
|
* ------------------------------------------------------------------------
|
878
1032
|
* jQuery
|
@@ -884,4 +1038,4 @@
|
|
884
1038
|
|
885
1039
|
return Modal;
|
886
1040
|
|
887
|
-
}))
|
1041
|
+
}));
|