@innovastudio/contentbox 1.6.134 → 1.6.136

package/index.d.ts

@@ -364,10 +364,23 @@ 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);
 
     boxImage(url: string, err?: string): void;
+    selectAsset(url: string): void;
+    hideModal(modal?: HTMLElement): void;
+    closeAsset(): void;
     returnUrl(s: string): void;
     htmlCheck(): void;
     loadHtml(html: string): void;
@@ -390,7 +403,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.136",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.125",
+    "@innovastudio/contentbuilder": "^1.5.126",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

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

@@ -121360,6 +121360,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     window.selectImage = this.selectImage.bind(this);
     window.selectVideo = this.selectVideo.bind(this);
     window.selectAsset = this.selectAsset.bind(this);
+    window.closeAsset = this.closeAsset.bind(this);
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
     window.generateImage = this.generateImage.bind(this);
@@ -123865,6 +123866,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.util._hideModal(modal); // this _hideModal will also trigger cancelCallback defined by showModal. This is done by programmatically click the overlay.
   }
 
+  closeAsset() {
+    let modal = document.querySelector('.is-modal.videoselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.imageselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.fileselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.audioselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.mediaselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.otherselect.active');
+    if (modal) this.hideModal(modal);
+  }
   draggable(selector) {
     new Draggable$2({
       selector: selector
@@ -164124,6 +164139,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.editor.hideModal(modal);
   }
 
+  selectAsset(url) {
+    this.editor.selectAsset(url);
+  }
+
+  closeAsset() {
+    this.editor.closeAsset();
+  }
+
   refreshModule() {
     this.box.refreshModule();
   }
@@ -164287,6 +164310,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);