@total_onion/onion-modalcontroller 1.0.17 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/onion-modalcontroller.js +57 -9
- package/package.json +1 -1
package/onion-modalcontroller.js
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
export default class modalController {
|
|
2
|
-
constructor() {
|
|
2
|
+
constructor(settings = {}) {
|
|
3
3
|
let defaultGlobalSettings = {
|
|
4
4
|
bodyClass: "modal-active",
|
|
5
5
|
activeStateClass: "modal-active",
|
|
6
6
|
enableDebugLogs: true,
|
|
7
7
|
userInteracted: false,
|
|
8
|
+
closeSelector: "#modal-controller-popup__close-btn",
|
|
9
|
+
closeDelay: 0,
|
|
10
|
+
closingClass: "",
|
|
11
|
+
activateDelay: 0,
|
|
12
|
+
lenis: false,
|
|
8
13
|
};
|
|
9
14
|
this.scanForNewTriggers();
|
|
10
15
|
|
|
@@ -12,7 +17,7 @@ export default class modalController {
|
|
|
12
17
|
return modalController.instance;
|
|
13
18
|
}
|
|
14
19
|
modalController.instance = this;
|
|
15
|
-
this.globalSettings = defaultGlobalSettings;
|
|
20
|
+
this.globalSettings = { ...defaultGlobalSettings, ...settings };
|
|
16
21
|
this.enableDebugLogs = this.globalSettings.enableDebugLogs;
|
|
17
22
|
this.handleModalTriggers();
|
|
18
23
|
this.handleBgClicks();
|
|
@@ -30,12 +35,22 @@ export default class modalController {
|
|
|
30
35
|
});
|
|
31
36
|
}
|
|
32
37
|
handleCloseButtonClicks() {
|
|
33
|
-
const
|
|
34
|
-
|
|
38
|
+
const modalPopup = document.getElementById("modal-controller-popup");
|
|
39
|
+
if (!modalPopup) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const closeButtons = modalPopup.querySelectorAll(
|
|
43
|
+
this.globalSettings.closeSelector || "#modal-controller-popup__close-btn"
|
|
35
44
|
);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
closeButtons.forEach((closeButton) => {
|
|
46
|
+
if (closeButton.dataset.modalpopupCloseBound === "true") {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
closeButton.dataset.modalpopupCloseBound = "true";
|
|
50
|
+
closeButton.addEventListener("click", () => {
|
|
51
|
+
const modalPopup = document.getElementById("modal-controller-popup");
|
|
52
|
+
this.closePopup(modalPopup);
|
|
53
|
+
});
|
|
39
54
|
});
|
|
40
55
|
}
|
|
41
56
|
handleModalTriggers() {
|
|
@@ -56,7 +71,6 @@ export default class modalController {
|
|
|
56
71
|
</div>`;
|
|
57
72
|
document.body.insertAdjacentHTML("beforeend", modalPopupHtml);
|
|
58
73
|
modalPopup = document.getElementById("modal-controller-popup");
|
|
59
|
-
this.handleCloseButtonClicks();
|
|
60
74
|
}
|
|
61
75
|
if (!modalPopup) {
|
|
62
76
|
return;
|
|
@@ -79,10 +93,21 @@ export default class modalController {
|
|
|
79
93
|
) {
|
|
80
94
|
popupContent.appendChild(modalPopupContent);
|
|
81
95
|
}
|
|
82
|
-
|
|
96
|
+
const activateDelay = Number(this.globalSettings.activateDelay) || 0;
|
|
97
|
+
if (activateDelay > 0) {
|
|
98
|
+
modalPopupContent.classList.remove("active");
|
|
99
|
+
window.setTimeout(() => {
|
|
100
|
+
modalPopupContent.classList.add("active");
|
|
101
|
+
}, activateDelay);
|
|
102
|
+
} else {
|
|
103
|
+
modalPopupContent.classList.add("active");
|
|
104
|
+
}
|
|
83
105
|
requestAnimationFrame(() => {
|
|
84
106
|
modalPopup.classList.add("open");
|
|
85
107
|
document.documentElement.classList.add("lock-position");
|
|
108
|
+
if (this.globalSettings.lenis) {
|
|
109
|
+
document.body.dataset.lenisPrevent = "true";
|
|
110
|
+
}
|
|
86
111
|
});
|
|
87
112
|
this.handleCloseButtonClicks();
|
|
88
113
|
} else {
|
|
@@ -90,8 +115,14 @@ export default class modalController {
|
|
|
90
115
|
}
|
|
91
116
|
}
|
|
92
117
|
closePopup(modalPopup) {
|
|
118
|
+
if (!modalPopup) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
93
121
|
modalPopup.classList.remove("open");
|
|
94
122
|
document.documentElement.classList.remove("lock-position");
|
|
123
|
+
if (this.globalSettings.lenis) {
|
|
124
|
+
delete document.body.dataset.lenisPrevent;
|
|
125
|
+
}
|
|
95
126
|
const popupContent = modalPopup.querySelector(
|
|
96
127
|
".modal-controller-popup__content"
|
|
97
128
|
);
|
|
@@ -100,9 +131,26 @@ export default class modalController {
|
|
|
100
131
|
const activeContents = popupContent.querySelectorAll(
|
|
101
132
|
"[data-modalpopupcontent].active"
|
|
102
133
|
);
|
|
134
|
+
const closeDelay = Number(this.globalSettings.closeDelay) || 0;
|
|
135
|
+
const closingClass = this.globalSettings.closingClass;
|
|
136
|
+
|
|
137
|
+
if (closeDelay > 0 && closingClass) {
|
|
138
|
+
activeContents.forEach((activeContent) => {
|
|
139
|
+
activeContent.classList.add(closingClass);
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
103
143
|
activeContents.forEach((activeContent) => {
|
|
104
144
|
activeContent.classList.remove("active");
|
|
105
145
|
});
|
|
146
|
+
|
|
147
|
+
if (closeDelay > 0 && closingClass) {
|
|
148
|
+
window.setTimeout(() => {
|
|
149
|
+
activeContents.forEach((activeContent) => {
|
|
150
|
+
activeContent.classList.remove(closingClass);
|
|
151
|
+
});
|
|
152
|
+
}, closeDelay);
|
|
153
|
+
}
|
|
106
154
|
}
|
|
107
155
|
}
|
|
108
156
|
closePopupOnClickOutside(event, modalPopup) {
|