@innovastudio/contentbox 1.5.77 → 1.5.78

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.77",
+  "version": "1.5.78",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -51,7 +51,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.98",
+    "@innovastudio/contentbuilder": "^1.4.99",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -19333,14 +19333,16 @@ class Util$1 {
   Note:
   - hideModal will remove the modal element, so calling show modal multiple times won't attach multiple events (safe).
   */
-  showModal(modal, overlayStay, cancelCallback, animated) {
+  showModal(modal, overlayStay, cancelCallback, animated, overflowHidden) {
     const dom = this.dom;
     dom.addClass(modal, 'active');
     modal.setAttribute('aria-hidden', false);
+    if (overflowHidden) document.body.style.overflow = 'hidden';
     const handleKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
 
+        if (overflowHidden) document.body.style.overflow = '';
         if (dom.hasClass(modal, 'active')) this.hideModal(modal); // check first in case programmatically ESC key that already call hideModal is triggered (see _hideModal)
 
         modal.removeEventListener('keydown', handleKeyDown);
@@ -19404,6 +19406,7 @@ class Util$1 {
       if (!overlayStay) {
         let overlay = modal.querySelector('.is-modal-overlay');
         dom.addEventListener(overlay, 'click', () => {
+          if (overflowHidden) document.body.style.overflow = '';
           this.hideModal(modal);
           modal.removeEventListener('keydown', handleKeyDown);
           const btnClose = modal.querySelector('.is-modal-close');
@@ -19413,6 +19416,7 @@ class Util$1 {
       }
     }
     const close = () => {
+      if (overflowHidden) document.body.style.overflow = '';
       if (dom.hasClass(modal, 'active')) this.hideModal(modal); // check first in case programmatically ESC key that already call hideModal is triggered (see _hideModal)
 
       modal.removeEventListener('keydown', handleKeyDown);
@@ -65044,7 +65048,7 @@ class Image$1 {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
@@ -65264,7 +65268,7 @@ class Image$1 {
             util.showModal(modalImageSelect, false, () => {
               btnImageSelect.removeAttribute('data-focus');
               btnImageSelect.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modalImageLink.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -65319,7 +65323,7 @@ class Image$1 {
             util.showModal(modalFileSelect, false, () => {
               btnImageSelect2.removeAttribute('data-focus');
               btnImageSelect2.focus();
-            }, true);
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect2.setAttribute('data-focus', true);
             this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = null;
@@ -65345,7 +65349,7 @@ class Image$1 {
             util.showModal(modalImageSelect, false, () => {
               btnImageSelect2.removeAttribute('data-focus');
               btnImageSelect2.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             btnImageSelect2.setAttribute('data-focus', true);
             this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = null;
@@ -68130,7 +68134,7 @@ class Hyperlink {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = modal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -68159,7 +68163,7 @@ class Hyperlink {
             if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
               modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
             }
-            util.showModal(modalFileSelect, false, null, false);
+            util.showModal(modalFileSelect, false, null, false, this.builder.assetPanelFullScreen);
           }
           this.builder.targetInput = modal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = null;
@@ -70049,7 +70053,7 @@ class Video {
           util.showModal(modalVideoSelect, false, () => {
             inpSelectVideo.removeAttribute('data-focus');
             inpSelectVideo.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           inpSelectVideo.setAttribute('data-focus', true);
         }
         this.builder.targetInput = videoModal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -70242,7 +70246,7 @@ class Audio {
           util.showModal(modalAudioSelect, false, () => {
             inpSelectAudio.removeAttribute('data-focus');
             inpSelectAudio.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           inpSelectAudio.setAttribute('data-focus', true);
         }
         this.builder.targetInput = audioModal.querySelector('.input-url'); // used by selectAsset() (see contentbuilder.js)
@@ -74375,7 +74379,7 @@ class ColumnTool {
             util.showModal(modalImageSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
           }
           this.builder.targetInput = imageSource.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -75218,7 +75222,7 @@ class ColumnTool {
             util.showModal(modalFileSelect, false, () => {
               inputSelectOther.removeAttribute('data-focus');
               inputSelectOther.focus();
-            }, false);
+            }, false, this.builder.assetPanelFullScreen);
             inputSelectOther.setAttribute('data-focus', true);
           }
           this.builder.targetInput = this.cellSettings.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
@@ -75283,7 +75287,7 @@ class ColumnTool {
             util.showModal(modalMediaSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
             this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = () => {
@@ -75303,7 +75307,7 @@ class ColumnTool {
             util.showModal(modalImageSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
-            });
+            }, false, this.builder.assetPanelFullScreen);
             elm.setAttribute('data-focus', true);
             this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
             this.builder.targetCallback = () => {
@@ -75716,7 +75720,7 @@ class ColumnTool {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
   readImageAdjust(elm, useTarget) {
@@ -83968,7 +83972,10 @@ class Rte {
           if (iframe.src === 'about:blank') {
             iframe.src = this.builder.opts.imageselect;
           }
-          util.showModal(modalImageSelect);
+          util.showModal(modalImageSelect, false, () => {
+            inputImageSelect.removeAttribute('data-focus');
+            inputImageSelect.focus();
+          }, false, this.builder.assetPanelFullScreen);
         }
         this.builder.targetInput = modalInsertImage.querySelector('.input-src'); // used by selectAsset() (see contentbuilder.js)
         this.builder.targetCallback = null;
@@ -91078,7 +91085,7 @@ class MediaPicker {
           this.builder.util.showModal(modal, false, () => {
             elm.removeAttribute('data-focus');
             elm.focus();
-          });
+          }, false, this.builder.assetPanelFullScreen);
           elm.setAttribute('data-focus', true);
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = null;
@@ -91241,7 +91248,7 @@ class MediaPicker {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
 }
@@ -94102,24 +94109,25 @@ class ContentBuilder {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '80vw',
-      imageSelectHeight: '80vh',
-      fileSelectWidth: '80vw',
-      fileSelectHeight: '80vh',
-      videoSelectWidth: '80vw',
-      videoSelectHeight: '80vh',
-      audioSelectWidth: '80vw',
-      audioSelectHeight: '80vh',
-      mediaSelectWidth: '80vw',
-      mediaSelectHeight: '80vh',
-      otherSelectWidth: '80vw',
-      otherSelectHeight: '80vh',
+      imageSelectWidth: '88vw',
+      imageSelectHeight: '88vh',
+      fileSelectWidth: '88vw',
+      fileSelectHeight: '88vh',
+      videoSelectWidth: '88vw',
+      videoSelectHeight: '88vh',
+      audioSelectWidth: '88vw',
+      audioSelectHeight: '88vh',
+      mediaSelectWidth: '88vw',
+      mediaSelectHeight: '88vh',
+      otherSelectWidth: '88vw',
+      otherSelectHeight: '88vh',
       imageSelectMaxWidth: '1600px',
       fileSelectMaxWidth: '1600px',
       videoSelectMaxWidth: '1600px',
       audioSelectMaxWidth: '1600px',
       mediaSelectMaxWidth: '1600px',
       otherSelectMaxWidth: '1600px',
+      assetPanelFullScreen: false,
       codeEditorWidth: '80vw',
       codeEditorHeight: '80vh',
       codeEditorMaxWidth: '1600px',
@@ -94808,6 +94816,26 @@ class ContentBuilder {
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
     }
+    if (this.assetPanelFullScreen) {
+      this.imageSelectWidth = '100vw';
+      this.imageSelectHeight = '100vh';
+      this.fileSelectWidth = '100vw';
+      this.fileSelectHeight = '100vh';
+      this.videoSelectWidth = '100vw';
+      this.videoSelectHeight = '100vh';
+      this.audioSelectWidth = '100vw';
+      this.audioSelectHeight = '100vh';
+      this.mediaSelectWidth = '100vw';
+      this.mediaSelectHeight = '100vh';
+      this.otherSelectWidth = '100vw';
+      this.otherSelectHeight = '100vh';
+      this.imageSelectMaxWidth = '100vw';
+      this.fileSelectMaxWidth = '100vw';
+      this.videoSelectMaxWidth = '100vw';
+      this.audioSelectMaxWidth = '100vw';
+      this.mediaSelectMaxWidth = '100vw';
+      this.otherSelectMaxWidth = '100vw';
+    }
 
     // if(this.opts.largerImageHandler!=='') {
     //     this.opts.mediaHandler = this.opts.largerImageHandler;
@@ -96174,7 +96202,10 @@ class ContentBuilder {
       let modal = this.builderStuff.querySelector('.is-modal.otherselect');
       iframe = modal.querySelector('iframe');
       if (iframe.src === 'about:blank') iframe.src = this.opts.otherSelect;
-      this.util.showModal(modal);
+      this.util.showModal(modal, false, () => {
+        theTrigger.removeAttribute('data-focus');
+        theTrigger.focus();
+      }, false, this.assetPanelFullScreen);
       this.targetInput = targetInput; // used by selectAsset() (see contentbuilder.js)
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
@@ -96239,7 +96270,10 @@ class ContentBuilder {
         iframe = modal.querySelector('iframe');
         if (iframe.src === 'about:blank') iframe.src = this.opts.fileSelect;
       }
-      this.util.showModal(modal);
+      this.util.showModal(modal, false, () => {
+        theTrigger.removeAttribute('data-focus');
+        theTrigger.focus();
+      }, false, this.assetPanelFullScreen);
       this.targetInput = targetInput; // used by selectAsset() (see contentbuilder.js)
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
@@ -96650,8 +96684,8 @@ class ContentBuilder {
       });
     }
   }
-  showModal(modal, overlayStay, cancelCallback, animated) {
-    this.util.showModal(modal, overlayStay, cancelCallback, animated);
+  showModal(modal, overlayStay, cancelCallback, animated, overflowHidden) {
+    this.util.showModal(modal, overlayStay, cancelCallback, animated, overflowHidden);
   }
   hideModal(modal) {
     this.util._hideModal(modal); // this _hideModal will also trigger cancelCallback defined by showModal. This is done by programmatically click the overlay.
@@ -96662,13 +96696,13 @@ class ContentBuilder {
       selector: selector
     });
   }
-  createModal(modal, selector, overlayStay, cancelCallback, animated) {
+  createModal(modal, selector, overlayStay, cancelCallback, animated, overflowHidden) {
     let embeddedModal = this.builderStuff.querySelector(selector);
     if (!embeddedModal) {
       this.builderStuff.appendChild(modal);
       embeddedModal = this.builderStuff.querySelector(selector);
     }
-    this.showModal(embeddedModal, overlayStay, cancelCallback, animated);
+    this.showModal(embeddedModal, overlayStay, cancelCallback, animated, overflowHidden);
     new Draggable$1({
       selector: '.is-draggable'
     });
@@ -115349,24 +115383,25 @@ class ContentBox {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '80vw',
-      imageSelectHeight: '80vh',
-      fileSelectWidth: '80vw',
-      fileSelectHeight: '80vh',
-      videoSelectWidth: '80vw',
-      videoSelectHeight: '80vh',
-      audioSelectWidth: '80vw',
-      audioSelectHeight: '80vh',
-      mediaSelectWidth: '80vw',
-      mediaSelectHeight: '80vh',
-      otherSelectWidth: '80vw',
-      otherSelectHeight: '80vh',
+      imageSelectWidth: '88vw',
+      imageSelectHeight: '88vh',
+      fileSelectWidth: '88vw',
+      fileSelectHeight: '88vh',
+      videoSelectWidth: '88vw',
+      videoSelectHeight: '88vh',
+      audioSelectWidth: '88vw',
+      audioSelectHeight: '88vh',
+      mediaSelectWidth: '88vw',
+      mediaSelectHeight: '88vh',
+      otherSelectWidth: '88vw',
+      otherSelectHeight: '88vh',
       imageSelectMaxWidth: '1600px',
       fileSelectMaxWidth: '1600px',
       videoSelectMaxWidth: '1600px',
       audioSelectMaxWidth: '1600px',
       mediaSelectMaxWidth: '1600px',
       otherSelectMaxWidth: '1600px',
+      assetPanelFullScreen: false,
       codeEditorWidth: '80vw',
       codeEditorHeight: '80vh',
       codeEditorMaxWidth: '1600px',
@@ -118592,6 +118627,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       audioSelectMaxWidth: this.settings.audioSelectMaxWidth,
       mediaSelectMaxWidth: this.settings.mediaSelectMaxWidth,
       otherSelectMaxWidth: this.settings.otherSelectMaxWidth,
+      assetPanelFullScreen: this.settings.assetPanelFullScreen,
       codeEditorWidth: this.settings.codeEditorWidth,
       codeEditorHeight: this.settings.codeEditorHeight,
       codeEditorMaxWidth: this.settings.codeEditorMaxWidth,
@@ -120914,8 +120950,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     this.editor.util.showChoice(message, yestext, callback);
   }
 
-  showModal(modal, overlayStay, cancelCallback, animated) {
-    this.editor.util.showModal(modal, overlayStay, cancelCallback, animated);
+  showModal(modal, overlayStay, cancelCallback, animated, overflowHidden) {
+    this.editor.util.showModal(modal, overlayStay, cancelCallback, animated, overflowHidden);
   }
 
   hideModal(modal) {