@innovastudio/contentbuilder 1.3.74 → 1.3.76

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -809,6 +809,20 @@ button:focus-visible {
   width: 34px;
   margin: 3px 0 3px 7px;
 }
+#_cbhtml[toolbarfull] .is-rte-tool,
+#_cbhtml[toolbarfull] .is-elementrte-tool,
+.is-ui[toolbarfull] .is-rte-tool,
+.is-ui[toolbarfull] .is-elementrte-tool {
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.07) -1px 1px 0px 0px !important;
+}
+#_cbhtml[toolbarfull] .is-rte-pop,
+.is-ui[toolbarfull] .is-rte-pop {
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 1px !important;
+}
 #_cbhtml .is-rte-pop,
 .is-ui .is-rte-pop {
   z-index: 10002;

package/public/contentbuilder/contentbuilder.esm.js

@@ -5332,15 +5332,18 @@ class Util {
       dom.removeClass(elm, 'elm-inspected');
     }); // RTE
 
-    let rtetool = builderStuff.querySelector('.is-rte-tool');
-    if (rtetool) rtetool.style.display = 'none';
-    let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
-    if (elementRtetool) elementRtetool.style.display = 'none'; // Click ok on code view should hide these as well
+    if (this.builder.toolbarDisplay === 'auto') {
+      let rtetool = builderStuff.querySelector('.is-rte-tool');
+      if (rtetool) rtetool.style.display = 'none';
+      let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
+      if (elementRtetool) elementRtetool.style.display = 'none'; // Click ok on code view should hide these as well
+
+      let rtetoolmore = builderStuff.querySelector('.rte-more-options');
+      if (rtetoolmore) rtetoolmore.style.display = '';
+      let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
+      if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+    } // Element
 
