@innovastudio/contentbuilder 1.0.72 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.0.72",
+  "version": "1.0.78",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -10915,8 +10915,8 @@ const renderQuickAdd = builder => {
     const html = `<div class="is-pop quickadd arrow-right" style="z-index:10003;">
         <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>
         <div class="is-pop-tabs">
-            <div class="is-pop-tab-item active" data-value="left">${util.out('Add to Left')}</div>
-            <div class="is-pop-tab-item" data-value="right">${util.out('Add to Right')}</div>
+            <div class="is-pop-tab-item" data-value="left">${util.out('Add to Left')}</div>
+            <div class="is-pop-tab-item active" data-value="right">${util.out('Add to Right')}</div>
         </div>
         <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">
             <button title="${util.out('Paragraph')}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${util.out('Paragraph')}</button>
@@ -38850,9 +38850,9 @@ class Image {
                             <button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
                             <button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
                         </div>
-                        <div class="imageedit-preview" style="min-width:200px;">
+                        <div class="imageedit-preview" style="max-width:1000px;width:100%;max-height:550px;">
                         </div>
-                        <div style="margin-top:7px;text-align:right;align-self:flex-end;">
+                        <div style="margin-top:15px;text-align:right;align-self:flex-end;">
                             <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                             <button title="${util.out('Apply')}" class="input-ok classic-primary">${util.out('Apply')}</button>
                         </div>
@@ -39386,6 +39386,7 @@ class Image {
         let preview = modalImageEdit.querySelector('.imageedit-preview');
         const maxW = 800;
         const maxH = 550;
+        preview.style.height = '';
 
         if (img.offsetWidth < maxW && img.offsetHeight < maxH) {
           preview.style.width = img.offsetWidth + 'px';
@@ -39400,7 +39401,7 @@ class Image {
           }
         }
 
-        preview.innerHTML = '<img src="" style="max-width:100%"/>';
+        preview.innerHTML = '<img src="" style="max-width:100%;object-fit:contain;height:100%;"/>';
         let imagePreview = modalImageEdit.querySelector('img');
         imagePreview.src = img.src;
         this.cropper = new Cropper(imagePreview, {
@@ -52780,6 +52781,7 @@ class Rte {
     let rteIconOptions;
     let rteCustomTagOptions;
     let rteZoomSlider;
+    let inpZoomSlider;
 
     if (!rteTool) {
       let customtag_button = '';
@@ -52886,7 +52888,13 @@ class Rte {
         html_iconrte = html_iconrte + `<button title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;
       }
       /* /Icon Buttons */
-      // <div class="is-draggable" style="width: 5px;height: 45pxpx;background:#fff;cursor: move;"></div>
+
+
+      let html_fontsizes = '';
+
+      for (j = 0; j < builder.opts.defaultFontSizes.length; j++) {
+        html_fontsizes += `<button title="${builder.opts.defaultFontSizes[j]}px" data-value="${builder.opts.defaultFontSizes[j]}">${builder.opts.defaultFontSizes[j]}</button>`;
+      } // <div class="is-draggable" style="width: 5px;height: 45pxpx;background:#fff;cursor: move;"></div>
       // <div style="height:55px;background:#fff;border-top:#f5f5f5 1px solid;">
       // </div>
 
