@innovastudio/contentbox 1.4.31 → 1.4.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.31",
+  "version": "1.4.33",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.34",
+    "@innovastudio/contentbuilder": "^1.3.37",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -479,6 +479,10 @@
 .is-wrapper.is-edit {
   padding-left: 60px;
 }
+.is-wrapper.is-edit > div {
+  overflow-x: unset;
+  overflow-y: unset;
+}
 .is-wrapper .transition-edit.is-section {
   transition: all 0.2s ease !important;
 }

package/public/contentbox/contentbox.esm.js

@@ -62736,7 +62736,7 @@ class Image$1 {
                             <input id="inpImageLinkLink" class="input-link" type="text" style="width:100%;border-top: none;"/>
                             <button title="${util.out('Select')}" class="input-select2" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                             <div class="image-larger2" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
-                                <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
+                                <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
                                     <input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
@@ -62764,6 +62764,12 @@ class Image$1 {
                     </div>
                 </div>
 
+                <div class="is-modal mediaselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                    <div style="max-width:800px;height:80%;padding:0;">
+                        <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
+                    </div>
+                </div>
+
                 <div id="divImageResizerOverlay" class="is-tool">
                 </div>
                 <div id="divImageResizer" data-x=0 data-y=0 class="is-tool moveable resizable">
@@ -63321,7 +63327,9 @@ class Image$1 {
         dom.addClass(frmUpload, 'please-wait');
         modalImageLink.querySelector('#hidRefId2').value = this.builder.opts.customval;
 
-        if (this.builder.opts.onLargerImageUpload) {
+        if (this.builder.opts.onFileUpload) {
+          this.builder.opts.onFileUpload(e);
+        } else if (this.builder.opts.onLargerImageUpload) {
           this.builder.opts.onLargerImageUpload(e);
         } else {
           frmUpload.submit();
@@ -71956,7 +71964,7 @@ class ColumnTool {
       } // Select image (opens Asset Manager plugin or custom dialog)
 
 
-      if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
+      if (this.builder.opts.onMediaSelectClick || this.builder.opts.mediaSelect || this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
         const inpSrc = this.cellSettings.querySelector('.input-src');
         elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
@@ -71969,36 +71977,34 @@ class ColumnTool {
 
           this.builder.targetAssetType = 'media'; //---/default
 
-          if (this.builder.opts.onFileSelectClick) {
-            this.builder.opts.onFileSelectClick({
+          if (this.builder.opts.onMediaSelectClick) {
+            this.builder.opts.onMediaSelectClick({
               targetInput: inpSrc,
               theTrigger: elm
-            });
-            dom.observeElement(inpSrc, 'value', () => {
-              this.applyClick();
-            });
+            }); // dom.observeElement(inpSrc, 'value', () => {
+            //     this.applyClick();
+            // });
           } else if (this.builder.opts.onImageSelectClick) {
             this.builder.opts.onImageSelectClick({
               targetInput: inpSrc,
               theTrigger: elm
-            });
-            dom.observeElement(inpSrc, 'value', () => {
-              this.applyClick();
-            });
-          } else if (this.builder.opts.fileselect) {
-            let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
-            let iframe = modalFileSelect.querySelector('iframe');
+            }); // dom.observeElement(inpSrc, 'value', () => {
+            //     this.applyClick();
+            // });
+          } else if (this.builder.opts.mediaSelect) {
+            let modalMediaSelect = builderStuff.querySelector('.is-modal.mediaselect');
+            let iframe = modalMediaSelect.querySelector('iframe');
 
             if (this.builder.opts.assetRefresh) {
-              iframe.src = this.builder.opts.fileselect;
+              iframe.src = this.builder.opts.mediaSelect;
               this.builder.opts.assetRefresh = false;
             }
 
             if (iframe.src === 'about:blank') {
-              iframe.src = this.builder.opts.fileselect;
+              iframe.src = this.builder.opts.mediaSelect;
             }
 
-            util.showModal(modalFileSelect, false, () => {
+            util.showModal(modalMediaSelect, false, () => {
               elm.removeAttribute('data-focus');
               elm.focus();
             });
@@ -72055,7 +72061,9 @@ class ColumnTool {
         dom.addClass(frmUpload, 'please-wait');
         this.cellSettings.querySelector('#hidRefId4').value = this.builder.opts.customval;
 
-        if (this.builder.opts.onLargerImageUpload) {
+        if (this.builder.opts.onMediaUpload) {
+          this.builder.opts.onMediaUpload(e);
+        } else if (this.builder.opts.onLargerImageUpload) {
           this.builder.opts.onLargerImageUpload(e);
         } else {
           frmUpload.submit();
@@ -87477,6 +87485,12 @@ class ContentBuilder {
       // onAdd: function(){},
       largerImageHandler: '',
       // onLargerImageUpload: function(){},
+      imageHandler: '',
+      // NEW: for image
+      // onImageUpload: function(){}, // NEW: for image
+      fileHandler: '',
+      // NEW: for file/document
+      // onFileUpload: function(){}, // NEW: for file/document
       mediaHandler: '',
       // onMediaUpload: function(){},
       videoHandler: '',
@@ -87506,6 +87520,7 @@ class ContentBuilder {
       // onFileSelectClick: function () { },
       // onVideoSelectClick: function () { },
       // onAudioSelectClick: function () { },
+      // onMediaSelectClick: function () { }, // NEW: for image & video
       // onPluginsLoaded: function () { },
       // onImageBrowseClick: function () { },
       // onImageSettingClick: function () { },
@@ -87534,6 +87549,8 @@ class ContentBuilder {
       fileSelect: '',
       videoSelect: '',
       audioSelect: '',
+      mediaSelect: '',
+      // NEW: for image & video
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
@@ -87995,18 +88012,34 @@ class ContentBuilder {
       this.opts.videoselect = this.opts.videoSelect;
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
+    } // if(this.opts.largerImageHandler!=='') {
+    //     this.opts.mediaHandler = this.opts.largerImageHandler;
+    // } else if(this.opts.mediaHandler!=='') {
+    //     this.opts.largerImageHandler = this.opts.mediaHandler;
+    // }
+    // if(this.opts.onLargerImageUpload) {
+    //     this.opts.onMediaUpload = this.opts.onLargerImageUpload;
+    // } else if(this.opts.onMediaUpload) {
+    //     this.opts.onLargerImageUpload = this.opts.onMediaUpload;
+    // }
+    // Just in case
+
+
+    if (!this.opts.onImageUpload && !this.opts.onLargerImageUpload) {
+      this.opts.onImageUpload = this.opts.onMediaUpload;
     }
 
-    if (this.opts.largerImageHandler !== '') {
-      this.opts.mediaHandler = this.opts.largerImageHandler;
-    } else if (this.opts.mediaHandler !== '') {
-      this.opts.largerImageHandler = this.opts.mediaHandler;
+    if (!this.opts.imageHandler && !this.opts.largerImageHandler) {
+      this.opts.imageHandler = this.opts.mediaHandler;
+    } // Currently used: largerImageHandler & onLargerImageUpload (as in elementimage.js)
+
+
+    if (this.opts.imageHandler !== '') {
+      this.opts.largerImageHandler = this.opts.imageHandler;
     }
 
-    if (this.opts.onLargerImageUpload) {
-      this.opts.onMediaUpload = this.opts.onLargerImageUpload;
-    } else if (this.opts.onMediaUpload) {
-      this.opts.onLargerImageUpload = this.opts.onMediaUpload;
+    if (this.opts.onImageUpload) {
+      this.opts.onLargerImageUpload = this.opts.onImageUpload;
     } // useButtonPlugin
 
 
@@ -89217,6 +89250,8 @@ class ContentBuilder {
       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);
     }
   }
 
@@ -89285,9 +89320,9 @@ class ContentBuilder {
   }
 
   openAsset(targetInput, targetAssetType, theTrigger) {
-    if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
-      if (this.opts.onFileSelectClick) {
-        this.opts.onFileSelectClick({
+    if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
+      if (this.opts.onMediaSelectClick) {
+        this.opts.onMediaSelectClick({
           targetInput: targetInput,
           theTrigger: theTrigger
         });
@@ -89307,6 +89342,11 @@ class ContentBuilder {
         targetInput: targetInput,
         theTrigger: theTrigger
       });
+    } else if (targetAssetType === 'audio' && this.opts.onAudioSelectClick) {
+      this.opts.onAudioSelectClick({
+        targetInput: targetInput,
+        theTrigger: theTrigger
+      });
     } else if (targetAssetType === 'all' && this.opts.onFileSelectClick) {
       this.opts.onFileSelectClick({
         targetInput: targetInput,
@@ -89317,9 +89357,12 @@ class ContentBuilder {
       let modal;
 
       if (targetAssetType === 'media') {
-        modal = this.builderStuff.querySelector('.is-modal.fileselect');
+        modal = this.builderStuff.querySelector('.is-modal.mediaselect');
         iframe = modal.querySelector('iframe');
-        if (iframe.src === 'about:blank') iframe.src = this.opts.fileSelect;
+
+        if (iframe.src === 'about:blank') {
+          if (this.opts.mediaSelect) iframe.src = this.opts.mediaSelect;else if (this.opts.imageSelect) iframe.src = this.opts.imageSelect;
+        }
       } else if (targetAssetType === 'video') {
         modal = this.builderStuff.querySelector('.is-modal.videoselect');
         iframe = modal.querySelector('iframe');
@@ -89328,6 +89371,10 @@ class ContentBuilder {
         modal = this.builderStuff.querySelector('.is-modal.imageselect');
         iframe = modal.querySelector('iframe');
         if (iframe.src === 'about:blank') iframe.src = this.opts.imageSelect;
+      } else if (targetAssetType === 'audio') {
+        modal = this.builderStuff.querySelector('.is-modal.audioselect');
+        iframe = modal.querySelector('iframe');
+        if (iframe.src === 'about:blank') iframe.src = this.opts.audioSelect;
       } else if (targetAssetType === 'all') {
         modal = this.builderStuff.querySelector('.is-modal.fileselect');
         iframe = modal.querySelector('iframe');
@@ -93599,10 +93646,10 @@ class AnimateScroll {
       if (!activeElement) return;
       this.builder.editor.saveForUndo();
       this.cleanup(activeElement);
-      this.read();
       activeElement.style.transform = '';
       activeElement.style.transition = '';
       activeElement.style.opacity = '';
+      this.read();
 
       if (this.builder.win.skrollrr) {
         this.builder.win.skrollrr.refresh();
@@ -93923,10 +93970,10 @@ class AnimateScroll {
       if (!activeElement) return;
       this.builder.editor.saveForUndo();
       this.cleanup_leave(activeElement);
-      this.read();
       activeElement.style.transform = '';
       activeElement.style.transition = '';
       activeElement.style.opacity = '';
+      this.read();
 
       if (this.builder.win.skrollrr) {
         this.builder.win.skrollrr.refresh();
@@ -94654,7 +94701,7 @@ class AnimateScroll {
 
   readTarget(s) {
     if (!s) {
-      // element
+      // element (inspectedElement first)
       let activeElement = this.builder.editor.inspectedElement;
       if (!activeElement) return false; // enter start
 
@@ -94719,6 +94766,7 @@ class AnimateScroll {
           'name': s
         };
       } else {
+        if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
         if (s === 'container') return false;
@@ -94957,6 +95005,7 @@ class ContentBox {
       videoselect: '',
       videoSelect: '',
       audioSelect: '',
+      mediaSelect: '',
       slider: '',
       navbar: false,
       onRender: function () {},
@@ -94968,6 +95017,7 @@ class ContentBox {
       // onFileSelectClick: function () { },
       // onVideoSelectClick: function () { },
       // onAudioSelectClick: function () { },
+      // onMediaSelectClick: function () { },
       // onPluginsLoaded: function () { },
       coverImageHandler: '',
       // onUploadCoverImage: function () { },
@@ -94979,12 +95029,16 @@ class ContentBox {
       moduleConfig: [],
       largerImageHandler: '',
       // onLargerImageUpload: function(){},
+      imageHandler: '',
+      // onImageUpload: function(){},
       mediaHandler: '',
       // onMediaUpload: function(){},
       videoHandler: '',
       // onVideoUpload: function(){},
       audioHandler: '',
       // onAudioUpload: function(){},
+      fileHandler: '',
+      // onFileUpload: function(){},
       cellFormat: '',
       rowFormat: '',
       row: '',
@@ -97322,19 +97376,17 @@ class ContentBox {
       this.settings.videoselect = this.settings.videoSelect;
     } else if (this.settings.videoselect != '') {
       this.settings.videoSelect = this.settings.videoselect;
-    }
-
-    if (this.settings.largerImageHandler !== '') {
-      this.settings.mediaHandler = this.settings.largerImageHandler;
-    } else if (this.settings.mediaHandler != '') {
-      this.settings.largerImageHandler = this.settings.mediaHandler;
-    }
+    } // if(this.settings.largerImageHandler!=='') {
+    //     this.settings.mediaHandler = this.settings.largerImageHandler;
+    // } else if(this.settings.mediaHandler!='') {
+    //     this.settings.largerImageHandler = this.settings.mediaHandler;
+    // }
+    // if(this.settings.onLargerImageUpload) {
+    //     this.settings.onMediaUpload = this.settings.onLargerImageUpload;
+    // } else if(this.settings.onMediaUpload) {
+    //     this.settings.onLargerImageUpload = this.settings.onMediaUpload;
+    // }
 
-    if (this.settings.onLargerImageUpload) {
-      this.settings.onMediaUpload = this.settings.onLargerImageUpload;
-    } else if (this.settings.onMediaUpload) {
-      this.settings.onLargerImageUpload = this.settings.onMediaUpload;
-    }
 
     if (this.settings.snippetPathReplace.length > 0 && this.settings.designPathReplace.length === 0) {
       this.settings.designPathReplace = this.settings.snippetPathReplace;
@@ -97493,12 +97545,13 @@ class ContentBox {
       lightboxArrow: this.settings.lightboxArrow,
       themes: this.settings.themes,
       moduleConfig: this.settings.moduleConfig,
+      onImageBrowseClick: this.settings.onImageBrowseClick,
+      onImageSettingClick: this.settings.onImageSettingClick,
       onImageSelectClick: this.settings.onImageSelectClick,
       onFileSelectClick: this.settings.onFileSelectClick,
       onVideoSelectClick: this.settings.onVideoSelectClick,
-      onImageBrowseClick: this.settings.onImageBrowseClick,
-      onImageSettingClick: this.settings.onImageSettingClick,
       onAudioSelectClick: this.settings.onAudioSelectClick,
+      onMediaSelectClick: this.settings.onMediaSelectClick,
       onImageEditClick: this.settings.onImageEditClick,
       setCropperConfig: this.settings.setCropperConfig,
       onPluginsLoaded: this.settings.onPluginsLoaded,
@@ -97518,10 +97571,16 @@ class ContentBox {
       customTags: this.settings.customTags,
       largerImageHandler: this.settings.largerImageHandler,
       onLargerImageUpload: this.settings.onLargerImageUpload,
+      imageHandler: this.settings.imageHandler,
+      mediaHandler: this.settings.mediaHandler,
       videoHandler: this.settings.videoHandler,
       audioHandler: this.settings.audioHandler,
+      fileHandler: this.settings.fileHandler,
       onVideoUpload: this.settings.onVideoUpload,
       onAudioUpload: this.settings.onAudioUpload,
+      onImageUpload: this.settings.onImageUpload,
+      onMediaUpload: this.settings.onMediaUpload,
+      onFileUpload: this.settings.onFileUpload,
       framework: this.settings.framework,
       cellFormat: this.settings.cellFormat,
       rowFormat: this.settings.rowFormat,
@@ -97642,6 +97701,7 @@ class ContentBox {
       imageSelect: this.settings.imageSelect,
       videoSelect: this.settings.videoSelect,
       audioSelect: this.settings.audioSelect,
+      mediaSelect: this.settings.mediaSelect,
       onContentClick: e => {
         if (this.settings.onContentClick) this.settings.onContentClick();
         let elm = e.target;