@innovastudio/contentbuilder 1.2.10 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.10",
+  "version": "1.2.13",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.esm.js

@@ -16965,7 +16965,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-audio');
     dom$H.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div style="display:flex;position:relative;margin:15px 0;background:transparent;">
+      let html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
                         <audio controls="" style="width:100%">
                             <source src="${builder.opts.snippetPath}example.mp3" type="audio/mpeg">
                             Your browser does not support the audio element.
@@ -16973,7 +16973,7 @@ const renderQuickAdd = builder => {
                     </div>`;
 
       if (builder.opts.snippetSampleAudio) {
-        html = `<div style="display:flex;position:relative;margin:15px 0;background:transparent;">
+        html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
                             <audio controls="" style="width:100%">
                                 <source src="${builder.opts.snippetSampleAudio}" type="audio/mpeg">
                                 Your browser does not support the audio element.
@@ -21464,7 +21464,7 @@ const renderSnippetPanel = builder => {
       });
     }
   });
-  dropDown.toggle();
+  dropDown.toggle(false);
 
   if (builder.opts.snippetList === '#divSnippetList') {
     snippetPanel.querySelector('.selectsnippet').style.display = 'none';
@@ -47385,7 +47385,7 @@ var loadImageOrientation = {exports: {}};
 var js = loadImage.exports;
 
 const dom$C = new Dom();
-class Image {
+class Image$1 {
   constructor(builder) {
     this.builder = builder;
     const util = this.builder.util;
@@ -52320,7 +52320,7 @@ class Element$1 {
     this.builderStuff = builderStuff;
     this.hyperlink = new Hyperlink(builder);
     this.button = new Button(builder);
-    this.image = new Image(builder);
+    this.image = new Image$1(builder);
     this.spacer = new Spacer(builder);
     this.module = new Module(builder);
     this.code = new Code(builder);
@@ -54919,7 +54919,17 @@ class ColumnTool {
 
                         <div style="padding-bottom:3px;">${util.out('Scale')}:</div>
                         <div style="padding-top:4px">
-                            <input type="range" min="0" max="100" value="0" class="image-scale-slider is-rangeslider">
+                            <input type="range" min="100" max="500" value="0" class="image-scale-slider is-rangeslider">
+                        </div>
+
+                        <div style="display:none;padding-bottom:3px;padding-top: 20px;">${util.out('Scale')} (${util.out('Width')}):</div>
+                        <div style="display:none;padding-top:4px">
+                            <input type="range" min="100" max="500" value="100" class="image-container-width-slider is-rangeslider">
+                        </div>
+
+                        <div style="display:none;padding-bottom:3px;padding-top: 20px;">${util.out('Scale')} (${util.out('Height')}):</div>
+                        <div style="display:none;padding-top:4px">
+                            <input type="range" min="100" max="500" value="100" class="image-container-height-slider is-rangeslider">
                         </div>
 
                         <div style="padding-bottom:3px;padding-top: 20px;display:flex;justify-content:space-between;align-items:center;">
@@ -54927,15 +54937,15 @@ class ColumnTool {
                             <button title="${util.out('Reset')}" class="image-hor-reset" style="display:flex;width:30px;height:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
                         </div>
                         <div style="padding-top:4px">
-                            <input type="range" min="-100" max="100" value="0" class="image-hor-slider is-rangeslider">
+                            <input type="range" min="-150" max="150" value="0" class="image-hor-slider is-rangeslider">
                         </div>
 
                         <div style="padding-bottom:3px;padding-top: 20px;display:flex;justify-content:space-between;align-items:center;">
-                        <span>${util.out('Vertical')}:</span>
-                        <button title="${util.out('Reset')}" class="image-vert-reset" style="display:flex;width:30px;height:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
-                    </div>
+                            <span>${util.out('Vertical')}:</span>
+                            <button title="${util.out('Reset')}" class="image-vert-reset" style="display:flex;width:30px;height:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                        </div>
                         <div style="padding-top:4px">
-                            <input type="range" min="-100" max="100" value="0" class="image-vert-slider is-rangeslider">
+                            <input type="range" min="-150" max="150" value="0" class="image-vert-slider is-rangeslider">
                         </div>
 
                     </div>
@@ -55352,21 +55362,43 @@ class ColumnTool {
       };
 
       inpImageScaleSlider2.oninput = () => {
-        let cell = this.builder.elementSelected;
-        cell.style.backgroundSize = ''; //val: 0 - 100
+        let cell = this.builder.elementSelected; //val: 100 - 500
 
         let val = inpImageScaleSlider2.value;
-        cell.setAttribute('data-scale', val); // vall => -100-100
 
-        if (val !== 0) {
-          cell.style.width = 'unset';
-          cell.style.left = `-${val}vw`;
-          cell.style.right = `-${val}vw`;
+        if (this.scaleWidth) {
+          cell.style.width = val + '%';
+          cell.style.height = '';
         } else {
-          cell.style.left = '';
-          cell.style.right = '';
+          cell.style.height = val + '%';
           cell.style.width = '';
         }
+
+        cell.setAttribute('data-scale', val); // let cell = this.builder.elementSelected; 
+        // cell.style.backgroundSize = '';
+        // //val: 0 - 100
+        // let val = inpImageScaleSlider2.value;
+        // cell.setAttribute('data-scale', val);
+        // // vall => -100-100
+        // if(val!==0) {
+        //     // cell.style.width = 'unset';
+        //     // cell.style.height = 'unset';
+        //     cell.style.left = `-${val}vw`;
+        //     cell.style.right = `-${val}vw`;
+        //     cell.style.top = `-${val}vh`;
+        //     cell.style.bottom = `-${val}vh`;
+        // } else {
+        //     // cell.style.width = '';
+        //     // cell.style.height = '';
+        //     cell.style.left = '';
+        //     cell.style.right = '';
+        //     cell.style.top = '';
+        //     cell.style.bottom = '';
+        // }
+        // //val: 100 - 500
+        // let val = inpImageScaleSlider2.value;
+        // let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundSize = val + '%';
       };
 
       inpImageScaleSlider2.onchange = () => {
@@ -55406,25 +55438,31 @@ class ColumnTool {
       };
 
       inpImageHorSlider2.oninput = () => {
-        let cell = this.builder.elementSelected;
-        let normalWidth = cell.parentNode.offsetWidth / window.innerWidth * 100; // vw
-
-        let scaleInc = parseFloat(inpImageScaleSlider2.value);
-        const enlarge = (normalWidth + 2 * scaleInc) / normalWidth; //val: -100 - 100
+        // let cell = this.builder.elementSelected;
+        // let normalWidth = (cell.parentNode.offsetWidth/window.innerWidth) * 100; // vw
+        // let scaleInc = parseFloat(inpImageScaleSlider2.value);
+        // const enlarge = (normalWidth + (2*scaleInc))/normalWidth;
+        // //val: -100 - 100
+        // let val = parseFloat(inpImageHorSlider2.value);
+        // cell.setAttribute('data-x', val);
+        // let currentWidth = cell.parentNode.offsetWidth*enlarge;
+        // currentWidth = (currentWidth/window.innerWidth) * 100; // vw
+        // let currentLeft = (currentWidth-normalWidth)/2; // vw
+        // let currentRight = (currentWidth-normalWidth)/2;
+        // const left = -currentLeft+val;
+        // const right = -currentRight-val;
+        // // cell.style.width = 'unset';
+        // cell.style.left = `${left}vw`;
+        // cell.style.right = `${right}vw`;
+        let cell = this.builder.elementSelected; //val: -100 - 100
 
         let val = parseFloat(inpImageHorSlider2.value);
-        cell.setAttribute('data-x', val);
-        let currentWidth = cell.parentNode.offsetWidth * enlarge;
-        currentWidth = currentWidth / window.innerWidth * 100; // vw
-
-        let currentLeft = (currentWidth - normalWidth) / 2; // vw
-
-        let currentRight = (currentWidth - normalWidth) / 2;
-        const left = -currentLeft + val;
-        const right = -currentRight - val;
-        cell.style.width = 'unset';
-        cell.style.left = `${left}vw`;
-        cell.style.right = `${right}vw`;
+        cell.style.left = `${val}%`;
+        cell.style.right = '';
+        cell.setAttribute('data-x', val); // //val: 0 - 100
+        // let val = inpImageHorSlider2.value;
+        // let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundPositionX = val + '%';
       };
 
       inpImageHorSlider2.onchange = () => {
@@ -55464,51 +55502,105 @@ class ColumnTool {
       };
 
       inpImageVertSlider2.oninput = () => {
-        let cell = this.builder.elementSelected;
-        let normalHeight = cell.parentNode.offsetHeight / window.innerHeight * 100; // vh
-
-        let scaleInc = parseFloat(inpImageScaleSlider2.value);
-        const enlarge = (normalHeight + 2 * scaleInc) / normalHeight; //val: -100 - 100
+        // let cell = this.builder.elementSelected;
+        // let normalHeight = (cell.parentNode.offsetHeight/window.innerHeight) * 100; // vh
+        // let scaleInc = parseFloat(inpImageScaleSlider2.value);
+        // const enlarge = (normalHeight + (2*scaleInc))/normalHeight;
+        // //val: -100 - 100
+        // let val = parseFloat(inpImageVertSlider2.value);
+        // cell.setAttribute('data-y', val);
+        // let currentHeight = cell.parentNode.offsetHeight*enlarge;
+        // currentHeight = (currentHeight/window.innerHeight) * 100; // vh
+        // let currentTop = (currentHeight-normalHeight)/2; // vh
+        // let currentBottom = (currentHeight-normalHeight)/2;
+        // const top = -currentTop+val;
+        // const bottom = -currentBottom-val;
+        // // cell.style.height = 'unset';
+        // cell.style.top = `${top}vh`;
+        // cell.style.bottom = `${bottom}vh`;
+        let cell = this.builder.elementSelected; //val: -100 - 100
 
         let val = parseFloat(inpImageVertSlider2.value);
-        cell.setAttribute('data-y', val);
-        let currentHeight = cell.parentNode.offsetHeight * enlarge;
-        currentHeight = currentHeight / window.innerHeight * 100; // vh
-
-        let currentTop = (currentHeight - normalHeight) / 2; // vh
-
-        let currentBottom = (currentHeight - normalHeight) / 2;
-        const top = -currentTop + val;
-        const bottom = -currentBottom - val;
-        cell.style.height = 'unset';
-        cell.style.top = `${top}vh`;
-        cell.style.bottom = `${bottom}vh`;
+        cell.style.top = `${val}%`;
+        cell.style.bottom = '';
+        cell.setAttribute('data-y', val); // //val: 0 - 100
+        // let val = inpImageVertSlider2.value;
+        // let cell = this.builder.elementSelected; //util.cellSelected();
+        // cell.style.backgroundPositionY = val + '%';
       };
 
       inpImageVertSlider2.onchange = () => {
         //Trigger Change event
         this.builder.opts.onChange();
+      }; // Image Container Width
+
+
+      const inpImageConWidthSlider = imageAdjust2.querySelector('.image-container-width-slider');
+
+      inpImageConWidthSlider.onfocus = () => {
+        this.builder.uo.saveForUndo(true);
+      };
+
+      inpImageConWidthSlider.oninput = () => {
+        let cell = this.builder.elementSelected; //val: 100 - 500
+
+        let val = parseFloat(inpImageConWidthSlider.value);
+        cell.setAttribute('data-con-w', val);
+        cell.style.width = `${val}%`;
+      };
+
+      inpImageConWidthSlider.onchange = () => {
+        this.builder.opts.onChange();
+      }; // Image Container Height
+
+
+      const inpImageConHeightSlider = imageAdjust2.querySelector('.image-container-height-slider');
+
+      inpImageConHeightSlider.onfocus = () => {
+        this.builder.uo.saveForUndo(true);
+      };
+
+      inpImageConHeightSlider.oninput = () => {
+        let cell = this.builder.elementSelected; //val: 100 - 500
+
+        let val = parseFloat(inpImageConHeightSlider.value);
+        cell.setAttribute('data-con-h', val);
+        cell.style.height = `${val}%`;
+      };
+
+      inpImageConHeightSlider.onchange = () => {
+        this.builder.opts.onChange();
       };
 
       const btnHorReset = imageAdjust2.querySelector('.image-hor-reset');
       btnHorReset.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cell = this.builder.elementSelected;
-        inpImageHorSlider2.value = 0;
-        cell.style.width = '';
+        inpImageHorSlider2.value = 0; // cell.style.width = '';
+
         cell.style.left = '';
         cell.style.right = '';
-        cell.removeAttribute('data-x');
+        cell.removeAttribute('data-x'); // // fix
+        // cell.style.backgroundPositionX = '';
+        // inpImageHorSlider2.value = 50;
+        //Trigger Change event
+
+        this.builder.opts.onChange();
       });
       const btnVertReset = imageAdjust2.querySelector('.image-vert-reset');
       btnVertReset.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cell = this.builder.elementSelected;
-        inpImageVertSlider2.value = 0;
-        cell.style.height = '';
+        inpImageVertSlider2.value = 0; // cell.style.height = '';
+
         cell.style.top = '';
         cell.style.bottom = '';
-        cell.removeAttribute('data-y');
+        cell.removeAttribute('data-y'); // // fix
+        // cell.style.backgroundPositionY = '';
+        // inpImageVertSlider2.value = 60;
+        //Trigger Change event
+
+        this.builder.opts.onChange();
       }); // Row Enlarge (Currently not used)
 
       elms = cellSettings.querySelectorAll('.input-row-enlarge');
@@ -56506,7 +56598,140 @@ class ColumnTool {
 
     if (posY) {
       inpImageVertSlider.value = posY;
-    } //elementSelected
+    }
+
+    let overlayDimension = {
+      width: elm.parentNode.offsetWidth,
+      height: elm.parentNode.offsetHeight
+    }; // console.log(overlayDimension);
+
+    let dimension, image;
+    image = new Image();
+    image.src = elm.style.backgroundImage.replace(/"/g, '').replace(/url\(|\)$/ig, '');
+
+    image.onload = () => {
+      dimension = {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      }; // console.log(dimension)
+
+      if (overlayDimension.width / overlayDimension.height <= dimension.width / dimension.height) {
+        this.scaleWidth = true;
+        this.scaleHeight = false; // let h = overlayDimension.height; //px
+
+        let w = overlayDimension.height * (dimension.width / dimension.height);
+        w = w / overlayDimension.width * 100; //%
+
+        if (!elm.style.width) {
+          elm.style.width = w + '%';
+          elm.style.height = '';
+        }
+
+        inpImageScaleSlider.min = w;
+      } else {
+        this.scaleHeight = true;
+        this.scaleWidth = false; // let w = overlayDimension.width;
+
+        let h = overlayDimension.width * (dimension.height / dimension.width);
+        h = h / overlayDimension.height * 100; //%
+
+        if (!elm.style.height) {
+          elm.style.height = h + '%';
+          elm.style.width = '';
+        }
+
+        inpImageScaleSlider.min = h;
+      }
+    }; // const imageAdjust2 = this.imageAdjust2;
+    // const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
+    // const inpImageHorSlider = imageAdjust2.querySelector('.image-hor-slider');
+    // const inpImageVertSlider = imageAdjust2.querySelector('.image-vert-slider');
+    // inpImageScaleSlider.value = 100;
+    // inpImageHorSlider.value = 0;
+    // inpImageVertSlider.value = 0;
+    // if(elm.style.backgroundSize) {
+    //     let val;
+    //     let bgSize = elm.style.backgroundSize;
+    //     if(isNaN(parseInt(bgSize))) {
+    //         val = 100;
+    //     } else {
+    //         val = parseInt(bgSize);
+    //     }
+    //     if(bgSize.indexOf('%')!==-1) {
+    //         inpImageScaleSlider.value = val;
+    //     }
+    // }
+    // if(elm.style.backgroundPositionX) {
+    //     let val;
+    //     let bgPosX = elm.style.backgroundPositionX;
+    //     if(isNaN(parseInt(bgPosX))) {
+    //         val = 0;
+    //     } else {
+    //         val = parseInt(bgPosX);
+    //     }
+    //     if(bgPosX.indexOf('%')!==-1) {
+    //         inpImageHorSlider.value = val;
+    //     }
+    // }
+    // if(elm.style.backgroundPositionY) {
+    //     let val;
+    //     let bgPosY = elm.style.backgroundPositionY;
+    //     if(isNaN(parseInt(bgPosY))) {
+    //         val = 0;
+    //     } else {
+    //         val = parseInt(bgPosY);
+    //     }
+    //     if(bgPosY.indexOf('%')!==-1) {
+    //         inpImageVertSlider.value = val;
+    //     }
+    // }
+    // let img = elm.querySelector('img');
+    // if(!img) {
+    //     let oFitPosX = 0;
+    //     let oFitPosY = 0;
+    //     if(elm.style.backgroundPositionX) {
+    //         let val;
+    //         let bgPosX = elm.style.backgroundPositionX;
+    //         if(isNaN(parseInt(bgPosX))) {
+    //             val = 0;
+    //         } else {
+    //             val = parseInt(bgPosX);
+    //         }
+    //         if(bgPosX.indexOf('%')!==-1) {
+    //             inpImageHorSlider.value = val;
+    //             oFitPosX = val;
+    //         }
+    //     }
+    //     if(elm.style.backgroundPositionY) {
+    //         let val;
+    //         let bgPosY = elm.style.backgroundPositionY;
+    //         if(isNaN(parseInt(bgPosY))) {
+    //             val = 0;
+    //         } else {
+    //             val = parseInt(bgPosY);
+    //         }
+    //         if(bgPosY.indexOf('%')!==-1) {
+    //             inpImageVertSlider.value = val;
+    //             oFitPosY = val;
+    //         }
+    //     }
+    //     const src = elm.style.backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, "");
+    //     elm.innerHTML = '';
+    //     img = document.createElement('img');
+    //     img.setAttribute('src', src);
+    //     elm.appendChild(img);
+    //     img.style.opacity = 0.0001;
+    //     img.style.width = '100%';
+    //     img.style.height = '100%';
+    //     img.style.objectFit = 'cover';
+    //     img.style.objectPosition = `${oFitPosX}% ${oFitPosY}%`
+    // } else {
+    //     let x = img.style.objectPosition.split(' ')[0].replace('%','');
+    //     let y = img.style.objectPosition.split(' ')[1].replace('%','');
+    //     inpImageHorSlider.value = x;
+    //     inpImageVertSlider.value = y;
+    // }
+    //elementSelected
 
 
     this.builder.elementSelected = elm; //Show modal
@@ -70175,7 +70400,18 @@ class ContentBuilder {
     let builderStuff = this.util.builderStuff();
     if (!builderStuff) return; // in case the builder is destroyed
 
-    const htmlutil = new HtmlUtil(this);
+    const htmlutil = new HtmlUtil(this); // Reset Zoom
+
+    if (this.opts.page !== '') {
+      const wrapper = document.querySelector(this.opts.page);
+      if (wrapper) wrapper.style.transform = '';
+    } else {
+      const builders = document.querySelectorAll(this.opts.container);
+      builders.forEach(builder => {
+        builder.style.transform = '';
+      });
+    }
+
     const builders = document.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       builder.innerHTML = htmlutil.readHtml(builder, true);
@@ -70192,17 +70428,7 @@ class ContentBuilder {
     });
     this.moveable.destroy();
     this.builderStuff.parentNode.removeChild(this.builderStuff);
-    this.builderStuff = null; // Reset Zoom
-
-    if (this.opts.page !== '') {
-      const wrapper = document.querySelector(this.opts.page);
-      wrapper.style.transform = '';
-    } else {
-      const builders = document.querySelectorAll(this.opts.container);
-      builders.forEach(builder => {
-        builder.style.transform = '';
-      });
-    }
+    this.builderStuff = null;
   }
 
   saveImages(handler, onComplete, onBase64Upload) {