@innovastudio/contentbuilder 1.4.94 → 1.4.96

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -2077,7 +2077,7 @@ button:focus-visible {
 .is-ui .is-modal.imageadjust2,
 .is-ui .is-modal.audioselect,
 .is-ui .is-modal.mediasource {
-  z-index: 10005 !important;
+  z-index: 10006 !important;
 }
 #_cbhtml .is-modal.previewcontent,
 .is-ui .is-modal.previewcontent {

package/public/contentbuilder/contentbuilder.esm.js

@@ -15886,10 +15886,6 @@ const prepareSvgIcons = builder => {
                 <path d="M4 12h4"></path>
                 <path d="M4 18h4"></path>
             </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
-            </symbol>
             <symbol id="icon-folder-media" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
@@ -15958,6 +15954,23 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
+
+            <symbol id="icon-folder-old" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+            </symbol>
+            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
             
             </defs>
         </svg>`;
@@ -49551,6 +49564,7 @@ class Image$1 {
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
                     <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
                     <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
@@ -50067,6 +50081,37 @@ class Image$1 {
         util.hideModal(modalImageLink);
         this.builder.elmTool.refresh();
       });
+      const btnOpenAsset = imageTool.querySelector('.open-asset');
+      if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
+        btnOpenAsset.style.display = 'block';
+        dom.addEventListener(btnOpenAsset, 'click', () => {
+          let img = this.builder.activeImage;
+          let currentSrc = img ? img.getAttribute('src') : '';
+          this.builder.openImageSelect(src => {
+            this.builder.uo.saveForUndo();
+            let img = this.builder.activeImage;
+            img.setAttribute('src', src);
+            setTimeout(() => {
+              img.click();
+              let divImageResizer = document.querySelector('#divImageResizer');
+              if (divImageResizer) divImageResizer.click();
+              setTimeout(() => {
+                img.click();
+                let divImageResizer = document.querySelector('#divImageResizer');
+                if (divImageResizer) divImageResizer.click();
+              }, 600);
+            }, 10);
+
+            //Trigger Change event
+            this.builder.opts.onChange();
+
+            //Trigger Render event
+            this.builder.opts.onRender();
+          }, currentSrc);
+        });
+      } else {
+        btnOpenAsset.style.display = 'none';
+      }
 
       // Select image (opens Asset Manager plugin or custom dialog)
       let divImageSrc = modalImageLink.querySelector('.image-src');
@@ -60069,6 +60114,8 @@ class ColumnTool {
         const inpSrc = this.cellSettings.querySelector('.input-src');
         elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
+          //TODO: Simplify using openAsset
+
           //---default
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = () => {
@@ -80895,6 +80942,35 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
+  openImageSelect(callback, defaultValue) {
+    const inpUrl = document.createElement('input');
+
+    // dummy button (for the openAsset() method, for the old Asset Manager. Not needed for the new.)
+    const btn = document.createElement('button');
+    this.openAsset(inpUrl, 'image', btn, defaultValue);
+    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 (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+          ok = true;
+        } else {
+          alert(out('Please select an image file.'));
+        }
+        if (ok) {
+          if (callback) callback(s);
+        }
+        desc.set.call(this, s);
+      }
+    });
+  }
   renderSelectAsset(btn, targetAssetType, callback) {
     const _id = 'inp_' + this.util.makeId();
     btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
@@ -80964,7 +81040,9 @@ class ContentBuilder {
       this.targetAssetType = targetAssetType;
     }
   }
-  openAsset(targetInput, targetAssetType, theTrigger) {
+  openAsset(targetInput, targetAssetType, theTrigger, defaultValue) {
+    let iframe;
+    let modal;
     if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
       if (this.opts.onMediaSelectClick) {
         this.opts.onMediaSelectClick({
@@ -80998,8 +81076,6 @@ class ContentBuilder {
         theTrigger: theTrigger
       });
     } else {
-      let iframe;
-      let modal;
       if (targetAssetType === 'media') {
         modal = this.builderStuff.querySelector('.is-modal.mediaselect');
         iframe = modal.querySelector('iframe');
@@ -81028,6 +81104,23 @@ class ContentBuilder {
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
     }
+    if (!defaultValue) defaultValue = '';
+    if (targetInput && targetInput.value) {
+      defaultValue = targetInput.value;
+    }
+    if (this.onAssetOpen) {
+      if (iframe) {
+        if (iframe.contentWindow.document.body.innerHTML !== '') {
+          this.onAssetOpen(defaultValue, iframe.contentWindow);
+        } else {
+          iframe.addEventListener('load', () => {
+            this.onAssetOpen(defaultValue, iframe.contentWindow);
+          });
+        }
+      } else {
+        this.onAssetOpen(defaultValue, iframe);
+      }
+    }
   }
 
   // Grid