@total_onion/onion-modalcontroller 1.0.17 → 1.1.0

package/onion-modalcontroller.js

@@ -1,10 +1,14 @@
 export default class modalController {
-  constructor() {
+  constructor(settings = {}) {
     let defaultGlobalSettings = {
       bodyClass: "modal-active",
       activeStateClass: "modal-active",
       enableDebugLogs: true,
       userInteracted: false,
+      closeSelector: "#modal-controller-popup__close-btn",
+      closeDelay: 0,
+      closingClass: "",
+      activateDelay: 0,
     };
     this.scanForNewTriggers();
 
@@ -12,7 +16,7 @@ export default class modalController {
       return modalController.instance;
     }
     modalController.instance = this;
-    this.globalSettings = defaultGlobalSettings;
+    this.globalSettings = { ...defaultGlobalSettings, ...settings };
     this.enableDebugLogs = this.globalSettings.enableDebugLogs;
     this.handleModalTriggers();
     this.handleBgClicks();
@@ -30,12 +34,22 @@ export default class modalController {
     });
   }
   handleCloseButtonClicks() {
-    const closeButton = document.getElementById(
-      "modal-controller-popup__close-btn"
+    const modalPopup = document.getElementById("modal-controller-popup");
+    if (!modalPopup) {
+      return;
+    }
+    const closeButtons = modalPopup.querySelectorAll(
+      this.globalSettings.closeSelector || "#modal-controller-popup__close-btn"
     );
-    closeButton?.addEventListener("click", (event) => {
-      const modalPopup = document.getElementById("modal-controller-popup");
-      this.closePopup(modalPopup);
+    closeButtons.forEach((closeButton) => {
+      if (closeButton.dataset.modalpopupCloseBound === "true") {
+        return;
+      }
+      closeButton.dataset.modalpopupCloseBound = "true";
+      closeButton.addEventListener("click", () => {
+        const modalPopup = document.getElementById("modal-controller-popup");
+        this.closePopup(modalPopup);
+      });
     });
   }
   handleModalTriggers() {
@@ -56,7 +70,6 @@ export default class modalController {
       </div>`;
       document.body.insertAdjacentHTML("beforeend", modalPopupHtml);
       modalPopup = document.getElementById("modal-controller-popup");
-      this.handleCloseButtonClicks();
     }
     if (!modalPopup) {
       return;
@@ -79,7 +92,15 @@ export default class modalController {
       ) {
         popupContent.appendChild(modalPopupContent);
       }
-      modalPopupContent.classList.add("active");
+      const activateDelay = Number(this.globalSettings.activateDelay) || 0;
+      if (activateDelay > 0) {
+        modalPopupContent.classList.remove("active");
+        window.setTimeout(() => {
+          modalPopupContent.classList.add("active");
+        }, activateDelay);
+      } else {
+        modalPopupContent.classList.add("active");
+      }
       requestAnimationFrame(() => {
         modalPopup.classList.add("open");
         document.documentElement.classList.add("lock-position");
@@ -90,6 +111,9 @@ export default class modalController {
     }
   }
   closePopup(modalPopup) {
+    if (!modalPopup) {
+      return;
+    }
     modalPopup.classList.remove("open");
     document.documentElement.classList.remove("lock-position");
     const popupContent = modalPopup.querySelector(
@@ -100,9 +124,26 @@ export default class modalController {
       const activeContents = popupContent.querySelectorAll(
         "[data-modalpopupcontent].active"
       );
+      const closeDelay = Number(this.globalSettings.closeDelay) || 0;
+      const closingClass = this.globalSettings.closingClass;
+
+      if (closeDelay > 0 && closingClass) {
+        activeContents.forEach((activeContent) => {
+          activeContent.classList.add(closingClass);
+        });
+      }
+
       activeContents.forEach((activeContent) => {
         activeContent.classList.remove("active");
       });
+
+      if (closeDelay > 0 && closingClass) {
+        window.setTimeout(() => {
+          activeContents.forEach((activeContent) => {
+            activeContent.classList.remove(closingClass);
+          });
+        }, closeDelay);
+      }
     }
   }
   closePopupOnClickOutside(event, modalPopup) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@total_onion/onion-modalcontroller",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "description": "Pop up modal controller",
   "main": "onion-modalcontroller.js",
   "scripts": {