@innovastudio/contentbox 1.6.49 → 1.6.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.49",
+  "version": "1.6.51",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.36",
+    "@innovastudio/contentbuilder": "^1.5.37",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -13098,7 +13098,7 @@ class PanelBox {
                 <div class="adjustboxheight">
                     <div class="label mt-3">${out('Height')}:</div>
                     <div class="group" style="margin-top:5px">
-                        <button title="${out('Fixed')}" data-boxheight="set" style="width:75px">${out('Fixed')}</button>
+                        <button title="${out('Lock')}" data-boxheight="set" style="width:75px">${out('Lock')}</button>
                         <button title="${out('Decrease')}" data-boxheight="-"><svg><use xlink:href="#icon-minus"></use></svg></button>
                         <button title="${out('Increase')}" data-boxheight="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
                         <button title="${out('Clear')}" data-boxheight=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
@@ -25645,14 +25645,34 @@ class ControlPanel {
     let activeImage = this.builder.editor.activeImage;
     let activeModule = this.builder.editor.activeModule;
 
-    if (activeImage && activeModule) {
-      // if image is in module
-      this.builder.editor.element.image.hideImageTool();
-      setTimeout(() => {
-        this.panelImage.classList.remove('active');
-      }, 1);
+    if (activeModule) {
+      const moduleTool = this.builder.doc.querySelector('.is-module-tool');
+      moduleTool.style.opacity = '0';
+      const lockInfo = this.builder.doc.querySelector('.is-locked-indicator');
+      lockInfo.style.opacity = '0';
       setTimeout(() => {
         this.builder.editor.util.refreshModuleLayout(activeModule);
+        setTimeout(() => {
+          moduleTool.style.opacity = '';
+          this.builder.editor.element.module.repositionModuleTool();
+          lockInfo.style.opacity = '';
+          this.builder.editor.colTool.showHideLockIndicator(activeModule);
+        }, 200);
+      }, 600);
+    }
+
+    if (activeModule && activeImage) {
+      this.builder.editor.element.image.hideImageTool();
+      setTimeout(() => {
+        activeModule.querySelectorAll('img').forEach(img => {
+          if (img.outerHTML === activeImage.outerHTML) {
+            setTimeout(() => {
+              if (img.closest('.glide__slide--active')) {
+                img.click();
+              }
+            }, 100);
+          }
+        });
       }, 600);
     } else if (activeImage) {
       // normal image
@@ -25669,6 +25689,33 @@ class ControlPanel {
         this.builder.editor.element.image.repositionImageTool();
       }, 600);
     }
+    /*
+    if(activeImage && activeModule) {
+        // if image is in module
+        this.builder.editor.element.image.hideImageTool();
+        setTimeout(()=>{
+            this.panelImage.classList.remove('active');
+        },1);
+        setTimeout(()=>{
+            this.builder.editor.util.refreshModuleLayout(activeModule);
+        },600);
+    } else if(activeImage) {
+        // normal image
+        const imageTool = document.querySelector('#divImageTool');
+        const imageResizer = document.querySelector('#divImageResizer');
+        const moveableBox = document.querySelector('.moveable-control-box');
+        imageTool.style.opacity = '0';
+        imageResizer.style.opacity = '0';
+        moveableBox.style.opacity = '0';
+        setTimeout(()=>{
+            imageTool.style.opacity = '';
+            imageResizer.style.opacity = '';
+            moveableBox.style.opacity = '';
+            this.builder.editor.element.image.repositionImageTool();
+        },600);
+    } 
+    */
+
   }
 
   getActive() {
@@ -26072,7 +26119,7 @@ class ControlPanel {
         if (element.closest('[data-subblock]')) {
           let titleHtml = '';
           let module = element.closest('[data-html]');
-          let desc = module.getAttribute('data-module-desc');
+          let desc = module ? module.getAttribute('data-module-desc') : '';
 
           if (desc) {
             titleHtml = out(desc);
@@ -43511,8 +43558,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;
@@ -43528,6 +43577,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)
@@ -43576,6 +43631,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);
     }
   });
@@ -112615,7 +112676,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">
@@ -118742,6 +118803,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',
@@ -118835,6 +118901,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']
@@ -118892,6 +118965,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).
@@ -145657,6 +145738,7 @@ class IframePanel {
 
       document.addEventListener('mousemove', this.handleResizeMove);
       document.addEventListener('touchmove', this.handleResizeMove);
+      this.hideTools();
     }, 100);
     document.addEventListener('mouseup', this.handleResizeEnd);
     document.addEventListener('touchend', this.handleResizeEnd);
@@ -145881,7 +145963,37 @@ class IframePanel {
     this.repositionTool(); // this.builder.editor.screenMode = this.builder.screenMode; // Passsing screenMode into ContentBuilder
   }
 
+  hideTools() {
+    let elmTool = this.builder.doc.querySelector('.is-element-tool');
+    if (elmTool) elmTool.style.display = '';
+    let moduleTool = this.builder.doc.querySelector('.is-module-tool');
+    if (moduleTool) moduleTool.style.display = '';
+    let lockIndicator = this.builder.doc.querySelector('.is-locked-indicator');
+    if (lockIndicator) lockIndicator.style.display = '';
+    let linkTool = this.builder.doc.querySelector('#divLinkTool');
+    if (linkTool) linkTool.style.display = '';
+    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
+    if (spacerTool) spacerTool.style.display = '';
+    this.builder.editor.element.image.hideImageTool();
+    this.builder.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
+    this.builder.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
+    this.builder.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
+  }
+
   repositionTool() {
+    this.hideTools();
+    let activeImage = this.builder.editor.activeImage;
+
+    if (activeImage) {
+      setTimeout(() => {
+        if (activeImage.closest('[data-html]')) {
+          this.builder.editor.util.refreshModuleLayout(activeImage.closest('[data-html]'));
+        }
+      }, 600);
+    }
+  }
+
+  repositionTool_bak() {
     const col = this.builder.editor.activeCol;
 
     if (col) {
@@ -145927,7 +146039,19 @@ class IframePanel {
           }
         }
       }, 600);
-    }
+    } // let activeModule = this.builder.editor.activeModule;
+    // if(activeModule) {
+    //     const moduleTool = this.builder.doc.querySelector('.is-module-tool');
+    //     moduleTool.style.opacity = '0';
+    //     setTimeout(()=>{
+    //         moduleTool.style.opacity = '';
+    //         moduleTool.style.display = 'flex';
+    //         this.builder.editor.element.module.repositionModuleTool();
+    //     },600);
+    // }
+    // const lockInfo = this.builder.doc.querySelector('.is-locked-indicator');
+    // lockInfo.style.display = '';
+
   }
 
   loadIframe() {
@@ -146363,7 +146487,7 @@ class ContentBox {
       deleteConfirm: false,
       blockRotate: true,
       sectionTemplate: `
-            <div class="is-section is-box is-section-100 box-autofit type-opensans">
+            <div class="is-section is-box is-section-100 box-autofit type-system-ui">
                 <div class="is-overlay"></div>
                 <div class="is-container is-content-1000 v2 size-18 leading-14">
                     [%CONTENT%]
@@ -150125,6 +150249,11 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         .is-wrapper.is-container-edit > div.section-select, .is-wrapper.is-clean-edit > div.section-select {
             overflow-x: unset !important;
             overflow-y: unset !important;
+            z-index: 2;
+        }
+
+        .is-wrapper.is-edit {
+            min-height: 100vh;
         }
 
         ${this.iframe ? '' : `