@innovastudio/contentbuilder 1.3.26 → 1.3.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.26",
+  "version": "1.3.28",
   "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;

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;">
@@ -6260,7 +6378,6 @@ class Util {
         <li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${font_nunito}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${font_old_standard_tt}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${font_open_sans}"></div>
-        <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${font_open_sans_condensed}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${font_oranienbaum}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${font_oswald}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${font_oxygen}"></div>
@@ -6482,7 +6599,6 @@ class Util {
         <li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${path}nunito.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${path}old_standard_tt.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${path}open_sans.png"></li>
-        <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${path}open_sans_condensed.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${path}oranienbaum.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${path}oswald.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${path}oxygen.png"></li>
@@ -76500,6 +76616,7 @@ class ContentBuilder {
   }
 
   setUIColorRefresh() {
+    // All related with iframe style
     const util = this.util;
 
     if (!this.rte || !this.element) {