@total_onion/onion-modalcontroller 1.0.2 → 1.0.5

package/onion-modalcontroller.js

@@ -1,3 +1,4 @@
+import lazyloader from "@pernod-ricard-global-cms/cbllazyloader";
 export default class modalController {
   constructor() {
     let defaultGlobalSettings = {
@@ -29,6 +30,15 @@ export default class modalController {
       this.closePopupOnClickOutside(event, modalPopup);
     });
   }
+  handleCloseButtonClicks() {
+    const closeButton = document.getElementById(
+      "modal-controller-popup__close-btn"
+    );
+    closeButton?.addEventListener("click", (event) => {
+      const modalPopup = document.getElementById("modal-controller-popup");
+      this.closePopup(modalPopup);
+    });
+  }
   handleModalTriggers() {
     this.globalModalTriggers.forEach((trigger) => {
       trigger.addEventListener("click", () => {
@@ -41,12 +51,13 @@ export default class modalController {
     if (!modalPopup) {
       const modalPopupHtml = `<div class="modal-controller-popup" id="modal-controller-popup">
       <div class="modal-controller-popup__container">
-      <span class="modal-controller-popup__close-btn" id="modal-controller-popup__close-btn">&times;</span>
+      <span class="modal-controller-popup__close-btn" id="modal-controller-popup__close-btn"></span>
       <div class="modal-controller-popup__content"></div>
       </div>
       </div>`;
       document.body.insertAdjacentHTML("beforeend", modalPopupHtml);
       modalPopup = document.getElementById("modal-controller-popup");
+      this.handleCloseButtonClicks();
     }
     if (!modalPopup) {
       return;
@@ -61,17 +72,30 @@ export default class modalController {
     popupContent.innerHTML = "";
     const modalPopupContent = document
       .querySelector(`[data-modalpopupcontent=${triggerName}]`)
-      .cloneNode(true);
+      ?.cloneNode(true);
 
     if (modalPopupContent) {
-      popupContent.appendChild(modalPopupContent);
-    }
-    modalPopup.classList.add("open");
-    document.documentElement.classList.add("lock-position");
+    popupContent.appendChild(modalPopupContent);
+    requestAnimationFrame(() => {
+      modalPopup.classList.add("open");
+      document.documentElement.classList.add("lock-position");
+      lazyloader.options.assetArray = [{"assetKey":"wysiwyg-text-content"},{"assetKey":"modal-form-v3"},{"assetKey":"video-content-v3"},{"assetKey":"theme-switcher"},{"assetKey":"text-block-3070"},{"assetKey":"sub-group-container-v3"},{"assetKey":"standard-content-v3"},{"assetKey":"spacer-v3"},{"assetKey":"spacer-v2"},{"assetKey":"social-networks-v3"},{"assetKey":"smash-balloon-social-media-v3"},{"assetKey":"slide-in-panel"},{"assetKey":"site-title-and-tagline-v3"},{"assetKey":"site-logo-container-v3"},{"assetKey":"site-footer"},{"assetKey":"site-copyright-notice"},{"assetKey":"single-responsive-image-v3"},{"assetKey":"single-column-container-v3"},{"assetKey":"section-separator-v3"},{"assetKey":"scrolling-text"},{"assetKey":"reserve-buy-bar"},{"assetKey":"raw-html"},{"assetKey":"product-info-v3"},{"assetKey":"post-type-filter-grid-v2"},{"assetKey":"post-info-v3"},{"assetKey":"nav-menu-container"},{"assetKey":"nav-menu-container-v3"},{"assetKey":"market-selector-v3"},{"assetKey":"lottie-content-v3"},{"assetKey":"iframe-container"},{"assetKey":"group-container-v3"},{"assetKey":"gradient-layer-v3"},{"assetKey":"form-selection-v3"},{"assetKey":"feature-carousel"},{"assetKey":"divider-v3"},{"assetKey":"debrain-label-shop"},{"assetKey":"cover-link-v3"},{"assetKey":"competition"},{"assetKey":"cocktail-recipe"},{"assetKey":"cocktail-intro-copy"},{"assetKey":"carousel-thumbnail-gallery"},{"assetKey":"carousel-multi-layout-v3"},{"assetKey":"carousel-multi-layout-v2"},{"assetKey":"card-content"},{"assetKey":"card-carousel"},{"assetKey":"block-interactions-v3"},{"assetKey":"betterreviews-display"},{"assetKey":"betterreviews-display-v3"},{"assetKey":"accordion-v3"},{"assetKey":"accent-image-v3"}];
+      lazyloader.lazyloaderInit();
+    });
+    this.handleCloseButtonClicks();
+  } else {
+    this.closePopup(modalPopup);
+  }
   }
   closePopup(modalPopup) {
     modalPopup.classList.remove("open");
     document.documentElement.classList.remove("lock-position");
+    const popupContent = modalPopup.querySelector(".modal-controller-popup__content");
+    if (popupContent) {
+      setTimeout(() => {
+        popupContent.innerHTML = "";
+      }, 300);
+    }
   }
   closePopupOnClickOutside(event, modalPopup) {
     if (event.target === modalPopup) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@total_onion/onion-modalcontroller",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Pop up modal controller",
   "main": "onion-modalcontroller.js",
   "scripts": {
@@ -15,5 +15,11 @@
   "bugs": {
     "url": "https://github.com/TotalOnion/onion-modalcontroller/issues"
   },
-  "homepage": "https://github.com/TotalOnion/onion-modalcontroller#readme"
+  "homepage": "https://github.com/TotalOnion/onion-modalcontroller#readme",
+  "devDependencies": {
+    "@total_onion/onion-loader": "^1.0.1"
+  },
+  "dependencies": {
+    "@pernod-ricard-global-cms/cbllazyloader": "^2.1.2"
+  }
 }