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