vrembem 1.40.0 → 1.40.3
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/LICENSE +1 -1
- package/dev/scripts.esm.js +451 -409
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +451 -409
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.js +374 -342
- package/dev/scripts.modern.js.map +1 -1
- package/dev/scripts.umd.js +451 -409
- package/dev/scripts.umd.js.map +1 -1
- 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.js +1 -1
- package/dist/scripts.modern.js.map +1 -1
- package/dist/scripts.umd.js +1 -1
- package/dist/scripts.umd.js.map +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +26 -26
package/dev/scripts.esm.js
CHANGED
|
@@ -34,10 +34,9 @@ var setTabindex = function setTabindex(selector) {
|
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
|
-
* Adds a class or classes to
|
|
38
|
-
*
|
|
39
|
-
* @param
|
|
40
|
-
* @param {String || Array} cl - Class(es) to add
|
|
37
|
+
* Adds a class or classes to a Node or NodeList.
|
|
38
|
+
* @param {Node || NodeList} el - Element(s) to add class(es) to.
|
|
39
|
+
* @param {String || Array} cl - Class(es) to add.
|
|
41
40
|
*/
|
|
42
41
|
var addClass = function addClass(el) {
|
|
43
42
|
var _arguments = arguments;
|
|
@@ -50,10 +49,9 @@ var addClass = function addClass(el) {
|
|
|
50
49
|
};
|
|
51
50
|
|
|
52
51
|
/**
|
|
53
|
-
* Takes a hyphen cased string and converts it to camel case
|
|
54
|
-
*
|
|
55
|
-
* @
|
|
56
|
-
* @returns {Boolean} - returns a camel cased string
|
|
52
|
+
* Takes a hyphen cased string and converts it to camel case.
|
|
53
|
+
* @param {String } str - the string to convert to camel case.
|
|
54
|
+
* @returns {Boolean} - returns a camel cased string.
|
|
57
55
|
*/
|
|
58
56
|
var camelCase = function camelCase(str) {
|
|
59
57
|
return str.replace(/-([a-z])/g, function (g) {
|
|
@@ -179,27 +177,25 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
179
177
|
}();
|
|
180
178
|
|
|
181
179
|
/**
|
|
182
|
-
* Get an element(s) from a selector or return value if not a string
|
|
183
|
-
*
|
|
184
|
-
* @param {
|
|
185
|
-
* @param {Boolean} single - Whether to return a single or all matches
|
|
180
|
+
* Get an element(s) from a selector or return value if not a string.
|
|
181
|
+
* @param {String} selector - Selector to query.
|
|
182
|
+
* @param {Boolean} single - Whether to return a single or all matches.
|
|
186
183
|
*/
|
|
187
184
|
var getElement = function getElement(selector, single) {
|
|
188
185
|
if (single === void 0) {
|
|
189
186
|
single = 0;
|
|
190
187
|
}
|
|
191
188
|
|
|
192
|
-
if (typeof selector
|
|
189
|
+
if (typeof selector !== 'string') return selector;
|
|
193
190
|
return single ? document.querySelector(selector) : document.querySelectorAll(selector);
|
|
194
191
|
};
|
|
195
192
|
|
|
196
193
|
/**
|
|
197
|
-
* Checks an element or NodeList whether they contain a class or classes
|
|
194
|
+
* Checks an element or NodeList whether they contain a class or classes.
|
|
198
195
|
* Ref: https://davidwalsh.name/nodelist-array
|
|
199
|
-
*
|
|
200
|
-
* @param {
|
|
201
|
-
* @
|
|
202
|
-
* @returns {Boolean} - Returns true if class exists, otherwise false
|
|
196
|
+
* @param {Node} el - Element(s) to check class(es) on.
|
|
197
|
+
* @param {String || Array} c - Class(es) to check.
|
|
198
|
+
* @returns {Boolean} - Returns true if class exists, otherwise false.
|
|
203
199
|
*/
|
|
204
200
|
var hasClass = function hasClass(el) {
|
|
205
201
|
el = el.forEach ? el : [el];
|
|
@@ -212,10 +208,9 @@ var hasClass = function hasClass(el) {
|
|
|
212
208
|
};
|
|
213
209
|
|
|
214
210
|
/**
|
|
215
|
-
* Takes a camel cased string and converts it to hyphen case
|
|
216
|
-
*
|
|
217
|
-
* @
|
|
218
|
-
* @returns {Boolean} - returns a hyphen cased string
|
|
211
|
+
* Takes a camel cased string and converts it to hyphen case.
|
|
212
|
+
* @param {String } str - the string to convert to hyphen case.
|
|
213
|
+
* @returns {Boolean} - returns a hyphen cased string.
|
|
219
214
|
*/
|
|
220
215
|
var hyphenCase = function hyphenCase(str) {
|
|
221
216
|
return str.replace(/([a-z][A-Z])/g, function (g) {
|
|
@@ -224,11 +219,10 @@ var hyphenCase = function hyphenCase(str) {
|
|
|
224
219
|
};
|
|
225
220
|
|
|
226
221
|
/**
|
|
227
|
-
* Moves element(s) in the DOM based on a reference and move type
|
|
228
|
-
*
|
|
229
|
-
* @param {String}
|
|
230
|
-
* @param {String}
|
|
231
|
-
* @param {String} reference - The reference element the move is relative to
|
|
222
|
+
* Moves element(s) in the DOM based on a reference and move type.
|
|
223
|
+
* @param {String} target - The element(s) to move.
|
|
224
|
+
* @param {String} type - Move type can be 'after', 'before', 'append' or 'prepend'.
|
|
225
|
+
* @param {String} reference - The reference element the move is relative to.
|
|
232
226
|
*/
|
|
233
227
|
|
|
234
228
|
function moveElement(target, type, reference) {
|
|
@@ -283,10 +277,9 @@ function moveElement(target, type, reference) {
|
|
|
283
277
|
}
|
|
284
278
|
|
|
285
279
|
/**
|
|
286
|
-
* Remove a class or classes from an element or NodeList
|
|
287
|
-
*
|
|
288
|
-
* @param {
|
|
289
|
-
* @param {String || Array} cl - Class(es) to remove
|
|
280
|
+
* Remove a class or classes from an element or NodeList.
|
|
281
|
+
* @param {Node || NodeList} el - Element(s) to remove class(es) from.
|
|
282
|
+
* @param {String || Array} cl - Class(es) to remove.
|
|
290
283
|
*/
|
|
291
284
|
var removeClass = function removeClass(el) {
|
|
292
285
|
var _arguments = arguments;
|
|
@@ -299,10 +292,9 @@ var removeClass = function removeClass(el) {
|
|
|
299
292
|
};
|
|
300
293
|
|
|
301
294
|
/**
|
|
302
|
-
* Toggle a class or classes on an element or NodeList
|
|
303
|
-
*
|
|
304
|
-
* @param {
|
|
305
|
-
* @param {String || Array} cl - Class(es) to toggle
|
|
295
|
+
* Toggle a class or classes on an element or NodeList.
|
|
296
|
+
* @param {Node || NodeList} el - Element(s) to toggle class(es) on.
|
|
297
|
+
* @param {String || Array} cl - Class(es) to toggle.
|
|
306
298
|
*/
|
|
307
299
|
var toggleClass = function toggleClass(el) {
|
|
308
300
|
var _arguments = arguments;
|
|
@@ -389,13 +381,15 @@ function _extends() {
|
|
|
389
381
|
return _extends.apply(this, arguments);
|
|
390
382
|
}
|
|
391
383
|
|
|
384
|
+
var defaults$3 = {
|
|
385
|
+
autoInit: false,
|
|
386
|
+
stateAttr: 'aria-checked',
|
|
387
|
+
stateValue: 'mixed'
|
|
388
|
+
};
|
|
389
|
+
|
|
392
390
|
var Checkbox = /*#__PURE__*/function () {
|
|
393
391
|
function Checkbox(options) {
|
|
394
|
-
this.defaults =
|
|
395
|
-
autoInit: false,
|
|
396
|
-
stateAttr: 'aria-checked',
|
|
397
|
-
stateValue: 'mixed'
|
|
398
|
-
};
|
|
392
|
+
this.defaults = defaults$3;
|
|
399
393
|
this.settings = _extends({}, this.defaults, options);
|
|
400
394
|
this.__handlerClick = this.handlerClick.bind(this);
|
|
401
395
|
if (this.settings.autoInit) this.init();
|
|
@@ -495,55 +489,6 @@ var defaults$2 = {
|
|
|
495
489
|
transition: true
|
|
496
490
|
};
|
|
497
491
|
|
|
498
|
-
var switchToDefault = function switchToDefault(drawerKey, obj) {
|
|
499
|
-
try {
|
|
500
|
-
// Initial guards
|
|
501
|
-
var drawer = obj.getDrawer(drawerKey);
|
|
502
|
-
if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
|
|
503
|
-
if (!hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Tear down modal state
|
|
504
|
-
|
|
505
|
-
setInert(false, obj.settings.selectorInert);
|
|
506
|
-
setOverflowHidden(false, obj.settings.selectorOverflow);
|
|
507
|
-
removeClass(drawer, obj.settings.classModal);
|
|
508
|
-
obj.focusTrap.destroy(); // Restore drawers saved state
|
|
509
|
-
|
|
510
|
-
drawerKey = drawer.getAttribute("data-" + obj.settings.dataDrawer);
|
|
511
|
-
var drawerState = obj.state[drawerKey];
|
|
512
|
-
|
|
513
|
-
if (drawerState == obj.settings.stateOpened) {
|
|
514
|
-
addClass(drawer, obj.settings.stateOpened);
|
|
515
|
-
removeClass(drawer, obj.settings.stateClosed);
|
|
516
|
-
} // Dispatch custom event
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toDefault', {
|
|
520
|
-
bubbles: true
|
|
521
|
-
}));
|
|
522
|
-
return Promise.resolve(drawer);
|
|
523
|
-
} catch (e) {
|
|
524
|
-
return Promise.reject(e);
|
|
525
|
-
}
|
|
526
|
-
};
|
|
527
|
-
var switchToModal = function switchToModal(drawerKey, obj) {
|
|
528
|
-
try {
|
|
529
|
-
// Initial guards
|
|
530
|
-
var drawer = obj.getDrawer(drawerKey);
|
|
531
|
-
if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
|
|
532
|
-
if (hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Enable modal state
|
|
533
|
-
|
|
534
|
-
addClass(drawer, obj.settings.classModal);
|
|
535
|
-
addClass(drawer, obj.settings.stateClosed);
|
|
536
|
-
removeClass(drawer, obj.settings.stateOpened); // Dispatch custom event
|
|
537
|
-
|
|
538
|
-
drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toModal', {
|
|
539
|
-
bubbles: true
|
|
540
|
-
}));
|
|
541
|
-
return Promise.resolve(drawer);
|
|
542
|
-
} catch (e) {
|
|
543
|
-
return Promise.reject(e);
|
|
544
|
-
}
|
|
545
|
-
};
|
|
546
|
-
|
|
547
492
|
var Breakpoint = /*#__PURE__*/function () {
|
|
548
493
|
function Breakpoint(parent) {
|
|
549
494
|
this.mediaQueryLists = [];
|
|
@@ -559,16 +504,23 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
559
504
|
|
|
560
505
|
var drawers = document.querySelectorAll("[data-" + this.parent.settings.dataBreakpoint + "]");
|
|
561
506
|
drawers.forEach(function (drawer) {
|
|
507
|
+
// Setup mediaQueryList object
|
|
562
508
|
var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
|
|
563
509
|
var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
|
|
564
510
|
|
|
565
511
|
var bp = _this.getBreakpoint(key);
|
|
566
512
|
|
|
567
|
-
var mql = window.matchMedia('(min-width:' + bp + ')');
|
|
513
|
+
var mql = window.matchMedia('(min-width:' + bp + ')'); // Run match check
|
|
568
514
|
|
|
569
|
-
_this.match(mql, drawer);
|
|
515
|
+
_this.match(mql, drawer); // Conditionally use addListner() for IE11 support
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
if (typeof mql.addEventListener === 'function') {
|
|
519
|
+
mql.addEventListener('change', _this.__check);
|
|
520
|
+
} else {
|
|
521
|
+
mql.addListener(_this.__check);
|
|
522
|
+
} // Push to mediaQueryLists array along with drawer ID
|
|
570
523
|
|
|
571
|
-
mql.addEventListener('change', _this.__check);
|
|
572
524
|
|
|
573
525
|
_this.mediaQueryLists.push({
|
|
574
526
|
'mql': mql,
|
|
@@ -613,9 +565,9 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
613
565
|
|
|
614
566
|
_proto.match = function match(mql, drawer) {
|
|
615
567
|
if (mql.matches) {
|
|
616
|
-
switchToDefault(drawer
|
|
568
|
+
this.parent.switchToDefault(drawer);
|
|
617
569
|
} else {
|
|
618
|
-
switchToModal(drawer
|
|
570
|
+
this.parent.switchToModal(drawer);
|
|
619
571
|
}
|
|
620
572
|
};
|
|
621
573
|
|
|
@@ -641,6 +593,52 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
641
593
|
return Breakpoint;
|
|
642
594
|
}();
|
|
643
595
|
|
|
596
|
+
function getDrawer(drawerKey) {
|
|
597
|
+
if (typeof drawerKey !== 'string') return drawerKey;
|
|
598
|
+
return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
|
|
599
|
+
}
|
|
600
|
+
function drawerNotFound(key) {
|
|
601
|
+
return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
var close$2 = function close(drawerKey) {
|
|
605
|
+
try {
|
|
606
|
+
var _this2 = this;
|
|
607
|
+
|
|
608
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
609
|
+
|
|
610
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
611
|
+
|
|
612
|
+
if (hasClass(drawer, _this2.settings.stateOpened)) {
|
|
613
|
+
_this2.working = true;
|
|
614
|
+
|
|
615
|
+
if (hasClass(drawer, _this2.settings.classModal)) {
|
|
616
|
+
setInert(false, _this2.settings.selectorInert);
|
|
617
|
+
setOverflowHidden(false, _this2.settings.selectorOverflow);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
return Promise.resolve(closeTransition(drawer, _this2.settings)).then(function () {
|
|
621
|
+
_this2.stateSave(drawer);
|
|
622
|
+
|
|
623
|
+
focusTrigger(_this2);
|
|
624
|
+
|
|
625
|
+
_this2.focusTrap.destroy();
|
|
626
|
+
|
|
627
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
|
|
628
|
+
detail: _this2,
|
|
629
|
+
bubbles: true
|
|
630
|
+
}));
|
|
631
|
+
_this2.working = false;
|
|
632
|
+
return drawer;
|
|
633
|
+
});
|
|
634
|
+
} else {
|
|
635
|
+
return Promise.resolve(drawer);
|
|
636
|
+
}
|
|
637
|
+
} catch (e) {
|
|
638
|
+
return Promise.reject(e);
|
|
639
|
+
}
|
|
640
|
+
};
|
|
641
|
+
|
|
644
642
|
function handlerClick$2(event) {
|
|
645
643
|
// Working catch
|
|
646
644
|
if (this.working) return; // Toggle data trigger
|
|
@@ -704,6 +702,48 @@ function handlerKeydown$2(event) {
|
|
|
704
702
|
}
|
|
705
703
|
}
|
|
706
704
|
|
|
705
|
+
var open$2 = function open(drawerKey) {
|
|
706
|
+
try {
|
|
707
|
+
var _this2 = this;
|
|
708
|
+
|
|
709
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
710
|
+
|
|
711
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
712
|
+
|
|
713
|
+
if (!hasClass(drawer, _this2.settings.stateOpened)) {
|
|
714
|
+
_this2.working = true;
|
|
715
|
+
var isModal = hasClass(drawer, _this2.settings.classModal);
|
|
716
|
+
|
|
717
|
+
if (isModal) {
|
|
718
|
+
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
return Promise.resolve(openTransition(drawer, _this2.settings)).then(function () {
|
|
722
|
+
_this2.stateSave(drawer);
|
|
723
|
+
|
|
724
|
+
if (isModal) {
|
|
725
|
+
_this2.focusTrap.init(drawer);
|
|
726
|
+
|
|
727
|
+
setInert(true, _this2.settings.selectorInert);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
focusTarget(drawer, _this2.settings);
|
|
731
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
732
|
+
detail: _this2,
|
|
733
|
+
bubbles: true
|
|
734
|
+
}));
|
|
735
|
+
_this2.working = false;
|
|
736
|
+
return drawer;
|
|
737
|
+
});
|
|
738
|
+
} else {
|
|
739
|
+
focusTarget(drawer, _this2.settings);
|
|
740
|
+
return Promise.resolve(drawer);
|
|
741
|
+
}
|
|
742
|
+
} catch (e) {
|
|
743
|
+
return Promise.reject(e);
|
|
744
|
+
}
|
|
745
|
+
};
|
|
746
|
+
|
|
707
747
|
function stateSet(settings) {
|
|
708
748
|
// If save state is disabled
|
|
709
749
|
if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
|
|
@@ -748,6 +788,82 @@ function stateClear(settings) {
|
|
|
748
788
|
return {};
|
|
749
789
|
}
|
|
750
790
|
|
|
791
|
+
var switchToDefault = function switchToDefault(drawerKey) {
|
|
792
|
+
try {
|
|
793
|
+
var _this4 = this;
|
|
794
|
+
|
|
795
|
+
// Initial guards
|
|
796
|
+
var drawer = _this4.getDrawer(drawerKey);
|
|
797
|
+
|
|
798
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
799
|
+
if (!hasClass(drawer, _this4.settings.classModal)) return Promise.resolve(); // Tear down modal state
|
|
800
|
+
|
|
801
|
+
setInert(false, _this4.settings.selectorInert);
|
|
802
|
+
setOverflowHidden(false, _this4.settings.selectorOverflow);
|
|
803
|
+
removeClass(drawer, _this4.settings.classModal);
|
|
804
|
+
|
|
805
|
+
_this4.focusTrap.destroy(); // Restore drawers saved state
|
|
806
|
+
|
|
807
|
+
|
|
808
|
+
drawerKey = drawer.getAttribute("data-" + _this4.settings.dataDrawer);
|
|
809
|
+
var drawerState = _this4.state[drawerKey];
|
|
810
|
+
|
|
811
|
+
if (drawerState == _this4.settings.stateOpened) {
|
|
812
|
+
addClass(drawer, _this4.settings.stateOpened);
|
|
813
|
+
removeClass(drawer, _this4.settings.stateClosed);
|
|
814
|
+
} // Dispatch custom event
|
|
815
|
+
|
|
816
|
+
|
|
817
|
+
drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'toDefault', {
|
|
818
|
+
bubbles: true
|
|
819
|
+
}));
|
|
820
|
+
return Promise.resolve(drawer);
|
|
821
|
+
} catch (e) {
|
|
822
|
+
return Promise.reject(e);
|
|
823
|
+
}
|
|
824
|
+
};
|
|
825
|
+
var switchToModal = function switchToModal(drawerKey) {
|
|
826
|
+
try {
|
|
827
|
+
var _this2 = this;
|
|
828
|
+
|
|
829
|
+
// Initial guards
|
|
830
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
831
|
+
|
|
832
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
833
|
+
if (hasClass(drawer, _this2.settings.classModal)) return Promise.resolve(); // Enable modal state
|
|
834
|
+
|
|
835
|
+
addClass(drawer, _this2.settings.classModal);
|
|
836
|
+
addClass(drawer, _this2.settings.stateClosed);
|
|
837
|
+
removeClass(drawer, _this2.settings.stateOpened); // Dispatch custom event
|
|
838
|
+
|
|
839
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'toModal', {
|
|
840
|
+
bubbles: true
|
|
841
|
+
}));
|
|
842
|
+
return Promise.resolve(drawer);
|
|
843
|
+
} catch (e) {
|
|
844
|
+
return Promise.reject(e);
|
|
845
|
+
}
|
|
846
|
+
};
|
|
847
|
+
|
|
848
|
+
var toggle = function toggle(drawerKey) {
|
|
849
|
+
try {
|
|
850
|
+
var _this2 = this;
|
|
851
|
+
|
|
852
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
853
|
+
|
|
854
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
855
|
+
var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
|
|
856
|
+
|
|
857
|
+
if (isClosed) {
|
|
858
|
+
return Promise.resolve(_this2.open(drawer));
|
|
859
|
+
} else {
|
|
860
|
+
return Promise.resolve(_this2.close(drawer));
|
|
861
|
+
}
|
|
862
|
+
} catch (e) {
|
|
863
|
+
return Promise.reject(e);
|
|
864
|
+
}
|
|
865
|
+
};
|
|
866
|
+
|
|
751
867
|
var Drawer = /*#__PURE__*/function () {
|
|
752
868
|
function Drawer(options) {
|
|
753
869
|
this.defaults = defaults$2;
|
|
@@ -814,19 +930,12 @@ var Drawer = /*#__PURE__*/function () {
|
|
|
814
930
|
*/
|
|
815
931
|
;
|
|
816
932
|
|
|
817
|
-
_proto.getDrawer = function getDrawer(drawerKey) {
|
|
818
|
-
|
|
819
|
-
return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
|
|
820
|
-
};
|
|
821
|
-
|
|
822
|
-
_proto.drawerNotFound = function drawerNotFound(key) {
|
|
823
|
-
return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
|
|
933
|
+
_proto.getDrawer = function getDrawer$1(drawerKey) {
|
|
934
|
+
return getDrawer.call(this, drawerKey);
|
|
824
935
|
};
|
|
825
936
|
|
|
826
937
|
_proto.setTabindex = function setTabindex$1() {
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
setTabindex(selectorTabindex);
|
|
938
|
+
return setTabindex("\n [data-" + this.settings.dataDrawer + "]\n [data-" + this.settings.dataDialog + "]\n ");
|
|
830
939
|
}
|
|
831
940
|
/**
|
|
832
941
|
* Save state functionality
|
|
@@ -854,114 +963,27 @@ var Drawer = /*#__PURE__*/function () {
|
|
|
854
963
|
;
|
|
855
964
|
|
|
856
965
|
_proto.switchToDefault = function switchToDefault$1(drawerKey) {
|
|
857
|
-
return switchToDefault(
|
|
966
|
+
return switchToDefault.call(this, drawerKey);
|
|
858
967
|
};
|
|
859
968
|
|
|
860
969
|
_proto.switchToModal = function switchToModal$1(drawerKey) {
|
|
861
|
-
return switchToModal(
|
|
970
|
+
return switchToModal.call(this, drawerKey);
|
|
862
971
|
}
|
|
863
972
|
/**
|
|
864
973
|
* Change state functionality
|
|
865
974
|
*/
|
|
866
975
|
;
|
|
867
976
|
|
|
868
|
-
_proto.toggle = function toggle(drawerKey) {
|
|
869
|
-
|
|
870
|
-
var _this2 = this;
|
|
871
|
-
|
|
872
|
-
var drawer = _this2.getDrawer(drawerKey);
|
|
873
|
-
|
|
874
|
-
if (!drawer) return Promise.resolve(_this2.drawerNotFound(drawerKey));
|
|
875
|
-
var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
|
|
876
|
-
|
|
877
|
-
if (isClosed) {
|
|
878
|
-
return Promise.resolve(_this2.open(drawer));
|
|
879
|
-
} else {
|
|
880
|
-
return Promise.resolve(_this2.close(drawer));
|
|
881
|
-
}
|
|
882
|
-
} catch (e) {
|
|
883
|
-
return Promise.reject(e);
|
|
884
|
-
}
|
|
977
|
+
_proto.toggle = function toggle$1(drawerKey) {
|
|
978
|
+
return toggle.call(this, drawerKey);
|
|
885
979
|
};
|
|
886
980
|
|
|
887
981
|
_proto.open = function open(drawerKey) {
|
|
888
|
-
|
|
889
|
-
var _this4 = this;
|
|
890
|
-
|
|
891
|
-
var drawer = _this4.getDrawer(drawerKey);
|
|
892
|
-
|
|
893
|
-
if (!drawer) return Promise.resolve(_this4.drawerNotFound(drawerKey));
|
|
894
|
-
|
|
895
|
-
if (!hasClass(drawer, _this4.settings.stateOpened)) {
|
|
896
|
-
_this4.working = true;
|
|
897
|
-
var isModal = hasClass(drawer, _this4.settings.classModal);
|
|
898
|
-
|
|
899
|
-
if (isModal) {
|
|
900
|
-
setOverflowHidden(true, _this4.settings.selectorOverflow);
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
return Promise.resolve(openTransition(drawer, _this4.settings)).then(function () {
|
|
904
|
-
_this4.stateSave(drawer);
|
|
905
|
-
|
|
906
|
-
if (isModal) {
|
|
907
|
-
_this4.focusTrap.init(drawer);
|
|
908
|
-
|
|
909
|
-
setInert(true, _this4.settings.selectorInert);
|
|
910
|
-
}
|
|
911
|
-
|
|
912
|
-
focusTarget(drawer, _this4.settings);
|
|
913
|
-
drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'opened', {
|
|
914
|
-
detail: _this4,
|
|
915
|
-
bubbles: true
|
|
916
|
-
}));
|
|
917
|
-
_this4.working = false;
|
|
918
|
-
return drawer;
|
|
919
|
-
});
|
|
920
|
-
} else {
|
|
921
|
-
focusTarget(drawer, _this4.settings);
|
|
922
|
-
return Promise.resolve(drawer);
|
|
923
|
-
}
|
|
924
|
-
} catch (e) {
|
|
925
|
-
return Promise.reject(e);
|
|
926
|
-
}
|
|
982
|
+
return open$2.call(this, drawerKey);
|
|
927
983
|
};
|
|
928
984
|
|
|
929
985
|
_proto.close = function close(drawerKey) {
|
|
930
|
-
|
|
931
|
-
var _this6 = this;
|
|
932
|
-
|
|
933
|
-
var drawer = _this6.getDrawer(drawerKey);
|
|
934
|
-
|
|
935
|
-
if (!drawer) return Promise.resolve(_this6.drawerNotFound(drawerKey));
|
|
936
|
-
|
|
937
|
-
if (hasClass(drawer, _this6.settings.stateOpened)) {
|
|
938
|
-
_this6.working = true;
|
|
939
|
-
|
|
940
|
-
if (hasClass(drawer, _this6.settings.classModal)) {
|
|
941
|
-
setInert(false, _this6.settings.selectorInert);
|
|
942
|
-
setOverflowHidden(false, _this6.settings.selectorOverflow);
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
return Promise.resolve(closeTransition(drawer, _this6.settings)).then(function () {
|
|
946
|
-
_this6.stateSave(drawer);
|
|
947
|
-
|
|
948
|
-
focusTrigger(_this6);
|
|
949
|
-
|
|
950
|
-
_this6.focusTrap.destroy();
|
|
951
|
-
|
|
952
|
-
drawer.dispatchEvent(new CustomEvent(_this6.settings.customEventPrefix + 'closed', {
|
|
953
|
-
detail: _this6,
|
|
954
|
-
bubbles: true
|
|
955
|
-
}));
|
|
956
|
-
_this6.working = false;
|
|
957
|
-
return drawer;
|
|
958
|
-
});
|
|
959
|
-
} else {
|
|
960
|
-
return Promise.resolve(drawer);
|
|
961
|
-
}
|
|
962
|
-
} catch (e) {
|
|
963
|
-
return Promise.reject(e);
|
|
964
|
-
}
|
|
986
|
+
return close$2.call(this, drawerKey);
|
|
965
987
|
};
|
|
966
988
|
|
|
967
989
|
return Drawer;
|
|
@@ -995,6 +1017,40 @@ var defaults$1 = {
|
|
|
995
1017
|
transition: true
|
|
996
1018
|
};
|
|
997
1019
|
|
|
1020
|
+
var close$1 = function close(returnFocus) {
|
|
1021
|
+
if (returnFocus === void 0) {
|
|
1022
|
+
returnFocus = true;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
try {
|
|
1026
|
+
var _this2 = this;
|
|
1027
|
+
|
|
1028
|
+
var modal = document.querySelector("[data-" + _this2.settings.dataModal + "]." + _this2.settings.stateOpened);
|
|
1029
|
+
|
|
1030
|
+
if (modal) {
|
|
1031
|
+
_this2.working = true;
|
|
1032
|
+
setInert(false, _this2.settings.selectorInert);
|
|
1033
|
+
setOverflowHidden(false, _this2.settings.selectorOverflow);
|
|
1034
|
+
return Promise.resolve(closeTransition(modal, _this2.settings)).then(function () {
|
|
1035
|
+
if (returnFocus) focusTrigger(_this2);
|
|
1036
|
+
|
|
1037
|
+
_this2.focusTrap.destroy();
|
|
1038
|
+
|
|
1039
|
+
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
|
|
1040
|
+
detail: _this2,
|
|
1041
|
+
bubbles: true
|
|
1042
|
+
}));
|
|
1043
|
+
_this2.working = false;
|
|
1044
|
+
return modal;
|
|
1045
|
+
});
|
|
1046
|
+
} else {
|
|
1047
|
+
return Promise.resolve(modal);
|
|
1048
|
+
}
|
|
1049
|
+
} catch (e) {
|
|
1050
|
+
return Promise.reject(e);
|
|
1051
|
+
}
|
|
1052
|
+
};
|
|
1053
|
+
|
|
998
1054
|
var handlerClick$1 = function handlerClick(event) {
|
|
999
1055
|
try {
|
|
1000
1056
|
var _temp3 = function _temp3(_result) {
|
|
@@ -1056,21 +1112,76 @@ function handlerKeydown$1(event) {
|
|
|
1056
1112
|
}
|
|
1057
1113
|
}
|
|
1058
1114
|
|
|
1059
|
-
function
|
|
1060
|
-
|
|
1115
|
+
function getModal(modalKey) {
|
|
1116
|
+
if (typeof modalKey !== 'string') return modalKey;
|
|
1117
|
+
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1118
|
+
}
|
|
1119
|
+
function modalNotFound(key) {
|
|
1120
|
+
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1121
|
+
}
|
|
1122
|
+
function moveModals(type, ref) {
|
|
1123
|
+
if (type === void 0) {
|
|
1124
|
+
type = this.settings.moveModals.type;
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
if (ref === void 0) {
|
|
1128
|
+
ref = this.settings.moveModals.ref;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1132
|
+
if (modals.length) moveElement(modals, type, ref);
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
function setInitialState() {
|
|
1136
|
+
var _this = this;
|
|
1137
|
+
|
|
1138
|
+
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1061
1139
|
modals.forEach(function (el) {
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
}
|
|
1140
|
+
// Remove opened state setup
|
|
1141
|
+
if (el.classList.contains(_this.settings.stateOpened)) {
|
|
1142
|
+
setInert(false, _this.settings.selectorInert);
|
|
1143
|
+
setOverflowHidden(false, _this.settings.selectorOverflow);
|
|
1144
|
+
focusTrigger(_this);
|
|
1068
1145
|
|
|
1069
|
-
|
|
1070
|
-
|
|
1146
|
+
_this.focusTrap.destroy();
|
|
1147
|
+
} // Remove all state classes and add the default state (closed)
|
|
1148
|
+
|
|
1149
|
+
|
|
1150
|
+
removeClass(el, _this.settings.stateOpened, _this.settings.stateOpening, _this.settings.stateClosing);
|
|
1151
|
+
addClass(el, _this.settings.stateClosed);
|
|
1071
1152
|
});
|
|
1072
1153
|
}
|
|
1073
1154
|
|
|
1155
|
+
var open$1 = function open(modalKey) {
|
|
1156
|
+
try {
|
|
1157
|
+
var _this2 = this;
|
|
1158
|
+
|
|
1159
|
+
var modal = getModal.call(_this2, modalKey);
|
|
1160
|
+
if (!modal) return Promise.resolve(modalNotFound(modalKey));
|
|
1161
|
+
|
|
1162
|
+
if (hasClass(modal, _this2.settings.stateClosed)) {
|
|
1163
|
+
_this2.working = true;
|
|
1164
|
+
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
1165
|
+
return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
|
|
1166
|
+
_this2.focusTrap.init(modal);
|
|
1167
|
+
|
|
1168
|
+
focusTarget(modal, _this2.settings);
|
|
1169
|
+
setInert(true, _this2.settings.selectorInert);
|
|
1170
|
+
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
1171
|
+
detail: _this2,
|
|
1172
|
+
bubbles: true
|
|
1173
|
+
}));
|
|
1174
|
+
_this2.working = false;
|
|
1175
|
+
return modal;
|
|
1176
|
+
});
|
|
1177
|
+
} else {
|
|
1178
|
+
return Promise.resolve(modal);
|
|
1179
|
+
}
|
|
1180
|
+
} catch (e) {
|
|
1181
|
+
return Promise.reject(e);
|
|
1182
|
+
}
|
|
1183
|
+
};
|
|
1184
|
+
|
|
1074
1185
|
var Modal = /*#__PURE__*/function () {
|
|
1075
1186
|
function Modal(options) {
|
|
1076
1187
|
this.defaults = defaults$1;
|
|
@@ -1092,13 +1203,12 @@ var Modal = /*#__PURE__*/function () {
|
|
|
1092
1203
|
|
|
1093
1204
|
if (options) this.settings = _extends({}, this.settings, options);
|
|
1094
1205
|
this.moveModals();
|
|
1206
|
+
this.setInitialState();
|
|
1095
1207
|
|
|
1096
1208
|
if (this.settings.setTabindex) {
|
|
1097
1209
|
this.setTabindex();
|
|
1098
1210
|
}
|
|
1099
1211
|
|
|
1100
|
-
this.setInitialState();
|
|
1101
|
-
|
|
1102
1212
|
if (this.settings.eventListeners) {
|
|
1103
1213
|
this.initEventListeners();
|
|
1104
1214
|
}
|
|
@@ -1132,36 +1242,20 @@ var Modal = /*#__PURE__*/function () {
|
|
|
1132
1242
|
*/
|
|
1133
1243
|
;
|
|
1134
1244
|
|
|
1135
|
-
_proto.getModal = function getModal(modalKey) {
|
|
1136
|
-
|
|
1137
|
-
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1138
|
-
};
|
|
1139
|
-
|
|
1140
|
-
_proto.modalNotFound = function modalNotFound(key) {
|
|
1141
|
-
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1245
|
+
_proto.getModal = function getModal$1(modalKey) {
|
|
1246
|
+
return getModal.call(this, modalKey);
|
|
1142
1247
|
};
|
|
1143
1248
|
|
|
1144
1249
|
_proto.setTabindex = function setTabindex$1() {
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
setTabindex(selectorTabindex);
|
|
1250
|
+
return setTabindex("\n [data-" + this.settings.dataModal + "]\n [data-" + this.settings.dataDialog + "]\n ");
|
|
1148
1251
|
};
|
|
1149
1252
|
|
|
1150
1253
|
_proto.setInitialState = function setInitialState$1() {
|
|
1151
|
-
setInitialState(this);
|
|
1254
|
+
return setInitialState.call(this);
|
|
1152
1255
|
};
|
|
1153
1256
|
|
|
1154
|
-
_proto.moveModals = function moveModals(type, ref) {
|
|
1155
|
-
|
|
1156
|
-
type = this.settings.moveModals.type;
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
if (ref === void 0) {
|
|
1160
|
-
ref = this.settings.moveModals.ref;
|
|
1161
|
-
}
|
|
1162
|
-
|
|
1163
|
-
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1164
|
-
if (modals.length) moveElement(modals, type, ref);
|
|
1257
|
+
_proto.moveModals = function moveModals$1(type, ref) {
|
|
1258
|
+
return moveModals.call(this, type, ref);
|
|
1165
1259
|
}
|
|
1166
1260
|
/**
|
|
1167
1261
|
* Change state functionality
|
|
@@ -1169,68 +1263,11 @@ var Modal = /*#__PURE__*/function () {
|
|
|
1169
1263
|
;
|
|
1170
1264
|
|
|
1171
1265
|
_proto.open = function open(modalKey) {
|
|
1172
|
-
|
|
1173
|
-
var _this2 = this;
|
|
1174
|
-
|
|
1175
|
-
var modal = _this2.getModal(modalKey);
|
|
1176
|
-
|
|
1177
|
-
if (!modal) return Promise.resolve(_this2.modalNotFound(modalKey));
|
|
1178
|
-
|
|
1179
|
-
if (hasClass(modal, _this2.settings.stateClosed)) {
|
|
1180
|
-
_this2.working = true;
|
|
1181
|
-
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
1182
|
-
return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
|
|
1183
|
-
_this2.focusTrap.init(modal);
|
|
1184
|
-
|
|
1185
|
-
focusTarget(modal, _this2.settings);
|
|
1186
|
-
setInert(true, _this2.settings.selectorInert);
|
|
1187
|
-
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
1188
|
-
detail: _this2,
|
|
1189
|
-
bubbles: true
|
|
1190
|
-
}));
|
|
1191
|
-
_this2.working = false;
|
|
1192
|
-
return modal;
|
|
1193
|
-
});
|
|
1194
|
-
} else {
|
|
1195
|
-
return Promise.resolve(modal);
|
|
1196
|
-
}
|
|
1197
|
-
} catch (e) {
|
|
1198
|
-
return Promise.reject(e);
|
|
1199
|
-
}
|
|
1266
|
+
return open$1.call(this, modalKey);
|
|
1200
1267
|
};
|
|
1201
1268
|
|
|
1202
1269
|
_proto.close = function close(returnFocus) {
|
|
1203
|
-
|
|
1204
|
-
returnFocus = true;
|
|
1205
|
-
}
|
|
1206
|
-
|
|
1207
|
-
try {
|
|
1208
|
-
var _this4 = this;
|
|
1209
|
-
|
|
1210
|
-
var modal = document.querySelector("[data-" + _this4.settings.dataModal + "]." + _this4.settings.stateOpened);
|
|
1211
|
-
|
|
1212
|
-
if (modal) {
|
|
1213
|
-
_this4.working = true;
|
|
1214
|
-
setInert(false, _this4.settings.selectorInert);
|
|
1215
|
-
setOverflowHidden(false, _this4.settings.selectorOverflow);
|
|
1216
|
-
return Promise.resolve(closeTransition(modal, _this4.settings)).then(function () {
|
|
1217
|
-
if (returnFocus) focusTrigger(_this4);
|
|
1218
|
-
|
|
1219
|
-
_this4.focusTrap.destroy();
|
|
1220
|
-
|
|
1221
|
-
modal.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'closed', {
|
|
1222
|
-
detail: _this4,
|
|
1223
|
-
bubbles: true
|
|
1224
|
-
}));
|
|
1225
|
-
_this4.working = false;
|
|
1226
|
-
return modal;
|
|
1227
|
-
});
|
|
1228
|
-
} else {
|
|
1229
|
-
return Promise.resolve(modal);
|
|
1230
|
-
}
|
|
1231
|
-
} catch (e) {
|
|
1232
|
-
return Promise.reject(e);
|
|
1233
|
-
}
|
|
1270
|
+
return close$1.call(this, returnFocus);
|
|
1234
1271
|
};
|
|
1235
1272
|
|
|
1236
1273
|
return Modal;
|
|
@@ -1252,9 +1289,9 @@ var defaults = {
|
|
|
1252
1289
|
placement: 'bottom-start'
|
|
1253
1290
|
};
|
|
1254
1291
|
|
|
1255
|
-
function
|
|
1292
|
+
function close(popover) {
|
|
1256
1293
|
// Update state class
|
|
1257
|
-
popover.target.classList.remove(
|
|
1294
|
+
popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
|
|
1258
1295
|
|
|
1259
1296
|
popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
|
|
1260
1297
|
|
|
@@ -1265,39 +1302,43 @@ function hide$2(popover, obj) {
|
|
|
1265
1302
|
}]
|
|
1266
1303
|
}); // Update collection status with new state
|
|
1267
1304
|
|
|
1268
|
-
var index =
|
|
1305
|
+
var index = this.collection.findIndex(function (item) {
|
|
1269
1306
|
return item.target === popover.target;
|
|
1270
1307
|
});
|
|
1271
|
-
|
|
1308
|
+
this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
|
|
1272
1309
|
|
|
1273
|
-
if (popover.trigger ===
|
|
1274
|
-
|
|
1310
|
+
if (popover.trigger === this.memory.trigger) {
|
|
1311
|
+
this.memory.trigger = null;
|
|
1275
1312
|
} // Return the popover
|
|
1276
1313
|
|
|
1277
1314
|
|
|
1278
1315
|
return popover;
|
|
1279
1316
|
}
|
|
1280
|
-
function
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1317
|
+
function closeAll() {
|
|
1318
|
+
var _this = this;
|
|
1319
|
+
|
|
1320
|
+
this.collection.forEach(function (popover) {
|
|
1321
|
+
if (popover.state === 'opened') {
|
|
1322
|
+
_this.close(popover);
|
|
1284
1323
|
}
|
|
1285
1324
|
}); // Return the collection
|
|
1286
1325
|
|
|
1287
|
-
return
|
|
1326
|
+
return this.collection;
|
|
1288
1327
|
}
|
|
1289
|
-
function
|
|
1290
|
-
|
|
1291
|
-
|
|
1328
|
+
function closeCheck(popover) {
|
|
1329
|
+
var _this2 = this;
|
|
1330
|
+
|
|
1331
|
+
// Only run closeCheck if provided popover is currently open
|
|
1332
|
+
if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
|
|
1292
1333
|
|
|
1293
1334
|
setTimeout(function () {
|
|
1294
1335
|
// Check if trigger or target are being hovered
|
|
1295
1336
|
var isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
|
|
1296
1337
|
|
|
1297
|
-
var isFocused = document.activeElement.closest("[data-" +
|
|
1338
|
+
var isFocused = document.activeElement.closest("[data-" + _this2.settings.dataPopover + "]") === popover.target || document.activeElement.closest("[data-" + _this2.settings.dataTrigger + "]") === popover.trigger; // Close if the trigger and target are not currently hovered or focused
|
|
1298
1339
|
|
|
1299
1340
|
if (!isHovered && !isFocused) {
|
|
1300
|
-
|
|
1341
|
+
_this2.close(popover);
|
|
1301
1342
|
} // Return the popover
|
|
1302
1343
|
|
|
1303
1344
|
|
|
@@ -1305,6 +1346,57 @@ function hideCheck(popover, obj) {
|
|
|
1305
1346
|
}, 1);
|
|
1306
1347
|
}
|
|
1307
1348
|
|
|
1349
|
+
function handlerClick(popover) {
|
|
1350
|
+
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
1351
|
+
this.close(popover);
|
|
1352
|
+
} else {
|
|
1353
|
+
this.memory.trigger = popover.trigger;
|
|
1354
|
+
this.open(popover);
|
|
1355
|
+
documentClick.call(this, popover);
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1358
|
+
function handlerKeydown(event) {
|
|
1359
|
+
var _this = this;
|
|
1360
|
+
|
|
1361
|
+
switch (event.key) {
|
|
1362
|
+
case 'Escape':
|
|
1363
|
+
if (this.memory.trigger) {
|
|
1364
|
+
this.memory.trigger.focus();
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
this.closeAll();
|
|
1368
|
+
return;
|
|
1369
|
+
|
|
1370
|
+
case 'Tab':
|
|
1371
|
+
this.collection.forEach(function (popover) {
|
|
1372
|
+
closeCheck.call(_this, popover);
|
|
1373
|
+
});
|
|
1374
|
+
return;
|
|
1375
|
+
|
|
1376
|
+
default:
|
|
1377
|
+
return;
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
function documentClick(popover) {
|
|
1381
|
+
var obj = this;
|
|
1382
|
+
document.addEventListener('click', function _f(event) {
|
|
1383
|
+
var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
|
|
1384
|
+
var match = result === popover.target || result === popover.trigger;
|
|
1385
|
+
|
|
1386
|
+
if (!match) {
|
|
1387
|
+
if (popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1388
|
+
obj.close(popover);
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
this.removeEventListener('click', _f);
|
|
1392
|
+
} else {
|
|
1393
|
+
if (!popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1394
|
+
this.removeEventListener('click', _f);
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1397
|
+
});
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1308
1400
|
function getConfig(el, settings) {
|
|
1309
1401
|
// Get the computed styles of the popover
|
|
1310
1402
|
var styles = getComputedStyle(el); // Setup the config obj with default values
|
|
@@ -1429,16 +1521,16 @@ function getPopover(trigger, settings) {
|
|
|
1429
1521
|
}
|
|
1430
1522
|
}
|
|
1431
1523
|
|
|
1432
|
-
function
|
|
1524
|
+
function open(popover) {
|
|
1433
1525
|
// Update state class
|
|
1434
|
-
popover.target.classList.add(
|
|
1526
|
+
popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
|
|
1435
1527
|
|
|
1436
1528
|
popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
|
|
1437
1529
|
|
|
1438
|
-
popover.config = getConfig(popover.target,
|
|
1530
|
+
popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
|
|
1439
1531
|
|
|
1440
1532
|
popover.popper.setOptions({
|
|
1441
|
-
placement: getData(popover.target,
|
|
1533
|
+
placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
|
|
1442
1534
|
modifiers: [{
|
|
1443
1535
|
name: 'eventListeners',
|
|
1444
1536
|
enabled: true
|
|
@@ -1447,64 +1539,14 @@ function show(popover, obj) {
|
|
|
1447
1539
|
|
|
1448
1540
|
popover.popper.update(); // Update collection status with new state
|
|
1449
1541
|
|
|
1450
|
-
var index =
|
|
1542
|
+
var index = this.collection.findIndex(function (item) {
|
|
1451
1543
|
return item.target === popover.target;
|
|
1452
1544
|
});
|
|
1453
|
-
|
|
1545
|
+
this.collection[index].state = 'opened'; // Return the popover
|
|
1454
1546
|
|
|
1455
1547
|
return popover;
|
|
1456
1548
|
}
|
|
1457
1549
|
|
|
1458
|
-
function handlerClick(popover) {
|
|
1459
|
-
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
1460
|
-
hide$2(popover, this);
|
|
1461
|
-
} else {
|
|
1462
|
-
this.memory.trigger = popover.trigger;
|
|
1463
|
-
show(popover, this);
|
|
1464
|
-
documentClick(popover, this);
|
|
1465
|
-
}
|
|
1466
|
-
}
|
|
1467
|
-
function handlerKeydown(event) {
|
|
1468
|
-
var _this = this;
|
|
1469
|
-
|
|
1470
|
-
switch (event.key) {
|
|
1471
|
-
case 'Escape':
|
|
1472
|
-
if (this.memory.trigger) {
|
|
1473
|
-
this.memory.trigger.focus();
|
|
1474
|
-
}
|
|
1475
|
-
|
|
1476
|
-
hideAll(this);
|
|
1477
|
-
return;
|
|
1478
|
-
|
|
1479
|
-
case 'Tab':
|
|
1480
|
-
this.collection.forEach(function (popover) {
|
|
1481
|
-
hideCheck(popover, _this);
|
|
1482
|
-
});
|
|
1483
|
-
return;
|
|
1484
|
-
|
|
1485
|
-
default:
|
|
1486
|
-
return;
|
|
1487
|
-
}
|
|
1488
|
-
}
|
|
1489
|
-
function documentClick(popover, obj) {
|
|
1490
|
-
document.addEventListener('click', function _f(event) {
|
|
1491
|
-
var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
|
|
1492
|
-
var match = result === popover.target || result === popover.trigger;
|
|
1493
|
-
|
|
1494
|
-
if (!match) {
|
|
1495
|
-
if (popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1496
|
-
hide$2(popover, obj);
|
|
1497
|
-
}
|
|
1498
|
-
|
|
1499
|
-
this.removeEventListener('click', _f);
|
|
1500
|
-
} else {
|
|
1501
|
-
if (!popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1502
|
-
this.removeEventListener('click', _f);
|
|
1503
|
-
}
|
|
1504
|
-
}
|
|
1505
|
-
});
|
|
1506
|
-
}
|
|
1507
|
-
|
|
1508
1550
|
var top = 'top';
|
|
1509
1551
|
var bottom = 'bottom';
|
|
1510
1552
|
var right = 'right';
|
|
@@ -3288,11 +3330,11 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
3288
3330
|
defaultModifiers: defaultModifiers
|
|
3289
3331
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
3290
3332
|
|
|
3291
|
-
function register(trigger, target
|
|
3333
|
+
function register(trigger, target) {
|
|
3292
3334
|
// If no target is passed
|
|
3293
3335
|
if (!target) {
|
|
3294
3336
|
// Try and get the target
|
|
3295
|
-
target = getPopover(trigger,
|
|
3337
|
+
target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
|
|
3296
3338
|
|
|
3297
3339
|
if (!target) {
|
|
3298
3340
|
console.error('No popover associated with the provided trigger:', trigger);
|
|
@@ -3301,7 +3343,7 @@ function register(trigger, target, obj) {
|
|
|
3301
3343
|
} // Check if this item has already been registered in the collection
|
|
3302
3344
|
|
|
3303
3345
|
|
|
3304
|
-
var index =
|
|
3346
|
+
var index = this.collection.findIndex(function (item) {
|
|
3305
3347
|
return item.trigger === trigger && item.target === target;
|
|
3306
3348
|
}); // Initiate popover variable
|
|
3307
3349
|
|
|
@@ -3309,45 +3351,45 @@ function register(trigger, target, obj) {
|
|
|
3309
3351
|
|
|
3310
3352
|
if (index >= 0) {
|
|
3311
3353
|
// Set popover as item from collection
|
|
3312
|
-
popover =
|
|
3354
|
+
popover = this.collection[index];
|
|
3313
3355
|
} else {
|
|
3314
3356
|
// Create popper instance
|
|
3315
3357
|
var popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
|
|
3316
3358
|
|
|
3317
3359
|
popover = {
|
|
3318
|
-
state: '
|
|
3360
|
+
state: 'closed',
|
|
3319
3361
|
trigger: trigger,
|
|
3320
3362
|
target: target,
|
|
3321
3363
|
popper: popperInstance,
|
|
3322
|
-
config: getConfig(target,
|
|
3364
|
+
config: getConfig(target, this.settings)
|
|
3323
3365
|
}; // Add item to collection
|
|
3324
3366
|
|
|
3325
|
-
|
|
3367
|
+
this.collection.push(popover);
|
|
3326
3368
|
} // Setup event listeners
|
|
3327
3369
|
|
|
3328
3370
|
|
|
3329
|
-
registerEventListeners(
|
|
3371
|
+
registerEventListeners.call(this, popover); // Set initial state of popover
|
|
3330
3372
|
|
|
3331
|
-
if (popover.target.classList.contains(
|
|
3332
|
-
|
|
3333
|
-
documentClick(
|
|
3373
|
+
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
3374
|
+
this.open(popover);
|
|
3375
|
+
documentClick.call(this, popover);
|
|
3334
3376
|
} else {
|
|
3335
|
-
|
|
3377
|
+
this.close(popover);
|
|
3336
3378
|
} // Return the popover object
|
|
3337
3379
|
|
|
3338
3380
|
|
|
3339
3381
|
return popover;
|
|
3340
3382
|
}
|
|
3341
|
-
function deregister(popover
|
|
3383
|
+
function deregister(popover) {
|
|
3342
3384
|
// Check if this item has been registered in the collection
|
|
3343
|
-
var index =
|
|
3385
|
+
var index = this.collection.findIndex(function (item) {
|
|
3344
3386
|
return item.trigger === popover.trigger && item.target === popover.target;
|
|
3345
3387
|
}); // If the item exists in the collection
|
|
3346
3388
|
|
|
3347
3389
|
if (index >= 0) {
|
|
3348
|
-
//
|
|
3349
|
-
if (popover.state === '
|
|
3350
|
-
|
|
3390
|
+
// Close the popover
|
|
3391
|
+
if (popover.state === 'opened') {
|
|
3392
|
+
this.close(popover);
|
|
3351
3393
|
} // Clean up the popper instance
|
|
3352
3394
|
|
|
3353
3395
|
|
|
@@ -3355,28 +3397,28 @@ function deregister(popover, obj) {
|
|
|
3355
3397
|
|
|
3356
3398
|
deregisterEventListeners(popover); // Remove item from collection
|
|
3357
3399
|
|
|
3358
|
-
|
|
3400
|
+
this.collection.splice(index, 1);
|
|
3359
3401
|
} // Return the new collection
|
|
3360
3402
|
|
|
3361
3403
|
|
|
3362
|
-
return
|
|
3404
|
+
return this.collection;
|
|
3363
3405
|
}
|
|
3364
|
-
function registerEventListeners(popover
|
|
3406
|
+
function registerEventListeners(popover) {
|
|
3365
3407
|
// If event listeners aren't already setup
|
|
3366
3408
|
if (!popover.__eventListeners) {
|
|
3367
3409
|
// Add event listeners based on event type
|
|
3368
|
-
var eventType = getData(popover.target,
|
|
3410
|
+
var eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
|
|
3369
3411
|
|
|
3370
3412
|
if (eventType === 'hover') {
|
|
3371
3413
|
// Setup event listeners object for hover
|
|
3372
3414
|
popover.__eventListeners = [{
|
|
3373
3415
|
el: ['trigger'],
|
|
3374
3416
|
type: ['mouseenter', 'focus'],
|
|
3375
|
-
listener:
|
|
3417
|
+
listener: open.bind(this, popover)
|
|
3376
3418
|
}, {
|
|
3377
3419
|
el: ['trigger', 'target'],
|
|
3378
3420
|
type: ['mouseleave', 'focusout'],
|
|
3379
|
-
listener:
|
|
3421
|
+
listener: closeCheck.bind(this, popover)
|
|
3380
3422
|
}]; // Loop through listeners and apply to appropriate elements
|
|
3381
3423
|
|
|
3382
3424
|
popover.__eventListeners.forEach(function (evObj) {
|
|
@@ -3391,7 +3433,7 @@ function registerEventListeners(popover, obj) {
|
|
|
3391
3433
|
popover.__eventListeners = [{
|
|
3392
3434
|
el: ['trigger'],
|
|
3393
3435
|
type: ['click'],
|
|
3394
|
-
listener: handlerClick.bind(
|
|
3436
|
+
listener: handlerClick.bind(this, popover)
|
|
3395
3437
|
}]; // Loop through listeners and apply to appropriate elements
|
|
3396
3438
|
|
|
3397
3439
|
popover.__eventListeners.forEach(function (evObj) {
|
|
@@ -3426,24 +3468,26 @@ function deregisterEventListeners(popover) {
|
|
|
3426
3468
|
|
|
3427
3469
|
return popover;
|
|
3428
3470
|
}
|
|
3429
|
-
function registerCollection(
|
|
3471
|
+
function registerCollection() {
|
|
3472
|
+
var _this = this;
|
|
3473
|
+
|
|
3430
3474
|
// Get all the triggers
|
|
3431
|
-
var triggers = document.querySelectorAll("[data-" +
|
|
3475
|
+
var triggers = document.querySelectorAll("[data-" + this.settings.dataTrigger + "]");
|
|
3432
3476
|
triggers.forEach(function (trigger) {
|
|
3433
3477
|
// Register the popover and save to collection array
|
|
3434
|
-
register(trigger, false
|
|
3478
|
+
_this.register(trigger, false);
|
|
3435
3479
|
}); // Return the popover collection
|
|
3436
3480
|
|
|
3437
|
-
return
|
|
3481
|
+
return this.collection;
|
|
3438
3482
|
}
|
|
3439
|
-
function deregisterCollection(
|
|
3483
|
+
function deregisterCollection() {
|
|
3440
3484
|
// Loop through all items within the collection and pass them to deregister()
|
|
3441
|
-
while (
|
|
3442
|
-
deregister(
|
|
3485
|
+
while (this.collection.length > 0) {
|
|
3486
|
+
this.deregister(this.collection[0]);
|
|
3443
3487
|
} // Return the popover collection
|
|
3444
3488
|
|
|
3445
3489
|
|
|
3446
|
-
return
|
|
3490
|
+
return this.collection;
|
|
3447
3491
|
}
|
|
3448
3492
|
|
|
3449
3493
|
var Popover = /*#__PURE__*/function () {
|
|
@@ -3468,8 +3512,7 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3468
3512
|
// Update settings with passed options
|
|
3469
3513
|
if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
|
|
3470
3514
|
|
|
3471
|
-
registerCollection(
|
|
3472
|
-
|
|
3515
|
+
this.registerCollection(); // If eventListeners is enabled
|
|
3473
3516
|
|
|
3474
3517
|
if (this.settings.eventListeners) {
|
|
3475
3518
|
// Pass false to initEventListeners() since registerCollection()
|
|
@@ -3480,8 +3523,7 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3480
3523
|
|
|
3481
3524
|
_proto.destroy = function destroy() {
|
|
3482
3525
|
// Deregister all popovers from collection
|
|
3483
|
-
deregisterCollection(
|
|
3484
|
-
|
|
3526
|
+
this.deregisterCollection(); // If eventListeners is enabled
|
|
3485
3527
|
|
|
3486
3528
|
if (this.settings.eventListeners) {
|
|
3487
3529
|
// Pass false to destroyEventListeners() since deregisterCollection()
|
|
@@ -3504,7 +3546,7 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3504
3546
|
if (processCollection) {
|
|
3505
3547
|
// Loop through collection and setup event listeners
|
|
3506
3548
|
this.collection.forEach(function (popover) {
|
|
3507
|
-
registerEventListeners(
|
|
3549
|
+
registerEventListeners.call(_this, popover);
|
|
3508
3550
|
});
|
|
3509
3551
|
} // Add keydown global event listener
|
|
3510
3552
|
|
|
@@ -3537,35 +3579,35 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3537
3579
|
target = false;
|
|
3538
3580
|
}
|
|
3539
3581
|
|
|
3540
|
-
return register(trigger, target
|
|
3582
|
+
return register.call(this, trigger, target);
|
|
3541
3583
|
};
|
|
3542
3584
|
|
|
3543
3585
|
_proto.deregister = function deregister$1(popover) {
|
|
3544
|
-
return deregister(
|
|
3586
|
+
return deregister.call(this, popover);
|
|
3545
3587
|
};
|
|
3546
3588
|
|
|
3547
3589
|
_proto.registerCollection = function registerCollection$1() {
|
|
3548
|
-
return registerCollection(this);
|
|
3590
|
+
return registerCollection.call(this);
|
|
3549
3591
|
};
|
|
3550
3592
|
|
|
3551
3593
|
_proto.deregisterCollection = function deregisterCollection$1() {
|
|
3552
|
-
return deregisterCollection(this);
|
|
3594
|
+
return deregisterCollection.call(this);
|
|
3553
3595
|
}
|
|
3554
3596
|
/**
|
|
3555
3597
|
* Change state functionality
|
|
3556
3598
|
*/
|
|
3557
3599
|
;
|
|
3558
3600
|
|
|
3559
|
-
_proto.
|
|
3560
|
-
return
|
|
3601
|
+
_proto.open = function open$1(popover) {
|
|
3602
|
+
return open.call(this, popover);
|
|
3561
3603
|
};
|
|
3562
3604
|
|
|
3563
|
-
_proto.
|
|
3564
|
-
return
|
|
3605
|
+
_proto.close = function close$1(popover) {
|
|
3606
|
+
return close.call(this, popover);
|
|
3565
3607
|
};
|
|
3566
3608
|
|
|
3567
|
-
_proto.
|
|
3568
|
-
return
|
|
3609
|
+
_proto.closeAll = function closeAll$1() {
|
|
3610
|
+
return closeAll.call(this);
|
|
3569
3611
|
};
|
|
3570
3612
|
|
|
3571
3613
|
return Popover;
|