@@ -52961,23 +52969,7 @@ class Rte {
                 <div>
                     <div class="is-label">${util.out('Font Size')}</div>
                     <div class="rte-fontsize-options" style="display: flex;flex-flow: wrap;">
-                        <button title="14px" data-value="14">14</button>
-                        <button title="16px" data-value="16">16</button>
-                        <button title="18px" data-value="18">18</button>
-                        <button title="21px" data-value="21">21</button>
-                        <button title="24px" data-value="24">24</button>
-                        <!--<button title="28px" data-value="28">28</button>-->
-                        <button title="32px" data-value="32">32</button>
-                        <!--<button title="38px" data-value="38">38</button>-->
-                        <button title="48px" data-value="48">48</button>
-                        <!--<button title="60px" data-value="60">60</button>-->
-                        <button title="76px" data-value="76">76</button>
-                        <button title="96px" data-value="96">96</button>
-
-                        <button title="120px" data-value="120">120</button>
-                        <!--<button title="160px" data-value="160">160</button>-->
-                        <button title="200px" data-value="200">200</button>
-                        <button title="300px" data-value="300">300</button>
+                        ${html_fontsizes}
 
                         <button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
@@ -53016,6 +53008,16 @@ class Rte {
                 </div>
             </div>
 
+            <div class="is-modal viewzoom">
+                <div class="is-modal-content" style="max-width:250px;height:150px;display:flex;flex-flow:column;justify-content:center;">
+                    <div class="is-modal-bar is-draggable">${util.out('Zoom')}</div>
+                
+                    <div style="display:flex;flex-wrap:wrap;width:100%;padding-top:32px;">
+                        <input type="range" min="50" max="100" value="1" class="inp-zoom-slider is-rangeslider">
+                    </div>
+                </div>
+            </div>
+
             <div class="is-modal insertimage">
                 <div class="is-modal-content" style="max-width:560px;">
                     <div class="is-browse-area">
@@ -53076,7 +53078,8 @@ class Rte {
       rteZoomOptions = builderStuff.querySelector('.rte-zoom-options');
       rteIconOptions = builderStuff.querySelector('.rte-icon-options');
       rteCustomTagOptions = builderStuff.querySelector('.rte-customtag-options');
-      rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider'); // Prepare for tooltip
+      rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider');
+      inpZoomSlider = builderStuff.querySelector('.inp-zoom-slider'); // Prepare for tooltip
 
       let elms = rteTool.querySelectorAll('[title]');
       Array.prototype.forEach.call(elms, elm => {
@@ -53138,6 +53141,7 @@ class Rte {
     this.rteIconOptions = rteIconOptions;
     this.rteCustomTagOptions = rteCustomTagOptions;
     this.rteZoomSlider = rteZoomSlider;
+    this.inpZoomSlider = inpZoomSlider;
     this.positionToolbar(); // Formatting
 
     let btnRteFormatting = builderStuff.querySelectorAll('button.rte-formatting');
@@ -53889,6 +53893,91 @@ class Rte {
           this.builder.onZoomEnd(scale);
         }
       }, 300);
+    }; // Zoom Modal
+
+
+    this.inpZoomSlider.onfocus = () => {
+      if (this.builder.onZoomStart) {
+        this.builder.onZoomStart();
+      }
+
+      this.inpZoomSlider.blur();
+    };
+
+    this.inpZoomSlider.oninput = () => {
+      //scale: 0.5 - 1
+      //val: 50 - 100
+      let val = this.inpZoomSlider.value;
+      let scale = val / 100;
+      this.builder.opts.zoom = scale;
+      localStorage.setItem('_zoom', scale); // Save
+      // setZoomOnArea
+
+      this.builder.setZoomOnArea(); // hide tools
+
+      /*
+      let tools = this.builderStuff.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, (tool) => {
+          tool.style.display = '';
+      });
+       let tool = this.builderStuff.querySelector('.is-column-tool');
+      tool.style.display = 'none';
+       tools = document.querySelectorAll('.is-row-tool');
+      tools.forEach(tool=>{
+          tool.style.display = 'none';
+      });
+       tools = document.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool=>{
+          tool.style.opacity = 0;
+      });
+      */
+
+      if (this.builder.onZoom) {
+        let val = this.inpZoomSlider.value;
+        let scale = val / 100;
+        this.builder.onZoom(scale);
+      }
+    };
+
+    this.inpZoomSlider.onchange = () => {
+      setTimeout(() => {
+        // setZoomOnControl
+        if (this.builder.opts.page !== '') {
+          const wrapper = document.querySelector(this.builder.opts.page);
+          this.builder.setZoomOnControl(wrapper);
+        } else {
+          const builders = document.querySelectorAll(this.builder.opts.container);
+          builders.forEach(builder => {
+            this.builder.setZoomOnControl(builder);
+          });
+        } // show & reposition
+
+        /*
+        this.builder.elmTool.repositionElementTool();
+         let col = this.builder.activeCol;
+        let tool = this.builderStuff.querySelector('.is-column-tool');
+        tool.style.display = '';
+        tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
+        tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
+         let tools = document.querySelectorAll('.is-row-tool');
+        tools.forEach(tool=>{
+            tool.style.display = '';
+        });
+         tools = document.querySelectorAll('.is-rowadd-tool');
+        tools.forEach(tool=>{
+            tool.style.opacity = '';
+        });
+        */
+
+
+        if (this.builder.onZoomEnd) {
+          let val = this.inpZoomSlider.value;
+          let scale = val / 100;
+          this.builder.onZoomEnd(scale);
+        }
+
+        this.rteZoomSlider.value = this.inpZoomSlider.value;
+      }, 300);
     }; // Text Settings
 
 
@@ -56905,6 +56994,13 @@ class Rte {
     }
   }
 
+  viewZoom() {
+    if (this.builder.onZoomOpen) this.builder.onZoomOpen();
+    this.inpZoomSlider.value = this.builder.opts.zoom * 100;
+    const modal = this.builderStuff.querySelector('.viewzoom');
+    this.util.showModal(modal, false, null, false);
+  }
+
 }
 
 const dom$4 = new Dom();
@@ -57695,7 +57791,8 @@ class ContentBuilder {
       clearPreferences: false,
       toolbarAddSnippetButton: false,
       animateModal: true,
-      fontSizeClassValues: [12, 14, 16, 18, 21, 24, 28, 32, 35, 38, 42, 46, 48, 50, 54, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 124, 128, 132, 136, 140, 144, 148, 152, 156, 160, 164, 168, 172, 176, 180, 184, 188, 192, 196, 200, 204, 208, 212, 216, 220, 224, 228, 232, 236, 240, 244, 248, 252, 256, 260, 264, 268, 272, 276, 280, 284, 288, 292, 296, 300, 304, 308, 312, 316, 320, 324, 328, 332, 336, 340, 344, 348, 352, 356, 360, 364, 368, 372, 376, 380, 384, 388, 392, 396, 400],
+      defaultFontSizes: [16, 17, 18, 19, 24, 32, 48, 76, 96, 120, 200, 300],
+      fontSizeClassValues: [12, 14, 15, 16, 17, 18, 19, 21, 24, 28, 32, 35, 38, 42, 46, 48, 50, 54, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 124, 128, 132, 136, 140, 144, 148, 152, 156, 160, 164, 168, 172, 176, 180, 184, 188, 192, 196, 200, 204, 208, 212, 216, 220, 224, 228, 232, 236, 240, 244, 248, 252, 256, 260, 264, 268, 272, 276, 280, 284, 288, 292, 296, 300, 304, 308, 312, 316, 320, 324, 328, 332, 336, 340, 344, 348, 352, 356, 360, 364, 368, 372, 376, 380, 384, 388, 392, 396, 400],
 
       /* If not empty, applying font size will apply class: size-12, size-14, and so on. All responsive, defined in content.css */
       gradientcolors: [['linear-gradient(0deg, rgb(255, 57, 25), rgb(249, 168, 37))'], ['linear-gradient(0deg, rgb(255, 57, 25), rgb(255, 104, 15))'], ['linear-gradient(0deg, #FF5722, #FF9800)'], ['linear-gradient(0deg, #613ca2, rgb(110, 123, 217))'], ['linear-gradient(0deg, rgb(65, 70, 206), rgb(236, 78, 130))'], ['linear-gradient(0deg, rgb(0, 150, 102), rgb(90, 103, 197))'], ['linear-gradient(30deg, rgb(249, 119, 148), rgb(98, 58, 162))'], ['linear-gradient(0deg, rgb(223, 70, 137), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(40, 53, 147), rgb(90, 103, 197))'], ['linear-gradient(0deg, rgb(21, 101, 192), rgb(52, 169, 239))'], ['linear-gradient(0deg, rgb(32, 149, 219), rgb(139, 109, 230))'], ['linear-gradient(0deg, rgb(90, 103, 197), rgb(0, 184, 201))'], ['linear-gradient(0deg, rgb(0, 184, 201), rgb(253, 187, 45))'], ['linear-gradient(0deg, rgb(255, 208, 100), rgb(239, 98, 159))'], ['linear-gradient(0deg, rgb(0, 214, 223), rgb(130, 162, 253))'], ['linear-gradient(0deg, rgb(50, 234, 251), rgb(248, 247, 126))'], ['linear-gradient(0deg, rgb(141, 221, 255), rgb(255, 227, 255))'], ['linear-gradient(0deg, rgb(255, 170, 170), rgb(255, 255, 200))'], ['linear-gradient(0deg, rgb(239, 239, 239), rgb(252, 252, 252))']],
@@ -59356,6 +59453,10 @@ class ContentBuilder {
     this.preferences.view();
   }
 
+  viewZoom() {
+    this.rte.viewZoom();
+  }
+
   loadSnippets(snippetFile) {
     if (this.preview) return;
     let snippetPanel = document.querySelector(this.opts.snippetList);