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.modern.mjs
CHANGED
|
@@ -1,26 +1,19 @@
|
|
|
1
|
-
function
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var source = arguments[i];
|
|
5
|
-
for (var key in source) {
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
-
target[key] = source[key];
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
return target;
|
|
12
|
-
};
|
|
13
|
-
return _extends.apply(this, arguments);
|
|
1
|
+
function _classPrivateFieldLooseBase(e, t) {
|
|
2
|
+
if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
|
|
3
|
+
return e;
|
|
14
4
|
}
|
|
15
5
|
var id = 0;
|
|
16
|
-
function _classPrivateFieldLooseKey(
|
|
17
|
-
return "__private_" + id++ + "_" +
|
|
6
|
+
function _classPrivateFieldLooseKey(e) {
|
|
7
|
+
return "__private_" + id++ + "_" + e;
|
|
18
8
|
}
|
|
19
|
-
function
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
9
|
+
function _extends() {
|
|
10
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
11
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
12
|
+
var t = arguments[e];
|
|
13
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
14
|
+
}
|
|
15
|
+
return n;
|
|
16
|
+
}, _extends.apply(null, arguments);
|
|
24
17
|
}
|
|
25
18
|
|
|
26
19
|
var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
|
|
@@ -42,8 +35,8 @@ class Breakpoint {
|
|
|
42
35
|
set handler(func) {
|
|
43
36
|
if (this.mql) {
|
|
44
37
|
// Conditionally use removeListener() for IE11 support.
|
|
45
|
-
if (typeof this.mql.removeEventListener ===
|
|
46
|
-
this.mql.removeEventListener(
|
|
38
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
39
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
47
40
|
} else {
|
|
48
41
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
49
42
|
}
|
|
@@ -62,8 +55,8 @@ class Breakpoint {
|
|
|
62
55
|
this.mql = window.matchMedia(`(min-width: ${this.value})`);
|
|
63
56
|
|
|
64
57
|
// Conditionally use addListener() for IE11 support.
|
|
65
|
-
if (typeof this.mql.addEventListener ===
|
|
66
|
-
this.mql.addEventListener(
|
|
58
|
+
if (typeof this.mql.addEventListener === "function") {
|
|
59
|
+
this.mql.addEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
67
60
|
} else {
|
|
68
61
|
this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
69
62
|
}
|
|
@@ -77,8 +70,8 @@ class Breakpoint {
|
|
|
77
70
|
if (!this.mql) return this;
|
|
78
71
|
|
|
79
72
|
// Conditionally use removeListener() for IE11 support.
|
|
80
|
-
if (typeof this.mql.removeEventListener ===
|
|
81
|
-
this.mql.removeEventListener(
|
|
73
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
74
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
82
75
|
} else {
|
|
83
76
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
84
77
|
}
|
|
@@ -125,43 +118,18 @@ class Collection {
|
|
|
125
118
|
}
|
|
126
119
|
return this.collection;
|
|
127
120
|
}
|
|
128
|
-
get(value, key =
|
|
121
|
+
get(value, key = "id") {
|
|
129
122
|
return this.collection.find(item => {
|
|
130
123
|
return item[key] === value;
|
|
131
124
|
});
|
|
132
125
|
}
|
|
133
126
|
}
|
|
134
127
|
|
|
135
|
-
const not = {
|
|
136
|
-
inert: ':not([inert]):not([inert] *)',
|
|
137
|
-
negTabIndex: ':not([tabindex^="-"])',
|
|
138
|
-
disabled: ':not(:disabled)',
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
var e = [
|
|
142
|
-
`a[href]${not.inert}${not.negTabIndex}`,
|
|
143
|
-
`area[href]${not.inert}${not.negTabIndex}`,
|
|
144
|
-
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
145
|
-
`input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
146
|
-
`select${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
147
|
-
`textarea${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
148
|
-
`button${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
149
|
-
`details${not.inert} > summary:first-of-type${not.negTabIndex}`,
|
|
150
|
-
// Discard until Firefox supports `:has()`
|
|
151
|
-
// See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
|
|
152
|
-
// `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
|
|
153
|
-
`iframe${not.inert}${not.negTabIndex}`,
|
|
154
|
-
`audio[controls]${not.inert}${not.negTabIndex}`,
|
|
155
|
-
`video[controls]${not.inert}${not.negTabIndex}`,
|
|
156
|
-
`[contenteditable]${not.inert}${not.negTabIndex}`,
|
|
157
|
-
`[tabindex]${not.inert}${not.negTabIndex}`,
|
|
158
|
-
];
|
|
159
|
-
|
|
160
128
|
var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
|
|
161
129
|
var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
|
|
162
130
|
var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
|
|
163
131
|
class FocusTrap {
|
|
164
|
-
constructor(el = null, selectorFocus =
|
|
132
|
+
constructor(el = null, selectorFocus = "[data-focus]") {
|
|
165
133
|
Object.defineProperty(this, _focusable, {
|
|
166
134
|
writable: true,
|
|
167
135
|
value: void 0
|
|
@@ -188,11 +156,11 @@ class FocusTrap {
|
|
|
188
156
|
|
|
189
157
|
// Apply event listeners based on new focusable array length.
|
|
190
158
|
if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
|
|
191
|
-
document.removeEventListener(
|
|
192
|
-
document.addEventListener(
|
|
159
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
160
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
193
161
|
} else {
|
|
194
|
-
document.removeEventListener(
|
|
195
|
-
document.addEventListener(
|
|
162
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
163
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
196
164
|
}
|
|
197
165
|
}
|
|
198
166
|
get focusableFirst() {
|
|
@@ -220,8 +188,8 @@ class FocusTrap {
|
|
|
220
188
|
this.focusable = [];
|
|
221
189
|
|
|
222
190
|
// Remove event listeners
|
|
223
|
-
document.removeEventListener(
|
|
224
|
-
document.removeEventListener(
|
|
191
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
192
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
225
193
|
}
|
|
226
194
|
focus(el = this.el, selectorFocus = this.selectorFocus) {
|
|
227
195
|
// Query for the focus selector, otherwise return this element.
|
|
@@ -238,7 +206,8 @@ class FocusTrap {
|
|
|
238
206
|
const initScrollTop = el.scrollTop;
|
|
239
207
|
|
|
240
208
|
// Query for all the focusable elements.
|
|
241
|
-
const
|
|
209
|
+
const selector = focusableSelectors.join(",");
|
|
210
|
+
const els = el.querySelectorAll(selector);
|
|
242
211
|
|
|
243
212
|
// Loop through all focusable elements.
|
|
244
213
|
els.forEach(el => {
|
|
@@ -259,9 +228,16 @@ class FocusTrap {
|
|
|
259
228
|
return focusable;
|
|
260
229
|
}
|
|
261
230
|
}
|
|
231
|
+
|
|
232
|
+
// This has been copied over from focusable-selectors package and modified.
|
|
233
|
+
// https://github.com/KittyGiraudel/focusable-selectors
|
|
234
|
+
const notInert = ":not([inert])"; // Previously `:not([inert]):not([inert] *)`
|
|
235
|
+
const notNegTabIndex = ":not([tabindex^=\"-\"])";
|
|
236
|
+
const notDisabled = ":not(:disabled)";
|
|
237
|
+
const 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}`];
|
|
262
238
|
function handleFocusTrap(event) {
|
|
263
239
|
// Check if the click was a tab and return if not.
|
|
264
|
-
const isTab = event.key ===
|
|
240
|
+
const isTab = event.key === "Tab" || event.keyCode === 9;
|
|
265
241
|
if (!isTab) return;
|
|
266
242
|
|
|
267
243
|
// If the shift key is pressed.
|
|
@@ -283,18 +259,18 @@ function handleFocusTrap(event) {
|
|
|
283
259
|
}
|
|
284
260
|
function handleFocusLock(event) {
|
|
285
261
|
// Ignore the tab key by preventing default.
|
|
286
|
-
const isTab = event.key ===
|
|
262
|
+
const isTab = event.key === "Tab" || event.keyCode === 9;
|
|
287
263
|
if (isTab) event.preventDefault();
|
|
288
264
|
}
|
|
289
265
|
|
|
290
266
|
function getConfig$1(el, dataConfig) {
|
|
291
|
-
const string = el.getAttribute(`data-${dataConfig}`) ||
|
|
292
|
-
const json = string.replace(/'/g,
|
|
267
|
+
const string = el.getAttribute(`data-${dataConfig}`) || "";
|
|
268
|
+
const json = string.replace(/'/g, "\"");
|
|
293
269
|
return json ? JSON.parse(json) : {};
|
|
294
270
|
}
|
|
295
271
|
|
|
296
272
|
function getPrefix() {
|
|
297
|
-
return getComputedStyle(document.body).getPropertyValue(
|
|
273
|
+
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
298
274
|
}
|
|
299
275
|
|
|
300
276
|
function localStore(key, enable = true) {
|
|
@@ -336,18 +312,18 @@ function teleport(what, where, how) {
|
|
|
336
312
|
where = isComment || isElement ? where : document.querySelector(where);
|
|
337
313
|
|
|
338
314
|
// If ref is a comment, set teleport type to 'after'.
|
|
339
|
-
if (isComment) how =
|
|
315
|
+
if (isComment) how = "after";
|
|
340
316
|
|
|
341
317
|
// Must be a valid reference element and method.
|
|
342
318
|
if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
|
|
343
|
-
if (typeof where[how] !=
|
|
319
|
+
if (typeof where[how] != "function") throw new Error(`Not a valid teleport method: '${how}'`);
|
|
344
320
|
|
|
345
321
|
// Initial return ref is null.
|
|
346
322
|
let returnRef = null;
|
|
347
323
|
|
|
348
324
|
// If ref is not a comment, set a return reference comment.
|
|
349
325
|
if (!isComment) {
|
|
350
|
-
returnRef = document.createComment(
|
|
326
|
+
returnRef = document.createComment("teleported #" + what.id);
|
|
351
327
|
what.before(returnRef);
|
|
352
328
|
}
|
|
353
329
|
|
|
@@ -373,7 +349,7 @@ const openTransition = (el, settings) => {
|
|
|
373
349
|
el.classList.add(settings.stateOpening);
|
|
374
350
|
|
|
375
351
|
// Add event listener for when the transition is finished.
|
|
376
|
-
el.addEventListener(
|
|
352
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
377
353
|
// Prevent child transition bubbling from firing this event.
|
|
378
354
|
if (event.target != el) return;
|
|
379
355
|
|
|
@@ -383,7 +359,7 @@ const openTransition = (el, settings) => {
|
|
|
383
359
|
|
|
384
360
|
// Resolve the promise and remove the event listener.
|
|
385
361
|
resolve(el);
|
|
386
|
-
this.removeEventListener(
|
|
362
|
+
this.removeEventListener("transitionend", _f);
|
|
387
363
|
});
|
|
388
364
|
} else {
|
|
389
365
|
// Toggle final opened state classes and resolve the promise.
|
|
@@ -402,7 +378,7 @@ const closeTransition = (el, settings) => {
|
|
|
402
378
|
el.classList.remove(settings.stateOpened);
|
|
403
379
|
|
|
404
380
|
// Add event listener for when the transition is finished.
|
|
405
|
-
el.addEventListener(
|
|
381
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
406
382
|
// Prevent child transition bubbling from firing this event.
|
|
407
383
|
if (event.target != el) return;
|
|
408
384
|
|
|
@@ -412,7 +388,7 @@ const closeTransition = (el, settings) => {
|
|
|
412
388
|
|
|
413
389
|
// Resolve the promise and remove the event listener.
|
|
414
390
|
resolve(el);
|
|
415
|
-
this.removeEventListener(
|
|
391
|
+
this.removeEventListener("transitionend", _f);
|
|
416
392
|
});
|
|
417
393
|
} else {
|
|
418
394
|
// Toggle final closed state classes and resolve the promise.
|
|
@@ -428,9 +404,9 @@ function setOverflowHidden(state, selector) {
|
|
|
428
404
|
const els = document.querySelectorAll(selector);
|
|
429
405
|
els.forEach(el => {
|
|
430
406
|
if (state) {
|
|
431
|
-
el.style.overflow =
|
|
407
|
+
el.style.overflow = "hidden";
|
|
432
408
|
} else {
|
|
433
|
-
el.style.removeProperty(
|
|
409
|
+
el.style.removeProperty("overflow");
|
|
434
410
|
}
|
|
435
411
|
});
|
|
436
412
|
}
|
|
@@ -441,10 +417,10 @@ function setInert(state, selector) {
|
|
|
441
417
|
els.forEach(el => {
|
|
442
418
|
if (state) {
|
|
443
419
|
el.inert = true;
|
|
444
|
-
el.setAttribute(
|
|
420
|
+
el.setAttribute("aria-hidden", true);
|
|
445
421
|
} else {
|
|
446
422
|
el.inert = null;
|
|
447
|
-
el.removeAttribute(
|
|
423
|
+
el.removeAttribute("aria-hidden");
|
|
448
424
|
}
|
|
449
425
|
});
|
|
450
426
|
}
|
|
@@ -473,8 +449,8 @@ var index = {
|
|
|
473
449
|
|
|
474
450
|
var defaults$3 = {
|
|
475
451
|
autoInit: false,
|
|
476
|
-
stateAttr:
|
|
477
|
-
stateValue:
|
|
452
|
+
stateAttr: "aria-checked",
|
|
453
|
+
stateValue: "mixed"
|
|
478
454
|
};
|
|
479
455
|
|
|
480
456
|
class Checkbox {
|
|
@@ -489,10 +465,10 @@ class Checkbox {
|
|
|
489
465
|
const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
|
|
490
466
|
const mixed = document.querySelectorAll(selector);
|
|
491
467
|
this.setIndeterminate(mixed);
|
|
492
|
-
document.addEventListener(
|
|
468
|
+
document.addEventListener("click", this.__handlerClick, false);
|
|
493
469
|
}
|
|
494
470
|
destroy() {
|
|
495
|
-
document.removeEventListener(
|
|
471
|
+
document.removeEventListener("click", this.__handlerClick, false);
|
|
496
472
|
}
|
|
497
473
|
handlerClick(event) {
|
|
498
474
|
const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
|
|
@@ -528,30 +504,30 @@ class Checkbox {
|
|
|
528
504
|
var defaults$2 = {
|
|
529
505
|
autoInit: false,
|
|
530
506
|
// Data attributes
|
|
531
|
-
dataOpen:
|
|
532
|
-
dataClose:
|
|
533
|
-
dataToggle:
|
|
534
|
-
dataBreakpoint:
|
|
535
|
-
dataConfig:
|
|
507
|
+
dataOpen: "drawer-open",
|
|
508
|
+
dataClose: "drawer-close",
|
|
509
|
+
dataToggle: "drawer-toggle",
|
|
510
|
+
dataBreakpoint: "drawer-breakpoint",
|
|
511
|
+
dataConfig: "drawer-config",
|
|
536
512
|
// Selectors
|
|
537
|
-
selectorDrawer:
|
|
538
|
-
selectorDialog:
|
|
539
|
-
selectorFocus:
|
|
513
|
+
selectorDrawer: ".drawer",
|
|
514
|
+
selectorDialog: ".drawer__dialog",
|
|
515
|
+
selectorFocus: "[data-focus]",
|
|
540
516
|
selectorInert: null,
|
|
541
|
-
selectorOverflow:
|
|
517
|
+
selectorOverflow: "body",
|
|
542
518
|
// State classes
|
|
543
|
-
stateOpened:
|
|
544
|
-
stateOpening:
|
|
545
|
-
stateClosing:
|
|
546
|
-
stateClosed:
|
|
519
|
+
stateOpened: "is-opened",
|
|
520
|
+
stateOpening: "is-opening",
|
|
521
|
+
stateClosing: "is-closing",
|
|
522
|
+
stateClosed: "is-closed",
|
|
547
523
|
// Classes
|
|
548
|
-
classModal:
|
|
524
|
+
classModal: "drawer_modal",
|
|
549
525
|
// Feature toggles
|
|
550
526
|
breakpoints: null,
|
|
551
|
-
customEventPrefix:
|
|
527
|
+
customEventPrefix: "drawer:",
|
|
552
528
|
eventListeners: true,
|
|
553
529
|
store: true,
|
|
554
|
-
storeKey:
|
|
530
|
+
storeKey: "VB:DrawerState",
|
|
555
531
|
setTabindex: true,
|
|
556
532
|
transition: true
|
|
557
533
|
};
|
|
@@ -569,7 +545,7 @@ function handleClick$2(event) {
|
|
|
569
545
|
|
|
570
546
|
// If it's a toggle trigger...
|
|
571
547
|
if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
|
|
572
|
-
const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(
|
|
548
|
+
const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ");
|
|
573
549
|
selectors.forEach(selector => {
|
|
574
550
|
// Get the entry from collection using the attribute value.
|
|
575
551
|
const entry = this.get(selector);
|
|
@@ -582,7 +558,7 @@ function handleClick$2(event) {
|
|
|
582
558
|
|
|
583
559
|
// If it's a open trigger...
|
|
584
560
|
if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
|
|
585
|
-
const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(
|
|
561
|
+
const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ");
|
|
586
562
|
selectors.forEach(selector => {
|
|
587
563
|
// Get the entry from collection using the attribute value.
|
|
588
564
|
const entry = this.get(selector);
|
|
@@ -595,7 +571,7 @@ function handleClick$2(event) {
|
|
|
595
571
|
|
|
596
572
|
// If it's a close trigger...
|
|
597
573
|
if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
|
|
598
|
-
const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(
|
|
574
|
+
const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ");
|
|
599
575
|
selectors.forEach(selector => {
|
|
600
576
|
if (selector) {
|
|
601
577
|
// Get the entry from collection using the attribute value.
|
|
@@ -622,7 +598,7 @@ function handleClick$2(event) {
|
|
|
622
598
|
}
|
|
623
599
|
}
|
|
624
600
|
function handleKeydown$2(event) {
|
|
625
|
-
if (event.key ===
|
|
601
|
+
if (event.key === "Escape") {
|
|
626
602
|
const modal = this.activeModal;
|
|
627
603
|
if (modal) this.close(modal);
|
|
628
604
|
}
|
|
@@ -641,7 +617,7 @@ async function deregister$2(obj, close = true) {
|
|
|
641
617
|
const entry = this.collection[index];
|
|
642
618
|
|
|
643
619
|
// If entry is in the opened state.
|
|
644
|
-
if (close && entry.state ===
|
|
620
|
+
if (close && entry.state === "opened") {
|
|
645
621
|
// Close the drawer.
|
|
646
622
|
await entry.close(false);
|
|
647
623
|
}
|
|
@@ -665,12 +641,12 @@ async function deregister$2(obj, close = true) {
|
|
|
665
641
|
return this.collection;
|
|
666
642
|
}
|
|
667
643
|
|
|
668
|
-
function
|
|
644
|
+
function P() {
|
|
669
645
|
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
670
646
|
}
|
|
671
647
|
|
|
672
648
|
function getBreakpoint(drawer) {
|
|
673
|
-
const prefix =
|
|
649
|
+
const prefix = P();
|
|
674
650
|
const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
|
|
675
651
|
if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
|
|
676
652
|
return this.settings.breakpoints[bp];
|
|
@@ -683,7 +659,7 @@ function getBreakpoint(drawer) {
|
|
|
683
659
|
|
|
684
660
|
function getDrawer(query) {
|
|
685
661
|
// Get the entry from collection.
|
|
686
|
-
const entry = typeof query ===
|
|
662
|
+
const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
687
663
|
|
|
688
664
|
// Return entry if it was resolved, otherwise throw error.
|
|
689
665
|
if (entry) {
|
|
@@ -695,12 +671,12 @@ function getDrawer(query) {
|
|
|
695
671
|
|
|
696
672
|
function getDrawerID(obj) {
|
|
697
673
|
// If it's a string, return the string.
|
|
698
|
-
if (typeof obj ===
|
|
674
|
+
if (typeof obj === "string") {
|
|
699
675
|
return obj;
|
|
700
676
|
}
|
|
701
677
|
|
|
702
678
|
// If it's an HTML element.
|
|
703
|
-
else if (typeof obj.hasAttribute ===
|
|
679
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
704
680
|
// If it's a drawer open trigger, return data value.
|
|
705
681
|
if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
|
|
706
682
|
return obj.getAttribute(`data-${this.settings.dataOpen}`);
|
|
@@ -746,7 +722,7 @@ function getDrawerElements(query) {
|
|
|
746
722
|
};
|
|
747
723
|
} else if (!dialog) {
|
|
748
724
|
return {
|
|
749
|
-
error: new Error(
|
|
725
|
+
error: new Error("Drawer is missing dialog element.")
|
|
750
726
|
};
|
|
751
727
|
} else {
|
|
752
728
|
return {
|
|
@@ -756,7 +732,7 @@ function getDrawerElements(query) {
|
|
|
756
732
|
}
|
|
757
733
|
} else {
|
|
758
734
|
return {
|
|
759
|
-
error: new Error(
|
|
735
|
+
error: new Error("Could not resolve the drawer ID.")
|
|
760
736
|
};
|
|
761
737
|
}
|
|
762
738
|
}
|
|
@@ -768,14 +744,14 @@ async function initialState(entry) {
|
|
|
768
744
|
// 3. Else, initialize default state.
|
|
769
745
|
if (this.store.get(entry.id)) {
|
|
770
746
|
// Restore drawers to saved inline state.
|
|
771
|
-
if (this.store.get(entry.id) ===
|
|
747
|
+
if (this.store.get(entry.id) === "opened") {
|
|
772
748
|
await entry.open(false, false);
|
|
773
749
|
} else {
|
|
774
750
|
await entry.close(false, false);
|
|
775
751
|
}
|
|
776
752
|
} else if (entry.el.classList.contains(this.settings.stateOpened)) {
|
|
777
753
|
// Update drawer state.
|
|
778
|
-
entry.state =
|
|
754
|
+
entry.state = "opened";
|
|
779
755
|
} else {
|
|
780
756
|
// Remove transition state classes.
|
|
781
757
|
entry.el.classList.remove(this.settings.stateOpening);
|
|
@@ -787,9 +763,9 @@ async function initialState(entry) {
|
|
|
787
763
|
|
|
788
764
|
function updateFocusState$1(entry) {
|
|
789
765
|
// Check if there's an active modal
|
|
790
|
-
if (entry.state ===
|
|
766
|
+
if (entry.state === "opened") {
|
|
791
767
|
// Mount the focus trap on the opened drawer.
|
|
792
|
-
if (entry.mode ===
|
|
768
|
+
if (entry.mode === "modal") {
|
|
793
769
|
this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
|
|
794
770
|
} else {
|
|
795
771
|
this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
|
|
@@ -815,18 +791,18 @@ async function open$2(query, transition, focus = true) {
|
|
|
815
791
|
if (transition !== undefined) config.transition = transition;
|
|
816
792
|
|
|
817
793
|
// If drawer is closed.
|
|
818
|
-
if (drawer.state ===
|
|
794
|
+
if (drawer.state === "closed") {
|
|
819
795
|
// Update drawer state.
|
|
820
|
-
drawer.state =
|
|
796
|
+
drawer.state = "opening";
|
|
821
797
|
|
|
822
798
|
// Run the open transition.
|
|
823
799
|
await openTransition(drawer.el, config);
|
|
824
800
|
|
|
825
801
|
// Update the global state if mode is modal.
|
|
826
|
-
if (drawer.mode ===
|
|
802
|
+
if (drawer.mode === "modal") updateGlobalState(true, config);
|
|
827
803
|
|
|
828
804
|
// Update drawer state.
|
|
829
|
-
drawer.state =
|
|
805
|
+
drawer.state = "opened";
|
|
830
806
|
}
|
|
831
807
|
|
|
832
808
|
// Set focus to the drawer element if the focus param is true.
|
|
@@ -835,7 +811,7 @@ async function open$2(query, transition, focus = true) {
|
|
|
835
811
|
}
|
|
836
812
|
|
|
837
813
|
// Dispatch custom opened event.
|
|
838
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
814
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
839
815
|
detail: this,
|
|
840
816
|
bubbles: true
|
|
841
817
|
}));
|
|
@@ -855,9 +831,9 @@ async function close$2(query, transition, focus = true) {
|
|
|
855
831
|
if (transition !== undefined) config.transition = transition;
|
|
856
832
|
|
|
857
833
|
// If drawer is opened.
|
|
858
|
-
if (drawer.state ===
|
|
834
|
+
if (drawer.state === "opened") {
|
|
859
835
|
// Update drawer state.
|
|
860
|
-
drawer.state =
|
|
836
|
+
drawer.state = "closing";
|
|
861
837
|
|
|
862
838
|
// Remove focus from active element.
|
|
863
839
|
document.activeElement.blur();
|
|
@@ -866,7 +842,7 @@ async function close$2(query, transition, focus = true) {
|
|
|
866
842
|
await closeTransition(drawer.el, config);
|
|
867
843
|
|
|
868
844
|
// Update the global state if mode is modal.
|
|
869
|
-
if (drawer.mode ===
|
|
845
|
+
if (drawer.mode === "modal") updateGlobalState(false, config);
|
|
870
846
|
|
|
871
847
|
// Set focus to the trigger element if the focus param is true.
|
|
872
848
|
if (focus) {
|
|
@@ -874,10 +850,10 @@ async function close$2(query, transition, focus = true) {
|
|
|
874
850
|
}
|
|
875
851
|
|
|
876
852
|
// Update drawer state.
|
|
877
|
-
drawer.state =
|
|
853
|
+
drawer.state = "closed";
|
|
878
854
|
|
|
879
855
|
// Dispatch custom closed event.
|
|
880
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
856
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
881
857
|
detail: this,
|
|
882
858
|
bubbles: true
|
|
883
859
|
}));
|
|
@@ -892,7 +868,7 @@ async function toggle(query, transition, focus) {
|
|
|
892
868
|
const drawer = getDrawer.call(this, query);
|
|
893
869
|
|
|
894
870
|
// Open or close the drawer based on its current state.
|
|
895
|
-
if (drawer.state ===
|
|
871
|
+
if (drawer.state === "closed") {
|
|
896
872
|
return open$2.call(this, drawer, transition, focus);
|
|
897
873
|
} else {
|
|
898
874
|
return close$2.call(this, drawer, transition, focus);
|
|
@@ -901,9 +877,9 @@ async function toggle(query, transition, focus) {
|
|
|
901
877
|
|
|
902
878
|
function switchMode(entry) {
|
|
903
879
|
switch (entry.mode) {
|
|
904
|
-
case
|
|
880
|
+
case "inline":
|
|
905
881
|
return toInline.call(this, entry);
|
|
906
|
-
case
|
|
882
|
+
case "modal":
|
|
907
883
|
return toModal.call(this, entry);
|
|
908
884
|
default:
|
|
909
885
|
throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
|
|
@@ -911,10 +887,10 @@ function switchMode(entry) {
|
|
|
911
887
|
}
|
|
912
888
|
async function toInline(entry) {
|
|
913
889
|
// Remove the modal class.
|
|
914
|
-
entry.el.classList.remove(entry.getSetting(
|
|
890
|
+
entry.el.classList.remove(entry.getSetting("classModal"));
|
|
915
891
|
|
|
916
892
|
// Remove the aria-modal attribute.
|
|
917
|
-
entry.dialog.removeAttribute(
|
|
893
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
918
894
|
|
|
919
895
|
// Update the global state.
|
|
920
896
|
updateGlobalState(false, _extends({}, this.settings, entry.settings));
|
|
@@ -926,7 +902,7 @@ async function toInline(entry) {
|
|
|
926
902
|
await initialState.call(this, entry);
|
|
927
903
|
|
|
928
904
|
// Dispatch custom switch event.
|
|
929
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
905
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
930
906
|
detail: this,
|
|
931
907
|
bubbles: true
|
|
932
908
|
}));
|
|
@@ -938,22 +914,22 @@ async function toModal(entry) {
|
|
|
938
914
|
// Get the drawer configuration.
|
|
939
915
|
|
|
940
916
|
// Add the modal class.
|
|
941
|
-
entry.el.classList.add(entry.getSetting(
|
|
917
|
+
entry.el.classList.add(entry.getSetting("classModal"));
|
|
942
918
|
|
|
943
919
|
// Set aria-modal attribute to true.
|
|
944
|
-
entry.dialog.setAttribute(
|
|
920
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
945
921
|
|
|
946
922
|
// If there isn't a stored state but also has the opened state class...
|
|
947
|
-
if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting(
|
|
923
|
+
if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting("stateOpened"))) {
|
|
948
924
|
// Save the opened state in local store.
|
|
949
|
-
this.store.set(entry.id,
|
|
925
|
+
this.store.set(entry.id, "opened");
|
|
950
926
|
}
|
|
951
927
|
|
|
952
928
|
// Modal drawer defaults to closed state.
|
|
953
929
|
await close$2.call(this, entry, false, false);
|
|
954
930
|
|
|
955
931
|
// Dispatch custom switch event.
|
|
956
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
932
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
957
933
|
detail: this,
|
|
958
934
|
bubbles: true
|
|
959
935
|
}));
|
|
@@ -997,7 +973,7 @@ async function register$2(el, dialog) {
|
|
|
997
973
|
return this;
|
|
998
974
|
},
|
|
999
975
|
handleBreakpoint(event) {
|
|
1000
|
-
this.mode = event.matches ?
|
|
976
|
+
this.mode = event.matches ? "inline" : "modal";
|
|
1001
977
|
return this;
|
|
1002
978
|
},
|
|
1003
979
|
getSetting(key) {
|
|
@@ -1021,8 +997,8 @@ async function register$2(el, dialog) {
|
|
|
1021
997
|
set state(value) {
|
|
1022
998
|
__state = value;
|
|
1023
999
|
// Save 'opened' and 'closed' states to store if mode is inline.
|
|
1024
|
-
if (value ===
|
|
1025
|
-
if (this.mode ===
|
|
1000
|
+
if (value === "opened" || value === "closed") {
|
|
1001
|
+
if (this.mode === "inline") root.store.set(this.id, this.state);
|
|
1026
1002
|
}
|
|
1027
1003
|
},
|
|
1028
1004
|
get mode() {
|
|
@@ -1035,23 +1011,23 @@ async function register$2(el, dialog) {
|
|
|
1035
1011
|
}, methods);
|
|
1036
1012
|
|
|
1037
1013
|
// Create the state var with the initial state.
|
|
1038
|
-
let __state = el.classList.contains(entry.getSetting(
|
|
1014
|
+
let __state = el.classList.contains(entry.getSetting("stateOpened")) ? "opened" : "closed";
|
|
1039
1015
|
|
|
1040
1016
|
// Create the mode var with the initial mode.
|
|
1041
|
-
let __mode = el.classList.contains(entry.getSetting(
|
|
1017
|
+
let __mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
|
|
1042
1018
|
|
|
1043
1019
|
// Setup mode specific attributes.
|
|
1044
|
-
if (entry.mode ===
|
|
1020
|
+
if (entry.mode === "modal") {
|
|
1045
1021
|
// Set aria-modal attribute to true.
|
|
1046
|
-
entry.dialog.setAttribute(
|
|
1022
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1047
1023
|
} else {
|
|
1048
1024
|
// Remove the aria-modal attribute.
|
|
1049
|
-
entry.dialog.removeAttribute(
|
|
1025
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
1050
1026
|
}
|
|
1051
1027
|
|
|
1052
1028
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1053
|
-
if (entry.getSetting(
|
|
1054
|
-
entry.dialog.setAttribute(
|
|
1029
|
+
if (entry.getSetting("setTabindex")) {
|
|
1030
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
1055
1031
|
}
|
|
1056
1032
|
|
|
1057
1033
|
// Add entry to collection.
|
|
@@ -1095,7 +1071,7 @@ class Drawer extends Collection {
|
|
|
1095
1071
|
}
|
|
1096
1072
|
get activeModal() {
|
|
1097
1073
|
return this.collection.find(entry => {
|
|
1098
|
-
return entry.state ===
|
|
1074
|
+
return entry.state === "opened" && entry.mode === "modal";
|
|
1099
1075
|
});
|
|
1100
1076
|
}
|
|
1101
1077
|
async init(options = null) {
|
|
@@ -1125,12 +1101,12 @@ class Drawer extends Collection {
|
|
|
1125
1101
|
return this;
|
|
1126
1102
|
}
|
|
1127
1103
|
initEventListeners() {
|
|
1128
|
-
document.addEventListener(
|
|
1129
|
-
document.addEventListener(
|
|
1104
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1105
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1130
1106
|
}
|
|
1131
1107
|
destroyEventListeners() {
|
|
1132
|
-
document.removeEventListener(
|
|
1133
|
-
document.removeEventListener(
|
|
1108
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1109
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1134
1110
|
}
|
|
1135
1111
|
register(query) {
|
|
1136
1112
|
const els = getDrawerElements.call(this, query);
|
|
@@ -1155,34 +1131,34 @@ class Drawer extends Collection {
|
|
|
1155
1131
|
var defaults$1 = {
|
|
1156
1132
|
autoInit: false,
|
|
1157
1133
|
// Data attributes
|
|
1158
|
-
dataOpen:
|
|
1159
|
-
dataClose:
|
|
1160
|
-
dataReplace:
|
|
1161
|
-
dataConfig:
|
|
1134
|
+
dataOpen: "modal-open",
|
|
1135
|
+
dataClose: "modal-close",
|
|
1136
|
+
dataReplace: "modal-replace",
|
|
1137
|
+
dataConfig: "modal-config",
|
|
1162
1138
|
// Selectors
|
|
1163
|
-
selectorModal:
|
|
1164
|
-
selectorDialog:
|
|
1165
|
-
selectorRequired:
|
|
1166
|
-
selectorFocus:
|
|
1139
|
+
selectorModal: ".modal",
|
|
1140
|
+
selectorDialog: ".modal__dialog",
|
|
1141
|
+
selectorRequired: "[role=\"alertdialog\"]",
|
|
1142
|
+
selectorFocus: "[data-focus]",
|
|
1167
1143
|
selectorInert: null,
|
|
1168
|
-
selectorOverflow:
|
|
1144
|
+
selectorOverflow: "body",
|
|
1169
1145
|
// State classes
|
|
1170
|
-
stateOpened:
|
|
1171
|
-
stateOpening:
|
|
1172
|
-
stateClosing:
|
|
1173
|
-
stateClosed:
|
|
1146
|
+
stateOpened: "is-opened",
|
|
1147
|
+
stateOpening: "is-opening",
|
|
1148
|
+
stateClosing: "is-closing",
|
|
1149
|
+
stateClosed: "is-closed",
|
|
1174
1150
|
// Feature settings
|
|
1175
|
-
customEventPrefix:
|
|
1151
|
+
customEventPrefix: "modal:",
|
|
1176
1152
|
eventListeners: true,
|
|
1177
1153
|
teleport: null,
|
|
1178
|
-
teleportMethod:
|
|
1154
|
+
teleportMethod: "append",
|
|
1179
1155
|
setTabindex: true,
|
|
1180
1156
|
transition: true
|
|
1181
1157
|
};
|
|
1182
1158
|
|
|
1183
1159
|
function getModal(query) {
|
|
1184
1160
|
// Get the entry from collection.
|
|
1185
|
-
const entry = typeof query ===
|
|
1161
|
+
const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
1186
1162
|
|
|
1187
1163
|
// Return entry if it was resolved, otherwise throw error.
|
|
1188
1164
|
if (entry) {
|
|
@@ -1194,12 +1170,12 @@ function getModal(query) {
|
|
|
1194
1170
|
|
|
1195
1171
|
function getModalID(obj) {
|
|
1196
1172
|
// If it's a string, return the string.
|
|
1197
|
-
if (typeof obj ===
|
|
1173
|
+
if (typeof obj === "string") {
|
|
1198
1174
|
return obj;
|
|
1199
1175
|
}
|
|
1200
1176
|
|
|
1201
1177
|
// If it's an HTML element.
|
|
1202
|
-
else if (typeof obj.hasAttribute ===
|
|
1178
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
1203
1179
|
// If it's a modal open trigger, return data value.
|
|
1204
1180
|
if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
|
|
1205
1181
|
return obj.getAttribute(`data-${this.settings.dataOpen}`);
|
|
@@ -1245,7 +1221,7 @@ function getModalElements(query) {
|
|
|
1245
1221
|
};
|
|
1246
1222
|
} else if (!dialog) {
|
|
1247
1223
|
return {
|
|
1248
|
-
error: new Error(
|
|
1224
|
+
error: new Error("Modal is missing dialog element.")
|
|
1249
1225
|
};
|
|
1250
1226
|
} else {
|
|
1251
1227
|
return {
|
|
@@ -1255,7 +1231,7 @@ function getModalElements(query) {
|
|
|
1255
1231
|
}
|
|
1256
1232
|
} else {
|
|
1257
1233
|
return {
|
|
1258
|
-
error: new Error(
|
|
1234
|
+
error: new Error("Could not resolve the modal ID.")
|
|
1259
1235
|
};
|
|
1260
1236
|
}
|
|
1261
1237
|
}
|
|
@@ -1296,7 +1272,7 @@ async function handleClick$1(event) {
|
|
|
1296
1272
|
// Get the value of the data attribute.
|
|
1297
1273
|
const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
|
|
1298
1274
|
// Close all if * wildcard is passed, otherwise close a single modal.
|
|
1299
|
-
return value ===
|
|
1275
|
+
return value === "*" ? this.closeAll() : this.close(value);
|
|
1300
1276
|
}
|
|
1301
1277
|
|
|
1302
1278
|
// If the modal screen was clicked, close the modal.
|
|
@@ -1306,7 +1282,7 @@ async function handleClick$1(event) {
|
|
|
1306
1282
|
}
|
|
1307
1283
|
function handleKeydown$1(event) {
|
|
1308
1284
|
// If escape key was pressed.
|
|
1309
|
-
if (event.key ===
|
|
1285
|
+
if (event.key === "Escape") {
|
|
1310
1286
|
// If a modal is opened and not required, close the modal.
|
|
1311
1287
|
if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
|
|
1312
1288
|
return this.close();
|
|
@@ -1327,7 +1303,7 @@ async function deregister$1(obj, close = true) {
|
|
|
1327
1303
|
const entry = this.collection[index];
|
|
1328
1304
|
|
|
1329
1305
|
// If entry is in the opened state, close it.
|
|
1330
|
-
if (close && entry.state ===
|
|
1306
|
+
if (close && entry.state === "opened") {
|
|
1331
1307
|
await entry.close(false);
|
|
1332
1308
|
} else {
|
|
1333
1309
|
// Remove modal from stack.
|
|
@@ -1335,7 +1311,7 @@ async function deregister$1(obj, close = true) {
|
|
|
1335
1311
|
}
|
|
1336
1312
|
|
|
1337
1313
|
// Return teleported modal if a reference has been set.
|
|
1338
|
-
if (entry.getSetting(
|
|
1314
|
+
if (entry.getSetting("teleport")) {
|
|
1339
1315
|
entry.teleportReturn();
|
|
1340
1316
|
}
|
|
1341
1317
|
|
|
@@ -1366,9 +1342,9 @@ async function open$1(query, transition, focus = true) {
|
|
|
1366
1342
|
this.stack.moveToTop(modal);
|
|
1367
1343
|
|
|
1368
1344
|
// If modal is closed.
|
|
1369
|
-
if (modal.state ===
|
|
1345
|
+
if (modal.state === "closed") {
|
|
1370
1346
|
// Update modal state.
|
|
1371
|
-
modal.state =
|
|
1347
|
+
modal.state = "opening";
|
|
1372
1348
|
|
|
1373
1349
|
// Add modal to stack.
|
|
1374
1350
|
this.stack.add(modal);
|
|
@@ -1377,7 +1353,7 @@ async function open$1(query, transition, focus = true) {
|
|
|
1377
1353
|
await openTransition(modal.el, config);
|
|
1378
1354
|
|
|
1379
1355
|
// Update modal state.
|
|
1380
|
-
modal.state =
|
|
1356
|
+
modal.state = "opened";
|
|
1381
1357
|
}
|
|
1382
1358
|
|
|
1383
1359
|
// Update focus if the focus param is true.
|
|
@@ -1386,7 +1362,7 @@ async function open$1(query, transition, focus = true) {
|
|
|
1386
1362
|
}
|
|
1387
1363
|
|
|
1388
1364
|
// Dispatch custom opened event.
|
|
1389
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1365
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
1390
1366
|
detail: this,
|
|
1391
1367
|
bubbles: true
|
|
1392
1368
|
}));
|
|
@@ -1400,9 +1376,9 @@ async function close$1(query, transition, focus = true) {
|
|
|
1400
1376
|
const modal = query ? getModal.call(this, query) : this.active;
|
|
1401
1377
|
|
|
1402
1378
|
// If a modal exists and its state is opened.
|
|
1403
|
-
if (modal && modal.state ===
|
|
1379
|
+
if (modal && modal.state === "opened") {
|
|
1404
1380
|
// Update modal state.
|
|
1405
|
-
modal.state =
|
|
1381
|
+
modal.state = "closing";
|
|
1406
1382
|
|
|
1407
1383
|
// Get the modal configuration.
|
|
1408
1384
|
const config = _extends({}, this.settings, modal.settings);
|
|
@@ -1425,10 +1401,10 @@ async function close$1(query, transition, focus = true) {
|
|
|
1425
1401
|
}
|
|
1426
1402
|
|
|
1427
1403
|
// Update modal state.
|
|
1428
|
-
modal.state =
|
|
1404
|
+
modal.state = "closed";
|
|
1429
1405
|
|
|
1430
1406
|
// Dispatch custom closed event.
|
|
1431
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1407
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
1432
1408
|
detail: this,
|
|
1433
1409
|
bubbles: true
|
|
1434
1410
|
}));
|
|
@@ -1457,7 +1433,7 @@ async function replace(query, transition, focus = true) {
|
|
|
1457
1433
|
|
|
1458
1434
|
// Setup results for return.
|
|
1459
1435
|
let resultOpened, resultClosed;
|
|
1460
|
-
if (modal.state ===
|
|
1436
|
+
if (modal.state === "opened") {
|
|
1461
1437
|
// If modal is open, close all modals except for replacement.
|
|
1462
1438
|
resultOpened = modal;
|
|
1463
1439
|
resultClosed = await closeAll$1.call(this, modal.id, transition);
|
|
@@ -1501,12 +1477,12 @@ async function register$1(el, dialog) {
|
|
|
1501
1477
|
deregister() {
|
|
1502
1478
|
return deregister$1.call(root, this);
|
|
1503
1479
|
},
|
|
1504
|
-
teleport(ref = this.getSetting(
|
|
1480
|
+
teleport(ref = this.getSetting("teleport"), method = this.getSetting("teleportMethod")) {
|
|
1505
1481
|
if (!this.returnRef) {
|
|
1506
1482
|
this.returnRef = teleport(this.el, ref, method);
|
|
1507
1483
|
return this.el;
|
|
1508
1484
|
} else {
|
|
1509
|
-
console.error(
|
|
1485
|
+
console.error("Element has already been teleported:", this.el);
|
|
1510
1486
|
return false;
|
|
1511
1487
|
}
|
|
1512
1488
|
},
|
|
@@ -1515,7 +1491,7 @@ async function register$1(el, dialog) {
|
|
|
1515
1491
|
this.returnRef = teleport(this.el, this.returnRef);
|
|
1516
1492
|
return this.el;
|
|
1517
1493
|
} else {
|
|
1518
|
-
console.error(
|
|
1494
|
+
console.error("No return reference found:", this.el);
|
|
1519
1495
|
return false;
|
|
1520
1496
|
}
|
|
1521
1497
|
},
|
|
@@ -1527,7 +1503,7 @@ async function register$1(el, dialog) {
|
|
|
1527
1503
|
// Setup the modal object.
|
|
1528
1504
|
const entry = _extends({
|
|
1529
1505
|
id: el.id,
|
|
1530
|
-
state:
|
|
1506
|
+
state: "closed",
|
|
1531
1507
|
el: el,
|
|
1532
1508
|
dialog: dialog,
|
|
1533
1509
|
returnRef: null,
|
|
@@ -1535,20 +1511,20 @@ async function register$1(el, dialog) {
|
|
|
1535
1511
|
}, methods);
|
|
1536
1512
|
|
|
1537
1513
|
// Set aria-modal attribute to true.
|
|
1538
|
-
entry.dialog.setAttribute(
|
|
1514
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1539
1515
|
|
|
1540
1516
|
// If a role attribute is not set, set it to "dialog" as the default.
|
|
1541
|
-
if (!entry.dialog.hasAttribute(
|
|
1542
|
-
entry.dialog.setAttribute(
|
|
1517
|
+
if (!entry.dialog.hasAttribute("role")) {
|
|
1518
|
+
entry.dialog.setAttribute("role", "dialog");
|
|
1543
1519
|
}
|
|
1544
1520
|
|
|
1545
1521
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1546
|
-
if (entry.getSetting(
|
|
1547
|
-
entry.dialog.setAttribute(
|
|
1522
|
+
if (entry.getSetting("setTabindex")) {
|
|
1523
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
1548
1524
|
}
|
|
1549
1525
|
|
|
1550
1526
|
// Teleport modal if a reference has been set.
|
|
1551
|
-
if (entry.getSetting(
|
|
1527
|
+
if (entry.getSetting("teleport")) {
|
|
1552
1528
|
entry.teleport();
|
|
1553
1529
|
}
|
|
1554
1530
|
|
|
@@ -1583,7 +1559,7 @@ function stack(settings) {
|
|
|
1583
1559
|
updateIndex() {
|
|
1584
1560
|
stackArray.forEach((entry, index) => {
|
|
1585
1561
|
entry.el.style.zIndex = null;
|
|
1586
|
-
const value = getComputedStyle(entry.el)[
|
|
1562
|
+
const value = getComputedStyle(entry.el)["z-index"];
|
|
1587
1563
|
entry.el.style.zIndex = parseInt(value) + index + 1;
|
|
1588
1564
|
});
|
|
1589
1565
|
},
|
|
@@ -1594,7 +1570,7 @@ function stack(settings) {
|
|
|
1594
1570
|
add(entry) {
|
|
1595
1571
|
// Apply z-index styles based on stack length.
|
|
1596
1572
|
entry.el.style.zIndex = null;
|
|
1597
|
-
const value = getComputedStyle(entry.el)[
|
|
1573
|
+
const value = getComputedStyle(entry.el)["z-index"];
|
|
1598
1574
|
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
1599
1575
|
|
|
1600
1576
|
// Move back to end of stack.
|
|
@@ -1696,12 +1672,12 @@ class Modal extends Collection {
|
|
|
1696
1672
|
return this;
|
|
1697
1673
|
}
|
|
1698
1674
|
initEventListeners() {
|
|
1699
|
-
document.addEventListener(
|
|
1700
|
-
document.addEventListener(
|
|
1675
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1676
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
1701
1677
|
}
|
|
1702
1678
|
destroyEventListeners() {
|
|
1703
|
-
document.removeEventListener(
|
|
1704
|
-
document.removeEventListener(
|
|
1679
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1680
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
1705
1681
|
}
|
|
1706
1682
|
register(query) {
|
|
1707
1683
|
const els = getModalElements.call(this, query);
|
|
@@ -1734,14 +1710,14 @@ class Modal extends Collection {
|
|
|
1734
1710
|
var defaults = {
|
|
1735
1711
|
autoInit: false,
|
|
1736
1712
|
// Selectors
|
|
1737
|
-
selectorPopover:
|
|
1738
|
-
selectorArrow:
|
|
1713
|
+
selectorPopover: ".popover",
|
|
1714
|
+
selectorArrow: ".popover__arrow",
|
|
1739
1715
|
// State classes
|
|
1740
|
-
stateActive:
|
|
1716
|
+
stateActive: "is-active",
|
|
1741
1717
|
// Feature settings
|
|
1742
1718
|
eventListeners: true,
|
|
1743
|
-
eventType:
|
|
1744
|
-
placement:
|
|
1719
|
+
eventType: "click",
|
|
1720
|
+
placement: "bottom"
|
|
1745
1721
|
};
|
|
1746
1722
|
|
|
1747
1723
|
function getConfig(el, settings) {
|
|
@@ -1750,19 +1726,19 @@ function getConfig(el, settings) {
|
|
|
1750
1726
|
|
|
1751
1727
|
// Setup the config obj with default values.
|
|
1752
1728
|
const config = {
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1729
|
+
"placement": settings.placement,
|
|
1730
|
+
"event": settings.eventType,
|
|
1731
|
+
"offset": 0,
|
|
1732
|
+
"overflow-padding": 0,
|
|
1733
|
+
"flip-padding": 0,
|
|
1734
|
+
"arrow-element": settings.selectorArrow,
|
|
1735
|
+
"arrow-padding": 0
|
|
1760
1736
|
};
|
|
1761
1737
|
|
|
1762
1738
|
// Loop through config obj.
|
|
1763
1739
|
for (const prop in config) {
|
|
1764
1740
|
// Get the CSS variable property values.
|
|
1765
|
-
const prefix =
|
|
1741
|
+
const prefix = P();
|
|
1766
1742
|
const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
|
|
1767
1743
|
|
|
1768
1744
|
// If a value was found, replace the default in config obj.
|
|
@@ -1779,7 +1755,7 @@ function getPadding(value) {
|
|
|
1779
1755
|
let padding;
|
|
1780
1756
|
|
|
1781
1757
|
// Split the value by spaces if it's a string.
|
|
1782
|
-
const array = typeof value ===
|
|
1758
|
+
const array = typeof value === "string" ? value.trim().split(" ") : [value];
|
|
1783
1759
|
|
|
1784
1760
|
// Convert individual values to integers.
|
|
1785
1761
|
array.forEach(function (item, index) {
|
|
@@ -1826,32 +1802,32 @@ function getPadding(value) {
|
|
|
1826
1802
|
|
|
1827
1803
|
function getModifiers(options) {
|
|
1828
1804
|
return [{
|
|
1829
|
-
name:
|
|
1805
|
+
name: "offset",
|
|
1830
1806
|
options: {
|
|
1831
|
-
offset: [0, parseInt(options[
|
|
1807
|
+
offset: [0, parseInt(options["offset"], 10)]
|
|
1832
1808
|
}
|
|
1833
1809
|
}, {
|
|
1834
|
-
name:
|
|
1810
|
+
name: "preventOverflow",
|
|
1835
1811
|
options: {
|
|
1836
|
-
padding: getPadding(options[
|
|
1812
|
+
padding: getPadding(options["overflow-padding"])
|
|
1837
1813
|
}
|
|
1838
1814
|
}, {
|
|
1839
|
-
name:
|
|
1815
|
+
name: "flip",
|
|
1840
1816
|
options: {
|
|
1841
|
-
padding: getPadding(options[
|
|
1817
|
+
padding: getPadding(options["flip-padding"])
|
|
1842
1818
|
}
|
|
1843
1819
|
}, {
|
|
1844
|
-
name:
|
|
1820
|
+
name: "arrow",
|
|
1845
1821
|
options: {
|
|
1846
|
-
element: options[
|
|
1847
|
-
padding: getPadding(options[
|
|
1822
|
+
element: options["arrow-element"],
|
|
1823
|
+
padding: getPadding(options["arrow-padding"])
|
|
1848
1824
|
}
|
|
1849
1825
|
}];
|
|
1850
1826
|
}
|
|
1851
1827
|
|
|
1852
1828
|
function getPopover(query) {
|
|
1853
1829
|
// Get the entry from collection.
|
|
1854
|
-
const entry = typeof query ===
|
|
1830
|
+
const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
1855
1831
|
|
|
1856
1832
|
// Return entry if it was resolved, otherwise throw error.
|
|
1857
1833
|
if (entry) {
|
|
@@ -1863,12 +1839,12 @@ function getPopover(query) {
|
|
|
1863
1839
|
|
|
1864
1840
|
function getPopoverID(obj) {
|
|
1865
1841
|
// If it's a string, return the string.
|
|
1866
|
-
if (typeof obj ===
|
|
1842
|
+
if (typeof obj === "string") {
|
|
1867
1843
|
return obj;
|
|
1868
1844
|
}
|
|
1869
1845
|
|
|
1870
1846
|
// If it's an HTML element.
|
|
1871
|
-
else if (typeof obj.hasAttribute ===
|
|
1847
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
1872
1848
|
// If it's a popover element, return the id.
|
|
1873
1849
|
if (obj.closest(this.settings.selectorPopover)) {
|
|
1874
1850
|
obj = obj.closest(this.settings.selectorPopover);
|
|
@@ -1876,13 +1852,13 @@ function getPopoverID(obj) {
|
|
|
1876
1852
|
}
|
|
1877
1853
|
|
|
1878
1854
|
// If it's a popover trigger, return value of aria-controls.
|
|
1879
|
-
else if (obj.hasAttribute(
|
|
1880
|
-
return obj.getAttribute(
|
|
1855
|
+
else if (obj.hasAttribute("aria-controls")) {
|
|
1856
|
+
return obj.getAttribute("aria-controls");
|
|
1881
1857
|
}
|
|
1882
1858
|
|
|
1883
1859
|
// If it's a popover tooltip trigger, return the value of aria-describedby.
|
|
1884
|
-
else if (obj.hasAttribute(
|
|
1885
|
-
return obj.getAttribute(
|
|
1860
|
+
else if (obj.hasAttribute("aria-describedby")) {
|
|
1861
|
+
return obj.getAttribute("aria-describedby");
|
|
1886
1862
|
}
|
|
1887
1863
|
|
|
1888
1864
|
// Return false if no id was found.
|
|
@@ -1909,11 +1885,11 @@ function getPopoverElements(query) {
|
|
|
1909
1885
|
};
|
|
1910
1886
|
} else if (!trigger) {
|
|
1911
1887
|
return {
|
|
1912
|
-
error: new Error(
|
|
1888
|
+
error: new Error("No popover trigger associated with the provided popover.")
|
|
1913
1889
|
};
|
|
1914
1890
|
} else if (!popover) {
|
|
1915
1891
|
return {
|
|
1916
|
-
error: new Error(
|
|
1892
|
+
error: new Error("No popover associated with the provided popover trigger.")
|
|
1917
1893
|
};
|
|
1918
1894
|
} else {
|
|
1919
1895
|
return {
|
|
@@ -1923,7 +1899,7 @@ function getPopoverElements(query) {
|
|
|
1923
1899
|
}
|
|
1924
1900
|
} else {
|
|
1925
1901
|
return {
|
|
1926
|
-
error: new Error(
|
|
1902
|
+
error: new Error("Could not resolve the popover ID.")
|
|
1927
1903
|
};
|
|
1928
1904
|
}
|
|
1929
1905
|
}
|
|
@@ -1933,25 +1909,25 @@ async function close(query) {
|
|
|
1933
1909
|
const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
|
|
1934
1910
|
|
|
1935
1911
|
// If a modal exists and its state is opened.
|
|
1936
|
-
if (popover && popover.state ===
|
|
1912
|
+
if (popover && popover.state === "opened") {
|
|
1937
1913
|
// Update state class.
|
|
1938
1914
|
popover.el.classList.remove(this.settings.stateActive);
|
|
1939
1915
|
|
|
1940
1916
|
// Update accessibility attribute(s).
|
|
1941
|
-
if (popover.trigger.hasAttribute(
|
|
1942
|
-
popover.trigger.setAttribute(
|
|
1917
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
1918
|
+
popover.trigger.setAttribute("aria-expanded", "false");
|
|
1943
1919
|
}
|
|
1944
1920
|
|
|
1945
1921
|
// Disable popper event listeners.
|
|
1946
1922
|
popover.popper.setOptions({
|
|
1947
1923
|
modifiers: [{
|
|
1948
|
-
name:
|
|
1924
|
+
name: "eventListeners",
|
|
1949
1925
|
enabled: false
|
|
1950
1926
|
}]
|
|
1951
1927
|
});
|
|
1952
1928
|
|
|
1953
1929
|
// Update popover state.
|
|
1954
|
-
popover.state =
|
|
1930
|
+
popover.state = "closed";
|
|
1955
1931
|
|
|
1956
1932
|
// Clear root trigger if popover trigger matches.
|
|
1957
1933
|
if (popover.trigger === this.trigger) {
|
|
@@ -1965,7 +1941,7 @@ async function close(query) {
|
|
|
1965
1941
|
async function closeAll() {
|
|
1966
1942
|
const result = [];
|
|
1967
1943
|
await Promise.all(this.collection.map(async popover => {
|
|
1968
|
-
if (popover.state ===
|
|
1944
|
+
if (popover.state === "opened") {
|
|
1969
1945
|
result.push(await close.call(this, popover));
|
|
1970
1946
|
}
|
|
1971
1947
|
}));
|
|
@@ -1973,12 +1949,12 @@ async function closeAll() {
|
|
|
1973
1949
|
}
|
|
1974
1950
|
function closeCheck(popover) {
|
|
1975
1951
|
// Only run closeCheck if provided popover is currently open.
|
|
1976
|
-
if (popover.state !=
|
|
1952
|
+
if (popover.state != "opened") return;
|
|
1977
1953
|
|
|
1978
1954
|
// Needed to correctly check which element is currently being focused.
|
|
1979
1955
|
setTimeout(() => {
|
|
1980
1956
|
// Check if trigger or element are being hovered.
|
|
1981
|
-
const isHovered = popover.el.closest(
|
|
1957
|
+
const isHovered = popover.el.closest(":hover") === popover.el || popover.trigger.closest(":hover") === popover.trigger;
|
|
1982
1958
|
|
|
1983
1959
|
// Check if trigger or element are being focused.
|
|
1984
1960
|
const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
|
|
@@ -1994,7 +1970,7 @@ function closeCheck(popover) {
|
|
|
1994
1970
|
}
|
|
1995
1971
|
|
|
1996
1972
|
function handleClick(popover) {
|
|
1997
|
-
if (popover.state ===
|
|
1973
|
+
if (popover.state === "opened") {
|
|
1998
1974
|
popover.close();
|
|
1999
1975
|
} else {
|
|
2000
1976
|
this.trigger = popover.trigger;
|
|
@@ -2004,13 +1980,13 @@ function handleClick(popover) {
|
|
|
2004
1980
|
}
|
|
2005
1981
|
function handleKeydown(event) {
|
|
2006
1982
|
switch (event.key) {
|
|
2007
|
-
case
|
|
1983
|
+
case "Escape":
|
|
2008
1984
|
if (this.trigger) {
|
|
2009
1985
|
this.trigger.focus();
|
|
2010
1986
|
}
|
|
2011
1987
|
closeAll.call(this);
|
|
2012
1988
|
return;
|
|
2013
|
-
case
|
|
1989
|
+
case "Tab":
|
|
2014
1990
|
this.collection.forEach(popover => {
|
|
2015
1991
|
closeCheck.call(this, popover);
|
|
2016
1992
|
});
|
|
@@ -2021,7 +1997,7 @@ function handleKeydown(event) {
|
|
|
2021
1997
|
}
|
|
2022
1998
|
function handleDocumentClick(popover) {
|
|
2023
1999
|
const root = this;
|
|
2024
|
-
document.addEventListener(
|
|
2000
|
+
document.addEventListener("click", function _f(event) {
|
|
2025
2001
|
// Check if a popover or its trigger was clicked.
|
|
2026
2002
|
const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
|
|
2027
2003
|
|
|
@@ -2029,14 +2005,14 @@ function handleDocumentClick(popover) {
|
|
|
2029
2005
|
if (wasClicked) {
|
|
2030
2006
|
// If popover element exists and is not active...
|
|
2031
2007
|
if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
|
|
2032
|
-
this.removeEventListener(
|
|
2008
|
+
this.removeEventListener("click", _f);
|
|
2033
2009
|
}
|
|
2034
2010
|
} else {
|
|
2035
2011
|
// If popover element exists and is active...
|
|
2036
2012
|
if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
|
|
2037
2013
|
popover.close();
|
|
2038
2014
|
}
|
|
2039
|
-
this.removeEventListener(
|
|
2015
|
+
this.removeEventListener("click", _f);
|
|
2040
2016
|
}
|
|
2041
2017
|
});
|
|
2042
2018
|
}
|
|
@@ -3845,7 +3821,7 @@ async function deregister(obj) {
|
|
|
3845
3821
|
const entry = this.collection[index];
|
|
3846
3822
|
|
|
3847
3823
|
// If entry is in the opened state, close it.
|
|
3848
|
-
if (entry.state ===
|
|
3824
|
+
if (entry.state === "opened") {
|
|
3849
3825
|
entry.close();
|
|
3850
3826
|
}
|
|
3851
3827
|
|
|
@@ -3895,8 +3871,8 @@ async function open(query) {
|
|
|
3895
3871
|
popover.el.classList.add(this.settings.stateActive);
|
|
3896
3872
|
|
|
3897
3873
|
// Update accessibility attribute(s).
|
|
3898
|
-
if (popover.trigger.hasAttribute(
|
|
3899
|
-
popover.trigger.setAttribute(
|
|
3874
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
3875
|
+
popover.trigger.setAttribute("aria-expanded", "true");
|
|
3900
3876
|
}
|
|
3901
3877
|
|
|
3902
3878
|
// Update popover config.
|
|
@@ -3904,9 +3880,9 @@ async function open(query) {
|
|
|
3904
3880
|
|
|
3905
3881
|
// Enable popper event listeners and set placement/modifiers.
|
|
3906
3882
|
popover.popper.setOptions({
|
|
3907
|
-
placement: popover.config[
|
|
3883
|
+
placement: popover.config["placement"],
|
|
3908
3884
|
modifiers: [{
|
|
3909
|
-
name:
|
|
3885
|
+
name: "eventListeners",
|
|
3910
3886
|
enabled: true
|
|
3911
3887
|
}, ...getModifiers(popover.config)]
|
|
3912
3888
|
});
|
|
@@ -3915,7 +3891,7 @@ async function open(query) {
|
|
|
3915
3891
|
popover.popper.update();
|
|
3916
3892
|
|
|
3917
3893
|
// Update popover state.
|
|
3918
|
-
popover.state =
|
|
3894
|
+
popover.state = "opened";
|
|
3919
3895
|
|
|
3920
3896
|
// Return the popover.
|
|
3921
3897
|
return popover;
|
|
@@ -3944,7 +3920,7 @@ async function register(el, trigger) {
|
|
|
3944
3920
|
// Setup the popover object.
|
|
3945
3921
|
const entry = _extends({
|
|
3946
3922
|
id: el.id,
|
|
3947
|
-
state:
|
|
3923
|
+
state: "closed",
|
|
3948
3924
|
el: el,
|
|
3949
3925
|
trigger: trigger,
|
|
3950
3926
|
popper: createPopper(trigger, el),
|
|
@@ -3952,8 +3928,8 @@ async function register(el, trigger) {
|
|
|
3952
3928
|
}, methods);
|
|
3953
3929
|
|
|
3954
3930
|
// Set aria-expanded to false if trigger has aria-controls attribute.
|
|
3955
|
-
if (entry.trigger.hasAttribute(
|
|
3956
|
-
entry.trigger.setAttribute(
|
|
3931
|
+
if (entry.trigger.hasAttribute("aria-controls")) {
|
|
3932
|
+
entry.trigger.setAttribute("aria-expanded", "false");
|
|
3957
3933
|
}
|
|
3958
3934
|
|
|
3959
3935
|
// Setup event listeners.
|
|
@@ -3975,18 +3951,18 @@ function registerEventListeners(entry) {
|
|
|
3975
3951
|
// If event listeners aren't already setup.
|
|
3976
3952
|
if (!entry.__eventListeners) {
|
|
3977
3953
|
// Add event listeners based on event type.
|
|
3978
|
-
const eventType = entry.config[
|
|
3954
|
+
const eventType = entry.config["event"];
|
|
3979
3955
|
|
|
3980
3956
|
// If the event type is hover.
|
|
3981
|
-
if (eventType ===
|
|
3957
|
+
if (eventType === "hover") {
|
|
3982
3958
|
// Setup event listeners object for hover.
|
|
3983
3959
|
entry.__eventListeners = [{
|
|
3984
|
-
el: [
|
|
3985
|
-
type: [
|
|
3960
|
+
el: ["trigger"],
|
|
3961
|
+
type: ["mouseenter", "focus"],
|
|
3986
3962
|
listener: open.bind(this, entry)
|
|
3987
3963
|
}, {
|
|
3988
|
-
el: [
|
|
3989
|
-
type: [
|
|
3964
|
+
el: ["el", "trigger"],
|
|
3965
|
+
type: ["mouseleave", "focusout"],
|
|
3990
3966
|
listener: closeCheck.bind(this, entry)
|
|
3991
3967
|
}];
|
|
3992
3968
|
|
|
@@ -4004,8 +3980,8 @@ function registerEventListeners(entry) {
|
|
|
4004
3980
|
else {
|
|
4005
3981
|
// Setup event listeners object for click.
|
|
4006
3982
|
entry.__eventListeners = [{
|
|
4007
|
-
el: [
|
|
4008
|
-
type: [
|
|
3983
|
+
el: ["trigger"],
|
|
3984
|
+
type: ["click"],
|
|
4009
3985
|
listener: handleClick.bind(this, entry)
|
|
4010
3986
|
}];
|
|
4011
3987
|
|
|
@@ -4080,7 +4056,7 @@ class Popover extends Collection {
|
|
|
4080
4056
|
}
|
|
4081
4057
|
|
|
4082
4058
|
// Add keydown global event listener.
|
|
4083
|
-
document.addEventListener(
|
|
4059
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4084
4060
|
}
|
|
4085
4061
|
destroyEventListeners(processCollection = true) {
|
|
4086
4062
|
if (processCollection) {
|
|
@@ -4091,7 +4067,7 @@ class Popover extends Collection {
|
|
|
4091
4067
|
}
|
|
4092
4068
|
|
|
4093
4069
|
// Remove keydown global event listener.
|
|
4094
|
-
document.removeEventListener(
|
|
4070
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4095
4071
|
}
|
|
4096
4072
|
register(query) {
|
|
4097
4073
|
const els = getPopoverElements.call(this, query);
|