@innovastudio/contentbuilder 1.4.116 → 1.4.117

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -5539,10 +5539,32 @@ div[data-html] {
   height: 844px;
 }
 
-@media all and (min-width: 2030px) {
+@media all and (min-width: 1620px) {
   .is-content-view.desktop {
-    width: 1560px;
-    height: 974px;
+    width: 1420px;
+    height: 887px;
+  }
+
+  .is-content-view.tablet-landscape {
+    width: 1280px;
+    height: 960px;
+  }
+}
+@media all and (min-width: 1720px) {
+  .is-content-view.desktop {
+    width: 1520px;
+    height: 949px;
+  }
+
+  .is-content-view.tablet-landscape {
+    width: 1280px;
+    height: 960px;
+  }
+}
+@media all and (min-width: 1820px) {
+  .is-content-view.desktop {
+    width: 1620px;
+    height: 1012px;
   }
 
   .is-content-view.tablet-landscape {

package/public/contentbuilder/contentbuilder.esm.js

@@ -5196,6 +5196,54 @@ class Util {
       this.builder.rte.positionToolbar();
     }
   }
+  clearPops() {
+    // Simplified version of clearControls(), used only on window resize
+
+    const dom = this.dom;
+    const builderStuff = this.builder.builderStuff;
+    if (!builderStuff) return; // in case the builder is destroyed
+
+    if (builderStuff.getAttribute('preventDevault')) {
+      setTimeout(() => {
+        builderStuff.removeAttribute('preventDevault');
+      }, 30);
+      return;
+    }
+    let tools = builderStuff.querySelectorAll('.is-tool');
+    Array.prototype.forEach.call(tools, tool => {
+      tool.style.display = '';
+      dom.removeClass(tool, 'active');
+    });
+    if (this.builder.iframe) {
+      tools = this.builder.contentStuff.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, tool => {
+        tool.style.display = '';
+        dom.removeClass(tool, 'active');
+      });
+    }
+    this.builder.moveable.updateRect();
+    document.querySelector('.moveable-control-box').style.display = 'none';
+
+    // show iframe overlay to make it clickable
+    let ovls = this.builder.doc.querySelectorAll('.ovl');
+    Array.prototype.forEach.call(ovls, ovl => {
+      ovl.style.display = 'block';
+    });
+    let pops = builderStuff.querySelectorAll('.is-pop');
+    Array.prototype.forEach.call(pops, pop => {
+      pop.style.display = '';
+      dom.removeClass(pop, 'active');
+      pop.setAttribute('aria-hidden', true);
+    });
+    this.builder.colTool.lockIndicator.style.display = '';
+    if (this.builder.resize) {
+      this.builder.resize.destroy(); // destroy previous instance
+    }
+
+    // Clear resizable images
+    // this.builder.element.image.clearImageResizer();
+  }
+
   clearControls() {
     const dom = this.dom;
     const builderStuff = this.builder.builderStuff;
@@ -71115,28 +71163,39 @@ class Rte {
     }, true);
   }
   applyClassFontSize(elm, num) {
+    let prefix = '';
+    let screenMode = this.builder.screenMode;
+    if (screenMode === 'desktop') {
+      prefix = '';
+    } else if (screenMode === 'tablet-landscape') {
+      prefix = 'md-';
+    } else if (screenMode === 'tablet') {
+      prefix = 'sm-';
+    } else if (screenMode === 'mobile') {
+      prefix = 'xs-';
+    }
     const dom = this.dom;
     let currentFontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
     let classname = '';
-    if (num === '+' || num === '-' || num === '') classname = num;else classname = 'size-' + num;
+    if (num === '+' || num === '-' || num === '') classname = num;else classname = prefix + 'size-' + num;
     const arrSizes = this.builder.opts.fontSizeClassValues;
 
     // Get current class size & remove all class size from the element
     var currentClassSize = '';
     for (var i = 0; i <= arrSizes.length - 1; i++) {
-      if (dom.hasClass(elm, 'size-' + arrSizes[i])) {
-        currentClassSize = 'size-' + arrSizes[i];
+      if (dom.hasClass(elm, prefix + 'size-' + arrSizes[i])) {
+        currentClassSize = prefix + 'size-' + arrSizes[i];
         /** mod by Jack */
         //dom.removeClass(elm, 'size-'+arrSizes[i]);
         let n = arrSizes[i];
         dom.doFunction(elm, theEl => {
-          dom.removeClass(theEl, 'size-' + n);
+          dom.removeClass(theEl, prefix + 'size-' + n);
         }, true);
       } else {
         /** mod by Jack */
         let n = arrSizes[i];
         dom.doFunction(elm, theEl => {
-          dom.removeClass(theEl, 'size-' + n);
+          dom.removeClass(theEl, prefix + 'size-' + n);
         }, true);
       }
     }
@@ -71145,15 +71204,15 @@ class Rte {
     if (currentClassSize === '' && (classname === '+' || classname === '-')) {
       for (i = 0; i <= arrSizes.length - 1; i++) {
         if (currentFontSize >= arrSizes[i] & currentFontSize < arrSizes[i + 1]) {
-          currentClassSize = 'size-' + arrSizes[i];
+          currentClassSize = prefix + 'size-' + arrSizes[i];
         }
       }
     }
     if (classname === '+') {
-      i = currentClassSize.replace('size-', '') * 1;
+      i = currentClassSize.replace(prefix + 'size-', '') * 1;
       var idx = arrSizes.indexOf(i);
       if (idx < arrSizes.length - 1) {
-        currentClassSize = 'size-' + arrSizes[idx + 1];
+        currentClassSize = prefix + 'size-' + arrSizes[idx + 1];
       }
       /** mod by Jack */
       //dom.addClass(elm, currentClassSize);
@@ -71161,10 +71220,10 @@ class Rte {
         dom.addClass(theEl, currentClassSize);
       }, true);
     } else if (classname === '-') {
-      i = currentClassSize.replace('size-', '') * 1;
+      i = currentClassSize.replace(prefix + 'size-', '') * 1;
       idx = arrSizes.indexOf(i);
       if (idx >= 1) {
-        currentClassSize = 'size-' + arrSizes[idx - 1];
+        currentClassSize = prefix + 'size-' + arrSizes[idx - 1];
       }
       /** mod by Jack */
       //dom.addClass(elm, currentClassSize);
@@ -71502,6 +71561,17 @@ class Rte {
     }
   }
   getTextSettingsState() {
+    let prefix = '';
+    let screenMode = this.builder.screenMode;
+    if (screenMode === 'desktop') {
+      prefix = '';
+    } else if (screenMode === 'tablet-landscape') {
+      prefix = 'md-';
+    } else if (screenMode === 'tablet') {
+      prefix = 'sm-';
+    } else if (screenMode === 'mobile') {
+      prefix = 'xs-';
+    }
     const dom = this.dom;
     const pop = this.rteTextSettingOptions;
 
@@ -71520,9 +71590,13 @@ class Rte {
 
     if (container) {
       const arrSizes = this.builder.opts.fontSizeClassValues;
-      for (let i = 0; i <= arrSizes.length - 1; i++) {
-        if (dom.hasClass(container, 'size-' + arrSizes[i])) {
+      let found = false;
+      // Check if size is defined for specific screenMode
+      if (prefix !== '') for (let i = 0; i <= arrSizes.length - 1; i++) {
+        if (dom.hasClass(container, prefix + 'size-' + arrSizes[i])) {
           // Get current class
+
+          found = true;
           const btns = pop.querySelectorAll('.rte-fontsize-options button');
           Array.prototype.forEach.call(btns, btn => {
             let num = btn.getAttribute('data-value');
@@ -71532,6 +71606,21 @@ class Rte {
           });
         }
       }
+      if (!found) {
+        // Use default (desktop) defined size
+        for (let i = 0; i <= arrSizes.length - 1; i++) {
+          if (dom.hasClass(container, 'size-' + arrSizes[i])) {
+            // Get current class
+            const btns = pop.querySelectorAll('.rte-fontsize-options button');
+            Array.prototype.forEach.call(btns, btn => {
+              let num = btn.getAttribute('data-value');
+              if (parseInt(num) === arrSizes[i]) {
+                btn.classList.add('on');
+              }
+            });
+          }
+        }
+      }
     }
     btns = pop.querySelectorAll('.rte-fontweight-options button');
     Array.prototype.forEach.call(btns, btn => {
@@ -79041,6 +79130,7 @@ class ContentBuilder {
       snippetJSON: {
         'snippets': []
       },
+      screenMode: 'desktop',
       // Live Preview
       // previewURL: 'preview.html',
       onPreviewOpen: () => {
@@ -80197,7 +80287,8 @@ class ContentBuilder {
       });
       this.win.addEventListener('resize', this.doWindowResize = () => {
         // this.util.clearActiveCell();
-        this.util.clearControls();
+        // this.util.clearControls();
+        this.util.clearPops();
 
         // Disable on mobile
         const viewportWidth = this.doc.body.clientWidth;