@innovastudio/contentbuilder 1.3.20 → 1.3.22

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -49327,10 +49327,10 @@ class Image$1 {
                                 <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;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
-                                    <input title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                    <input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
 
-                                <iframe tabindex="0" id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                                <iframe id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                             </div>
                         </div>
 
@@ -49345,7 +49345,7 @@ class Image$1 {
                                 <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;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
-                                    <input 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;">
+                                    <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;">
                                 </form>
                             </div>
                         </div>
@@ -57122,6 +57122,7 @@ class ColumnTool {
                                         <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
                                         <span>${util.out('Image')}</span>
                                     </button>
+                                    <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                                     <button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
                                     <button title="${util.out('Adjust')}" class="input-cell-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
                                 </div>
@@ -57256,11 +57257,11 @@ class ColumnTool {
                                 <div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                                     <form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                         <input id="hidRefId4" name="hidRefId" type="hidden" value="">
-                                        <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
-                                        <input title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
+                                        <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                        <input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
                                     </form>
 
-                                    <iframe tabindex="0" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                                    <iframe tabindex="-1" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                                 </div>
                             </div>
                             <div style="padding-top:20px">
@@ -57353,11 +57354,11 @@ class ColumnTool {
                         <div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                             <form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
                                 <input id="hidRefId3" name="hidRefId" type="hidden" value="">
-                                <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
-                                <input title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
-                            <iframe tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                            <iframe tabindex="-1" tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                         </div>
                     </div>
 
@@ -57385,6 +57386,8 @@ class ColumnTool {
 
       columnMore = builderStuff.querySelector('.columnmore');
       this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
+      this.divCellClick = builderStuff.querySelector('#divCellClick');
+      this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
       const quickadd = renderQuickAdd(builder); // Prepare for tooltip
 
       let elms = columnTool.querySelectorAll('[title]');
@@ -57725,6 +57728,36 @@ class ColumnTool {
         btnImageRemove.style.display = 'none';
         div.innerHTML = ''; //Trigger Change event
 
+        this.builder.opts.onChange();
+      }); // Column Background Image Open Asset
+
+      if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+        this.divCellGeneral.querySelector('.input-select').style.display = 'none';
+      }
+
+      const btnCellBgImageOpenAsset = this.divCellGeneral.querySelector('.input-select');
+      this.builder.renderSelectAsset(btnCellBgImageOpenAsset, 'image', url => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        this.builder.uo.saveForUndo();
+        cell.style.backgroundImage = `url("${url}")`;
+        cell.style.backgroundSize = 'cover';
+        cell.style.backgroundRepeat = 'no-repeat';
+        const div = cellSettings.querySelector('.cell-bgimage-preview');
+        const btnImageAdjust = this.cellSettings.querySelector('.input-cell-bgimageadjust');
+        const btnImageRemove = this.cellSettings.querySelector('.input-cell-bgremove');
+        btnImageAdjust.style.display = 'none';
+        btnImageRemove.style.display = 'none';
+
+        if (url !== '') {
+          div.innerHTML = `<img src="${url}">`;
+          btnImageAdjust.style.display = 'flex';
+          btnImageRemove.style.display = 'flex';
+        } else {
+          div.innerHTML = '';
+        } //Trigger Change event
+
+
         this.builder.opts.onChange();
       }); // Column Background Image Select Dialog (.is-modal.imagesource) 
 
@@ -58522,13 +58555,13 @@ class ColumnTool {
       }
 
       if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
-        this.cellSettings.querySelector('.input-select').style.display = 'none';
+        this.divCellClick.querySelector('.input-select').style.display = 'none';
       } // 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) {
         const inpSrc = this.cellSettings.querySelector('.input-src');
-        elm = this.cellSettings.querySelector('.input-select');
+        elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
           //---default
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
@@ -73723,8 +73756,7 @@ class MediaPicker {
           });
           elm.setAttribute('data-focus', true);
           this.builder.targetInput = inpSrc;
-          this.builder.targetCallback = null;
-          this.builder.targetAssetType = 'media';
+          this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
         } else if (this.builder.opts.imageselect) {
           let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
           let iframe = modalImageSelect.querySelector('iframe');
@@ -73744,8 +73776,7 @@ class MediaPicker {
           });
           elm.setAttribute('data-focus', true);
           this.builder.targetInput = inpSrc;
