1 | export default {
|
2 | name: "cjsPopup",
|
3 | injections: [],
|
4 | fn: () => ({
|
5 |
|
6 | link: function(scope, element, attrs) {
|
7 | var previousAdditionalClasses;
|
8 | var removeEventHandlers;
|
9 |
|
10 | function clickOutsidePopup(e) {
|
11 | var r = element[0].getBoundingClientRect();
|
12 | var x = e.changedTouches ? e.changedTouches[0].clientX : e.touches ? e.touches[0].clientX : e.clientX;
|
13 | var y = e.changedTouches ? e.changedTouches[0].clientY : e.touches ? e.touches[0].clientY : e.clientY;
|
14 | if (x > r.left && x < r.right && y > r.top && y < r.bottom) return;
|
15 | scope.$apply("hideModal('" + attrs.cjsSidepanel + "')");
|
16 | removeEventHandlers();
|
17 | }
|
18 |
|
19 |
|
20 | var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
|
21 | 'select:not([disabled]), textarea:not([disabled]),' +
|
22 | 'button:not([disabled]), iframe, object, embed, *[tabindex],' +
|
23 | '*[contenteditable]';
|
24 |
|
25 | function closeWithKey(e) {
|
26 | var keyCode = e.which || e.keyCode;
|
27 | if (keyCode === 27) {
|
28 | e.preventDefault();
|
29 | clickOutsidePopup(e);
|
30 | } else if (keyCode === 9) {
|
31 | var te = angular.element(tabbableElements, element);
|
32 | var ae = angular.element(":focus", element);
|
33 | if (e.shiftKey) {
|
34 | if (document.activeElement == te[0] || ae.length === 0) {
|
35 | e.preventDefault();
|
36 | te[te.length - 1].focus();
|
37 | }
|
38 | } else {
|
39 | if (document.activeElement == te[te.length - 1] || ae.length === 0) {
|
40 | e.preventDefault();
|
41 | te[0].focus();
|
42 | }
|
43 | }
|
44 | }
|
45 | }
|
46 |
|
47 | removeEventHandlers = function() {
|
48 | window.document.body.removeEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);
|
49 | window.document.body.removeEventListener('keydown', closeWithKey, true);
|
50 | };
|
51 |
|
52 | scope.$on('$destroy', removeEventHandlers);
|
53 |
|
54 |
|
55 | element.addClass("modal");
|
56 | element.addClass("popup");
|
57 |
|
58 | var parentPageElement = element.closest(".chondric-page");
|
59 | if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-section");
|
60 | if (parentPageElement.length === 0) parentPageElement = element.closest(".chondric-viewport");
|
61 | var overlay = angular.element(".modal-overlay", parentPageElement);
|
62 | if (overlay.length === 0) {
|
63 | overlay = angular.element('<div class="modal-overlay"></div>');
|
64 | parentPageElement.append(overlay);
|
65 | }
|
66 |
|
67 | var lastFocused = null;
|
68 |
|
69 | scope.$watch(attrs.cjsPopup, function(val) {
|
70 | if (element.hasClass("nativetransition")) {
|
71 | if (!val) {
|
72 | element.removeClass("active");
|
73 | } else {
|
74 | element.addClass("active");
|
75 | }
|
76 |
|
77 | } else {
|
78 | if (!val) {
|
79 |
|
80 | if (lastFocused) {
|
81 | lastFocused.focus();
|
82 | lastFocused = null;
|
83 | } else {
|
84 | if (document.activeElement && !window.NativeNav && document.activeElement.tagName != "BODY") {
|
85 | document.activeElement.blur();
|
86 | }
|
87 | }
|
88 |
|
89 | overlay.removeClass("active");
|
90 | element.removeClass("active");
|
91 | removeEventHandlers();
|
92 | } else {
|
93 |
|
94 | if (document.activeElement && !window.NativeNav && document.activeElement.tagName != "BODY") {
|
95 | lastFocused = document.activeElement;
|
96 | }
|
97 | element.focus();
|
98 | var te = angular.element(tabbableElements, element);
|
99 | if (te.length > 0) te[0].focus();
|
100 |
|
101 |
|
102 | window.document.body.addEventListener('keydown', closeWithKey, true);
|
103 |
|
104 |
|
105 | window.document.body.addEventListener(window.useMouse ? 'mousedown' : "touchstart", clickOutsidePopup, true);
|
106 | if (previousAdditionalClasses) element.removeClass(previousAdditionalClasses);
|
107 | previousAdditionalClasses = val.additionalClasses;
|
108 |
|
109 | overlay.addClass("active");
|
110 | element.addClass("active");
|
111 | if (val.additionalClasses) element.addClass(val.additionalClasses);
|
112 | }
|
113 |
|
114 | }
|
115 | });
|
116 | }
|
117 | })
|
118 | };
|