-    let rtetoolmore = builderStuff.querySelector('.rte-more-options');
-    if (rtetoolmore) rtetoolmore.style.display = '';
-    let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
-    if (elementRtetoolmore) elementRtetoolmore.style.display = ''; // Element
 
     elms = this.builder.doc.querySelectorAll('.elm-active');
     Array.prototype.forEach.call(elms, elm => {
@@ -21948,14 +21951,14 @@ const renderSnippetPanel = builder => {
 
       builder.sectionDropSetup();
     },
-    onMove: evt => {
+    onMove: () => {
       let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
 
-      if (emptyinfo) emptyinfo.style.display = 'none';
-      if (builder.sortableOnPage) if (evt.related.getBoundingClientRect().top < 0 || evt.related.getBoundingClientRect().top > window.innerHeight) {
-        return false;
-      }
+      if (emptyinfo) emptyinfo.style.display = 'none'; // if(builder.sortableOnPage) if(evt.related.getBoundingClientRect().top<0 ||
+      //     evt.related.getBoundingClientRect().top>window.innerHeight) {
+      //     return false;
+      // }
     },
     onStart: () => {
       // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
@@ -65391,6 +65394,7 @@ class Preferences {
                             <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:5px;margin-bottom:5px;">
                                 ${util.out('Toolbar position')}:&nbsp;
                                 <select class="select-editingtoolbar">
+                                    <option value="topfull">${util.out('Top (Full Width)')}</option>
                                     <option value="top">${util.out('Top')}</option>
                                     <option value="left">${util.out('Left')}</option>
                                     <option value="right">${util.out('Right')}</option>
@@ -65523,8 +65527,8 @@ class Preferences {
       // if (localStorage.getItem('_editingtoolbardisplay') !== null) {
       //     this.builder.opts.toolbarDisplay = localStorage.getItem('_editingtoolbardisplay');
       // }
-
-      this.builder.opts.toolbarDisplay = 'auto'; // this.setToolbarDisplay(this.builder.opts.toolbarDisplay);
+      // this.builder.opts.toolbarDisplay = 'auto';
+      // this.setToolbarDisplay(this.builder.opts.toolbarDisplay);
 
       if (localStorage.getItem('_snippetssidebardisplay') !== null) {
         this.builder.opts.snippetsSidebarDisplay = localStorage.getItem('_snippetssidebardisplay');
@@ -65762,7 +65766,14 @@ class Preferences {
     if (this.builder.themes) {
       const n = this.builder.themeIndex;
       if (this.builder.themeIndex) localStorage.setItem('_theme', n);
-    }
+    } // clear/hide rte pops
+
+
+    const builderStuff = this.builder.builderStuff;
+    let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
+    Array.prototype.forEach.call(rtepops, rtepop => {
+      rtepop.style.display = '';
+    });
   }
 
   setToolbar(toolbar) {
@@ -65770,9 +65781,19 @@ class Preferences {
     const builderStuff = this.builder.builderStuff;
     const contentStuff = this.builder.contentStuff;
 
-    if (toolbar === 'top') {
+    if (toolbar === 'topfull') {
+      builderStuff.setAttribute('toolbarfull', '');
+      builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
+
+      if (this.builder.iframe) {
+        contentStuff.removeAttribute('toolbarleft', '');
+        contentStuff.removeAttribute('toolbarright', '');
+      }
+    } else if (toolbar === 'top') {
       builderStuff.removeAttribute('toolbarleft', '');
       builderStuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarfull', '');
 
       if (this.builder.iframe) {
         contentStuff.removeAttribute('toolbarleft', '');
@@ -65781,6 +65802,7 @@ class Preferences {
     } else if (toolbar === 'left') {
       builderStuff.setAttribute('toolbarleft', '');
       builderStuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarfull', '');
 
       if (this.builder.iframe) {
         contentStuff.setAttribute('toolbarleft', '');
@@ -65789,6 +65811,7 @@ class Preferences {
     } else if (toolbar === 'right') {
       builderStuff.setAttribute('toolbarright', '');
       builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarfull', '');
 
       if (this.builder.iframe) {
         contentStuff.setAttribute('toolbarright', '');
@@ -68946,7 +68969,31 @@ class Rte {
           dom.addClass(this.elementRteMoreOptions, 'deactive');
         }
       }
-    });
+    }); // Backward compatible
+
+    if (this.builder.toolbar === 'topfull') {
+      if (window.getComputedStyle(this.rteTool).getPropertyValue('left') !== '0px') {
+        this.builderStuff.insertAdjacentHTML('afterbegin', `
+                <style>
+                    [toolbarfull] .is-rte-tool,
+                    [toolbarfull] .is-elementrte-tool {
+                        top: 0 !important;
+                        left: 0 !important;
+                        width: 100vw;
+                        align-items: center;
+                        box-shadow: rgba(0, 0, 0, 0.07) -1px 1px 0px 0px !important;
+                    }
+                    [toolbarfull] .is-rte-pop {
+                        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 1px !important;
+                    }
+                </style>
+                `);
+      }
+    }
+
+    if (this.builder.toolbarDisplay !== 'auto') {
+      this.showDefaultToolbar(); // first time
+    }
   }
 
   zoomStart() {
@@ -69193,10 +69240,12 @@ class Rte {
     let top;
     let left;
     const btnRteMore = this.rteTool.querySelectorAll('button.rte-more');
+    let btnWidth = 0;
     btnRteMore.forEach(btn => {
       if (btn.getBoundingClientRect().top > 0) {
         top = btn.getBoundingClientRect().top;
         left = btn.getBoundingClientRect().left;
+        btnWidth = btn.offsetWidth;
       }
     });
     const pop = this.rteMoreOptions;
@@ -69223,6 +69272,10 @@ class Rte {
       pop.style.left = parseFloat(this.rteTool.style.left) + this.rteTool.offsetWidth - w + adj + 'px'; //(left -(w/2)+23) + 'px';
 
       pop.style.right = 'auto';
+
+      if (this.builderStuff.hasAttribute('toolbarfull')) {
+        pop.style.left = left - w + btnWidth + 'px';
+      }
     }
   } // showElementRteMore() {
   //     const btnElementRteMore = this.elementRteTool.querySelector('button.rte-more'); 
@@ -69298,6 +69351,10 @@ class Rte {
       pop.style.left = parseFloat(this.elementRteTool.style.left) + this.elementRteTool.offsetWidth - w + adj + 'px'; //(left -(w/2)+23) + 'px';
 
       pop.style.right = 'auto';
+
+      if (this.builderStuff.hasAttribute('toolbarfull')) {
+        pop.style.left = left - w + btnElementRteMore.offsetWidth + 'px';
+      }
     }
   }
 
@@ -69445,6 +69502,60 @@ class Rte {
     dom.cleanClassSize(elm, classname); // dom.cleanUnusedSpan(elm); // will remove empty spans that makes selection changes
   }
 
+  hideAlignButtons() {
+    let btns = this.elementRteTool.querySelectorAll('button[data-align]');
+    let separator1;
+    let separator2;
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = 'none';
+
+      if (btn.previousElementSibling) {
+        if (btn.previousElementSibling.classList.contains('rte-separator')) {
+          separator1 = btn.previousElementSibling;
+        }
+      }
+
+      if (btn.nextElementSibling) {
+        if (btn.nextElementSibling.classList.contains('rte-separator')) {
+          separator2 = btn.nextElementSibling;
+        }
+      }
+    });
+
+    if (separator1 && separator2) {
+      separator2.style.display = 'none';
+    }
+
+    btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = 'none';
+    });
+  }
+
+  showAlignButtons() {
+    let separators = this.elementRteTool.querySelectorAll('.rte-separator');
+    Array.prototype.forEach.call(separators, separator => {
+      separator.style.display = '';
+    });
+    let btns = this.elementRteTool.querySelectorAll('button[data-align]');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = '';
+    });
+    btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = '';
+    });
+  }
+
+  showDefaultToolbar() {
+    this.elementRteTool.style.display = 'flex';
+    this.rteTool.style.display = 'none';
+    this.hideAlignButtons();
+    this.positionToolbar();
+  }
+
   click(col) {
     const dom = this.dom;
     let elm = this.builder.inspectedElement;
@@ -69486,32 +69597,32 @@ class Rte {
       if ((elm.tagName.toLowerCase() === 'img' || dom.hasClass(elm, 'is-social') || dom.hasClass(elm, 'is-rounded-button-medium') || dom.hasClass(elm, 'cell-active')) && !dom.getSelected()) {
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
-          this.rteTool.style.display = 'none';
-          let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = '';
-          });
-          btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
-
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = '';
-          });
+          this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = '';
+          // });
+          // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = '';
+          // });
+
+          this.showAlignButtons();
           this.positionToolbar();
         }
       } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html')) {
         //|| col===elm
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
-          this.rteTool.style.display = 'none';
-          let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = 'none';
-          });
-          btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
-
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = 'none';
-          });
+          this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = 'none';
+          // });
+          // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = 'none';
+          // });
+
+          this.hideAlignButtons();
           this.positionToolbar();
         }
       } else if (dom.hasClass(elm, 'icon')) {
@@ -69534,16 +69645,16 @@ class Rte {
         } else {
           if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
             this.elementRteTool.style.display = 'flex';
-            this.rteTool.style.display = 'none';
-            let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-            Array.prototype.forEach.call(btns, btn => {
-              btn.style.display = '';
-            });
-            btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+            this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+            // Array.prototype.forEach.call(btns, (btn) => {
+            //     btn.style.display = '';
+            // });
+            // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+            // Array.prototype.forEach.call(btns, (btn) => {
+            //     btn.style.display = '';
+            // });
 
-            Array.prototype.forEach.call(btns, btn => {
-              btn.style.display = '';
-            });
+            this.showAlignButtons();
             this.positionToolbar();
           }
         }
