@innovastudio/contentbuilder 1.5.50 → 1.5.52

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.50",
+  "version": "1.5.52",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",
@@ -55,7 +55,6 @@
     "webpack-dev-server": "^4.2.1"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.44",
     "@monaco-editor/loader": "^1.3.2",
     "blueimp-load-image": "^5.16.0",
     "cropperjs": "^1.5.12",

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 + '');
@@ -17247,6 +17265,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   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');
       }, {
@@ -17257,6 +17276,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       }, {
         passive: false
       });
+      item.classList.add('data-click');
     });
     useClick = true;
   }
@@ -72870,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;
@@ -92480,7 +92504,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       html = snippet.innerHTML;
     }
     let activeBox = this.doc.querySelector('.box-select');
-    if (!activeBox) activeBox = this.activeBox;
+    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
@@ -92506,6 +92541,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           });
           html = snippet.innerHTML;
           this.uo.saveForUndo();
+          activeBox.querySelectorAll('.is-container.container-new').forEach(elm => elm.classList.remove('container-new'));
           if (isBlock) {
             this.eb.addBlock(html, activeBox);
           } else {
@@ -92519,17 +92555,17 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             // html = blockTemplate.replace('[%CONTENT%]', html);
 
             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
+            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();
@@ -92546,6 +92582,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             }
           }
         }
+      } 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;
@@ -92599,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 = [];