@innovastudio/contentbuilder 1.3.48 → 1.3.50

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -15273,6 +15273,9 @@ class HtmlUtil {
         dom$h.removeClass(elm, 'zoomIn');
         elm.style.animationDelay = '';
         elm.style.transitionDelay = '';
+        elm.style.transitionDuration = '';
+        elm.style.transitionTimingFunction = '';
+        elm.style.transitionProperty = '';
       });
       let emptystyles = tmp.querySelectorAll('[style=""]');
       Array.prototype.forEach.call(emptystyles, emptystyle => {
@@ -67117,6 +67120,7 @@ class Rte {
     let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
     zoomButton.forEach(btn => {
       dom.addEventListener(btn, 'click', () => {
+        this.rteZoomSlider.value = this.builder.opts.zoom * 100;
         const pop = this.rteZoomOptions;
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
@@ -68624,6 +68628,83 @@ class Rte {
     });
   }
 
+  zoomStart() {
+    if (this.builder.onZoomStart) {
+      this.builder.onZoomStart();
+    }
+  }
+
+  zoom(inp) {
+    //scale: 0.5 - 1
+    //val: 50 - 100
+    let val = inp.value;
+    let scale = val / 100;
+    this.builder.opts.zoom = scale;
+    localStorage.setItem('_zoom', scale); // Save
+    // setZoomOnArea
+
+    this.builder.setZoomOnArea(); // hide tools
+
+    let tools = this.builder.doc.querySelectorAll('.is-tool');
+    Array.prototype.forEach.call(tools, tool => {
+      tool.style.display = '';
+    });
+    tools = this.builder.doc.querySelectorAll('.is-row-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
+    tools = this.builder.doc.querySelectorAll('.is-col-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
+    tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+    tools.forEach(tool => {
+      tool.style.opacity = 0;
+    });
+
+    if (this.builder.onZoom) {
+      let val = inp.value;
+      let scale = val / 100;
+      this.builder.onZoom(scale);
+    }
+  }
+
+  zoomEnd(inp) {
+    setTimeout(() => {
+      // setZoomOnControl
+      if (this.builder.opts.page !== '') {
+        const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
+        this.builder.setZoomOnControl(wrapper);
+      } else {
+        const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+        builders.forEach(builder => {
+          this.builder.setZoomOnControl(builder);
+        });
+      } // show & reposition
+
+
+      this.builder.elmTool.repositionElementTool();
+      let tools = this.builder.doc.querySelectorAll('.is-row-tool');
+      tools.forEach(tool => {
+        tool.style.display = '';
+      });
+      tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool => {
+        tool.style.opacity = '';
+      });
+      tools = this.builder.doc.querySelectorAll('.is-col-tool');
+      tools.forEach(tool => {
+        tool.style.display = '';
+      });
+
+      if (this.builder.onZoomEnd) {
+        let val = inp.value;
+        let scale = val / 100;
+        this.builder.onZoomEnd(scale);
+      }
+    }, 300);
+  }
+
   insertImage() {
     const dom = this.dom;
     const modalInsertImage = this.builderStuff.querySelector('.insertimage');