@innovastudio/contentbox 1.2.29 → 1.2.32

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.29",
-  "type": "module",
+  "version": "1.2.32",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +45,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.23",
+    "@innovastudio/contentbuilder": "^1.1.25",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -9737,7 +9737,7 @@ class EditBox {
         if (overlayBg.style.filter) {
           if (overlayBg.style.filter.indexOf('grayscale') !== -1) {
             chkImageGrayscale.checked = true;
-            overlay.style.filter = 'grayscale(1)'; // change filter from -is-overlay-bg to is-overlay (to prevent conflict with animation)
+            overlay.style.filter = 'grayscale(1)'; // Change filter from -is-overlay-bg to is-overlay (to prevent conflict with animation)
 
             overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
           }
@@ -57933,24 +57933,24 @@ class ButtonEditor {
                         </div>
 
                         <div class="flex flex-row" style="margin:15px 0 0">
-                            <div class="flex flex-col" style="display:none;margin-right: 40px;">
+                            <div class="flex flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <label>${util.out('Border Thickness')}</label>:
+                                    <label>${util.out('Border Color')}</label>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
-                                    <button title="${util.out('No Border')}" data-command="0" class="border-width-command" style="margin-right:4px">${util.out('No Border')}</button>
-                                    <button title="1px" data-command="1" class="border-width-command" style="text-transform:none;margin-right:4px">1px</button>
-                                    <button title="2px" data-command="2" class="border-width-command" style="text-transform:none;margin-right:4px">2px</button>
+                                    <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
+                                    <button title="${util.out('Current')}" data-command="current" class="border-color-command" style="margin-right:4px">${util.out('Current')}</button>
                                 </div>
                             </div>
-                            
+
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Border Color')}</label>:
+                                    <label>${util.out('Border Thickness')}</label>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
-                                    <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
-                                    <button title="${util.out('Current')}" data-command="current" class="border-color-command" style="margin-right:4px">${util.out('Current')}</button>
+                                    <button title="${util.out('No Border')}" data-command="0" class="border-width-command" style="margin-right:4px">${util.out('No Border')}</button>
+                                    <button title="1px" data-command="1" class="border-width-command" style="text-transform:none;margin-right:4px">1px</button>
+                                    <button title="2px" data-command="2" class="border-width-command" style="text-transform:none;margin-right:4px">2px</button>
                                 </div>
                             </div>
                         </div>
@@ -58147,53 +58147,90 @@ class ButtonEditor {
       let btns; //background color
 
       const btnBgColor = buttonModal.querySelector('.bg-color-command');
-      btnBgColor.addEventListener('click', () => {
+      btnBgColor.addEventListener('click', e => {
         this.builder.uo.saveForUndo(true); // checkLater = true
+        // this.builder.simpleColorPicker((colorClass)=>{
+        //     const activeButton = this.builder.activeButton||this.builder.activeLinkButton;
+        //     dom.removeClassesByPrefix(activeButton, 'bg-');
+        //     dom.addClass(activeButton, colorClass);
+        //     this.applyDefault(activeButton);
+        //     setTimeout(()=>{
+        //         const currBg = dom.getStyle(activeButton,'background-color');
+        //         btnBgColor.style.backgroundColor = currBg;
+        //     },160);
+        //     this.builder.opts.onChange();
+        // });
 
-        this.builder.simpleColorPicker(colorClass => {
+        const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+        let elm = e.target;
+        this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+          activeButton.style.backgroundColor = color;
+          activeButton.setAttribute('data-bg', color);
           dom$z.removeClassesByPrefix(activeButton, 'bg-');
-          dom$z.addClass(activeButton, colorClass);
-          this.applyDefault(activeButton);
-          setTimeout(() => {
-            const currBg = dom$z.getStyle(activeButton, 'background-color');
-            btnBgColor.style.backgroundColor = currBg;
-          }, 160);
+          elm.style.backgroundColor = color; // preview
+          //Trigger Change event
+
           this.builder.opts.onChange();
-        });
+        }, activeButton.style.backgroundColor);
       }); //text color
 
       const btnTextColor = buttonModal.querySelector('.text-color-command');
-      btnTextColor.addEventListener('click', () => {
+      btnTextColor.addEventListener('click', e => {
         this.builder.uo.saveForUndo(true); // checkLater = true
+        // this.builder.simpleColorPicker((colorClass)=>{
+        //     const activeButton = this.builder.activeButton||this.builder.activeLinkButton;
+        //     dom.removeClassesByPrefix(activeButton, 'text-');
+        //     dom.addClass(activeButton, colorClass);
+        //     this.applyDefault(activeButton);
+        //     setTimeout(function(){
+        //         const currColor = dom.getStyle(activeButton,'color');
+        //         btnTextColor.style.backgroundColor = currColor;
+        //     },160);
+        //     this.builder.opts.onChange();
+        // }, 'text');
 
-        this.builder.simpleColorPicker(colorClass => {
+        const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+        let elm = e.target;
+        this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+          activeButton.style.color = color;
           dom$z.removeClassesByPrefix(activeButton, 'text-');
-          dom$z.addClass(activeButton, colorClass);
-          this.applyDefault(activeButton);
-          setTimeout(function () {
-            const currColor = dom$z.getStyle(activeButton, 'color');
-            btnTextColor.style.backgroundColor = currColor;
-          }, 160);
+          elm.style.backgroundColor = color; // preview
+          //Trigger Change event
+
           this.builder.opts.onChange();
-        }, 'text');
+        }, activeButton.style.color);
       }); //hover background color
 
       const btnHoverBgColor = buttonModal.querySelector('.bg-color-hover-command');
-      btnHoverBgColor.addEventListener('click', () => {
+      btnHoverBgColor.addEventListener('click', e => {
         this.builder.uo.saveForUndo(true); // checkLater = true
+        // this.builder.simpleColorPicker((colorClass)=>{
+        //     const activeButton = this.builder.activeButton||this.builder.activeLinkButton;
+        //     dom.removeClassesByPrefix(activeButton, 'hover:bg-');
+        //     if(colorClass) dom.addClass(activeButton, 'hover:' + colorClass);
+        //     this.applyDefault(activeButton);
+        //     this.getVisibleBgColor(colorClass, (color)=>{
+        //         btnHoverBgColor.style.backgroundColor = color;
+        //     });
+        //     this.builder.opts.onChange();
+        // });
 
-        this.builder.simpleColorPicker(colorClass => {
+        const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+        let hoverbgcolor = activeButton.getAttribute('data-hover-bg');
+        let elm = e.target;
+        this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
+          activeButton.setAttribute('data-hover-bg', color);
           dom$z.removeClassesByPrefix(activeButton, 'hover:bg-');
-          if (colorClass) dom$z.addClass(activeButton, 'hover:' + colorClass);
-          this.applyDefault(activeButton);
-          this.getVisibleBgColor(colorClass, color => {
-            btnHoverBgColor.style.backgroundColor = color;
-          });
+          activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
+          activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+          elm.style.backgroundColor = color; // preview
+          //Trigger Change event
+
           this.builder.opts.onChange();
-        });
+        }, hoverbgcolor ? hoverbgcolor : '');
       }); //hover text color
 
       const btnHoverTextColor = document.querySelectorAll('.text-color-hover-command');
@@ -58271,8 +58308,8 @@ class ButtonEditor {
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
           dom$z.removeClass(activeButton, 'border-0');
-          dom$z.removeClass(activeButton, 'border');
           dom$z.removeClass(activeButton, 'border-2');
+          dom$z.removeClass(activeButton, 'border');
           if (val === '0') dom$z.addClass(activeButton, 'border-0');else if (val === '1') dom$z.addClass(activeButton, 'border');else if (val === '2') dom$z.addClass(activeButton, 'border-2');
           this.applyDefault(activeButton); // Button on/off
 
@@ -58605,12 +58642,16 @@ class ButtonEditor {
         if (item.indexOf('hover:bg-') === 0) {
           this.getVisibleBgColor(item.replace('hover:', ''), color => {
             btnHoverBgColor.style.backgroundColor = color;
+            activeButton.setAttribute('data-hover-bg', color); //new inline
           });
         }
 
         if (item.indexOf('bg-') === 0) {
           this.getVisibleBgColor(item, color => {
             btnBgColor.style.backgroundColor = color;
+            activeButton.setAttribute('data-bg', color); //new inline
+
+            activeButton.style.backgroundColor = color; //new inline
           });
         }
 
@@ -58618,6 +58659,7 @@ class ButtonEditor {
           this.getVisibleTextColor(item, color => {
             btnTextColor.style.backgroundColor = color;
             currColor = color;
+            activeButton.style.color = color; //new inline
           });
         }
       });
@@ -58627,8 +58669,12 @@ class ButtonEditor {
       // if no text-[color] found
       currColor = dom$z.getStyle(activeButton, 'color');
       btnTextColor.style.backgroundColor = currColor;
-    }
+    } // NEW: inline color
+
 
+    if (activeButton.style.backgroundColor) btnBgColor.style.backgroundColor = activeButton.style.backgroundColor;
+    if (activeButton.getAttribute('data-hover-bg')) btnHoverBgColor.style.backgroundColor = activeButton.getAttribute('data-hover-bg');
+    if (activeButton.style.color) btnTextColor.style.backgroundColor = activeButton.style.color;
     let btn;
     btn = this.buttonModal.querySelector('.text-color-hover-command.on');
     dom$z.removeClass(btn, 'on');
@@ -58709,6 +58755,20 @@ class ButtonEditor {
       dom$z.addClass(btn, 'on');
     }
 
+    btn = this.buttonModal.querySelector('.border-width-command.on');
+    dom$z.removeClass(btn, 'on');
+
+    if (dom$z.hasClass(activeButton, 'border-0')) {
+      btn = this.buttonModal.querySelector('.border-width-command[data-command="0"]');
+      dom$z.addClass(btn, 'on');
+    } else if (dom$z.hasClass(activeButton, 'border-2')) {
+      btn = this.buttonModal.querySelector('.border-width-command[data-command="2"]');
+      dom$z.addClass(btn, 'on');
+    } else if (dom$z.hasClass(activeButton, 'border')) {
+      btn = this.buttonModal.querySelector('.border-width-command[data-command="1"]');
+      dom$z.addClass(btn, 'on');
+    }
+
     if (activeButton.classList) {
       activeButton.classList.forEach(item => {
         if (item.indexOf('size-') === 0) {
@@ -58919,13 +58979,13 @@ class ButtonEditor {
   applyDefault(link) {
     dom$z.addClass(link, 'transition-all');
     dom$z.addClass(link, 'inline-block');
-    dom$z.addClass(link, 'cursor-pointer');
-    dom$z.addClass(link, 'border-2');
+    dom$z.addClass(link, 'cursor-pointer'); // dom.addClass(link, 'border-2');
+
     dom$z.addClass(link, 'border-solid');
-    dom$z.addClass(link, 'leading-relaxed');
-    link.removeAttribute('style');
-    link.removeAttribute('onmouseover');
-    link.removeAttribute('onmouseout');
+    dom$z.addClass(link, 'leading-relaxed'); // link.removeAttribute('style');
+    // link.removeAttribute('onmouseover');
+    // link.removeAttribute('onmouseout');
+
     link.removeAttribute('data-hover-bgcolor');
     link.removeAttribute('data-hover-color');
     link.removeAttribute('data-hover-bordercolor');
@@ -64600,11 +64660,18 @@ class ColumnTool {
                 dom$m.addCssClass(cell, classes.end, classes);
                 dom$m.addClass(elm, 'on');
               }
+
+              cell.style.justifyContent = '';
+              cell.style.alignItems = '';
             } else {
               dom$m.removeCssClasses(cell, this.builder.cssClasses.display);
               dom$m.removeCssClasses(cell, this.builder.cssClasses.flexDirection);
               dom$m.removeCssClasses(cell, this.builder.cssClasses.justifyContent);
               dom$m.removeCssClasses(cell, this.builder.cssClasses.alignItems);
+              cell.style.display = '';
+              cell.style.flexDirection = '';
+              cell.style.justifyContent = '';
+              cell.style.alignItems = '';
             }
           } else {
             cell.style.display = 'flex';
@@ -84228,6 +84295,15 @@ class ContentBox {
           this.boxSetup(box);
         });
       }
+    }); // Change filter from -is-overlay-bg to is-overlay (to prevent conflict with animation)
+
+    let overlayBgs = document.querySelectorAll('.is-overlay-bg');
+    overlayBgs.forEach(elm => {
+      if (elm.style) if (elm.style.filter) {
+        if (elm.style.filter.indexOf('grayscale') !== -1) {
+          elm.parentNode.style.filter = 'grayscale(1)';
+        }
+      }
     });
     this.editor.applyBehavior(); // Re-apply