@innovastudio/contentbuilder 1.5.36 → 1.5.38

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -12656,6 +12656,7 @@ class Grid {
     if (!cell) return;
     if (cell.previousElementSibling) {
       this.builder.uo.saveForUndo();
+      this.builder.hideTools();
       cell.parentElement.insertBefore(cell, cell.previousElementSibling);
       this.builder.opts.onChange();
     }
@@ -12667,6 +12668,7 @@ class Grid {
     const cellnext = util.cellNext(cell);
     if (cellnext) {
       this.builder.uo.saveForUndo();
+      this.builder.hideTools();
       cell.parentElement.insertBefore(cellnext, cell);
       this.builder.opts.onChange();
     }
@@ -12693,6 +12695,7 @@ class Grid {
           //+2 => includes is-row-tool & is-rowaddtool
 
           this.builder.uo.saveForUndo();
+          this.builder.hideTools();
 
           //Move row up
           row.parentNode.insertBefore(row, row.previousElementSibling);
@@ -12700,6 +12703,7 @@ class Grid {
           return;
         } else {
           this.builder.uo.saveForUndo();
+          this.builder.hideTools();
 
           //Add inside prev row
           let tool = row.previousElementSibling.querySelector('.is-row-tool');
@@ -12727,6 +12731,7 @@ class Grid {
       }
     } else {
       this.builder.uo.saveForUndo();
+      this.builder.hideTools();
       var rowElement = row.cloneNode(true);
       rowElement.innerHTML = '';
       rowElement.appendChild(cell);
@@ -12770,6 +12775,7 @@ class Grid {
           //+2 => includes is-row-tool & is-rowadd-tool
 
           this.builder.uo.saveForUndo();
+          this.builder.hideTools();
 
           //Move row down
           row.parentNode.insertBefore(row.nextElementSibling, row);
@@ -12777,6 +12783,7 @@ class Grid {
           return;
         } else {
           this.builder.uo.saveForUndo();
+          this.builder.hideTools();
 
           //Add inside next row
           let tool = row.nextElementSibling.querySelector('.is-row-tool');
@@ -12804,6 +12811,7 @@ class Grid {
       }
     } else {
       this.builder.uo.saveForUndo();
+      this.builder.hideTools();
       var rowElement = row.cloneNode(true);
       rowElement.innerHTML = '';
       rowElement.appendChild(cell);
@@ -17269,8 +17277,10 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       //     evt.related.getBoundingClientRect().top>window.innerHeight) {
       //     return false;
       // }
-    },
 
+      const wrapper = builder.doc.querySelector(builder.page);
+      if (wrapper) wrapper.style.marginLeft = '';
+    },
     onSort: evt => {
       if (!builder.canvas) return;
       let snippetX = evt.originalEvent.clientX;
@@ -17286,6 +17296,12 @@ const renderSnippetPanel = (builder, snippetOpen) => {
         block.style.left = x + '%';
         block.removeAttribute('data-new-dummy');
       }
+
+      // to prevent flicker caused by snippet panel above wrapper (see contentbuilder.js sectionDropSetup)
+      if (builder.page && builder.page === '.is-wrapper') {
+        const wrapper = builder.doc.querySelector(builder.page);
+        if (wrapper) wrapper.style.marginLeft = '';
+      }
     },
     onStart: () => {
       // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
@@ -17334,6 +17350,12 @@ const renderSnippetPanel = (builder, snippetOpen) => {
         }
         let dummies = builder.doc.querySelectorAll('.block-dummy');
         dummies.forEach(elm => elm.parentNode.removeChild(elm));
+
+        // to prevent flicker caused by snippet panel above wrapper (see contentbuilder.js sectionDropSetup)
+        if (builder.page && builder.page === '.is-wrapper') {
+          const wrapper = builder.doc.querySelector(builder.page);
+          if (wrapper) wrapper.style.marginLeft = '';
+        }
       }, 10);
     }
   });
