@innovastudio/contentbuilder 1.3.62 → 1.3.64

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -17166,7 +17166,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div style="white-space: nowrap;">
+      let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
             </div>`;
 
@@ -17179,7 +17179,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div style="white-space: nowrap;">
+      let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
                 <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 mt-2 mb-2 rounded tracking-50 uppercase py-2 size-14 px-6 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500 leading-relaxed">Get Started</a>
             </div>`;
@@ -57438,6 +57438,10 @@ class ColumnTool {
                             <input type="range" min="0" max="100" value="0" class="image-vert-slider is-rangeslider">
                         </div>
 
+                        <div style="padding-bottom:3px;padding-top: 10px;display:flex;justify-content:right;align-items:center;">
+                            <button title="${util.out('Reset')}" class="image-reset" style="display:flex;width:30px;height:30px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                        </div>
+
                     </div>
 
                 </div>
@@ -57902,12 +57906,56 @@ class ColumnTool {
         //val: 100 - 500
         let val = inpImageScaleSlider.value;
         let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundSize = val + '%';
+
+        if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-xs');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
+
+          div.style.backgroundSize = 'cover';
+          cell.setAttribute('data-bg-xs', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-sm');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
+
+          div.style.backgroundSize = 'cover';
+          cell.setAttribute('data-bg-sm', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-md');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
+
+          div.style.backgroundSize = 'cover';
+          cell.setAttribute('data-bg-md', div.style.cssText);
+        } else {
+          cell.style.backgroundSize = val + '%';
+        } // Clean unused
 
-        cell.style.backgroundSize = val + '%';
+
+        cell.style.left = '';
+        cell.style.top = '';
+        cell.style.width = '';
+        cell.style.height = '';
+        cell.removeAttribute('data-x');
+        cell.removeAttribute('data-y');
+        cell.removeAttribute('data-scale');
       };
 
       inpImageScaleSlider.onchange = () => {
-        //Trigger Change event
+        if (document.querySelector('.page-preview.is-screen-375.active')) {
+          inpImageScaleSlider.value = 0;
+        } else if (document.querySelector('.page-preview.is-screen-768.active')) {
+          inpImageScaleSlider.value = 0;
+        } else if (document.querySelector('.page-preview.is-screen-1024.active')) {
+          inpImageScaleSlider.value = 0;
+        } //Trigger Change event
+
+
         this.builder.opts.onChange();
       }; // Scale 2
 
@@ -57956,8 +58004,41 @@ class ColumnTool {
         //val: 0 - 100
         let val = inpImageHorSlider.value;
         let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundPositionX = val + '%';
+
+        if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-xs');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionX = val + '%';
+          cell.setAttribute('data-bg-xs', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-sm');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionX = val + '%';
+          cell.setAttribute('data-bg-sm', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-md');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionX = val + '%';
+          cell.setAttribute('data-bg-md', div.style.cssText);
+        } else {
+          cell.style.backgroundPositionX = val + '%';
+        } // Clean unused
+
 
-        cell.style.backgroundPositionX = val + '%';
+        cell.style.left = '';
+        cell.style.top = '';
+        cell.style.width = '';
+        cell.style.height = '';
+        cell.removeAttribute('data-x');
+        cell.removeAttribute('data-y');
+        cell.removeAttribute('data-scale');
       };
 
       inpImageHorSlider.onchange = () => {
@@ -58001,8 +58082,41 @@ class ColumnTool {
         //val: 0 - 100
         let val = inpImageVertSlider.value;
         let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundPositionY = val + '%';
+
+        if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-xs');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionY = val + '%';
+          cell.setAttribute('data-bg-xs', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-sm');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionY = val + '%';
+          cell.setAttribute('data-bg-sm', div.style.cssText);
+        } else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
+          let dataBg = cell.getAttribute('data-bg-md');
+          if (!dataBg) dataBg = '';
+          let div = document.createElement('div');
+          div.style.cssText = dataBg;
+          div.style.backgroundPositionY = val + '%';
+          cell.setAttribute('data-bg-md', div.style.cssText);
+        } else {
+          cell.style.backgroundPositionY = val + '%';
+        } // Clean unused
+
 
-        cell.style.backgroundPositionY = val + '%';
+        cell.style.left = '';
+        cell.style.top = '';
+        cell.style.width = '';
+        cell.style.height = '';
+        cell.removeAttribute('data-x');
+        cell.removeAttribute('data-y');
+        cell.removeAttribute('data-scale');
       };
 
       inpImageVertSlider.onchange = () => {
@@ -58031,14 +58145,23 @@ class ColumnTool {
       inpImageVertSlider2.onchange = () => {
         //Trigger Change event
         this.builder.opts.onChange();
-      };
+      }; //Reset
+
 
-      const btnImageReset = imageAdjust2.querySelector('.image-reset');
+      const btnImageReset = imageAdjust.querySelector('.image-reset');
       btnImageReset.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cell = this.builder.elementSelected;
         this.resetImage(cell); //Trigger Change event
 
+        this.builder.opts.onChange();
+      });
+      const btnImageReset2 = imageAdjust2.querySelector('.image-reset');
+      btnImageReset2.addEventListener('click', () => {
+        this.builder.uo.saveForUndo();
+        let cell = this.builder.elementSelected;
+        this.resetImage2(cell); //Trigger Change event
+
         this.builder.opts.onChange();
       }); // Row Enlarge (Currently not used)
 
@@ -58966,8 +59089,9 @@ class ColumnTool {
     if (btn) btn.setAttribute('data-focus', true);
   }
 
-  openImageAdjust(elm, btn) {
-    //Current value
+  openImageAdjust(elm, btn, useTarget) {
+    if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
+
     const imageAdjust = this.imageAdjust;
     const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
     const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
@@ -58976,9 +59100,32 @@ class ColumnTool {
     inpImageHorSlider.value = 0;
     inpImageVertSlider.value = 0;
 
-    if (elm.style.backgroundSize) {
+    if (useTarget) {
+      inpImageHorSlider.value = 50;
+      inpImageVertSlider.value = 60;
+    }
+
+    let div = document.createElement('div');
+
+    if (document.querySelector('.page-preview.is-screen-375.active') && useTarget) {
+      let dataBg = elm.getAttribute('data-bg-xs');
+      if (!dataBg) dataBg = '';
+      div.style.cssText = dataBg;
+    } else if (document.querySelector('.page-preview.is-screen-768.active') && useTarget) {
+      let dataBg = elm.getAttribute('data-bg-sm');
+      if (!dataBg) dataBg = '';
+      div.style.cssText = dataBg;
+    } else if (document.querySelector('.page-preview.is-screen-1024.active') && useTarget) {
+      let dataBg = elm.getAttribute('data-bg-md');
+      if (!dataBg) dataBg = '';
+      div.style.cssText = dataBg;
+    } else {
+      div.style.cssText = elm.style.cssText;
+    }
+
+    if (div.style.backgroundSize) {
       let val;
-      let bgSize = elm.style.backgroundSize;
+      let bgSize = div.style.backgroundSize;
 
       if (isNaN(parseInt(bgSize))) {
         val = 100;
@@ -58991,9 +59138,9 @@ class ColumnTool {
       }
     }
 
-    if (elm.style.backgroundPositionX) {
+    if (div.style.backgroundPositionX) {
       let val;
-      let bgPosX = elm.style.backgroundPositionX;
+      let bgPosX = div.style.backgroundPositionX;
 
       if (isNaN(parseInt(bgPosX))) {
         val = 0;
@@ -59006,9 +59153,9 @@ class ColumnTool {
       }
     }
 
-    if (elm.style.backgroundPositionY) {
+    if (div.style.backgroundPositionY) {
       let val;
-      let bgPosY = elm.style.backgroundPositionY;
+      let bgPosY = div.style.backgroundPositionY;
 
       if (isNaN(parseInt(bgPosY))) {
         val = 0;
@@ -59035,6 +59182,28 @@ class ColumnTool {
   }
 
   resetImage(elm) {
+    //Current value
+    const imageAdjust = this.imageAdjust;
+    const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
+    const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
+    const inpImageVertSlider = imageAdjust.querySelector('.image-vert-slider');
+    inpImageHorSlider.value = 50;
+    inpImageVertSlider.value = 60;
+    inpImageScaleSlider.value = 0;
+    elm.style.backgroundPositionX = '';
+    elm.style.backgroundPositionY = '';
+    elm.style.backgroundSize = ''; // Clean unused
+
+    elm.style.left = '';
+    elm.style.top = '';
+    elm.style.width = '';
+    elm.style.height = '';
+    elm.removeAttribute('data-x');
+    elm.removeAttribute('data-y');
+    elm.removeAttribute('data-scale');
+  }
+
+  resetImage2(elm) {
     //Current value
     const imageAdjust2 = this.imageAdjust2;
     const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
@@ -76049,11 +76218,11 @@ class ContentBuilder {
     this.colTool.openImagePicker(currentUrl, callback, btn);
   }
 
-  openImageAdjust(elm, btn) {
+  openImageAdjust(elm, btn, useTarget) {
     if (this.opts.imageAdjust === 2) {
       this.colTool.openImageAdjust2(elm, btn);
     } else {
-      this.colTool.openImageAdjust(elm, btn);
+      this.colTool.openImageAdjust(elm, btn, useTarget);
     }
   }