@innovastudio/contentbuilder 1.1.21 → 1.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.1.21",
+  "version": "1.1.24",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.esm.js

@@ -4738,8 +4738,8 @@ class Util {
 
       let builderActive = document.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
-      cellElement = rowElement.childNodes[0];
-      cellElement.click(); //change active block to the newly created
+      cellElement = rowElement.querySelector('div');
+      if (cellElement) cellElement.click(); //change active block to the newly created
       // Change to row selection
 
       rowElement.className = rowElement.className.replace('row-outline', ''); // columnTool = parent.document.querySelector('.is-column-tool');
@@ -17118,7 +17118,7 @@ class Dropdown {
     let dropdown = document.querySelector('.is-selectbox-options[data-group="' + groupname + '"]');
     if (this.opts.dropdown) dropdown = this.opts.dropdown;
     dom$C.addEventListener(selectbox, 'click', () => {
-      if (dropdown.style.display === 'none') {
+      if (dropdown.style.display === 'none' || dropdown.style.display === '') {
         let dropdowns = document.querySelectorAll('.is-selectbox-options');
         Array.prototype.forEach.call(dropdowns, elm => {
           elm.style.display = 'none';
@@ -47319,24 +47319,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>
@@ -47533,53 +47533,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');
@@ -47657,8 +47694,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
 
@@ -47991,12 +48028,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
           });
         }
 
@@ -48004,6 +48045,7 @@ class ButtonEditor {
           this.getVisibleTextColor(item, color => {
             btnTextColor.style.backgroundColor = color;
             currColor = color;
+            activeButton.style.color = color; //new inline
           });
         }
       });
@@ -48013,8 +48055,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');
@@ -48095,6 +48141,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) {
@@ -48305,13 +48365,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');