@innovastudio/contentbuilder 1.5.49 → 1.5.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.49",
+  "version": "1.5.51",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -17122,6 +17122,24 @@ const renderSnippetPanel = (builder, snippetOpen) => {
           }
         });
       }
+      let snippetid;
+      if (isMobile && builder.isContentBox) {
+        const items = snippetlist.querySelectorAll('.snippet-item');
+        items.forEach(item => {
+          if (item.classList.contains('data-click')) return;
+          item.addEventListener('touchstart', () => {
+            snippetid = item.getAttribute('data-id');
+          }, {
+            passive: false
+          });
+          item.addEventListener('touchend', () => {
+            builder.dropSnippet(snippetid);
+          }, {
+            passive: false
+          });
+          item.classList.add('data-click');
+        });
+      }
     }
   });
   inpSnippet.setValue(defaultcatval + '');
@@ -17242,14 +17260,23 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   let activeBuilderArea;
   let itemHeight;
   const isMobile = dom.detectMobileOrTablet();
+  let snippetid;
   let useClick = false;
   if (isMobile && builder.isContentBox) {
     const items = snippetlist.querySelectorAll('.snippet-item');
     items.forEach(item => {
-      item.addEventListener('click', () => {
-        const snippetid = item.getAttribute('data-id');
+      if (item.classList.contains('data-click')) return;
+      item.addEventListener('touchstart', () => {
+        snippetid = item.getAttribute('data-id');
+      }, {
+        passive: false
+      });
+      item.addEventListener('touchend', () => {
         builder.dropSnippet(snippetid);
+      }, {
+        passive: false
       });
+      item.classList.add('data-click');
     });
     useClick = true;
   }
@@ -72863,15 +72890,19 @@ class Resizeable {
     resizing();
   }
   getScale(container) {
-    let matrix = window.getComputedStyle(container).transform;
-    if (matrix === 'none') return false;
-    let values = matrix.split('(')[1];
-    values = values.split(')')[0];
-    values = values.split(',');
-    let a = values[0];
-    let b = values[1];
-    let scale = Math.sqrt(a * a + b * b);
-    return scale;
+    try {
+      let matrix = window.getComputedStyle(container).transform;
+      if (matrix === 'none') return false;
+      let values = matrix.split('(')[1];
+      values = values.split(')')[0];
+      values = values.split(',');
+      let a = values[0];
+      let b = values[1];
+      let scale = Math.sqrt(a * a + b * b);
+      return scale;
+    } catch (e) {
+      return 1;
+    }
   }
   destroy() {
     const pane = this.pane;
@@ -83310,6 +83341,7 @@ class Draggable {
       passive: false
     });
     this.doc.addEventListener('keydown', this.handleKeyDown);
+    if (this.doc !== document) document.addEventListener('keydown', this.handleKeyDown);
   }
   refresh() {
     this.elements = this.doc.querySelectorAll(this.selector);
@@ -83335,6 +83367,7 @@ class Draggable {
     this.doc.removeEventListener('mousedown', this.handleSelect);
     this.doc.removeEventListener('touchstart', this.handleSelect);
     this.doc.removeEventListener('keydown', this.handleKeyDown);
+    if (this.doc !== document) document.removeEventListener('keydown', this.handleKeyDown);
     const blocks = this.doc.querySelectorAll(this.selector);
     blocks.forEach(elm => elm.classList.remove('active'));
   }
@@ -83645,14 +83678,18 @@ class Draggable {
     let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && elm.classList.contains('editable'));
     if (blocks.length > 0) return;
     if (this.onBeforeChange) this.onBeforeChange();
+    let isDeleted = false;
     blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
     blocks.forEach(element => {
       element.removeEventListener('mousedown', this.handleDragStart);
       element.removeEventListener('touchstart', this.handleDragStart);
       if (this.onDelete) this.onDelete(element);
       element.parentNode.removeChild(element);
+      isDeleted = true;
     });
-    if (this.onChange) this.onChange();
+    if (isDeleted && this.onChange) {
+      this.onChange();
+    }
   }
   handleKeyDown(event) {
     if (event.key === 'Delete' || event.key === 'Backspace' || event.keyCode === 46) {
@@ -92375,6 +92412,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     });
     let html = result[0].html;
     let noedit = result[0].noedit;
+    let html2 = '';
+    if (result[0].mode === 'canvas') {
+      html2 = result[0].html2;
+      if (!html2) {
+        html2 = `
+                <div class="row">
+                    <div class="column pt-0 pb-0 pl-0 pr-0 flex flex-col justify-center">
+                    <img src="${this.opts.snippetPath}images/img-2400x1350.png" alt="">
+                    </div>
+                </div>
+            `;
+      }
+    }
     let bSnippet;
     if (html.indexOf('"row') === -1) {
       bSnippet = true; // Just snippet (without row/column grid)
@@ -92453,9 +92503,22 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       });
       html = snippet.innerHTML;
     }
