vrembem 3.0.19 → 3.0.20
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.
- package/dev/scripts.esm.js +281 -325
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +281 -325
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.mjs +239 -263
- package/dev/scripts.modern.mjs.map +1 -1
- package/dev/scripts.umd.js +281 -325
- package/dev/scripts.umd.js.map +1 -1
- package/dev/styles.css +7 -28
- package/dev/styles.css.map +1 -1
- package/dist/scripts.esm.js +1 -1
- package/dist/scripts.esm.js.map +1 -1
- package/dist/scripts.js +1 -1
- package/dist/scripts.js.map +1 -1
- package/dist/scripts.modern.mjs +1 -1
- package/dist/scripts.modern.mjs.map +1 -1
- package/dist/scripts.umd.js +1 -1
- package/dist/scripts.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/index.js +5 -5
- package/package.json +26 -26
package/dev/scripts.umd.js
CHANGED
|
@@ -3,78 +3,55 @@
|
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
4
4
|
(global = global || self, factory(global.vrembem = {}));
|
|
5
5
|
})(this, (function (exports) {
|
|
6
|
-
function
|
|
7
|
-
if ("
|
|
8
|
-
|
|
9
|
-
if (void 0 !== e) {
|
|
10
|
-
var i = e.call(t, r || "default");
|
|
11
|
-
if ("object" != typeof i) return i;
|
|
12
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
13
|
-
}
|
|
14
|
-
return ("string" === r ? String : Number)(t);
|
|
6
|
+
function _classPrivateFieldLooseBase(e, t) {
|
|
7
|
+
if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
|
|
8
|
+
return e;
|
|
15
9
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return "
|
|
10
|
+
var id = 0;
|
|
11
|
+
function _classPrivateFieldLooseKey(e) {
|
|
12
|
+
return "__private_" + id++ + "_" + e;
|
|
19
13
|
}
|
|
20
|
-
function _defineProperties(
|
|
21
|
-
for (var
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
descriptor.configurable = true;
|
|
25
|
-
if ("value" in descriptor) descriptor.writable = true;
|
|
26
|
-
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
|
|
14
|
+
function _defineProperties(e, r) {
|
|
15
|
+
for (var t = 0; t < r.length; t++) {
|
|
16
|
+
var o = r[t];
|
|
17
|
+
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
|
|
27
18
|
}
|
|
28
19
|
}
|
|
29
|
-
function _createClass(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
writable: false
|
|
34
|
-
});
|
|
35
|
-
return Constructor;
|
|
20
|
+
function _createClass(e, r, t) {
|
|
21
|
+
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
|
|
22
|
+
writable: !1
|
|
23
|
+
}), e;
|
|
36
24
|
}
|
|
37
25
|
function _extends() {
|
|
38
|
-
_extends = Object.assign ? Object.assign.bind() : function (
|
|
39
|
-
for (var
|
|
40
|
-
var
|
|
41
|
-
for (var
|
|
42
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
43
|
-
target[key] = source[key];
|
|
44
|
-
}
|
|
45
|
-
}
|
|
26
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
27
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
28
|
+
var t = arguments[e];
|
|
29
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
46
30
|
}
|
|
47
|
-
return
|
|
48
|
-
};
|
|
49
|
-
return _extends.apply(this, arguments);
|
|
31
|
+
return n;
|
|
32
|
+
}, _extends.apply(null, arguments);
|
|
50
33
|
}
|
|
51
|
-
function _inheritsLoose(
|
|
52
|
-
|
|
53
|
-
subClass.prototype.constructor = subClass;
|
|
54
|
-
_setPrototypeOf(subClass, superClass);
|
|
34
|
+
function _inheritsLoose(t, o) {
|
|
35
|
+
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
|
|
55
36
|
}
|
|
56
|
-
function _setPrototypeOf(
|
|
57
|
-
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
};
|
|
61
|
-
return _setPrototypeOf(o, p);
|
|
37
|
+
function _setPrototypeOf(t, e) {
|
|
38
|
+
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
|
|
39
|
+
return t.__proto__ = e, t;
|
|
40
|
+
}, _setPrototypeOf(t, e);
|
|
62
41
|
}
|
|
63
|
-
function
|
|
64
|
-
if (
|
|
65
|
-
|
|
42
|
+
function _toPrimitive(t, r) {
|
|
43
|
+
if ("object" != typeof t || !t) return t;
|
|
44
|
+
var e = t[Symbol.toPrimitive];
|
|
45
|
+
if (void 0 !== e) {
|
|
46
|
+
var i = e.call(t, r || "default");
|
|
47
|
+
if ("object" != typeof i) return i;
|
|
48
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
66
49
|
}
|
|
67
|
-
return
|
|
68
|
-
}
|
|
69
|
-
var id = 0;
|
|
70
|
-
function _classPrivateFieldLooseKey(name) {
|
|
71
|
-
return "__private_" + id++ + "_" + name;
|
|
50
|
+
return ("string" === r ? String : Number)(t);
|
|
72
51
|
}
|
|
73
|
-
function
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
return receiver;
|
|
52
|
+
function _toPropertyKey(t) {
|
|
53
|
+
var i = _toPrimitive(t, "string");
|
|
54
|
+
return "symbol" == typeof i ? i : i + "";
|
|
78
55
|
}
|
|
79
56
|
|
|
80
57
|
var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
|
|
@@ -101,8 +78,8 @@
|
|
|
101
78
|
this.mql = window.matchMedia("(min-width: " + this.value + ")");
|
|
102
79
|
|
|
103
80
|
// Conditionally use addListener() for IE11 support.
|
|
104
|
-
if (typeof this.mql.addEventListener ===
|
|
105
|
-
this.mql.addEventListener(
|
|
81
|
+
if (typeof this.mql.addEventListener === "function") {
|
|
82
|
+
this.mql.addEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
106
83
|
} else {
|
|
107
84
|
this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
108
85
|
}
|
|
@@ -116,8 +93,8 @@
|
|
|
116
93
|
if (!this.mql) return this;
|
|
117
94
|
|
|
118
95
|
// Conditionally use removeListener() for IE11 support.
|
|
119
|
-
if (typeof this.mql.removeEventListener ===
|
|
120
|
-
this.mql.removeEventListener(
|
|
96
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
97
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
121
98
|
} else {
|
|
122
99
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
123
100
|
}
|
|
@@ -128,7 +105,7 @@
|
|
|
128
105
|
this.mql = null;
|
|
129
106
|
return this;
|
|
130
107
|
};
|
|
131
|
-
_createClass(Breakpoint, [{
|
|
108
|
+
return _createClass(Breakpoint, [{
|
|
132
109
|
key: "handler",
|
|
133
110
|
get: function get() {
|
|
134
111
|
return _classPrivateFieldLooseBase(this, _handler)[_handler];
|
|
@@ -139,8 +116,8 @@
|
|
|
139
116
|
set: function set(func) {
|
|
140
117
|
if (this.mql) {
|
|
141
118
|
// Conditionally use removeListener() for IE11 support.
|
|
142
|
-
if (typeof this.mql.removeEventListener ===
|
|
143
|
-
this.mql.removeEventListener(
|
|
119
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
120
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
144
121
|
} else {
|
|
145
122
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
146
123
|
}
|
|
@@ -148,7 +125,6 @@
|
|
|
148
125
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = func;
|
|
149
126
|
}
|
|
150
127
|
}]);
|
|
151
|
-
return Breakpoint;
|
|
152
128
|
}();
|
|
153
129
|
|
|
154
130
|
function _settle(pact, state, value) {
|
|
@@ -364,7 +340,7 @@
|
|
|
364
340
|
};
|
|
365
341
|
_proto.get = function get(value, key) {
|
|
366
342
|
if (key === void 0) {
|
|
367
|
-
key =
|
|
343
|
+
key = "id";
|
|
368
344
|
}
|
|
369
345
|
return this.collection.find(function (item) {
|
|
370
346
|
return item[key] === value;
|
|
@@ -373,31 +349,6 @@
|
|
|
373
349
|
return Collection;
|
|
374
350
|
}();
|
|
375
351
|
|
|
376
|
-
const not = {
|
|
377
|
-
inert: ':not([inert]):not([inert] *)',
|
|
378
|
-
negTabIndex: ':not([tabindex^="-"])',
|
|
379
|
-
disabled: ':not(:disabled)',
|
|
380
|
-
};
|
|
381
|
-
|
|
382
|
-
var e = [
|
|
383
|
-
`a[href]${not.inert}${not.negTabIndex}`,
|
|
384
|
-
`area[href]${not.inert}${not.negTabIndex}`,
|
|
385
|
-
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
386
|
-
`input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
387
|
-
`select${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
388
|
-
`textarea${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
389
|
-
`button${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
390
|
-
`details${not.inert} > summary:first-of-type${not.negTabIndex}`,
|
|
391
|
-
// Discard until Firefox supports `:has()`
|
|
392
|
-
// See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
|
|
393
|
-
// `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
|
|
394
|
-
`iframe${not.inert}${not.negTabIndex}`,
|
|
395
|
-
`audio[controls]${not.inert}${not.negTabIndex}`,
|
|
396
|
-
`video[controls]${not.inert}${not.negTabIndex}`,
|
|
397
|
-
`[contenteditable]${not.inert}${not.negTabIndex}`,
|
|
398
|
-
`[tabindex]${not.inert}${not.negTabIndex}`,
|
|
399
|
-
];
|
|
400
|
-
|
|
401
352
|
var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
|
|
402
353
|
var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
|
|
403
354
|
var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
|
|
@@ -407,7 +358,7 @@
|
|
|
407
358
|
el = null;
|
|
408
359
|
}
|
|
409
360
|
if (selectorFocus === void 0) {
|
|
410
|
-
selectorFocus =
|
|
361
|
+
selectorFocus = "[data-focus]";
|
|
411
362
|
}
|
|
412
363
|
Object.defineProperty(this, _focusable, {
|
|
413
364
|
writable: true,
|
|
@@ -446,8 +397,8 @@
|
|
|
446
397
|
this.focusable = [];
|
|
447
398
|
|
|
448
399
|
// Remove event listeners
|
|
449
|
-
document.removeEventListener(
|
|
450
|
-
document.removeEventListener(
|
|
400
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
401
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
451
402
|
};
|
|
452
403
|
_proto.focus = function focus(el, selectorFocus) {
|
|
453
404
|
if (el === void 0) {
|
|
@@ -473,7 +424,8 @@
|
|
|
473
424
|
var initScrollTop = el.scrollTop;
|
|
474
425
|
|
|
475
426
|
// Query for all the focusable elements.
|
|
476
|
-
var
|
|
427
|
+
var selector = focusableSelectors.join(",");
|
|
428
|
+
var els = el.querySelectorAll(selector);
|
|
477
429
|
|
|
478
430
|
// Loop through all focusable elements.
|
|
479
431
|
els.forEach(function (el) {
|
|
@@ -493,7 +445,7 @@
|
|
|
493
445
|
// Return the focusable array.
|
|
494
446
|
return focusable;
|
|
495
447
|
};
|
|
496
|
-
_createClass(FocusTrap, [{
|
|
448
|
+
return _createClass(FocusTrap, [{
|
|
497
449
|
key: "focusable",
|
|
498
450
|
get: function get() {
|
|
499
451
|
return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
|
|
@@ -504,11 +456,11 @@
|
|
|
504
456
|
|
|
505
457
|
// Apply event listeners based on new focusable array length.
|
|
506
458
|
if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
|
|
507
|
-
document.removeEventListener(
|
|
508
|
-
document.addEventListener(
|
|
459
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
460
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
509
461
|
} else {
|
|
510
|
-
document.removeEventListener(
|
|
511
|
-
document.addEventListener(
|
|
462
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
463
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
512
464
|
}
|
|
513
465
|
}
|
|
514
466
|
}, {
|
|
@@ -522,11 +474,17 @@
|
|
|
522
474
|
return this.focusable[this.focusable.length - 1];
|
|
523
475
|
}
|
|
524
476
|
}]);
|
|
525
|
-
return FocusTrap;
|
|
526
477
|
}();
|
|
478
|
+
|
|
479
|
+
// This has been copied over from focusable-selectors package and modified.
|
|
480
|
+
// https://github.com/KittyGiraudel/focusable-selectors
|
|
481
|
+
var notInert = ":not([inert])"; // Previously `:not([inert]):not([inert] *)`
|
|
482
|
+
var notNegTabIndex = ":not([tabindex^=\"-\"])";
|
|
483
|
+
var notDisabled = ":not(:disabled)";
|
|
484
|
+
var focusableSelectors = ["a[href]" + notInert + notNegTabIndex, "area[href]" + notInert + notNegTabIndex, "input:not([type=\"hidden\"]):not([type=\"radio\"])" + notInert + notNegTabIndex + notDisabled, "input[type=\"radio\"]" + notInert + notNegTabIndex + notDisabled, "select" + notInert + notNegTabIndex + notDisabled, "textarea" + notInert + notNegTabIndex + notDisabled, "button" + notInert + notNegTabIndex + notDisabled, "details" + notInert + " > summary:first-of-type" + notNegTabIndex, "iframe" + notInert + notNegTabIndex, "audio[controls]" + notInert + notNegTabIndex, "video[controls]" + notInert + notNegTabIndex, "[contenteditable]" + notInert + notNegTabIndex, "[tabindex]" + notInert + notNegTabIndex];
|
|
527
485
|
function handleFocusTrap(event) {
|
|
528
486
|
// Check if the click was a tab and return if not.
|
|
529
|
-
var isTab = event.key ===
|
|
487
|
+
var isTab = event.key === "Tab" || event.keyCode === 9;
|
|
530
488
|
if (!isTab) return;
|
|
531
489
|
|
|
532
490
|
// If the shift key is pressed.
|
|
@@ -548,18 +506,18 @@
|
|
|
548
506
|
}
|
|
549
507
|
function handleFocusLock(event) {
|
|
550
508
|
// Ignore the tab key by preventing default.
|
|
551
|
-
var isTab = event.key ===
|
|
509
|
+
var isTab = event.key === "Tab" || event.keyCode === 9;
|
|
552
510
|
if (isTab) event.preventDefault();
|
|
553
511
|
}
|
|
554
512
|
|
|
555
513
|
function getConfig$1(el, dataConfig) {
|
|
556
|
-
var string = el.getAttribute("data-" + dataConfig) ||
|
|
557
|
-
var json = string.replace(/'/g,
|
|
514
|
+
var string = el.getAttribute("data-" + dataConfig) || "";
|
|
515
|
+
var json = string.replace(/'/g, "\"");
|
|
558
516
|
return json ? JSON.parse(json) : {};
|
|
559
517
|
}
|
|
560
518
|
|
|
561
519
|
function getPrefix() {
|
|
562
|
-
return getComputedStyle(document.body).getPropertyValue(
|
|
520
|
+
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
563
521
|
}
|
|
564
522
|
|
|
565
523
|
function localStore(key, enable) {
|
|
@@ -604,18 +562,18 @@
|
|
|
604
562
|
where = isComment || isElement ? where : document.querySelector(where);
|
|
605
563
|
|
|
606
564
|
// If ref is a comment, set teleport type to 'after'.
|
|
607
|
-
if (isComment) how =
|
|
565
|
+
if (isComment) how = "after";
|
|
608
566
|
|
|
609
567
|
// Must be a valid reference element and method.
|
|
610
568
|
if (!where) throw new Error("Not a valid teleport reference: '" + where + "'");
|
|
611
|
-
if (typeof where[how] !=
|
|
569
|
+
if (typeof where[how] != "function") throw new Error("Not a valid teleport method: '" + how + "'");
|
|
612
570
|
|
|
613
571
|
// Initial return ref is null.
|
|
614
572
|
var returnRef = null;
|
|
615
573
|
|
|
616
574
|
// If ref is not a comment, set a return reference comment.
|
|
617
575
|
if (!isComment) {
|
|
618
|
-
returnRef = document.createComment(
|
|
576
|
+
returnRef = document.createComment("teleported #" + what.id);
|
|
619
577
|
what.before(returnRef);
|
|
620
578
|
}
|
|
621
579
|
|
|
@@ -641,7 +599,7 @@
|
|
|
641
599
|
el.classList.add(settings.stateOpening);
|
|
642
600
|
|
|
643
601
|
// Add event listener for when the transition is finished.
|
|
644
|
-
el.addEventListener(
|
|
602
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
645
603
|
// Prevent child transition bubbling from firing this event.
|
|
646
604
|
if (event.target != el) return;
|
|
647
605
|
|
|
@@ -651,7 +609,7 @@
|
|
|
651
609
|
|
|
652
610
|
// Resolve the promise and remove the event listener.
|
|
653
611
|
resolve(el);
|
|
654
|
-
this.removeEventListener(
|
|
612
|
+
this.removeEventListener("transitionend", _f);
|
|
655
613
|
});
|
|
656
614
|
} else {
|
|
657
615
|
// Toggle final opened state classes and resolve the promise.
|
|
@@ -670,7 +628,7 @@
|
|
|
670
628
|
el.classList.remove(settings.stateOpened);
|
|
671
629
|
|
|
672
630
|
// Add event listener for when the transition is finished.
|
|
673
|
-
el.addEventListener(
|
|
631
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
674
632
|
// Prevent child transition bubbling from firing this event.
|
|
675
633
|
if (event.target != el) return;
|
|
676
634
|
|
|
@@ -680,7 +638,7 @@
|
|
|
680
638
|
|
|
681
639
|
// Resolve the promise and remove the event listener.
|
|
682
640
|
resolve(el);
|
|
683
|
-
this.removeEventListener(
|
|
641
|
+
this.removeEventListener("transitionend", _f);
|
|
684
642
|
});
|
|
685
643
|
} else {
|
|
686
644
|
// Toggle final closed state classes and resolve the promise.
|
|
@@ -696,9 +654,9 @@
|
|
|
696
654
|
var els = document.querySelectorAll(selector);
|
|
697
655
|
els.forEach(function (el) {
|
|
698
656
|
if (state) {
|
|
699
|
-
el.style.overflow =
|
|
657
|
+
el.style.overflow = "hidden";
|
|
700
658
|
} else {
|
|
701
|
-
el.style.removeProperty(
|
|
659
|
+
el.style.removeProperty("overflow");
|
|
702
660
|
}
|
|
703
661
|
});
|
|
704
662
|
}
|
|
@@ -709,10 +667,10 @@
|
|
|
709
667
|
els.forEach(function (el) {
|
|
710
668
|
if (state) {
|
|
711
669
|
el.inert = true;
|
|
712
|
-
el.setAttribute(
|
|
670
|
+
el.setAttribute("aria-hidden", true);
|
|
713
671
|
} else {
|
|
714
672
|
el.inert = null;
|
|
715
|
-
el.removeAttribute(
|
|
673
|
+
el.removeAttribute("aria-hidden");
|
|
716
674
|
}
|
|
717
675
|
});
|
|
718
676
|
}
|
|
@@ -741,8 +699,8 @@
|
|
|
741
699
|
|
|
742
700
|
var defaults$3 = {
|
|
743
701
|
autoInit: false,
|
|
744
|
-
stateAttr:
|
|
745
|
-
stateValue:
|
|
702
|
+
stateAttr: "aria-checked",
|
|
703
|
+
stateValue: "mixed"
|
|
746
704
|
};
|
|
747
705
|
|
|
748
706
|
var Checkbox = /*#__PURE__*/function () {
|
|
@@ -761,10 +719,10 @@
|
|
|
761
719
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
762
720
|
var mixed = document.querySelectorAll(selector);
|
|
763
721
|
this.setIndeterminate(mixed);
|
|
764
|
-
document.addEventListener(
|
|
722
|
+
document.addEventListener("click", this.__handlerClick, false);
|
|
765
723
|
};
|
|
766
724
|
_proto.destroy = function destroy() {
|
|
767
|
-
document.removeEventListener(
|
|
725
|
+
document.removeEventListener("click", this.__handlerClick, false);
|
|
768
726
|
};
|
|
769
727
|
_proto.handlerClick = function handlerClick(event) {
|
|
770
728
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
@@ -807,30 +765,30 @@
|
|
|
807
765
|
var defaults$2 = {
|
|
808
766
|
autoInit: false,
|
|
809
767
|
// Data attributes
|
|
810
|
-
dataOpen:
|
|
811
|
-
dataClose:
|
|
812
|
-
dataToggle:
|
|
813
|
-
dataBreakpoint:
|
|
814
|
-
dataConfig:
|
|
768
|
+
dataOpen: "drawer-open",
|
|
769
|
+
dataClose: "drawer-close",
|
|
770
|
+
dataToggle: "drawer-toggle",
|
|
771
|
+
dataBreakpoint: "drawer-breakpoint",
|
|
772
|
+
dataConfig: "drawer-config",
|
|
815
773
|
// Selectors
|
|
816
|
-
selectorDrawer:
|
|
817
|
-
selectorDialog:
|
|
818
|
-
selectorFocus:
|
|
774
|
+
selectorDrawer: ".drawer",
|
|
775
|
+
selectorDialog: ".drawer__dialog",
|
|
776
|
+
selectorFocus: "[data-focus]",
|
|
819
777
|
selectorInert: null,
|
|
820
|
-
selectorOverflow:
|
|
778
|
+
selectorOverflow: "body",
|
|
821
779
|
// State classes
|
|
822
|
-
stateOpened:
|
|
823
|
-
stateOpening:
|
|
824
|
-
stateClosing:
|
|
825
|
-
stateClosed:
|
|
780
|
+
stateOpened: "is-opened",
|
|
781
|
+
stateOpening: "is-opening",
|
|
782
|
+
stateClosing: "is-closing",
|
|
783
|
+
stateClosed: "is-closed",
|
|
826
784
|
// Classes
|
|
827
|
-
classModal:
|
|
785
|
+
classModal: "drawer_modal",
|
|
828
786
|
// Feature toggles
|
|
829
787
|
breakpoints: null,
|
|
830
|
-
customEventPrefix:
|
|
788
|
+
customEventPrefix: "drawer:",
|
|
831
789
|
eventListeners: true,
|
|
832
790
|
store: true,
|
|
833
|
-
storeKey:
|
|
791
|
+
storeKey: "VB:DrawerState",
|
|
834
792
|
setTabindex: true,
|
|
835
793
|
transition: true
|
|
836
794
|
};
|
|
@@ -845,7 +803,7 @@
|
|
|
845
803
|
|
|
846
804
|
// If it's a toggle trigger...
|
|
847
805
|
if (trigger.matches("[data-" + this.settings.dataToggle + "]")) {
|
|
848
|
-
var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(
|
|
806
|
+
var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(" ");
|
|
849
807
|
selectors.forEach(function (selector) {
|
|
850
808
|
// Get the entry from collection using the attribute value.
|
|
851
809
|
var entry = _this.get(selector);
|
|
@@ -858,7 +816,7 @@
|
|
|
858
816
|
|
|
859
817
|
// If it's a open trigger...
|
|
860
818
|
if (trigger.matches("[data-" + this.settings.dataOpen + "]")) {
|
|
861
|
-
var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(
|
|
819
|
+
var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(" ");
|
|
862
820
|
_selectors.forEach(function (selector) {
|
|
863
821
|
// Get the entry from collection using the attribute value.
|
|
864
822
|
var entry = _this.get(selector);
|
|
@@ -871,7 +829,7 @@
|
|
|
871
829
|
|
|
872
830
|
// If it's a close trigger...
|
|
873
831
|
if (trigger.matches("[data-" + this.settings.dataClose + "]")) {
|
|
874
|
-
var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(
|
|
832
|
+
var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(" ");
|
|
875
833
|
_selectors2.forEach(function (selector) {
|
|
876
834
|
if (selector) {
|
|
877
835
|
// Get the entry from collection using the attribute value.
|
|
@@ -898,7 +856,7 @@
|
|
|
898
856
|
}
|
|
899
857
|
}
|
|
900
858
|
function handleKeydown$2(event) {
|
|
901
|
-
if (event.key ===
|
|
859
|
+
if (event.key === "Escape") {
|
|
902
860
|
var modal = this.activeModal;
|
|
903
861
|
if (modal) this.close(modal);
|
|
904
862
|
}
|
|
@@ -943,7 +901,7 @@
|
|
|
943
901
|
|
|
944
902
|
// If entry is in the opened state.
|
|
945
903
|
var _temp = function () {
|
|
946
|
-
if (close && _entry.state ===
|
|
904
|
+
if (close && _entry.state === "opened") {
|
|
947
905
|
// Close the drawer.
|
|
948
906
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
949
907
|
}
|
|
@@ -957,12 +915,12 @@
|
|
|
957
915
|
}
|
|
958
916
|
};
|
|
959
917
|
|
|
960
|
-
function
|
|
918
|
+
function P() {
|
|
961
919
|
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
962
920
|
}
|
|
963
921
|
|
|
964
922
|
function getBreakpoint(drawer) {
|
|
965
|
-
var prefix =
|
|
923
|
+
var prefix = P();
|
|
966
924
|
var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
|
|
967
925
|
if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
|
|
968
926
|
return this.settings.breakpoints[bp];
|
|
@@ -975,7 +933,7 @@
|
|
|
975
933
|
|
|
976
934
|
function getDrawer(query) {
|
|
977
935
|
// Get the entry from collection.
|
|
978
|
-
var entry = typeof query ===
|
|
936
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
979
937
|
|
|
980
938
|
// Return entry if it was resolved, otherwise throw error.
|
|
981
939
|
if (entry) {
|
|
@@ -987,12 +945,12 @@
|
|
|
987
945
|
|
|
988
946
|
function getDrawerID(obj) {
|
|
989
947
|
// If it's a string, return the string.
|
|
990
|
-
if (typeof obj ===
|
|
948
|
+
if (typeof obj === "string") {
|
|
991
949
|
return obj;
|
|
992
950
|
}
|
|
993
951
|
|
|
994
952
|
// If it's an HTML element.
|
|
995
|
-
else if (typeof obj.hasAttribute ===
|
|
953
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
996
954
|
// If it's a drawer open trigger, return data value.
|
|
997
955
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
998
956
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
@@ -1038,7 +996,7 @@
|
|
|
1038
996
|
};
|
|
1039
997
|
} else if (!dialog) {
|
|
1040
998
|
return {
|
|
1041
|
-
error: new Error(
|
|
999
|
+
error: new Error("Drawer is missing dialog element.")
|
|
1042
1000
|
};
|
|
1043
1001
|
} else {
|
|
1044
1002
|
return {
|
|
@@ -1048,7 +1006,7 @@
|
|
|
1048
1006
|
}
|
|
1049
1007
|
} else {
|
|
1050
1008
|
return {
|
|
1051
|
-
error: new Error(
|
|
1009
|
+
error: new Error("Could not resolve the drawer ID.")
|
|
1052
1010
|
};
|
|
1053
1011
|
}
|
|
1054
1012
|
}
|
|
@@ -1059,7 +1017,7 @@
|
|
|
1059
1017
|
var _temp2 = function () {
|
|
1060
1018
|
if (_this.store.get(entry.id)) {
|
|
1061
1019
|
var _temp = function () {
|
|
1062
|
-
if (_this.store.get(entry.id) ===
|
|
1020
|
+
if (_this.store.get(entry.id) === "opened") {
|
|
1063
1021
|
return Promise.resolve(entry.open(false, false)).then(function () {});
|
|
1064
1022
|
} else {
|
|
1065
1023
|
return Promise.resolve(entry.close(false, false)).then(function () {});
|
|
@@ -1068,7 +1026,7 @@
|
|
|
1068
1026
|
if (_temp && _temp.then) return _temp.then(function () {});
|
|
1069
1027
|
} else if (entry.el.classList.contains(_this.settings.stateOpened)) {
|
|
1070
1028
|
// Update drawer state.
|
|
1071
|
-
entry.state =
|
|
1029
|
+
entry.state = "opened";
|
|
1072
1030
|
} else {
|
|
1073
1031
|
// Remove transition state classes.
|
|
1074
1032
|
entry.el.classList.remove(_this.settings.stateOpening);
|
|
@@ -1089,9 +1047,9 @@
|
|
|
1089
1047
|
|
|
1090
1048
|
function updateFocusState$1(entry) {
|
|
1091
1049
|
// Check if there's an active modal
|
|
1092
|
-
if (entry.state ===
|
|
1050
|
+
if (entry.state === "opened") {
|
|
1093
1051
|
// Mount the focus trap on the opened drawer.
|
|
1094
|
-
if (entry.mode ===
|
|
1052
|
+
if (entry.mode === "modal") {
|
|
1095
1053
|
this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
|
|
1096
1054
|
} else {
|
|
1097
1055
|
this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
|
|
@@ -1118,7 +1076,7 @@
|
|
|
1118
1076
|
}
|
|
1119
1077
|
|
|
1120
1078
|
// Dispatch custom opened event.
|
|
1121
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1079
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
1122
1080
|
detail: _this,
|
|
1123
1081
|
bubbles: true
|
|
1124
1082
|
}));
|
|
@@ -1138,17 +1096,17 @@
|
|
|
1138
1096
|
|
|
1139
1097
|
// If drawer is closed.
|
|
1140
1098
|
var _temp = function () {
|
|
1141
|
-
if (drawer.state ===
|
|
1099
|
+
if (drawer.state === "closed") {
|
|
1142
1100
|
// Update drawer state.
|
|
1143
|
-
drawer.state =
|
|
1101
|
+
drawer.state = "opening";
|
|
1144
1102
|
|
|
1145
1103
|
// Run the open transition.
|
|
1146
1104
|
return Promise.resolve(openTransition(drawer.el, config)).then(function () {
|
|
1147
1105
|
// Update the global state if mode is modal.
|
|
1148
|
-
if (drawer.mode ===
|
|
1106
|
+
if (drawer.mode === "modal") updateGlobalState(true, config);
|
|
1149
1107
|
|
|
1150
1108
|
// Update drawer state.
|
|
1151
|
-
drawer.state =
|
|
1109
|
+
drawer.state = "opened";
|
|
1152
1110
|
});
|
|
1153
1111
|
}
|
|
1154
1112
|
}();
|
|
@@ -1175,9 +1133,9 @@
|
|
|
1175
1133
|
|
|
1176
1134
|
// If drawer is opened.
|
|
1177
1135
|
var _temp = function () {
|
|
1178
|
-
if (drawer.state ===
|
|
1136
|
+
if (drawer.state === "opened") {
|
|
1179
1137
|
// Update drawer state.
|
|
1180
|
-
drawer.state =
|
|
1138
|
+
drawer.state = "closing";
|
|
1181
1139
|
|
|
1182
1140
|
// Remove focus from active element.
|
|
1183
1141
|
document.activeElement.blur();
|
|
@@ -1185,7 +1143,7 @@
|
|
|
1185
1143
|
// Run the close transition.
|
|
1186
1144
|
return Promise.resolve(closeTransition(drawer.el, config)).then(function () {
|
|
1187
1145
|
// Update the global state if mode is modal.
|
|
1188
|
-
if (drawer.mode ===
|
|
1146
|
+
if (drawer.mode === "modal") updateGlobalState(false, config);
|
|
1189
1147
|
|
|
1190
1148
|
// Set focus to the trigger element if the focus param is true.
|
|
1191
1149
|
if (focus) {
|
|
@@ -1193,10 +1151,10 @@
|
|
|
1193
1151
|
}
|
|
1194
1152
|
|
|
1195
1153
|
// Update drawer state.
|
|
1196
|
-
drawer.state =
|
|
1154
|
+
drawer.state = "closed";
|
|
1197
1155
|
|
|
1198
1156
|
// Dispatch custom closed event.
|
|
1199
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1157
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
1200
1158
|
detail: _this,
|
|
1201
1159
|
bubbles: true
|
|
1202
1160
|
}));
|
|
@@ -1219,7 +1177,7 @@
|
|
|
1219
1177
|
var drawer = getDrawer.call(_this, query);
|
|
1220
1178
|
|
|
1221
1179
|
// Open or close the drawer based on its current state.
|
|
1222
|
-
if (drawer.state ===
|
|
1180
|
+
if (drawer.state === "closed") {
|
|
1223
1181
|
return Promise.resolve(open$2.call(_this, drawer, transition, focus));
|
|
1224
1182
|
} else {
|
|
1225
1183
|
return Promise.resolve(close$2.call(_this, drawer, transition, focus));
|
|
@@ -1235,21 +1193,21 @@
|
|
|
1235
1193
|
// Get the drawer configuration.
|
|
1236
1194
|
|
|
1237
1195
|
// Add the modal class.
|
|
1238
|
-
entry.el.classList.add(entry.getSetting(
|
|
1196
|
+
entry.el.classList.add(entry.getSetting("classModal"));
|
|
1239
1197
|
|
|
1240
1198
|
// Set aria-modal attribute to true.
|
|
1241
|
-
entry.dialog.setAttribute(
|
|
1199
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1242
1200
|
|
|
1243
1201
|
// If there isn't a stored state but also has the opened state class...
|
|
1244
|
-
if (!_this2.store.get(entry.id) && entry.el.classList.contains(entry.getSetting(
|
|
1202
|
+
if (!_this2.store.get(entry.id) && entry.el.classList.contains(entry.getSetting("stateOpened"))) {
|
|
1245
1203
|
// Save the opened state in local store.
|
|
1246
|
-
_this2.store.set(entry.id,
|
|
1204
|
+
_this2.store.set(entry.id, "opened");
|
|
1247
1205
|
}
|
|
1248
1206
|
|
|
1249
1207
|
// Modal drawer defaults to closed state.
|
|
1250
1208
|
return Promise.resolve(close$2.call(_this2, entry, false, false)).then(function () {
|
|
1251
1209
|
// Dispatch custom switch event.
|
|
1252
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
1210
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
1253
1211
|
detail: _this2,
|
|
1254
1212
|
bubbles: true
|
|
1255
1213
|
}));
|
|
@@ -1265,10 +1223,10 @@
|
|
|
1265
1223
|
try {
|
|
1266
1224
|
var _this = this;
|
|
1267
1225
|
// Remove the modal class.
|
|
1268
|
-
entry.el.classList.remove(entry.getSetting(
|
|
1226
|
+
entry.el.classList.remove(entry.getSetting("classModal"));
|
|
1269
1227
|
|
|
1270
1228
|
// Remove the aria-modal attribute.
|
|
1271
|
-
entry.dialog.removeAttribute(
|
|
1229
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
1272
1230
|
|
|
1273
1231
|
// Update the global state.
|
|
1274
1232
|
updateGlobalState(false, _extends({}, _this.settings, entry.settings));
|
|
@@ -1279,7 +1237,7 @@
|
|
|
1279
1237
|
// Setup initial state.
|
|
1280
1238
|
return Promise.resolve(initialState.call(_this, entry)).then(function () {
|
|
1281
1239
|
// Dispatch custom switch event.
|
|
1282
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
1240
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
1283
1241
|
detail: _this,
|
|
1284
1242
|
bubbles: true
|
|
1285
1243
|
}));
|
|
@@ -1293,9 +1251,9 @@
|
|
|
1293
1251
|
};
|
|
1294
1252
|
function switchMode(entry) {
|
|
1295
1253
|
switch (entry.mode) {
|
|
1296
|
-
case
|
|
1254
|
+
case "inline":
|
|
1297
1255
|
return toInline.call(this, entry);
|
|
1298
|
-
case
|
|
1256
|
+
case "modal":
|
|
1299
1257
|
return toModal.call(this, entry);
|
|
1300
1258
|
default:
|
|
1301
1259
|
throw new Error("\"" + entry.mode + "\" is not a valid drawer mode.");
|
|
@@ -1338,7 +1296,7 @@
|
|
|
1338
1296
|
return this;
|
|
1339
1297
|
},
|
|
1340
1298
|
handleBreakpoint: function handleBreakpoint(event) {
|
|
1341
|
-
this.mode = event.matches ?
|
|
1299
|
+
this.mode = event.matches ? "inline" : "modal";
|
|
1342
1300
|
return this;
|
|
1343
1301
|
},
|
|
1344
1302
|
getSetting: function getSetting(key) {
|
|
@@ -1362,8 +1320,8 @@
|
|
|
1362
1320
|
set state(value) {
|
|
1363
1321
|
__state = value;
|
|
1364
1322
|
// Save 'opened' and 'closed' states to store if mode is inline.
|
|
1365
|
-
if (value ===
|
|
1366
|
-
if (this.mode ===
|
|
1323
|
+
if (value === "opened" || value === "closed") {
|
|
1324
|
+
if (this.mode === "inline") root.store.set(this.id, this.state);
|
|
1367
1325
|
}
|
|
1368
1326
|
},
|
|
1369
1327
|
get mode() {
|
|
@@ -1376,23 +1334,23 @@
|
|
|
1376
1334
|
}, methods);
|
|
1377
1335
|
|
|
1378
1336
|
// Create the state var with the initial state.
|
|
1379
|
-
var __state = el.classList.contains(entry.getSetting(
|
|
1337
|
+
var __state = el.classList.contains(entry.getSetting("stateOpened")) ? "opened" : "closed";
|
|
1380
1338
|
|
|
1381
1339
|
// Create the mode var with the initial mode.
|
|
1382
|
-
var __mode = el.classList.contains(entry.getSetting(
|
|
1340
|
+
var __mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
|
|
1383
1341
|
|
|
1384
1342
|
// Setup mode specific attributes.
|
|
1385
|
-
if (entry.mode ===
|
|
1343
|
+
if (entry.mode === "modal") {
|
|
1386
1344
|
// Set aria-modal attribute to true.
|
|
1387
|
-
entry.dialog.setAttribute(
|
|
1345
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1388
1346
|
} else {
|
|
1389
1347
|
// Remove the aria-modal attribute.
|
|
1390
|
-
entry.dialog.removeAttribute(
|
|
1348
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
1391
1349
|
}
|
|
1392
1350
|
|
|
1393
1351
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1394
|
-
if (entry.getSetting(
|
|
1395
|
-
entry.dialog.setAttribute(
|
|
1352
|
+
if (entry.getSetting("setTabindex")) {
|
|
1353
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
1396
1354
|
}
|
|
1397
1355
|
|
|
1398
1356
|
// Add entry to collection.
|
|
@@ -1421,15 +1379,14 @@
|
|
|
1421
1379
|
var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
1422
1380
|
var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
1423
1381
|
var Drawer = /*#__PURE__*/function (_Collection) {
|
|
1424
|
-
_inheritsLoose(Drawer, _Collection);
|
|
1425
1382
|
function Drawer(options) {
|
|
1426
1383
|
var _this;
|
|
1427
1384
|
_this = _Collection.call(this) || this;
|
|
1428
|
-
Object.defineProperty(
|
|
1385
|
+
Object.defineProperty(_this, _handleClick$1, {
|
|
1429
1386
|
writable: true,
|
|
1430
1387
|
value: void 0
|
|
1431
1388
|
});
|
|
1432
|
-
Object.defineProperty(
|
|
1389
|
+
Object.defineProperty(_this, _handleKeydown$2, {
|
|
1433
1390
|
writable: true,
|
|
1434
1391
|
value: void 0
|
|
1435
1392
|
});
|
|
@@ -1439,11 +1396,12 @@
|
|
|
1439
1396
|
|
|
1440
1397
|
// Setup local store for inline drawer state management.
|
|
1441
1398
|
_this.store = localStore(_this.settings.storeKey, _this.settings.store);
|
|
1442
|
-
_classPrivateFieldLooseBase(
|
|
1443
|
-
_classPrivateFieldLooseBase(
|
|
1399
|
+
_classPrivateFieldLooseBase(_this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(_this);
|
|
1400
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(_this);
|
|
1444
1401
|
if (_this.settings.autoInit) _this.init();
|
|
1445
1402
|
return _this;
|
|
1446
1403
|
}
|
|
1404
|
+
_inheritsLoose(Drawer, _Collection);
|
|
1447
1405
|
var _proto = Drawer.prototype;
|
|
1448
1406
|
_proto.init = function init(options) {
|
|
1449
1407
|
if (options === void 0) {
|
|
@@ -1485,12 +1443,12 @@
|
|
|
1485
1443
|
}
|
|
1486
1444
|
};
|
|
1487
1445
|
_proto.initEventListeners = function initEventListeners() {
|
|
1488
|
-
document.addEventListener(
|
|
1489
|
-
document.addEventListener(
|
|
1446
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1447
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1490
1448
|
};
|
|
1491
1449
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
1492
|
-
document.removeEventListener(
|
|
1493
|
-
document.removeEventListener(
|
|
1450
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1451
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1494
1452
|
};
|
|
1495
1453
|
_proto.register = function register(query) {
|
|
1496
1454
|
var els = getDrawerElements.call(this, query);
|
|
@@ -1510,48 +1468,47 @@
|
|
|
1510
1468
|
_proto.toggle = function toggle$1(id, transition, focus) {
|
|
1511
1469
|
return toggle.call(this, id, transition, focus);
|
|
1512
1470
|
};
|
|
1513
|
-
_createClass(Drawer, [{
|
|
1471
|
+
return _createClass(Drawer, [{
|
|
1514
1472
|
key: "activeModal",
|
|
1515
1473
|
get: function get() {
|
|
1516
1474
|
return this.collection.find(function (entry) {
|
|
1517
|
-
return entry.state ===
|
|
1475
|
+
return entry.state === "opened" && entry.mode === "modal";
|
|
1518
1476
|
});
|
|
1519
1477
|
}
|
|
1520
1478
|
}]);
|
|
1521
|
-
return Drawer;
|
|
1522
1479
|
}(Collection);
|
|
1523
1480
|
|
|
1524
1481
|
var defaults$1 = {
|
|
1525
1482
|
autoInit: false,
|
|
1526
1483
|
// Data attributes
|
|
1527
|
-
dataOpen:
|
|
1528
|
-
dataClose:
|
|
1529
|
-
dataReplace:
|
|
1530
|
-
dataConfig:
|
|
1484
|
+
dataOpen: "modal-open",
|
|
1485
|
+
dataClose: "modal-close",
|
|
1486
|
+
dataReplace: "modal-replace",
|
|
1487
|
+
dataConfig: "modal-config",
|
|
1531
1488
|
// Selectors
|
|
1532
|
-
selectorModal:
|
|
1533
|
-
selectorDialog:
|
|
1534
|
-
selectorRequired:
|
|
1535
|
-
selectorFocus:
|
|
1489
|
+
selectorModal: ".modal",
|
|
1490
|
+
selectorDialog: ".modal__dialog",
|
|
1491
|
+
selectorRequired: "[role=\"alertdialog\"]",
|
|
1492
|
+
selectorFocus: "[data-focus]",
|
|
1536
1493
|
selectorInert: null,
|
|
1537
|
-
selectorOverflow:
|
|
1494
|
+
selectorOverflow: "body",
|
|
1538
1495
|
// State classes
|
|
1539
|
-
stateOpened:
|
|
1540
|
-
stateOpening:
|
|
1541
|
-
stateClosing:
|
|
1542
|
-
stateClosed:
|
|
1496
|
+
stateOpened: "is-opened",
|
|
1497
|
+
stateOpening: "is-opening",
|
|
1498
|
+
stateClosing: "is-closing",
|
|
1499
|
+
stateClosed: "is-closed",
|
|
1543
1500
|
// Feature settings
|
|
1544
|
-
customEventPrefix:
|
|
1501
|
+
customEventPrefix: "modal:",
|
|
1545
1502
|
eventListeners: true,
|
|
1546
1503
|
teleport: null,
|
|
1547
|
-
teleportMethod:
|
|
1504
|
+
teleportMethod: "append",
|
|
1548
1505
|
setTabindex: true,
|
|
1549
1506
|
transition: true
|
|
1550
1507
|
};
|
|
1551
1508
|
|
|
1552
1509
|
function getModal(query) {
|
|
1553
1510
|
// Get the entry from collection.
|
|
1554
|
-
var entry = typeof query ===
|
|
1511
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
1555
1512
|
|
|
1556
1513
|
// Return entry if it was resolved, otherwise throw error.
|
|
1557
1514
|
if (entry) {
|
|
@@ -1563,12 +1520,12 @@
|
|
|
1563
1520
|
|
|
1564
1521
|
function getModalID(obj) {
|
|
1565
1522
|
// If it's a string, return the string.
|
|
1566
|
-
if (typeof obj ===
|
|
1523
|
+
if (typeof obj === "string") {
|
|
1567
1524
|
return obj;
|
|
1568
1525
|
}
|
|
1569
1526
|
|
|
1570
1527
|
// If it's an HTML element.
|
|
1571
|
-
else if (typeof obj.hasAttribute ===
|
|
1528
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
1572
1529
|
// If it's a modal open trigger, return data value.
|
|
1573
1530
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
1574
1531
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
@@ -1614,7 +1571,7 @@
|
|
|
1614
1571
|
};
|
|
1615
1572
|
} else if (!dialog) {
|
|
1616
1573
|
return {
|
|
1617
|
-
error: new Error(
|
|
1574
|
+
error: new Error("Modal is missing dialog element.")
|
|
1618
1575
|
};
|
|
1619
1576
|
} else {
|
|
1620
1577
|
return {
|
|
@@ -1624,7 +1581,7 @@
|
|
|
1624
1581
|
}
|
|
1625
1582
|
} else {
|
|
1626
1583
|
return {
|
|
1627
|
-
error: new Error(
|
|
1584
|
+
error: new Error("Could not resolve the modal ID.")
|
|
1628
1585
|
};
|
|
1629
1586
|
}
|
|
1630
1587
|
}
|
|
@@ -1667,7 +1624,7 @@
|
|
|
1667
1624
|
// Get the value of the data attribute.
|
|
1668
1625
|
var value = trigger.getAttribute("data-" + _this.settings.dataClose);
|
|
1669
1626
|
// Close all if * wildcard is passed, otherwise close a single modal.
|
|
1670
|
-
return Promise.resolve(value ===
|
|
1627
|
+
return Promise.resolve(value === "*" ? _this.closeAll() : _this.close(value));
|
|
1671
1628
|
}
|
|
1672
1629
|
|
|
1673
1630
|
// If the modal screen was clicked, close the modal.
|
|
@@ -1681,7 +1638,7 @@
|
|
|
1681
1638
|
};
|
|
1682
1639
|
function handleKeydown$1(event) {
|
|
1683
1640
|
// If escape key was pressed.
|
|
1684
|
-
if (event.key ===
|
|
1641
|
+
if (event.key === "Escape") {
|
|
1685
1642
|
// If a modal is opened and not required, close the modal.
|
|
1686
1643
|
if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
|
|
1687
1644
|
return this.close();
|
|
@@ -1710,7 +1667,7 @@
|
|
|
1710
1667
|
if (index >= 0) {
|
|
1711
1668
|
var _temp2 = function _temp2() {
|
|
1712
1669
|
// Return teleported modal if a reference has been set.
|
|
1713
|
-
if (_entry.getSetting(
|
|
1670
|
+
if (_entry.getSetting("teleport")) {
|
|
1714
1671
|
_entry.teleportReturn();
|
|
1715
1672
|
}
|
|
1716
1673
|
|
|
@@ -1727,7 +1684,7 @@
|
|
|
1727
1684
|
|
|
1728
1685
|
// If entry is in the opened state, close it.
|
|
1729
1686
|
var _temp = function () {
|
|
1730
|
-
if (close && _entry.state ===
|
|
1687
|
+
if (close && _entry.state === "opened") {
|
|
1731
1688
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
1732
1689
|
} else {
|
|
1733
1690
|
// Remove modal from stack.
|
|
@@ -1755,7 +1712,7 @@
|
|
|
1755
1712
|
}
|
|
1756
1713
|
|
|
1757
1714
|
// Dispatch custom opened event.
|
|
1758
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1715
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
1759
1716
|
detail: _this,
|
|
1760
1717
|
bubbles: true
|
|
1761
1718
|
}));
|
|
@@ -1778,9 +1735,9 @@
|
|
|
1778
1735
|
|
|
1779
1736
|
// If modal is closed.
|
|
1780
1737
|
var _temp = function () {
|
|
1781
|
-
if (modal.state ===
|
|
1738
|
+
if (modal.state === "closed") {
|
|
1782
1739
|
// Update modal state.
|
|
1783
|
-
modal.state =
|
|
1740
|
+
modal.state = "opening";
|
|
1784
1741
|
|
|
1785
1742
|
// Add modal to stack.
|
|
1786
1743
|
_this.stack.add(modal);
|
|
@@ -1788,7 +1745,7 @@
|
|
|
1788
1745
|
// Run the open transition.
|
|
1789
1746
|
return Promise.resolve(openTransition(modal.el, config)).then(function () {
|
|
1790
1747
|
// Update modal state.
|
|
1791
|
-
modal.state =
|
|
1748
|
+
modal.state = "opened";
|
|
1792
1749
|
});
|
|
1793
1750
|
}
|
|
1794
1751
|
}();
|
|
@@ -1809,9 +1766,9 @@
|
|
|
1809
1766
|
|
|
1810
1767
|
// If a modal exists and its state is opened.
|
|
1811
1768
|
var _temp = function () {
|
|
1812
|
-
if (modal && modal.state ===
|
|
1769
|
+
if (modal && modal.state === "opened") {
|
|
1813
1770
|
// Update modal state.
|
|
1814
|
-
modal.state =
|
|
1771
|
+
modal.state = "closing";
|
|
1815
1772
|
|
|
1816
1773
|
// Get the modal configuration.
|
|
1817
1774
|
var config = _extends({}, _this.settings, modal.settings);
|
|
@@ -1833,10 +1790,10 @@
|
|
|
1833
1790
|
}
|
|
1834
1791
|
|
|
1835
1792
|
// Update modal state.
|
|
1836
|
-
modal.state =
|
|
1793
|
+
modal.state = "closed";
|
|
1837
1794
|
|
|
1838
1795
|
// Dispatch custom closed event.
|
|
1839
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1796
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
1840
1797
|
detail: _this,
|
|
1841
1798
|
bubbles: true
|
|
1842
1799
|
}));
|
|
@@ -1907,7 +1864,7 @@
|
|
|
1907
1864
|
// Setup results for return.
|
|
1908
1865
|
var resultOpened, resultClosed;
|
|
1909
1866
|
var _temp = function () {
|
|
1910
|
-
if (modal.state ===
|
|
1867
|
+
if (modal.state === "opened") {
|
|
1911
1868
|
// If modal is open, close all modals except for replacement.
|
|
1912
1869
|
resultOpened = modal;
|
|
1913
1870
|
return Promise.resolve(closeAll$1.call(_this, modal.id, transition)).then(function (_closeAll$call) {
|
|
@@ -1950,16 +1907,16 @@
|
|
|
1950
1907
|
},
|
|
1951
1908
|
teleport: function teleport$1(ref, method) {
|
|
1952
1909
|
if (ref === void 0) {
|
|
1953
|
-
ref = this.getSetting(
|
|
1910
|
+
ref = this.getSetting("teleport");
|
|
1954
1911
|
}
|
|
1955
1912
|
if (method === void 0) {
|
|
1956
|
-
method = this.getSetting(
|
|
1913
|
+
method = this.getSetting("teleportMethod");
|
|
1957
1914
|
}
|
|
1958
1915
|
if (!this.returnRef) {
|
|
1959
1916
|
this.returnRef = teleport(this.el, ref, method);
|
|
1960
1917
|
return this.el;
|
|
1961
1918
|
} else {
|
|
1962
|
-
console.error(
|
|
1919
|
+
console.error("Element has already been teleported:", this.el);
|
|
1963
1920
|
return false;
|
|
1964
1921
|
}
|
|
1965
1922
|
},
|
|
@@ -1968,7 +1925,7 @@
|
|
|
1968
1925
|
this.returnRef = teleport(this.el, this.returnRef);
|
|
1969
1926
|
return this.el;
|
|
1970
1927
|
} else {
|
|
1971
|
-
console.error(
|
|
1928
|
+
console.error("No return reference found:", this.el);
|
|
1972
1929
|
return false;
|
|
1973
1930
|
}
|
|
1974
1931
|
},
|
|
@@ -1980,7 +1937,7 @@
|
|
|
1980
1937
|
// Setup the modal object.
|
|
1981
1938
|
var entry = _extends({
|
|
1982
1939
|
id: el.id,
|
|
1983
|
-
state:
|
|
1940
|
+
state: "closed",
|
|
1984
1941
|
el: el,
|
|
1985
1942
|
dialog: dialog,
|
|
1986
1943
|
returnRef: null,
|
|
@@ -1988,20 +1945,20 @@
|
|
|
1988
1945
|
}, methods);
|
|
1989
1946
|
|
|
1990
1947
|
// Set aria-modal attribute to true.
|
|
1991
|
-
entry.dialog.setAttribute(
|
|
1948
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1992
1949
|
|
|
1993
1950
|
// If a role attribute is not set, set it to "dialog" as the default.
|
|
1994
|
-
if (!entry.dialog.hasAttribute(
|
|
1995
|
-
entry.dialog.setAttribute(
|
|
1951
|
+
if (!entry.dialog.hasAttribute("role")) {
|
|
1952
|
+
entry.dialog.setAttribute("role", "dialog");
|
|
1996
1953
|
}
|
|
1997
1954
|
|
|
1998
1955
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1999
|
-
if (entry.getSetting(
|
|
2000
|
-
entry.dialog.setAttribute(
|
|
1956
|
+
if (entry.getSetting("setTabindex")) {
|
|
1957
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
2001
1958
|
}
|
|
2002
1959
|
|
|
2003
1960
|
// Teleport modal if a reference has been set.
|
|
2004
|
-
if (entry.getSetting(
|
|
1961
|
+
if (entry.getSetting("teleport")) {
|
|
2005
1962
|
entry.teleport();
|
|
2006
1963
|
}
|
|
2007
1964
|
|
|
@@ -2043,7 +2000,7 @@
|
|
|
2043
2000
|
updateIndex: function updateIndex() {
|
|
2044
2001
|
stackArray.forEach(function (entry, index) {
|
|
2045
2002
|
entry.el.style.zIndex = null;
|
|
2046
|
-
var value = getComputedStyle(entry.el)[
|
|
2003
|
+
var value = getComputedStyle(entry.el)["z-index"];
|
|
2047
2004
|
entry.el.style.zIndex = parseInt(value) + index + 1;
|
|
2048
2005
|
});
|
|
2049
2006
|
},
|
|
@@ -2054,7 +2011,7 @@
|
|
|
2054
2011
|
add: function add(entry) {
|
|
2055
2012
|
// Apply z-index styles based on stack length.
|
|
2056
2013
|
entry.el.style.zIndex = null;
|
|
2057
|
-
var value = getComputedStyle(entry.el)[
|
|
2014
|
+
var value = getComputedStyle(entry.el)["z-index"];
|
|
2058
2015
|
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
2059
2016
|
|
|
2060
2017
|
// Move back to end of stack.
|
|
@@ -2102,15 +2059,14 @@
|
|
|
2102
2059
|
var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
2103
2060
|
var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
2104
2061
|
var Modal = /*#__PURE__*/function (_Collection) {
|
|
2105
|
-
_inheritsLoose(Modal, _Collection);
|
|
2106
2062
|
function Modal(options) {
|
|
2107
2063
|
var _this;
|
|
2108
2064
|
_this = _Collection.call(this) || this;
|
|
2109
|
-
Object.defineProperty(
|
|
2065
|
+
Object.defineProperty(_this, _handleClick, {
|
|
2110
2066
|
writable: true,
|
|
2111
2067
|
value: void 0
|
|
2112
2068
|
});
|
|
2113
|
-
Object.defineProperty(
|
|
2069
|
+
Object.defineProperty(_this, _handleKeydown$1, {
|
|
2114
2070
|
writable: true,
|
|
2115
2071
|
value: void 0
|
|
2116
2072
|
});
|
|
@@ -2121,11 +2077,12 @@
|
|
|
2121
2077
|
|
|
2122
2078
|
// Setup stack module.
|
|
2123
2079
|
_this.stack = stack(_this.settings);
|
|
2124
|
-
_classPrivateFieldLooseBase(
|
|
2125
|
-
_classPrivateFieldLooseBase(
|
|
2080
|
+
_classPrivateFieldLooseBase(_this, _handleClick)[_handleClick] = handleClick$1.bind(_this);
|
|
2081
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(_this);
|
|
2126
2082
|
if (_this.settings.autoInit) _this.init();
|
|
2127
2083
|
return _this;
|
|
2128
2084
|
}
|
|
2085
|
+
_inheritsLoose(Modal, _Collection);
|
|
2129
2086
|
var _proto = Modal.prototype;
|
|
2130
2087
|
_proto.init = function init(options) {
|
|
2131
2088
|
try {
|
|
@@ -2167,12 +2124,12 @@
|
|
|
2167
2124
|
}
|
|
2168
2125
|
};
|
|
2169
2126
|
_proto.initEventListeners = function initEventListeners() {
|
|
2170
|
-
document.addEventListener(
|
|
2171
|
-
document.addEventListener(
|
|
2127
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2128
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2172
2129
|
};
|
|
2173
2130
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
2174
|
-
document.removeEventListener(
|
|
2175
|
-
document.removeEventListener(
|
|
2131
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2132
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2176
2133
|
};
|
|
2177
2134
|
_proto.register = function register(query) {
|
|
2178
2135
|
var els = getModalElements.call(this, query);
|
|
@@ -2212,26 +2169,25 @@
|
|
|
2212
2169
|
return Promise.reject(e);
|
|
2213
2170
|
}
|
|
2214
2171
|
};
|
|
2215
|
-
_createClass(Modal, [{
|
|
2172
|
+
return _createClass(Modal, [{
|
|
2216
2173
|
key: "active",
|
|
2217
2174
|
get: function get() {
|
|
2218
2175
|
return this.stack.top;
|
|
2219
2176
|
}
|
|
2220
2177
|
}]);
|
|
2221
|
-
return Modal;
|
|
2222
2178
|
}(Collection);
|
|
2223
2179
|
|
|
2224
2180
|
var defaults = {
|
|
2225
2181
|
autoInit: false,
|
|
2226
2182
|
// Selectors
|
|
2227
|
-
selectorPopover:
|
|
2228
|
-
selectorArrow:
|
|
2183
|
+
selectorPopover: ".popover",
|
|
2184
|
+
selectorArrow: ".popover__arrow",
|
|
2229
2185
|
// State classes
|
|
2230
|
-
stateActive:
|
|
2186
|
+
stateActive: "is-active",
|
|
2231
2187
|
// Feature settings
|
|
2232
2188
|
eventListeners: true,
|
|
2233
|
-
eventType:
|
|
2234
|
-
placement:
|
|
2189
|
+
eventType: "click",
|
|
2190
|
+
placement: "bottom"
|
|
2235
2191
|
};
|
|
2236
2192
|
|
|
2237
2193
|
function getConfig(el, settings) {
|
|
@@ -2240,19 +2196,19 @@
|
|
|
2240
2196
|
|
|
2241
2197
|
// Setup the config obj with default values.
|
|
2242
2198
|
var config = {
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2199
|
+
"placement": settings.placement,
|
|
2200
|
+
"event": settings.eventType,
|
|
2201
|
+
"offset": 0,
|
|
2202
|
+
"overflow-padding": 0,
|
|
2203
|
+
"flip-padding": 0,
|
|
2204
|
+
"arrow-element": settings.selectorArrow,
|
|
2205
|
+
"arrow-padding": 0
|
|
2250
2206
|
};
|
|
2251
2207
|
|
|
2252
2208
|
// Loop through config obj.
|
|
2253
2209
|
for (var prop in config) {
|
|
2254
2210
|
// Get the CSS variable property values.
|
|
2255
|
-
var prefix =
|
|
2211
|
+
var prefix = P();
|
|
2256
2212
|
var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim();
|
|
2257
2213
|
|
|
2258
2214
|
// If a value was found, replace the default in config obj.
|
|
@@ -2269,7 +2225,7 @@
|
|
|
2269
2225
|
var padding;
|
|
2270
2226
|
|
|
2271
2227
|
// Split the value by spaces if it's a string.
|
|
2272
|
-
var array = typeof value ===
|
|
2228
|
+
var array = typeof value === "string" ? value.trim().split(" ") : [value];
|
|
2273
2229
|
|
|
2274
2230
|
// Convert individual values to integers.
|
|
2275
2231
|
array.forEach(function (item, index) {
|
|
@@ -2316,32 +2272,32 @@
|
|
|
2316
2272
|
|
|
2317
2273
|
function getModifiers(options) {
|
|
2318
2274
|
return [{
|
|
2319
|
-
name:
|
|
2275
|
+
name: "offset",
|
|
2320
2276
|
options: {
|
|
2321
|
-
offset: [0, parseInt(options[
|
|
2277
|
+
offset: [0, parseInt(options["offset"], 10)]
|
|
2322
2278
|
}
|
|
2323
2279
|
}, {
|
|
2324
|
-
name:
|
|
2280
|
+
name: "preventOverflow",
|
|
2325
2281
|
options: {
|
|
2326
|
-
padding: getPadding(options[
|
|
2282
|
+
padding: getPadding(options["overflow-padding"])
|
|
2327
2283
|
}
|
|
2328
2284
|
}, {
|
|
2329
|
-
name:
|
|
2285
|
+
name: "flip",
|
|
2330
2286
|
options: {
|
|
2331
|
-
padding: getPadding(options[
|
|
2287
|
+
padding: getPadding(options["flip-padding"])
|
|
2332
2288
|
}
|
|
2333
2289
|
}, {
|
|
2334
|
-
name:
|
|
2290
|
+
name: "arrow",
|
|
2335
2291
|
options: {
|
|
2336
|
-
element: options[
|
|
2337
|
-
padding: getPadding(options[
|
|
2292
|
+
element: options["arrow-element"],
|
|
2293
|
+
padding: getPadding(options["arrow-padding"])
|
|
2338
2294
|
}
|
|
2339
2295
|
}];
|
|
2340
2296
|
}
|
|
2341
2297
|
|
|
2342
2298
|
function getPopover(query) {
|
|
2343
2299
|
// Get the entry from collection.
|
|
2344
|
-
var entry = typeof query ===
|
|
2300
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
2345
2301
|
|
|
2346
2302
|
// Return entry if it was resolved, otherwise throw error.
|
|
2347
2303
|
if (entry) {
|
|
@@ -2353,12 +2309,12 @@
|
|
|
2353
2309
|
|
|
2354
2310
|
function getPopoverID(obj) {
|
|
2355
2311
|
// If it's a string, return the string.
|
|
2356
|
-
if (typeof obj ===
|
|
2312
|
+
if (typeof obj === "string") {
|
|
2357
2313
|
return obj;
|
|
2358
2314
|
}
|
|
2359
2315
|
|
|
2360
2316
|
// If it's an HTML element.
|
|
2361
|
-
else if (typeof obj.hasAttribute ===
|
|
2317
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
2362
2318
|
// If it's a popover element, return the id.
|
|
2363
2319
|
if (obj.closest(this.settings.selectorPopover)) {
|
|
2364
2320
|
obj = obj.closest(this.settings.selectorPopover);
|
|
@@ -2366,13 +2322,13 @@
|
|
|
2366
2322
|
}
|
|
2367
2323
|
|
|
2368
2324
|
// If it's a popover trigger, return value of aria-controls.
|
|
2369
|
-
else if (obj.hasAttribute(
|
|
2370
|
-
return obj.getAttribute(
|
|
2325
|
+
else if (obj.hasAttribute("aria-controls")) {
|
|
2326
|
+
return obj.getAttribute("aria-controls");
|
|
2371
2327
|
}
|
|
2372
2328
|
|
|
2373
2329
|
// If it's a popover tooltip trigger, return the value of aria-describedby.
|
|
2374
|
-
else if (obj.hasAttribute(
|
|
2375
|
-
return obj.getAttribute(
|
|
2330
|
+
else if (obj.hasAttribute("aria-describedby")) {
|
|
2331
|
+
return obj.getAttribute("aria-describedby");
|
|
2376
2332
|
}
|
|
2377
2333
|
|
|
2378
2334
|
// Return false if no id was found.
|
|
@@ -2399,11 +2355,11 @@
|
|
|
2399
2355
|
};
|
|
2400
2356
|
} else if (!trigger) {
|
|
2401
2357
|
return {
|
|
2402
|
-
error: new Error(
|
|
2358
|
+
error: new Error("No popover trigger associated with the provided popover.")
|
|
2403
2359
|
};
|
|
2404
2360
|
} else if (!popover) {
|
|
2405
2361
|
return {
|
|
2406
|
-
error: new Error(
|
|
2362
|
+
error: new Error("No popover associated with the provided popover trigger.")
|
|
2407
2363
|
};
|
|
2408
2364
|
} else {
|
|
2409
2365
|
return {
|
|
@@ -2413,7 +2369,7 @@
|
|
|
2413
2369
|
}
|
|
2414
2370
|
} else {
|
|
2415
2371
|
return {
|
|
2416
|
-
error: new Error(
|
|
2372
|
+
error: new Error("Could not resolve the popover ID.")
|
|
2417
2373
|
};
|
|
2418
2374
|
}
|
|
2419
2375
|
}
|
|
@@ -2425,7 +2381,7 @@
|
|
|
2425
2381
|
return Promise.resolve(Promise.all(_this2.collection.map(function (popover) {
|
|
2426
2382
|
try {
|
|
2427
2383
|
var _temp2 = function () {
|
|
2428
|
-
if (popover.state ===
|
|
2384
|
+
if (popover.state === "opened") {
|
|
2429
2385
|
var _push = result.push;
|
|
2430
2386
|
return Promise.resolve(close.call(_this2, popover)).then(function (_close$call) {
|
|
2431
2387
|
_push.call(result, _close$call);
|
|
@@ -2447,25 +2403,25 @@
|
|
|
2447
2403
|
try {
|
|
2448
2404
|
var _temp = function _temp(popover) {
|
|
2449
2405
|
// If a modal exists and its state is opened.
|
|
2450
|
-
if (popover && popover.state ===
|
|
2406
|
+
if (popover && popover.state === "opened") {
|
|
2451
2407
|
// Update state class.
|
|
2452
2408
|
popover.el.classList.remove(_this.settings.stateActive);
|
|
2453
2409
|
|
|
2454
2410
|
// Update accessibility attribute(s).
|
|
2455
|
-
if (popover.trigger.hasAttribute(
|
|
2456
|
-
popover.trigger.setAttribute(
|
|
2411
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
2412
|
+
popover.trigger.setAttribute("aria-expanded", "false");
|
|
2457
2413
|
}
|
|
2458
2414
|
|
|
2459
2415
|
// Disable popper event listeners.
|
|
2460
2416
|
popover.popper.setOptions({
|
|
2461
2417
|
modifiers: [{
|
|
2462
|
-
name:
|
|
2418
|
+
name: "eventListeners",
|
|
2463
2419
|
enabled: false
|
|
2464
2420
|
}]
|
|
2465
2421
|
});
|
|
2466
2422
|
|
|
2467
2423
|
// Update popover state.
|
|
2468
|
-
popover.state =
|
|
2424
|
+
popover.state = "closed";
|
|
2469
2425
|
|
|
2470
2426
|
// Clear root trigger if popover trigger matches.
|
|
2471
2427
|
if (popover.trigger === _this.trigger) {
|
|
@@ -2485,12 +2441,12 @@
|
|
|
2485
2441
|
};
|
|
2486
2442
|
function closeCheck(popover) {
|
|
2487
2443
|
// Only run closeCheck if provided popover is currently open.
|
|
2488
|
-
if (popover.state !=
|
|
2444
|
+
if (popover.state != "opened") return;
|
|
2489
2445
|
|
|
2490
2446
|
// Needed to correctly check which element is currently being focused.
|
|
2491
2447
|
setTimeout(function () {
|
|
2492
2448
|
// Check if trigger or element are being hovered.
|
|
2493
|
-
var isHovered = popover.el.closest(
|
|
2449
|
+
var isHovered = popover.el.closest(":hover") === popover.el || popover.trigger.closest(":hover") === popover.trigger;
|
|
2494
2450
|
|
|
2495
2451
|
// Check if trigger or element are being focused.
|
|
2496
2452
|
var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
@@ -2506,7 +2462,7 @@
|
|
|
2506
2462
|
}
|
|
2507
2463
|
|
|
2508
2464
|
function handleClick(popover) {
|
|
2509
|
-
if (popover.state ===
|
|
2465
|
+
if (popover.state === "opened") {
|
|
2510
2466
|
popover.close();
|
|
2511
2467
|
} else {
|
|
2512
2468
|
this.trigger = popover.trigger;
|
|
@@ -2517,13 +2473,13 @@
|
|
|
2517
2473
|
function handleKeydown(event) {
|
|
2518
2474
|
var _this = this;
|
|
2519
2475
|
switch (event.key) {
|
|
2520
|
-
case
|
|
2476
|
+
case "Escape":
|
|
2521
2477
|
if (this.trigger) {
|
|
2522
2478
|
this.trigger.focus();
|
|
2523
2479
|
}
|
|
2524
2480
|
closeAll.call(this);
|
|
2525
2481
|
return;
|
|
2526
|
-
case
|
|
2482
|
+
case "Tab":
|
|
2527
2483
|
this.collection.forEach(function (popover) {
|
|
2528
2484
|
closeCheck.call(_this, popover);
|
|
2529
2485
|
});
|
|
@@ -2534,7 +2490,7 @@
|
|
|
2534
2490
|
}
|
|
2535
2491
|
function handleDocumentClick(popover) {
|
|
2536
2492
|
var root = this;
|
|
2537
|
-
document.addEventListener(
|
|
2493
|
+
document.addEventListener("click", function _f(event) {
|
|
2538
2494
|
// Check if a popover or its trigger was clicked.
|
|
2539
2495
|
var wasClicked = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
2540
2496
|
|
|
@@ -2542,14 +2498,14 @@
|
|
|
2542
2498
|
if (wasClicked) {
|
|
2543
2499
|
// If popover element exists and is not active...
|
|
2544
2500
|
if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
|
|
2545
|
-
this.removeEventListener(
|
|
2501
|
+
this.removeEventListener("click", _f);
|
|
2546
2502
|
}
|
|
2547
2503
|
} else {
|
|
2548
2504
|
// If popover element exists and is active...
|
|
2549
2505
|
if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
|
|
2550
2506
|
popover.close();
|
|
2551
2507
|
}
|
|
2552
|
-
this.removeEventListener(
|
|
2508
|
+
this.removeEventListener("click", _f);
|
|
2553
2509
|
}
|
|
2554
2510
|
});
|
|
2555
2511
|
}
|
|
@@ -4360,7 +4316,7 @@
|
|
|
4360
4316
|
var entry = _this.collection[index];
|
|
4361
4317
|
|
|
4362
4318
|
// If entry is in the opened state, close it.
|
|
4363
|
-
if (entry.state ===
|
|
4319
|
+
if (entry.state === "opened") {
|
|
4364
4320
|
entry.close();
|
|
4365
4321
|
}
|
|
4366
4322
|
|
|
@@ -4415,8 +4371,8 @@
|
|
|
4415
4371
|
popover.el.classList.add(_this.settings.stateActive);
|
|
4416
4372
|
|
|
4417
4373
|
// Update accessibility attribute(s).
|
|
4418
|
-
if (popover.trigger.hasAttribute(
|
|
4419
|
-
popover.trigger.setAttribute(
|
|
4374
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
4375
|
+
popover.trigger.setAttribute("aria-expanded", "true");
|
|
4420
4376
|
}
|
|
4421
4377
|
|
|
4422
4378
|
// Update popover config.
|
|
@@ -4424,9 +4380,9 @@
|
|
|
4424
4380
|
|
|
4425
4381
|
// Enable popper event listeners and set placement/modifiers.
|
|
4426
4382
|
popover.popper.setOptions({
|
|
4427
|
-
placement: popover.config[
|
|
4383
|
+
placement: popover.config["placement"],
|
|
4428
4384
|
modifiers: [{
|
|
4429
|
-
name:
|
|
4385
|
+
name: "eventListeners",
|
|
4430
4386
|
enabled: true
|
|
4431
4387
|
}].concat(getModifiers(popover.config))
|
|
4432
4388
|
});
|
|
@@ -4435,7 +4391,7 @@
|
|
|
4435
4391
|
popover.popper.update();
|
|
4436
4392
|
|
|
4437
4393
|
// Update popover state.
|
|
4438
|
-
popover.state =
|
|
4394
|
+
popover.state = "opened";
|
|
4439
4395
|
|
|
4440
4396
|
// Return the popover.
|
|
4441
4397
|
return Promise.resolve(popover);
|
|
@@ -4469,7 +4425,7 @@
|
|
|
4469
4425
|
// Setup the popover object.
|
|
4470
4426
|
var entry = _extends({
|
|
4471
4427
|
id: el.id,
|
|
4472
|
-
state:
|
|
4428
|
+
state: "closed",
|
|
4473
4429
|
el: el,
|
|
4474
4430
|
trigger: trigger,
|
|
4475
4431
|
popper: createPopper(trigger, el),
|
|
@@ -4477,8 +4433,8 @@
|
|
|
4477
4433
|
}, methods);
|
|
4478
4434
|
|
|
4479
4435
|
// Set aria-expanded to false if trigger has aria-controls attribute.
|
|
4480
|
-
if (entry.trigger.hasAttribute(
|
|
4481
|
-
entry.trigger.setAttribute(
|
|
4436
|
+
if (entry.trigger.hasAttribute("aria-controls")) {
|
|
4437
|
+
entry.trigger.setAttribute("aria-expanded", "false");
|
|
4482
4438
|
}
|
|
4483
4439
|
|
|
4484
4440
|
// Setup event listeners.
|
|
@@ -4507,18 +4463,18 @@
|
|
|
4507
4463
|
// If event listeners aren't already setup.
|
|
4508
4464
|
if (!entry.__eventListeners) {
|
|
4509
4465
|
// Add event listeners based on event type.
|
|
4510
|
-
var eventType = entry.config[
|
|
4466
|
+
var eventType = entry.config["event"];
|
|
4511
4467
|
|
|
4512
4468
|
// If the event type is hover.
|
|
4513
|
-
if (eventType ===
|
|
4469
|
+
if (eventType === "hover") {
|
|
4514
4470
|
// Setup event listeners object for hover.
|
|
4515
4471
|
entry.__eventListeners = [{
|
|
4516
|
-
el: [
|
|
4517
|
-
type: [
|
|
4472
|
+
el: ["trigger"],
|
|
4473
|
+
type: ["mouseenter", "focus"],
|
|
4518
4474
|
listener: open.bind(this, entry)
|
|
4519
4475
|
}, {
|
|
4520
|
-
el: [
|
|
4521
|
-
type: [
|
|
4476
|
+
el: ["el", "trigger"],
|
|
4477
|
+
type: ["mouseleave", "focusout"],
|
|
4522
4478
|
listener: closeCheck.bind(this, entry)
|
|
4523
4479
|
}];
|
|
4524
4480
|
|
|
@@ -4536,8 +4492,8 @@
|
|
|
4536
4492
|
else {
|
|
4537
4493
|
// Setup event listeners object for click.
|
|
4538
4494
|
entry.__eventListeners = [{
|
|
4539
|
-
el: [
|
|
4540
|
-
type: [
|
|
4495
|
+
el: ["trigger"],
|
|
4496
|
+
type: ["click"],
|
|
4541
4497
|
listener: handleClick.bind(this, entry)
|
|
4542
4498
|
}];
|
|
4543
4499
|
|
|
@@ -4558,21 +4514,21 @@
|
|
|
4558
4514
|
|
|
4559
4515
|
var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
4560
4516
|
var Popover = /*#__PURE__*/function (_Collection) {
|
|
4561
|
-
_inheritsLoose(Popover, _Collection);
|
|
4562
4517
|
function Popover(options) {
|
|
4563
4518
|
var _this;
|
|
4564
4519
|
_this = _Collection.call(this) || this;
|
|
4565
|
-
Object.defineProperty(
|
|
4520
|
+
Object.defineProperty(_this, _handleKeydown, {
|
|
4566
4521
|
writable: true,
|
|
4567
4522
|
value: void 0
|
|
4568
4523
|
});
|
|
4569
4524
|
_this.defaults = defaults;
|
|
4570
4525
|
_this.settings = _extends({}, _this.defaults, options);
|
|
4571
4526
|
_this.trigger = null;
|
|
4572
|
-
_classPrivateFieldLooseBase(
|
|
4527
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(_this);
|
|
4573
4528
|
if (_this.settings.autoInit) _this.init();
|
|
4574
4529
|
return _this;
|
|
4575
4530
|
}
|
|
4531
|
+
_inheritsLoose(Popover, _Collection);
|
|
4576
4532
|
var _proto = Popover.prototype;
|
|
4577
4533
|
_proto.init = function init(options) {
|
|
4578
4534
|
try {
|
|
@@ -4630,7 +4586,7 @@
|
|
|
4630
4586
|
}
|
|
4631
4587
|
|
|
4632
4588
|
// Add keydown global event listener.
|
|
4633
|
-
document.addEventListener(
|
|
4589
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4634
4590
|
};
|
|
4635
4591
|
_proto.destroyEventListeners = function destroyEventListeners(processCollection) {
|
|
4636
4592
|
if (processCollection === void 0) {
|
|
@@ -4644,7 +4600,7 @@
|
|
|
4644
4600
|
}
|
|
4645
4601
|
|
|
4646
4602
|
// Remove keydown global event listener.
|
|
4647
|
-
document.removeEventListener(
|
|
4603
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4648
4604
|
};
|
|
4649
4605
|
_proto.register = function register$1(query) {
|
|
4650
4606
|
var els = getPopoverElements.call(this, query);
|