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.js
CHANGED
|
@@ -4,10 +4,9 @@ function _defineProperties(target, props) {
|
|
|
4
4
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
5
5
|
descriptor.configurable = true;
|
|
6
6
|
if ("value" in descriptor) descriptor.writable = true;
|
|
7
|
-
Object.defineProperty(target, descriptor.key, descriptor);
|
|
7
|
+
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
|
|
11
10
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
12
11
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
13
12
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
@@ -16,31 +15,25 @@ function _createClass(Constructor, protoProps, staticProps) {
|
|
|
16
15
|
});
|
|
17
16
|
return Constructor;
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
function _extends() {
|
|
21
19
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
22
20
|
for (var i = 1; i < arguments.length; i++) {
|
|
23
21
|
var source = arguments[i];
|
|
24
|
-
|
|
25
22
|
for (var key in source) {
|
|
26
23
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
27
24
|
target[key] = source[key];
|
|
28
25
|
}
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
|
-
|
|
32
28
|
return target;
|
|
33
29
|
};
|
|
34
30
|
return _extends.apply(this, arguments);
|
|
35
31
|
}
|
|
36
|
-
|
|
37
32
|
function _inheritsLoose(subClass, superClass) {
|
|
38
33
|
subClass.prototype = Object.create(superClass.prototype);
|
|
39
34
|
subClass.prototype.constructor = subClass;
|
|
40
|
-
|
|
41
35
|
_setPrototypeOf(subClass, superClass);
|
|
42
36
|
}
|
|
43
|
-
|
|
44
37
|
function _setPrototypeOf(o, p) {
|
|
45
38
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
46
39
|
o.__proto__ = p;
|
|
@@ -48,31 +41,38 @@ function _setPrototypeOf(o, p) {
|
|
|
48
41
|
};
|
|
49
42
|
return _setPrototypeOf(o, p);
|
|
50
43
|
}
|
|
51
|
-
|
|
52
44
|
function _assertThisInitialized(self) {
|
|
53
45
|
if (self === void 0) {
|
|
54
46
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
55
47
|
}
|
|
56
|
-
|
|
57
48
|
return self;
|
|
58
49
|
}
|
|
59
|
-
|
|
50
|
+
function _toPrimitive(input, hint) {
|
|
51
|
+
if (typeof input !== "object" || input === null) return input;
|
|
52
|
+
var prim = input[Symbol.toPrimitive];
|
|
53
|
+
if (prim !== undefined) {
|
|
54
|
+
var res = prim.call(input, hint || "default");
|
|
55
|
+
if (typeof res !== "object") return res;
|
|
56
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
57
|
+
}
|
|
58
|
+
return (hint === "string" ? String : Number)(input);
|
|
59
|
+
}
|
|
60
|
+
function _toPropertyKey(arg) {
|
|
61
|
+
var key = _toPrimitive(arg, "string");
|
|
62
|
+
return typeof key === "symbol" ? key : String(key);
|
|
63
|
+
}
|
|
60
64
|
var id = 0;
|
|
61
|
-
|
|
62
65
|
function _classPrivateFieldLooseKey(name) {
|
|
63
66
|
return "__private_" + id++ + "_" + name;
|
|
64
67
|
}
|
|
65
|
-
|
|
66
68
|
function _classPrivateFieldLooseBase(receiver, privateKey) {
|
|
67
69
|
if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
|
|
68
70
|
throw new TypeError("attempted to use private field on non-instance");
|
|
69
71
|
}
|
|
70
|
-
|
|
71
72
|
return receiver;
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
|
|
75
|
-
|
|
76
76
|
var Breakpoint = /*#__PURE__*/function () {
|
|
77
77
|
function Breakpoint(value, handler) {
|
|
78
78
|
Object.defineProperty(this, _handler, {
|
|
@@ -83,52 +83,53 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
83
83
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
84
84
|
this.mql = null;
|
|
85
85
|
}
|
|
86
|
-
|
|
87
86
|
var _proto = Breakpoint.prototype;
|
|
88
|
-
|
|
89
87
|
_proto.mount = function mount(value, handler) {
|
|
90
88
|
// Update passed params.
|
|
91
89
|
if (value) this.value = value;
|
|
92
|
-
if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
90
|
+
if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
|
|
93
91
|
|
|
94
|
-
|
|
92
|
+
// Guard if no breakpoint was set.
|
|
93
|
+
if (!this.value) return this;
|
|
95
94
|
|
|
96
|
-
|
|
95
|
+
// Setup and store the MediaQueryList instance.
|
|
96
|
+
this.mql = window.matchMedia("(min-width: " + this.value + ")");
|
|
97
97
|
|
|
98
|
+
// Conditionally use addListener() for IE11 support.
|
|
98
99
|
if (typeof this.mql.addEventListener === 'function') {
|
|
99
100
|
this.mql.addEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
100
101
|
} else {
|
|
101
102
|
this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
102
|
-
}
|
|
103
|
-
|
|
103
|
+
}
|
|
104
104
|
|
|
105
|
+
// Run the handler.
|
|
105
106
|
_classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
|
|
106
|
-
|
|
107
107
|
return this;
|
|
108
108
|
};
|
|
109
|
-
|
|
110
109
|
_proto.unmount = function unmount() {
|
|
111
110
|
// Guard if no MediaQueryList instance exists.
|
|
112
|
-
if (!this.mql) return this;
|
|
111
|
+
if (!this.mql) return this;
|
|
113
112
|
|
|
113
|
+
// Conditionally use removeListener() for IE11 support.
|
|
114
114
|
if (typeof this.mql.removeEventListener === 'function') {
|
|
115
115
|
this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
116
116
|
} else {
|
|
117
117
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
118
|
-
}
|
|
119
|
-
|
|
118
|
+
}
|
|
120
119
|
|
|
120
|
+
// Set value, handler and MediaQueryList to null.
|
|
121
121
|
this.value = null;
|
|
122
122
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = null;
|
|
123
123
|
this.mql = null;
|
|
124
124
|
return this;
|
|
125
125
|
};
|
|
126
|
-
|
|
127
126
|
_createClass(Breakpoint, [{
|
|
128
127
|
key: "handler",
|
|
129
128
|
get: function get() {
|
|
130
129
|
return _classPrivateFieldLooseBase(this, _handler)[_handler];
|
|
131
|
-
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Unmount existing handler before setting a new one.
|
|
132
133
|
,
|
|
133
134
|
set: function set(func) {
|
|
134
135
|
if (this.mql) {
|
|
@@ -139,11 +140,9 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
139
140
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
140
141
|
}
|
|
141
142
|
}
|
|
142
|
-
|
|
143
143
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = func;
|
|
144
144
|
}
|
|
145
145
|
}]);
|
|
146
|
-
|
|
147
146
|
return Breakpoint;
|
|
148
147
|
}();
|
|
149
148
|
|
|
@@ -154,56 +153,45 @@ function _settle(pact, state, value) {
|
|
|
154
153
|
if (state & 1) {
|
|
155
154
|
state = value.s;
|
|
156
155
|
}
|
|
157
|
-
|
|
158
156
|
value = value.v;
|
|
159
157
|
} else {
|
|
160
158
|
value.o = _settle.bind(null, pact, state);
|
|
161
159
|
return;
|
|
162
160
|
}
|
|
163
161
|
}
|
|
164
|
-
|
|
165
162
|
if (value && value.then) {
|
|
166
163
|
value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
|
|
167
164
|
return;
|
|
168
165
|
}
|
|
169
|
-
|
|
170
166
|
pact.s = state;
|
|
171
167
|
pact.v = value;
|
|
172
|
-
|
|
173
|
-
|
|
168
|
+
const observer = pact.o;
|
|
174
169
|
if (observer) {
|
|
175
170
|
observer(pact);
|
|
176
171
|
}
|
|
177
172
|
}
|
|
178
173
|
}
|
|
179
|
-
|
|
180
174
|
var _Pact = /*#__PURE__*/function () {
|
|
181
175
|
function _Pact() {}
|
|
182
|
-
|
|
183
176
|
_Pact.prototype.then = function (onFulfilled, onRejected) {
|
|
184
177
|
var result = new _Pact();
|
|
185
178
|
var state = this.s;
|
|
186
|
-
|
|
187
179
|
if (state) {
|
|
188
180
|
var callback = state & 1 ? onFulfilled : onRejected;
|
|
189
|
-
|
|
190
181
|
if (callback) {
|
|
191
182
|
try {
|
|
192
183
|
_settle(result, 1, callback(this.v));
|
|
193
184
|
} catch (e) {
|
|
194
185
|
_settle(result, 2, e);
|
|
195
186
|
}
|
|
196
|
-
|
|
197
187
|
return result;
|
|
198
188
|
} else {
|
|
199
189
|
return this;
|
|
200
190
|
}
|
|
201
191
|
}
|
|
202
|
-
|
|
203
192
|
this.o = function (_this) {
|
|
204
193
|
try {
|
|
205
194
|
var value = _this.v;
|
|
206
|
-
|
|
207
195
|
if (_this.s & 1) {
|
|
208
196
|
_settle(result, 1, onFulfilled ? onFulfilled(value) : value);
|
|
209
197
|
} else if (onRejected) {
|
|
@@ -215,38 +203,28 @@ var _Pact = /*#__PURE__*/function () {
|
|
|
215
203
|
_settle(result, 2, e);
|
|
216
204
|
}
|
|
217
205
|
};
|
|
218
|
-
|
|
219
206
|
return result;
|
|
220
207
|
};
|
|
221
|
-
|
|
222
208
|
return _Pact;
|
|
223
209
|
}();
|
|
224
|
-
|
|
225
210
|
function _isSettledPact(thenable) {
|
|
226
211
|
return thenable instanceof _Pact && thenable.s & 1;
|
|
227
212
|
}
|
|
228
|
-
|
|
229
213
|
function _for(test, update, body) {
|
|
230
214
|
var stage;
|
|
231
|
-
|
|
232
215
|
for (;;) {
|
|
233
216
|
var shouldContinue = test();
|
|
234
|
-
|
|
235
217
|
if (_isSettledPact(shouldContinue)) {
|
|
236
218
|
shouldContinue = shouldContinue.v;
|
|
237
219
|
}
|
|
238
|
-
|
|
239
220
|
if (!shouldContinue) {
|
|
240
221
|
return result;
|
|
241
222
|
}
|
|
242
|
-
|
|
243
223
|
if (shouldContinue.then) {
|
|
244
224
|
stage = 0;
|
|
245
225
|
break;
|
|
246
226
|
}
|
|
247
|
-
|
|
248
227
|
var result = body();
|
|
249
|
-
|
|
250
228
|
if (result && result.then) {
|
|
251
229
|
if (_isSettledPact(result)) {
|
|
252
230
|
result = result.s;
|
|
@@ -255,64 +233,47 @@ function _for(test, update, body) {
|
|
|
255
233
|
break;
|
|
256
234
|
}
|
|
257
235
|
}
|
|
258
|
-
|
|
259
236
|
if (update) {
|
|
260
237
|
var updateValue = update();
|
|
261
|
-
|
|
262
238
|
if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
|
|
263
239
|
stage = 2;
|
|
264
240
|
break;
|
|
265
241
|
}
|
|
266
242
|
}
|
|
267
243
|
}
|
|
268
|
-
|
|
269
244
|
var pact = new _Pact();
|
|
270
|
-
|
|
271
245
|
var reject = _settle.bind(null, pact, 2);
|
|
272
|
-
|
|
273
246
|
(stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);
|
|
274
247
|
return pact;
|
|
275
|
-
|
|
276
248
|
function _resumeAfterBody(value) {
|
|
277
249
|
result = value;
|
|
278
|
-
|
|
279
250
|
do {
|
|
280
251
|
if (update) {
|
|
281
252
|
updateValue = update();
|
|
282
|
-
|
|
283
253
|
if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
|
|
284
254
|
updateValue.then(_resumeAfterUpdate).then(void 0, reject);
|
|
285
255
|
return;
|
|
286
256
|
}
|
|
287
257
|
}
|
|
288
|
-
|
|
289
258
|
shouldContinue = test();
|
|
290
|
-
|
|
291
259
|
if (!shouldContinue || _isSettledPact(shouldContinue) && !shouldContinue.v) {
|
|
292
260
|
_settle(pact, 1, result);
|
|
293
|
-
|
|
294
261
|
return;
|
|
295
262
|
}
|
|
296
|
-
|
|
297
263
|
if (shouldContinue.then) {
|
|
298
264
|
shouldContinue.then(_resumeAfterTest).then(void 0, reject);
|
|
299
265
|
return;
|
|
300
266
|
}
|
|
301
|
-
|
|
302
267
|
result = body();
|
|
303
|
-
|
|
304
268
|
if (_isSettledPact(result)) {
|
|
305
269
|
result = result.v;
|
|
306
270
|
}
|
|
307
271
|
} while (!result || !result.then);
|
|
308
|
-
|
|
309
272
|
result.then(_resumeAfterBody).then(void 0, reject);
|
|
310
273
|
}
|
|
311
|
-
|
|
312
274
|
function _resumeAfterTest(shouldContinue) {
|
|
313
275
|
if (shouldContinue) {
|
|
314
276
|
result = body();
|
|
315
|
-
|
|
316
277
|
if (result && result.then) {
|
|
317
278
|
result.then(_resumeAfterBody).then(void 0, reject);
|
|
318
279
|
} else {
|
|
@@ -322,7 +283,6 @@ function _for(test, update, body) {
|
|
|
322
283
|
_settle(pact, 1, result);
|
|
323
284
|
}
|
|
324
285
|
}
|
|
325
|
-
|
|
326
286
|
function _resumeAfterUpdate() {
|
|
327
287
|
if (shouldContinue = test()) {
|
|
328
288
|
if (shouldContinue.then) {
|
|
@@ -335,55 +295,43 @@ function _for(test, update, body) {
|
|
|
335
295
|
}
|
|
336
296
|
}
|
|
337
297
|
}
|
|
338
|
-
|
|
339
298
|
var Collection = /*#__PURE__*/function () {
|
|
340
299
|
function Collection() {
|
|
341
300
|
this.collection = [];
|
|
342
301
|
}
|
|
343
|
-
|
|
344
302
|
var _proto = Collection.prototype;
|
|
345
|
-
|
|
346
303
|
_proto.register = function register(item) {
|
|
347
304
|
try {
|
|
348
305
|
var _this2 = this;
|
|
349
|
-
|
|
350
306
|
return Promise.resolve(_this2.deregister(item)).then(function () {
|
|
351
307
|
_this2.collection.push(item);
|
|
352
|
-
|
|
353
308
|
return _this2.collection;
|
|
354
309
|
});
|
|
355
310
|
} catch (e) {
|
|
356
311
|
return Promise.reject(e);
|
|
357
312
|
}
|
|
358
313
|
};
|
|
359
|
-
|
|
360
314
|
_proto.deregister = function deregister(ref) {
|
|
361
315
|
try {
|
|
362
316
|
var _this4 = this;
|
|
363
|
-
|
|
364
317
|
var index = _this4.collection.findIndex(function (entry) {
|
|
365
318
|
return entry === ref;
|
|
366
319
|
});
|
|
367
|
-
|
|
368
320
|
if (index >= 0) {
|
|
369
321
|
var entry = _this4.collection[index];
|
|
370
322
|
Object.getOwnPropertyNames(entry).forEach(function (prop) {
|
|
371
323
|
delete entry[prop];
|
|
372
324
|
});
|
|
373
|
-
|
|
374
325
|
_this4.collection.splice(index, 1);
|
|
375
326
|
}
|
|
376
|
-
|
|
377
327
|
return Promise.resolve(_this4.collection);
|
|
378
328
|
} catch (e) {
|
|
379
329
|
return Promise.reject(e);
|
|
380
330
|
}
|
|
381
331
|
};
|
|
382
|
-
|
|
383
332
|
_proto.registerCollection = function registerCollection(items) {
|
|
384
333
|
try {
|
|
385
334
|
var _this6 = this;
|
|
386
|
-
|
|
387
335
|
return Promise.resolve(Promise.all(Array.from(items, function (item) {
|
|
388
336
|
_this6.register(item);
|
|
389
337
|
}))).then(function () {
|
|
@@ -393,41 +341,34 @@ var Collection = /*#__PURE__*/function () {
|
|
|
393
341
|
return Promise.reject(e);
|
|
394
342
|
}
|
|
395
343
|
};
|
|
396
|
-
|
|
397
344
|
_proto.deregisterCollection = function deregisterCollection() {
|
|
398
345
|
try {
|
|
399
346
|
var _temp3 = function _temp3() {
|
|
400
347
|
return _this8.collection;
|
|
401
348
|
};
|
|
402
|
-
|
|
403
349
|
var _this8 = this;
|
|
404
|
-
|
|
405
350
|
var _temp4 = _for(function () {
|
|
406
351
|
return _this8.collection.length > 0;
|
|
407
352
|
}, void 0, function () {
|
|
408
353
|
return Promise.resolve(_this8.deregister(_this8.collection[0])).then(function () {});
|
|
409
354
|
});
|
|
410
|
-
|
|
411
355
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
|
|
412
356
|
} catch (e) {
|
|
413
357
|
return Promise.reject(e);
|
|
414
358
|
}
|
|
415
359
|
};
|
|
416
|
-
|
|
417
360
|
_proto.get = function get(value, key) {
|
|
418
361
|
if (key === void 0) {
|
|
419
362
|
key = 'id';
|
|
420
363
|
}
|
|
421
|
-
|
|
422
364
|
return this.collection.find(function (item) {
|
|
423
365
|
return item[key] === value;
|
|
424
366
|
});
|
|
425
367
|
};
|
|
426
|
-
|
|
427
368
|
return Collection;
|
|
428
369
|
}();
|
|
429
370
|
|
|
430
|
-
var
|
|
371
|
+
var e = [
|
|
431
372
|
'a[href]:not([tabindex^="-"])',
|
|
432
373
|
'area[href]:not([tabindex^="-"])',
|
|
433
374
|
'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
|
|
@@ -443,21 +384,16 @@ var focusableSelectors = [
|
|
|
443
384
|
];
|
|
444
385
|
|
|
445
386
|
var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
|
|
446
|
-
|
|
447
387
|
var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
|
|
448
|
-
|
|
449
388
|
var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
|
|
450
|
-
|
|
451
389
|
var FocusTrap = /*#__PURE__*/function () {
|
|
452
390
|
function FocusTrap(el, selectorFocus) {
|
|
453
391
|
if (el === void 0) {
|
|
454
392
|
el = null;
|
|
455
393
|
}
|
|
456
|
-
|
|
457
394
|
if (selectorFocus === void 0) {
|
|
458
395
|
selectorFocus = '[data-focus]';
|
|
459
396
|
}
|
|
460
|
-
|
|
461
397
|
Object.defineProperty(this, _focusable, {
|
|
462
398
|
writable: true,
|
|
463
399
|
value: void 0
|
|
@@ -475,73 +411,73 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
475
411
|
_classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap] = handleFocusTrap.bind(this);
|
|
476
412
|
_classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock] = handleFocusLock.bind(this);
|
|
477
413
|
}
|
|
478
|
-
|
|
479
414
|
var _proto = FocusTrap.prototype;
|
|
480
|
-
|
|
481
415
|
_proto.mount = function mount(el, selectorFocus) {
|
|
482
416
|
// Update passed params.
|
|
483
417
|
if (el) this.el = el;
|
|
484
|
-
if (selectorFocus) this.selectorFocus = selectorFocus;
|
|
418
|
+
if (selectorFocus) this.selectorFocus = selectorFocus;
|
|
485
419
|
|
|
486
|
-
|
|
420
|
+
// Get the focusable elements.
|
|
421
|
+
this.focusable = this.getFocusable();
|
|
487
422
|
|
|
423
|
+
// Set the focus on the element.
|
|
488
424
|
this.focus();
|
|
489
425
|
};
|
|
490
|
-
|
|
491
426
|
_proto.unmount = function unmount() {
|
|
492
427
|
// Set element to null.
|
|
493
|
-
this.el = null;
|
|
428
|
+
this.el = null;
|
|
494
429
|
|
|
495
|
-
|
|
430
|
+
// Apply empty array to focusable.
|
|
431
|
+
this.focusable = [];
|
|
496
432
|
|
|
433
|
+
// Remove event listeners
|
|
497
434
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
498
435
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
499
436
|
};
|
|
500
|
-
|
|
501
437
|
_proto.focus = function focus(el, selectorFocus) {
|
|
502
438
|
if (el === void 0) {
|
|
503
439
|
el = this.el;
|
|
504
440
|
}
|
|
505
|
-
|
|
506
441
|
if (selectorFocus === void 0) {
|
|
507
442
|
selectorFocus = this.selectorFocus;
|
|
508
443
|
}
|
|
509
|
-
|
|
510
444
|
// Query for the focus selector, otherwise return this element.
|
|
511
|
-
var result = el.querySelector(selectorFocus) || el;
|
|
512
|
-
|
|
445
|
+
var result = el.querySelector(selectorFocus) || el;
|
|
446
|
+
// Give the returned element focus.
|
|
513
447
|
result.focus();
|
|
514
448
|
};
|
|
515
|
-
|
|
516
449
|
_proto.getFocusable = function getFocusable(el) {
|
|
517
450
|
if (el === void 0) {
|
|
518
451
|
el = this.el;
|
|
519
452
|
}
|
|
520
|
-
|
|
521
453
|
// Initialize the focusable array.
|
|
522
|
-
var focusable = [];
|
|
454
|
+
var focusable = [];
|
|
523
455
|
|
|
456
|
+
// Store the initial focus and scroll position.
|
|
524
457
|
var initFocus = document.activeElement;
|
|
525
|
-
var initScrollTop = el.scrollTop;
|
|
458
|
+
var initScrollTop = el.scrollTop;
|
|
526
459
|
|
|
527
|
-
|
|
460
|
+
// Query for all the focusable elements.
|
|
461
|
+
var els = el.querySelectorAll(e.join(','));
|
|
528
462
|
|
|
463
|
+
// Loop through all focusable elements.
|
|
529
464
|
els.forEach(function (el) {
|
|
530
465
|
// Set them to focus and check
|
|
531
|
-
el.focus();
|
|
532
|
-
|
|
466
|
+
el.focus();
|
|
467
|
+
// Test that the element took focus.
|
|
533
468
|
if (document.activeElement === el) {
|
|
534
469
|
// Add element to the focusable array.
|
|
535
470
|
focusable.push(el);
|
|
536
471
|
}
|
|
537
|
-
});
|
|
472
|
+
});
|
|
538
473
|
|
|
474
|
+
// Restore the initial scroll position and focus.
|
|
539
475
|
el.scrollTop = initScrollTop;
|
|
540
|
-
initFocus.focus();
|
|
476
|
+
initFocus.focus();
|
|
541
477
|
|
|
478
|
+
// Return the focusable array.
|
|
542
479
|
return focusable;
|
|
543
480
|
};
|
|
544
|
-
|
|
545
481
|
_createClass(FocusTrap, [{
|
|
546
482
|
key: "focusable",
|
|
547
483
|
get: function get() {
|
|
@@ -549,8 +485,9 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
549
485
|
},
|
|
550
486
|
set: function set(value) {
|
|
551
487
|
// Update the focusable value.
|
|
552
|
-
_classPrivateFieldLooseBase(this, _focusable)[_focusable] = value;
|
|
488
|
+
_classPrivateFieldLooseBase(this, _focusable)[_focusable] = value;
|
|
553
489
|
|
|
490
|
+
// Apply event listeners based on new focusable array length.
|
|
554
491
|
if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
|
|
555
492
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
556
493
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
@@ -570,15 +507,14 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
570
507
|
return this.focusable[this.focusable.length - 1];
|
|
571
508
|
}
|
|
572
509
|
}]);
|
|
573
|
-
|
|
574
510
|
return FocusTrap;
|
|
575
511
|
}();
|
|
576
|
-
|
|
577
512
|
function handleFocusTrap(event) {
|
|
578
513
|
// Check if the click was a tab and return if not.
|
|
579
514
|
var isTab = event.key === 'Tab' || event.keyCode === 9;
|
|
580
|
-
if (!isTab) return;
|
|
515
|
+
if (!isTab) return;
|
|
581
516
|
|
|
517
|
+
// If the shift key is pressed.
|
|
582
518
|
if (event.shiftKey) {
|
|
583
519
|
// If the active element is either the root el or first focusable.
|
|
584
520
|
if (document.activeElement === this.focusableFirst || document.activeElement === this.el) {
|
|
@@ -595,7 +531,6 @@ function handleFocusTrap(event) {
|
|
|
595
531
|
}
|
|
596
532
|
}
|
|
597
533
|
}
|
|
598
|
-
|
|
599
534
|
function handleFocusLock(event) {
|
|
600
535
|
// Ignore the tab key by preventing default.
|
|
601
536
|
var isTab = event.key === 'Tab' || event.keyCode === 9;
|
|
@@ -616,7 +551,6 @@ function localStore(key, enable) {
|
|
|
616
551
|
if (enable === void 0) {
|
|
617
552
|
enable = true;
|
|
618
553
|
}
|
|
619
|
-
|
|
620
554
|
var local = localStorage.getItem(key);
|
|
621
555
|
var store = local ? JSON.parse(local) : {};
|
|
622
556
|
return {
|
|
@@ -629,7 +563,6 @@ function localStore(key, enable) {
|
|
|
629
563
|
} else {
|
|
630
564
|
delete store[prop];
|
|
631
565
|
}
|
|
632
|
-
|
|
633
566
|
if (enable) localStorage.setItem(key, JSON.stringify(store));
|
|
634
567
|
return store;
|
|
635
568
|
}
|
|
@@ -650,31 +583,37 @@ function localStore(key, enable) {
|
|
|
650
583
|
function teleport(what, where, how) {
|
|
651
584
|
// Check if ref is either a comment or element node.
|
|
652
585
|
var isComment = where.nodeType === Node.COMMENT_NODE;
|
|
653
|
-
var isElement = where.nodeType === Node.ELEMENT_NODE;
|
|
586
|
+
var isElement = where.nodeType === Node.ELEMENT_NODE;
|
|
654
587
|
|
|
655
|
-
|
|
588
|
+
// Get the reference element.
|
|
589
|
+
where = isComment || isElement ? where : document.querySelector(where);
|
|
656
590
|
|
|
657
|
-
|
|
591
|
+
// If ref is a comment, set teleport type to 'after'.
|
|
592
|
+
if (isComment) how = 'after';
|
|
658
593
|
|
|
594
|
+
// Must be a valid reference element and method.
|
|
659
595
|
if (!where) throw new Error("Not a valid teleport reference: '" + where + "'");
|
|
660
|
-
if (typeof where[how] != 'function') throw new Error("Not a valid teleport method: '" + how + "'");
|
|
596
|
+
if (typeof where[how] != 'function') throw new Error("Not a valid teleport method: '" + how + "'");
|
|
661
597
|
|
|
662
|
-
|
|
598
|
+
// Initial return ref is null.
|
|
599
|
+
var returnRef = null;
|
|
663
600
|
|
|
601
|
+
// If ref is not a comment, set a return reference comment.
|
|
664
602
|
if (!isComment) {
|
|
665
603
|
returnRef = document.createComment('teleported #' + what.id);
|
|
666
604
|
what.before(returnRef);
|
|
667
|
-
}
|
|
668
|
-
|
|
605
|
+
}
|
|
669
606
|
|
|
670
|
-
|
|
607
|
+
// Teleport the target node.
|
|
608
|
+
where[how](what);
|
|
671
609
|
|
|
610
|
+
// Delete the comment node if element was returned to a comment reference.
|
|
672
611
|
if (isComment) {
|
|
673
612
|
where.remove();
|
|
674
|
-
}
|
|
675
|
-
// returned to a comment reference.
|
|
676
|
-
|
|
613
|
+
}
|
|
677
614
|
|
|
615
|
+
// Return the return reference if it was teleported else return null if it was
|
|
616
|
+
// returned to a comment reference.
|
|
678
617
|
return returnRef;
|
|
679
618
|
}
|
|
680
619
|
|
|
@@ -727,7 +666,6 @@ function setOverflowHidden(state, selector) {
|
|
|
727
666
|
});
|
|
728
667
|
}
|
|
729
668
|
}
|
|
730
|
-
|
|
731
669
|
function setInert(state, selector) {
|
|
732
670
|
if (selector) {
|
|
733
671
|
var els = document.querySelectorAll(selector);
|
|
@@ -742,11 +680,11 @@ function setInert(state, selector) {
|
|
|
742
680
|
});
|
|
743
681
|
}
|
|
744
682
|
}
|
|
745
|
-
|
|
746
683
|
function updateGlobalState(param, config) {
|
|
747
684
|
// Set inert state based on if a modal is active.
|
|
748
|
-
setInert(!!param, config.selectorInert);
|
|
685
|
+
setInert(!!param, config.selectorInert);
|
|
749
686
|
|
|
687
|
+
// Set overflow state based on if a modal is active.
|
|
750
688
|
setOverflowHidden(!!param, config.selectorOverflow);
|
|
751
689
|
}
|
|
752
690
|
|
|
@@ -777,25 +715,20 @@ var Checkbox = /*#__PURE__*/function () {
|
|
|
777
715
|
this.__handlerClick = this.handlerClick.bind(this);
|
|
778
716
|
if (this.settings.autoInit) this.init();
|
|
779
717
|
}
|
|
780
|
-
|
|
781
718
|
var _proto = Checkbox.prototype;
|
|
782
|
-
|
|
783
719
|
_proto.init = function init(options) {
|
|
784
720
|
if (options === void 0) {
|
|
785
721
|
options = null;
|
|
786
722
|
}
|
|
787
|
-
|
|
788
723
|
if (options) this.settings = _extends({}, this.settings, options);
|
|
789
724
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
790
725
|
var mixed = document.querySelectorAll(selector);
|
|
791
726
|
this.setIndeterminate(mixed);
|
|
792
727
|
document.addEventListener('click', this.__handlerClick, false);
|
|
793
728
|
};
|
|
794
|
-
|
|
795
729
|
_proto.destroy = function destroy() {
|
|
796
730
|
document.removeEventListener('click', this.__handlerClick, false);
|
|
797
731
|
};
|
|
798
|
-
|
|
799
732
|
_proto.handlerClick = function handlerClick(event) {
|
|
800
733
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
801
734
|
var el = event.target.closest(selector);
|
|
@@ -803,32 +736,25 @@ var Checkbox = /*#__PURE__*/function () {
|
|
|
803
736
|
this.removeAriaState(el);
|
|
804
737
|
this.setIndeterminate(el);
|
|
805
738
|
};
|
|
806
|
-
|
|
807
739
|
_proto.setAriaState = function setAriaState(el, value) {
|
|
808
740
|
var _this = this;
|
|
809
|
-
|
|
810
741
|
if (value === void 0) {
|
|
811
742
|
value = this.settings.stateValue;
|
|
812
743
|
}
|
|
813
|
-
|
|
814
744
|
el = el.forEach ? el : [el];
|
|
815
745
|
el.forEach(function (el) {
|
|
816
746
|
el.setAttribute(_this.settings.stateAttr, value);
|
|
817
747
|
});
|
|
818
748
|
};
|
|
819
|
-
|
|
820
749
|
_proto.removeAriaState = function removeAriaState(el) {
|
|
821
750
|
var _this2 = this;
|
|
822
|
-
|
|
823
751
|
el = el.forEach ? el : [el];
|
|
824
752
|
el.forEach(function (el) {
|
|
825
753
|
el.removeAttribute(_this2.settings.stateAttr);
|
|
826
754
|
});
|
|
827
755
|
};
|
|
828
|
-
|
|
829
756
|
_proto.setIndeterminate = function setIndeterminate(el) {
|
|
830
757
|
var _this3 = this;
|
|
831
|
-
|
|
832
758
|
el = el.forEach ? el : [el];
|
|
833
759
|
el.forEach(function (el) {
|
|
834
760
|
if (el.hasAttribute(_this3.settings.stateAttr)) {
|
|
@@ -838,7 +764,6 @@ var Checkbox = /*#__PURE__*/function () {
|
|
|
838
764
|
}
|
|
839
765
|
});
|
|
840
766
|
};
|
|
841
|
-
|
|
842
767
|
return Checkbox;
|
|
843
768
|
}();
|
|
844
769
|
|
|
@@ -875,68 +800,61 @@ var defaults$2 = {
|
|
|
875
800
|
|
|
876
801
|
function handleClick$2(event) {
|
|
877
802
|
var _this = this;
|
|
878
|
-
|
|
879
803
|
// If an open, close or toggle button was clicked, handle the click event.
|
|
880
804
|
var trigger = event.target.closest("\n [data-" + this.settings.dataOpen + "],\n [data-" + this.settings.dataToggle + "],\n [data-" + this.settings.dataClose + "]\n ");
|
|
881
|
-
|
|
882
805
|
if (trigger) {
|
|
883
806
|
// Prevent the default behavior of the trigger.
|
|
884
|
-
event.preventDefault();
|
|
807
|
+
event.preventDefault();
|
|
885
808
|
|
|
809
|
+
// If it's a toggle trigger...
|
|
886
810
|
if (trigger.matches("[data-" + this.settings.dataToggle + "]")) {
|
|
887
811
|
var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(' ');
|
|
888
812
|
selectors.forEach(function (selector) {
|
|
889
813
|
// Get the entry from collection using the attribute value.
|
|
890
|
-
var entry = _this.get(selector);
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
814
|
+
var entry = _this.get(selector);
|
|
815
|
+
// Store the trigger on the entry.
|
|
816
|
+
entry.trigger = trigger;
|
|
817
|
+
// Toggle the drawer
|
|
895
818
|
entry.toggle();
|
|
896
819
|
});
|
|
897
|
-
}
|
|
898
|
-
|
|
820
|
+
}
|
|
899
821
|
|
|
822
|
+
// If it's a open trigger...
|
|
900
823
|
if (trigger.matches("[data-" + this.settings.dataOpen + "]")) {
|
|
901
824
|
var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(' ');
|
|
902
|
-
|
|
903
825
|
_selectors.forEach(function (selector) {
|
|
904
826
|
// Get the entry from collection using the attribute value.
|
|
905
|
-
var entry = _this.get(selector);
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
827
|
+
var entry = _this.get(selector);
|
|
828
|
+
// Store the trigger on the entry.
|
|
829
|
+
entry.trigger = trigger;
|
|
830
|
+
// Open the drawer.
|
|
910
831
|
entry.open();
|
|
911
832
|
});
|
|
912
|
-
}
|
|
913
|
-
|
|
833
|
+
}
|
|
914
834
|
|
|
835
|
+
// If it's a close trigger...
|
|
915
836
|
if (trigger.matches("[data-" + this.settings.dataClose + "]")) {
|
|
916
837
|
var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(' ');
|
|
917
|
-
|
|
918
838
|
_selectors2.forEach(function (selector) {
|
|
919
839
|
if (selector) {
|
|
920
840
|
// Get the entry from collection using the attribute value.
|
|
921
|
-
var entry = _this.get(selector);
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
841
|
+
var entry = _this.get(selector);
|
|
842
|
+
// Store the trigger on the entry.
|
|
843
|
+
entry.trigger = trigger;
|
|
844
|
+
// Close the drawer.
|
|
926
845
|
entry.close();
|
|
927
846
|
} else {
|
|
928
847
|
// If no value is set on close trigger, get the parent drawer.
|
|
929
|
-
var parent = event.target.closest(_this.settings.selectorDrawer);
|
|
930
|
-
|
|
848
|
+
var parent = event.target.closest(_this.settings.selectorDrawer);
|
|
849
|
+
// If a parent drawer was found, close it.
|
|
931
850
|
if (parent) _this.close(parent);
|
|
932
851
|
}
|
|
933
852
|
});
|
|
934
853
|
}
|
|
935
|
-
|
|
936
854
|
return;
|
|
937
|
-
}
|
|
938
|
-
|
|
855
|
+
}
|
|
939
856
|
|
|
857
|
+
// If the modal drawer screen was clicked...
|
|
940
858
|
if (event.target.matches(this.settings.selectorDrawer)) {
|
|
941
859
|
// Close the modal drawer.
|
|
942
860
|
this.close(event.target.id);
|
|
@@ -953,53 +871,49 @@ var deregister$2 = function deregister(obj, close) {
|
|
|
953
871
|
if (close === void 0) {
|
|
954
872
|
close = true;
|
|
955
873
|
}
|
|
956
|
-
|
|
957
874
|
try {
|
|
958
875
|
var _temp5 = function _temp5() {
|
|
959
876
|
// Return the modified collection.
|
|
960
877
|
return _this2.collection;
|
|
961
878
|
};
|
|
962
|
-
|
|
963
879
|
var _this2 = this;
|
|
964
|
-
|
|
965
880
|
// Return collection if nothing was passed.
|
|
966
|
-
if (!obj) return Promise.resolve(_this2.collection);
|
|
881
|
+
if (!obj) return Promise.resolve(_this2.collection);
|
|
967
882
|
|
|
883
|
+
// Check if entry has been registered in the collection.
|
|
968
884
|
var index = _this2.collection.findIndex(function (entry) {
|
|
969
885
|
return entry.id === obj.id;
|
|
970
886
|
});
|
|
971
|
-
|
|
972
887
|
var _temp6 = function () {
|
|
973
888
|
if (index >= 0) {
|
|
974
889
|
var _temp7 = function _temp7() {
|
|
975
890
|
// Remove entry from local store.
|
|
976
|
-
_this2.store.set(_entry.id);
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
_entry.unmountBreakpoint(); // Delete properties from collection entry.
|
|
891
|
+
_this2.store.set(_entry.id);
|
|
980
892
|
|
|
893
|
+
// Unmount the MatchMedia functionality.
|
|
894
|
+
_entry.unmountBreakpoint();
|
|
981
895
|
|
|
896
|
+
// Delete properties from collection entry.
|
|
982
897
|
Object.getOwnPropertyNames(_entry).forEach(function (prop) {
|
|
983
898
|
delete _entry[prop];
|
|
984
|
-
});
|
|
899
|
+
});
|
|
985
900
|
|
|
901
|
+
// Remove entry from collection.
|
|
986
902
|
_this2.collection.splice(index, 1);
|
|
987
903
|
};
|
|
988
|
-
|
|
989
904
|
// Get the collection entry.
|
|
990
|
-
var _entry = _this2.collection[index];
|
|
905
|
+
var _entry = _this2.collection[index];
|
|
991
906
|
|
|
907
|
+
// If entry is in the opened state.
|
|
992
908
|
var _temp8 = function () {
|
|
993
909
|
if (close && _entry.state === 'opened') {
|
|
994
910
|
// Close the drawer.
|
|
995
911
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
996
912
|
}
|
|
997
913
|
}();
|
|
998
|
-
|
|
999
914
|
return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
|
|
1000
915
|
}
|
|
1001
916
|
}();
|
|
1002
|
-
|
|
1003
917
|
return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
|
|
1004
918
|
} catch (e) {
|
|
1005
919
|
return Promise.reject(e);
|
|
@@ -1013,7 +927,6 @@ function g() {
|
|
|
1013
927
|
function getBreakpoint(drawer) {
|
|
1014
928
|
var prefix = g();
|
|
1015
929
|
var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
|
|
1016
|
-
|
|
1017
930
|
if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
|
|
1018
931
|
return this.settings.breakpoints[bp];
|
|
1019
932
|
} else if (getComputedStyle(document.body).getPropertyValue("--" + prefix + "breakpoint-" + bp).trim()) {
|
|
@@ -1025,8 +938,9 @@ function getBreakpoint(drawer) {
|
|
|
1025
938
|
|
|
1026
939
|
function getDrawer(query) {
|
|
1027
940
|
// Get the entry from collection.
|
|
1028
|
-
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
941
|
+
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1029
942
|
|
|
943
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
1030
944
|
if (entry) {
|
|
1031
945
|
return entry;
|
|
1032
946
|
} else {
|
|
@@ -1038,37 +952,49 @@ function getDrawerID(obj) {
|
|
|
1038
952
|
// If it's a string, return the string.
|
|
1039
953
|
if (typeof obj === 'string') {
|
|
1040
954
|
return obj;
|
|
1041
|
-
}
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
// If it's an HTML element.
|
|
1042
958
|
else if (typeof obj.hasAttribute === 'function') {
|
|
1043
959
|
// If it's a drawer open trigger, return data value.
|
|
1044
960
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
1045
961
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
1046
|
-
}
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
// If it's a drawer close trigger, return data value or false.
|
|
1047
965
|
else if (obj.hasAttribute("data-" + this.settings.dataClose)) {
|
|
1048
966
|
return obj.getAttribute("data-" + this.settings.dataClose) || false;
|
|
1049
|
-
}
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
// If it's a drawer toggle trigger, return data value.
|
|
1050
970
|
else if (obj.hasAttribute("data-" + this.settings.dataToggle)) {
|
|
1051
971
|
return obj.getAttribute("data-" + this.settings.dataToggle);
|
|
1052
|
-
}
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
// If it's a drawer element, return the id.
|
|
1053
975
|
else if (obj.closest(this.settings.selectorDrawer)) {
|
|
1054
976
|
obj = obj.closest(this.settings.selectorDrawer);
|
|
1055
977
|
return obj.id || false;
|
|
1056
|
-
}
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
// Return false if no id was found.
|
|
1057
981
|
else return false;
|
|
1058
|
-
}
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
// If it has an id property, return its value.
|
|
1059
985
|
else if (obj.id) {
|
|
1060
986
|
return obj.id;
|
|
1061
|
-
}
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
// Return false if no id was found.
|
|
1062
990
|
else return false;
|
|
1063
991
|
}
|
|
1064
992
|
|
|
1065
993
|
function getDrawerElements(query) {
|
|
1066
994
|
var id = getDrawerID.call(this, query);
|
|
1067
|
-
|
|
1068
995
|
if (id) {
|
|
1069
996
|
var drawer = document.querySelector("#" + id);
|
|
1070
997
|
var dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
|
|
1071
|
-
|
|
1072
998
|
if (!drawer && !dialog) {
|
|
1073
999
|
return {
|
|
1074
1000
|
error: new Error("No drawer elements found using the ID: \"" + id + "\".")
|
|
@@ -1093,7 +1019,6 @@ function getDrawerElements(query) {
|
|
|
1093
1019
|
var initialState = function initialState(entry) {
|
|
1094
1020
|
try {
|
|
1095
1021
|
var _this2 = this;
|
|
1096
|
-
|
|
1097
1022
|
var _temp3 = function () {
|
|
1098
1023
|
if (_this2.store.get(entry.id)) {
|
|
1099
1024
|
var _temp4 = function () {
|
|
@@ -1103,7 +1028,6 @@ var initialState = function initialState(entry) {
|
|
|
1103
1028
|
return Promise.resolve(entry.close(false, false)).then(function () {});
|
|
1104
1029
|
}
|
|
1105
1030
|
}();
|
|
1106
|
-
|
|
1107
1031
|
if (_temp4 && _temp4.then) return _temp4.then(function () {});
|
|
1108
1032
|
} else if (entry.el.classList.contains(_this2.settings.stateOpened)) {
|
|
1109
1033
|
// Update drawer state.
|
|
@@ -1111,12 +1035,11 @@ var initialState = function initialState(entry) {
|
|
|
1111
1035
|
} else {
|
|
1112
1036
|
// Remove transition state classes.
|
|
1113
1037
|
entry.el.classList.remove(_this2.settings.stateOpening);
|
|
1114
|
-
entry.el.classList.remove(_this2.settings.stateClosing);
|
|
1115
|
-
|
|
1038
|
+
entry.el.classList.remove(_this2.settings.stateClosing);
|
|
1039
|
+
// Add closed state class.
|
|
1116
1040
|
entry.el.classList.add(_this2.settings.stateClosed);
|
|
1117
1041
|
}
|
|
1118
1042
|
}();
|
|
1119
|
-
|
|
1120
1043
|
// Setup initial state using the following priority:
|
|
1121
1044
|
// 1. If a store state is available, restore from local store.
|
|
1122
1045
|
// 2. If opened state class is set, set state to opened.
|
|
@@ -1142,7 +1065,6 @@ function updateFocusState$1(entry) {
|
|
|
1142
1065
|
entry.trigger.focus();
|
|
1143
1066
|
entry.trigger = null;
|
|
1144
1067
|
}
|
|
1145
|
-
|
|
1146
1068
|
this.focusTrap.unmount();
|
|
1147
1069
|
}
|
|
1148
1070
|
}
|
|
@@ -1151,47 +1073,48 @@ var open$2 = function open(query, transition, focus) {
|
|
|
1151
1073
|
if (focus === void 0) {
|
|
1152
1074
|
focus = true;
|
|
1153
1075
|
}
|
|
1154
|
-
|
|
1155
1076
|
try {
|
|
1156
1077
|
var _temp3 = function _temp3() {
|
|
1157
1078
|
// Set focus to the drawer element if the focus param is true.
|
|
1158
1079
|
if (focus) {
|
|
1159
1080
|
updateFocusState$1.call(_this2, drawer);
|
|
1160
|
-
}
|
|
1161
|
-
|
|
1081
|
+
}
|
|
1162
1082
|
|
|
1083
|
+
// Dispatch custom opened event.
|
|
1163
1084
|
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
|
|
1164
1085
|
detail: _this2,
|
|
1165
1086
|
bubbles: true
|
|
1166
|
-
}));
|
|
1087
|
+
}));
|
|
1167
1088
|
|
|
1089
|
+
// Return the drawer.
|
|
1168
1090
|
return drawer;
|
|
1169
1091
|
};
|
|
1170
|
-
|
|
1171
1092
|
var _this2 = this;
|
|
1172
|
-
|
|
1173
1093
|
// Get the drawer from collection.
|
|
1174
|
-
var drawer = getDrawer.call(_this2, query);
|
|
1094
|
+
var drawer = getDrawer.call(_this2, query);
|
|
1175
1095
|
|
|
1176
|
-
|
|
1096
|
+
// Get the modal configuration.
|
|
1097
|
+
var config = _extends({}, _this2.settings, drawer.settings);
|
|
1177
1098
|
|
|
1099
|
+
// Add transition parameter to configuration.
|
|
1100
|
+
if (transition !== undefined) config.transition = transition;
|
|
1178
1101
|
|
|
1179
|
-
|
|
1180
|
-
|
|
1102
|
+
// If drawer is closed.
|
|
1181
1103
|
var _temp4 = function () {
|
|
1182
1104
|
if (drawer.state === 'closed') {
|
|
1183
1105
|
// Update drawer state.
|
|
1184
|
-
drawer.state = 'opening';
|
|
1106
|
+
drawer.state = 'opening';
|
|
1185
1107
|
|
|
1108
|
+
// Run the open transition.
|
|
1186
1109
|
return Promise.resolve(openTransition(drawer.el, config)).then(function () {
|
|
1187
1110
|
// Update the global state if mode is modal.
|
|
1188
|
-
if (drawer.mode === 'modal') updateGlobalState(true, config);
|
|
1111
|
+
if (drawer.mode === 'modal') updateGlobalState(true, config);
|
|
1189
1112
|
|
|
1113
|
+
// Update drawer state.
|
|
1190
1114
|
drawer.state = 'opened';
|
|
1191
1115
|
});
|
|
1192
1116
|
}
|
|
1193
1117
|
}();
|
|
1194
|
-
|
|
1195
1118
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
|
|
1196
1119
|
} catch (e) {
|
|
1197
1120
|
return Promise.reject(e);
|
|
@@ -1202,36 +1125,40 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1202
1125
|
if (focus === void 0) {
|
|
1203
1126
|
focus = true;
|
|
1204
1127
|
}
|
|
1205
|
-
|
|
1206
1128
|
try {
|
|
1207
1129
|
var _this2 = this;
|
|
1208
|
-
|
|
1209
1130
|
// Get the drawer from collection.
|
|
1210
|
-
var drawer = getDrawer.call(_this2, query);
|
|
1211
|
-
|
|
1212
|
-
var config = _extends({}, _this2.settings, drawer.settings); // Add transition parameter to configuration.
|
|
1131
|
+
var drawer = getDrawer.call(_this2, query);
|
|
1213
1132
|
|
|
1133
|
+
// Get the modal configuration.
|
|
1134
|
+
var config = _extends({}, _this2.settings, drawer.settings);
|
|
1214
1135
|
|
|
1215
|
-
|
|
1136
|
+
// Add transition parameter to configuration.
|
|
1137
|
+
if (transition !== undefined) config.transition = transition;
|
|
1216
1138
|
|
|
1139
|
+
// If drawer is opened.
|
|
1217
1140
|
var _temp2 = function () {
|
|
1218
1141
|
if (drawer.state === 'opened') {
|
|
1219
1142
|
// Update drawer state.
|
|
1220
|
-
drawer.state = 'closing';
|
|
1143
|
+
drawer.state = 'closing';
|
|
1221
1144
|
|
|
1222
|
-
|
|
1145
|
+
// Remove focus from active element.
|
|
1146
|
+
document.activeElement.blur();
|
|
1223
1147
|
|
|
1148
|
+
// Run the close transition.
|
|
1224
1149
|
return Promise.resolve(closeTransition(drawer.el, config)).then(function () {
|
|
1225
1150
|
// Update the global state if mode is modal.
|
|
1226
|
-
if (drawer.mode === 'modal') updateGlobalState(false, config);
|
|
1151
|
+
if (drawer.mode === 'modal') updateGlobalState(false, config);
|
|
1227
1152
|
|
|
1153
|
+
// Set focus to the trigger element if the focus param is true.
|
|
1228
1154
|
if (focus) {
|
|
1229
1155
|
updateFocusState$1.call(_this2, drawer);
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1156
|
+
}
|
|
1232
1157
|
|
|
1233
|
-
|
|
1158
|
+
// Update drawer state.
|
|
1159
|
+
drawer.state = 'closed';
|
|
1234
1160
|
|
|
1161
|
+
// Dispatch custom closed event.
|
|
1235
1162
|
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
|
|
1236
1163
|
detail: _this2,
|
|
1237
1164
|
bubbles: true
|
|
@@ -1239,7 +1166,6 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1239
1166
|
});
|
|
1240
1167
|
}
|
|
1241
1168
|
}();
|
|
1242
|
-
|
|
1243
1169
|
return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
|
|
1244
1170
|
// Return the drawer.
|
|
1245
1171
|
return drawer;
|
|
@@ -1252,10 +1178,10 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1252
1178
|
var toggle = function toggle(query, transition, focus) {
|
|
1253
1179
|
try {
|
|
1254
1180
|
var _this2 = this;
|
|
1255
|
-
|
|
1256
1181
|
// Get the drawer from collection.
|
|
1257
|
-
var drawer = getDrawer.call(_this2, query);
|
|
1182
|
+
var drawer = getDrawer.call(_this2, query);
|
|
1258
1183
|
|
|
1184
|
+
// Open or close the drawer based on its current state.
|
|
1259
1185
|
if (drawer.state === 'closed') {
|
|
1260
1186
|
return Promise.resolve(open$2.call(_this2, drawer, transition, focus));
|
|
1261
1187
|
} else {
|
|
@@ -1269,69 +1195,71 @@ var toggle = function toggle(query, transition, focus) {
|
|
|
1269
1195
|
var toModal = function toModal(entry) {
|
|
1270
1196
|
try {
|
|
1271
1197
|
var _this4 = this;
|
|
1272
|
-
|
|
1273
1198
|
// Get the drawer configuration.
|
|
1199
|
+
|
|
1274
1200
|
// Add the modal class.
|
|
1275
|
-
entry.el.classList.add(entry.getSetting('classModal'));
|
|
1201
|
+
entry.el.classList.add(entry.getSetting('classModal'));
|
|
1276
1202
|
|
|
1277
|
-
|
|
1203
|
+
// Set aria-modal attribute to true.
|
|
1204
|
+
entry.dialog.setAttribute('aria-modal', 'true');
|
|
1278
1205
|
|
|
1206
|
+
// If there isn't a stored state but also has the opened state class...
|
|
1279
1207
|
if (!_this4.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
|
|
1280
1208
|
// Save the opened state in local store.
|
|
1281
1209
|
_this4.store.set(entry.id, 'opened');
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1210
|
+
}
|
|
1284
1211
|
|
|
1212
|
+
// Modal drawer defaults to closed state.
|
|
1285
1213
|
return Promise.resolve(close$2.call(_this4, entry, false, false)).then(function () {
|
|
1286
1214
|
// Dispatch custom switch event.
|
|
1287
1215
|
entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
|
|
1288
1216
|
detail: _this4,
|
|
1289
1217
|
bubbles: true
|
|
1290
|
-
}));
|
|
1218
|
+
}));
|
|
1291
1219
|
|
|
1220
|
+
// Return the entry.
|
|
1292
1221
|
return entry;
|
|
1293
1222
|
});
|
|
1294
1223
|
} catch (e) {
|
|
1295
1224
|
return Promise.reject(e);
|
|
1296
1225
|
}
|
|
1297
1226
|
};
|
|
1298
|
-
|
|
1299
1227
|
var toInline = function toInline(entry) {
|
|
1300
1228
|
try {
|
|
1301
1229
|
var _this2 = this;
|
|
1302
|
-
|
|
1303
1230
|
// Remove the modal class.
|
|
1304
|
-
entry.el.classList.remove(entry.getSetting('classModal'));
|
|
1231
|
+
entry.el.classList.remove(entry.getSetting('classModal'));
|
|
1305
1232
|
|
|
1306
|
-
|
|
1233
|
+
// Remove the aria-modal attribute.
|
|
1234
|
+
entry.dialog.removeAttribute('aria-modal');
|
|
1307
1235
|
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
_this2.focusTrap.unmount(); // Setup initial state.
|
|
1236
|
+
// Update the global state.
|
|
1237
|
+
updateGlobalState(false, _extends({}, _this2.settings, entry.settings));
|
|
1311
1238
|
|
|
1239
|
+
// Remove any focus traps.
|
|
1240
|
+
_this2.focusTrap.unmount();
|
|
1312
1241
|
|
|
1242
|
+
// Setup initial state.
|
|
1313
1243
|
return Promise.resolve(initialState.call(_this2, entry)).then(function () {
|
|
1314
1244
|
// Dispatch custom switch event.
|
|
1315
1245
|
entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
|
|
1316
1246
|
detail: _this2,
|
|
1317
1247
|
bubbles: true
|
|
1318
|
-
}));
|
|
1248
|
+
}));
|
|
1319
1249
|
|
|
1250
|
+
// Return the entry.
|
|
1320
1251
|
return entry;
|
|
1321
1252
|
});
|
|
1322
1253
|
} catch (e) {
|
|
1323
1254
|
return Promise.reject(e);
|
|
1324
1255
|
}
|
|
1325
1256
|
};
|
|
1326
|
-
|
|
1327
1257
|
function switchMode(entry) {
|
|
1328
1258
|
switch (entry.mode) {
|
|
1329
1259
|
case 'inline':
|
|
1330
1260
|
return toInline.call(this, entry);
|
|
1331
|
-
|
|
1332
1261
|
case 'modal':
|
|
1333
1262
|
return toModal.call(this, entry);
|
|
1334
|
-
|
|
1335
1263
|
default:
|
|
1336
1264
|
throw new Error("\"" + entry.mode + "\" is not a valid drawer mode.");
|
|
1337
1265
|
}
|
|
@@ -1340,14 +1268,15 @@ function switchMode(entry) {
|
|
|
1340
1268
|
var register$2 = function register(el, dialog) {
|
|
1341
1269
|
try {
|
|
1342
1270
|
var _this2 = this;
|
|
1343
|
-
|
|
1344
1271
|
// Deregister entry incase it has already been registered.
|
|
1345
1272
|
return Promise.resolve(deregister$2.call(_this2, el, false)).then(function () {
|
|
1346
1273
|
// Save root this for use inside methods API.
|
|
1347
|
-
var root = _this2;
|
|
1274
|
+
var root = _this2;
|
|
1348
1275
|
|
|
1349
|
-
|
|
1276
|
+
// Create an instance of the Breakpoint class.
|
|
1277
|
+
var breakpoint = new Breakpoint();
|
|
1350
1278
|
|
|
1279
|
+
// Setup methods API.
|
|
1351
1280
|
var methods = {
|
|
1352
1281
|
open: function open(transition, focus) {
|
|
1353
1282
|
return open$2.call(root, this, transition, focus);
|
|
@@ -1378,66 +1307,61 @@ var register$2 = function register(el, dialog) {
|
|
|
1378
1307
|
getSetting: function getSetting(key) {
|
|
1379
1308
|
return key in this.settings ? this.settings[key] : root.settings[key];
|
|
1380
1309
|
}
|
|
1381
|
-
};
|
|
1310
|
+
};
|
|
1382
1311
|
|
|
1312
|
+
// Setup the drawer object.
|
|
1383
1313
|
var entry = _extends({
|
|
1384
1314
|
id: el.id,
|
|
1385
1315
|
el: el,
|
|
1386
1316
|
dialog: dialog,
|
|
1387
1317
|
trigger: null,
|
|
1388
1318
|
settings: getConfig$1(el, _this2.settings.dataConfig),
|
|
1389
|
-
|
|
1390
1319
|
get breakpoint() {
|
|
1391
1320
|
return getBreakpoint.call(root, el);
|
|
1392
1321
|
},
|
|
1393
|
-
|
|
1394
1322
|
get state() {
|
|
1395
1323
|
return __state;
|
|
1396
1324
|
},
|
|
1397
|
-
|
|
1398
1325
|
set state(value) {
|
|
1399
|
-
__state = value;
|
|
1400
|
-
|
|
1326
|
+
__state = value;
|
|
1327
|
+
// Save 'opened' and 'closed' states to store if mode is inline.
|
|
1401
1328
|
if (value === 'opened' || value === 'closed') {
|
|
1402
1329
|
if (this.mode === 'inline') root.store.set(this.id, this.state);
|
|
1403
1330
|
}
|
|
1404
1331
|
},
|
|
1405
|
-
|
|
1406
1332
|
get mode() {
|
|
1407
1333
|
return __mode;
|
|
1408
1334
|
},
|
|
1409
|
-
|
|
1410
1335
|
set mode(value) {
|
|
1411
1336
|
__mode = value;
|
|
1412
1337
|
switchMode.call(root, this);
|
|
1413
1338
|
}
|
|
1339
|
+
}, methods);
|
|
1414
1340
|
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
var __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
var __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
|
|
1341
|
+
// Create the state var with the initial state.
|
|
1342
|
+
var __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed';
|
|
1422
1343
|
|
|
1344
|
+
// Create the mode var with the initial mode.
|
|
1345
|
+
var __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline';
|
|
1423
1346
|
|
|
1347
|
+
// Setup mode specific attributes.
|
|
1424
1348
|
if (entry.mode === 'modal') {
|
|
1425
1349
|
// Set aria-modal attribute to true.
|
|
1426
1350
|
entry.dialog.setAttribute('aria-modal', 'true');
|
|
1427
1351
|
} else {
|
|
1428
1352
|
// Remove the aria-modal attribute.
|
|
1429
1353
|
entry.dialog.removeAttribute('aria-modal');
|
|
1430
|
-
}
|
|
1431
|
-
|
|
1354
|
+
}
|
|
1432
1355
|
|
|
1356
|
+
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1433
1357
|
if (entry.getSetting('setTabindex')) {
|
|
1434
1358
|
entry.dialog.setAttribute('tabindex', '-1');
|
|
1435
|
-
}
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
_this2.collection.push(entry); // If the entry has a breakpoint...
|
|
1359
|
+
}
|
|
1439
1360
|
|
|
1361
|
+
// Add entry to collection.
|
|
1362
|
+
_this2.collection.push(entry);
|
|
1440
1363
|
|
|
1364
|
+
// If the entry has a breakpoint...
|
|
1441
1365
|
var _temp = function () {
|
|
1442
1366
|
if (entry.breakpoint) {
|
|
1443
1367
|
// Mount media query breakpoint functionality.
|
|
@@ -1447,7 +1371,6 @@ var register$2 = function register(el, dialog) {
|
|
|
1447
1371
|
return Promise.resolve(initialState.call(_this2, entry)).then(function () {});
|
|
1448
1372
|
}
|
|
1449
1373
|
}();
|
|
1450
|
-
|
|
1451
1374
|
return _temp && _temp.then ? _temp.then(function () {
|
|
1452
1375
|
// Return the registered entry.
|
|
1453
1376
|
return entry;
|
|
@@ -1459,15 +1382,11 @@ var register$2 = function register(el, dialog) {
|
|
|
1459
1382
|
};
|
|
1460
1383
|
|
|
1461
1384
|
var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
1462
|
-
|
|
1463
1385
|
var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
1464
|
-
|
|
1465
1386
|
var Drawer = /*#__PURE__*/function (_Collection) {
|
|
1466
1387
|
_inheritsLoose(Drawer, _Collection);
|
|
1467
|
-
|
|
1468
1388
|
function Drawer(options) {
|
|
1469
1389
|
var _this;
|
|
1470
|
-
|
|
1471
1390
|
_this = _Collection.call(this) || this;
|
|
1472
1391
|
Object.defineProperty(_assertThisInitialized(_this), _handleClick$1, {
|
|
1473
1392
|
writable: true,
|
|
@@ -1479,96 +1398,81 @@ var Drawer = /*#__PURE__*/function (_Collection) {
|
|
|
1479
1398
|
});
|
|
1480
1399
|
_this.defaults = defaults$2;
|
|
1481
1400
|
_this.settings = _extends({}, _this.defaults, options);
|
|
1482
|
-
_this.focusTrap = new FocusTrap();
|
|
1401
|
+
_this.focusTrap = new FocusTrap();
|
|
1483
1402
|
|
|
1403
|
+
// Setup local store for inline drawer state management.
|
|
1484
1404
|
_this.store = localStore(_this.settings.storeKey, _this.settings.store);
|
|
1485
1405
|
_classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleClick$1)[_handleClick$1] = handleClick$2.bind(_assertThisInitialized(_this));
|
|
1486
1406
|
_classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(_assertThisInitialized(_this));
|
|
1487
1407
|
if (_this.settings.autoInit) _this.init();
|
|
1488
1408
|
return _this;
|
|
1489
1409
|
}
|
|
1490
|
-
|
|
1491
1410
|
var _proto = Drawer.prototype;
|
|
1492
|
-
|
|
1493
1411
|
_proto.init = function init(options) {
|
|
1494
1412
|
if (options === void 0) {
|
|
1495
1413
|
options = null;
|
|
1496
1414
|
}
|
|
1497
|
-
|
|
1498
1415
|
try {
|
|
1499
1416
|
var _this3 = this;
|
|
1500
|
-
|
|
1501
1417
|
// Update settings with passed options.
|
|
1502
|
-
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
1418
|
+
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
1503
1419
|
|
|
1504
|
-
|
|
1420
|
+
// Get all the modals.
|
|
1421
|
+
var drawers = document.querySelectorAll(_this3.settings.selectorDrawer);
|
|
1505
1422
|
|
|
1423
|
+
// Register the collections array with modal instances.
|
|
1506
1424
|
return Promise.resolve(_this3.registerCollection(drawers)).then(function () {
|
|
1507
1425
|
// If eventListeners are enabled, init event listeners.
|
|
1508
1426
|
if (_this3.settings.eventListeners) {
|
|
1509
1427
|
_this3.initEventListeners();
|
|
1510
1428
|
}
|
|
1511
|
-
|
|
1512
1429
|
return _this3;
|
|
1513
1430
|
});
|
|
1514
1431
|
} catch (e) {
|
|
1515
1432
|
return Promise.reject(e);
|
|
1516
1433
|
}
|
|
1517
1434
|
};
|
|
1518
|
-
|
|
1519
1435
|
_proto.destroy = function destroy() {
|
|
1520
1436
|
try {
|
|
1521
1437
|
var _this5 = this;
|
|
1522
|
-
|
|
1523
1438
|
// Remove all entries from the collection.
|
|
1524
1439
|
return Promise.resolve(_this5.deregisterCollection()).then(function () {
|
|
1525
1440
|
// If eventListeners are enabled, init event listeners.
|
|
1526
1441
|
if (_this5.settings.eventListeners) {
|
|
1527
1442
|
_this5.destroyEventListeners();
|
|
1528
1443
|
}
|
|
1529
|
-
|
|
1530
1444
|
return _this5;
|
|
1531
1445
|
});
|
|
1532
1446
|
} catch (e) {
|
|
1533
1447
|
return Promise.reject(e);
|
|
1534
1448
|
}
|
|
1535
1449
|
};
|
|
1536
|
-
|
|
1537
1450
|
_proto.initEventListeners = function initEventListeners() {
|
|
1538
1451
|
document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1539
|
-
document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1540
1452
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1541
1453
|
};
|
|
1542
|
-
|
|
1543
1454
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
1544
1455
|
document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1545
|
-
document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1546
1456
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1547
1457
|
};
|
|
1548
|
-
|
|
1549
1458
|
_proto.register = function register(query) {
|
|
1550
1459
|
var els = getDrawerElements.call(this, query);
|
|
1551
1460
|
if (els.error) return Promise.reject(els.error);
|
|
1552
1461
|
return register$2.call(this, els.drawer, els.dialog);
|
|
1553
1462
|
};
|
|
1554
|
-
|
|
1555
1463
|
_proto.deregister = function deregister(query) {
|
|
1556
1464
|
var entry = this.get(getDrawerID.call(this, query));
|
|
1557
1465
|
return deregister$2.call(this, entry);
|
|
1558
1466
|
};
|
|
1559
|
-
|
|
1560
1467
|
_proto.open = function open(id, transition, focus) {
|
|
1561
1468
|
return open$2.call(this, id, transition, focus);
|
|
1562
1469
|
};
|
|
1563
|
-
|
|
1564
1470
|
_proto.close = function close(id, transition, focus) {
|
|
1565
1471
|
return close$2.call(this, id, transition, focus);
|
|
1566
1472
|
};
|
|
1567
|
-
|
|
1568
1473
|
_proto.toggle = function toggle$1(id, transition, focus) {
|
|
1569
1474
|
return toggle.call(this, id, transition, focus);
|
|
1570
1475
|
};
|
|
1571
|
-
|
|
1572
1476
|
_createClass(Drawer, [{
|
|
1573
1477
|
key: "activeModal",
|
|
1574
1478
|
get: function get() {
|
|
@@ -1577,7 +1481,6 @@ var Drawer = /*#__PURE__*/function (_Collection) {
|
|
|
1577
1481
|
});
|
|
1578
1482
|
}
|
|
1579
1483
|
}]);
|
|
1580
|
-
|
|
1581
1484
|
return Drawer;
|
|
1582
1485
|
}(Collection);
|
|
1583
1486
|
|
|
@@ -1611,8 +1514,9 @@ var defaults$1 = {
|
|
|
1611
1514
|
|
|
1612
1515
|
function getModal(query) {
|
|
1613
1516
|
// Get the entry from collection.
|
|
1614
|
-
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1517
|
+
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
1615
1518
|
|
|
1519
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
1616
1520
|
if (entry) {
|
|
1617
1521
|
return entry;
|
|
1618
1522
|
} else {
|
|
@@ -1624,37 +1528,49 @@ function getModalID(obj) {
|
|
|
1624
1528
|
// If it's a string, return the string.
|
|
1625
1529
|
if (typeof obj === 'string') {
|
|
1626
1530
|
return obj;
|
|
1627
|
-
}
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
// If it's an HTML element.
|
|
1628
1534
|
else if (typeof obj.hasAttribute === 'function') {
|
|
1629
1535
|
// If it's a modal open trigger, return data value.
|
|
1630
1536
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
1631
1537
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
1632
|
-
}
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
// If it's a modal close trigger, return data value or false.
|
|
1633
1541
|
else if (obj.hasAttribute("data-" + this.settings.dataClose)) {
|
|
1634
1542
|
return obj.getAttribute("data-" + this.settings.dataClose) || false;
|
|
1635
|
-
}
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
// If it's a modal replace trigger, return data value.
|
|
1636
1546
|
else if (obj.hasAttribute("data-" + this.settings.dataReplace)) {
|
|
1637
1547
|
return obj.getAttribute("data-" + this.settings.dataReplace);
|
|
1638
|
-
}
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
// If it's a modal element, return the id.
|
|
1639
1551
|
else if (obj.closest(this.settings.selectorModal)) {
|
|
1640
1552
|
obj = obj.closest(this.settings.selectorModal);
|
|
1641
1553
|
return obj.id || false;
|
|
1642
|
-
}
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
// Return false if no id was found.
|
|
1643
1557
|
else return false;
|
|
1644
|
-
}
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
// If it has an id property, return its value.
|
|
1645
1561
|
else if (obj.id) {
|
|
1646
1562
|
return obj.id;
|
|
1647
|
-
}
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
// Return false if no id was found.
|
|
1648
1566
|
else return false;
|
|
1649
1567
|
}
|
|
1650
1568
|
|
|
1651
1569
|
function getModalElements(query) {
|
|
1652
1570
|
var id = getModalID.call(this, query);
|
|
1653
|
-
|
|
1654
1571
|
if (id) {
|
|
1655
1572
|
var modal = document.querySelector("#" + id);
|
|
1656
1573
|
var dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
|
|
1657
|
-
|
|
1658
1574
|
if (!modal && !dialog) {
|
|
1659
1575
|
return {
|
|
1660
1576
|
error: new Error("No modal elements found using the ID: \"" + id + "\".")
|
|
@@ -1687,7 +1603,6 @@ function updateFocusState() {
|
|
|
1687
1603
|
this.trigger.focus();
|
|
1688
1604
|
this.trigger = null;
|
|
1689
1605
|
}
|
|
1690
|
-
|
|
1691
1606
|
this.focusTrap.unmount();
|
|
1692
1607
|
}
|
|
1693
1608
|
}
|
|
@@ -1695,38 +1610,33 @@ function updateFocusState() {
|
|
|
1695
1610
|
var handleClick$1 = function handleClick(event) {
|
|
1696
1611
|
try {
|
|
1697
1612
|
var _this2 = this;
|
|
1698
|
-
|
|
1699
1613
|
// If an open or replace button was clicked, open or replace the modal.
|
|
1700
1614
|
var trigger = event.target.closest("[data-" + _this2.settings.dataOpen + "], [data-" + _this2.settings.dataReplace + "]");
|
|
1701
|
-
|
|
1702
1615
|
if (trigger) {
|
|
1703
|
-
event.preventDefault();
|
|
1704
|
-
|
|
1616
|
+
event.preventDefault();
|
|
1617
|
+
// Save the trigger if it's not coming from inside a modal.
|
|
1705
1618
|
var fromModal = event.target.closest(_this2.settings.selectorModal);
|
|
1706
|
-
if (!fromModal) _this2.trigger = trigger;
|
|
1707
|
-
|
|
1708
|
-
var modal = _this2.get(getModalID.call(_this2, trigger));
|
|
1709
|
-
|
|
1710
|
-
|
|
1619
|
+
if (!fromModal) _this2.trigger = trigger;
|
|
1620
|
+
// Get the modal.
|
|
1621
|
+
var modal = _this2.get(getModalID.call(_this2, trigger));
|
|
1622
|
+
// Depending on the button type, either open or replace the modal.
|
|
1711
1623
|
return Promise.resolve(trigger.matches("[data-" + _this2.settings.dataOpen + "]") ? modal.open() : modal.replace());
|
|
1712
|
-
}
|
|
1713
|
-
|
|
1624
|
+
}
|
|
1714
1625
|
|
|
1626
|
+
// If a close button was clicked, close the modal.
|
|
1715
1627
|
trigger = event.target.closest("[data-" + _this2.settings.dataClose + "]");
|
|
1716
|
-
|
|
1717
1628
|
if (trigger) {
|
|
1718
|
-
event.preventDefault();
|
|
1719
|
-
|
|
1720
|
-
var value = trigger.getAttribute("data-" + _this2.settings.dataClose);
|
|
1721
|
-
|
|
1629
|
+
event.preventDefault();
|
|
1630
|
+
// Get the value of the data attribute.
|
|
1631
|
+
var value = trigger.getAttribute("data-" + _this2.settings.dataClose);
|
|
1632
|
+
// Close all if * wildcard is passed, otherwise close a single modal.
|
|
1722
1633
|
return Promise.resolve(value === '*' ? _this2.closeAll() : _this2.close(value));
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1634
|
+
}
|
|
1725
1635
|
|
|
1636
|
+
// If the modal screen was clicked, close the modal.
|
|
1726
1637
|
if (event.target.matches(_this2.settings.selectorModal) && !event.target.querySelector(_this2.settings.selectorRequired)) {
|
|
1727
1638
|
return Promise.resolve(_this2.close(getModalID.call(_this2, event.target)));
|
|
1728
1639
|
}
|
|
1729
|
-
|
|
1730
1640
|
return Promise.resolve();
|
|
1731
1641
|
} catch (e) {
|
|
1732
1642
|
return Promise.reject(e);
|
|
@@ -1746,41 +1656,39 @@ var deregister$1 = function deregister(obj, close) {
|
|
|
1746
1656
|
if (close === void 0) {
|
|
1747
1657
|
close = true;
|
|
1748
1658
|
}
|
|
1749
|
-
|
|
1750
1659
|
try {
|
|
1751
1660
|
var _temp5 = function _temp5() {
|
|
1752
1661
|
// Return the modified collection.
|
|
1753
1662
|
return _this2.collection;
|
|
1754
1663
|
};
|
|
1755
|
-
|
|
1756
1664
|
var _this2 = this;
|
|
1757
|
-
|
|
1758
1665
|
// Return collection if nothing was passed.
|
|
1759
|
-
if (!obj) return Promise.resolve(_this2.collection);
|
|
1666
|
+
if (!obj) return Promise.resolve(_this2.collection);
|
|
1760
1667
|
|
|
1668
|
+
// Check if entry has been registered in the collection.
|
|
1761
1669
|
var index = _this2.collection.findIndex(function (entry) {
|
|
1762
1670
|
return entry.id === obj.id;
|
|
1763
1671
|
});
|
|
1764
|
-
|
|
1765
1672
|
var _temp6 = function () {
|
|
1766
1673
|
if (index >= 0) {
|
|
1767
1674
|
var _temp7 = function _temp7() {
|
|
1768
1675
|
// Return teleported modal if a reference has been set.
|
|
1769
1676
|
if (_entry.getSetting('teleport')) {
|
|
1770
1677
|
_entry.teleportReturn();
|
|
1771
|
-
}
|
|
1772
|
-
|
|
1678
|
+
}
|
|
1773
1679
|
|
|
1680
|
+
// Delete properties from collection entry.
|
|
1774
1681
|
Object.getOwnPropertyNames(_entry).forEach(function (prop) {
|
|
1775
1682
|
delete _entry[prop];
|
|
1776
|
-
});
|
|
1683
|
+
});
|
|
1777
1684
|
|
|
1685
|
+
// Remove entry from collection.
|
|
1778
1686
|
_this2.collection.splice(index, 1);
|
|
1779
1687
|
};
|
|
1780
|
-
|
|
1781
1688
|
// Get the collection entry.
|
|
1782
|
-
var _entry = _this2.collection[index];
|
|
1689
|
+
var _entry = _this2.collection[index];
|
|
1783
1690
|
|
|
1691
|
+
// If entry is in the opened state, close it.
|
|
1784
1692
|
var _temp8 = function () {
|
|
1785
1693
|
if (close && _entry.state === 'opened') {
|
|
1786
1694
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
@@ -1789,11 +1697,9 @@ var deregister$1 = function deregister(obj, close) {
|
|
|
1789
1697
|
_this2.stack.remove(_entry);
|
|
1790
1698
|
}
|
|
1791
1699
|
}();
|
|
1792
|
-
|
|
1793
1700
|
return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
|
|
1794
1701
|
}
|
|
1795
1702
|
}();
|
|
1796
|
-
|
|
1797
1703
|
return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
|
|
1798
1704
|
} catch (e) {
|
|
1799
1705
|
return Promise.reject(e);
|
|
@@ -1804,51 +1710,51 @@ var open$1 = function open(query, transition, focus) {
|
|
|
1804
1710
|
if (focus === void 0) {
|
|
1805
1711
|
focus = true;
|
|
1806
1712
|
}
|
|
1807
|
-
|
|
1808
1713
|
try {
|
|
1809
1714
|
var _temp3 = function _temp3() {
|
|
1810
1715
|
// Update focus if the focus param is true.
|
|
1811
1716
|
if (focus) {
|
|
1812
1717
|
updateFocusState.call(_this2);
|
|
1813
|
-
}
|
|
1814
|
-
|
|
1718
|
+
}
|
|
1815
1719
|
|
|
1720
|
+
// Dispatch custom opened event.
|
|
1816
1721
|
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
|
|
1817
1722
|
detail: _this2,
|
|
1818
1723
|
bubbles: true
|
|
1819
|
-
}));
|
|
1724
|
+
}));
|
|
1820
1725
|
|
|
1726
|
+
// Return the modal.
|
|
1821
1727
|
return modal;
|
|
1822
1728
|
};
|
|
1823
|
-
|
|
1824
1729
|
var _this2 = this;
|
|
1825
|
-
|
|
1826
1730
|
// Get the modal from collection.
|
|
1827
|
-
var modal = getModal.call(_this2, query);
|
|
1828
|
-
|
|
1829
|
-
var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
|
|
1830
|
-
|
|
1731
|
+
var modal = getModal.call(_this2, query);
|
|
1831
1732
|
|
|
1832
|
-
|
|
1733
|
+
// Get the modal configuration.
|
|
1734
|
+
var config = _extends({}, _this2.settings, modal.settings);
|
|
1833
1735
|
|
|
1834
|
-
|
|
1736
|
+
// Add transition parameter to configuration.
|
|
1737
|
+
if (transition !== undefined) config.transition = transition;
|
|
1835
1738
|
|
|
1739
|
+
// Maybe add modal to top of stack.
|
|
1740
|
+
_this2.stack.moveToTop(modal);
|
|
1836
1741
|
|
|
1742
|
+
// If modal is closed.
|
|
1837
1743
|
var _temp4 = function () {
|
|
1838
1744
|
if (modal.state === 'closed') {
|
|
1839
1745
|
// Update modal state.
|
|
1840
|
-
modal.state = 'opening';
|
|
1841
|
-
|
|
1842
|
-
_this2.stack.add(modal); // Run the open transition.
|
|
1746
|
+
modal.state = 'opening';
|
|
1843
1747
|
|
|
1748
|
+
// Add modal to stack.
|
|
1749
|
+
_this2.stack.add(modal);
|
|
1844
1750
|
|
|
1751
|
+
// Run the open transition.
|
|
1845
1752
|
return Promise.resolve(openTransition(modal.el, config)).then(function () {
|
|
1846
1753
|
// Update modal state.
|
|
1847
1754
|
modal.state = 'opened';
|
|
1848
1755
|
});
|
|
1849
1756
|
}
|
|
1850
1757
|
}();
|
|
1851
|
-
|
|
1852
1758
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
|
|
1853
1759
|
} catch (e) {
|
|
1854
1760
|
return Promise.reject(e);
|
|
@@ -1859,37 +1765,40 @@ var close$1 = function close(query, transition, focus) {
|
|
|
1859
1765
|
if (focus === void 0) {
|
|
1860
1766
|
focus = true;
|
|
1861
1767
|
}
|
|
1862
|
-
|
|
1863
1768
|
try {
|
|
1864
1769
|
var _this2 = this;
|
|
1865
|
-
|
|
1866
1770
|
// Get the modal from collection, or top modal in stack if no query is provided.
|
|
1867
|
-
var modal = query ? getModal.call(_this2, query) : _this2.active;
|
|
1771
|
+
var modal = query ? getModal.call(_this2, query) : _this2.active;
|
|
1868
1772
|
|
|
1773
|
+
// If a modal exists and its state is opened.
|
|
1869
1774
|
var _temp2 = function () {
|
|
1870
1775
|
if (modal && modal.state === 'opened') {
|
|
1871
1776
|
// Update modal state.
|
|
1872
|
-
modal.state = 'closing';
|
|
1777
|
+
modal.state = 'closing';
|
|
1873
1778
|
|
|
1874
|
-
|
|
1779
|
+
// Get the modal configuration.
|
|
1780
|
+
var config = _extends({}, _this2.settings, modal.settings);
|
|
1875
1781
|
|
|
1782
|
+
// Add transition parameter to configuration.
|
|
1783
|
+
if (transition !== undefined) config.transition = transition;
|
|
1876
1784
|
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
document.activeElement.blur(); // Run the close transition.
|
|
1785
|
+
// Remove focus from active element.
|
|
1786
|
+
document.activeElement.blur();
|
|
1880
1787
|
|
|
1788
|
+
// Run the close transition.
|
|
1881
1789
|
return Promise.resolve(closeTransition(modal.el, config)).then(function () {
|
|
1882
1790
|
// Remove modal from stack.
|
|
1883
|
-
_this2.stack.remove(modal);
|
|
1884
|
-
|
|
1791
|
+
_this2.stack.remove(modal);
|
|
1885
1792
|
|
|
1793
|
+
// Update focus if the focus param is true.
|
|
1886
1794
|
if (focus) {
|
|
1887
1795
|
updateFocusState.call(_this2);
|
|
1888
|
-
}
|
|
1889
|
-
|
|
1796
|
+
}
|
|
1890
1797
|
|
|
1891
|
-
|
|
1798
|
+
// Update modal state.
|
|
1799
|
+
modal.state = 'closed';
|
|
1892
1800
|
|
|
1801
|
+
// Dispatch custom closed event.
|
|
1893
1802
|
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
|
|
1894
1803
|
detail: _this2,
|
|
1895
1804
|
bubbles: true
|
|
@@ -1897,7 +1806,6 @@ var close$1 = function close(query, transition, focus) {
|
|
|
1897
1806
|
});
|
|
1898
1807
|
}
|
|
1899
1808
|
}();
|
|
1900
|
-
|
|
1901
1809
|
return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
|
|
1902
1810
|
// Return the modal.
|
|
1903
1811
|
return modal;
|
|
@@ -1910,14 +1818,12 @@ var close$1 = function close(query, transition, focus) {
|
|
|
1910
1818
|
var closeAll$1 = function closeAll(exclude, transition) {
|
|
1911
1819
|
try {
|
|
1912
1820
|
var _this2 = this;
|
|
1913
|
-
|
|
1914
1821
|
var result = [];
|
|
1915
1822
|
return Promise.resolve(Promise.all(_this2.stack.value.map(function (modal) {
|
|
1916
1823
|
try {
|
|
1917
1824
|
var _temp3 = function _temp3() {
|
|
1918
1825
|
modal.trigger = null;
|
|
1919
1826
|
};
|
|
1920
|
-
|
|
1921
1827
|
var _temp4 = function () {
|
|
1922
1828
|
if (exclude && exclude === modal.id) {
|
|
1923
1829
|
Promise.resolve();
|
|
@@ -1928,7 +1834,6 @@ var closeAll$1 = function closeAll(exclude, transition) {
|
|
|
1928
1834
|
});
|
|
1929
1835
|
}
|
|
1930
1836
|
}();
|
|
1931
|
-
|
|
1932
1837
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
|
|
1933
1838
|
} catch (e) {
|
|
1934
1839
|
return Promise.reject(e);
|
|
@@ -1945,28 +1850,25 @@ var replace = function replace(query, transition, focus) {
|
|
|
1945
1850
|
if (focus === void 0) {
|
|
1946
1851
|
focus = true;
|
|
1947
1852
|
}
|
|
1948
|
-
|
|
1949
1853
|
try {
|
|
1950
1854
|
var _temp3 = function _temp3() {
|
|
1951
1855
|
// Update focus if the focus param is true.
|
|
1952
1856
|
if (focus) {
|
|
1953
1857
|
updateFocusState.call(_this2);
|
|
1954
|
-
}
|
|
1955
|
-
|
|
1858
|
+
}
|
|
1956
1859
|
|
|
1860
|
+
// Return the modals there were opened and closed.
|
|
1957
1861
|
return {
|
|
1958
1862
|
opened: resultOpened,
|
|
1959
1863
|
closed: resultClosed
|
|
1960
1864
|
};
|
|
1961
1865
|
};
|
|
1962
|
-
|
|
1963
1866
|
var _this2 = this;
|
|
1964
|
-
|
|
1965
1867
|
// Get the modal from collection.
|
|
1966
|
-
var modal = getModal.call(_this2, query);
|
|
1868
|
+
var modal = getModal.call(_this2, query);
|
|
1967
1869
|
|
|
1870
|
+
// Setup results for return.
|
|
1968
1871
|
var resultOpened, resultClosed;
|
|
1969
|
-
|
|
1970
1872
|
var _temp4 = function () {
|
|
1971
1873
|
if (modal.state === 'opened') {
|
|
1972
1874
|
// If modal is open, close all modals except for replacement.
|
|
@@ -1981,7 +1883,6 @@ var replace = function replace(query, transition, focus) {
|
|
|
1981
1883
|
return Promise.resolve(Promise.all([resultOpened, resultClosed])).then(function () {});
|
|
1982
1884
|
}
|
|
1983
1885
|
}();
|
|
1984
|
-
|
|
1985
1886
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
|
|
1986
1887
|
} catch (e) {
|
|
1987
1888
|
return Promise.reject(e);
|
|
@@ -1991,12 +1892,12 @@ var replace = function replace(query, transition, focus) {
|
|
|
1991
1892
|
var register$1 = function register(el, dialog) {
|
|
1992
1893
|
try {
|
|
1993
1894
|
var _this2 = this;
|
|
1994
|
-
|
|
1995
1895
|
// Deregister entry incase it has already been registered.
|
|
1996
1896
|
return Promise.resolve(deregister$1.call(_this2, el, false)).then(function () {
|
|
1997
1897
|
// Save root this for use inside methods API.
|
|
1998
|
-
var root = _this2;
|
|
1898
|
+
var root = _this2;
|
|
1999
1899
|
|
|
1900
|
+
// Setup methods API.
|
|
2000
1901
|
var methods = {
|
|
2001
1902
|
open: function open(transition, focus) {
|
|
2002
1903
|
return open$1.call(root, this, transition, focus);
|
|
@@ -2014,11 +1915,9 @@ var register$1 = function register(el, dialog) {
|
|
|
2014
1915
|
if (ref === void 0) {
|
|
2015
1916
|
ref = this.getSetting('teleport');
|
|
2016
1917
|
}
|
|
2017
|
-
|
|
2018
1918
|
if (method === void 0) {
|
|
2019
1919
|
method = this.getSetting('teleportMethod');
|
|
2020
1920
|
}
|
|
2021
|
-
|
|
2022
1921
|
if (!this.returnRef) {
|
|
2023
1922
|
this.returnRef = teleport(this.el, ref, method);
|
|
2024
1923
|
return this.el;
|
|
@@ -2039,8 +1938,9 @@ var register$1 = function register(el, dialog) {
|
|
|
2039
1938
|
getSetting: function getSetting(key) {
|
|
2040
1939
|
return key in this.settings ? this.settings[key] : root.settings[key];
|
|
2041
1940
|
}
|
|
2042
|
-
};
|
|
1941
|
+
};
|
|
2043
1942
|
|
|
1943
|
+
// Setup the modal object.
|
|
2044
1944
|
var entry = _extends({
|
|
2045
1945
|
id: el.id,
|
|
2046
1946
|
state: 'closed',
|
|
@@ -2048,29 +1948,30 @@ var register$1 = function register(el, dialog) {
|
|
|
2048
1948
|
dialog: dialog,
|
|
2049
1949
|
returnRef: null,
|
|
2050
1950
|
settings: getConfig$1(el, _this2.settings.dataConfig)
|
|
2051
|
-
}, methods);
|
|
2052
|
-
|
|
1951
|
+
}, methods);
|
|
2053
1952
|
|
|
2054
|
-
|
|
1953
|
+
// Set aria-modal attribute to true.
|
|
1954
|
+
entry.dialog.setAttribute('aria-modal', 'true');
|
|
2055
1955
|
|
|
1956
|
+
// If a role attribute is not set, set it to "dialog" as the default.
|
|
2056
1957
|
if (!entry.dialog.hasAttribute('role')) {
|
|
2057
1958
|
entry.dialog.setAttribute('role', 'dialog');
|
|
2058
|
-
}
|
|
2059
|
-
|
|
1959
|
+
}
|
|
2060
1960
|
|
|
1961
|
+
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
2061
1962
|
if (entry.getSetting('setTabindex')) {
|
|
2062
1963
|
entry.dialog.setAttribute('tabindex', '-1');
|
|
2063
|
-
}
|
|
2064
|
-
|
|
1964
|
+
}
|
|
2065
1965
|
|
|
1966
|
+
// Teleport modal if a reference has been set.
|
|
2066
1967
|
if (entry.getSetting('teleport')) {
|
|
2067
1968
|
entry.teleport();
|
|
2068
|
-
}
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
_this2.collection.push(entry); // Setup initial state.
|
|
1969
|
+
}
|
|
2072
1970
|
|
|
1971
|
+
// Add entry to collection.
|
|
1972
|
+
_this2.collection.push(entry);
|
|
2073
1973
|
|
|
1974
|
+
// Setup initial state.
|
|
2074
1975
|
var _temp = function () {
|
|
2075
1976
|
if (entry.el.classList.contains(_this2.settings.stateOpened)) {
|
|
2076
1977
|
// Open entry with transitions disabled.
|
|
@@ -2078,12 +1979,11 @@ var register$1 = function register(el, dialog) {
|
|
|
2078
1979
|
} else {
|
|
2079
1980
|
// Remove transition state classes.
|
|
2080
1981
|
entry.el.classList.remove(_this2.settings.stateOpening);
|
|
2081
|
-
entry.el.classList.remove(_this2.settings.stateClosing);
|
|
2082
|
-
|
|
1982
|
+
entry.el.classList.remove(_this2.settings.stateClosing);
|
|
1983
|
+
// Add closed state class.
|
|
2083
1984
|
entry.el.classList.add(_this2.settings.stateClosed);
|
|
2084
1985
|
}
|
|
2085
1986
|
}();
|
|
2086
|
-
|
|
2087
1987
|
return _temp && _temp.then ? _temp.then(function () {
|
|
2088
1988
|
// Return the registered entry.
|
|
2089
1989
|
return entry;
|
|
@@ -2100,11 +2000,9 @@ function stack(settings) {
|
|
|
2100
2000
|
get value() {
|
|
2101
2001
|
return [].concat(stackArray);
|
|
2102
2002
|
},
|
|
2103
|
-
|
|
2104
2003
|
get top() {
|
|
2105
2004
|
return stackArray[stackArray.length - 1];
|
|
2106
2005
|
},
|
|
2107
|
-
|
|
2108
2006
|
updateIndex: function updateIndex() {
|
|
2109
2007
|
stackArray.forEach(function (entry, index) {
|
|
2110
2008
|
entry.el.style.zIndex = null;
|
|
@@ -2114,31 +2012,35 @@ function stack(settings) {
|
|
|
2114
2012
|
},
|
|
2115
2013
|
updateGlobalState: function updateGlobalState$1() {
|
|
2116
2014
|
updateGlobalState(this.top, settings);
|
|
2117
|
-
|
|
2118
2015
|
this.updateIndex();
|
|
2119
2016
|
},
|
|
2120
2017
|
add: function add(entry) {
|
|
2121
2018
|
// Apply z-index styles based on stack length.
|
|
2122
2019
|
entry.el.style.zIndex = null;
|
|
2123
2020
|
var value = getComputedStyle(entry.el)['z-index'];
|
|
2124
|
-
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
2021
|
+
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
2125
2022
|
|
|
2126
|
-
|
|
2023
|
+
// Move back to end of stack.
|
|
2024
|
+
stackArray.push(entry);
|
|
2127
2025
|
|
|
2026
|
+
// Update the global state.
|
|
2128
2027
|
this.updateGlobalState();
|
|
2129
2028
|
},
|
|
2130
2029
|
remove: function remove(entry) {
|
|
2131
2030
|
// Get the index of the entry.
|
|
2132
2031
|
var index = stackArray.findIndex(function (item) {
|
|
2133
2032
|
return item.id === entry.id;
|
|
2134
|
-
});
|
|
2033
|
+
});
|
|
2135
2034
|
|
|
2035
|
+
// If entry is in stack...
|
|
2136
2036
|
if (index >= 0) {
|
|
2137
2037
|
// Remove z-index styles.
|
|
2138
|
-
entry.el.style.zIndex = null;
|
|
2038
|
+
entry.el.style.zIndex = null;
|
|
2139
2039
|
|
|
2140
|
-
|
|
2040
|
+
// Remove entry from stack array.
|
|
2041
|
+
stackArray.splice(index, 1);
|
|
2141
2042
|
|
|
2043
|
+
// Update the global state.
|
|
2142
2044
|
this.updateGlobalState();
|
|
2143
2045
|
}
|
|
2144
2046
|
},
|
|
@@ -2146,12 +2048,14 @@ function stack(settings) {
|
|
|
2146
2048
|
// Get the index of the entry.
|
|
2147
2049
|
var index = stackArray.findIndex(function (item) {
|
|
2148
2050
|
return item.id === entry.id;
|
|
2149
|
-
});
|
|
2051
|
+
});
|
|
2150
2052
|
|
|
2053
|
+
// If entry is in stack...
|
|
2151
2054
|
if (index >= 0) {
|
|
2152
2055
|
// Remove entry from stack array.
|
|
2153
|
-
stackArray.splice(index, 1);
|
|
2056
|
+
stackArray.splice(index, 1);
|
|
2154
2057
|
|
|
2058
|
+
// Add entry back to top of stack.
|
|
2155
2059
|
this.add(entry);
|
|
2156
2060
|
}
|
|
2157
2061
|
}
|
|
@@ -2159,15 +2063,11 @@ function stack(settings) {
|
|
|
2159
2063
|
}
|
|
2160
2064
|
|
|
2161
2065
|
var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
2162
|
-
|
|
2163
2066
|
var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
2164
|
-
|
|
2165
2067
|
var Modal = /*#__PURE__*/function (_Collection) {
|
|
2166
2068
|
_inheritsLoose(Modal, _Collection);
|
|
2167
|
-
|
|
2168
2069
|
function Modal(options) {
|
|
2169
2070
|
var _this;
|
|
2170
|
-
|
|
2171
2071
|
_this = _Collection.call(this) || this;
|
|
2172
2072
|
Object.defineProperty(_assertThisInitialized(_this), _handleClick, {
|
|
2173
2073
|
writable: true,
|
|
@@ -2180,126 +2080,107 @@ var Modal = /*#__PURE__*/function (_Collection) {
|
|
|
2180
2080
|
_this.defaults = defaults$1;
|
|
2181
2081
|
_this.settings = _extends({}, _this.defaults, options);
|
|
2182
2082
|
_this.trigger = null;
|
|
2183
|
-
_this.focusTrap = new FocusTrap();
|
|
2083
|
+
_this.focusTrap = new FocusTrap();
|
|
2184
2084
|
|
|
2085
|
+
// Setup stack module.
|
|
2185
2086
|
_this.stack = stack(_this.settings);
|
|
2186
2087
|
_classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleClick)[_handleClick] = handleClick$1.bind(_assertThisInitialized(_this));
|
|
2187
2088
|
_classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(_assertThisInitialized(_this));
|
|
2188
2089
|
if (_this.settings.autoInit) _this.init();
|
|
2189
2090
|
return _this;
|
|
2190
2091
|
}
|
|
2191
|
-
|
|
2192
2092
|
var _proto = Modal.prototype;
|
|
2193
|
-
|
|
2194
2093
|
_proto.init = function init(options) {
|
|
2195
2094
|
try {
|
|
2196
2095
|
var _this3 = this;
|
|
2197
|
-
|
|
2198
2096
|
// Update settings with passed options.
|
|
2199
|
-
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
2097
|
+
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
2200
2098
|
|
|
2201
|
-
|
|
2099
|
+
// Get all the modals.
|
|
2100
|
+
var modals = document.querySelectorAll(_this3.settings.selectorModal);
|
|
2202
2101
|
|
|
2102
|
+
// Register the collections array with modal instances.
|
|
2203
2103
|
return Promise.resolve(_this3.registerCollection(modals)).then(function () {
|
|
2204
2104
|
// If eventListeners are enabled, init event listeners.
|
|
2205
2105
|
if (_this3.settings.eventListeners) {
|
|
2206
2106
|
_this3.initEventListeners();
|
|
2207
2107
|
}
|
|
2208
|
-
|
|
2209
2108
|
return _this3;
|
|
2210
2109
|
});
|
|
2211
2110
|
} catch (e) {
|
|
2212
2111
|
return Promise.reject(e);
|
|
2213
2112
|
}
|
|
2214
2113
|
};
|
|
2215
|
-
|
|
2216
2114
|
_proto.destroy = function destroy() {
|
|
2217
2115
|
try {
|
|
2218
2116
|
var _this5 = this;
|
|
2219
|
-
|
|
2220
2117
|
// Clear stored trigger.
|
|
2221
|
-
_this5.trigger = null;
|
|
2118
|
+
_this5.trigger = null;
|
|
2222
2119
|
|
|
2120
|
+
// Remove all entries from the collection.
|
|
2223
2121
|
return Promise.resolve(_this5.deregisterCollection()).then(function () {
|
|
2224
2122
|
// If eventListeners are enabled, destroy event listeners.
|
|
2225
2123
|
if (_this5.settings.eventListeners) {
|
|
2226
2124
|
_this5.destroyEventListeners();
|
|
2227
2125
|
}
|
|
2228
|
-
|
|
2229
2126
|
return _this5;
|
|
2230
2127
|
});
|
|
2231
2128
|
} catch (e) {
|
|
2232
2129
|
return Promise.reject(e);
|
|
2233
2130
|
}
|
|
2234
2131
|
};
|
|
2235
|
-
|
|
2236
2132
|
_proto.initEventListeners = function initEventListeners() {
|
|
2237
2133
|
document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2238
|
-
document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2239
2134
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2240
2135
|
};
|
|
2241
|
-
|
|
2242
2136
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
2243
2137
|
document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2244
|
-
document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2245
2138
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2246
2139
|
};
|
|
2247
|
-
|
|
2248
2140
|
_proto.register = function register(query) {
|
|
2249
2141
|
var els = getModalElements.call(this, query);
|
|
2250
2142
|
if (els.error) return Promise.reject(els.error);
|
|
2251
2143
|
return register$1.call(this, els.modal, els.dialog);
|
|
2252
2144
|
};
|
|
2253
|
-
|
|
2254
2145
|
_proto.deregister = function deregister(query) {
|
|
2255
2146
|
var modal = this.get(getModalID.call(this, query));
|
|
2256
2147
|
return deregister$1.call(this, modal);
|
|
2257
2148
|
};
|
|
2258
|
-
|
|
2259
2149
|
_proto.open = function open(id, transition, focus) {
|
|
2260
2150
|
return open$1.call(this, id, transition, focus);
|
|
2261
2151
|
};
|
|
2262
|
-
|
|
2263
2152
|
_proto.close = function close(id, transition, focus) {
|
|
2264
2153
|
return close$1.call(this, id, transition, focus);
|
|
2265
2154
|
};
|
|
2266
|
-
|
|
2267
2155
|
_proto.replace = function replace$1(id, transition, focus) {
|
|
2268
2156
|
return replace.call(this, id, transition, focus);
|
|
2269
2157
|
};
|
|
2270
|
-
|
|
2271
2158
|
_proto.closeAll = function closeAll(exclude, transition, focus) {
|
|
2272
2159
|
if (exclude === void 0) {
|
|
2273
2160
|
exclude = false;
|
|
2274
2161
|
}
|
|
2275
|
-
|
|
2276
2162
|
if (focus === void 0) {
|
|
2277
2163
|
focus = true;
|
|
2278
2164
|
}
|
|
2279
|
-
|
|
2280
2165
|
try {
|
|
2281
2166
|
var _this7 = this;
|
|
2282
|
-
|
|
2283
2167
|
return Promise.resolve(closeAll$1.call(_this7, exclude, transition)).then(function (result) {
|
|
2284
2168
|
// Update focus if the focus param is true.
|
|
2285
2169
|
if (focus) {
|
|
2286
2170
|
updateFocusState.call(_this7);
|
|
2287
2171
|
}
|
|
2288
|
-
|
|
2289
2172
|
return result;
|
|
2290
2173
|
});
|
|
2291
2174
|
} catch (e) {
|
|
2292
2175
|
return Promise.reject(e);
|
|
2293
2176
|
}
|
|
2294
2177
|
};
|
|
2295
|
-
|
|
2296
2178
|
_createClass(Modal, [{
|
|
2297
2179
|
key: "active",
|
|
2298
2180
|
get: function get() {
|
|
2299
2181
|
return this.stack.top;
|
|
2300
2182
|
}
|
|
2301
2183
|
}]);
|
|
2302
|
-
|
|
2303
2184
|
return Modal;
|
|
2304
2185
|
}(Collection);
|
|
2305
2186
|
|
|
@@ -2318,8 +2199,9 @@ var defaults = {
|
|
|
2318
2199
|
|
|
2319
2200
|
function getConfig(el, settings) {
|
|
2320
2201
|
// Get the computed styles of the element.
|
|
2321
|
-
var styles = getComputedStyle(el);
|
|
2202
|
+
var styles = getComputedStyle(el);
|
|
2322
2203
|
|
|
2204
|
+
// Setup the config obj with default values.
|
|
2323
2205
|
var config = {
|
|
2324
2206
|
'placement': settings.placement,
|
|
2325
2207
|
'event': settings.eventType,
|
|
@@ -2328,36 +2210,40 @@ function getConfig(el, settings) {
|
|
|
2328
2210
|
'flip-padding': 0,
|
|
2329
2211
|
'arrow-element': settings.selectorArrow,
|
|
2330
2212
|
'arrow-padding': 0
|
|
2331
|
-
};
|
|
2213
|
+
};
|
|
2332
2214
|
|
|
2215
|
+
// Loop through config obj.
|
|
2333
2216
|
for (var prop in config) {
|
|
2334
2217
|
// Get the CSS variable property values.
|
|
2335
2218
|
var prefix = g();
|
|
2336
|
-
var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim();
|
|
2219
|
+
var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim();
|
|
2337
2220
|
|
|
2221
|
+
// If a value was found, replace the default in config obj.
|
|
2338
2222
|
if (value) {
|
|
2339
2223
|
config[prop] = value;
|
|
2340
2224
|
}
|
|
2341
|
-
}
|
|
2342
|
-
|
|
2225
|
+
}
|
|
2343
2226
|
|
|
2227
|
+
// Return the config obj.
|
|
2344
2228
|
return config;
|
|
2345
2229
|
}
|
|
2346
2230
|
|
|
2347
2231
|
function getPadding(value) {
|
|
2348
|
-
var padding;
|
|
2232
|
+
var padding;
|
|
2349
2233
|
|
|
2350
|
-
|
|
2234
|
+
// Split the value by spaces if it's a string.
|
|
2235
|
+
var array = typeof value === 'string' ? value.trim().split(' ') : [value];
|
|
2351
2236
|
|
|
2237
|
+
// Convert individual values to integers.
|
|
2352
2238
|
array.forEach(function (item, index) {
|
|
2353
2239
|
array[index] = parseInt(item, 10);
|
|
2354
|
-
});
|
|
2240
|
+
});
|
|
2355
2241
|
|
|
2242
|
+
// Build the padding object based on the number of values passed.
|
|
2356
2243
|
switch (array.length) {
|
|
2357
2244
|
case 1:
|
|
2358
2245
|
padding = array[0];
|
|
2359
2246
|
break;
|
|
2360
|
-
|
|
2361
2247
|
case 2:
|
|
2362
2248
|
padding = {
|
|
2363
2249
|
top: array[0],
|
|
@@ -2366,7 +2252,6 @@ function getPadding(value) {
|
|
|
2366
2252
|
left: array[1]
|
|
2367
2253
|
};
|
|
2368
2254
|
break;
|
|
2369
|
-
|
|
2370
2255
|
case 3:
|
|
2371
2256
|
padding = {
|
|
2372
2257
|
top: array[0],
|
|
@@ -2375,7 +2260,6 @@ function getPadding(value) {
|
|
|
2375
2260
|
left: array[1]
|
|
2376
2261
|
};
|
|
2377
2262
|
break;
|
|
2378
|
-
|
|
2379
2263
|
case 4:
|
|
2380
2264
|
padding = {
|
|
2381
2265
|
top: array[0],
|
|
@@ -2384,13 +2268,12 @@ function getPadding(value) {
|
|
|
2384
2268
|
left: array[3]
|
|
2385
2269
|
};
|
|
2386
2270
|
break;
|
|
2387
|
-
|
|
2388
2271
|
default:
|
|
2389
2272
|
padding = false;
|
|
2390
2273
|
break;
|
|
2391
|
-
}
|
|
2392
|
-
|
|
2274
|
+
}
|
|
2393
2275
|
|
|
2276
|
+
// Return the padding object.
|
|
2394
2277
|
return padding;
|
|
2395
2278
|
}
|
|
2396
2279
|
|
|
@@ -2421,8 +2304,9 @@ function getModifiers(options) {
|
|
|
2421
2304
|
|
|
2422
2305
|
function getPopover(query) {
|
|
2423
2306
|
// Get the entry from collection.
|
|
2424
|
-
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
2307
|
+
var entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
|
|
2425
2308
|
|
|
2309
|
+
// Return entry if it was resolved, otherwise throw error.
|
|
2426
2310
|
if (entry) {
|
|
2427
2311
|
return entry;
|
|
2428
2312
|
} else {
|
|
@@ -2434,34 +2318,44 @@ function getPopoverID(obj) {
|
|
|
2434
2318
|
// If it's a string, return the string.
|
|
2435
2319
|
if (typeof obj === 'string') {
|
|
2436
2320
|
return obj;
|
|
2437
|
-
}
|
|
2321
|
+
}
|
|
2322
|
+
|
|
2323
|
+
// If it's an HTML element.
|
|
2438
2324
|
else if (typeof obj.hasAttribute === 'function') {
|
|
2439
2325
|
// If it's a popover element, return the id.
|
|
2440
2326
|
if (obj.closest(this.settings.selectorPopover)) {
|
|
2441
2327
|
obj = obj.closest(this.settings.selectorPopover);
|
|
2442
2328
|
return obj.id;
|
|
2443
|
-
}
|
|
2329
|
+
}
|
|
2330
|
+
|
|
2331
|
+
// If it's a popover trigger, return value of aria-controls.
|
|
2444
2332
|
else if (obj.hasAttribute('aria-controls')) {
|
|
2445
2333
|
return obj.getAttribute('aria-controls');
|
|
2446
|
-
}
|
|
2334
|
+
}
|
|
2335
|
+
|
|
2336
|
+
// If it's a popover tooltip trigger, return the value of aria-describedby.
|
|
2447
2337
|
else if (obj.hasAttribute('aria-describedby')) {
|
|
2448
2338
|
return obj.getAttribute('aria-describedby');
|
|
2449
|
-
}
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
// Return false if no id was found.
|
|
2450
2342
|
else return false;
|
|
2451
|
-
}
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
// If it has an id property, return its value.
|
|
2452
2346
|
else if (obj.id) {
|
|
2453
2347
|
return obj.id;
|
|
2454
|
-
}
|
|
2348
|
+
}
|
|
2349
|
+
|
|
2350
|
+
// Return false if no id was found.
|
|
2455
2351
|
else return false;
|
|
2456
2352
|
}
|
|
2457
2353
|
|
|
2458
2354
|
function getPopoverElements(query) {
|
|
2459
2355
|
var id = getPopoverID.call(this, query);
|
|
2460
|
-
|
|
2461
2356
|
if (id) {
|
|
2462
2357
|
var popover = document.querySelector("#" + id);
|
|
2463
2358
|
var trigger = document.querySelector("[aria-controls=\"" + id + "\"]") || document.querySelector("[aria-describedby=\"" + id + "\"]");
|
|
2464
|
-
|
|
2465
2359
|
if (!trigger && !popover) {
|
|
2466
2360
|
return {
|
|
2467
2361
|
error: new Error("No popover elements found using the ID: \"" + id + "\".")
|
|
@@ -2490,7 +2384,6 @@ function getPopoverElements(query) {
|
|
|
2490
2384
|
var closeAll = function closeAll() {
|
|
2491
2385
|
try {
|
|
2492
2386
|
var _this4 = this;
|
|
2493
|
-
|
|
2494
2387
|
var result = [];
|
|
2495
2388
|
return Promise.resolve(Promise.all(_this4.collection.map(function (popover) {
|
|
2496
2389
|
try {
|
|
@@ -2502,7 +2395,6 @@ var closeAll = function closeAll() {
|
|
|
2502
2395
|
});
|
|
2503
2396
|
}
|
|
2504
2397
|
}();
|
|
2505
|
-
|
|
2506
2398
|
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
|
|
2507
2399
|
} catch (e) {
|
|
2508
2400
|
return Promise.reject(e);
|
|
@@ -2520,33 +2412,34 @@ var close = function close(query) {
|
|
|
2520
2412
|
// If a modal exists and its state is opened.
|
|
2521
2413
|
if (popover && popover.state === 'opened') {
|
|
2522
2414
|
// Update state class.
|
|
2523
|
-
popover.el.classList.remove(_this2.settings.stateActive);
|
|
2415
|
+
popover.el.classList.remove(_this2.settings.stateActive);
|
|
2524
2416
|
|
|
2417
|
+
// Update accessibility attribute(s).
|
|
2525
2418
|
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
2526
2419
|
popover.trigger.setAttribute('aria-expanded', 'false');
|
|
2527
|
-
}
|
|
2528
|
-
|
|
2420
|
+
}
|
|
2529
2421
|
|
|
2422
|
+
// Disable popper event listeners.
|
|
2530
2423
|
popover.popper.setOptions({
|
|
2531
2424
|
modifiers: [{
|
|
2532
2425
|
name: 'eventListeners',
|
|
2533
2426
|
enabled: false
|
|
2534
2427
|
}]
|
|
2535
|
-
});
|
|
2428
|
+
});
|
|
2536
2429
|
|
|
2537
|
-
|
|
2430
|
+
// Update popover state.
|
|
2431
|
+
popover.state = 'closed';
|
|
2538
2432
|
|
|
2433
|
+
// Clear root trigger if popover trigger matches.
|
|
2539
2434
|
if (popover.trigger === _this2.trigger) {
|
|
2540
2435
|
_this2.trigger = null;
|
|
2541
2436
|
}
|
|
2542
|
-
}
|
|
2543
|
-
|
|
2437
|
+
}
|
|
2544
2438
|
|
|
2439
|
+
// Return the popover.
|
|
2545
2440
|
return popover;
|
|
2546
2441
|
};
|
|
2547
|
-
|
|
2548
2442
|
var _this2 = this;
|
|
2549
|
-
|
|
2550
2443
|
// Get the popover from collection.
|
|
2551
2444
|
return Promise.resolve(query ? _temp2(getPopover.call(_this2, query)) : Promise.resolve(closeAll.call(_this2)).then(_temp2));
|
|
2552
2445
|
} catch (e) {
|
|
@@ -2555,19 +2448,22 @@ var close = function close(query) {
|
|
|
2555
2448
|
};
|
|
2556
2449
|
function closeCheck(popover) {
|
|
2557
2450
|
// Only run closeCheck if provided popover is currently open.
|
|
2558
|
-
if (popover.state != 'opened') return;
|
|
2451
|
+
if (popover.state != 'opened') return;
|
|
2559
2452
|
|
|
2453
|
+
// Needed to correctly check which element is currently being focused.
|
|
2560
2454
|
setTimeout(function () {
|
|
2561
2455
|
// Check if trigger or element are being hovered.
|
|
2562
|
-
var isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
|
|
2456
|
+
var isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
|
|
2563
2457
|
|
|
2564
|
-
|
|
2458
|
+
// Check if trigger or element are being focused.
|
|
2459
|
+
var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
2565
2460
|
|
|
2461
|
+
// Close if the trigger and element are not currently hovered or focused.
|
|
2566
2462
|
if (!isHovered && !isFocused) {
|
|
2567
2463
|
popover.close();
|
|
2568
|
-
}
|
|
2569
|
-
|
|
2464
|
+
}
|
|
2570
2465
|
|
|
2466
|
+
// Return the popover.
|
|
2571
2467
|
return popover;
|
|
2572
2468
|
}, 1);
|
|
2573
2469
|
}
|
|
@@ -2583,22 +2479,18 @@ function handleClick(popover) {
|
|
|
2583
2479
|
}
|
|
2584
2480
|
function handleKeydown(event) {
|
|
2585
2481
|
var _this = this;
|
|
2586
|
-
|
|
2587
2482
|
switch (event.key) {
|
|
2588
2483
|
case 'Escape':
|
|
2589
2484
|
if (this.trigger) {
|
|
2590
2485
|
this.trigger.focus();
|
|
2591
2486
|
}
|
|
2592
|
-
|
|
2593
2487
|
closeAll.call(this);
|
|
2594
2488
|
return;
|
|
2595
|
-
|
|
2596
2489
|
case 'Tab':
|
|
2597
2490
|
this.collection.forEach(function (popover) {
|
|
2598
2491
|
closeCheck.call(_this, popover);
|
|
2599
2492
|
});
|
|
2600
2493
|
return;
|
|
2601
|
-
|
|
2602
2494
|
default:
|
|
2603
2495
|
return;
|
|
2604
2496
|
}
|
|
@@ -2607,8 +2499,9 @@ function handleDocumentClick(popover) {
|
|
|
2607
2499
|
var root = this;
|
|
2608
2500
|
document.addEventListener('click', function _f(event) {
|
|
2609
2501
|
// Check if a popover or its trigger was clicked.
|
|
2610
|
-
var wasClicked = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
2502
|
+
var wasClicked = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
2611
2503
|
|
|
2504
|
+
// If popover or popover trigger was clicked...
|
|
2612
2505
|
if (wasClicked) {
|
|
2613
2506
|
// If popover element exists and is not active...
|
|
2614
2507
|
if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
|
|
@@ -2619,7 +2512,6 @@ function handleDocumentClick(popover) {
|
|
|
2619
2512
|
if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
|
|
2620
2513
|
popover.close();
|
|
2621
2514
|
}
|
|
2622
|
-
|
|
2623
2515
|
this.removeEventListener('click', _f);
|
|
2624
2516
|
}
|
|
2625
2517
|
});
|
|
@@ -2785,38 +2677,57 @@ var max = Math.max;
|
|
|
2785
2677
|
var min = Math.min;
|
|
2786
2678
|
var round = Math.round;
|
|
2787
2679
|
|
|
2788
|
-
function
|
|
2680
|
+
function getUAString() {
|
|
2681
|
+
var uaData = navigator.userAgentData;
|
|
2682
|
+
|
|
2683
|
+
if (uaData != null && uaData.brands) {
|
|
2684
|
+
return uaData.brands.map(function (item) {
|
|
2685
|
+
return item.brand + "/" + item.version;
|
|
2686
|
+
}).join(' ');
|
|
2687
|
+
}
|
|
2688
|
+
|
|
2689
|
+
return navigator.userAgent;
|
|
2690
|
+
}
|
|
2691
|
+
|
|
2692
|
+
function isLayoutViewport() {
|
|
2693
|
+
return !/^((?!chrome|android).)*safari/i.test(getUAString());
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy) {
|
|
2789
2697
|
if (includeScale === void 0) {
|
|
2790
2698
|
includeScale = false;
|
|
2791
2699
|
}
|
|
2792
2700
|
|
|
2793
|
-
|
|
2701
|
+
if (isFixedStrategy === void 0) {
|
|
2702
|
+
isFixedStrategy = false;
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2705
|
+
var clientRect = element.getBoundingClientRect();
|
|
2794
2706
|
var scaleX = 1;
|
|
2795
2707
|
var scaleY = 1;
|
|
2796
2708
|
|
|
2797
|
-
if (isHTMLElement(element)
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
// Fallback to 1 in case both values are `0`
|
|
2801
|
-
|
|
2802
|
-
if (offsetWidth > 0) {
|
|
2803
|
-
scaleX = round(rect.width) / offsetWidth || 1;
|
|
2804
|
-
}
|
|
2805
|
-
|
|
2806
|
-
if (offsetHeight > 0) {
|
|
2807
|
-
scaleY = round(rect.height) / offsetHeight || 1;
|
|
2808
|
-
}
|
|
2709
|
+
if (includeScale && isHTMLElement(element)) {
|
|
2710
|
+
scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
|
|
2711
|
+
scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
|
|
2809
2712
|
}
|
|
2810
2713
|
|
|
2714
|
+
var _ref = isElement(element) ? getWindow(element) : window,
|
|
2715
|
+
visualViewport = _ref.visualViewport;
|
|
2716
|
+
|
|
2717
|
+
var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
|
|
2718
|
+
var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
|
|
2719
|
+
var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
|
|
2720
|
+
var width = clientRect.width / scaleX;
|
|
2721
|
+
var height = clientRect.height / scaleY;
|
|
2811
2722
|
return {
|
|
2812
|
-
width:
|
|
2813
|
-
height:
|
|
2814
|
-
top:
|
|
2815
|
-
right:
|
|
2816
|
-
bottom:
|
|
2817
|
-
left:
|
|
2818
|
-
x:
|
|
2819
|
-
y:
|
|
2723
|
+
width: width,
|
|
2724
|
+
height: height,
|
|
2725
|
+
top: y,
|
|
2726
|
+
right: x + width,
|
|
2727
|
+
bottom: y + height,
|
|
2728
|
+
left: x,
|
|
2729
|
+
x: x,
|
|
2730
|
+
y: y
|
|
2820
2731
|
};
|
|
2821
2732
|
}
|
|
2822
2733
|
|
|
@@ -2911,8 +2822,8 @@ function getTrueOffsetParent(element) {
|
|
|
2911
2822
|
|
|
2912
2823
|
|
|
2913
2824
|
function getContainingBlock(element) {
|
|
2914
|
-
var isFirefox =
|
|
2915
|
-
var isIE =
|
|
2825
|
+
var isFirefox = /firefox/i.test(getUAString());
|
|
2826
|
+
var isIE = /Trident/i.test(getUAString());
|
|
2916
2827
|
|
|
2917
2828
|
if (isIE && isHTMLElement(element)) {
|
|
2918
2829
|
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
|
@@ -3333,31 +3244,21 @@ function getWindowScrollBarX(element) {
|
|
|
3333
3244
|
return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
|
|
3334
3245
|
}
|
|
3335
3246
|
|
|
3336
|
-
function getViewportRect(element) {
|
|
3247
|
+
function getViewportRect(element, strategy) {
|
|
3337
3248
|
var win = getWindow(element);
|
|
3338
3249
|
var html = getDocumentElement(element);
|
|
3339
3250
|
var visualViewport = win.visualViewport;
|
|
3340
3251
|
var width = html.clientWidth;
|
|
3341
3252
|
var height = html.clientHeight;
|
|
3342
3253
|
var x = 0;
|
|
3343
|
-
var y = 0;
|
|
3344
|
-
// can be obscured underneath it.
|
|
3345
|
-
// Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
|
|
3346
|
-
// if it isn't open, so if this isn't available, the popper will be detected
|
|
3347
|
-
// to overflow the bottom of the screen too early.
|
|
3254
|
+
var y = 0;
|
|
3348
3255
|
|
|
3349
3256
|
if (visualViewport) {
|
|
3350
3257
|
width = visualViewport.width;
|
|
3351
|
-
height = visualViewport.height;
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
// Feature detection fails in mobile emulation mode in Chrome.
|
|
3356
|
-
// Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
|
|
3357
|
-
// 0.001
|
|
3358
|
-
// Fallback here: "Not Safari" userAgent
|
|
3359
|
-
|
|
3360
|
-
if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
|
|
3258
|
+
height = visualViewport.height;
|
|
3259
|
+
var layoutViewport = isLayoutViewport();
|
|
3260
|
+
|
|
3261
|
+
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
|
|
3361
3262
|
x = visualViewport.offsetLeft;
|
|
3362
3263
|
y = visualViewport.offsetTop;
|
|
3363
3264
|
}
|
|
@@ -3451,8 +3352,8 @@ function rectToClientRect(rect) {
|
|
|
3451
3352
|
});
|
|
3452
3353
|
}
|
|
3453
3354
|
|
|
3454
|
-
function getInnerBoundingClientRect(element) {
|
|
3455
|
-
var rect = getBoundingClientRect(element);
|
|
3355
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
3356
|
+
var rect = getBoundingClientRect(element, false, strategy === 'fixed');
|
|
3456
3357
|
rect.top = rect.top + element.clientTop;
|
|
3457
3358
|
rect.left = rect.left + element.clientLeft;
|
|
3458
3359
|
rect.bottom = rect.top + element.clientHeight;
|
|
@@ -3464,8 +3365,8 @@ function getInnerBoundingClientRect(element) {
|
|
|
3464
3365
|
return rect;
|
|
3465
3366
|
}
|
|
3466
3367
|
|
|
3467
|
-
function getClientRectFromMixedType(element, clippingParent) {
|
|
3468
|
-
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
3368
|
+
function getClientRectFromMixedType(element, clippingParent, strategy) {
|
|
3369
|
+
return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
3469
3370
|
} // A "clipping parent" is an overflowable container with the characteristic of
|
|
3470
3371
|
// clipping (or hiding) overflowing elements with a position different from
|
|
3471
3372
|
// `initial`
|
|
@@ -3488,18 +3389,18 @@ function getClippingParents(element) {
|
|
|
3488
3389
|
// clipping parents
|
|
3489
3390
|
|
|
3490
3391
|
|
|
3491
|
-
function getClippingRect(element, boundary, rootBoundary) {
|
|
3392
|
+
function getClippingRect(element, boundary, rootBoundary, strategy) {
|
|
3492
3393
|
var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
|
|
3493
3394
|
var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
|
|
3494
3395
|
var firstClippingParent = clippingParents[0];
|
|
3495
3396
|
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
|
3496
|
-
var rect = getClientRectFromMixedType(element, clippingParent);
|
|
3397
|
+
var rect = getClientRectFromMixedType(element, clippingParent, strategy);
|
|
3497
3398
|
accRect.top = max(rect.top, accRect.top);
|
|
3498
3399
|
accRect.right = min(rect.right, accRect.right);
|
|
3499
3400
|
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
3500
3401
|
accRect.left = max(rect.left, accRect.left);
|
|
3501
3402
|
return accRect;
|
|
3502
|
-
}, getClientRectFromMixedType(element, firstClippingParent));
|
|
3403
|
+
}, getClientRectFromMixedType(element, firstClippingParent, strategy));
|
|
3503
3404
|
clippingRect.width = clippingRect.right - clippingRect.left;
|
|
3504
3405
|
clippingRect.height = clippingRect.bottom - clippingRect.top;
|
|
3505
3406
|
clippingRect.x = clippingRect.left;
|
|
@@ -3580,6 +3481,8 @@ function detectOverflow(state, options) {
|
|
|
3580
3481
|
var _options = options,
|
|
3581
3482
|
_options$placement = _options.placement,
|
|
3582
3483
|
placement = _options$placement === void 0 ? state.placement : _options$placement,
|
|
3484
|
+
_options$strategy = _options.strategy,
|
|
3485
|
+
strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
|
|
3583
3486
|
_options$boundary = _options.boundary,
|
|
3584
3487
|
boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
|
|
3585
3488
|
_options$rootBoundary = _options.rootBoundary,
|
|
@@ -3594,7 +3497,7 @@ function detectOverflow(state, options) {
|
|
|
3594
3497
|
var altContext = elementContext === popper ? reference : popper;
|
|
3595
3498
|
var popperRect = state.rects.popper;
|
|
3596
3499
|
var element = state.elements[altBoundary ? altContext : elementContext];
|
|
3597
|
-
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
|
|
3500
|
+
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
|
|
3598
3501
|
var referenceClientRect = getBoundingClientRect(state.elements.reference);
|
|
3599
3502
|
var popperOffsets = computeOffsets({
|
|
3600
3503
|
reference: referenceClientRect,
|
|
@@ -4108,7 +4011,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
|
|
4108
4011
|
var isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
4109
4012
|
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
|
|
4110
4013
|
var documentElement = getDocumentElement(offsetParent);
|
|
4111
|
-
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
|
|
4014
|
+
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
|
|
4112
4015
|
var scroll = {
|
|
4113
4016
|
scrollLeft: 0,
|
|
4114
4017
|
scrollTop: 0
|
|
@@ -4415,35 +4318,38 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
4415
4318
|
var deregister = function deregister(obj) {
|
|
4416
4319
|
try {
|
|
4417
4320
|
var _this2 = this;
|
|
4418
|
-
|
|
4419
4321
|
// Return collection if nothing was passed.
|
|
4420
|
-
if (!obj) return Promise.resolve(_this2.collection);
|
|
4322
|
+
if (!obj) return Promise.resolve(_this2.collection);
|
|
4421
4323
|
|
|
4324
|
+
// Check if entry has been registered in the collection.
|
|
4422
4325
|
var index = _this2.collection.findIndex(function (entry) {
|
|
4423
4326
|
return entry.id === obj.id;
|
|
4424
4327
|
});
|
|
4425
|
-
|
|
4426
4328
|
if (index >= 0) {
|
|
4427
4329
|
// Get the collection entry.
|
|
4428
|
-
var entry = _this2.collection[index];
|
|
4330
|
+
var entry = _this2.collection[index];
|
|
4429
4331
|
|
|
4332
|
+
// If entry is in the opened state, close it.
|
|
4430
4333
|
if (entry.state === 'opened') {
|
|
4431
4334
|
entry.close();
|
|
4432
|
-
}
|
|
4433
|
-
|
|
4335
|
+
}
|
|
4434
4336
|
|
|
4435
|
-
|
|
4337
|
+
// Clean up the popper instance.
|
|
4338
|
+
entry.popper.destroy();
|
|
4436
4339
|
|
|
4437
|
-
|
|
4340
|
+
// Remove event listeners.
|
|
4341
|
+
deregisterEventListeners(entry);
|
|
4438
4342
|
|
|
4343
|
+
// Delete properties from collection entry.
|
|
4439
4344
|
Object.getOwnPropertyNames(entry).forEach(function (prop) {
|
|
4440
4345
|
delete entry[prop];
|
|
4441
|
-
});
|
|
4346
|
+
});
|
|
4442
4347
|
|
|
4348
|
+
// Remove entry from collection.
|
|
4443
4349
|
_this2.collection.splice(index, 1);
|
|
4444
|
-
}
|
|
4445
|
-
|
|
4350
|
+
}
|
|
4446
4351
|
|
|
4352
|
+
// Return the modified collection.
|
|
4447
4353
|
return Promise.resolve(_this2.collection);
|
|
4448
4354
|
} catch (e) {
|
|
4449
4355
|
return Promise.reject(e);
|
|
@@ -4459,44 +4365,49 @@ function deregisterEventListeners(entry) {
|
|
|
4459
4365
|
entry[el].removeEventListener(type, evObj.listener, false);
|
|
4460
4366
|
});
|
|
4461
4367
|
});
|
|
4462
|
-
});
|
|
4463
|
-
|
|
4368
|
+
});
|
|
4464
4369
|
|
|
4370
|
+
// Remove eventListeners object from collection.
|
|
4465
4371
|
delete entry.__eventListeners;
|
|
4466
|
-
}
|
|
4467
|
-
|
|
4372
|
+
}
|
|
4468
4373
|
|
|
4374
|
+
// Return the entry object.
|
|
4469
4375
|
return entry;
|
|
4470
4376
|
}
|
|
4471
4377
|
|
|
4472
4378
|
var open = function open(query) {
|
|
4473
4379
|
try {
|
|
4474
4380
|
var _this2 = this;
|
|
4475
|
-
|
|
4476
4381
|
// Get the popover from collection.
|
|
4477
|
-
var popover = getPopover.call(_this2, query);
|
|
4382
|
+
var popover = getPopover.call(_this2, query);
|
|
4478
4383
|
|
|
4479
|
-
|
|
4384
|
+
// Update state class.
|
|
4385
|
+
popover.el.classList.add(_this2.settings.stateActive);
|
|
4480
4386
|
|
|
4387
|
+
// Update accessibility attribute(s).
|
|
4481
4388
|
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
4482
4389
|
popover.trigger.setAttribute('aria-expanded', 'true');
|
|
4483
|
-
}
|
|
4484
|
-
|
|
4390
|
+
}
|
|
4485
4391
|
|
|
4486
|
-
|
|
4392
|
+
// Update popover config.
|
|
4393
|
+
popover.config = getConfig(popover.el, _this2.settings);
|
|
4487
4394
|
|
|
4395
|
+
// Enable popper event listeners and set placement/modifiers.
|
|
4488
4396
|
popover.popper.setOptions({
|
|
4489
4397
|
placement: popover.config['placement'],
|
|
4490
4398
|
modifiers: [{
|
|
4491
4399
|
name: 'eventListeners',
|
|
4492
4400
|
enabled: true
|
|
4493
4401
|
}].concat(getModifiers(popover.config))
|
|
4494
|
-
});
|
|
4402
|
+
});
|
|
4495
4403
|
|
|
4496
|
-
|
|
4404
|
+
// Update popover position.
|
|
4405
|
+
popover.popper.update();
|
|
4497
4406
|
|
|
4498
|
-
|
|
4407
|
+
// Update popover state.
|
|
4408
|
+
popover.state = 'opened';
|
|
4499
4409
|
|
|
4410
|
+
// Return the popover.
|
|
4500
4411
|
return Promise.resolve(popover);
|
|
4501
4412
|
} catch (e) {
|
|
4502
4413
|
return Promise.reject(e);
|
|
@@ -4506,13 +4417,13 @@ var open = function open(query) {
|
|
|
4506
4417
|
var register = function register(el, trigger) {
|
|
4507
4418
|
try {
|
|
4508
4419
|
var _this2 = this;
|
|
4509
|
-
|
|
4510
4420
|
// Deregister entry incase it has already been registered.
|
|
4511
|
-
deregister.call(_this2, el);
|
|
4421
|
+
deregister.call(_this2, el);
|
|
4512
4422
|
|
|
4423
|
+
// Save root this for use inside methods API.
|
|
4424
|
+
var root = _this2;
|
|
4513
4425
|
|
|
4514
|
-
|
|
4515
|
-
|
|
4426
|
+
// Setup methods API.
|
|
4516
4427
|
var methods = {
|
|
4517
4428
|
open: function open$1() {
|
|
4518
4429
|
return open.call(root, this);
|
|
@@ -4523,8 +4434,9 @@ var register = function register(el, trigger) {
|
|
|
4523
4434
|
deregister: function deregister$1() {
|
|
4524
4435
|
return deregister.call(root, this);
|
|
4525
4436
|
}
|
|
4526
|
-
};
|
|
4437
|
+
};
|
|
4527
4438
|
|
|
4439
|
+
// Setup the popover object.
|
|
4528
4440
|
var entry = _extends({
|
|
4529
4441
|
id: el.id,
|
|
4530
4442
|
state: 'closed',
|
|
@@ -4532,19 +4444,20 @@ var register = function register(el, trigger) {
|
|
|
4532
4444
|
trigger: trigger,
|
|
4533
4445
|
popper: createPopper(trigger, el),
|
|
4534
4446
|
config: getConfig(el, _this2.settings)
|
|
4535
|
-
}, methods);
|
|
4536
|
-
|
|
4447
|
+
}, methods);
|
|
4537
4448
|
|
|
4449
|
+
// Set aria-expanded to false if trigger has aria-controls attribute.
|
|
4538
4450
|
if (entry.trigger.hasAttribute('aria-controls')) {
|
|
4539
4451
|
entry.trigger.setAttribute('aria-expanded', 'false');
|
|
4540
|
-
}
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
registerEventListeners.call(_this2, entry); // Add entry to collection.
|
|
4452
|
+
}
|
|
4544
4453
|
|
|
4545
|
-
|
|
4454
|
+
// Setup event listeners.
|
|
4455
|
+
registerEventListeners.call(_this2, entry);
|
|
4546
4456
|
|
|
4457
|
+
// Add entry to collection.
|
|
4458
|
+
_this2.collection.push(entry);
|
|
4547
4459
|
|
|
4460
|
+
// Set initial state.
|
|
4548
4461
|
var _temp2 = function () {
|
|
4549
4462
|
if (entry.el.classList.contains(_this2.settings.stateActive)) {
|
|
4550
4463
|
return Promise.resolve(entry.open()).then(function () {
|
|
@@ -4552,7 +4465,6 @@ var register = function register(el, trigger) {
|
|
|
4552
4465
|
});
|
|
4553
4466
|
}
|
|
4554
4467
|
}();
|
|
4555
|
-
|
|
4556
4468
|
return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
|
|
4557
4469
|
// Return the registered entry.
|
|
4558
4470
|
return entry;
|
|
@@ -4565,8 +4477,9 @@ function registerEventListeners(entry) {
|
|
|
4565
4477
|
// If event listeners aren't already setup.
|
|
4566
4478
|
if (!entry.__eventListeners) {
|
|
4567
4479
|
// Add event listeners based on event type.
|
|
4568
|
-
var eventType = entry.config['event'];
|
|
4480
|
+
var eventType = entry.config['event'];
|
|
4569
4481
|
|
|
4482
|
+
// If the event type is hover.
|
|
4570
4483
|
if (eventType === 'hover') {
|
|
4571
4484
|
// Setup event listeners object for hover.
|
|
4572
4485
|
entry.__eventListeners = [{
|
|
@@ -4577,8 +4490,9 @@ function registerEventListeners(entry) {
|
|
|
4577
4490
|
el: ['el', 'trigger'],
|
|
4578
4491
|
type: ['mouseleave', 'focusout'],
|
|
4579
4492
|
listener: closeCheck.bind(this, entry)
|
|
4580
|
-
}];
|
|
4493
|
+
}];
|
|
4581
4494
|
|
|
4495
|
+
// Loop through listeners and apply to the appropriate elements.
|
|
4582
4496
|
entry.__eventListeners.forEach(function (evObj) {
|
|
4583
4497
|
evObj.el.forEach(function (el) {
|
|
4584
4498
|
evObj.type.forEach(function (type) {
|
|
@@ -4586,15 +4500,18 @@ function registerEventListeners(entry) {
|
|
|
4586
4500
|
});
|
|
4587
4501
|
});
|
|
4588
4502
|
});
|
|
4589
|
-
}
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
// Else the event type is click.
|
|
4590
4506
|
else {
|
|
4591
4507
|
// Setup event listeners object for click.
|
|
4592
4508
|
entry.__eventListeners = [{
|
|
4593
4509
|
el: ['trigger'],
|
|
4594
4510
|
type: ['click'],
|
|
4595
4511
|
listener: handleClick.bind(this, entry)
|
|
4596
|
-
}];
|
|
4512
|
+
}];
|
|
4597
4513
|
|
|
4514
|
+
// Loop through listeners and apply to the appropriate elements.
|
|
4598
4515
|
entry.__eventListeners.forEach(function (evObj) {
|
|
4599
4516
|
evObj.el.forEach(function (el) {
|
|
4600
4517
|
evObj.type.forEach(function (type) {
|
|
@@ -4603,20 +4520,17 @@ function registerEventListeners(entry) {
|
|
|
4603
4520
|
});
|
|
4604
4521
|
});
|
|
4605
4522
|
}
|
|
4606
|
-
}
|
|
4607
|
-
|
|
4523
|
+
}
|
|
4608
4524
|
|
|
4525
|
+
// Return the entry object.
|
|
4609
4526
|
return entry;
|
|
4610
4527
|
}
|
|
4611
4528
|
|
|
4612
4529
|
var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
4613
|
-
|
|
4614
4530
|
var Popover = /*#__PURE__*/function (_Collection) {
|
|
4615
4531
|
_inheritsLoose(Popover, _Collection);
|
|
4616
|
-
|
|
4617
4532
|
function Popover(options) {
|
|
4618
4533
|
var _this;
|
|
4619
|
-
|
|
4620
4534
|
_this = _Collection.call(this) || this;
|
|
4621
4535
|
Object.defineProperty(_assertThisInitialized(_this), _handleKeydown, {
|
|
4622
4536
|
writable: true,
|
|
@@ -4629,18 +4543,17 @@ var Popover = /*#__PURE__*/function (_Collection) {
|
|
|
4629
4543
|
if (_this.settings.autoInit) _this.init();
|
|
4630
4544
|
return _this;
|
|
4631
4545
|
}
|
|
4632
|
-
|
|
4633
4546
|
var _proto = Popover.prototype;
|
|
4634
|
-
|
|
4635
4547
|
_proto.init = function init(options) {
|
|
4636
4548
|
try {
|
|
4637
4549
|
var _this3 = this;
|
|
4638
|
-
|
|
4639
4550
|
// Update settings with passed options.
|
|
4640
|
-
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
4551
|
+
if (options) _this3.settings = _extends({}, _this3.settings, options);
|
|
4641
4552
|
|
|
4642
|
-
|
|
4553
|
+
// Get all the popovers.
|
|
4554
|
+
var popovers = document.querySelectorAll(_this3.settings.selectorPopover);
|
|
4643
4555
|
|
|
4556
|
+
// Register the collections array with popover instances.
|
|
4644
4557
|
return Promise.resolve(_this3.registerCollection(popovers)).then(function () {
|
|
4645
4558
|
// If eventListeners are enabled, init event listeners.
|
|
4646
4559
|
if (_this3.settings.eventListeners) {
|
|
@@ -4648,21 +4561,19 @@ var Popover = /*#__PURE__*/function (_Collection) {
|
|
|
4648
4561
|
// already adds event listeners to popovers.
|
|
4649
4562
|
_this3.initEventListeners(false);
|
|
4650
4563
|
}
|
|
4651
|
-
|
|
4652
4564
|
return _this3;
|
|
4653
4565
|
});
|
|
4654
4566
|
} catch (e) {
|
|
4655
4567
|
return Promise.reject(e);
|
|
4656
4568
|
}
|
|
4657
4569
|
};
|
|
4658
|
-
|
|
4659
4570
|
_proto.destroy = function destroy() {
|
|
4660
4571
|
try {
|
|
4661
4572
|
var _this5 = this;
|
|
4662
|
-
|
|
4663
4573
|
// Clear stored trigger.
|
|
4664
|
-
_this5.trigger = null;
|
|
4574
|
+
_this5.trigger = null;
|
|
4665
4575
|
|
|
4576
|
+
// Remove all entries from the collection.
|
|
4666
4577
|
return Promise.resolve(_this5.deregisterCollection()).then(function () {
|
|
4667
4578
|
// If eventListeners are enabled, destroy event listeners.
|
|
4668
4579
|
if (_this5.settings.eventListeners) {
|
|
@@ -4670,67 +4581,56 @@ var Popover = /*#__PURE__*/function (_Collection) {
|
|
|
4670
4581
|
// already removes event listeners from popovers.
|
|
4671
4582
|
_this5.destroyEventListeners(false);
|
|
4672
4583
|
}
|
|
4673
|
-
|
|
4674
4584
|
return _this5;
|
|
4675
4585
|
});
|
|
4676
4586
|
} catch (e) {
|
|
4677
4587
|
return Promise.reject(e);
|
|
4678
4588
|
}
|
|
4679
4589
|
};
|
|
4680
|
-
|
|
4681
4590
|
_proto.initEventListeners = function initEventListeners(processCollection) {
|
|
4682
4591
|
var _this6 = this;
|
|
4683
|
-
|
|
4684
4592
|
if (processCollection === void 0) {
|
|
4685
4593
|
processCollection = true;
|
|
4686
4594
|
}
|
|
4687
|
-
|
|
4688
4595
|
if (processCollection) {
|
|
4689
4596
|
// Loop through collection and setup event listeners.
|
|
4690
4597
|
this.collection.forEach(function (popover) {
|
|
4691
4598
|
registerEventListeners.call(_this6, popover);
|
|
4692
4599
|
});
|
|
4693
|
-
}
|
|
4694
|
-
|
|
4600
|
+
}
|
|
4695
4601
|
|
|
4602
|
+
// Add keydown global event listener.
|
|
4696
4603
|
document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4697
4604
|
};
|
|
4698
|
-
|
|
4699
4605
|
_proto.destroyEventListeners = function destroyEventListeners(processCollection) {
|
|
4700
4606
|
if (processCollection === void 0) {
|
|
4701
4607
|
processCollection = true;
|
|
4702
4608
|
}
|
|
4703
|
-
|
|
4704
4609
|
if (processCollection) {
|
|
4705
4610
|
// Loop through collection and remove event listeners.
|
|
4706
4611
|
this.collection.forEach(function (popover) {
|
|
4707
4612
|
deregisterEventListeners(popover);
|
|
4708
4613
|
});
|
|
4709
|
-
}
|
|
4710
|
-
|
|
4614
|
+
}
|
|
4711
4615
|
|
|
4616
|
+
// Remove keydown global event listener.
|
|
4712
4617
|
document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4713
4618
|
};
|
|
4714
|
-
|
|
4715
4619
|
_proto.register = function register$1(query) {
|
|
4716
4620
|
var els = getPopoverElements.call(this, query);
|
|
4717
4621
|
if (els.error) return Promise.reject(els.error);
|
|
4718
4622
|
return register.call(this, els.popover, els.trigger);
|
|
4719
4623
|
};
|
|
4720
|
-
|
|
4721
4624
|
_proto.deregister = function deregister$1(query) {
|
|
4722
4625
|
var popover = this.get(getPopoverID.call(this, query));
|
|
4723
4626
|
return deregister.call(this, popover);
|
|
4724
4627
|
};
|
|
4725
|
-
|
|
4726
4628
|
_proto.open = function open$1(id) {
|
|
4727
4629
|
return open.call(this, id);
|
|
4728
4630
|
};
|
|
4729
|
-
|
|
4730
4631
|
_proto.close = function close$1(id) {
|
|
4731
4632
|
return close.call(this, id);
|
|
4732
4633
|
};
|
|
4733
|
-
|
|
4734
4634
|
return Popover;
|
|
4735
4635
|
}(Collection);
|
|
4736
4636
|
|