@innovastudio/contentbuilder 1.5.35 → 1.5.37

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -17269,8 +17269,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 +17288,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 +17342,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);
     }
   });
@@ -82842,7 +82856,6 @@ class Resizable {
     }
 
     this.target = event.target.parentNode; // block
-
     this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
     event.preventDefault();
     event.stopPropagation();
@@ -82861,6 +82874,8 @@ class Resizable {
         this.startX = touch.clientX;
         this.startY = touch.clientY;
       }
+      this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
+      if (this.clonedTarget) this.clonedTarget.style.transition = '';
 
       //Initial
       this.initialWidth = parseFloat(getComputedStyle(this.target).width);
@@ -83347,6 +83362,7 @@ class Draggable {
       const y = startY - rect.top + containerRect.top;
       target.setAttribute('data-startx', x);
       target.setAttribute('data-starty', y);
+      target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
 
       // reset (from applyPercentage bottomTouched)
       if (target.style.bottom) {
@@ -83423,33 +83439,35 @@ class Draggable {
   updateBlockStyle(target) {
     // Block placement should must not 50% outside the container
     const container = target.closest('.box-canvas');
-    let containerHeight = container.offsetHeight;
-    let containerWidth = container.offsetWidth;
-    /*
-    if(target.offsetTop + target.offsetHeight>=containerHeight) {
-        target.style.top = containerHeight-target.offsetHeight +'px';
-    }
-    if(target.offsetTop<=0) {
+    if (!target.parentNode.closest('.is-group')) {
+      let containerHeight = container.offsetHeight;
+      let containerWidth = container.offsetWidth;
+      /*
+      if(target.offsetTop + target.offsetHeight>=containerHeight) {
+          target.style.top = containerHeight-target.offsetHeight +'px';
+      }
+      if(target.offsetTop<=0) {
+          target.style.top = '0px';
+      }
+      if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
+          target.style.left = (containerWidth-target.offsetWidth) +'px';
+      }
+      if(target.offsetLeft<=0) {
+          target.style.left = '0px';
+      }
+      */
+      if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
         target.style.top = '0px';
-    }
-    if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
-        target.style.left = (containerWidth-target.offsetWidth) +'px';
-    }
-    if(target.offsetLeft<=0) {
+      }
+      if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
+        target.style.top = containerHeight - target.offsetHeight + 'px';
+      }
+      if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
         target.style.left = '0px';
-    }
-    */
-    if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
-      target.style.top = '0px';
-    }
-    if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
-      target.style.top = containerHeight - target.offsetHeight + 'px';
-    }
-    if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
-      target.style.left = '0px';
-    }
-    if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
-      target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
+      if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
+        target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
     }
 
     // Replace with ruler's alignment
@@ -86369,7 +86387,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">
@@ -87821,6 +87839,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           let clonedDiv = block.cloneNode(true);
           clonedDiv.style.top = '20%';
           clonedDiv.style.left = '20%';
+          clonedDiv.style.transform = ''; // clear anim
+          clonedDiv.style.transition = '';
+          clonedDiv.style.opacity = '';
           if (builder) {
             const cloneBuilder = clonedDiv.querySelector(this.container);
             cloneBuilder.innerHTML = '';
@@ -87830,7 +87851,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             this.applyBehaviorOn(cloneBuilder);
             cloneBuilder.click();
           } else {
-            block.parentNode.appendChild(clonedDiv);
+            box.appendChild(clonedDiv);
           }
           block.classList.remove('active');
           this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
@@ -92493,6 +92514,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',
@@ -92586,6 +92612,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']
@@ -92643,6 +92676,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).