@innovastudio/contentbuilder 1.4.25 → 1.4.27

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -58721,6 +58721,7 @@ class ColumnTool {
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const dom = this.builder.dom;
     this.dom = dom;
     let columnMore = builderStuff.querySelector('.is-pop.columnmore');
@@ -58829,9 +58830,6 @@ class ColumnTool {
                                 <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
                                     <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
                                 </button>
-                                <!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
-                                    <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-device-laptop"></use></svg>
-                                </button>-->
                                 <button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
                                     <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
                                 </button>
@@ -59022,6 +59020,21 @@ class ColumnTool {
 
                     <div style="padding:0;margin-top:25px;">
 
+                        <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                            <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                            </button>
+                            <button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                            </button>
+                        </div>
+
                         <div style="padding-bottom:3px;">${util.out('Scale')}:</div>
                         <div style="padding-top:4px">
                             <input type="range" min="100" max="500" value="0" class="image-scale-slider is-rangeslider">
@@ -60640,6 +60653,25 @@ class ColumnTool {
         btnHidden.classList.add('on'); //Trigger Change event
 
         this.builder.opts.onChange();
+      }); // Responsive Image Adjust
+
+      btns = this.imageAdjust.querySelectorAll('.input-device');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let elms = this.imageAdjust.querySelectorAll('.input-device');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          const modal = builderStuff.querySelector('.is-modal.content-preview');
+
+          if (!modal.classList.contains('active')) {
+            this.builder.openPreview();
+          }
+
+          this.realtimeImageAdjust();
+          this.readImageAdjust(this.builder.elementSelected, this.useTarget);
+        });
       });
     }
 
@@ -60907,9 +60939,8 @@ class ColumnTool {
     if (btn) btn.setAttribute('data-focus', true);
   }
 
-  openImageAdjust(elm, btn, useTarget) {
-    if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
-
+  readImageAdjust(elm, useTarget) {
+    //Current value
     const imageAdjust = this.imageAdjust;
     const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
     const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
@@ -60917,6 +60948,7 @@ class ColumnTool {
     inpImageScaleSlider.value = 100;
     inpImageHorSlider.value = 0;
     inpImageVertSlider.value = 0;
+    inpImageScaleSlider.disabled = false;
 
     if (useTarget) {
       inpImageHorSlider.value = 50;
@@ -60995,16 +61027,79 @@ class ColumnTool {
     } //elementSelected
 
 
-    this.builder.elementSelected = elm; //Show modal
+    this.builder.elementSelected = elm;
+  }
+
+  openImageAdjust(elm, btn, useTarget) {
+    if (useTarget) this.useTarget = true;else this.useTarget = false;
+    const divTarget = this.imageAdjust.querySelector('.div-target');
+
+    if (useTarget) {
+      divTarget.style.display = 'flex';
+    } else {
+      divTarget.style.display = 'none';
+    }
+
+    const modal = this.builderStuff.querySelector('.is-modal.content-preview');
+    let elms = this.imageAdjust.querySelectorAll('.input-device');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+
+    if (!modal.classList.contains('active')) {
+      this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+    }
+
+    this.readImageAdjust(elm, useTarget); //Show modal
 
-    imageAdjust.style.zIndex = '10005';
-    this.util.showModal(imageAdjust, false, () => {
+    this.imageAdjust.style.zIndex = '10005';
+    this.util.showModal(this.imageAdjust, false, () => {
       if (btn) {
         btn.removeAttribute('data-focus');
         btn.focus();
       }
     });
     if (btn) btn.setAttribute('data-focus', true);
+    this.realtimeImageAdjust(true);
+  }
+
+  realtimeImageAdjust(initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.imageAdjust.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.imageAdjust.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.imageAdjust.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.imageAdjust.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.imageAdjust.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
+    let divTarget = this.imageAdjust.querySelector('.div-target');
+    let target = this.builder.responsive.readTarget(divTarget); // Live Preview Sync
+
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
+    }
   }
 
   resetImage(elm) {
@@ -77131,7 +77226,12 @@ class LivePreview {
 
       this.builder.settings.onChange = () => {
         old2.call(this);
-        this.previewRefresh();
+
+        if (!this.builder.doc.querySelector('.is-wrapper')) {
+          // ContentBuilder
+          this.previewRefresh();
+        } // For ContentBox, this onChange will trigger ContentBox onChange (which has previewRefresh called)
+
       };
     }
   }
@@ -77217,6 +77317,15 @@ class LivePreview {
         }
       } else {
         // ContentBox
+        if (!this.builder.count) this.builder.count = 0;
+        this.builder.count++;
+        let oriVal = this.builder.livePreviewAlwaysReload;
+
+        if (this.builder.count === this.builder.livePreviewReloadEvery) {
+          this.builder.livePreviewAlwaysReload = true;
+          this.builder.count = 0;
+        }
+
         if (this.builder.livePreviewAlwaysReload) {
           iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
         } else {
@@ -77302,6 +77411,8 @@ class LivePreview {
             iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
           }
         }
+
+        this.builder.livePreviewAlwaysReload = oriVal;
       }
 
       iframe.onload = () => {
@@ -77437,6 +77548,8 @@ class ContentBuilder {
       previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
       livePreviewOpen: false,
       livePreviewAlwaysReload: false,
+      livePreviewReloadEvery: 30,
+      // always reload every 30 onChange triggered (to clearup iframe resource for faster performance)
       scriptPath: '',
       // Deprecated
       // Old way: