@innovastudio/contentbuilder 1.3.25 → 1.3.27

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -355,6 +355,35 @@ button:focus-visible {
 .is-ui .style-helper-button-classic svg {
   fill: #000;
 }
+#_cbhtml .is-area color,
+.is-ui .is-area color {
+  background: #000 !important;
+}
+#_cbhtml .is-area background,
+.is-ui .is-area background {
+  background: #fff !important;
+}
+#_cbhtml .is-area button,
+.is-ui .is-area button {
+  color: #000 !important;
+}
+#_cbhtml .is-area button svg,
+.is-ui .is-area button svg {
+  fill: #000 !important;
+}
+#_cbhtml .is-area-2nd,
+.is-ui .is-area-2nd {
+  color: #000 !important;
+  background: #fff !important;
+}
+#_cbhtml .is-area-2nd button,
+.is-ui .is-area-2nd button {
+  color: #000 !important;
+}
+#_cbhtml .is-area-2nd button svg,
+.is-ui .is-area-2nd button svg {
+  fill: #000 !important;
+}
 #_cbhtml .is-pop,
 .is-ui .is-pop {
   display: none;
@@ -5178,3 +5207,9 @@ button:focus-visible {
 .is-builder > div > div[data-module=slider-builder].cell-active {
   z-index: 1 !important;
 }
+
+/* Row Lock will hide row tool */
+.row-lock .is-row-tool,
+.row-lock .is-rowadd-tool {
+  display: none !important;
+}

package/public/contentbuilder/contentbuilder.esm.js

@@ -5827,6 +5827,124 @@ class Util {
   }
 
   getUIStyles() {
+    const dom = this.dom;
+    const html = `
+        <input type="text" class="style-helper-input" style="display:none;">
+        <label class="style-helper-label" style="display:none;"></label>
+        <button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
+        <select class="style-helper-select" style="display:none;"><option value=""></option></select>
+
+        <div class="style-helper modal-color"></div>
+        <div class="style-helper modal-background"></div>
+        <div class="style-helper button-pickcolor-border"></div>
+        <div class="style-helper button-pickcolor-background"></div>
+
+        <button class="style-helper base"><svg><use xlink:href="#ion-code-working"></use></svg></button>
+        <div class="style-helper base on"></div>
+        <div class="style-helper base hover"></div>
+
+        <div class="style-helper snippet-color"></div>
+        <div class="style-helper snippet-background"></div>
+        <div class="style-helper snippet-tabs-background"></div>
+        <div class="style-helper snippet-tab-item-background"></div>
+        <div class="style-helper snippet-tab-item-background-active"></div>
+        <div class="style-helper snippet-tab-item-background-hover"></div>
+        <div class="style-helper snippet-tab-item-color"></div>
+
+        <div class="style-helper snippet-more-item-background"></div>
+        <div class="style-helper snippet-more-item-background-active"></div>
+        <div class="style-helper snippet-more-item-background-hover"></div>
+        <div class="style-helper snippet-more-item-color"></div>
+
+        <div class="style-helper tabs-background"></div>
+        <div class="style-helper tab-item-active-border-bottom"></div>
+        <div class="style-helper tab-item-color"></div>
+        <div class="style-helper tabs-more-background"></div>
+        <div class="style-helper tabs-more-border"></div>
+        <div class="style-helper tabs-more-item-color"></div>
+        <div class="style-helper tabs-more-item-background-hover"></div>
+        <div class="style-helper separator-color"></div>
+        <div class="style-helper outline-color"></div>
+        `;
+    dom.appendHtml(this.builder.builderStuff, html); // new method
+
+    const getVal = (selector, rule) => {
+      const stuff = this.builder.builderStuff.querySelector('.style-helper' + selector);
+      return window.getComputedStyle(stuff, null).getPropertyValue(rule);
+    };
+
+    const getSvgFill = () => {
+      const btn = this.builder.builderStuff.querySelector('.style-helper.base');
+      return window.getComputedStyle(btn.querySelector('svg'), null).getPropertyValue('fill');
+    };
+
+    const inp = this.builder.builderStuff.querySelector('.style-helper-input');
+    const lbl = this.builder.builderStuff.querySelector('.style-helper-label');
+    const sel = this.builder.builderStuff.querySelector('.style-helper-select');
+    const btnClassic = this.builder.builderStuff.querySelector('.style-helper-button-classic');
+    this.builder.styleModalColor = getVal('.modal-color', 'background-color');
+    this.builder.styleModalBackground = getVal('.modal-background', 'background-color');
+    this.builder.styleButtonPickColorBorder = getVal('.button-pickcolor-border', 'border');
+    this.builder.styleButtonPickColorBackground = getVal('.button-pickcolor-background', 'background-color');
+    this.builder.styleToolBackground = getVal('.base', 'background-color');
+    this.builder.styleButtonColor = getVal('.base', 'color');
+    this.builder.styleButtonSvgFill = getSvgFill(); // this.builder.styleButtonBackgroundOn = getVal('.base.on', 'background-color');
+
+    this.builder.styleButtonBackgroundHover = getVal('.base.hover', 'background-color');
+    this.builder.styleSnippetColor = getVal('.snippet-color', 'background-color');
+    this.builder.styleSnippetBackground = getVal('.snippet-background', 'background-color');
+    this.builder.styleSnippetTabsBackground = getVal('.snippet-tabs-background', 'background-color');
+    this.builder.styleSnippetTabItemBackground = getVal('.snippet-tab-item-background', 'background-color');
+    this.builder.styleSnippetTabItemBackgroundActive = getVal('.snippet-tab-item-background-active', 'background-color');
+    this.builder.styleSnippetTabItemBackgroundHover = getVal('.snippet-tab-item-background-hover', 'background-color');
+    this.builder.styleSnippetTabItemColor = getVal('.snippet-tab-item-color', 'background-color');
+    this.builder.styleSnippetMoreItemBackground = getVal('.snippet-more-item-background', 'background-color');
+    this.builder.styleSnippetMoreItemBackgroundActive = getVal('.snippet-more-item-background-active', 'background-color');
+    this.builder.styleSnippetMoreItemBackgroundHover = getVal('.snippet-more-item-background-hover', 'background-color');
+    this.builder.styleSnippetMoreItemColor = getVal('.snippet-more-item-color', 'background-color'); // Normal Tabs (ex. used in 'Symbol' plugin)
+
+    this.builder.styleTabsBackground = getVal('.tabs-background', 'background-color');
+    this.builder.styleTabItemBorderBottomActive = getVal('.tab-item-active-border-bottom', 'border');
+    this.builder.styleTabItemColor = getVal('.tab-item-color', 'background-color');
+    this.builder.styleTabsMoreBackground = getVal('.tabs-more-background', 'background-color');
+    this.builder.styleTabsMoreBorder = getVal('.tabs-more-border', 'border');
+    this.builder.styleTabsMoreItemColor = getVal('.tabs-more-item-color', 'background-color');
+    this.builder.styleTabsMoreBackgroundHover = getVal('.tabs-more-item-background-hover', 'background-color');
+    this.builder.styleSeparatorColor = getVal('.separator-color', 'background-color');
+    this.builder.styleOutlineColor = getVal('.outline-color', 'background-color'); // Select (ex. used in 'Button Editor' plugin, 'Slider' plugin, 'Slider Content' plugin)
+
+    this.builder.styleSelectBackground = window.getComputedStyle(sel, null).getPropertyValue('background-color');
+    this.builder.styleSelectColor = window.getComputedStyle(sel, null).getPropertyValue('color');
+    this.builder.styleSelectOptionBackground = window.getComputedStyle(sel.querySelector('option'), null).getPropertyValue('background-color'); // Input (ex. used in 'Search & Replace' plugin)
+
+    this.builder.styleInputBackground = window.getComputedStyle(inp, null).getPropertyValue('background-color');
+    this.builder.styleInputBorderBottom = window.getComputedStyle(inp, null).getPropertyValue('border-bottom');
+    this.builder.styleInputColor = window.getComputedStyle(inp, null).getPropertyValue('color'); // Label (ex. used in 'Search & Replace' plugin)
+
+    this.builder.styleLabelColor = window.getComputedStyle(lbl, null).getPropertyValue('color'); // Button Classic (ex. used in 'Search & Replace' plugin)
+
+    this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
+    this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
+    this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color');
+    this.builder.styleDark = false;
+    this.builder.styleColored = false;
+    this.builder.styleColoredDark = false;
+    this.builder.styleLight = false;
+
+    if (document.body.getAttribute('class')) {
+      if (document.body.getAttribute('class').indexOf('colored-dark') !== -1) {
+        this.builder.styleColoredDark = true;
+      } else if (document.body.getAttribute('class').indexOf('dark') !== -1) {
+        this.builder.styleDark = true;
+      } else if (document.body.getAttribute('class').indexOf('colored') !== -1) {
+        this.builder.styleColored = true;
+      } else if (document.body.getAttribute('class').indexOf('light') !== -1) {
+        this.builder.styleLight = true;
+      }
+    }
+  }
+
+  getUIStyles_OLD() {
     const dom = this.dom;
     const html = `<button class="style-helper"><svg><use xlink:href="#ion-code-working"></use></svg></button>
         <input type="text" class="style-helper-input" style="display:none;">
@@ -59439,6 +59557,24 @@ class ColumnTool {
         this.columnTool.querySelector('.cell-remove').style.display = '';
         this.columnTool.querySelector('.cell-more').style.display = '';
       }
+    } // Column Lock will hide Add & Remove column
+
+
+    if (col.classList.contains('column-lock')) {
+      this.columnTool.querySelector('.cell-add').style.display = 'none';
+      this.columnTool.querySelector('.cell-remove').style.display = 'none';
+      this.columnMore.querySelector('.cell-prev').style.display = 'none';
+      this.columnMore.querySelector('.cell-next').style.display = 'none';
+      this.columnMore.querySelector('.cell-up').style.display = 'none';
+      this.columnMore.querySelector('.cell-down').style.display = 'none';
+      this.columnMore.querySelector('.cell-increase').style.display = 'none';
+      this.columnMore.querySelector('.cell-decrease').style.display = 'none';
+      this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
+      this.columnMore.querySelector('.is-separator').style.display = 'none';
+      this.columnMore.querySelector('.cell-locking').style.display = 'none';
+    } else {
+      this.columnMore.querySelector('.is-separator').style.display = '';
+      this.columnMore.querySelector('.cell-locking').style.display = '';
     }
   }