@@ -86373,7 +86395,7 @@ class ContentBuilder {
       deleteConfirm: false,
       disableBootstrapIcons: false,
       sectionTemplate: `
-            <div class="is-section is-box is-section-100 type-opensans">
+            <div class="is-section is-box is-section-100 type-system-ui">
                 <div class="is-overlay"></div>
                 <div class="is-boxes">
                     <div class="is-box-centered">
@@ -87439,10 +87461,17 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         this.util.repositionColumnTool();
       }
       this.elmTool.repositionElementTool(true);
-      if (this.element.image.imageTool) this.element.image.imageTool.style.display = '';
-      if (this.element.module.moduleTool) this.element.module.moduleTool.style.display = '';
-      if (this.element.hyperlink.linkTool) this.element.hyperlink.linkTool.style.display = '';
-      this.colTool.lockIndicator.style.display = '';
+
+      // if(this.element.image.imageTool) this.element.image.imageTool.style.display='';
+      // if(this.element.module.moduleTool) this.element.module.moduleTool.style.display='';
+      // if(this.element.hyperlink.linkTool) this.element.hyperlink.linkTool.style.display='';
+      // this.colTool.lockIndicator.style.display='';
+
+      // this.hideTools();
+      setTimeout(() => {
+        this.hideTools();
+      }, 40); // give delay, in case of programmatically click after col move
+
       return ret;
     };
 
@@ -92500,6 +92529,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (this.page) {
       if (this.page !== '.is-wrapper') return; // only for ContentBox
       const wrapper = this.doc.querySelector(this.page);
+
+      // to prevent flicker caused by snippet panel above wrapper
+      if (!wrapper.querySelector('.is-section')) {
+        wrapper.style.marginLeft = '300px';
+      }
       this.sortableOnPage = new Sortable(wrapper, {
         scroll: true,
         group: 'shared',
@@ -92593,6 +92627,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
             if (this.opts.emailMode) bSnippet = false;
 
+            // check if is block
+            let isBlock = false;
+            if (html.includes('"is-block')) {
+              isBlock = true;
+              bSnippet = false;
+            }
+
             // Convert snippet into your defined 12 columns grid   
             var rowClass = this.opts.row; //row
             var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
@@ -92650,6 +92691,14 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
               // </div>
               // `;
               itemEl.outerHTML = this.settings.sectionTemplate.replace('[%CONTENT%]', html);
+            } else if (isBlock) {
+              let canvasTemplate = `
+                            <div class="is-section is-box is-section-100 type-system-ui box-canvas autolayout last-box">
+                                <div class="is-overlay"></div>
+                                [%CONTENT%]
+                            </div>
+                            `;
+              itemEl.outerHTML = canvasTemplate.replace('[%CONTENT%]', html);
             } else {
               // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
               // Can only be inserted after current row or last row (not on column or element).
@@ -92735,6 +92784,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   hideElementTools() {
     let elmTool = this.doc.querySelector('.is-element-tool');
     if (elmTool) elmTool.style.display = '';
+    let videoTool = this.doc.querySelector('.is-video-tool');
+    if (videoTool) videoTool.style.display = '';
+    let audioTool = this.doc.querySelector('.is-audio-tool');
+    if (audioTool) audioTool.style.display = '';
+    let iframeTool = this.doc.querySelector('.is-iframe-tool');
+    if (iframeTool) iframeTool.style.display = '';
+    let moduleTool = this.doc.querySelector('.is-module-tool');
+    if (moduleTool) moduleTool.style.display = '';
+    let lockIndicator = this.doc.querySelector('.is-locked-indicator');
+    if (lockIndicator) lockIndicator.style.display = '';
     let linkTool = this.doc.querySelector('#divLinkTool');
     if (linkTool) linkTool.style.display = '';
     let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
@@ -92748,6 +92807,32 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.inspectedElement = null;
     this.activeElement = null;
   }
+  hideTools() {
+    // used by contentbuilder.js & grid.js
+
+    // let elmTool = this.doc.querySelector('.is-element-tool');
+    // if(elmTool) elmTool.style.display = '';
+
+    let videoTool = this.doc.querySelector('.is-video-tool');
+    if (videoTool) videoTool.style.display = '';
+    let audioTool = this.doc.querySelector('.is-audio-tool');
+    if (audioTool) audioTool.style.display = '';
+    let iframeTool = this.doc.querySelector('.is-iframe-tool');
+    if (iframeTool) iframeTool.style.display = '';
+    let moduleTool = this.doc.querySelector('.is-module-tool');
+    if (moduleTool) moduleTool.style.display = '';
+    let lockIndicator = this.doc.querySelector('.is-locked-indicator');
+    if (lockIndicator) lockIndicator.style.display = '';
+    let linkTool = this.doc.querySelector('#divLinkTool');
+    if (linkTool) linkTool.style.display = '';
+    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
+    if (spacerTool) spacerTool.style.display = '';
+    this.element.image.hideImageTool();
+
+    // this.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
+    // this.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
+    // this.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
+  }
 }
 
 export { ContentBuilder as default };