@innovastudio/contentbox 1.6.54 → 1.6.56

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -38947,7 +38947,7 @@ class Grid {
       this.builder.uo.saveForUndo();
       this.builder.hideTools();
       cell.parentElement.insertBefore(cell, cell.previousElementSibling);
-      this.builder.opts.onChange();
+      this.builder.opts.onChange(true);
     }
   }
   moveColumnNext() {
@@ -38959,7 +38959,7 @@ class Grid {
       this.builder.uo.saveForUndo();
       this.builder.hideTools();
       cell.parentElement.insertBefore(cellnext, cell);
-      this.builder.opts.onChange();
+      this.builder.opts.onChange(true);
     }
   }
   moveColumnUp() {
@@ -38988,7 +38988,7 @@ class Grid {
 
           //Move row up
           row.parentNode.insertBefore(row, row.previousElementSibling);
-          this.builder.opts.onChange();
+          this.builder.opts.onChange(true);
           return;
         } else {
           this.builder.uo.saveForUndo();
@@ -39012,7 +39012,7 @@ class Grid {
           setTimeout(() => {
             cell.click(); //refresh active cell/row
           }, 30);
-          this.builder.opts.onChange();
+          this.builder.opts.onChange(true);
         }
       } else {
         //move outside container (move to previous container)
@@ -39032,7 +39032,7 @@ class Grid {
       setTimeout(() => {
         cell.click(); //refresh active cell/row
       }, 30);
-      this.builder.opts.onChange();
+      this.builder.opts.onChange(true);
     }
 
     //fix layout
@@ -39068,7 +39068,7 @@ class Grid {
 
           //Move row down
           row.parentNode.insertBefore(row.nextElementSibling, row);
-          this.builder.opts.onChange();
+          this.builder.opts.onChange(true);
           return;
         } else {
           this.builder.uo.saveForUndo();
@@ -39092,7 +39092,7 @@ class Grid {
           setTimeout(() => {
             cell.click(); //refresh active cell/row
           }, 30);
-          this.builder.opts.onChange();
+          this.builder.opts.onChange(true);
         }
       } else {
         //move outside container (move to next container)
@@ -39112,7 +39112,7 @@ class Grid {
       setTimeout(() => {
         cell.click(); //refresh active cell/row
       }, 30);
-      this.builder.opts.onChange();
+      this.builder.opts.onChange(true);
     }
 
     //fix layout
@@ -43342,9 +43342,12 @@ const renderSnippetPanel = (builder, snippetOpen) => {
             </div>   
         </div>
         `;
-    dom.appendHtml(builder.builderStuff, html);
+    let snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
+    if (!snippetModal) {
+      dom.appendHtml(builder.builderStuff, html);
+      snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
+    }
     builder.draggable('.snippetwindow .is-draggable');
-    const snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
     const btnClose = snippetModal.querySelector('.is-modal-close');
     btnClose.addEventListener('click', () => {
       snippetModal.classList.remove('active');
@@ -43567,8 +43570,11 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       //     return false;
       // }
 
-      const wrapper = builder.doc.querySelector(builder.page);
-      if (wrapper) wrapper.style.marginLeft = '';
+      // 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 = '';
+      }
     },
     onSort: evt => {
       if (!builder.canvas) return;
@@ -43585,12 +43591,6 @@ 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)
@@ -113743,7 +113743,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
     // Extend the onChange function
     var oldget = this.opts.onChange;
-    this.opts.onChange = () => {
+    this.opts.onChange = hideTools => {
       var ret = oldget.apply(this, arguments);
       if (this.activeCol) {
         // Quick reposition column tool
@@ -113751,14 +113751,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
       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='';
+      // Hide some tools (not all)
+      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.code.codeTool) this.element.code.codeTool.style.display = '';
+      if (this.element.hyperlink.linkTool) this.element.hyperlink.linkTool.style.display = '';
+      this.colTool.lockIndicator.style.display = '';
 
       // this.hideTools();
       setTimeout(() => {
-        this.hideTools();
+        if (hideTools) this.hideTools(); // Hide all tools to prevent incorrect positioning (eg. when layout changes)
       }, 40); // give delay, in case of programmatically click after col move
 
       return ret;
@@ -116008,6 +116010,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.pageoption.print();
   }
   destroy() {
+    const snippetData = document.querySelector('#_snippet_data');
+    if (snippetData) snippetData.remove();
     if (this.eb) this.eb.destroy();
     this.doc.body.classList.remove('data-editor');
     document.removeEventListener('click', this.doDocumentClick, false);
@@ -117040,8 +117044,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (this.isScriptAlreadyIncluded(snippetFile)) return;
     const script = document.createElement('script');
     script.src = snippetFile;
+    script.id = '_snippet_data';
     script.async = true;
     script.onload = () => {
+      if (!document.body.contains(this.builderStuff)) return; // in case the instance is destroyed
+
       this.opts.snippetJSON = window.data_basic;
       if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
         if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
@@ -117183,6 +117190,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       link.href = csslink;
       link.setAttribute('data-cb-color', '');
       link.addEventListener('load', () => {
+        if (!document.body.contains(this.builderStuff)) return; // in case the instance is destroyed
+
         // Remove previous css
         cssLink = document.querySelector('[data-cb-del]');
         if (cssLink) cssLink.parentNode.removeChild(cssLink);
@@ -117254,6 +117263,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       // if(this.opts.onThemeChange) this.opts.onThemeChange();
 
       await this.delay(1000);
+      if (!document.body.contains(this.builderStuff)) return; // in case the instance is destroyed
+
       // setTimeout(()=>{
       util.getUIStyles();
       this.setUIColorRefresh();
@@ -119110,6 +119121,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (iframeTool) iframeTool.style.display = '';
     let moduleTool = this.doc.querySelector('.is-module-tool');
     if (moduleTool) moduleTool.style.display = '';
+    let codeTool = this.doc.querySelector('.is-code-tool');
+    if (codeTool) codeTool.style.display = '';
     let lockIndicator = this.doc.querySelector('.is-locked-indicator');
     if (lockIndicator) lockIndicator.style.display = '';
     let linkTool = this.doc.querySelector('#divLinkTool');