vrembem 1.38.0 → 1.40.2
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 +441 -358
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +441 -358
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.js +360 -293
- package/dev/scripts.modern.js.map +1 -1
- package/dev/scripts.umd.js +441 -358
- package/dev/scripts.umd.js.map +1 -1
- package/dev/styles.css +25 -17
- 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 +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +26 -26
package/dev/scripts.umd.js
CHANGED
|
@@ -356,14 +356,6 @@
|
|
|
356
356
|
});
|
|
357
357
|
};
|
|
358
358
|
|
|
359
|
-
var breakpoints = {
|
|
360
|
-
xs: '480px',
|
|
361
|
-
sm: '620px',
|
|
362
|
-
md: '760px',
|
|
363
|
-
lg: '990px',
|
|
364
|
-
xl: '1380px'
|
|
365
|
-
};
|
|
366
|
-
|
|
367
359
|
var index = {
|
|
368
360
|
__proto__: null,
|
|
369
361
|
setInert: setInert,
|
|
@@ -381,8 +373,7 @@
|
|
|
381
373
|
removeClass: removeClass,
|
|
382
374
|
toggleClass: toggleClass,
|
|
383
375
|
openTransition: openTransition,
|
|
384
|
-
closeTransition: closeTransition
|
|
385
|
-
breakpoints: breakpoints
|
|
376
|
+
closeTransition: closeTransition
|
|
386
377
|
};
|
|
387
378
|
|
|
388
379
|
function _extends() {
|
|
@@ -500,7 +491,7 @@
|
|
|
500
491
|
selectorInert: null,
|
|
501
492
|
selectorOverflow: null,
|
|
502
493
|
// Feature toggles
|
|
503
|
-
breakpoints:
|
|
494
|
+
breakpoints: null,
|
|
504
495
|
customEventPrefix: 'drawer:',
|
|
505
496
|
eventListeners: true,
|
|
506
497
|
stateSave: true,
|
|
@@ -509,59 +500,11 @@
|
|
|
509
500
|
transition: true
|
|
510
501
|
};
|
|
511
502
|
|
|
512
|
-
var switchToDefault = function switchToDefault(drawerKey, obj) {
|
|
513
|
-
try {
|
|
514
|
-
// Initial guards
|
|
515
|
-
var drawer = obj.getDrawer(drawerKey);
|
|
516
|
-
if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
|
|
517
|
-
if (!hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Tear down modal state
|
|
518
|
-
|
|
519
|
-
setInert(false, obj.settings.selectorInert);
|
|
520
|
-
setOverflowHidden(false, obj.settings.selectorOverflow);
|
|
521
|
-
removeClass(drawer, obj.settings.classModal);
|
|
522
|
-
obj.focusTrap.destroy(); // Restore drawers saved state
|
|
523
|
-
|
|
524
|
-
drawerKey = drawer.getAttribute("data-" + obj.settings.dataDrawer);
|
|
525
|
-
var drawerState = obj.state[drawerKey];
|
|
526
|
-
|
|
527
|
-
if (drawerState == obj.settings.stateOpened) {
|
|
528
|
-
addClass(drawer, obj.settings.stateOpened);
|
|
529
|
-
removeClass(drawer, obj.settings.stateClosed);
|
|
530
|
-
} // Dispatch custom event
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toDefault', {
|
|
534
|
-
bubbles: true
|
|
535
|
-
}));
|
|
536
|
-
return Promise.resolve(drawer);
|
|
537
|
-
} catch (e) {
|
|
538
|
-
return Promise.reject(e);
|
|
539
|
-
}
|
|
540
|
-
};
|
|
541
|
-
var switchToModal = function switchToModal(drawerKey, obj) {
|
|
542
|
-
try {
|
|
543
|
-
// Initial guards
|
|
544
|
-
var drawer = obj.getDrawer(drawerKey);
|
|
545
|
-
if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
|
|
546
|
-
if (hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Enable modal state
|
|
547
|
-
|
|
548
|
-
addClass(drawer, obj.settings.classModal);
|
|
549
|
-
addClass(drawer, obj.settings.stateClosed);
|
|
550
|
-
removeClass(drawer, obj.settings.stateOpened); // Dispatch custom event
|
|
551
|
-
|
|
552
|
-
drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toModal', {
|
|
553
|
-
bubbles: true
|
|
554
|
-
}));
|
|
555
|
-
return Promise.resolve(drawer);
|
|
556
|
-
} catch (e) {
|
|
557
|
-
return Promise.reject(e);
|
|
558
|
-
}
|
|
559
|
-
};
|
|
560
|
-
|
|
561
503
|
var Breakpoint = /*#__PURE__*/function () {
|
|
562
504
|
function Breakpoint(parent) {
|
|
563
505
|
this.mediaQueryLists = [];
|
|
564
506
|
this.parent = parent;
|
|
507
|
+
this.prefix = this.getVariablePrefix();
|
|
565
508
|
this.__check = this.check.bind(this);
|
|
566
509
|
}
|
|
567
510
|
|
|
@@ -574,7 +517,9 @@
|
|
|
574
517
|
drawers.forEach(function (drawer) {
|
|
575
518
|
var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
|
|
576
519
|
var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
|
|
577
|
-
|
|
520
|
+
|
|
521
|
+
var bp = _this.getBreakpoint(key);
|
|
522
|
+
|
|
578
523
|
var mql = window.matchMedia('(min-width:' + bp + ')');
|
|
579
524
|
|
|
580
525
|
_this.match(mql, drawer);
|
|
@@ -624,15 +569,80 @@
|
|
|
624
569
|
|
|
625
570
|
_proto.match = function match(mql, drawer) {
|
|
626
571
|
if (mql.matches) {
|
|
627
|
-
switchToDefault(drawer
|
|
572
|
+
this.parent.switchToDefault(drawer);
|
|
628
573
|
} else {
|
|
629
|
-
switchToModal(drawer
|
|
574
|
+
this.parent.switchToModal(drawer);
|
|
630
575
|
}
|
|
631
576
|
};
|
|
632
577
|
|
|
578
|
+
_proto.getBreakpoint = function getBreakpoint(key) {
|
|
579
|
+
var breakpoint = key;
|
|
580
|
+
|
|
581
|
+
if (this.parent.settings.breakpoints && this.parent.settings.breakpoints[key]) {
|
|
582
|
+
breakpoint = this.parent.settings.breakpoints[key];
|
|
583
|
+
} else if (getComputedStyle(document.body).getPropertyValue(this.prefix + key)) {
|
|
584
|
+
breakpoint = getComputedStyle(document.body).getPropertyValue(this.prefix + key);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
return breakpoint;
|
|
588
|
+
};
|
|
589
|
+
|
|
590
|
+
_proto.getVariablePrefix = function getVariablePrefix() {
|
|
591
|
+
var prefix = '--';
|
|
592
|
+
prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
|
|
593
|
+
prefix += 'breakpoint-';
|
|
594
|
+
return prefix;
|
|
595
|
+
};
|
|
596
|
+
|
|
633
597
|
return Breakpoint;
|
|
634
598
|
}();
|
|
635
599
|
|
|
600
|
+
function getDrawer(drawerKey) {
|
|
601
|
+
if (typeof drawerKey !== 'string') return drawerKey;
|
|
602
|
+
return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
|
|
603
|
+
}
|
|
604
|
+
function drawerNotFound(key) {
|
|
605
|
+
return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
var close$2 = function close(drawerKey) {
|
|
609
|
+
try {
|
|
610
|
+
var _this2 = this;
|
|
611
|
+
|
|
612
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
613
|
+
|
|
614
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
615
|
+
|
|
616
|
+
if (hasClass(drawer, _this2.settings.stateOpened)) {
|
|
617
|
+
_this2.working = true;
|
|
618
|
+
|
|
619
|
+
if (hasClass(drawer, _this2.settings.classModal)) {
|
|
620
|
+
setInert(false, _this2.settings.selectorInert);
|
|
621
|
+
setOverflowHidden(false, _this2.settings.selectorOverflow);
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
return Promise.resolve(closeTransition(drawer, _this2.settings)).then(function () {
|
|
625
|
+
_this2.stateSave(drawer);
|
|
626
|
+
|
|
627
|
+
focusTrigger(_this2);
|
|
628
|
+
|
|
629
|
+
_this2.focusTrap.destroy();
|
|
630
|
+
|
|
631
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
|
|
632
|
+
detail: _this2,
|
|
633
|
+
bubbles: true
|
|
634
|
+
}));
|
|
635
|
+
_this2.working = false;
|
|
636
|
+
return drawer;
|
|
637
|
+
});
|
|
638
|
+
} else {
|
|
639
|
+
return Promise.resolve(drawer);
|
|
640
|
+
}
|
|
641
|
+
} catch (e) {
|
|
642
|
+
return Promise.reject(e);
|
|
643
|
+
}
|
|
644
|
+
};
|
|
645
|
+
|
|
636
646
|
function handlerClick$2(event) {
|
|
637
647
|
// Working catch
|
|
638
648
|
if (this.working) return; // Toggle data trigger
|
|
@@ -696,6 +706,48 @@
|
|
|
696
706
|
}
|
|
697
707
|
}
|
|
698
708
|
|
|
709
|
+
var open$2 = function open(drawerKey) {
|
|
710
|
+
try {
|
|
711
|
+
var _this2 = this;
|
|
712
|
+
|
|
713
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
714
|
+
|
|
715
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
716
|
+
|
|
717
|
+
if (!hasClass(drawer, _this2.settings.stateOpened)) {
|
|
718
|
+
_this2.working = true;
|
|
719
|
+
var isModal = hasClass(drawer, _this2.settings.classModal);
|
|
720
|
+
|
|
721
|
+
if (isModal) {
|
|
722
|
+
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
return Promise.resolve(openTransition(drawer, _this2.settings)).then(function () {
|
|
726
|
+
_this2.stateSave(drawer);
|
|
727
|
+
|
|
728
|
+
if (isModal) {
|
|
729
|
+
_this2.focusTrap.init(drawer);
|
|
730
|
+
|
|
731
|
+
setInert(true, _this2.settings.selectorInert);
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
focusTarget(drawer, _this2.settings);
|
|
735
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
736
|
+
detail: _this2,
|
|
737
|
+
bubbles: true
|
|
738
|
+
}));
|
|
739
|
+
_this2.working = false;
|
|
740
|
+
return drawer;
|
|
741
|
+
});
|
|
742
|
+
} else {
|
|
743
|
+
focusTarget(drawer, _this2.settings);
|
|
744
|
+
return Promise.resolve(drawer);
|
|
745
|
+
}
|
|
746
|
+
} catch (e) {
|
|
747
|
+
return Promise.reject(e);
|
|
748
|
+
}
|
|
749
|
+
};
|
|
750
|
+
|
|
699
751
|
function stateSet(settings) {
|
|
700
752
|
// If save state is disabled
|
|
701
753
|
if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
|
|
@@ -740,6 +792,82 @@
|
|
|
740
792
|
return {};
|
|
741
793
|
}
|
|
742
794
|
|
|
795
|
+
var switchToDefault = function switchToDefault(drawerKey) {
|
|
796
|
+
try {
|
|
797
|
+
var _this4 = this;
|
|
798
|
+
|
|
799
|
+
// Initial guards
|
|
800
|
+
var drawer = _this4.getDrawer(drawerKey);
|
|
801
|
+
|
|
802
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
803
|
+
if (!hasClass(drawer, _this4.settings.classModal)) return Promise.resolve(); // Tear down modal state
|
|
804
|
+
|
|
805
|
+
setInert(false, _this4.settings.selectorInert);
|
|
806
|
+
setOverflowHidden(false, _this4.settings.selectorOverflow);
|
|
807
|
+
removeClass(drawer, _this4.settings.classModal);
|
|
808
|
+
|
|
809
|
+
_this4.focusTrap.destroy(); // Restore drawers saved state
|
|
810
|
+
|
|
811
|
+
|
|
812
|
+
drawerKey = drawer.getAttribute("data-" + _this4.settings.dataDrawer);
|
|
813
|
+
var drawerState = _this4.state[drawerKey];
|
|
814
|
+
|
|
815
|
+
if (drawerState == _this4.settings.stateOpened) {
|
|
816
|
+
addClass(drawer, _this4.settings.stateOpened);
|
|
817
|
+
removeClass(drawer, _this4.settings.stateClosed);
|
|
818
|
+
} // Dispatch custom event
|
|
819
|
+
|
|
820
|
+
|
|
821
|
+
drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'toDefault', {
|
|
822
|
+
bubbles: true
|
|
823
|
+
}));
|
|
824
|
+
return Promise.resolve(drawer);
|
|
825
|
+
} catch (e) {
|
|
826
|
+
return Promise.reject(e);
|
|
827
|
+
}
|
|
828
|
+
};
|
|
829
|
+
var switchToModal = function switchToModal(drawerKey) {
|
|
830
|
+
try {
|
|
831
|
+
var _this2 = this;
|
|
832
|
+
|
|
833
|
+
// Initial guards
|
|
834
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
835
|
+
|
|
836
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
837
|
+
if (hasClass(drawer, _this2.settings.classModal)) return Promise.resolve(); // Enable modal state
|
|
838
|
+
|
|
839
|
+
addClass(drawer, _this2.settings.classModal);
|
|
840
|
+
addClass(drawer, _this2.settings.stateClosed);
|
|
841
|
+
removeClass(drawer, _this2.settings.stateOpened); // Dispatch custom event
|
|
842
|
+
|
|
843
|
+
drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'toModal', {
|
|
844
|
+
bubbles: true
|
|
845
|
+
}));
|
|
846
|
+
return Promise.resolve(drawer);
|
|
847
|
+
} catch (e) {
|
|
848
|
+
return Promise.reject(e);
|
|
849
|
+
}
|
|
850
|
+
};
|
|
851
|
+
|
|
852
|
+
var toggle = function toggle(drawerKey) {
|
|
853
|
+
try {
|
|
854
|
+
var _this2 = this;
|
|
855
|
+
|
|
856
|
+
var drawer = _this2.getDrawer(drawerKey);
|
|
857
|
+
|
|
858
|
+
if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
|
|
859
|
+
var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
|
|
860
|
+
|
|
861
|
+
if (isClosed) {
|
|
862
|
+
return Promise.resolve(_this2.open(drawer));
|
|
863
|
+
} else {
|
|
864
|
+
return Promise.resolve(_this2.close(drawer));
|
|
865
|
+
}
|
|
866
|
+
} catch (e) {
|
|
867
|
+
return Promise.reject(e);
|
|
868
|
+
}
|
|
869
|
+
};
|
|
870
|
+
|
|
743
871
|
var Drawer = /*#__PURE__*/function () {
|
|
744
872
|
function Drawer(options) {
|
|
745
873
|
this.defaults = defaults$2;
|
|
@@ -806,19 +934,12 @@
|
|
|
806
934
|
*/
|
|
807
935
|
;
|
|
808
936
|
|
|
809
|
-
_proto.getDrawer = function getDrawer(drawerKey) {
|
|
810
|
-
|
|
811
|
-
return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
|
|
812
|
-
};
|
|
813
|
-
|
|
814
|
-
_proto.drawerNotFound = function drawerNotFound(key) {
|
|
815
|
-
return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
|
|
937
|
+
_proto.getDrawer = function getDrawer$1(drawerKey) {
|
|
938
|
+
return getDrawer.call(this, drawerKey);
|
|
816
939
|
};
|
|
817
940
|
|
|
818
941
|
_proto.setTabindex = function setTabindex$1() {
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
setTabindex(selectorTabindex);
|
|
942
|
+
return setTabindex("\n [data-" + this.settings.dataDrawer + "]\n [data-" + this.settings.dataDialog + "]\n ");
|
|
822
943
|
}
|
|
823
944
|
/**
|
|
824
945
|
* Save state functionality
|
|
@@ -846,114 +967,27 @@
|
|
|
846
967
|
;
|
|
847
968
|
|
|
848
969
|
_proto.switchToDefault = function switchToDefault$1(drawerKey) {
|
|
849
|
-
return switchToDefault(
|
|
970
|
+
return switchToDefault.call(this, drawerKey);
|
|
850
971
|
};
|
|
851
972
|
|
|
852
973
|
_proto.switchToModal = function switchToModal$1(drawerKey) {
|
|
853
|
-
return switchToModal(
|
|
974
|
+
return switchToModal.call(this, drawerKey);
|
|
854
975
|
}
|
|
855
976
|
/**
|
|
856
977
|
* Change state functionality
|
|
857
978
|
*/
|
|
858
979
|
;
|
|
859
980
|
|
|
860
|
-
_proto.toggle = function toggle(drawerKey) {
|
|
861
|
-
|
|
862
|
-
var _this2 = this;
|
|
863
|
-
|
|
864
|
-
var drawer = _this2.getDrawer(drawerKey);
|
|
865
|
-
|
|
866
|
-
if (!drawer) return Promise.resolve(_this2.drawerNotFound(drawerKey));
|
|
867
|
-
var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
|
|
868
|
-
|
|
869
|
-
if (isClosed) {
|
|
870
|
-
return Promise.resolve(_this2.open(drawer));
|
|
871
|
-
} else {
|
|
872
|
-
return Promise.resolve(_this2.close(drawer));
|
|
873
|
-
}
|
|
874
|
-
} catch (e) {
|
|
875
|
-
return Promise.reject(e);
|
|
876
|
-
}
|
|
981
|
+
_proto.toggle = function toggle$1(drawerKey) {
|
|
982
|
+
return toggle.call(this, drawerKey);
|
|
877
983
|
};
|
|
878
984
|
|
|
879
985
|
_proto.open = function open(drawerKey) {
|
|
880
|
-
|
|
881
|
-
var _this4 = this;
|
|
882
|
-
|
|
883
|
-
var drawer = _this4.getDrawer(drawerKey);
|
|
884
|
-
|
|
885
|
-
if (!drawer) return Promise.resolve(_this4.drawerNotFound(drawerKey));
|
|
886
|
-
|
|
887
|
-
if (!hasClass(drawer, _this4.settings.stateOpened)) {
|
|
888
|
-
_this4.working = true;
|
|
889
|
-
var isModal = hasClass(drawer, _this4.settings.classModal);
|
|
890
|
-
|
|
891
|
-
if (isModal) {
|
|
892
|
-
setOverflowHidden(true, _this4.settings.selectorOverflow);
|
|
893
|
-
}
|
|
894
|
-
|
|
895
|
-
return Promise.resolve(openTransition(drawer, _this4.settings)).then(function () {
|
|
896
|
-
_this4.stateSave(drawer);
|
|
897
|
-
|
|
898
|
-
if (isModal) {
|
|
899
|
-
_this4.focusTrap.init(drawer);
|
|
900
|
-
|
|
901
|
-
setInert(true, _this4.settings.selectorInert);
|
|
902
|
-
}
|
|
903
|
-
|
|
904
|
-
focusTarget(drawer, _this4.settings);
|
|
905
|
-
drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'opened', {
|
|
906
|
-
detail: _this4,
|
|
907
|
-
bubbles: true
|
|
908
|
-
}));
|
|
909
|
-
_this4.working = false;
|
|
910
|
-
return drawer;
|
|
911
|
-
});
|
|
912
|
-
} else {
|
|
913
|
-
focusTarget(drawer, _this4.settings);
|
|
914
|
-
return Promise.resolve(drawer);
|
|
915
|
-
}
|
|
916
|
-
} catch (e) {
|
|
917
|
-
return Promise.reject(e);
|
|
918
|
-
}
|
|
986
|
+
return open$2.call(this, drawerKey);
|
|
919
987
|
};
|
|
920
988
|
|
|
921
989
|
_proto.close = function close(drawerKey) {
|
|
922
|
-
|
|
923
|
-
var _this6 = this;
|
|
924
|
-
|
|
925
|
-
var drawer = _this6.getDrawer(drawerKey);
|
|
926
|
-
|
|
927
|
-
if (!drawer) return Promise.resolve(_this6.drawerNotFound(drawerKey));
|
|
928
|
-
|
|
929
|
-
if (hasClass(drawer, _this6.settings.stateOpened)) {
|
|
930
|
-
_this6.working = true;
|
|
931
|
-
|
|
932
|
-
if (hasClass(drawer, _this6.settings.classModal)) {
|
|
933
|
-
setInert(false, _this6.settings.selectorInert);
|
|
934
|
-
setOverflowHidden(false, _this6.settings.selectorOverflow);
|
|
935
|
-
}
|
|
936
|
-
|
|
937
|
-
return Promise.resolve(closeTransition(drawer, _this6.settings)).then(function () {
|
|
938
|
-
_this6.stateSave(drawer);
|
|
939
|
-
|
|
940
|
-
focusTrigger(_this6);
|
|
941
|
-
|
|
942
|
-
_this6.focusTrap.destroy();
|
|
943
|
-
|
|
944
|
-
drawer.dispatchEvent(new CustomEvent(_this6.settings.customEventPrefix + 'closed', {
|
|
945
|
-
detail: _this6,
|
|
946
|
-
bubbles: true
|
|
947
|
-
}));
|
|
948
|
-
_this6.working = false;
|
|
949
|
-
return drawer;
|
|
950
|
-
});
|
|
951
|
-
} else {
|
|
952
|
-
return Promise.resolve(drawer);
|
|
953
|
-
}
|
|
954
|
-
} catch (e) {
|
|
955
|
-
return Promise.reject(e);
|
|
956
|
-
}
|
|
990
|
+
return close$2.call(this, drawerKey);
|
|
957
991
|
};
|
|
958
992
|
|
|
959
993
|
return Drawer;
|
|
@@ -987,6 +1021,40 @@
|
|
|
987
1021
|
transition: true
|
|
988
1022
|
};
|
|
989
1023
|
|
|
1024
|
+
var close$1 = function close(returnFocus) {
|
|
1025
|
+
if (returnFocus === void 0) {
|
|
1026
|
+
returnFocus = true;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
try {
|
|
1030
|
+
var _this2 = this;
|
|
1031
|
+
|
|
1032
|
+
var modal = document.querySelector("[data-" + _this2.settings.dataModal + "]." + _this2.settings.stateOpened);
|
|
1033
|
+
|
|
1034
|
+
if (modal) {
|
|
1035
|
+
_this2.working = true;
|
|
1036
|
+
setInert(false, _this2.settings.selectorInert);
|
|
1037
|
+
setOverflowHidden(false, _this2.settings.selectorOverflow);
|
|
1038
|
+
return Promise.resolve(closeTransition(modal, _this2.settings)).then(function () {
|
|
1039
|
+
if (returnFocus) focusTrigger(_this2);
|
|
1040
|
+
|
|
1041
|
+
_this2.focusTrap.destroy();
|
|
1042
|
+
|
|
1043
|
+
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
|
|
1044
|
+
detail: _this2,
|
|
1045
|
+
bubbles: true
|
|
1046
|
+
}));
|
|
1047
|
+
_this2.working = false;
|
|
1048
|
+
return modal;
|
|
1049
|
+
});
|
|
1050
|
+
} else {
|
|
1051
|
+
return Promise.resolve(modal);
|
|
1052
|
+
}
|
|
1053
|
+
} catch (e) {
|
|
1054
|
+
return Promise.reject(e);
|
|
1055
|
+
}
|
|
1056
|
+
};
|
|
1057
|
+
|
|
990
1058
|
var handlerClick$1 = function handlerClick(event) {
|
|
991
1059
|
try {
|
|
992
1060
|
var _temp3 = function _temp3(_result) {
|
|
@@ -1048,21 +1116,76 @@
|
|
|
1048
1116
|
}
|
|
1049
1117
|
}
|
|
1050
1118
|
|
|
1051
|
-
function
|
|
1052
|
-
|
|
1119
|
+
function getModal(modalKey) {
|
|
1120
|
+
if (typeof modalKey !== 'string') return modalKey;
|
|
1121
|
+
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1122
|
+
}
|
|
1123
|
+
function modalNotFound(key) {
|
|
1124
|
+
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1125
|
+
}
|
|
1126
|
+
function moveModals(type, ref) {
|
|
1127
|
+
if (type === void 0) {
|
|
1128
|
+
type = this.settings.moveModals.type;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
if (ref === void 0) {
|
|
1132
|
+
ref = this.settings.moveModals.ref;
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1136
|
+
if (modals.length) moveElement(modals, type, ref);
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
function setInitialState() {
|
|
1140
|
+
var _this = this;
|
|
1141
|
+
|
|
1142
|
+
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1053
1143
|
modals.forEach(function (el) {
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1144
|
+
// Remove opened state setup
|
|
1145
|
+
if (el.classList.contains(_this.settings.stateOpened)) {
|
|
1146
|
+
setInert(false, _this.settings.selectorInert);
|
|
1147
|
+
setOverflowHidden(false, _this.settings.selectorOverflow);
|
|
1148
|
+
focusTrigger(_this);
|
|
1149
|
+
|
|
1150
|
+
_this.focusTrap.destroy();
|
|
1151
|
+
} // Remove all state classes and add the default state (closed)
|
|
1060
1152
|
|
|
1061
|
-
|
|
1062
|
-
|
|
1153
|
+
|
|
1154
|
+
removeClass(el, _this.settings.stateOpened, _this.settings.stateOpening, _this.settings.stateClosing);
|
|
1155
|
+
addClass(el, _this.settings.stateClosed);
|
|
1063
1156
|
});
|
|
1064
1157
|
}
|
|
1065
1158
|
|
|
1159
|
+
var open$1 = function open(modalKey) {
|
|
1160
|
+
try {
|
|
1161
|
+
var _this2 = this;
|
|
1162
|
+
|
|
1163
|
+
var modal = getModal.call(_this2, modalKey);
|
|
1164
|
+
if (!modal) return Promise.resolve(modalNotFound(modalKey));
|
|
1165
|
+
|
|
1166
|
+
if (hasClass(modal, _this2.settings.stateClosed)) {
|
|
1167
|
+
_this2.working = true;
|
|
1168
|
+
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
1169
|
+
return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
|
|
1170
|
+
_this2.focusTrap.init(modal);
|
|
1171
|
+
|
|
1172
|
+
focusTarget(modal, _this2.settings);
|
|
1173
|
+
setInert(true, _this2.settings.selectorInert);
|
|
1174
|
+
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
1175
|
+
detail: _this2,
|
|
1176
|
+
bubbles: true
|
|
1177
|
+
}));
|
|
1178
|
+
_this2.working = false;
|
|
1179
|
+
return modal;
|
|
1180
|
+
});
|
|
1181
|
+
} else {
|
|
1182
|
+
return Promise.resolve(modal);
|
|
1183
|
+
}
|
|
1184
|
+
} catch (e) {
|
|
1185
|
+
return Promise.reject(e);
|
|
1186
|
+
}
|
|
1187
|
+
};
|
|
1188
|
+
|
|
1066
1189
|
var Modal = /*#__PURE__*/function () {
|
|
1067
1190
|
function Modal(options) {
|
|
1068
1191
|
this.defaults = defaults$1;
|
|
@@ -1084,13 +1207,12 @@
|
|
|
1084
1207
|
|
|
1085
1208
|
if (options) this.settings = _extends({}, this.settings, options);
|
|
1086
1209
|
this.moveModals();
|
|
1210
|
+
this.setInitialState();
|
|
1087
1211
|
|
|
1088
1212
|
if (this.settings.setTabindex) {
|
|
1089
1213
|
this.setTabindex();
|
|
1090
1214
|
}
|
|
1091
1215
|
|
|
1092
|
-
this.setInitialState();
|
|
1093
|
-
|
|
1094
1216
|
if (this.settings.eventListeners) {
|
|
1095
1217
|
this.initEventListeners();
|
|
1096
1218
|
}
|
|
@@ -1124,36 +1246,20 @@
|
|
|
1124
1246
|
*/
|
|
1125
1247
|
;
|
|
1126
1248
|
|
|
1127
|
-
_proto.getModal = function getModal(modalKey) {
|
|
1128
|
-
|
|
1129
|
-
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1130
|
-
};
|
|
1131
|
-
|
|
1132
|
-
_proto.modalNotFound = function modalNotFound(key) {
|
|
1133
|
-
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1249
|
+
_proto.getModal = function getModal$1(modalKey) {
|
|
1250
|
+
return getModal.call(this, modalKey);
|
|
1134
1251
|
};
|
|
1135
1252
|
|
|
1136
1253
|
_proto.setTabindex = function setTabindex$1() {
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
setTabindex(selectorTabindex);
|
|
1254
|
+
return setTabindex("\n [data-" + this.settings.dataModal + "]\n [data-" + this.settings.dataDialog + "]\n ");
|
|
1140
1255
|
};
|
|
1141
1256
|
|
|
1142
1257
|
_proto.setInitialState = function setInitialState$1() {
|
|
1143
|
-
setInitialState(this);
|
|
1258
|
+
return setInitialState.call(this);
|
|
1144
1259
|
};
|
|
1145
1260
|
|
|
1146
|
-
_proto.moveModals = function moveModals(type, ref) {
|
|
1147
|
-
|
|
1148
|
-
type = this.settings.moveModals.type;
|
|
1149
|
-
}
|
|
1150
|
-
|
|
1151
|
-
if (ref === void 0) {
|
|
1152
|
-
ref = this.settings.moveModals.ref;
|
|
1153
|
-
}
|
|
1154
|
-
|
|
1155
|
-
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1156
|
-
if (modals.length) moveElement(modals, type, ref);
|
|
1261
|
+
_proto.moveModals = function moveModals$1(type, ref) {
|
|
1262
|
+
return moveModals.call(this, type, ref);
|
|
1157
1263
|
}
|
|
1158
1264
|
/**
|
|
1159
1265
|
* Change state functionality
|
|
@@ -1161,68 +1267,11 @@
|
|
|
1161
1267
|
;
|
|
1162
1268
|
|
|
1163
1269
|
_proto.open = function open(modalKey) {
|
|
1164
|
-
|
|
1165
|
-
var _this2 = this;
|
|
1166
|
-
|
|
1167
|
-
var modal = _this2.getModal(modalKey);
|
|
1168
|
-
|
|
1169
|
-
if (!modal) return Promise.resolve(_this2.modalNotFound(modalKey));
|
|
1170
|
-
|
|
1171
|
-
if (hasClass(modal, _this2.settings.stateClosed)) {
|
|
1172
|
-
_this2.working = true;
|
|
1173
|
-
setOverflowHidden(true, _this2.settings.selectorOverflow);
|
|
1174
|
-
return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
|
|
1175
|
-
_this2.focusTrap.init(modal);
|
|
1176
|
-
|
|
1177
|
-
focusTarget(modal, _this2.settings);
|
|
1178
|
-
setInert(true, _this2.settings.selectorInert);
|
|
1179
|
-
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
1180
|
-
detail: _this2,
|
|
1181
|
-
bubbles: true
|
|
1182
|
-
}));
|
|
1183
|
-
_this2.working = false;
|
|
1184
|
-
return modal;
|
|
1185
|
-
});
|
|
1186
|
-
} else {
|
|
1187
|
-
return Promise.resolve(modal);
|
|
1188
|
-
}
|
|
1189
|
-
} catch (e) {
|
|
1190
|
-
return Promise.reject(e);
|
|
1191
|
-
}
|
|
1270
|
+
return open$1.call(this, modalKey);
|
|
1192
1271
|
};
|
|
1193
1272
|
|
|
1194
1273
|
_proto.close = function close(returnFocus) {
|
|
1195
|
-
|
|
1196
|
-
returnFocus = true;
|
|
1197
|
-
}
|
|
1198
|
-
|
|
1199
|
-
try {
|
|
1200
|
-
var _this4 = this;
|
|
1201
|
-
|
|
1202
|
-
var modal = document.querySelector("[data-" + _this4.settings.dataModal + "]." + _this4.settings.stateOpened);
|
|
1203
|
-
|
|
1204
|
-
if (modal) {
|
|
1205
|
-
_this4.working = true;
|
|
1206
|
-
setInert(false, _this4.settings.selectorInert);
|
|
1207
|
-
setOverflowHidden(false, _this4.settings.selectorOverflow);
|
|
1208
|
-
return Promise.resolve(closeTransition(modal, _this4.settings)).then(function () {
|
|
1209
|
-
if (returnFocus) focusTrigger(_this4);
|
|
1210
|
-
|
|
1211
|
-
_this4.focusTrap.destroy();
|
|
1212
|
-
|
|
1213
|
-
modal.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'closed', {
|
|
1214
|
-
detail: _this4,
|
|
1215
|
-
bubbles: true
|
|
1216
|
-
}));
|
|
1217
|
-
_this4.working = false;
|
|
1218
|
-
return modal;
|
|
1219
|
-
});
|
|
1220
|
-
} else {
|
|
1221
|
-
return Promise.resolve(modal);
|
|
1222
|
-
}
|
|
1223
|
-
} catch (e) {
|
|
1224
|
-
return Promise.reject(e);
|
|
1225
|
-
}
|
|
1274
|
+
return close$1.call(this, returnFocus);
|
|
1226
1275
|
};
|
|
1227
1276
|
|
|
1228
1277
|
return Modal;
|
|
@@ -1244,9 +1293,9 @@
|
|
|
1244
1293
|
placement: 'bottom-start'
|
|
1245
1294
|
};
|
|
1246
1295
|
|
|
1247
|
-
function
|
|
1296
|
+
function close(popover) {
|
|
1248
1297
|
// Update state class
|
|
1249
|
-
popover.target.classList.remove(
|
|
1298
|
+
popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
|
|
1250
1299
|
|
|
1251
1300
|
popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
|
|
1252
1301
|
|
|
@@ -1257,32 +1306,43 @@
|
|
|
1257
1306
|
}]
|
|
1258
1307
|
}); // Update collection status with new state
|
|
1259
1308
|
|
|
1260
|
-
var index =
|
|
1309
|
+
var index = this.collection.findIndex(function (item) {
|
|
1261
1310
|
return item.target === popover.target;
|
|
1262
1311
|
});
|
|
1263
|
-
|
|
1312
|
+
this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
|
|
1313
|
+
|
|
1314
|
+
if (popover.trigger === this.memory.trigger) {
|
|
1315
|
+
this.memory.trigger = null;
|
|
1316
|
+
} // Return the popover
|
|
1317
|
+
|
|
1264
1318
|
|
|
1265
1319
|
return popover;
|
|
1266
1320
|
}
|
|
1267
|
-
function
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1321
|
+
function closeAll() {
|
|
1322
|
+
var _this = this;
|
|
1323
|
+
|
|
1324
|
+
this.collection.forEach(function (popover) {
|
|
1325
|
+
if (popover.state === 'opened') {
|
|
1326
|
+
_this.close(popover);
|
|
1271
1327
|
}
|
|
1272
1328
|
}); // Return the collection
|
|
1273
1329
|
|
|
1274
|
-
return
|
|
1330
|
+
return this.collection;
|
|
1275
1331
|
}
|
|
1276
|
-
function
|
|
1277
|
-
|
|
1332
|
+
function closeCheck(popover) {
|
|
1333
|
+
var _this2 = this;
|
|
1334
|
+
|
|
1335
|
+
// Only run closeCheck if provided popover is currently open
|
|
1336
|
+
if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
|
|
1337
|
+
|
|
1278
1338
|
setTimeout(function () {
|
|
1279
1339
|
// Check if trigger or target are being hovered
|
|
1280
1340
|
var isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
|
|
1281
1341
|
|
|
1282
|
-
var isFocused = document.activeElement.closest("[data-" +
|
|
1342
|
+
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
|
|
1283
1343
|
|
|
1284
1344
|
if (!isHovered && !isFocused) {
|
|
1285
|
-
|
|
1345
|
+
_this2.close(popover);
|
|
1286
1346
|
} // Return the popover
|
|
1287
1347
|
|
|
1288
1348
|
|
|
@@ -1290,6 +1350,57 @@
|
|
|
1290
1350
|
}, 1);
|
|
1291
1351
|
}
|
|
1292
1352
|
|
|
1353
|
+
function handlerClick(popover) {
|
|
1354
|
+
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
1355
|
+
this.close(popover);
|
|
1356
|
+
} else {
|
|
1357
|
+
this.memory.trigger = popover.trigger;
|
|
1358
|
+
this.open(popover);
|
|
1359
|
+
documentClick.call(this, popover);
|
|
1360
|
+
}
|
|
1361
|
+
}
|
|
1362
|
+
function handlerKeydown(event) {
|
|
1363
|
+
var _this = this;
|
|
1364
|
+
|
|
1365
|
+
switch (event.key) {
|
|
1366
|
+
case 'Escape':
|
|
1367
|
+
if (this.memory.trigger) {
|
|
1368
|
+
this.memory.trigger.focus();
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
this.closeAll();
|
|
1372
|
+
return;
|
|
1373
|
+
|
|
1374
|
+
case 'Tab':
|
|
1375
|
+
this.collection.forEach(function (popover) {
|
|
1376
|
+
closeCheck.call(_this, popover);
|
|
1377
|
+
});
|
|
1378
|
+
return;
|
|
1379
|
+
|
|
1380
|
+
default:
|
|
1381
|
+
return;
|
|
1382
|
+
}
|
|
1383
|
+
}
|
|
1384
|
+
function documentClick(popover) {
|
|
1385
|
+
var obj = this;
|
|
1386
|
+
document.addEventListener('click', function _f(event) {
|
|
1387
|
+
var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
|
|
1388
|
+
var match = result === popover.target || result === popover.trigger;
|
|
1389
|
+
|
|
1390
|
+
if (!match) {
|
|
1391
|
+
if (popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1392
|
+
obj.close(popover);
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
this.removeEventListener('click', _f);
|
|
1396
|
+
} else {
|
|
1397
|
+
if (!popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1398
|
+
this.removeEventListener('click', _f);
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
});
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1293
1404
|
function getConfig(el, settings) {
|
|
1294
1405
|
// Get the computed styles of the popover
|
|
1295
1406
|
var styles = getComputedStyle(el); // Setup the config obj with default values
|
|
@@ -1306,7 +1417,8 @@
|
|
|
1306
1417
|
|
|
1307
1418
|
for (var prop in config) {
|
|
1308
1419
|
// Get the CSS variable property values
|
|
1309
|
-
var
|
|
1420
|
+
var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
|
|
1421
|
+
var val = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
|
|
1310
1422
|
|
|
1311
1423
|
if (val) {
|
|
1312
1424
|
config[prop] = val;
|
|
@@ -1413,16 +1525,16 @@
|
|
|
1413
1525
|
}
|
|
1414
1526
|
}
|
|
1415
1527
|
|
|
1416
|
-
function
|
|
1528
|
+
function open(popover) {
|
|
1417
1529
|
// Update state class
|
|
1418
|
-
popover.target.classList.add(
|
|
1530
|
+
popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
|
|
1419
1531
|
|
|
1420
1532
|
popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
|
|
1421
1533
|
|
|
1422
|
-
popover.config = getConfig(popover.target,
|
|
1534
|
+
popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
|
|
1423
1535
|
|
|
1424
1536
|
popover.popper.setOptions({
|
|
1425
|
-
placement: getData(popover.target,
|
|
1537
|
+
placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
|
|
1426
1538
|
modifiers: [{
|
|
1427
1539
|
name: 'eventListeners',
|
|
1428
1540
|
enabled: true
|
|
@@ -1431,46 +1543,14 @@
|
|
|
1431
1543
|
|
|
1432
1544
|
popover.popper.update(); // Update collection status with new state
|
|
1433
1545
|
|
|
1434
|
-
var index =
|
|
1546
|
+
var index = this.collection.findIndex(function (item) {
|
|
1435
1547
|
return item.target === popover.target;
|
|
1436
1548
|
});
|
|
1437
|
-
|
|
1549
|
+
this.collection[index].state = 'opened'; // Return the popover
|
|
1438
1550
|
|
|
1439
1551
|
return popover;
|
|
1440
1552
|
}
|
|
1441
1553
|
|
|
1442
|
-
function handlerClick(popover) {
|
|
1443
|
-
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
1444
|
-
hide$2(popover, this);
|
|
1445
|
-
} else {
|
|
1446
|
-
show(popover, this);
|
|
1447
|
-
documentClick(popover, this);
|
|
1448
|
-
}
|
|
1449
|
-
}
|
|
1450
|
-
function handlerKeydown(event) {
|
|
1451
|
-
if (event.key === 'Escape') {
|
|
1452
|
-
hideAll(this);
|
|
1453
|
-
}
|
|
1454
|
-
}
|
|
1455
|
-
function documentClick(popover, obj) {
|
|
1456
|
-
document.addEventListener('click', function _f(event) {
|
|
1457
|
-
var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
|
|
1458
|
-
var match = result === popover.target || result === popover.trigger;
|
|
1459
|
-
|
|
1460
|
-
if (!match) {
|
|
1461
|
-
if (popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1462
|
-
hide$2(popover, obj);
|
|
1463
|
-
}
|
|
1464
|
-
|
|
1465
|
-
this.removeEventListener('click', _f);
|
|
1466
|
-
} else {
|
|
1467
|
-
if (!popover.target.classList.contains(obj.settings.stateActive)) {
|
|
1468
|
-
this.removeEventListener('click', _f);
|
|
1469
|
-
}
|
|
1470
|
-
}
|
|
1471
|
-
});
|
|
1472
|
-
}
|
|
1473
|
-
|
|
1474
1554
|
var top = 'top';
|
|
1475
1555
|
var bottom = 'bottom';
|
|
1476
1556
|
var right = 'right';
|
|
@@ -3254,11 +3334,11 @@
|
|
|
3254
3334
|
defaultModifiers: defaultModifiers
|
|
3255
3335
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
3256
3336
|
|
|
3257
|
-
function register(trigger, target
|
|
3337
|
+
function register(trigger, target) {
|
|
3258
3338
|
// If no target is passed
|
|
3259
3339
|
if (!target) {
|
|
3260
3340
|
// Try and get the target
|
|
3261
|
-
target = getPopover(trigger,
|
|
3341
|
+
target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
|
|
3262
3342
|
|
|
3263
3343
|
if (!target) {
|
|
3264
3344
|
console.error('No popover associated with the provided trigger:', trigger);
|
|
@@ -3267,7 +3347,7 @@
|
|
|
3267
3347
|
} // Check if this item has already been registered in the collection
|
|
3268
3348
|
|
|
3269
3349
|
|
|
3270
|
-
var index =
|
|
3350
|
+
var index = this.collection.findIndex(function (item) {
|
|
3271
3351
|
return item.trigger === trigger && item.target === target;
|
|
3272
3352
|
}); // Initiate popover variable
|
|
3273
3353
|
|
|
@@ -3275,45 +3355,45 @@
|
|
|
3275
3355
|
|
|
3276
3356
|
if (index >= 0) {
|
|
3277
3357
|
// Set popover as item from collection
|
|
3278
|
-
popover =
|
|
3358
|
+
popover = this.collection[index];
|
|
3279
3359
|
} else {
|
|
3280
3360
|
// Create popper instance
|
|
3281
3361
|
var popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
|
|
3282
3362
|
|
|
3283
3363
|
popover = {
|
|
3284
|
-
state: '
|
|
3364
|
+
state: 'closed',
|
|
3285
3365
|
trigger: trigger,
|
|
3286
3366
|
target: target,
|
|
3287
3367
|
popper: popperInstance,
|
|
3288
|
-
config: getConfig(target,
|
|
3368
|
+
config: getConfig(target, this.settings)
|
|
3289
3369
|
}; // Add item to collection
|
|
3290
3370
|
|
|
3291
|
-
|
|
3371
|
+
this.collection.push(popover);
|
|
3292
3372
|
} // Setup event listeners
|
|
3293
3373
|
|
|
3294
3374
|
|
|
3295
|
-
registerEventListeners(
|
|
3375
|
+
registerEventListeners.call(this, popover); // Set initial state of popover
|
|
3296
3376
|
|
|
3297
|
-
if (popover.target.classList.contains(
|
|
3298
|
-
|
|
3299
|
-
documentClick(
|
|
3377
|
+
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
3378
|
+
this.open(popover);
|
|
3379
|
+
documentClick.call(this, popover);
|
|
3300
3380
|
} else {
|
|
3301
|
-
|
|
3381
|
+
this.close(popover);
|
|
3302
3382
|
} // Return the popover object
|
|
3303
3383
|
|
|
3304
3384
|
|
|
3305
3385
|
return popover;
|
|
3306
3386
|
}
|
|
3307
|
-
function deregister(popover
|
|
3387
|
+
function deregister(popover) {
|
|
3308
3388
|
// Check if this item has been registered in the collection
|
|
3309
|
-
var index =
|
|
3389
|
+
var index = this.collection.findIndex(function (item) {
|
|
3310
3390
|
return item.trigger === popover.trigger && item.target === popover.target;
|
|
3311
3391
|
}); // If the item exists in the collection
|
|
3312
3392
|
|
|
3313
3393
|
if (index >= 0) {
|
|
3314
|
-
//
|
|
3315
|
-
if (popover.state === '
|
|
3316
|
-
|
|
3394
|
+
// Close the popover
|
|
3395
|
+
if (popover.state === 'opened') {
|
|
3396
|
+
this.close(popover);
|
|
3317
3397
|
} // Clean up the popper instance
|
|
3318
3398
|
|
|
3319
3399
|
|
|
@@ -3321,28 +3401,28 @@
|
|
|
3321
3401
|
|
|
3322
3402
|
deregisterEventListeners(popover); // Remove item from collection
|
|
3323
3403
|
|
|
3324
|
-
|
|
3404
|
+
this.collection.splice(index, 1);
|
|
3325
3405
|
} // Return the new collection
|
|
3326
3406
|
|
|
3327
3407
|
|
|
3328
|
-
return
|
|
3408
|
+
return this.collection;
|
|
3329
3409
|
}
|
|
3330
|
-
function registerEventListeners(popover
|
|
3410
|
+
function registerEventListeners(popover) {
|
|
3331
3411
|
// If event listeners aren't already setup
|
|
3332
3412
|
if (!popover.__eventListeners) {
|
|
3333
3413
|
// Add event listeners based on event type
|
|
3334
|
-
var eventType = getData(popover.target,
|
|
3414
|
+
var eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
|
|
3335
3415
|
|
|
3336
3416
|
if (eventType === 'hover') {
|
|
3337
3417
|
// Setup event listeners object for hover
|
|
3338
3418
|
popover.__eventListeners = [{
|
|
3339
3419
|
el: ['trigger'],
|
|
3340
3420
|
type: ['mouseenter', 'focus'],
|
|
3341
|
-
listener:
|
|
3421
|
+
listener: open.bind(this, popover)
|
|
3342
3422
|
}, {
|
|
3343
3423
|
el: ['trigger', 'target'],
|
|
3344
3424
|
type: ['mouseleave', 'focusout'],
|
|
3345
|
-
listener:
|
|
3425
|
+
listener: closeCheck.bind(this, popover)
|
|
3346
3426
|
}]; // Loop through listeners and apply to appropriate elements
|
|
3347
3427
|
|
|
3348
3428
|
popover.__eventListeners.forEach(function (evObj) {
|
|
@@ -3357,7 +3437,7 @@
|
|
|
3357
3437
|
popover.__eventListeners = [{
|
|
3358
3438
|
el: ['trigger'],
|
|
3359
3439
|
type: ['click'],
|
|
3360
|
-
listener: handlerClick.bind(
|
|
3440
|
+
listener: handlerClick.bind(this, popover)
|
|
3361
3441
|
}]; // Loop through listeners and apply to appropriate elements
|
|
3362
3442
|
|
|
3363
3443
|
popover.__eventListeners.forEach(function (evObj) {
|
|
@@ -3392,24 +3472,26 @@
|
|
|
3392
3472
|
|
|
3393
3473
|
return popover;
|
|
3394
3474
|
}
|
|
3395
|
-
function registerCollection(
|
|
3475
|
+
function registerCollection() {
|
|
3476
|
+
var _this = this;
|
|
3477
|
+
|
|
3396
3478
|
// Get all the triggers
|
|
3397
|
-
var triggers = document.querySelectorAll("[data-" +
|
|
3479
|
+
var triggers = document.querySelectorAll("[data-" + this.settings.dataTrigger + "]");
|
|
3398
3480
|
triggers.forEach(function (trigger) {
|
|
3399
3481
|
// Register the popover and save to collection array
|
|
3400
|
-
register(trigger, false
|
|
3482
|
+
_this.register(trigger, false);
|
|
3401
3483
|
}); // Return the popover collection
|
|
3402
3484
|
|
|
3403
|
-
return
|
|
3485
|
+
return this.collection;
|
|
3404
3486
|
}
|
|
3405
|
-
function deregisterCollection(
|
|
3487
|
+
function deregisterCollection() {
|
|
3406
3488
|
// Loop through all items within the collection and pass them to deregister()
|
|
3407
|
-
while (
|
|
3408
|
-
deregister(
|
|
3489
|
+
while (this.collection.length > 0) {
|
|
3490
|
+
this.deregister(this.collection[0]);
|
|
3409
3491
|
} // Return the popover collection
|
|
3410
3492
|
|
|
3411
3493
|
|
|
3412
|
-
return
|
|
3494
|
+
return this.collection;
|
|
3413
3495
|
}
|
|
3414
3496
|
|
|
3415
3497
|
var Popover = /*#__PURE__*/function () {
|
|
@@ -3417,6 +3499,9 @@
|
|
|
3417
3499
|
this.defaults = defaults;
|
|
3418
3500
|
this.settings = _extends({}, this.defaults, options);
|
|
3419
3501
|
this.collection = [];
|
|
3502
|
+
this.memory = {
|
|
3503
|
+
trigger: null
|
|
3504
|
+
};
|
|
3420
3505
|
this.__handlerKeydown = handlerKeydown.bind(this);
|
|
3421
3506
|
if (this.settings.autoInit) this.init();
|
|
3422
3507
|
}
|
|
@@ -3431,8 +3516,7 @@
|
|
|
3431
3516
|
// Update settings with passed options
|
|
3432
3517
|
if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
|
|
3433
3518
|
|
|
3434
|
-
registerCollection(
|
|
3435
|
-
|
|
3519
|
+
this.registerCollection(); // If eventListeners is enabled
|
|
3436
3520
|
|
|
3437
3521
|
if (this.settings.eventListeners) {
|
|
3438
3522
|
// Pass false to initEventListeners() since registerCollection()
|
|
@@ -3443,8 +3527,7 @@
|
|
|
3443
3527
|
|
|
3444
3528
|
_proto.destroy = function destroy() {
|
|
3445
3529
|
// Deregister all popovers from collection
|
|
3446
|
-
deregisterCollection(
|
|
3447
|
-
|
|
3530
|
+
this.deregisterCollection(); // If eventListeners is enabled
|
|
3448
3531
|
|
|
3449
3532
|
if (this.settings.eventListeners) {
|
|
3450
3533
|
// Pass false to destroyEventListeners() since deregisterCollection()
|
|
@@ -3467,7 +3550,7 @@
|
|
|
3467
3550
|
if (processCollection) {
|
|
3468
3551
|
// Loop through collection and setup event listeners
|
|
3469
3552
|
this.collection.forEach(function (popover) {
|
|
3470
|
-
registerEventListeners(
|
|
3553
|
+
registerEventListeners.call(_this, popover);
|
|
3471
3554
|
});
|
|
3472
3555
|
} // Add keydown global event listener
|
|
3473
3556
|
|
|
@@ -3500,35 +3583,35 @@
|
|
|
3500
3583
|
target = false;
|
|
3501
3584
|
}
|
|
3502
3585
|
|
|
3503
|
-
return register(trigger, target
|
|
3586
|
+
return register.call(this, trigger, target);
|
|
3504
3587
|
};
|
|
3505
3588
|
|
|
3506
3589
|
_proto.deregister = function deregister$1(popover) {
|
|
3507
|
-
return deregister(
|
|
3590
|
+
return deregister.call(this, popover);
|
|
3508
3591
|
};
|
|
3509
3592
|
|
|
3510
3593
|
_proto.registerCollection = function registerCollection$1() {
|
|
3511
|
-
return registerCollection(this);
|
|
3594
|
+
return registerCollection.call(this);
|
|
3512
3595
|
};
|
|
3513
3596
|
|
|
3514
3597
|
_proto.deregisterCollection = function deregisterCollection$1() {
|
|
3515
|
-
return deregisterCollection(this);
|
|
3598
|
+
return deregisterCollection.call(this);
|
|
3516
3599
|
}
|
|
3517
3600
|
/**
|
|
3518
3601
|
* Change state functionality
|
|
3519
3602
|
*/
|
|
3520
3603
|
;
|
|
3521
3604
|
|
|
3522
|
-
_proto.
|
|
3523
|
-
return
|
|
3605
|
+
_proto.open = function open$1(popover) {
|
|
3606
|
+
return open.call(this, popover);
|
|
3524
3607
|
};
|
|
3525
3608
|
|
|
3526
|
-
_proto.
|
|
3527
|
-
return
|
|
3609
|
+
_proto.close = function close$1(popover) {
|
|
3610
|
+
return close.call(this, popover);
|
|
3528
3611
|
};
|
|
3529
3612
|
|
|
3530
|
-
_proto.
|
|
3531
|
-
return
|
|
3613
|
+
_proto.closeAll = function closeAll$1() {
|
|
3614
|
+
return closeAll.call(this);
|
|
3532
3615
|
};
|
|
3533
3616
|
|
|
3534
3617
|
return Popover;
|