-    const activeBox = this.doc.querySelector('.box-select');
+    let activeBox = this.doc.querySelector('.box-select');
+    if (!activeBox) {
+      activeBox = this.activeBox;
+      if (!this.doc.body.contains(activeBox)) activeBox = null; // box deleted
+    }
+
+    if (!activeBox) {
+      this.doc.querySelectorAll('.is-box').forEach(box => {
+        if (this.isMoreThan50PercentVisible(box)) {
+          activeBox = box;
+        }
+      });
+    }
     const activeRow = this.doc.querySelector('.row-active');
     if (activeRow) {
+      if (html2) html = html2; // if it is canvas block, change it to normal using html2
       this.addRow(html, activeBox);
     } else {
       if (activeBox) {
@@ -92477,41 +92540,61 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             block.innerHTML = html;
           });
           html = snippet.innerHTML;
-          const blockTemplate = `
-                    <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 760px;">
-                        <div class="is-container container-new size-18 leading-14">
-                        [%CONTENT%]
+          this.uo.saveForUndo();
+          activeBox.querySelectorAll('.is-container.container-new').forEach(elm => elm.classList.remove('container-new'));
+          if (isBlock) {
+            this.eb.addBlock(html, activeBox);
+          } else {
+            const blockTemplate = `
+                        <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 760px;">
+                            <div class="is-container container-new size-18 leading-14">
+                            [%CONTENT%]
+                            </div>
                         </div>
-                    </div>
-                    `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
-          // html = blockTemplate.replace('[%CONTENT%]', html);
+                        `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
+            // html = blockTemplate.replace('[%CONTENT%]', html);
 
-          this.uo.saveForUndo();
-          this.eb.addBlock(blockTemplate, activeBox);
-          const builders = activeBox.querySelectorAll('.is-container.container-new');
-          builders.forEach(builder => {
-            // After snippet has been added, re-apply behavior on builder areas
+            this.eb.addBlock(blockTemplate, activeBox);
+            const builders = activeBox.querySelectorAll('.is-container.container-new');
+            builders.forEach(builder => {
+              // After snippet has been added, re-apply behavior on builder areas
 
-            var range = document.createRange();
-            range.setStart(builder, 0);
-            builder.appendChild(range.createContextualFragment(html));
-            this.applyBehaviorOn(builder);
-            builder.classList.remove('container-new');
-          });
+              var range = document.createRange();
+              range.setStart(builder, 0);
+              builder.appendChild(range.createContextualFragment(html));
+              this.applyBehaviorOn(builder);
+              builder.classList.remove('container-new');
+            });
+          }
           this.opts.onChange();
           this.opts.onRender();
           if (this.opts.onBlockCanvasAdd) this.opts.onBlockCanvasAdd();
         } else {
           let container = activeBox.querySelector('.builder-active');
           if (container) {
+            if (html2) html = html2;
             this.addRow(html, activeBox);
           } else {
             container = activeBox.querySelector('.is-container');
             if (container) {
+              if (html2) html = html2;
               this.addRow(html, activeBox);
             }
           }
         }
+      } else {
+        // No Active Box => Add Section
+
+        let sectionTemplate = this.settings.sectionTemplate;
+        const occurrences = this.dom.countOccurrences(html, 'column');
+        if (occurrences === 1) {
+          sectionTemplate = sectionTemplate.replace('is-content-1000', 'is-content-700');
+        }
+        html = sectionTemplate.replace('[%CONTENT%]', html);
+        const wrapper = this.doc.querySelector(this.page);
+        wrapper.insertAdjacentHTML('afterbegin', html);
+        this.activeBox = wrapper.querySelector('.is-box');
+        if (this.opts.onBlockSectionAdd) this.opts.onBlockSectionAdd();
       }
     }
     this.activeCol = null;
@@ -92552,7 +92635,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     let builderActive = box.querySelector('.builder-active');
     if (builderActive) this.applyBehaviorOn(builderActive);else {
       builderActive = box.querySelector('.is-builder');
-      this.applyBehaviorOn(builderActive);
+      if (builderActive) this.applyBehaviorOn(builderActive);
     }
     let cellElement = rowElement.querySelector('div');
     if (cellElement) cellElement.click(); //change active block to the newly created
@@ -92565,6 +92648,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.opts.onChange();
     this.opts.onRender();
   }
+  isMoreThan50PercentVisible(el) {
+    const rect = el.getBoundingClientRect();
+    const windowHeight = this.win.innerHeight || this.doc.documentElement.clientHeight;
+
+    // Calculate the visible part of the element in the viewport
+    const visibleHeight = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
+
+    // Check if more than 50% of the element is visible
+    return visibleHeight / rect.height > 0.5;
+  }
   sectionDropSetup() {
     if (this.blockContainer) {
       this.sortableOnCanvas = [];