@innovastudio/contentbox 1.6.134 → 1.6.135

package/index.d.ts

@@ -364,6 +364,16 @@ interface ContentBoxOptions {
     //---
 }
 
+interface OpenModalOptions {
+    w?: string; // modal width (e.g. "500px", "100%")
+    maxW?: string; // max width
+    h?: string; // modal height
+    extraStyle?: string; // inline extra styles
+    ariaLabel?: string; // accessibility label
+    onOpen?: (modal: HTMLElement, iframe: HTMLIFrameElement) => void; // callback when opened
+    onClose?: (modal: HTMLElement, iframe: HTMLIFrameElement) => void; // callback when closed
+}
+
 declare class ContentBox {
     constructor(options: ContentBoxOptions);
 
@@ -390,7 +400,7 @@ declare class ContentBox {
     viewHtml(): void;
     toggleEditPanel(): void;
     getWrapper(): HTMLElement;
-
+    openModal(url: string, options?: OpenModalOptions): void;
     screenMode: string;
 }
 export default ContentBox;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.134",
+  "version": "1.6.135",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",

package/public/contentbox/contentbox.css

@@ -3174,6 +3174,17 @@ body.fullview.topspace .is-content-view iframe {
   transition: none !important;
 }
 
+/* Custom Model for openModal() */
+#_cbhtml .is-modal.custom-modal button.modal-close {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  font-size: 23px;
+  background: transparent !important;
+}
+
 /* content.css */
 #_cbhtml {
   /* Text Formatting */

package/public/contentbox/contentbox.esm.js

@@ -164287,6 +164287,52 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     }, 400);
   }
 
+  openModal(url, prop = {}) {
+    const defaults = {
+      w: '88vw',
+      maxW: '1600px',
+      h: '88vh',
+      extraStyle: '',
+      ariaLabel: 'Modal',
+      showCloseButton: false
+    };
+    const config = { ...defaults,
+      ...prop
+    };
+    const html = `
+            <div class="is-modal custom-modal" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div style="width:${config.w};max-width:${config.maxW};height:${config.h};padding:0;${config.extraStyle}">
+                    <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
+                </div>
+            </div>        
+        `;
+    const oldModal = this.builderStuff.querySelector('.is-modal.custom-modal');
+    if (oldModal) oldModal.remove();
+    this.builderStuff.insertAdjacentHTML('beforeend', html);
+    const modal = this.builderStuff.querySelector('.is-modal.custom-modal');
+    modal.setAttribute('aria-label', config.ariaLabel);
+    const iframe = modal.querySelector('iframe');
+    iframe.src = url;
+
+    if (config.showCloseButton) {
+      const closeBtn = document.createElement('button');
+      closeBtn.innerHTML = `
+            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+            `;
+      closeBtn.className = 'modal-close';
+      closeBtn.addEventListener('click', () => {
+        modal.remove();
+        if (typeof config.onClose === 'function') config.onClose(modal, iframe);
+      });
+      modal.querySelector('div').prepend(closeBtn);
+    }
+
+    if (typeof config.onOpen === 'function') config.onOpen(modal, iframe);
+    this.editor.util.showModal(modal, false, () => {
+      if (typeof config.onClose === 'function') config.onClose(modal, iframe);
+    });
+  }
+
   boxImage(url, err) {
     if (!this.controlPanel) {
       this.editbox.boxImage(url, err);