@innovastudio/contentbuilder 1.3.16 → 1.3.18

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -2337,6 +2337,18 @@ button:focus-visible {
   width: 20px;
   height: 20px;
 }
+#_cbhtml .is-modal.buttoneditor #divMyButtons, #_cbhtml .is-modal.buttoneditor #divButtonTemplates,
+.is-ui .is-modal.buttoneditor #divMyButtons,
+.is-ui .is-modal.buttoneditor #divButtonTemplates {
+  background-color: #ebebeb;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  border-top: 80px solid transparent;
+  box-sizing: border-box;
+}
 #_cbhtml .is-modal.buttoneditor #divMyButtonList,
 .is-ui .is-modal.buttoneditor #divMyButtonList {
   padding: 10px 20px 10px;
@@ -2345,7 +2357,7 @@ button:focus-visible {
   position: absolute;
   top: 0;
   left: 0;
-  border-top: transparent 150px solid;
+  border-top: transparent 70px solid;
   box-sizing: border-box;
   overflow: hidden;
   overflow-y: auto;

package/public/contentbuilder/contentbuilder.esm.js

@@ -5743,7 +5743,9 @@ class Util {
 
   repositionColumnTool(transition) {
     let columnTool = this.builder.colTool.columnTool;
+    if (!columnTool) return;
     let col = this.builder.activeCol;
+    if (!col) return;
 
     if (transition) {
       columnTool.style.transition = 'all 100ms ease';
@@ -49302,6 +49304,7 @@ class Image$1 {
                             <button title="3x4" data-crop-size="0.75" style="width: 45px;height: 60px;">3x4</button>
                             <button title="6x4" data-crop-size="1.5" style="width: 60px;height: 40px;">6x4</button>
                             <button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
+                            <button title="16x9" data-crop-size="1.77" style="width: 60px;height: 35px;">16x9</button>
                             <button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
                         </div>
                         <div class="imageedit-preview" style="max-width:1000px;width:100%;max-height:550px;">
@@ -50617,7 +50620,7 @@ class ButtonEditor {
                     ${util.out('Button')}
                     <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
                 </div>
-                <div style="padding:0">
+                <div style="padding:0;height:100%;">
                     <div class="is-tabs" data-group="button" style="position:relative;z-index:1">
                         <a title="${util.out('General')}" href="" data-content="divButtonGeneral" class="active">${util.out('General')}</a>
                         <a title="${util.out('Hover')}" href="" data-content="divButtonHover">${util.out('Hover')}</a>
@@ -50924,8 +50927,8 @@ class ButtonEditor {
         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);
+          activeButton.style.backgroundColor = color; // activeButton.setAttribute('data-bg', color);
+
           dom.removeClassesByPrefix(activeButton, 'bg-');
           elm.style.backgroundColor = color; // preview
           //Trigger Change event
@@ -50989,10 +50992,20 @@ class ButtonEditor {
         let elm = e.target;
         this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          activeButton.setAttribute('data-hover-bg', color);
+
+          if (color === '') {
+            activeButton.removeAttribute('data-bg');
+            activeButton.removeAttribute('data-hover-bg');
+            activeButton.removeAttribute('onmouseover');
+            activeButton.removeAttribute('onmouseout');
+          } else {
+            activeButton.setAttribute('data-bg', activeButton.style.backgroundColor);
+            activeButton.setAttribute('data-hover-bg', 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=\'\'');
+          }
+
           dom.removeClassesByPrefix(activeButton, 'hover:bg-');
-          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
 
@@ -51449,15 +51462,20 @@ class ButtonEditor {
 
         dom.removeClass(activeButton, 'active');
         dom.removeClass(activeButton, 'elm-active');
-        const dataBg = activeButton.getAttribute('data-bg');
-        const dataHoverBg = activeButton.getAttribute('data-hover-bg');
-        const color = activeButton.style.color;
+        let dataBg = activeButton.getAttribute('data-bg'); // if(!dataBg) {
+        //     if(activeButton.style.backgroundColor) dataBg=activeButton.style.backgroundColor;
+        // }
+
+        const dataHoverBg = activeButton.getAttribute('data-hover-bg'); // const color = activeButton.style.color;
+
+        const cssText = activeButton.style.cssText;
         mybuttons.push({
           id: mybuttons.length,
           className: activeButton.className,
           bg: dataBg ? dataBg : '',
           hoverBg: dataHoverBg ? dataHoverBg : '',
-          color: color ? color : ''
+          // color: color?color:'',
+          cssText: cssText
         });
         localStorage.setItem('_savedbuttons', JSON.stringify(mybuttons));
         this.renderMyButtons();
@@ -51492,6 +51510,14 @@ class ButtonEditor {
           this.getVisibleBgColor(item.replace('hover:', ''), color => {
             btnHoverBgColor.style.backgroundColor = color;
             activeButton.setAttribute('data-hover-bg', color); //new inline
+
+            if (!activeButton.hasAttribute('data-bg')) {
+              // fix needed data-bg
+              activeButton.setAttribute('data-bg', btnBgColor.style.backgroundColor); // needed by hover
+            }
+
+            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=\'\'');
           });
         }
 
@@ -51518,7 +51544,13 @@ class ButtonEditor {
     } // NEW: inline color
 
 
-    if (activeButton.style.backgroundColor) btnBgColor.style.backgroundColor = activeButton.getAttribute('data-bg'); //activeButton.style.backgroundColor;
+    if (activeButton.hasAttribute('data-bg')) {
+      btnBgColor.style.backgroundColor = activeButton.getAttribute('data-bg');
+    } else {
+      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;
@@ -51716,7 +51748,95 @@ class ButtonEditor {
   }
 
   renderTemplates() {
-    const templates = [{
+    const templates = [
+    /* rounded */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
+                `
+    },
+    /* colors */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                `
+    },
+    /* square */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
+                `
+    },
+    /* colors */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                `
+    }, {
       text: 'Order Now',
       className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
     }, {
@@ -51768,7 +51888,11 @@ class ButtonEditor {
     let html = '';
 
     for (let i = 0; i < templates.length; i++) {
-      html += `<a class="${templates[i].className}" href="#" role="button" tabindex="0">${templates[i].text}</a>`;
+      if (templates[i].html) {
+        html += templates[i].html;
+      } else {
+        html += `<a class="${templates[i].className}" href="#" role="button" tabindex="0">${templates[i].text}</a>`;
+      }
     }
 
     document.querySelector('#divButtonTemplateList').innerHTML = html;
@@ -51776,10 +51900,30 @@ class ButtonEditor {
     Array.prototype.forEach.call(btns, btn => {
       btn.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
-        const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-        this.applyStyles(activeButton, btn);
-        this.cleanupOldClasses(activeButton);
-        this.builder.opts.onChange();
+        const activeButton = this.builder.activeButton || this.builder.activeLinkButton; // this.applyStyles(activeButton, btn);
+        // this.cleanupOldClasses(activeButton);
+
+        activeButton.removeAttribute('style');
+        activeButton.removeAttribute('onmouseover');
+        activeButton.removeAttribute('onmouseout');
+        activeButton.removeAttribute('data-bg');
+        activeButton.removeAttribute('data-hover-bg');
+        activeButton.setAttribute('class', btn.getAttribute('class'));
+        if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
+        if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
+        if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
+
+        if (btn.hasAttribute('data-bg')) {
+          activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
+          activeButton.style.backgroundColor = btn.getAttribute('data-bg');
+        }
+
+        if (btn.hasAttribute('data-hover-bg')) {
+          activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
+        }
+
+        activeButton.classList.remove('active');
+        this.realtime();
         e.preventDefault();
         return false;
       });
@@ -51793,14 +51937,26 @@ class ButtonEditor {
     let html_mybuttons = '';
 
     for (let i = 0; i < mybuttons.length; i++) {
-      html_mybuttons += `<a data-id="${mybuttons[i].id}" data-bg="${mybuttons[i].bg}" data-hover-bg="${mybuttons[i].hoverBg}" class="${mybuttons[i].className}" href="#" style="color:${mybuttons[i].color};background-color:${mybuttons[i].bg}">Button<span class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></span></a>`;
+      let sDataBg = '';
+      if (mybuttons[i].bg !== '') sDataBg = ` data-bg="${mybuttons[i].bg}"`;
+      let sDataHoverBg = '';
+      if (mybuttons[i].hoverBg !== '') sDataHoverBg = ` data-hover-bg="${mybuttons[i].hoverBg}"`;
+
+      if (sDataHoverBg !== '' && sDataBg === '') {
+        sDataBg = ' data-bg=""';
+      }
+
+      html_mybuttons += `<a data-id="${mybuttons[i].id}"${sDataBg}${sDataHoverBg} class="${mybuttons[i].className}" href="#" style="${mybuttons[i].cssText}">Button<span class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></span></a>`;
     }
 
     document.querySelector('#divMyButtonList').innerHTML = html_mybuttons;
     let btns = this.buttonModal.querySelectorAll('#divMyButtonList a');
     Array.prototype.forEach.call(btns, btn => {
-      btn.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
-      btn.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+      if (btn.getAttribute('data-hover-bg')) {
+        btn.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
+        btn.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+      }
+
       btn.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
@@ -51808,10 +51964,31 @@ class ButtonEditor {
         Array.prototype.forEach.call(links, link => {
           dom.removeClass(link, 'active');
         });
-        dom.addClass(btn, 'active');
-        this.applyStyles(activeButton, btn);
-        this.cleanupOldClasses(activeButton);
+        dom.addClass(btn, 'active'); // this.applyStyles(activeButton, btn);
+        // this.cleanupOldClasses(activeButton);
+
+        activeButton.removeAttribute('style');
+        activeButton.removeAttribute('onmouseover');
+        activeButton.removeAttribute('onmouseout');
+        activeButton.removeAttribute('data-bg');
+        activeButton.removeAttribute('data-hover-bg');
+        activeButton.setAttribute('class', btn.getAttribute('class'));
+        if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
+        if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
+        if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
+
+        if (btn.hasAttribute('data-bg')) {
+          activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
+          activeButton.style.backgroundColor = btn.getAttribute('data-bg');
+        }
+
+        if (btn.hasAttribute('data-hover-bg')) {
+          activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
+        }
+
+        activeButton.classList.remove('active');
         this.builder.opts.onChange();
+        this.realtime();
         e.preventDefault();
         return false;
       });
@@ -51872,23 +52049,15 @@ class ButtonEditor {
   }
 
   applyDefault(link) {
-    const dom = this.dom;
-    dom.addClass(link, 'transition-all');
-    if (!dom.hasClass(link, 'flex')) dom.addClass(link, 'inline-block');
-    dom.addClass(link, 'cursor-pointer'); // dom.addClass(link, 'border-2');
-
-    dom.addClass(link, 'border-solid');
-    dom.addClass(link, 'leading-relaxed'); // dom.addClass(link, 'mt-2');
-    // dom.addClass(link, 'mb-2');
-    // link.removeAttribute('style');
-    // link.removeAttribute('onmouseover');
-    // link.removeAttribute('onmouseout');
-
+    // const dom = this.dom;
+    // dom.addClass(link, 'transition-all');
+    // if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
+    // dom.addClass(link, 'cursor-pointer');
+    // dom.addClass(link, 'border-solid');
+    // dom.addClass(link, 'leading-relaxed');
     link.removeAttribute('data-hover-bgcolor');
     link.removeAttribute('data-hover-color');
     link.removeAttribute('data-hover-bordercolor');
-    link.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
-    link.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
   }
 
   cleanupOldClasses(link) {