@innovastudio/contentbuilder 1.4.98 → 1.4.99

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.98",
+  "version": "1.4.99",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -4215,14 +4215,16 @@ class Util {
   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);
@@ -4286,6 +4288,7 @@ class Util {
       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');
@@ -4295,6 +4298,7 @@ class Util {
       }
     }
     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);
@@ -49926,7 +49930,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)
@@ -50146,7 +50150,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)
@@ -50201,7 +50205,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;
@@ -50227,7 +50231,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;
@@ -53012,7 +53016,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)
@@ -53041,7 +53045,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;
@@ -54931,7 +54935,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)
@@ -55124,7 +55128,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)
@@ -59257,7 +59261,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)
@@ -60100,7 +60104,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)
@@ -60165,7 +60169,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 = () => {
@@ -60185,7 +60189,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 = () => {
@@ -60598,7 +60602,7 @@ class ColumnTool {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
   readImageAdjust(elm, useTarget) {
@@ -68850,7 +68854,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;
@@ -75960,7 +75967,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;
@@ -76123,7 +76130,7 @@ class MediaPicker {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
-    });
+    }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
 }
@@ -78984,24 +78991,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',
@@ -79690,6 +79698,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;
@@ -81056,7 +81084,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;
@@ -81121,7 +81152,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;
@@ -81532,8 +81566,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.
@@ -81544,13 +81578,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'
     });