@innovastudio/contentbox 1.2.28 → 1.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.28",
+  "version": "1.2.31",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.23",
+    "@innovastudio/contentbuilder": "^1.1.24",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -9143,14 +9143,20 @@ class EditBox {
     const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
     chkBoxBgImageGrayscale.addEventListener('click', () => {
       const activeBox = this.builder.activeBox;
+      const overlay = activeBox.querySelector('.is-overlay');
       const overlayBg = activeBox.querySelector('.is-overlay-bg');
 
       if (chkBoxBgImageGrayscale.checked) {
         overlayBg.style.filter = 'grayscale(1)';
+        overlay.style.filter = 'grayscale(1)';
       } else {
         if (overlayBg.style.filter) {
           overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
         }
+
+        if (overlay.style.filter) {
+          overlay.style.filter = overlay.style.filter.replace('grayscale(1)', '');
+        }
       }
     });
     const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
@@ -9444,6 +9450,7 @@ class EditBox {
     const builderStuff = this.builderStuff;
     const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
     const activeBox = this.builder.activeBox;
+    let overlay = activeBox.querySelector('.is-overlay');
     const overlayBg = activeBox.querySelector('.is-overlay-bg');
     const overlayVideo = activeBox.querySelector('.is-video-bg');
     const overlayContent = activeBox.querySelector('.is-overlay-content');
@@ -9718,10 +9725,21 @@ class EditBox {
     if (url !== '') {
       divPreview.innerHTML = `<img src="${url}">`;
 
+      if (overlay) {
+        if (overlay.style.filter) {
+          if (overlay.style.filter.indexOf('grayscale') !== -1) {
+            chkImageGrayscale.checked = true;
+          }
+        }
+      }
+
       if (overlayBg) {
         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)
+
+            overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
           }
         }
       }
@@ -9755,8 +9773,6 @@ class EditBox {
     } // FIX OLD VERSION
 
 
-    let overlay = activeBox.querySelector('.is-overlay');
-
     if (overlay) ; else {
       activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
       overlay = activeBox.querySelector('.is-overlay');
@@ -57917,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>
@@ -58131,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');
@@ -58255,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
 
@@ -58589,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
           });
         }
 
@@ -58602,6 +58659,7 @@ class ButtonEditor {
           this.getVisibleTextColor(item, color => {
             btnTextColor.style.backgroundColor = color;
             currColor = color;
+            activeButton.style.color = color; //new inline
           });
         }
       });
@@ -58611,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');
@@ -58693,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) {
@@ -58903,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');
@@ -84212,6 +84288,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