@innovastudio/contentbuilder 1.0.74 → 1.0.77

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -38850,7 +38850,7 @@ 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;height: 100%;">
                         </div>
                         <div style="margin-top:7px;text-align:right;align-self:flex-end;">
                             <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -39400,7 +39400,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 +52780,7 @@ class Rte {
     let rteIconOptions;
     let rteCustomTagOptions;
     let rteZoomSlider;
+    let inpZoomSlider;
 
     if (!rteTool) {
       let customtag_button = '';
@@ -53006,6 +53007,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">
@@ -53066,7 +53077,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 => {
@@ -53128,6 +53140,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');
@@ -53879,6 +53892,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
 
 
@@ -56895,6 +56993,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();
@@ -59347,6 +59452,10 @@ class ContentBuilder {
     this.preferences.view();
   }
 
+  viewZoom() {
+    this.rte.viewZoom();
+  }
+
   loadSnippets(snippetFile) {
     if (this.preview) return;
     let snippetPanel = document.querySelector(this.opts.snippetList);