@@ -69551,16 +69662,16 @@ class Rte {
     } else {
       if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
         this.elementRteTool.style.display = 'flex';
-        this.rteTool.style.display = 'none';
-        let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-        Array.prototype.forEach.call(btns, btn => {
-          btn.style.display = 'none';
-        });
-        btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+        this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+        // Array.prototype.forEach.call(btns, (btn) => {
+        //     btn.style.display = 'none';
+        // });
+        // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+        // Array.prototype.forEach.call(btns, (btn) => {
+        //     btn.style.display = 'none';
+        // });
 
-        Array.prototype.forEach.call(btns, btn => {
-          btn.style.display = 'none';
-        });
+        this.hideAlignButtons();
         this.positionToolbar();
       }
     }
@@ -75591,6 +75702,10 @@ class ContentBuilder {
             // Additional (to prevent lost focus)
             util.clearActiveCell();
             util.clearControls();
+
+            if (this.toolbarDisplay !== 'auto') {
+              this.rte.showDefaultToolbar();
+            }
           }
         }
 
@@ -76063,6 +76178,8 @@ class ContentBuilder {
             if (oldCss) oldCss.parentNode.removeChild(oldCss);
             this.builderStuff.insertAdjacentHTML('afterbegin', newCss);
           }
+
+          this.sectionDropSetup(); // enable drop as section (ContentBox)
         },
         onStart: () => {
           this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
@@ -76071,6 +76188,8 @@ class ContentBuilder {
         },
         onEnd: () => {
           this.util.checkEmpty(); // for multiple instances check
+
+          if (this.sortableOnPage) this.sortableOnPage.destroy(); // enable drop as section (ContentBox)
         },
         onAdd: evt => {
           var itemEl = evt.item;