-          this.builder.targetCallback = null;
-          this.builder.targetAssetType = 'media';
+          this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
         }
       });
     }
@@ -73783,9 +73814,22 @@ class MediaPicker {
     });
   }
 
-  openMediaPicker(currentUrl, callback, btn) {
-    //Current value
+  openMediaPicker(currentUrl, assetType, callback, btn) {
+    this.builder.targetAssetType = assetType;
     const modalMediaSelect = this.modalMediaSelect;
+    let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
+
+    if (assetType === 'media') {
+      inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
+    } else if (assetType === 'video') {
+      inputFileSelect.setAttribute('accept', 'video/mp4');
+    } else if (assetType === 'image') {
+      inputFileSelect.setAttribute('accept', 'image/*');
+    } else if (assetType === 'audio') {
+      inputFileSelect.setAttribute('accept', 'audio/mp3');
+    } //Current value
+
+
     const inpSrc = modalMediaSelect.querySelector('.input-src');
     inpSrc.value = currentUrl; //mediaSelectedCallback
 
@@ -75444,8 +75488,8 @@ class ContentBuilder {
     this.opts.assetRefresh = true; // After file upload, make open asset refreshed
   }
 
-  openMediaPicker(currentUrl, callback, btn) {
-    this.mediaPicker.openMediaPicker(currentUrl, callback, btn);
+  openMediaPicker(currentUrl, assetType = 'media', callback, btn) {
+    this.mediaPicker.openMediaPicker(currentUrl, assetType, callback, btn);
   }
 
   openImagePicker(currentUrl, callback, btn) {
@@ -75533,6 +75577,65 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
+  renderSelectAsset(btn, targetAssetType, callback) {
+    const _id = 'inp_' + this.util.makeId();
+
+    btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
+    const inpUrl = btn.parentNode.querySelector(`#${_id}`);
+    btn.addEventListener('click', () => {
+      this.openAsset(inpUrl, targetAssetType, btn);
+    });
+
+    let out = s => this.util.out(s);
+
+    const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    Object.defineProperty(inpUrl, 'value', {
+      get: desc.get,
+      set: function (s) {
+        // Additional protection if normal selectAsset() is not used in asset dialog.
+        // This is used if onImageSelectClick or onFileSelectClick are used.
+        const filename = s.substring(s.lastIndexOf('/') + 1);
+        let extension = filename.split('.').pop();
+        extension = extension.toLowerCase();
+        let ok = false;
+
+        if (targetAssetType === 'all') {
+          ok = true;
+        } else if (targetAssetType === 'media') {
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
+            ok = true;
+          } else {
+            alert(out('Please select an image or video file.'));
+          }
+        } else if (targetAssetType === 'video') {
+          if (extension === 'mp4') {
+            ok = true;
+          } else {
+            alert(out('Please select an mp4 file.'));
+          }
+        } else if (targetAssetType === 'image') {
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
+            ok = true;
+          } else {
+            alert(out('Please select an image file.'));
+          }
+        } else if (targetAssetType === 'audio') {
+          if (extension === 'mp3') {
+            ok = true;
+          } else {
+            alert(out('Please select an mp3 file.'));
+          }
+        }
+
+        if (ok) {
+          if (callback) callback(s);
+        }
+
+        desc.set.call(this, s);
+      }
+    });
+  }
+
   openAsset(targetInput, targetAssetType, theTrigger) {
     if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
       if (this.opts.onFileSelectClick) {