@innovastudio/contentbox 1.0.47 → 1.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.47",
+  "version": "1.0.51",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@ashthornton/asscroll": "^2.0.4",
-    "@innovastudio/contentbuilder": "^1.0.68",
+    "@innovastudio/contentbuilder": "^1.0.70",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -8198,7 +8198,10 @@ class EditBox {
           if (val >= 2700) val = 2700;
         }
 
-        container.style.maxWidth = val + 'px'; // dom.addClass(container, 'is-content-' + val); //new
+        container.style.maxWidth = val + 'px';
+        dom$G.addClass(container, 'is-content-' + val); //new
+
+        dom$G.addClass(container, 'v2'); //new
 
         modalEditBox.querySelector('.inp-box-size').value = val; //Trigger Change event
 
@@ -8208,6 +8211,13 @@ class EditBox {
     const inpBoxSize = modalEditBox.querySelector('.inp-box-size');
     inpBoxSize.addEventListener('input', () => {
       this.builder.editor.saveForUndo();
+      const arrMaxWidth = [];
+      let n = 300;
+
+      while (n <= 2700) {
+        arrMaxWidth.push(n);
+        n = n + 20;
+      }
 
       let activeBox = this.builder.activeBox;
       let container = activeBox.querySelector('.is-container');
@@ -8219,7 +8229,24 @@ class EditBox {
       let val = inpBoxSize.value;
 
       if (!isNaN(val) && val >= 300 && val <= 2700) {
-        container.style.maxWidth = val + 'px'; // dom.addClass(container, 'is-content-' + val); //new
+        container.style.maxWidth = val + 'px';
+        let maxWidth = parseInt(window.getComputedStyle(container, null).getPropertyValue('max-width'));
+
+        for (let n = 0; n <= 121; n++) {
+          let mw = arrMaxWidth[n];
+
+          if (mw > maxWidth) {
+            maxWidth = mw;
+            break;
+          }
+        }
+
+        val = maxWidth;
+        if (val <= 300) val = 300;
+        if (val >= 2700) val = 2700;
+        dom$G.addClass(container, 'is-content-' + val); //new
+
+        dom$G.addClass(container, 'v2'); //new
       } //Trigger Change event
 
 
@@ -10002,13 +10029,19 @@ class EditBox {
   } //end of added by jack
 
 
-  boxImage(url) {
+  boxImage(url, err) {
     // Remove Waiting Indicator
     const builderStuff = this.builderStuff;
     const indicator = builderStuff.querySelector('.waiting-indicator');
     const indicatorOverlay = builderStuff.querySelector('.waiting-indicator-overlay');
     if (indicator) indicator.parentNode.removeChild(indicator);
     if (indicatorOverlay) indicatorOverlay.parentNode.removeChild(indicatorOverlay);
+
+    if (err) {
+      alert(err);
+      return;
+    }
+
     let activeBox;
 
     if (this.targetBox) {
@@ -21159,14 +21192,16 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom$B.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = '<a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a>';
+      const html = '<div><a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom$B.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
-            <a href="#" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>`;
+      const html = `<div>
+            <a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
+            <a href="#" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
+            </div>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-spacer');
@@ -63048,8 +63083,9 @@ class Rte {
                         <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="160px" data-value="160">160</button>-->
                         <button title="200px" data-value="200">200</button>
+                        <button title="300px" data-value="300">300</button>
 
                         <button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
@@ -67766,7 +67802,7 @@ 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],
+      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],
 
       /* 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))']],
@@ -74686,8 +74722,8 @@ class ContentBox {
     });
   }
 
-  boxImage(url) {
-    this.editbox.boxImage(url);
+  boxImage(url, err) {
+    this.editbox.boxImage(url, err);
   }
 
   mainCss() {