@innovastudio/contentbox 1.6.75 → 1.6.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.75",
+  "version": "1.6.77",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.66",
+    "@innovastudio/contentbuilder": "^1.5.69",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.css

@@ -1399,7 +1399,9 @@ body.controlpanel .is-wrapper {
 }
 .builder-ui .is-controlpanel .panel-image .asset-preview img,
 .builder-ui .is-controlpanel .panel-box .asset-preview img,
-.builder-ui .is-controlpanel .panel-block .asset-preview img {
+.builder-ui .is-controlpanel .panel-block .asset-preview img,
+.builder-ui .is-controlpanel .panel-column .asset-preview img,
+.builder-ui .is-controlpanel .panel-row .asset-preview img {
   max-width: 130px;
   max-height: 130px;
 }

package/public/contentbox/contentbox.esm.js

@@ -8889,11 +8889,9 @@ class Text {
 
     if (text.trim() === '') {
       elm.style.color = color;
-      elm.style.backgroundClip = '';
     } else {
       if (elm.innerText === text) {
         elm.style.color = color;
-        elm.style.backgroundClip = '';
       } else {
         this.builder.doc.execCommand('ForeColor', false, color); //Cleanup FONTs
 
@@ -10839,13 +10837,17 @@ class PanelText {
         // remove gradient if exists
         let elm = this.text.getElm();
 
-        if (elm.style.backgroundImage) {
+        if (color !== '' && elm.style.backgroundImage) {
           elm.style.backgroundImage = '';
           elm.style.backgroundClip = ''; // set gradient preview none
 
           btnGradient.style.backgroundImage = '';
         }
 
+        if (color === '' && elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          color = 'transparent'; // needed by gradient
+        }
+
         this.text.setTextColor(color);
         btnColor.style.backgroundColor = color; // preview
         // this.builder.onChange();
@@ -10866,9 +10868,10 @@ class PanelText {
 
           btnColor.style.backgroundColor = '';
         } else {
-          // remove gradient
+          // clear gradient
           elm.style.backgroundClip = '';
-          elm.style.color = ''; // set text color preview back
+          elm.style.backgroundImage = '';
+          if (elm.style.color === 'transparent') elm.style.color = ''; // set text color preview back
 
           setTimeout(() => {
             let currentColor = this.text.getStyle(elm, 'color');
@@ -13508,6 +13511,7 @@ class PanelBox {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -13518,12 +13522,19 @@ class PanelBox {
         activeBox.style.backgroundColor = ''; // backward compatibility (to clear bg color)
 
         this.box.setBoxBgColor(s);
+        let overlay = activeBox.querySelector('.is-overlay');
+
+        if (s !== '' && overlay.style.backgroundImage && overlay.style.backgroundImage.includes('gradient')) {
+          overlay.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+        }
+
         btnColorPick.style.backgroundColor = s; // preview
 
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -13533,8 +13544,10 @@ class PanelBox {
       gradientPicker.open(overlay, () => {
         activeBox.style.backgroundImage = ''; // backward compatibility (to clear gradient)
 
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = overlay.style.backgroundImage;
+        if (overlay.style.backgroundImage && overlay.style.backgroundImage.includes('linear-gradient')) {
+          overlay.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        }
       }, () => {}, btnGradient, true); // overlay=true
     }); // Module
 
@@ -15270,7 +15283,7 @@ class PanelBlock {
       colorpicker.open(s => {
         blockOverlay.style.backgroundColor = s;
 
-        if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
+        if (s !== '' && blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
           blockOverlay.style.backgroundImage = ''; // remove gradient
 
           btnGradient.style.backgroundImage = ''; // preview
@@ -15287,12 +15300,14 @@ class PanelBlock {
       let blockOverlay = this.blockOverlay();
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(blockOverlay, () => {
-        blockOverlay.style.backgroundColor = '';
-        btnColorPick.style.backgroundColor = ''; // preview
-
         this.updatePanelImage('');
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage; // preview
+
+        if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('linear-gradient')) {
+          blockOverlay.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
+
+        btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage; // needed because updatePanelImage clear it
       }, () => {}, btnGradient, true); // overlay=true
     }); // Background Image
 
@@ -16225,6 +16240,7 @@ class PanelSection {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16239,10 +16255,15 @@ class PanelSection {
         this.section.setSectionBgColor(s);
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '') {
+          section.style.backgroundImage = ''; //remove gradient
+
+          btnGradient.style.backgroundImage = '';
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true);
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16250,8 +16271,11 @@ class PanelSection {
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(section, () => {
         this.section.clearOverlayBg();
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = section.style.backgroundImage;
+
+        if (section.style.backgroundImage && section.style.backgroundImage.includes('linear-gradient')) {
+          section.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
       }, () => {}, btnGradient, true); // overlay=true
     }); // Animation 
 
@@ -16913,6 +16937,7 @@ class PanelColumn {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16921,22 +16946,31 @@ class PanelColumn {
       const colorpicker = this.builder.editor.colorpicker();
       colorpicker.open(s => {
         activeColumn.style.backgroundColor = s;
-        activeColumn.style.backgroundImage = ''; // remove gradient
-
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '' && activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('gradient')) {
+          activeColumn.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+
+          this.imagePreview.innerHTML = '';
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
       let activeColumn = this.builder.controlpanel.activeColumn;
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(activeColumn, () => {
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = activeColumn.style.backgroundImage;
+        if (activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('linear-gradient')) {
+          activeColumn.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        }
+
+        this.updatePanelImage('');
       }, () => {}, btnGradient, true); // overlay=true
     }); // Text Color
 
@@ -17633,6 +17667,7 @@ class PanelColumn {
   }
 
   updateImage(src) {
+    const panel = this.panel;
     this.builder.editor.saveForUndo();
     let activeColumn = this.builder.controlpanel.activeColumn;
 
@@ -17646,6 +17681,8 @@ class PanelColumn {
 
     this.builder.editor.onChange();
     this.updatePanelImage(src);
+    const btnGradient = panel.querySelector('.btn-gradient');
+    btnGradient.style.backgroundImage = '';
   }
 
   clear() {
@@ -17903,6 +17940,7 @@ class PanelRow {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -17914,10 +17952,15 @@ class PanelRow {
         row.style.backgroundColor = s;
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '' && row.style.backgroundImage && row.style.backgroundImage.includes('gradient')) {
+          row.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       const row = this.rowOverlay();
       if (!row) return;
@@ -17926,8 +17969,12 @@ class PanelRow {
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(row, () => {
         this.updatePanelImage('');
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = row.style.backgroundImage;
+
+        if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+          row.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        } // btnGradient.style.backgroundImage = row.style.backgroundImage;
+
       }, () => {}, btnGradient, true); // overlay=true
     }); // Grid Settings
 
@@ -18317,6 +18364,11 @@ class PanelRow {
       btnClear.style.display = '';
       btnAdjust.style.display = '';
     }
+
+    if (src) {
+      const btnGradient = panel.querySelector('.btn-gradient');
+      btnGradient.style.backgroundImage = '';
+    }
   }
 
   rowOverlay() {
@@ -23417,6 +23469,12 @@ class Element$2 {
           elm.style[property] = s;
           btnPicker.style.backgroundColor = s; // preview
 
+          if (s !== '' && property === 'background-color') {
+            elm.style.backgroundImage = '';
+            const btnGradient = dialog.querySelector('.btn-gradient');
+            btnGradient.style.backgroundImage = '';
+          }
+
           this.builder.onChange();
         }, bgcolor, () => {}, btnPicker, true); //overlay=true
       });
@@ -23462,8 +23520,11 @@ class Element$2 {
       const elm = this.inspectedElement;
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(elm, () => {
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = elm.style.backgroundImage;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          elm.style.backgroundColor = '';
+          const btnColorPick = dialog.querySelector('.btn-bgcolor');
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
       }, () => {}, btnGradient, true);
     }); // Responsive
 
@@ -27155,6 +27216,11 @@ class Snippets {
         
                 var snippets = data_basic.snippets; //DATA
 
+                ${!this.builder.canvas && !this.builder.isContentBox ? `
+                const canvasFilter = (item) => (item.mode!=='canvas');
+                snippets = snippets.filter(canvasFilter);
+                ` : ''}
+
                 if (slider !== null){
                     if(slider==='slick') {
                         //remove glide
@@ -27384,6 +27450,12 @@ class Snippets {
                         if(snippets[i].id + ''=== snippetid) {
                             
                             var html = snippets[i].html;
+
+                            // check if is block
+                            if(html.includes('"is-block')) {
+                                html = snippets[i].html2;
+                            }
+
                             var noedit = snippets[i].noedit;
                             break;
                         }
@@ -75286,9 +75358,10 @@ class Hyperlink {
     linkTool.style.top = top - h - 3 + 'px';
     linkTool.style.left = left + link.offsetWidth * this.builder.opts.zoom - w + 'px';
     const handleLinkButtonClick = e => {
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
       if (!elm) return;
-      if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a')) {
+      if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a') && !clrPicker) {
         // click outside
 
         this.hideTool();
@@ -75414,6 +75487,7 @@ class Button {
     const contentStuff = this.builder.contentStuff;
     const dom = this.builder.dom;
     this.dom = dom;
+    this.builderStuff = builderStuff;
     let buttonTool = builderStuff.querySelector('#divButtonTool');
     if (!buttonTool) {
       let html = `<div id="divButtonTool" class="is-tool">
@@ -75485,9 +75559,10 @@ class Button {
       this.renderTool();
       this.showTool(btn);
       const handleButtonClick = e => {
+        const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
         let elm = e.target;
         if (!elm) return;
-        if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button')) {
+        if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button') && !clrPicker) {
           // click outside
 
           // hide
@@ -76689,9 +76764,11 @@ class Table {
     this.realtime();
     const handleTableClick = e => {
       // console.log('handleTableClick');
+
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
       if (!elm) return;
-      if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table')) {
+      if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table') && !clrPicker) {
         // click outside
 
         // hide
@@ -78310,6 +78387,11 @@ class RowTool {
           row.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
+            btnRowGradient.style.backgroundImage = '';
+            row.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
           btnRowBgColor.removeAttribute('data-focus');
@@ -78425,9 +78507,13 @@ class RowTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
+          if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = this.rowSettings.querySelector('.input-row-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            row.style.backgroundColor = '';
+          }
 
-          //Trigger Change event
-          this.builder.opts.onChange();
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnRowGradient.removeAttribute('data-focus');
           btnRowGradient.focus();
@@ -80027,6 +80113,11 @@ class ColumnTool {
           cell.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
+            btnCellGradient.style.backgroundImage = '';
+            cell.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, cellSettings.querySelector('.input-cell-bgcolor').style.backgroundColor, () => {
           btnCellBgColor.removeAttribute('data-focus');
@@ -80160,7 +80251,13 @@ class ColumnTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
-          this.builder.opts.onChange();
+          if (cell.style.backgroundImage && cell.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            cell.style.backgroundColor = '';
+          }
+
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnCellGradient.removeAttribute('data-focus');
           btnCellGradient.focus();
@@ -81833,17 +81930,20 @@ class ElementGeneralStyles {
 
     // Background color
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
-    btnElmBgColor.addEventListener('click', e => {
+    btnElmBgColor.addEventListener('click', () => {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
-      let elm = e.target;
       this.builder.colorPicker.open(color => {
-        this.builder.inspectedElement.style.backgroundColor = color;
-        elm.style.backgroundColor = color; // preview
+        let elm = this.builder.inspectedElement;
+        elm.style.backgroundColor = color;
+        btnElmBgColor.style.backgroundColor = color; // preview
 
+        if (color !== '') {
+          let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
+          btnElmGradient.style.backgroundImage = '';
+          elm.style.backgroundImage = '';
+        }
         elementStyleEditor.refresh();
-
-        //Trigger Change event
         this.builder.opts.onChange();
       }, panelStuff.querySelector('.input-elm-bgcolor').style.backgroundColor, () => {
         btnElmBgColor.removeAttribute('data-focus');
@@ -81860,10 +81960,15 @@ class ElementGeneralStyles {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
       gradientPicker.open(this.builder.inspectedElement, () => {
+        let elm = this.builder.inspectedElement;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          const btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
+          btnElmBgColor.style.backgroundColor = '';
+          elm.style.backgroundColor = '';
+        }
         elementStyleEditor.refresh();
 
-        //Trigger Change event
-        this.builder.opts.onChange();
+        // this.builder.opts.onChange();
       }, isChanged => {
         if (isChanged) {
           elementStyleEditor.refresh();
@@ -115871,10 +115976,15 @@ class BlockModal {
 
                 <div class="modal-page-content" style="display:none;padding-bottom:28px;">
 
-                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                    <div style="display:flex;">
-                        <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    <div style="display:flex;gap:40px">
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                            <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
+                        </div>
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                            <button title="${util.out('Gradient')}" class="btn-page-gradient is-btn-color"></button>
+                        </div>
                     </div>
 
                     <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -115941,10 +116051,15 @@ class BlockModal {
 
                     <div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
 
-                        <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                        <div style="display:flex;">
-                            <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
-                            <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                        <div style="display:flex;gap:40px">
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                                <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
+                            </div>
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                                <button title="${util.out('Gradient')}" class="btn-block-gradient is-btn-color"></button>
+                            </div>
                         </div>
 
                         <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -137886,7 +138001,7 @@ class Box {
   setBoxBgColor(s) {
     const activeBox = this.builder.activeBox;
     let overlay = activeBox.querySelector('.is-overlay');
-    overlay.style.backgroundColor = s; // overlay.style.backgroundImage = ''; // remove gradient
+    overlay.style.backgroundColor = s;
   } // Box Size
 
 
@@ -139860,7 +139975,6 @@ class Section {
     const activeSection = this.builder.activeSection;
     this.clearOverlayBg();
     activeSection.style.backgroundColor = s;
-    activeSection.style.backgroundImage = ''; //remove gradient
   }
 
   clearOverlayBg() {