vrembem 3.0.10 → 3.0.11
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 +515 -615
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +515 -615
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.mjs +554 -518
- package/dev/scripts.modern.mjs.map +1 -1
- package/dev/scripts.umd.js +515 -615
- package/dev/scripts.umd.js.map +1 -1
- package/dev/styles.css +69 -69
- 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/package.json +26 -26
- package/LICENSE +0 -21
package/dev/scripts.modern.mjs
CHANGED
|
@@ -2,35 +2,28 @@ function _extends() {
|
|
|
2
2
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
3
3
|
for (var i = 1; i < arguments.length; i++) {
|
|
4
4
|
var source = arguments[i];
|
|
5
|
-
|
|
6
5
|
for (var key in source) {
|
|
7
6
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
8
7
|
target[key] = source[key];
|
|
9
8
|
}
|
|
10
9
|
}
|
|
11
10
|
}
|
|
12
|
-
|
|
13
11
|
return target;
|
|
14
12
|
};
|
|
15
13
|
return _extends.apply(this, arguments);
|
|
16
14
|
}
|
|
17
|
-
|
|
18
15
|
var id = 0;
|
|
19
|
-
|
|
20
16
|
function _classPrivateFieldLooseKey(name) {
|
|
21
17
|
return "__private_" + id++ + "_" + name;
|
|
22
18
|
}
|
|
23
|
-
|
|
24
19
|
function _classPrivateFieldLooseBase(receiver, privateKey) {
|
|
25
20
|
if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
|
|
26
21
|
throw new TypeError("attempted to use private field on non-instance");
|
|
27
22
|
}
|
|
28
|
-
|
|
29
23
|
return receiver;
|
|
30
24
|
}
|
|
31
25
|
|
|
32
26
|
var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
|
|
33
|
-
|
|
34
27
|
class Breakpoint {
|
|
35
28
|
constructor(value, handler) {
|
|
36
29
|
Object.defineProperty(this, _handler, {
|
|
@@ -41,12 +34,11 @@ class Breakpoint {
|
|
|
41
34
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
42
35
|
this.mql = null;
|
|
43
36
|
}
|
|
44
|
-
|
|
45
37
|
get handler() {
|
|
46
38
|
return _classPrivateFieldLooseBase(this, _handler)[_handler];
|
|
47
|
-
}
|
|
48
|
-
|
|
39
|
+
}
|
|
49
40
|
|
|
41
|
+
// Unmount existing handler before setting a new one.
|
|
50
42
|
set handler(func) {
|
|
51
43
|
if (this.mql) {
|
|
52
44
|
// Conditionally use removeListener() for IE11 support.
|
|
@@ -56,66 +48,62 @@ class Breakpoint {
|
|
|
56
48
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
57
49
|
}
|
|
58
50
|
}
|
|
59
|
-
|
|
60
51
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = func;
|
|
61
52
|
}
|
|
62
|
-
|
|
63
53
|
mount(value, handler) {
|
|
64
54
|
// Update passed params.
|
|
65
55
|
if (value) this.value = value;
|
|
66
|
-
if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
56
|
+
if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
67
57
|
|
|
68
|
-
|
|
58
|
+
// Guard if no breakpoint was set.
|
|
59
|
+
if (!this.value) return this;
|
|
69
60
|
|
|
70
|
-
|
|
61
|
+
// Setup and store the MediaQueryList instance.
|
|
62
|
+
this.mql = window.matchMedia(`(min-width: ${this.value})`);
|
|
71
63
|
|
|
64
|
+
// Conditionally use addListener() for IE11 support.
|
|
72
65
|
if (typeof this.mql.addEventListener === 'function') {
|
|
73
66
|
this.mql.addEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
74
67
|
} else {
|
|
75
68
|
this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
76
|
-
}
|
|
77
|
-
|
|
69
|
+
}
|
|
78
70
|
|
|
71
|
+
// Run the handler.
|
|
79
72
|
_classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
|
|
80
|
-
|
|
81
73
|
return this;
|
|
82
74
|
}
|
|
83
|
-
|
|
84
75
|
unmount() {
|
|
85
76
|
// Guard if no MediaQueryList instance exists.
|
|
86
|
-
if (!this.mql) return this;
|
|
77
|
+
if (!this.mql) return this;
|
|
87
78
|
|
|
79
|
+
// Conditionally use removeListener() for IE11 support.
|
|
88
80
|
if (typeof this.mql.removeEventListener === 'function') {
|
|
89
81
|
this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
90
82
|
} else {
|
|
91
83
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
92
|
-
}
|
|
93
|
-
|
|
84
|
+
}
|
|
94
85
|
|
|
86
|
+
// Set value, handler and MediaQueryList to null.
|
|
95
87
|
this.value = null;
|
|
96
88
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = null;
|
|
97
89
|
this.mql = null;
|
|
98
90
|
return this;
|
|
99
91
|
}
|
|
100
|
-
|
|
101
92
|
}
|
|
102
93
|
|
|
103
94
|
class Collection {
|
|
104
95
|
constructor() {
|
|
105
96
|
this.collection = [];
|
|
106
97
|
}
|
|
107
|
-
|
|
108
98
|
async register(item) {
|
|
109
99
|
await this.deregister(item);
|
|
110
100
|
this.collection.push(item);
|
|
111
101
|
return this.collection;
|
|
112
102
|
}
|
|
113
|
-
|
|
114
103
|
async deregister(ref) {
|
|
115
104
|
const index = this.collection.findIndex(entry => {
|
|
116
105
|
return entry === ref;
|
|
117
106
|
});
|
|
118
|
-
|
|
119
107
|
if (index >= 0) {
|
|
120
108
|
const entry = this.collection[index];
|
|
121
109
|
Object.getOwnPropertyNames(entry).forEach(prop => {
|
|
@@ -123,34 +111,28 @@ class Collection {
|
|
|
123
111
|
});
|
|
124
112
|
this.collection.splice(index, 1);
|
|
125
113
|
}
|
|
126
|
-
|
|
127
114
|
return this.collection;
|
|
128
115
|
}
|
|
129
|
-
|
|
130
116
|
async registerCollection(items) {
|
|
131
117
|
await Promise.all(Array.from(items, item => {
|
|
132
118
|
this.register(item);
|
|
133
119
|
}));
|
|
134
120
|
return this.collection;
|
|
135
121
|
}
|
|
136
|
-
|
|
137
122
|
async deregisterCollection() {
|
|
138
123
|
while (this.collection.length > 0) {
|
|
139
124
|
await this.deregister(this.collection[0]);
|
|
140
125
|
}
|
|
141
|
-
|
|
142
126
|
return this.collection;
|
|
143
127
|
}
|
|
144
|
-
|
|
145
128
|
get(value, key = 'id') {
|
|
146
129
|
return this.collection.find(item => {
|
|
147
130
|
return item[key] === value;
|
|
148
131
|
});
|
|
149
132
|
}
|
|
150
|
-
|
|
151
133
|
}
|
|
152
134
|
|
|
153
|
-
var
|
|
135
|
+
var e = [
|
|
154
136
|
'a[href]:not([tabindex^="-"])',
|
|
155
137
|
'area[href]:not([tabindex^="-"])',
|
|
156
138
|
'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
|
|
@@ -166,11 +148,8 @@ var focusableSelectors = [
|
|
|
166
148
|
];
|
|
167
149
|
|
|
168
150
|
var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
|
|
169
|
-
|
|
170
151
|
var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
|
|
171
|
-
|
|
172
152
|
var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
|
|
173
|
-
|
|
174
153
|
class FocusTrap {
|
|
175
154
|
constructor(el = null, selectorFocus = '[data-focus]') {
|
|
176
155
|
Object.defineProperty(this, _focusable, {
|
|
@@ -190,15 +169,14 @@ class FocusTrap {
|
|
|
190
169
|
_classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap] = handleFocusTrap.bind(this);
|
|
191
170
|
_classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock] = handleFocusLock.bind(this);
|
|
192
171
|
}
|
|
193
|
-
|
|
194
172
|
get focusable() {
|
|
195
173
|
return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
|
|
196
174
|
}
|
|
197
|
-
|
|
198
175
|
set focusable(value) {
|
|
199
176
|
// Update the focusable value.
|
|
200
|
-
_classPrivateFieldLooseBase(this, _focusable)[_focusable] = value;
|
|
177
|
+
_classPrivateFieldLooseBase(this, _focusable)[_focusable] = value;
|
|
201
178
|
|
|
179
|
+
// Apply event listeners based on new focusable array length.
|
|
202
180
|
if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
|
|
203
181
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
204
182
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
@@ -207,74 +185,76 @@ class FocusTrap {
|
|
|
207
185
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
208
186
|
}
|
|
209
187
|
}
|
|
210
|
-
|
|
211
188
|
get focusableFirst() {
|
|
212
189
|
return this.focusable[0];
|
|
213
190
|
}
|
|
214
|
-
|
|
215
191
|
get focusableLast() {
|
|
216
192
|
return this.focusable[this.focusable.length - 1];
|
|
217
193
|
}
|
|
218
|
-
|
|
219
194
|
mount(el, selectorFocus) {
|
|
220
195
|
// Update passed params.
|
|
221
196
|
if (el) this.el = el;
|
|
222
|
-
if (selectorFocus) this.selectorFocus = selectorFocus;
|
|
197
|
+
if (selectorFocus) this.selectorFocus = selectorFocus;
|
|
223
198
|
|
|
224
|
-
|
|
199
|
+
// Get the focusable elements.
|
|
200
|
+
this.focusable = this.getFocusable();
|
|
225
201
|
|
|
202
|
+
// Set the focus on the element.
|
|
226
203
|
this.focus();
|
|
227
204
|
}
|
|
228
|
-
|
|
229
205
|
unmount() {
|
|
230
206
|
// Set element to null.
|
|
231
|
-
this.el = null;
|
|
207
|
+
this.el = null;
|
|
232
208
|
|
|
233
|
-
|
|
209
|
+
// Apply empty array to focusable.
|
|
210
|
+
this.focusable = [];
|
|
234
211
|
|
|
212
|
+
// Remove event listeners
|
|
235
213
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
236
214
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
237
215
|
}
|
|
238
|
-
|
|
239
216
|
focus(el = this.el, selectorFocus = this.selectorFocus) {
|
|
240
217
|
// Query for the focus selector, otherwise return this element.
|
|
241
|
-
const result = el.querySelector(selectorFocus) || el;
|
|
242
|
-
|
|
218
|
+
const result = el.querySelector(selectorFocus) || el;
|
|
219
|
+
// Give the returned element focus.
|
|
243
220
|
result.focus();
|
|
244
221
|
}
|
|
245
|
-
|
|
246
222
|
getFocusable(el = this.el) {
|
|
247
223
|
// Initialize the focusable array.
|
|
248
|
-
const focusable = [];
|
|
224
|
+
const focusable = [];
|
|
249
225
|
|
|
226
|
+
// Store the initial focus and scroll position.
|
|
250
227
|
const initFocus = document.activeElement;
|
|
251
|
-
const initScrollTop = el.scrollTop;
|
|
228
|
+
const initScrollTop = el.scrollTop;
|
|
252
229
|
|
|
253
|
-
|
|
230
|
+
// Query for all the focusable elements.
|
|
231
|
+
const els = el.querySelectorAll(e.join(','));
|
|
254
232
|
|
|
233
|
+
// Loop through all focusable elements.
|
|
255
234
|
els.forEach(el => {
|
|
256
235
|
// Set them to focus and check
|
|
257
|
-
el.focus();
|
|
258
|
-
|
|
236
|
+
el.focus();
|
|
237
|
+
// Test that the element took focus.
|
|
259
238
|
if (document.activeElement === el) {
|
|
260
239
|
// Add element to the focusable array.
|
|
261
240
|
focusable.push(el);
|
|
262
241
|
}
|
|
263
|
-
});
|
|
242
|
+
});
|
|
264
243
|
|
|
244
|
+
// Restore the initial scroll position and focus.
|
|
265
245
|
el.scrollTop = initScrollTop;
|
|
266
|
-
initFocus.focus();
|
|
246
|
+
initFocus.focus();
|
|
267
247
|
|
|
248
|
+
// Return the focusable array.
|
|
268
249
|
return focusable;
|
|
269
250
|
}
|
|
270
|
-
|
|
271
251
|
}
|
|
272
|
-
|
|
273
252
|
function handleFocusTrap(event) {
|
|
274
253
|
// Check if the click was a tab and return if not.
|
|
275
254
|
const isTab = event.key === 'Tab' || event.keyCode === 9;
|
|
276
|
-
if (!isTab) return;
|
|
255
|
+
if (!isTab) return;
|
|
277
256
|
|
|
257
|
+
// If the shift key is pressed.
|
|
278
258
|
if (event.shiftKey) {
|
|
279
259
|
// If the active element is either the root el or first focusable.
|
|
280
260
|
if (document.activeElement === this.focusableFirst || document.activeElement === this.el) {
|
|
@@ -291,7 +271,6 @@ function handleFocusTrap(event) {
|
|
|
291
271
|
}
|
|
292
272
|
}
|
|
293
273
|
}
|
|
294
|
-
|
|
295
274
|
function handleFocusLock(event) {
|
|
296
275
|
// Ignore the tab key by preventing default.
|
|
297
276
|
const isTab = event.key === 'Tab' || event.keyCode === 9;
|
|
@@ -315,18 +294,15 @@ function localStore(key, enable = true) {
|
|
|
315
294
|
get(prop) {
|
|
316
295
|
return prop ? store[prop] : store;
|
|
317
296
|
},
|
|
318
|
-
|
|
319
297
|
set(prop, value) {
|
|
320
298
|
if (value) {
|
|
321
299
|
store[prop] = value;
|
|
322
300
|
} else {
|
|
323
301
|
delete store[prop];
|
|
324
302
|
}
|
|
325
|
-
|
|
326
303
|
if (enable) localStorage.setItem(key, JSON.stringify(store));
|
|
327
304
|
return store;
|
|
328
305
|
}
|
|
329
|
-
|
|
330
306
|
};
|
|
331
307
|
}
|
|
332
308
|
|
|
@@ -344,31 +320,37 @@ function localStore(key, enable = true) {
|
|
|
344
320
|
function teleport(what, where, how) {
|
|
345
321
|
// Check if ref is either a comment or element node.
|
|
346
322
|
const isComment = where.nodeType === Node.COMMENT_NODE;
|
|
347
|
-
const isElement = where.nodeType === Node.ELEMENT_NODE;
|
|
323
|
+
const isElement = where.nodeType === Node.ELEMENT_NODE;
|
|
348
324
|
|
|
349
|
-
|
|
325
|
+
// Get the reference element.
|
|
326
|
+
where = isComment || isElement ? where : document.querySelector(where);
|
|
350
327
|
|
|
351
|
-
|
|
328
|
+
// If ref is a comment, set teleport type to 'after'.
|
|
329
|
+
if (isComment) how = 'after';
|
|
352
330
|
|
|
331
|
+
// Must be a valid reference element and method.
|
|
353
332
|
if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
|
|
354
|
-
if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`);
|
|
333
|
+
if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`);
|
|
355
334
|
|
|
356
|
-
|
|
335
|
+
// Initial return ref is null.
|
|
336
|
+
let returnRef = null;
|
|
357
337
|
|
|
338
|
+
// If ref is not a comment, set a return reference comment.
|
|
358
339
|
if (!isComment) {
|
|
359
340
|
returnRef = document.createComment('teleported #' + what.id);
|
|
360
341
|
what.before(returnRef);
|
|
361
|
-
}
|
|
362
|
-
|
|
342
|
+
}
|
|
363
343
|
|
|
364
|
-
|
|
344
|
+
// Teleport the target node.
|
|
345
|
+
where[how](what);
|
|
365
346
|
|
|
347
|
+
// Delete the comment node if element was returned to a comment reference.
|
|
366
348
|
if (isComment) {
|
|
367
349
|
where.remove();
|
|
368
|
-
}
|
|
369
|
-
// returned to a comment reference.
|
|
370
|
-
|
|
350
|
+
}
|
|
371
351
|
|
|
352
|
+
// Return the return reference if it was teleported else return null if it was
|
|
353
|
+
// returned to a comment reference.
|
|
372
354
|
return returnRef;
|
|
373
355
|
}
|
|
374
356
|
|
|
@@ -421,7 +403,6 @@ function setOverflowHidden(state, selector) {
|
|
|
421
403
|
});
|
|
422
404
|
}
|
|
423
405
|
}
|
|
424
|
-
|
|
425
406
|
function setInert(state, selector) {
|
|
426
407
|
if (selector) {
|
|
427
408
|
const els = document.querySelectorAll(selector);
|
|
@@ -436,11 +417,11 @@ function setInert(state, selector) {
|
|
|
436
417
|
});
|
|
437
418
|
}
|
|
438
419
|
}
|
|
439
|
-
|
|
440
420
|
function updateGlobalState(param, config) {
|
|
441
421
|
// Set inert state based on if a modal is active.
|
|
442
|
-
setInert(!!param, config.selectorInert);
|
|
422
|
+
setInert(!!param, config.selectorInert);
|
|
443
423
|
|
|
424
|
+
// Set overflow state based on if a modal is active.
|
|
444
425
|
setOverflowHidden(!!param, config.selectorOverflow);
|
|
445
426
|
}
|
|
446
427
|
|
|
@@ -471,7 +452,6 @@ class Checkbox {
|
|
|
471
452
|
this.__handlerClick = this.handlerClick.bind(this);
|
|
472
453
|
if (this.settings.autoInit) this.init();
|
|
473
454
|
}
|
|
474
|
-
|
|
475
455
|
init(options = null) {
|
|
476
456
|
if (options) this.settings = _extends({}, this.settings, options);
|
|
477
457
|
const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
|
|
@@ -479,11 +459,9 @@ class Checkbox {
|
|
|
479
459
|
this.setIndeterminate(mixed);
|
|
480
460
|
document.addEventListener('click', this.__handlerClick, false);
|
|
481
461
|
}
|
|
482
|
-
|
|
483
462
|
destroy() {
|
|
484
463
|
document.removeEventListener('click', this.__handlerClick, false);
|
|
485
464
|
}
|
|
486
|
-
|
|
487
465
|
handlerClick(event) {
|
|
488
466
|
const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
|
|
489
467
|
const el = event.target.closest(selector);
|
|
@@ -491,21 +469,18 @@ class Checkbox {
|
|
|
491
469
|
this.removeAriaState(el);
|
|
492
470
|
this.setIndeterminate(el);
|
|
493
471
|
}
|
|
494
|
-
|
|
495
472
|
setAriaState(el, value = this.settings.stateValue) {
|
|
496
473
|
el = el.forEach ? el : [el];
|
|
497
474
|
el.forEach(el => {
|
|
498
475
|
el.setAttribute(this.settings.stateAttr, value);
|
|
499
476
|
});
|
|
500
477
|
}
|
|
501
|
-
|
|
502
478
|
removeAriaState(el) {
|
|
503
479
|
el = el.forEach ? el : [el];
|
|
504
480
|
el.forEach(el => {
|
|
505
481
|
el.removeAttribute(this.settings.stateAttr);
|
|
506
482
|
});
|
|
507
483
|
}
|
|
508
|
-
|
|
509
484
|
setIndeterminate(el) {
|
|
510
485
|
el = el.forEach ? el : [el];
|
|
511
486
|
el.forEach(el => {
|
|
@@ -516,7 +491,6 @@ class Checkbox {
|
|
|
516
491
|
}
|
|
517
492
|
});
|
|
518
493
|
}
|
|
519
|
-
|
|
520
494
|
}
|
|
521
495
|
|
|
522
496
|
var defaults$2 = {
|
|
@@ -557,60 +531,59 @@ function handleClick$2(event) {
|
|
|
557
531
|
[data-${this.settings.dataToggle}],
|
|
558
532
|
[data-${this.settings.dataClose}]
|
|
559
533
|
`);
|
|
560
|
-
|
|
561
534
|
if (trigger) {
|
|
562
535
|
// Prevent the default behavior of the trigger.
|
|
563
|
-
event.preventDefault();
|
|
536
|
+
event.preventDefault();
|
|
564
537
|
|
|
538
|
+
// If it's a toggle trigger...
|
|
565
539
|
if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
|
|
566
540
|
const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(' ');
|
|
567
541
|
selectors.forEach(selector => {
|
|
568
542
|
// Get the entry from collection using the attribute value.
|
|
569
|
-
const entry = this.get(selector);
|
|
570
|
-
|
|
571
|
-
entry.trigger = trigger;
|
|
572
|
-
|
|
543
|
+
const entry = this.get(selector);
|
|
544
|
+
// Store the trigger on the entry.
|
|
545
|
+
entry.trigger = trigger;
|
|
546
|
+
// Toggle the drawer
|
|
573
547
|
entry.toggle();
|
|
574
548
|
});
|
|
575
|
-
}
|
|
576
|
-
|
|
549
|
+
}
|
|
577
550
|
|
|
551
|
+
// If it's a open trigger...
|
|
578
552
|
if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
|
|
579
553
|
const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(' ');
|
|
580
554
|
selectors.forEach(selector => {
|
|
581
555
|
// Get the entry from collection using the attribute value.
|
|
582
|
-
const entry = this.get(selector);
|
|
583
|
-
|
|
584
|
-
entry.trigger = trigger;
|
|
585
|
-
|
|
556
|
+
const entry = this.get(selector);
|
|
557
|
+
// Store the trigger on the entry.
|
|
558
|
+
entry.trigger = trigger;
|
|
559
|
+
// Open the drawer.
|
|
586
560
|
entry.open();
|
|
587
561
|
});
|
|
588
|
-
}
|
|
589
|
-
|
|
562
|
+
}
|
|
590
563
|
|
|
564
|
+
// If it's a close trigger...
|
|
591
565
|
if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
|
|
592
566
|
const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(' ');
|
|
593
567
|
selectors.forEach(selector => {
|
|
594
568
|
if (selector) {
|
|
595
569
|
// Get the entry from collection using the attribute value.
|
|
596
|
-
const entry = this.get(selector);
|
|
597
|
-
|
|
598
|
-
entry.trigger = trigger;
|
|
599
|
-
|
|
570
|
+
const entry = this.get(selector);
|
|
571
|
+
// Store the trigger on the entry.
|
|
572
|
+
entry.trigger = trigger;
|
|
573
|
+
// Close the drawer.
|
|
600
574
|
entry.close();
|
|
601
575
|
} else {
|
|
602
576
|
// If no value is set on close trigger, get the parent drawer.
|
|
603
|
-
const parent = event.target.closest(this.settings.selectorDrawer);
|
|
604
|
-
|
|
577
|
+
const parent = event.target.closest(this.settings.selectorDrawer);
|
|
578
|
+
// If a parent drawer was found, close it.
|
|
605
579
|
if (parent) this.close(parent);
|
|
606
580
|
}
|
|
607
581
|
});
|
|
608
582
|
}
|
|
609
|
-
|
|
610
583
|
return;
|
|
611
|
-
}
|
|
612
|
-
|
|
584
|
+
}
|
|
613
585
|
|
|
586
|
+
// If the modal drawer screen was clicked...
|
|
614
587
|
if (event.target.matches(this.settings.selectorDrawer)) {
|
|
615
588
|
// Close the modal drawer.
|
|
616
589
|
this.close(event.target.id);
|
|
@@ -625,34 +598,38 @@ function handleKeydown$2(event) {
|
|
|
625
598
|
|
|
626
599
|
async function deregister$2(obj, close = true) {
|
|
627
600
|
// Return collection if nothing was passed.
|
|
628
|
-
if (!obj) return this.collection;
|
|
601
|
+
if (!obj) return this.collection;
|
|
629
602
|
|
|
603
|
+
// Check if entry has been registered in the collection.
|
|
630
604
|
const index = this.collection.findIndex(entry => {
|
|
631
605
|
return entry.id === obj.id;
|
|
632
606
|
});
|
|
633
|
-
|
|
634
607
|
if (index >= 0) {
|
|
635
608
|
// Get the collection entry.
|
|
636
|
-
const entry = this.collection[index];
|
|
609
|
+
const entry = this.collection[index];
|
|
637
610
|
|
|
611
|
+
// If entry is in the opened state.
|
|
638
612
|
if (close && entry.state === 'opened') {
|
|
639
613
|
// Close the drawer.
|
|
640
614
|
await entry.close(false);
|
|
641
|
-
}
|
|
642
|
-
|
|
615
|
+
}
|
|
643
616
|
|
|
644
|
-
|
|
617
|
+
// Remove entry from local store.
|
|
618
|
+
this.store.set(entry.id);
|
|
645
619
|
|
|
646
|
-
|
|
620
|
+
// Unmount the MatchMedia functionality.
|
|
621
|
+
entry.unmountBreakpoint();
|
|
647
622
|
|
|
623
|
+
// Delete properties from collection entry.
|
|
648
624
|
Object.getOwnPropertyNames(entry).forEach(prop => {
|
|
649
625
|
delete entry[prop];
|
|
650
|
-
});
|
|
626
|
+
});
|
|
651
627
|
|
|
628
|
+
// Remove entry from collection.
|
|
652
629
|
this.collection.splice(index, 1);
|
|
653
|
-
}
|
|
654
|
-
|
|
630
|
+
}
|
|
655
631
|
|
|
632
|
+
// Return the modified collection.
|
|
656
633
|
return this.collection;
|
|
657
634
|
}
|
|
658
635
|
|
|
@@ -663,7 +640,6 @@ function g() {
|
|
|
663
640
|
function getBreakpoint(drawer) {
|
|
664
641
|
const prefix = g();
|
|
665
642
|
const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
|
|
666
|
-
|
|
667
643
|
if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
|
|
668
644
|
return this.settings.breakpoints[bp];
|
|
669
645
|
} else if (getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim()) {
|
|
@@ -675,8 +651,9 @@ function getBreakpoint(drawer) {
|
|
|
675
651
|
|
|
676
652
|
function getDrawer(query) {
|
|
677
653
|
// Get the entry from collection.
|
|
678
|
-
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
654
|
+
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
679
655
|
|
|
656
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
680
657
|
if (entry) {
|
|
681
658
|
return entry;
|
|
682
659
|
} else {
|
|
@@ -688,37 +665,49 @@ function getDrawerID(obj) {
|
|
|
688
665
|
// If it's a string, return the string.
|
|
689
666
|
if (typeof obj === 'string') {
|
|
690
667
|
return obj;
|
|
691
|
-
}
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
// If it's an HTML element.
|
|
692
671
|
else if (typeof obj.hasAttribute === 'function') {
|
|
693
672
|
// If it's a drawer open trigger, return data value.
|
|
694
673
|
if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
|
|
695
674
|
return obj.getAttribute(`data-${this.settings.dataOpen}`);
|
|
696
|
-
}
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
// If it's a drawer close trigger, return data value or false.
|
|
697
678
|
else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
|
|
698
679
|
return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
|
|
699
|
-
}
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
// If it's a drawer toggle trigger, return data value.
|
|
700
683
|
else if (obj.hasAttribute(`data-${this.settings.dataToggle}`)) {
|
|
701
684
|
return obj.getAttribute(`data-${this.settings.dataToggle}`);
|
|
702
|
-
}
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
// If it's a drawer element, return the id.
|
|
703
688
|
else if (obj.closest(this.settings.selectorDrawer)) {
|
|
704
689
|
obj = obj.closest(this.settings.selectorDrawer);
|
|
705
690
|
return obj.id || false;
|
|
706
|
-
}
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
// Return false if no id was found.
|
|
707
694
|
else return false;
|
|
708
|
-
}
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
// If it has an id property, return its value.
|
|
709
698
|
else if (obj.id) {
|
|
710
699
|
return obj.id;
|
|
711
|
-
}
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
// Return false if no id was found.
|
|
712
703
|
else return false;
|
|
713
704
|
}
|
|
714
705
|
|
|
715
706
|
function getDrawerElements(query) {
|
|
716
707
|
const id = getDrawerID.call(this, query);
|
|
717
|
-
|
|
718
708
|
if (id) {
|
|
719
709
|
const drawer = document.querySelector(`#${id}`);
|
|
720
710
|
const dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
|
|
721
|
-
|
|
722
711
|
if (!drawer && !dialog) {
|
|
723
712
|
return {
|
|
724
713
|
error: new Error(`No drawer elements found using the ID: "${id}".`)
|
|
@@ -758,8 +747,8 @@ async function initialState(entry) {
|
|
|
758
747
|
} else {
|
|
759
748
|
// Remove transition state classes.
|
|
760
749
|
entry.el.classList.remove(this.settings.stateOpening);
|
|
761
|
-
entry.el.classList.remove(this.settings.stateClosing);
|
|
762
|
-
|
|
750
|
+
entry.el.classList.remove(this.settings.stateClosing);
|
|
751
|
+
// Add closed state class.
|
|
763
752
|
entry.el.classList.add(this.settings.stateClosed);
|
|
764
753
|
}
|
|
765
754
|
}
|
|
@@ -779,85 +768,98 @@ function updateFocusState$1(entry) {
|
|
|
779
768
|
entry.trigger.focus();
|
|
780
769
|
entry.trigger = null;
|
|
781
770
|
}
|
|
782
|
-
|
|
783
771
|
this.focusTrap.unmount();
|
|
784
772
|
}
|
|
785
773
|
}
|
|
786
774
|
|
|
787
775
|
async function open$2(query, transition, focus = true) {
|
|
788
776
|
// Get the drawer from collection.
|
|
789
|
-
const drawer = getDrawer.call(this, query);
|
|
777
|
+
const drawer = getDrawer.call(this, query);
|
|
790
778
|
|
|
791
|
-
|
|
779
|
+
// Get the modal configuration.
|
|
780
|
+
const config = _extends({}, this.settings, drawer.settings);
|
|
792
781
|
|
|
782
|
+
// Add transition parameter to configuration.
|
|
783
|
+
if (transition !== undefined) config.transition = transition;
|
|
793
784
|
|
|
794
|
-
|
|
795
|
-
|
|
785
|
+
// If drawer is closed.
|
|
796
786
|
if (drawer.state === 'closed') {
|
|
797
787
|
// Update drawer state.
|
|
798
|
-
drawer.state = 'opening';
|
|
788
|
+
drawer.state = 'opening';
|
|
799
789
|
|
|
800
|
-
|
|
790
|
+
// Run the open transition.
|
|
791
|
+
await openTransition(drawer.el, config);
|
|
801
792
|
|
|
802
|
-
|
|
793
|
+
// Update the global state if mode is modal.
|
|
794
|
+
if (drawer.mode === 'modal') updateGlobalState(true, config);
|
|
803
795
|
|
|
796
|
+
// Update drawer state.
|
|
804
797
|
drawer.state = 'opened';
|
|
805
|
-
}
|
|
806
|
-
|
|
798
|
+
}
|
|
807
799
|
|
|
800
|
+
// Set focus to the drawer element if the focus param is true.
|
|
808
801
|
if (focus) {
|
|
809
802
|
updateFocusState$1.call(this, drawer);
|
|
810
|
-
}
|
|
811
|
-
|
|
803
|
+
}
|
|
812
804
|
|
|
805
|
+
// Dispatch custom opened event.
|
|
813
806
|
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
|
|
814
807
|
detail: this,
|
|
815
808
|
bubbles: true
|
|
816
|
-
}));
|
|
809
|
+
}));
|
|
817
810
|
|
|
811
|
+
// Return the drawer.
|
|
818
812
|
return drawer;
|
|
819
813
|
}
|
|
820
814
|
|
|
821
815
|
async function close$2(query, transition, focus = true) {
|
|
822
816
|
// Get the drawer from collection.
|
|
823
|
-
const drawer = getDrawer.call(this, query);
|
|
824
|
-
|
|
825
|
-
const config = _extends({}, this.settings, drawer.settings); // Add transition parameter to configuration.
|
|
817
|
+
const drawer = getDrawer.call(this, query);
|
|
826
818
|
|
|
819
|
+
// Get the modal configuration.
|
|
820
|
+
const config = _extends({}, this.settings, drawer.settings);
|
|
827
821
|
|
|
828
|
-
|
|
822
|
+
// Add transition parameter to configuration.
|
|
823
|
+
if (transition !== undefined) config.transition = transition;
|
|
829
824
|
|
|
825
|
+
// If drawer is opened.
|
|
830
826
|
if (drawer.state === 'opened') {
|
|
831
827
|
// Update drawer state.
|
|
832
|
-
drawer.state = 'closing';
|
|
828
|
+
drawer.state = 'closing';
|
|
833
829
|
|
|
834
|
-
|
|
830
|
+
// Remove focus from active element.
|
|
831
|
+
document.activeElement.blur();
|
|
835
832
|
|
|
836
|
-
|
|
833
|
+
// Run the close transition.
|
|
834
|
+
await closeTransition(drawer.el, config);
|
|
837
835
|
|
|
838
|
-
|
|
836
|
+
// Update the global state if mode is modal.
|
|
837
|
+
if (drawer.mode === 'modal') updateGlobalState(false, config);
|
|
839
838
|
|
|
839
|
+
// Set focus to the trigger element if the focus param is true.
|
|
840
840
|
if (focus) {
|
|
841
841
|
updateFocusState$1.call(this, drawer);
|
|
842
|
-
}
|
|
843
|
-
|
|
842
|
+
}
|
|
844
843
|
|
|
845
|
-
|
|
844
|
+
// Update drawer state.
|
|
845
|
+
drawer.state = 'closed';
|
|
846
846
|
|
|
847
|
+
// Dispatch custom closed event.
|
|
847
848
|
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
|
|
848
849
|
detail: this,
|
|
849
850
|
bubbles: true
|
|
850
851
|
}));
|
|
851
|
-
}
|
|
852
|
-
|
|
852
|
+
}
|
|
853
853
|
|
|
854
|
+
// Return the drawer.
|
|
854
855
|
return drawer;
|
|
855
856
|
}
|
|
856
857
|
|
|
857
858
|
async function toggle(query, transition, focus) {
|
|
858
859
|
// Get the drawer from collection.
|
|
859
|
-
const drawer = getDrawer.call(this, query);
|
|
860
|
+
const drawer = getDrawer.call(this, query);
|
|
860
861
|
|
|
862
|
+
// Open or close the drawer based on its current state.
|
|
861
863
|
if (drawer.state === 'closed') {
|
|
862
864
|
return open$2.call(this, drawer, transition, focus);
|
|
863
865
|
} else {
|
|
@@ -869,179 +871,175 @@ function switchMode(entry) {
|
|
|
869
871
|
switch (entry.mode) {
|
|
870
872
|
case 'inline':
|
|
871
873
|
return toInline.call(this, entry);
|
|
872
|
-
|
|
873
874
|
case 'modal':
|
|
874
875
|
return toModal.call(this, entry);
|
|
875
|
-
|
|
876
876
|
default:
|
|
877
877
|
throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
|
|
878
878
|
}
|
|
879
879
|
}
|
|
880
|
-
|
|
881
880
|
async function toInline(entry) {
|
|
882
881
|
// Remove the modal class.
|
|
883
|
-
entry.el.classList.remove(entry.getSetting('classModal'));
|
|
882
|
+
entry.el.classList.remove(entry.getSetting('classModal'));
|
|
884
883
|
|
|
885
|
-
|
|
884
|
+
// Remove the aria-modal attribute.
|
|
885
|
+
entry.dialog.removeAttribute('aria-modal');
|
|
886
886
|
|
|
887
|
-
|
|
887
|
+
// Update the global state.
|
|
888
|
+
updateGlobalState(false, _extends({}, this.settings, entry.settings));
|
|
888
889
|
|
|
889
|
-
|
|
890
|
+
// Remove any focus traps.
|
|
891
|
+
this.focusTrap.unmount();
|
|
890
892
|
|
|
891
|
-
|
|
893
|
+
// Setup initial state.
|
|
894
|
+
await initialState.call(this, entry);
|
|
892
895
|
|
|
896
|
+
// Dispatch custom switch event.
|
|
893
897
|
entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
|
|
894
898
|
detail: this,
|
|
895
899
|
bubbles: true
|
|
896
|
-
}));
|
|
900
|
+
}));
|
|
897
901
|
|
|
902
|
+
// Return the entry.
|
|
898
903
|
return entry;
|
|
899
904
|
}
|
|
900
|
-
|
|
901
905
|
async function toModal(entry) {
|
|
902
906
|
// Get the drawer configuration.
|
|
907
|
+
|
|
903
908
|
// Add the modal class.
|
|
904
|
-
entry.el.classList.add(entry.getSetting('classModal'));
|
|
909
|
+
entry.el.classList.add(entry.getSetting('classModal'));
|
|
905
910
|
|
|
906
|
-
|
|
911
|
+
// Set aria-modal attribute to true.
|
|
912
|
+
entry.dialog.setAttribute('aria-modal', 'true');
|
|
907
913
|
|
|
914
|
+
// If there isn't a stored state but also has the opened state class...
|
|
908
915
|
if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
|
|
909
916
|
// Save the opened state in local store.
|
|
910
917
|
this.store.set(entry.id, 'opened');
|
|
911
|
-
}
|
|
912
|
-
|
|
918
|
+
}
|
|
913
919
|
|
|
914
|
-
|
|
920
|
+
// Modal drawer defaults to closed state.
|
|
921
|
+
await close$2.call(this, entry, false, false);
|
|
915
922
|
|
|
923
|
+
// Dispatch custom switch event.
|
|
916
924
|
entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
|
|
917
925
|
detail: this,
|
|
918
926
|
bubbles: true
|
|
919
|
-
}));
|
|
927
|
+
}));
|
|
920
928
|
|
|
929
|
+
// Return the entry.
|
|
921
930
|
return entry;
|
|
922
931
|
}
|
|
923
932
|
|
|
924
933
|
async function register$2(el, dialog) {
|
|
925
934
|
// Deregister entry incase it has already been registered.
|
|
926
|
-
await deregister$2.call(this, el, false);
|
|
935
|
+
await deregister$2.call(this, el, false);
|
|
927
936
|
|
|
928
|
-
|
|
937
|
+
// Save root this for use inside methods API.
|
|
938
|
+
const root = this;
|
|
929
939
|
|
|
930
|
-
|
|
940
|
+
// Create an instance of the Breakpoint class.
|
|
941
|
+
const breakpoint = new Breakpoint();
|
|
931
942
|
|
|
943
|
+
// Setup methods API.
|
|
932
944
|
const methods = {
|
|
933
945
|
open(transition, focus) {
|
|
934
946
|
return open$2.call(root, this, transition, focus);
|
|
935
947
|
},
|
|
936
|
-
|
|
937
948
|
close(transition, focus) {
|
|
938
949
|
return close$2.call(root, this, transition, focus);
|
|
939
950
|
},
|
|
940
|
-
|
|
941
951
|
toggle(transition, focus) {
|
|
942
952
|
return toggle.call(root, this, transition, focus);
|
|
943
953
|
},
|
|
944
|
-
|
|
945
954
|
deregister() {
|
|
946
955
|
return deregister$2.call(root, this);
|
|
947
956
|
},
|
|
948
|
-
|
|
949
957
|
mountBreakpoint() {
|
|
950
958
|
const value = this.breakpoint;
|
|
951
959
|
const handler = this.handleBreakpoint.bind(this);
|
|
952
960
|
breakpoint.mount(value, handler);
|
|
953
961
|
return this;
|
|
954
962
|
},
|
|
955
|
-
|
|
956
963
|
unmountBreakpoint() {
|
|
957
964
|
breakpoint.unmount();
|
|
958
965
|
return this;
|
|
959
966
|
},
|
|
960
|
-
|
|
961
967
|
handleBreakpoint(event) {
|
|
962
968
|
this.mode = event.matches ? 'inline' : 'modal';
|
|
963
969
|
return this;
|
|
964
970
|
},
|
|
965
|
-
|
|
966
971
|
getSetting(key) {
|
|
967
972
|
return key in this.settings ? this.settings[key] : root.settings[key];
|
|
968
973
|
}
|
|
974
|
+
};
|
|
969
975
|
|
|
970
|
-
|
|
971
|
-
|
|
976
|
+
// Setup the drawer object.
|
|
972
977
|
const entry = _extends({
|
|
973
978
|
id: el.id,
|
|
974
979
|
el: el,
|
|
975
980
|
dialog: dialog,
|
|
976
981
|
trigger: null,
|
|
977
982
|
settings: getConfig$1(el, this.settings.dataConfig),
|
|
978
|
-
|
|
979
983
|
get breakpoint() {
|
|
980
984
|
return getBreakpoint.call(root, el);
|
|
981
985
|
},
|
|
982
|
-
|
|
983
986
|
get state() {
|
|
984
987
|
return __state;
|
|
985
988
|
},
|
|
986
|
-
|
|
987
989
|
set state(value) {
|
|
988
|
-
__state = value;
|
|
989
|
-
|
|
990
|
+
__state = value;
|
|
991
|
+
// Save 'opened' and 'closed' states to store if mode is inline.
|
|
990
992
|
if (value === 'opened' || value === 'closed') {
|
|
991
993
|
if (this.mode === 'inline') root.store.set(this.id, this.state);
|
|
992
994
|
}
|
|
993
995
|
},
|
|
994
|
-
|
|
995
996
|
get mode() {
|
|
996
997
|
return __mode;
|
|
997
998
|
},
|
|
998
|
-
|
|
999
999
|
set mode(value) {
|
|
1000
1000
|
__mode = value;
|
|
1001
1001
|
switchMode.call(root, this);
|
|
1002
1002
|
}
|
|
1003
|
+
}, methods);
|
|
1003
1004
|
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
|
|
1005
|
+
// Create the state var with the initial state.
|
|
1006
|
+
let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed';
|
|
1011
1007
|
|
|
1008
|
+
// Create the mode var with the initial mode.
|
|
1009
|
+
let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline';
|
|
1012
1010
|
|
|
1011
|
+
// Setup mode specific attributes.
|
|
1013
1012
|
if (entry.mode === 'modal') {
|
|
1014
1013
|
// Set aria-modal attribute to true.
|
|
1015
1014
|
entry.dialog.setAttribute('aria-modal', 'true');
|
|
1016
1015
|
} else {
|
|
1017
1016
|
// Remove the aria-modal attribute.
|
|
1018
1017
|
entry.dialog.removeAttribute('aria-modal');
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1018
|
+
}
|
|
1021
1019
|
|
|
1020
|
+
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1022
1021
|
if (entry.getSetting('setTabindex')) {
|
|
1023
1022
|
entry.dialog.setAttribute('tabindex', '-1');
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1023
|
+
}
|
|
1026
1024
|
|
|
1027
|
-
|
|
1025
|
+
// Add entry to collection.
|
|
1026
|
+
this.collection.push(entry);
|
|
1028
1027
|
|
|
1028
|
+
// If the entry has a breakpoint...
|
|
1029
1029
|
if (entry.breakpoint) {
|
|
1030
1030
|
// Mount media query breakpoint functionality.
|
|
1031
1031
|
entry.mountBreakpoint();
|
|
1032
1032
|
} else {
|
|
1033
1033
|
// Else, Setup initial state.
|
|
1034
1034
|
await initialState.call(this, entry);
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1035
|
+
}
|
|
1037
1036
|
|
|
1037
|
+
// Return the registered entry.
|
|
1038
1038
|
return entry;
|
|
1039
1039
|
}
|
|
1040
1040
|
|
|
1041
1041
|
var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
1042
|
-
|
|
1043
1042
|
var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
1044
|
-
|
|
1045
1043
|
class Drawer extends Collection {
|
|
1046
1044
|
constructor(options) {
|
|
1047
1045
|
super();
|
|
@@ -1055,81 +1053,71 @@ class Drawer extends Collection {
|
|
|
1055
1053
|
});
|
|
1056
1054
|
this.defaults = defaults$2;
|
|
1057
1055
|
this.settings = _extends({}, this.defaults, options);
|
|
1058
|
-
this.focusTrap = new FocusTrap();
|
|
1056
|
+
this.focusTrap = new FocusTrap();
|
|
1059
1057
|
|
|
1058
|
+
// Setup local store for inline drawer state management.
|
|
1060
1059
|
this.store = localStore(this.settings.storeKey, this.settings.store);
|
|
1061
1060
|
_classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(this);
|
|
1062
1061
|
_classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(this);
|
|
1063
1062
|
if (this.settings.autoInit) this.init();
|
|
1064
1063
|
}
|
|
1065
|
-
|
|
1066
1064
|
get activeModal() {
|
|
1067
1065
|
return this.collection.find(entry => {
|
|
1068
1066
|
return entry.state === 'opened' && entry.mode === 'modal';
|
|
1069
1067
|
});
|
|
1070
1068
|
}
|
|
1071
|
-
|
|
1072
1069
|
async init(options = null) {
|
|
1073
1070
|
// Update settings with passed options.
|
|
1074
|
-
if (options) this.settings = _extends({}, this.settings, options);
|
|
1071
|
+
if (options) this.settings = _extends({}, this.settings, options);
|
|
1075
1072
|
|
|
1076
|
-
|
|
1073
|
+
// Get all the modals.
|
|
1074
|
+
const drawers = document.querySelectorAll(this.settings.selectorDrawer);
|
|
1077
1075
|
|
|
1078
|
-
|
|
1076
|
+
// Register the collections array with modal instances.
|
|
1077
|
+
await this.registerCollection(drawers);
|
|
1079
1078
|
|
|
1079
|
+
// If eventListeners are enabled, init event listeners.
|
|
1080
1080
|
if (this.settings.eventListeners) {
|
|
1081
1081
|
this.initEventListeners();
|
|
1082
1082
|
}
|
|
1083
|
-
|
|
1084
1083
|
return this;
|
|
1085
1084
|
}
|
|
1086
|
-
|
|
1087
1085
|
async destroy() {
|
|
1088
1086
|
// Remove all entries from the collection.
|
|
1089
|
-
await this.deregisterCollection();
|
|
1087
|
+
await this.deregisterCollection();
|
|
1090
1088
|
|
|
1089
|
+
// If eventListeners are enabled, init event listeners.
|
|
1091
1090
|
if (this.settings.eventListeners) {
|
|
1092
1091
|
this.destroyEventListeners();
|
|
1093
1092
|
}
|
|
1094
|
-
|
|
1095
1093
|
return this;
|
|
1096
1094
|
}
|
|
1097
|
-
|
|
1098
1095
|
initEventListeners() {
|
|
1099
1096
|
document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1100
|
-
document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1101
1097
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1102
1098
|
}
|
|
1103
|
-
|
|
1104
1099
|
destroyEventListeners() {
|
|
1105
1100
|
document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1106
|
-
document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1107
1101
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1108
1102
|
}
|
|
1109
|
-
|
|
1110
1103
|
register(query) {
|
|
1111
1104
|
const els = getDrawerElements.call(this, query);
|
|
1112
1105
|
if (els.error) return Promise.reject(els.error);
|
|
1113
1106
|
return register$2.call(this, els.drawer, els.dialog);
|
|
1114
1107
|
}
|
|
1115
|
-
|
|
1116
1108
|
deregister(query) {
|
|
1117
1109
|
const entry = this.get(getDrawerID.call(this, query));
|
|
1118
1110
|
return deregister$2.call(this, entry);
|
|
1119
1111
|
}
|
|
1120
|
-
|
|
1121
1112
|
open(id, transition, focus) {
|
|
1122
1113
|
return open$2.call(this, id, transition, focus);
|
|
1123
1114
|
}
|
|
1124
|
-
|
|
1125
1115
|
close(id, transition, focus) {
|
|
1126
1116
|
return close$2.call(this, id, transition, focus);
|
|
1127
1117
|
}
|
|
1128
|
-
|
|
1129
1118
|
toggle(id, transition, focus) {
|
|
1130
1119
|
return toggle.call(this, id, transition, focus);
|
|
1131
1120
|
}
|
|
1132
|
-
|
|
1133
1121
|
}
|
|
1134
1122
|
|
|
1135
1123
|
var defaults$1 = {
|
|
@@ -1162,8 +1150,9 @@ var defaults$1 = {
|
|
|
1162
1150
|
|
|
1163
1151
|
function getModal(query) {
|
|
1164
1152
|
// Get the entry from collection.
|
|
1165
|
-
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1153
|
+
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1166
1154
|
|
|
1155
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
1167
1156
|
if (entry) {
|
|
1168
1157
|
return entry;
|
|
1169
1158
|
} else {
|
|
@@ -1175,37 +1164,49 @@ function getModalID(obj) {
|
|
|
1175
1164
|
// If it's a string, return the string.
|
|
1176
1165
|
if (typeof obj === 'string') {
|
|
1177
1166
|
return obj;
|
|
1178
|
-
}
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
// If it's an HTML element.
|
|
1179
1170
|
else if (typeof obj.hasAttribute === 'function') {
|
|
1180
1171
|
// If it's a modal open trigger, return data value.
|
|
1181
1172
|
if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
|
|
1182
1173
|
return obj.getAttribute(`data-${this.settings.dataOpen}`);
|
|
1183
|
-
}
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
// If it's a modal close trigger, return data value or false.
|
|
1184
1177
|
else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
|
|
1185
1178
|
return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
|
|
1186
|
-
}
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
// If it's a modal replace trigger, return data value.
|
|
1187
1182
|
else if (obj.hasAttribute(`data-${this.settings.dataReplace}`)) {
|
|
1188
1183
|
return obj.getAttribute(`data-${this.settings.dataReplace}`);
|
|
1189
|
-
}
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1186
|
+
// If it's a modal element, return the id.
|
|
1190
1187
|
else if (obj.closest(this.settings.selectorModal)) {
|
|
1191
1188
|
obj = obj.closest(this.settings.selectorModal);
|
|
1192
1189
|
return obj.id || false;
|
|
1193
|
-
}
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
// Return false if no id was found.
|
|
1194
1193
|
else return false;
|
|
1195
|
-
}
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
// If it has an id property, return its value.
|
|
1196
1197
|
else if (obj.id) {
|
|
1197
1198
|
return obj.id;
|
|
1198
|
-
}
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
// Return false if no id was found.
|
|
1199
1202
|
else return false;
|
|
1200
1203
|
}
|
|
1201
1204
|
|
|
1202
1205
|
function getModalElements(query) {
|
|
1203
1206
|
const id = getModalID.call(this, query);
|
|
1204
|
-
|
|
1205
1207
|
if (id) {
|
|
1206
1208
|
const modal = document.querySelector(`#${id}`);
|
|
1207
1209
|
const dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
|
|
1208
|
-
|
|
1209
1210
|
if (!modal && !dialog) {
|
|
1210
1211
|
return {
|
|
1211
1212
|
error: new Error(`No modal elements found using the ID: "${id}".`)
|
|
@@ -1238,7 +1239,6 @@ function updateFocusState() {
|
|
|
1238
1239
|
this.trigger.focus();
|
|
1239
1240
|
this.trigger = null;
|
|
1240
1241
|
}
|
|
1241
|
-
|
|
1242
1242
|
this.focusTrap.unmount();
|
|
1243
1243
|
}
|
|
1244
1244
|
}
|
|
@@ -1246,30 +1246,28 @@ function updateFocusState() {
|
|
|
1246
1246
|
async function handleClick$1(event) {
|
|
1247
1247
|
// If an open or replace button was clicked, open or replace the modal.
|
|
1248
1248
|
let trigger = event.target.closest(`[data-${this.settings.dataOpen}], [data-${this.settings.dataReplace}]`);
|
|
1249
|
-
|
|
1250
1249
|
if (trigger) {
|
|
1251
|
-
event.preventDefault();
|
|
1252
|
-
|
|
1250
|
+
event.preventDefault();
|
|
1251
|
+
// Save the trigger if it's not coming from inside a modal.
|
|
1253
1252
|
const fromModal = event.target.closest(this.settings.selectorModal);
|
|
1254
|
-
if (!fromModal) this.trigger = trigger;
|
|
1255
|
-
|
|
1256
|
-
const modal = this.get(getModalID.call(this, trigger));
|
|
1257
|
-
|
|
1253
|
+
if (!fromModal) this.trigger = trigger;
|
|
1254
|
+
// Get the modal.
|
|
1255
|
+
const modal = this.get(getModalID.call(this, trigger));
|
|
1256
|
+
// Depending on the button type, either open or replace the modal.
|
|
1258
1257
|
return trigger.matches(`[data-${this.settings.dataOpen}]`) ? modal.open() : modal.replace();
|
|
1259
|
-
}
|
|
1260
|
-
|
|
1258
|
+
}
|
|
1261
1259
|
|
|
1260
|
+
// If a close button was clicked, close the modal.
|
|
1262
1261
|
trigger = event.target.closest(`[data-${this.settings.dataClose}]`);
|
|
1263
|
-
|
|
1264
1262
|
if (trigger) {
|
|
1265
|
-
event.preventDefault();
|
|
1266
|
-
|
|
1267
|
-
const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
|
|
1268
|
-
|
|
1263
|
+
event.preventDefault();
|
|
1264
|
+
// Get the value of the data attribute.
|
|
1265
|
+
const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
|
|
1266
|
+
// Close all if * wildcard is passed, otherwise close a single modal.
|
|
1269
1267
|
return value === '*' ? this.closeAll() : this.close(value);
|
|
1270
|
-
}
|
|
1271
|
-
|
|
1268
|
+
}
|
|
1272
1269
|
|
|
1270
|
+
// If the modal screen was clicked, close the modal.
|
|
1273
1271
|
if (event.target.matches(this.settings.selectorModal) && !event.target.querySelector(this.settings.selectorRequired)) {
|
|
1274
1272
|
return this.close(getModalID.call(this, event.target));
|
|
1275
1273
|
}
|
|
@@ -1286,109 +1284,125 @@ function handleKeydown$1(event) {
|
|
|
1286
1284
|
|
|
1287
1285
|
async function deregister$1(obj, close = true) {
|
|
1288
1286
|
// Return collection if nothing was passed.
|
|
1289
|
-
if (!obj) return this.collection;
|
|
1287
|
+
if (!obj) return this.collection;
|
|
1290
1288
|
|
|
1289
|
+
// Check if entry has been registered in the collection.
|
|
1291
1290
|
const index = this.collection.findIndex(entry => {
|
|
1292
1291
|
return entry.id === obj.id;
|
|
1293
1292
|
});
|
|
1294
|
-
|
|
1295
1293
|
if (index >= 0) {
|
|
1296
1294
|
// Get the collection entry.
|
|
1297
|
-
const entry = this.collection[index];
|
|
1295
|
+
const entry = this.collection[index];
|
|
1298
1296
|
|
|
1297
|
+
// If entry is in the opened state, close it.
|
|
1299
1298
|
if (close && entry.state === 'opened') {
|
|
1300
1299
|
await entry.close(false);
|
|
1301
1300
|
} else {
|
|
1302
1301
|
// Remove modal from stack.
|
|
1303
1302
|
this.stack.remove(entry);
|
|
1304
|
-
}
|
|
1305
|
-
|
|
1303
|
+
}
|
|
1306
1304
|
|
|
1305
|
+
// Return teleported modal if a reference has been set.
|
|
1307
1306
|
if (entry.getSetting('teleport')) {
|
|
1308
1307
|
entry.teleportReturn();
|
|
1309
|
-
}
|
|
1310
|
-
|
|
1308
|
+
}
|
|
1311
1309
|
|
|
1310
|
+
// Delete properties from collection entry.
|
|
1312
1311
|
Object.getOwnPropertyNames(entry).forEach(prop => {
|
|
1313
1312
|
delete entry[prop];
|
|
1314
|
-
});
|
|
1313
|
+
});
|
|
1315
1314
|
|
|
1315
|
+
// Remove entry from collection.
|
|
1316
1316
|
this.collection.splice(index, 1);
|
|
1317
|
-
}
|
|
1318
|
-
|
|
1317
|
+
}
|
|
1319
1318
|
|
|
1319
|
+
// Return the modified collection.
|
|
1320
1320
|
return this.collection;
|
|
1321
1321
|
}
|
|
1322
1322
|
|
|
1323
1323
|
async function open$1(query, transition, focus = true) {
|
|
1324
1324
|
// Get the modal from collection.
|
|
1325
|
-
const modal = getModal.call(this, query);
|
|
1326
|
-
|
|
1327
|
-
const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
|
|
1325
|
+
const modal = getModal.call(this, query);
|
|
1328
1326
|
|
|
1327
|
+
// Get the modal configuration.
|
|
1328
|
+
const config = _extends({}, this.settings, modal.settings);
|
|
1329
1329
|
|
|
1330
|
-
|
|
1330
|
+
// Add transition parameter to configuration.
|
|
1331
|
+
if (transition !== undefined) config.transition = transition;
|
|
1331
1332
|
|
|
1332
|
-
|
|
1333
|
+
// Maybe add modal to top of stack.
|
|
1334
|
+
this.stack.moveToTop(modal);
|
|
1333
1335
|
|
|
1336
|
+
// If modal is closed.
|
|
1334
1337
|
if (modal.state === 'closed') {
|
|
1335
1338
|
// Update modal state.
|
|
1336
|
-
modal.state = 'opening';
|
|
1339
|
+
modal.state = 'opening';
|
|
1337
1340
|
|
|
1338
|
-
|
|
1341
|
+
// Add modal to stack.
|
|
1342
|
+
this.stack.add(modal);
|
|
1339
1343
|
|
|
1340
|
-
|
|
1344
|
+
// Run the open transition.
|
|
1345
|
+
await openTransition(modal.el, config);
|
|
1341
1346
|
|
|
1347
|
+
// Update modal state.
|
|
1342
1348
|
modal.state = 'opened';
|
|
1343
|
-
}
|
|
1344
|
-
|
|
1349
|
+
}
|
|
1345
1350
|
|
|
1351
|
+
// Update focus if the focus param is true.
|
|
1346
1352
|
if (focus) {
|
|
1347
1353
|
updateFocusState.call(this);
|
|
1348
|
-
}
|
|
1349
|
-
|
|
1354
|
+
}
|
|
1350
1355
|
|
|
1356
|
+
// Dispatch custom opened event.
|
|
1351
1357
|
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
|
|
1352
1358
|
detail: this,
|
|
1353
1359
|
bubbles: true
|
|
1354
|
-
}));
|
|
1360
|
+
}));
|
|
1355
1361
|
|
|
1362
|
+
// Return the modal.
|
|
1356
1363
|
return modal;
|
|
1357
1364
|
}
|
|
1358
1365
|
|
|
1359
1366
|
async function close$1(query, transition, focus = true) {
|
|
1360
1367
|
// Get the modal from collection, or top modal in stack if no query is provided.
|
|
1361
|
-
const modal = query ? getModal.call(this, query) : this.active;
|
|
1368
|
+
const modal = query ? getModal.call(this, query) : this.active;
|
|
1362
1369
|
|
|
1370
|
+
// If a modal exists and its state is opened.
|
|
1363
1371
|
if (modal && modal.state === 'opened') {
|
|
1364
1372
|
// Update modal state.
|
|
1365
|
-
modal.state = 'closing';
|
|
1366
|
-
|
|
1367
|
-
const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
|
|
1373
|
+
modal.state = 'closing';
|
|
1368
1374
|
|
|
1375
|
+
// Get the modal configuration.
|
|
1376
|
+
const config = _extends({}, this.settings, modal.settings);
|
|
1369
1377
|
|
|
1370
|
-
|
|
1378
|
+
// Add transition parameter to configuration.
|
|
1379
|
+
if (transition !== undefined) config.transition = transition;
|
|
1371
1380
|
|
|
1372
|
-
|
|
1381
|
+
// Remove focus from active element.
|
|
1382
|
+
document.activeElement.blur();
|
|
1373
1383
|
|
|
1374
|
-
|
|
1384
|
+
// Run the close transition.
|
|
1385
|
+
await closeTransition(modal.el, config);
|
|
1375
1386
|
|
|
1376
|
-
|
|
1387
|
+
// Remove modal from stack.
|
|
1388
|
+
this.stack.remove(modal);
|
|
1377
1389
|
|
|
1390
|
+
// Update focus if the focus param is true.
|
|
1378
1391
|
if (focus) {
|
|
1379
1392
|
updateFocusState.call(this);
|
|
1380
|
-
}
|
|
1381
|
-
|
|
1393
|
+
}
|
|
1382
1394
|
|
|
1383
|
-
|
|
1395
|
+
// Update modal state.
|
|
1396
|
+
modal.state = 'closed';
|
|
1384
1397
|
|
|
1398
|
+
// Dispatch custom closed event.
|
|
1385
1399
|
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
|
|
1386
1400
|
detail: this,
|
|
1387
1401
|
bubbles: true
|
|
1388
1402
|
}));
|
|
1389
|
-
}
|
|
1390
|
-
|
|
1403
|
+
}
|
|
1391
1404
|
|
|
1405
|
+
// Return the modal.
|
|
1392
1406
|
return modal;
|
|
1393
1407
|
}
|
|
1394
1408
|
|
|
@@ -1400,7 +1414,6 @@ async function closeAll$1(exclude, transition) {
|
|
|
1400
1414
|
} else {
|
|
1401
1415
|
result.push(await close$1.call(this, modal, transition, false));
|
|
1402
1416
|
}
|
|
1403
|
-
|
|
1404
1417
|
modal.trigger = null;
|
|
1405
1418
|
}));
|
|
1406
1419
|
return result;
|
|
@@ -1408,10 +1421,10 @@ async function closeAll$1(exclude, transition) {
|
|
|
1408
1421
|
|
|
1409
1422
|
async function replace(query, transition, focus = true) {
|
|
1410
1423
|
// Get the modal from collection.
|
|
1411
|
-
const modal = getModal.call(this, query);
|
|
1424
|
+
const modal = getModal.call(this, query);
|
|
1412
1425
|
|
|
1426
|
+
// Setup results for return.
|
|
1413
1427
|
let resultOpened, resultClosed;
|
|
1414
|
-
|
|
1415
1428
|
if (modal.state === 'opened') {
|
|
1416
1429
|
// If modal is open, close all modals except for replacement.
|
|
1417
1430
|
resultOpened = modal;
|
|
@@ -1421,14 +1434,14 @@ async function replace(query, transition, focus = true) {
|
|
|
1421
1434
|
resultOpened = open$1.call(this, modal, transition, false);
|
|
1422
1435
|
resultClosed = closeAll$1.call(this, false, transition);
|
|
1423
1436
|
await Promise.all([resultOpened, resultClosed]);
|
|
1424
|
-
}
|
|
1425
|
-
|
|
1437
|
+
}
|
|
1426
1438
|
|
|
1439
|
+
// Update focus if the focus param is true.
|
|
1427
1440
|
if (focus) {
|
|
1428
1441
|
updateFocusState.call(this);
|
|
1429
|
-
}
|
|
1430
|
-
|
|
1442
|
+
}
|
|
1431
1443
|
|
|
1444
|
+
// Return the modals there were opened and closed.
|
|
1432
1445
|
return {
|
|
1433
1446
|
opened: resultOpened,
|
|
1434
1447
|
closed: resultClosed
|
|
@@ -1437,27 +1450,25 @@ async function replace(query, transition, focus = true) {
|
|
|
1437
1450
|
|
|
1438
1451
|
async function register$1(el, dialog) {
|
|
1439
1452
|
// Deregister entry incase it has already been registered.
|
|
1440
|
-
await deregister$1.call(this, el, false);
|
|
1453
|
+
await deregister$1.call(this, el, false);
|
|
1441
1454
|
|
|
1442
|
-
|
|
1455
|
+
// Save root this for use inside methods API.
|
|
1456
|
+
const root = this;
|
|
1443
1457
|
|
|
1458
|
+
// Setup methods API.
|
|
1444
1459
|
const methods = {
|
|
1445
1460
|
open(transition, focus) {
|
|
1446
1461
|
return open$1.call(root, this, transition, focus);
|
|
1447
1462
|
},
|
|
1448
|
-
|
|
1449
1463
|
close(transition, focus) {
|
|
1450
1464
|
return close$1.call(root, this, transition, focus);
|
|
1451
1465
|
},
|
|
1452
|
-
|
|
1453
1466
|
replace(transition, focus) {
|
|
1454
1467
|
return replace.call(root, this, transition, focus);
|
|
1455
1468
|
},
|
|
1456
|
-
|
|
1457
1469
|
deregister() {
|
|
1458
1470
|
return deregister$1.call(root, this);
|
|
1459
1471
|
},
|
|
1460
|
-
|
|
1461
1472
|
teleport(ref = this.getSetting('teleport'), method = this.getSetting('teleportMethod')) {
|
|
1462
1473
|
if (!this.returnRef) {
|
|
1463
1474
|
this.returnRef = teleport(this.el, ref, method);
|
|
@@ -1467,7 +1478,6 @@ async function register$1(el, dialog) {
|
|
|
1467
1478
|
return false;
|
|
1468
1479
|
}
|
|
1469
1480
|
},
|
|
1470
|
-
|
|
1471
1481
|
teleportReturn() {
|
|
1472
1482
|
if (this.returnRef) {
|
|
1473
1483
|
this.returnRef = teleport(this.el, this.returnRef);
|
|
@@ -1477,13 +1487,12 @@ async function register$1(el, dialog) {
|
|
|
1477
1487
|
return false;
|
|
1478
1488
|
}
|
|
1479
1489
|
},
|
|
1480
|
-
|
|
1481
1490
|
getSetting(key) {
|
|
1482
1491
|
return key in this.settings ? this.settings[key] : root.settings[key];
|
|
1483
1492
|
}
|
|
1493
|
+
};
|
|
1484
1494
|
|
|
1485
|
-
|
|
1486
|
-
|
|
1495
|
+
// Setup the modal object.
|
|
1487
1496
|
const entry = _extends({
|
|
1488
1497
|
id: el.id,
|
|
1489
1498
|
state: 'closed',
|
|
@@ -1491,40 +1500,42 @@ async function register$1(el, dialog) {
|
|
|
1491
1500
|
dialog: dialog,
|
|
1492
1501
|
returnRef: null,
|
|
1493
1502
|
settings: getConfig$1(el, this.settings.dataConfig)
|
|
1494
|
-
}, methods);
|
|
1495
|
-
|
|
1503
|
+
}, methods);
|
|
1496
1504
|
|
|
1497
|
-
|
|
1505
|
+
// Set aria-modal attribute to true.
|
|
1506
|
+
entry.dialog.setAttribute('aria-modal', 'true');
|
|
1498
1507
|
|
|
1508
|
+
// If a role attribute is not set, set it to "dialog" as the default.
|
|
1499
1509
|
if (!entry.dialog.hasAttribute('role')) {
|
|
1500
1510
|
entry.dialog.setAttribute('role', 'dialog');
|
|
1501
|
-
}
|
|
1502
|
-
|
|
1511
|
+
}
|
|
1503
1512
|
|
|
1513
|
+
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1504
1514
|
if (entry.getSetting('setTabindex')) {
|
|
1505
1515
|
entry.dialog.setAttribute('tabindex', '-1');
|
|
1506
|
-
}
|
|
1507
|
-
|
|
1516
|
+
}
|
|
1508
1517
|
|
|
1518
|
+
// Teleport modal if a reference has been set.
|
|
1509
1519
|
if (entry.getSetting('teleport')) {
|
|
1510
1520
|
entry.teleport();
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1521
|
+
}
|
|
1513
1522
|
|
|
1514
|
-
|
|
1523
|
+
// Add entry to collection.
|
|
1524
|
+
this.collection.push(entry);
|
|
1515
1525
|
|
|
1526
|
+
// Setup initial state.
|
|
1516
1527
|
if (entry.el.classList.contains(this.settings.stateOpened)) {
|
|
1517
1528
|
// Open entry with transitions disabled.
|
|
1518
1529
|
await entry.open(false);
|
|
1519
1530
|
} else {
|
|
1520
1531
|
// Remove transition state classes.
|
|
1521
1532
|
entry.el.classList.remove(this.settings.stateOpening);
|
|
1522
|
-
entry.el.classList.remove(this.settings.stateClosing);
|
|
1523
|
-
|
|
1533
|
+
entry.el.classList.remove(this.settings.stateClosing);
|
|
1534
|
+
// Add closed state class.
|
|
1524
1535
|
entry.el.classList.add(this.settings.stateClosed);
|
|
1525
|
-
}
|
|
1526
|
-
|
|
1536
|
+
}
|
|
1527
1537
|
|
|
1538
|
+
// Return the registered entry.
|
|
1528
1539
|
return entry;
|
|
1529
1540
|
}
|
|
1530
1541
|
|
|
@@ -1534,11 +1545,9 @@ function stack(settings) {
|
|
|
1534
1545
|
get value() {
|
|
1535
1546
|
return [...stackArray];
|
|
1536
1547
|
},
|
|
1537
|
-
|
|
1538
1548
|
get top() {
|
|
1539
1549
|
return stackArray[stackArray.length - 1];
|
|
1540
1550
|
},
|
|
1541
|
-
|
|
1542
1551
|
updateIndex() {
|
|
1543
1552
|
stackArray.forEach((entry, index) => {
|
|
1544
1553
|
entry.el.style.zIndex = null;
|
|
@@ -1546,60 +1555,60 @@ function stack(settings) {
|
|
|
1546
1555
|
entry.el.style.zIndex = parseInt(value) + index + 1;
|
|
1547
1556
|
});
|
|
1548
1557
|
},
|
|
1549
|
-
|
|
1550
1558
|
updateGlobalState() {
|
|
1551
1559
|
updateGlobalState(this.top, settings);
|
|
1552
1560
|
this.updateIndex();
|
|
1553
1561
|
},
|
|
1554
|
-
|
|
1555
1562
|
add(entry) {
|
|
1556
1563
|
// Apply z-index styles based on stack length.
|
|
1557
1564
|
entry.el.style.zIndex = null;
|
|
1558
1565
|
const value = getComputedStyle(entry.el)['z-index'];
|
|
1559
|
-
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
1566
|
+
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
1560
1567
|
|
|
1561
|
-
|
|
1568
|
+
// Move back to end of stack.
|
|
1569
|
+
stackArray.push(entry);
|
|
1562
1570
|
|
|
1571
|
+
// Update the global state.
|
|
1563
1572
|
this.updateGlobalState();
|
|
1564
1573
|
},
|
|
1565
|
-
|
|
1566
1574
|
remove(entry) {
|
|
1567
1575
|
// Get the index of the entry.
|
|
1568
1576
|
const index = stackArray.findIndex(item => {
|
|
1569
1577
|
return item.id === entry.id;
|
|
1570
|
-
});
|
|
1578
|
+
});
|
|
1571
1579
|
|
|
1580
|
+
// If entry is in stack...
|
|
1572
1581
|
if (index >= 0) {
|
|
1573
1582
|
// Remove z-index styles.
|
|
1574
|
-
entry.el.style.zIndex = null;
|
|
1583
|
+
entry.el.style.zIndex = null;
|
|
1575
1584
|
|
|
1576
|
-
|
|
1585
|
+
// Remove entry from stack array.
|
|
1586
|
+
stackArray.splice(index, 1);
|
|
1577
1587
|
|
|
1588
|
+
// Update the global state.
|
|
1578
1589
|
this.updateGlobalState();
|
|
1579
1590
|
}
|
|
1580
1591
|
},
|
|
1581
|
-
|
|
1582
1592
|
moveToTop(entry) {
|
|
1583
1593
|
// Get the index of the entry.
|
|
1584
1594
|
const index = stackArray.findIndex(item => {
|
|
1585
1595
|
return item.id === entry.id;
|
|
1586
|
-
});
|
|
1596
|
+
});
|
|
1587
1597
|
|
|
1598
|
+
// If entry is in stack...
|
|
1588
1599
|
if (index >= 0) {
|
|
1589
1600
|
// Remove entry from stack array.
|
|
1590
|
-
stackArray.splice(index, 1);
|
|
1601
|
+
stackArray.splice(index, 1);
|
|
1591
1602
|
|
|
1603
|
+
// Add entry back to top of stack.
|
|
1592
1604
|
this.add(entry);
|
|
1593
1605
|
}
|
|
1594
1606
|
}
|
|
1595
|
-
|
|
1596
1607
|
};
|
|
1597
1608
|
}
|
|
1598
1609
|
|
|
1599
1610
|
var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
1600
|
-
|
|
1601
1611
|
var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
1602
|
-
|
|
1603
1612
|
class Modal extends Collection {
|
|
1604
1613
|
constructor(options) {
|
|
1605
1614
|
super();
|
|
@@ -1614,91 +1623,80 @@ class Modal extends Collection {
|
|
|
1614
1623
|
this.defaults = defaults$1;
|
|
1615
1624
|
this.settings = _extends({}, this.defaults, options);
|
|
1616
1625
|
this.trigger = null;
|
|
1617
|
-
this.focusTrap = new FocusTrap();
|
|
1626
|
+
this.focusTrap = new FocusTrap();
|
|
1618
1627
|
|
|
1628
|
+
// Setup stack module.
|
|
1619
1629
|
this.stack = stack(this.settings);
|
|
1620
1630
|
_classPrivateFieldLooseBase(this, _handleClick)[_handleClick] = handleClick$1.bind(this);
|
|
1621
1631
|
_classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(this);
|
|
1622
1632
|
if (this.settings.autoInit) this.init();
|
|
1623
1633
|
}
|
|
1624
|
-
|
|
1625
1634
|
get active() {
|
|
1626
1635
|
return this.stack.top;
|
|
1627
1636
|
}
|
|
1628
|
-
|
|
1629
1637
|
async init(options) {
|
|
1630
1638
|
// Update settings with passed options.
|
|
1631
|
-
if (options) this.settings = _extends({}, this.settings, options);
|
|
1639
|
+
if (options) this.settings = _extends({}, this.settings, options);
|
|
1632
1640
|
|
|
1633
|
-
|
|
1641
|
+
// Get all the modals.
|
|
1642
|
+
const modals = document.querySelectorAll(this.settings.selectorModal);
|
|
1634
1643
|
|
|
1635
|
-
|
|
1644
|
+
// Register the collections array with modal instances.
|
|
1645
|
+
await this.registerCollection(modals);
|
|
1636
1646
|
|
|
1647
|
+
// If eventListeners are enabled, init event listeners.
|
|
1637
1648
|
if (this.settings.eventListeners) {
|
|
1638
1649
|
this.initEventListeners();
|
|
1639
1650
|
}
|
|
1640
|
-
|
|
1641
1651
|
return this;
|
|
1642
1652
|
}
|
|
1643
|
-
|
|
1644
1653
|
async destroy() {
|
|
1645
1654
|
// Clear stored trigger.
|
|
1646
|
-
this.trigger = null;
|
|
1655
|
+
this.trigger = null;
|
|
1647
1656
|
|
|
1648
|
-
|
|
1657
|
+
// Remove all entries from the collection.
|
|
1658
|
+
await this.deregisterCollection();
|
|
1649
1659
|
|
|
1660
|
+
// If eventListeners are enabled, destroy event listeners.
|
|
1650
1661
|
if (this.settings.eventListeners) {
|
|
1651
1662
|
this.destroyEventListeners();
|
|
1652
1663
|
}
|
|
1653
|
-
|
|
1654
1664
|
return this;
|
|
1655
1665
|
}
|
|
1656
|
-
|
|
1657
1666
|
initEventListeners() {
|
|
1658
1667
|
document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1659
|
-
document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1660
1668
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
1661
1669
|
}
|
|
1662
|
-
|
|
1663
1670
|
destroyEventListeners() {
|
|
1664
1671
|
document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1665
|
-
document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
1666
1672
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
1667
1673
|
}
|
|
1668
|
-
|
|
1669
1674
|
register(query) {
|
|
1670
1675
|
const els = getModalElements.call(this, query);
|
|
1671
1676
|
if (els.error) return Promise.reject(els.error);
|
|
1672
1677
|
return register$1.call(this, els.modal, els.dialog);
|
|
1673
1678
|
}
|
|
1674
|
-
|
|
1675
1679
|
deregister(query) {
|
|
1676
1680
|
const modal = this.get(getModalID.call(this, query));
|
|
1677
1681
|
return deregister$1.call(this, modal);
|
|
1678
1682
|
}
|
|
1679
|
-
|
|
1680
1683
|
open(id, transition, focus) {
|
|
1681
1684
|
return open$1.call(this, id, transition, focus);
|
|
1682
1685
|
}
|
|
1683
|
-
|
|
1684
1686
|
close(id, transition, focus) {
|
|
1685
1687
|
return close$1.call(this, id, transition, focus);
|
|
1686
1688
|
}
|
|
1687
|
-
|
|
1688
1689
|
replace(id, transition, focus) {
|
|
1689
1690
|
return replace.call(this, id, transition, focus);
|
|
1690
1691
|
}
|
|
1691
|
-
|
|
1692
1692
|
async closeAll(exclude = false, transition, focus = true) {
|
|
1693
|
-
const result = await closeAll$1.call(this, exclude, transition);
|
|
1694
|
-
|
|
1693
|
+
const result = await closeAll$1.call(this, exclude, transition);
|
|
1694
|
+
// Update focus if the focus param is true.
|
|
1695
1695
|
if (focus) {
|
|
1696
1696
|
updateFocusState.call(this);
|
|
1697
1697
|
}
|
|
1698
|
-
|
|
1699
1698
|
return result;
|
|
1700
1699
|
}
|
|
1701
|
-
|
|
1702
1700
|
}
|
|
1703
1701
|
|
|
1704
1702
|
var defaults = {
|
|
@@ -1716,8 +1714,9 @@ var defaults = {
|
|
|
1716
1714
|
|
|
1717
1715
|
function getConfig(el, settings) {
|
|
1718
1716
|
// Get the computed styles of the element.
|
|
1719
|
-
const styles = getComputedStyle(el);
|
|
1717
|
+
const styles = getComputedStyle(el);
|
|
1720
1718
|
|
|
1719
|
+
// Setup the config obj with default values.
|
|
1721
1720
|
const config = {
|
|
1722
1721
|
'placement': settings.placement,
|
|
1723
1722
|
'event': settings.eventType,
|
|
@@ -1726,36 +1725,40 @@ function getConfig(el, settings) {
|
|
|
1726
1725
|
'flip-padding': 0,
|
|
1727
1726
|
'arrow-element': settings.selectorArrow,
|
|
1728
1727
|
'arrow-padding': 0
|
|
1729
|
-
};
|
|
1728
|
+
};
|
|
1730
1729
|
|
|
1730
|
+
// Loop through config obj.
|
|
1731
1731
|
for (const prop in config) {
|
|
1732
1732
|
// Get the CSS variable property values.
|
|
1733
1733
|
const prefix = g();
|
|
1734
|
-
const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
|
|
1734
|
+
const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
|
|
1735
1735
|
|
|
1736
|
+
// If a value was found, replace the default in config obj.
|
|
1736
1737
|
if (value) {
|
|
1737
1738
|
config[prop] = value;
|
|
1738
1739
|
}
|
|
1739
|
-
}
|
|
1740
|
-
|
|
1740
|
+
}
|
|
1741
1741
|
|
|
1742
|
+
// Return the config obj.
|
|
1742
1743
|
return config;
|
|
1743
1744
|
}
|
|
1744
1745
|
|
|
1745
1746
|
function getPadding(value) {
|
|
1746
|
-
let padding;
|
|
1747
|
+
let padding;
|
|
1747
1748
|
|
|
1748
|
-
|
|
1749
|
+
// Split the value by spaces if it's a string.
|
|
1750
|
+
const array = typeof value === 'string' ? value.trim().split(' ') : [value];
|
|
1749
1751
|
|
|
1752
|
+
// Convert individual values to integers.
|
|
1750
1753
|
array.forEach(function (item, index) {
|
|
1751
1754
|
array[index] = parseInt(item, 10);
|
|
1752
|
-
});
|
|
1755
|
+
});
|
|
1753
1756
|
|
|
1757
|
+
// Build the padding object based on the number of values passed.
|
|
1754
1758
|
switch (array.length) {
|
|
1755
1759
|
case 1:
|
|
1756
1760
|
padding = array[0];
|
|
1757
1761
|
break;
|
|
1758
|
-
|
|
1759
1762
|
case 2:
|
|
1760
1763
|
padding = {
|
|
1761
1764
|
top: array[0],
|
|
@@ -1764,7 +1767,6 @@ function getPadding(value) {
|
|
|
1764
1767
|
left: array[1]
|
|
1765
1768
|
};
|
|
1766
1769
|
break;
|
|
1767
|
-
|
|
1768
1770
|
case 3:
|
|
1769
1771
|
padding = {
|
|
1770
1772
|
top: array[0],
|
|
@@ -1773,7 +1775,6 @@ function getPadding(value) {
|
|
|
1773
1775
|
left: array[1]
|
|
1774
1776
|
};
|
|
1775
1777
|
break;
|
|
1776
|
-
|
|
1777
1778
|
case 4:
|
|
1778
1779
|
padding = {
|
|
1779
1780
|
top: array[0],
|
|
@@ -1782,13 +1783,12 @@ function getPadding(value) {
|
|
|
1782
1783
|
left: array[3]
|
|
1783
1784
|
};
|
|
1784
1785
|
break;
|
|
1785
|
-
|
|
1786
1786
|
default:
|
|
1787
1787
|
padding = false;
|
|
1788
1788
|
break;
|
|
1789
|
-
}
|
|
1790
|
-
|
|
1789
|
+
}
|
|
1791
1790
|
|
|
1791
|
+
// Return the padding object.
|
|
1792
1792
|
return padding;
|
|
1793
1793
|
}
|
|
1794
1794
|
|
|
@@ -1819,8 +1819,9 @@ function getModifiers(options) {
|
|
|
1819
1819
|
|
|
1820
1820
|
function getPopover(query) {
|
|
1821
1821
|
// Get the entry from collection.
|
|
1822
|
-
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1822
|
+
const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1823
1823
|
|
|
1824
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
1824
1825
|
if (entry) {
|
|
1825
1826
|
return entry;
|
|
1826
1827
|
} else {
|
|
@@ -1832,34 +1833,44 @@ function getPopoverID(obj) {
|
|
|
1832
1833
|
// If it's a string, return the string.
|
|
1833
1834
|
if (typeof obj === 'string') {
|
|
1834
1835
|
return obj;
|
|
1835
|
-
}
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
// If it's an HTML element.
|
|
1836
1839
|
else if (typeof obj.hasAttribute === 'function') {
|
|
1837
1840
|
// If it's a popover element, return the id.
|
|
1838
1841
|
if (obj.closest(this.settings.selectorPopover)) {
|
|
1839
1842
|
obj = obj.closest(this.settings.selectorPopover);
|
|
1840
1843
|
return obj.id;
|
|
1841
|
-
}
|
|
1844
|
+
}
|
|
1845
|
+
|
|
1846
|
+
// If it's a popover trigger, return value of aria-controls.
|
|
1842
1847
|
else if (obj.hasAttribute('aria-controls')) {
|
|
1843
1848
|
return obj.getAttribute('aria-controls');
|
|
1844
|
-
}
|
|
1849
|
+
}
|
|
1850
|
+
|
|
1851
|
+
// If it's a popover tooltip trigger, return the value of aria-describedby.
|
|
1845
1852
|
else if (obj.hasAttribute('aria-describedby')) {
|
|
1846
1853
|
return obj.getAttribute('aria-describedby');
|
|
1847
|
-
}
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
// Return false if no id was found.
|
|
1848
1857
|
else return false;
|
|
1849
|
-
}
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
// If it has an id property, return its value.
|
|
1850
1861
|
else if (obj.id) {
|
|
1851
1862
|
return obj.id;
|
|
1852
|
-
}
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
// Return false if no id was found.
|
|
1853
1866
|
else return false;
|
|
1854
1867
|
}
|
|
1855
1868
|
|
|
1856
1869
|
function getPopoverElements(query) {
|
|
1857
1870
|
const id = getPopoverID.call(this, query);
|
|
1858
|
-
|
|
1859
1871
|
if (id) {
|
|
1860
1872
|
const popover = document.querySelector(`#${id}`);
|
|
1861
1873
|
const trigger = document.querySelector(`[aria-controls="${id}"]`) || document.querySelector(`[aria-describedby="${id}"]`);
|
|
1862
|
-
|
|
1863
1874
|
if (!trigger && !popover) {
|
|
1864
1875
|
return {
|
|
1865
1876
|
error: new Error(`No popover elements found using the ID: "${id}".`)
|
|
@@ -1887,32 +1898,36 @@ function getPopoverElements(query) {
|
|
|
1887
1898
|
|
|
1888
1899
|
async function close(query) {
|
|
1889
1900
|
// Get the popover from collection.
|
|
1890
|
-
const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
|
|
1901
|
+
const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
|
|
1891
1902
|
|
|
1903
|
+
// If a modal exists and its state is opened.
|
|
1892
1904
|
if (popover && popover.state === 'opened') {
|
|
1893
1905
|
// Update state class.
|
|
1894
|
-
popover.el.classList.remove(this.settings.stateActive);
|
|
1906
|
+
popover.el.classList.remove(this.settings.stateActive);
|
|
1895
1907
|
|
|
1908
|
+
// Update accessibility attribute(s).
|
|
1896
1909
|
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
1897
1910
|
popover.trigger.setAttribute('aria-expanded', 'false');
|
|
1898
|
-
}
|
|
1899
|
-
|
|
1911
|
+
}
|
|
1900
1912
|
|
|
1913
|
+
// Disable popper event listeners.
|
|
1901
1914
|
popover.popper.setOptions({
|
|
1902
1915
|
modifiers: [{
|
|
1903
1916
|
name: 'eventListeners',
|
|
1904
1917
|
enabled: false
|
|
1905
1918
|
}]
|
|
1906
|
-
});
|
|
1919
|
+
});
|
|
1907
1920
|
|
|
1908
|
-
|
|
1921
|
+
// Update popover state.
|
|
1922
|
+
popover.state = 'closed';
|
|
1909
1923
|
|
|
1924
|
+
// Clear root trigger if popover trigger matches.
|
|
1910
1925
|
if (popover.trigger === this.trigger) {
|
|
1911
1926
|
this.trigger = null;
|
|
1912
1927
|
}
|
|
1913
|
-
}
|
|
1914
|
-
|
|
1928
|
+
}
|
|
1915
1929
|
|
|
1930
|
+
// Return the popover.
|
|
1916
1931
|
return popover;
|
|
1917
1932
|
}
|
|
1918
1933
|
async function closeAll() {
|
|
@@ -1926,19 +1941,22 @@ async function closeAll() {
|
|
|
1926
1941
|
}
|
|
1927
1942
|
function closeCheck(popover) {
|
|
1928
1943
|
// Only run closeCheck if provided popover is currently open.
|
|
1929
|
-
if (popover.state != 'opened') return;
|
|
1944
|
+
if (popover.state != 'opened') return;
|
|
1930
1945
|
|
|
1946
|
+
// Needed to correctly check which element is currently being focused.
|
|
1931
1947
|
setTimeout(() => {
|
|
1932
1948
|
// Check if trigger or element are being hovered.
|
|
1933
|
-
const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
|
|
1949
|
+
const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
|
|
1934
1950
|
|
|
1935
|
-
|
|
1951
|
+
// Check if trigger or element are being focused.
|
|
1952
|
+
const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
|
|
1936
1953
|
|
|
1954
|
+
// Close if the trigger and element are not currently hovered or focused.
|
|
1937
1955
|
if (!isHovered && !isFocused) {
|
|
1938
1956
|
popover.close();
|
|
1939
|
-
}
|
|
1940
|
-
|
|
1957
|
+
}
|
|
1941
1958
|
|
|
1959
|
+
// Return the popover.
|
|
1942
1960
|
return popover;
|
|
1943
1961
|
}, 1);
|
|
1944
1962
|
}
|
|
@@ -1958,16 +1976,13 @@ function handleKeydown(event) {
|
|
|
1958
1976
|
if (this.trigger) {
|
|
1959
1977
|
this.trigger.focus();
|
|
1960
1978
|
}
|
|
1961
|
-
|
|
1962
1979
|
closeAll.call(this);
|
|
1963
1980
|
return;
|
|
1964
|
-
|
|
1965
1981
|
case 'Tab':
|
|
1966
1982
|
this.collection.forEach(popover => {
|
|
1967
1983
|
closeCheck.call(this, popover);
|
|
1968
1984
|
});
|
|
1969
1985
|
return;
|
|
1970
|
-
|
|
1971
1986
|
default:
|
|
1972
1987
|
return;
|
|
1973
1988
|
}
|
|
@@ -1976,8 +1991,9 @@ function handleDocumentClick(popover) {
|
|
|
1976
1991
|
const root = this;
|
|
1977
1992
|
document.addEventListener('click', function _f(event) {
|
|
1978
1993
|
// Check if a popover or its trigger was clicked.
|
|
1979
|
-
const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
|
|
1994
|
+
const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
|
|
1980
1995
|
|
|
1996
|
+
// If popover or popover trigger was clicked...
|
|
1981
1997
|
if (wasClicked) {
|
|
1982
1998
|
// If popover element exists and is not active...
|
|
1983
1999
|
if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
|
|
@@ -1988,7 +2004,6 @@ function handleDocumentClick(popover) {
|
|
|
1988
2004
|
if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
|
|
1989
2005
|
popover.close();
|
|
1990
2006
|
}
|
|
1991
|
-
|
|
1992
2007
|
this.removeEventListener('click', _f);
|
|
1993
2008
|
}
|
|
1994
2009
|
});
|
|
@@ -2154,38 +2169,57 @@ var max = Math.max;
|
|
|
2154
2169
|
var min = Math.min;
|
|
2155
2170
|
var round = Math.round;
|
|
2156
2171
|
|
|
2157
|
-
function
|
|
2172
|
+
function getUAString() {
|
|
2173
|
+
var uaData = navigator.userAgentData;
|
|
2174
|
+
|
|
2175
|
+
if (uaData != null && uaData.brands) {
|
|
2176
|
+
return uaData.brands.map(function (item) {
|
|
2177
|
+
return item.brand + "/" + item.version;
|
|
2178
|
+
}).join(' ');
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
return navigator.userAgent;
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2184
|
+
function isLayoutViewport() {
|
|
2185
|
+
return !/^((?!chrome|android).)*safari/i.test(getUAString());
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy) {
|
|
2158
2189
|
if (includeScale === void 0) {
|
|
2159
2190
|
includeScale = false;
|
|
2160
2191
|
}
|
|
2161
2192
|
|
|
2162
|
-
|
|
2193
|
+
if (isFixedStrategy === void 0) {
|
|
2194
|
+
isFixedStrategy = false;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
var clientRect = element.getBoundingClientRect();
|
|
2163
2198
|
var scaleX = 1;
|
|
2164
2199
|
var scaleY = 1;
|
|
2165
2200
|
|
|
2166
|
-
if (isHTMLElement(element)
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
// Fallback to 1 in case both values are `0`
|
|
2170
|
-
|
|
2171
|
-
if (offsetWidth > 0) {
|
|
2172
|
-
scaleX = round(rect.width) / offsetWidth || 1;
|
|
2173
|
-
}
|
|
2174
|
-
|
|
2175
|
-
if (offsetHeight > 0) {
|
|
2176
|
-
scaleY = round(rect.height) / offsetHeight || 1;
|
|
2177
|
-
}
|
|
2201
|
+
if (includeScale && isHTMLElement(element)) {
|
|
2202
|
+
scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
|
|
2203
|
+
scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
|
|
2178
2204
|
}
|
|
2179
2205
|
|
|
2206
|
+
var _ref = isElement(element) ? getWindow(element) : window,
|
|
2207
|
+
visualViewport = _ref.visualViewport;
|
|
2208
|
+
|
|
2209
|
+
var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
|
|
2210
|
+
var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
|
|
2211
|
+
var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
|
|
2212
|
+
var width = clientRect.width / scaleX;
|
|
2213
|
+
var height = clientRect.height / scaleY;
|
|
2180
2214
|
return {
|
|
2181
|
-
width:
|
|
2182
|
-
height:
|
|
2183
|
-
top:
|
|
2184
|
-
right:
|
|
2185
|
-
bottom:
|
|
2186
|
-
left:
|
|
2187
|
-
x:
|
|
2188
|
-
y:
|
|
2215
|
+
width: width,
|
|
2216
|
+
height: height,
|
|
2217
|
+
top: y,
|
|
2218
|
+
right: x + width,
|
|
2219
|
+
bottom: y + height,
|
|
2220
|
+
left: x,
|
|
2221
|
+
x: x,
|
|
2222
|
+
y: y
|
|
2189
2223
|
};
|
|
2190
2224
|
}
|
|
2191
2225
|
|
|
@@ -2280,8 +2314,8 @@ function getTrueOffsetParent(element) {
|
|
|
2280
2314
|
|
|
2281
2315
|
|
|
2282
2316
|
function getContainingBlock(element) {
|
|
2283
|
-
var isFirefox =
|
|
2284
|
-
var isIE =
|
|
2317
|
+
var isFirefox = /firefox/i.test(getUAString());
|
|
2318
|
+
var isIE = /Trident/i.test(getUAString());
|
|
2285
2319
|
|
|
2286
2320
|
if (isIE && isHTMLElement(element)) {
|
|
2287
2321
|
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
|
@@ -2702,31 +2736,21 @@ function getWindowScrollBarX(element) {
|
|
|
2702
2736
|
return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
|
|
2703
2737
|
}
|
|
2704
2738
|
|
|
2705
|
-
function getViewportRect(element) {
|
|
2739
|
+
function getViewportRect(element, strategy) {
|
|
2706
2740
|
var win = getWindow(element);
|
|
2707
2741
|
var html = getDocumentElement(element);
|
|
2708
2742
|
var visualViewport = win.visualViewport;
|
|
2709
2743
|
var width = html.clientWidth;
|
|
2710
2744
|
var height = html.clientHeight;
|
|
2711
2745
|
var x = 0;
|
|
2712
|
-
var y = 0;
|
|
2713
|
-
// can be obscured underneath it.
|
|
2714
|
-
// Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
|
|
2715
|
-
// if it isn't open, so if this isn't available, the popper will be detected
|
|
2716
|
-
// to overflow the bottom of the screen too early.
|
|
2746
|
+
var y = 0;
|
|
2717
2747
|
|
|
2718
2748
|
if (visualViewport) {
|
|
2719
2749
|
width = visualViewport.width;
|
|
2720
|
-
height = visualViewport.height;
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
// Feature detection fails in mobile emulation mode in Chrome.
|
|
2725
|
-
// Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
|
|
2726
|
-
// 0.001
|
|
2727
|
-
// Fallback here: "Not Safari" userAgent
|
|
2728
|
-
|
|
2729
|
-
if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
|
|
2750
|
+
height = visualViewport.height;
|
|
2751
|
+
var layoutViewport = isLayoutViewport();
|
|
2752
|
+
|
|
2753
|
+
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
|
|
2730
2754
|
x = visualViewport.offsetLeft;
|
|
2731
2755
|
y = visualViewport.offsetTop;
|
|
2732
2756
|
}
|
|
@@ -2820,8 +2844,8 @@ function rectToClientRect(rect) {
|
|
|
2820
2844
|
});
|
|
2821
2845
|
}
|
|
2822
2846
|
|
|
2823
|
-
function getInnerBoundingClientRect(element) {
|
|
2824
|
-
var rect = getBoundingClientRect(element);
|
|
2847
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
2848
|
+
var rect = getBoundingClientRect(element, false, strategy === 'fixed');
|
|
2825
2849
|
rect.top = rect.top + element.clientTop;
|
|
2826
2850
|
rect.left = rect.left + element.clientLeft;
|
|
2827
2851
|
rect.bottom = rect.top + element.clientHeight;
|
|
@@ -2833,8 +2857,8 @@ function getInnerBoundingClientRect(element) {
|
|
|
2833
2857
|
return rect;
|
|
2834
2858
|
}
|
|
2835
2859
|
|
|
2836
|
-
function getClientRectFromMixedType(element, clippingParent) {
|
|
2837
|
-
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
2860
|
+
function getClientRectFromMixedType(element, clippingParent, strategy) {
|
|
2861
|
+
return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
2838
2862
|
} // A "clipping parent" is an overflowable container with the characteristic of
|
|
2839
2863
|
// clipping (or hiding) overflowing elements with a position different from
|
|
2840
2864
|
// `initial`
|
|
@@ -2857,18 +2881,18 @@ function getClippingParents(element) {
|
|
|
2857
2881
|
// clipping parents
|
|
2858
2882
|
|
|
2859
2883
|
|
|
2860
|
-
function getClippingRect(element, boundary, rootBoundary) {
|
|
2884
|
+
function getClippingRect(element, boundary, rootBoundary, strategy) {
|
|
2861
2885
|
var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
|
|
2862
2886
|
var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
|
|
2863
2887
|
var firstClippingParent = clippingParents[0];
|
|
2864
2888
|
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
|
2865
|
-
var rect = getClientRectFromMixedType(element, clippingParent);
|
|
2889
|
+
var rect = getClientRectFromMixedType(element, clippingParent, strategy);
|
|
2866
2890
|
accRect.top = max(rect.top, accRect.top);
|
|
2867
2891
|
accRect.right = min(rect.right, accRect.right);
|
|
2868
2892
|
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
2869
2893
|
accRect.left = max(rect.left, accRect.left);
|
|
2870
2894
|
return accRect;
|
|
2871
|
-
}, getClientRectFromMixedType(element, firstClippingParent));
|
|
2895
|
+
}, getClientRectFromMixedType(element, firstClippingParent, strategy));
|
|
2872
2896
|
clippingRect.width = clippingRect.right - clippingRect.left;
|
|
2873
2897
|
clippingRect.height = clippingRect.bottom - clippingRect.top;
|
|
2874
2898
|
clippingRect.x = clippingRect.left;
|
|
@@ -2949,6 +2973,8 @@ function detectOverflow(state, options) {
|
|
|
2949
2973
|
var _options = options,
|
|
2950
2974
|
_options$placement = _options.placement,
|
|
2951
2975
|
placement = _options$placement === void 0 ? state.placement : _options$placement,
|
|
2976
|
+
_options$strategy = _options.strategy,
|
|
2977
|
+
strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
|
|
2952
2978
|
_options$boundary = _options.boundary,
|
|
2953
2979
|
boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
|
|
2954
2980
|
_options$rootBoundary = _options.rootBoundary,
|
|
@@ -2963,7 +2989,7 @@ function detectOverflow(state, options) {
|
|
|
2963
2989
|
var altContext = elementContext === popper ? reference : popper;
|
|
2964
2990
|
var popperRect = state.rects.popper;
|
|
2965
2991
|
var element = state.elements[altBoundary ? altContext : elementContext];
|
|
2966
|
-
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
|
|
2992
|
+
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
|
|
2967
2993
|
var referenceClientRect = getBoundingClientRect(state.elements.reference);
|
|
2968
2994
|
var popperOffsets = computeOffsets({
|
|
2969
2995
|
reference: referenceClientRect,
|
|
@@ -3477,7 +3503,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
|
|
3477
3503
|
var isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
3478
3504
|
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
|
|
3479
3505
|
var documentElement = getDocumentElement(offsetParent);
|
|
3480
|
-
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
|
|
3506
|
+
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
|
|
3481
3507
|
var scroll = {
|
|
3482
3508
|
scrollLeft: 0,
|
|
3483
3509
|
scrollTop: 0
|
|
@@ -3783,33 +3809,37 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
3783
3809
|
|
|
3784
3810
|
async function deregister(obj) {
|
|
3785
3811
|
// Return collection if nothing was passed.
|
|
3786
|
-
if (!obj) return this.collection;
|
|
3812
|
+
if (!obj) return this.collection;
|
|
3787
3813
|
|
|
3814
|
+
// Check if entry has been registered in the collection.
|
|
3788
3815
|
const index = this.collection.findIndex(entry => {
|
|
3789
3816
|
return entry.id === obj.id;
|
|
3790
3817
|
});
|
|
3791
|
-
|
|
3792
3818
|
if (index >= 0) {
|
|
3793
3819
|
// Get the collection entry.
|
|
3794
|
-
const entry = this.collection[index];
|
|
3820
|
+
const entry = this.collection[index];
|
|
3795
3821
|
|
|
3822
|
+
// If entry is in the opened state, close it.
|
|
3796
3823
|
if (entry.state === 'opened') {
|
|
3797
3824
|
entry.close();
|
|
3798
|
-
}
|
|
3799
|
-
|
|
3825
|
+
}
|
|
3800
3826
|
|
|
3801
|
-
|
|
3827
|
+
// Clean up the popper instance.
|
|
3828
|
+
entry.popper.destroy();
|
|
3802
3829
|
|
|
3803
|
-
|
|
3830
|
+
// Remove event listeners.
|
|
3831
|
+
deregisterEventListeners(entry);
|
|
3804
3832
|
|
|
3833
|
+
// Delete properties from collection entry.
|
|
3805
3834
|
Object.getOwnPropertyNames(entry).forEach(prop => {
|
|
3806
3835
|
delete entry[prop];
|
|
3807
|
-
});
|
|
3836
|
+
});
|
|
3808
3837
|
|
|
3838
|
+
// Remove entry from collection.
|
|
3809
3839
|
this.collection.splice(index, 1);
|
|
3810
|
-
}
|
|
3811
|
-
|
|
3840
|
+
}
|
|
3812
3841
|
|
|
3842
|
+
// Return the modified collection.
|
|
3813
3843
|
return this.collection;
|
|
3814
3844
|
}
|
|
3815
3845
|
function deregisterEventListeners(entry) {
|
|
@@ -3822,65 +3852,71 @@ function deregisterEventListeners(entry) {
|
|
|
3822
3852
|
entry[el].removeEventListener(type, evObj.listener, false);
|
|
3823
3853
|
});
|
|
3824
3854
|
});
|
|
3825
|
-
});
|
|
3826
|
-
|
|
3855
|
+
});
|
|
3827
3856
|
|
|
3857
|
+
// Remove eventListeners object from collection.
|
|
3828
3858
|
delete entry.__eventListeners;
|
|
3829
|
-
}
|
|
3830
|
-
|
|
3859
|
+
}
|
|
3831
3860
|
|
|
3861
|
+
// Return the entry object.
|
|
3832
3862
|
return entry;
|
|
3833
3863
|
}
|
|
3834
3864
|
|
|
3835
3865
|
async function open(query) {
|
|
3836
3866
|
// Get the popover from collection.
|
|
3837
|
-
const popover = getPopover.call(this, query);
|
|
3867
|
+
const popover = getPopover.call(this, query);
|
|
3838
3868
|
|
|
3839
|
-
|
|
3869
|
+
// Update state class.
|
|
3870
|
+
popover.el.classList.add(this.settings.stateActive);
|
|
3840
3871
|
|
|
3872
|
+
// Update accessibility attribute(s).
|
|
3841
3873
|
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
3842
3874
|
popover.trigger.setAttribute('aria-expanded', 'true');
|
|
3843
|
-
}
|
|
3844
|
-
|
|
3875
|
+
}
|
|
3845
3876
|
|
|
3846
|
-
|
|
3877
|
+
// Update popover config.
|
|
3878
|
+
popover.config = getConfig(popover.el, this.settings);
|
|
3847
3879
|
|
|
3880
|
+
// Enable popper event listeners and set placement/modifiers.
|
|
3848
3881
|
popover.popper.setOptions({
|
|
3849
3882
|
placement: popover.config['placement'],
|
|
3850
3883
|
modifiers: [{
|
|
3851
3884
|
name: 'eventListeners',
|
|
3852
3885
|
enabled: true
|
|
3853
3886
|
}, ...getModifiers(popover.config)]
|
|
3854
|
-
});
|
|
3887
|
+
});
|
|
3855
3888
|
|
|
3856
|
-
|
|
3889
|
+
// Update popover position.
|
|
3890
|
+
popover.popper.update();
|
|
3857
3891
|
|
|
3858
|
-
|
|
3892
|
+
// Update popover state.
|
|
3893
|
+
popover.state = 'opened';
|
|
3859
3894
|
|
|
3895
|
+
// Return the popover.
|
|
3860
3896
|
return popover;
|
|
3861
3897
|
}
|
|
3862
3898
|
|
|
3863
3899
|
async function register(el, trigger) {
|
|
3864
3900
|
// Deregister entry incase it has already been registered.
|
|
3865
|
-
deregister.call(this, el);
|
|
3901
|
+
deregister.call(this, el);
|
|
3866
3902
|
|
|
3867
|
-
|
|
3903
|
+
// Save root this for use inside methods API.
|
|
3904
|
+
const root = this;
|
|
3868
3905
|
|
|
3906
|
+
// Setup methods API.
|
|
3869
3907
|
const methods = {
|
|
3870
3908
|
open() {
|
|
3871
3909
|
return open.call(root, this);
|
|
3872
3910
|
},
|
|
3873
|
-
|
|
3874
3911
|
close() {
|
|
3875
3912
|
return close.call(root, this);
|
|
3876
3913
|
},
|
|
3877
|
-
|
|
3878
3914
|
deregister() {
|
|
3879
3915
|
return deregister.call(root, this);
|
|
3880
3916
|
}
|
|
3917
|
+
};
|
|
3881
3918
|
|
|
3882
|
-
|
|
3883
|
-
|
|
3919
|
+
// Setup the popover object.
|
|
3884
3920
|
const entry = _extends({
|
|
3885
3921
|
id: el.id,
|
|
3886
3922
|
state: 'closed',
|
|
@@ -3888,32 +3924,35 @@ async function register(el, trigger) {
|
|
|
3888
3924
|
trigger: trigger,
|
|
3889
3925
|
popper: createPopper(trigger, el),
|
|
3890
3926
|
config: getConfig(el, this.settings)
|
|
3891
|
-
}, methods);
|
|
3892
|
-
|
|
3927
|
+
}, methods);
|
|
3893
3928
|
|
|
3929
|
+
// Set aria-expanded to false if trigger has aria-controls attribute.
|
|
3894
3930
|
if (entry.trigger.hasAttribute('aria-controls')) {
|
|
3895
3931
|
entry.trigger.setAttribute('aria-expanded', 'false');
|
|
3896
|
-
}
|
|
3897
|
-
|
|
3932
|
+
}
|
|
3898
3933
|
|
|
3899
|
-
|
|
3934
|
+
// Setup event listeners.
|
|
3935
|
+
registerEventListeners.call(this, entry);
|
|
3900
3936
|
|
|
3901
|
-
|
|
3937
|
+
// Add entry to collection.
|
|
3938
|
+
this.collection.push(entry);
|
|
3902
3939
|
|
|
3940
|
+
// Set initial state.
|
|
3903
3941
|
if (entry.el.classList.contains(this.settings.stateActive)) {
|
|
3904
3942
|
await entry.open();
|
|
3905
3943
|
handleDocumentClick.call(this, entry);
|
|
3906
|
-
}
|
|
3907
|
-
|
|
3944
|
+
}
|
|
3908
3945
|
|
|
3946
|
+
// Return the registered entry.
|
|
3909
3947
|
return entry;
|
|
3910
3948
|
}
|
|
3911
3949
|
function registerEventListeners(entry) {
|
|
3912
3950
|
// If event listeners aren't already setup.
|
|
3913
3951
|
if (!entry.__eventListeners) {
|
|
3914
3952
|
// Add event listeners based on event type.
|
|
3915
|
-
const eventType = entry.config['event'];
|
|
3953
|
+
const eventType = entry.config['event'];
|
|
3916
3954
|
|
|
3955
|
+
// If the event type is hover.
|
|
3917
3956
|
if (eventType === 'hover') {
|
|
3918
3957
|
// Setup event listeners object for hover.
|
|
3919
3958
|
entry.__eventListeners = [{
|
|
@@ -3924,8 +3963,9 @@ function registerEventListeners(entry) {
|
|
|
3924
3963
|
el: ['el', 'trigger'],
|
|
3925
3964
|
type: ['mouseleave', 'focusout'],
|
|
3926
3965
|
listener: closeCheck.bind(this, entry)
|
|
3927
|
-
}];
|
|
3966
|
+
}];
|
|
3928
3967
|
|
|
3968
|
+
// Loop through listeners and apply to the appropriate elements.
|
|
3929
3969
|
entry.__eventListeners.forEach(evObj => {
|
|
3930
3970
|
evObj.el.forEach(el => {
|
|
3931
3971
|
evObj.type.forEach(type => {
|
|
@@ -3933,15 +3973,18 @@ function registerEventListeners(entry) {
|
|
|
3933
3973
|
});
|
|
3934
3974
|
});
|
|
3935
3975
|
});
|
|
3936
|
-
}
|
|
3976
|
+
}
|
|
3977
|
+
|
|
3978
|
+
// Else the event type is click.
|
|
3937
3979
|
else {
|
|
3938
3980
|
// Setup event listeners object for click.
|
|
3939
3981
|
entry.__eventListeners = [{
|
|
3940
3982
|
el: ['trigger'],
|
|
3941
3983
|
type: ['click'],
|
|
3942
3984
|
listener: handleClick.bind(this, entry)
|
|
3943
|
-
}];
|
|
3985
|
+
}];
|
|
3944
3986
|
|
|
3987
|
+
// Loop through listeners and apply to the appropriate elements.
|
|
3945
3988
|
entry.__eventListeners.forEach(evObj => {
|
|
3946
3989
|
evObj.el.forEach(el => {
|
|
3947
3990
|
evObj.type.forEach(type => {
|
|
@@ -3950,14 +3993,13 @@ function registerEventListeners(entry) {
|
|
|
3950
3993
|
});
|
|
3951
3994
|
});
|
|
3952
3995
|
}
|
|
3953
|
-
}
|
|
3954
|
-
|
|
3996
|
+
}
|
|
3955
3997
|
|
|
3998
|
+
// Return the entry object.
|
|
3956
3999
|
return entry;
|
|
3957
4000
|
}
|
|
3958
4001
|
|
|
3959
4002
|
var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
3960
|
-
|
|
3961
4003
|
class Popover extends Collection {
|
|
3962
4004
|
constructor(options) {
|
|
3963
4005
|
super();
|
|
@@ -3971,82 +4013,76 @@ class Popover extends Collection {
|
|
|
3971
4013
|
_classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(this);
|
|
3972
4014
|
if (this.settings.autoInit) this.init();
|
|
3973
4015
|
}
|
|
3974
|
-
|
|
3975
4016
|
async init(options) {
|
|
3976
4017
|
// Update settings with passed options.
|
|
3977
|
-
if (options) this.settings = _extends({}, this.settings, options);
|
|
4018
|
+
if (options) this.settings = _extends({}, this.settings, options);
|
|
3978
4019
|
|
|
3979
|
-
|
|
4020
|
+
// Get all the popovers.
|
|
4021
|
+
const popovers = document.querySelectorAll(this.settings.selectorPopover);
|
|
3980
4022
|
|
|
3981
|
-
|
|
4023
|
+
// Register the collections array with popover instances.
|
|
4024
|
+
await this.registerCollection(popovers);
|
|
3982
4025
|
|
|
4026
|
+
// If eventListeners are enabled, init event listeners.
|
|
3983
4027
|
if (this.settings.eventListeners) {
|
|
3984
4028
|
// Pass false to initEventListeners() since registerCollection()
|
|
3985
4029
|
// already adds event listeners to popovers.
|
|
3986
4030
|
this.initEventListeners(false);
|
|
3987
4031
|
}
|
|
3988
|
-
|
|
3989
4032
|
return this;
|
|
3990
4033
|
}
|
|
3991
|
-
|
|
3992
4034
|
async destroy() {
|
|
3993
4035
|
// Clear stored trigger.
|
|
3994
|
-
this.trigger = null;
|
|
4036
|
+
this.trigger = null;
|
|
3995
4037
|
|
|
3996
|
-
|
|
4038
|
+
// Remove all entries from the collection.
|
|
4039
|
+
await this.deregisterCollection();
|
|
3997
4040
|
|
|
4041
|
+
// If eventListeners are enabled, destroy event listeners.
|
|
3998
4042
|
if (this.settings.eventListeners) {
|
|
3999
4043
|
// Pass false to destroyEventListeners() since deregisterCollection()
|
|
4000
4044
|
// already removes event listeners from popovers.
|
|
4001
4045
|
this.destroyEventListeners(false);
|
|
4002
4046
|
}
|
|
4003
|
-
|
|
4004
4047
|
return this;
|
|
4005
4048
|
}
|
|
4006
|
-
|
|
4007
4049
|
initEventListeners(processCollection = true) {
|
|
4008
4050
|
if (processCollection) {
|
|
4009
4051
|
// Loop through collection and setup event listeners.
|
|
4010
4052
|
this.collection.forEach(popover => {
|
|
4011
4053
|
registerEventListeners.call(this, popover);
|
|
4012
4054
|
});
|
|
4013
|
-
}
|
|
4014
|
-
|
|
4055
|
+
}
|
|
4015
4056
|
|
|
4057
|
+
// Add keydown global event listener.
|
|
4016
4058
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4017
4059
|
}
|
|
4018
|
-
|
|
4019
4060
|
destroyEventListeners(processCollection = true) {
|
|
4020
4061
|
if (processCollection) {
|
|
4021
4062
|
// Loop through collection and remove event listeners.
|
|
4022
4063
|
this.collection.forEach(popover => {
|
|
4023
4064
|
deregisterEventListeners(popover);
|
|
4024
4065
|
});
|
|
4025
|
-
}
|
|
4026
|
-
|
|
4066
|
+
}
|
|
4027
4067
|
|
|
4068
|
+
// Remove keydown global event listener.
|
|
4028
4069
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4029
4070
|
}
|
|
4030
|
-
|
|
4031
4071
|
register(query) {
|
|
4032
4072
|
const els = getPopoverElements.call(this, query);
|
|
4033
4073
|
if (els.error) return Promise.reject(els.error);
|
|
4034
4074
|
return register.call(this, els.popover, els.trigger);
|
|
4035
4075
|
}
|
|
4036
|
-
|
|
4037
4076
|
deregister(query) {
|
|
4038
4077
|
const popover = this.get(getPopoverID.call(this, query));
|
|
4039
4078
|
return deregister.call(this, popover);
|
|
4040
4079
|
}
|
|
4041
|
-
|
|
4042
4080
|
open(id) {
|
|
4043
4081
|
return open.call(this, id);
|
|
4044
4082
|
}
|
|
4045
|
-
|
|
4046
4083
|
close(id) {
|
|
4047
4084
|
return close.call(this, id);
|
|
4048
4085
|
}
|
|
4049
|
-
|
|
4050
4086
|
}
|
|
4051
4087
|
|
|
4052
4088
|
export { Checkbox, Drawer, Modal, Popover, index as core };
|