@innovastudio/contentbox 1.6.58 → 1.6.60

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -30000,6 +30000,24 @@ class Dom {
   constructor(builder) {
     this.builder = builder;
   }
+  detectMobileOrTablet() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /ipad|iphone|ipod/.test(userAgent) && !window.MSStream;
+    const isAndroid = /android/.test(userAgent);
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    const screenWidth = window.innerWidth <= 1600;
+    if (isIOS || isAndroid) {
+      return true; // Definitely a mobile or tablet
+    }
+
+    // Additional check for other touch devices with screen width under 1600px
+    if (isTouchDevice && screenWidth) {
+      return true; // Likely a mobile or tablet
+    }
+
+    return false; // Likely not a mobile or tablet
+  }
+
   getScale(container) {
     let matrix = window.getComputedStyle(container).transform;
     if (matrix === 'none') return 1;
@@ -43393,6 +43411,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 + '');
@@ -43512,7 +43548,28 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
   let activeBuilderArea;
   let itemHeight;
-  new Sortable(snippetlist, {
+  const isMobile = dom.detectMobileOrTablet();
+  let snippetid;
+  let useClick = false;
+  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');
+    });
+    useClick = true;
+  }
+  if (!useClick) new Sortable(snippetlist, {
     // forceFallback: safariAgent,
     group: {
       name: 'shared',
@@ -92968,6 +93025,7 @@ class Rte {
     btnFront.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         this.builder.forward(activeBlock);
       });
@@ -92976,6 +93034,7 @@ class Rte {
     btnBackward.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         if (activeBlock.style.zIndex === '0') {
           this.builder.moveUp(activeBlock);
@@ -93003,6 +93062,7 @@ class Rte {
     btnDuplicate.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         this.builder.duplicate(activeBlock);
       });
@@ -99119,15 +99179,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;
@@ -109566,6 +109630,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);
@@ -109591,6 +109656,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'));
   }
@@ -109901,14 +109967,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) {
@@ -110284,7 +110354,8 @@ class EditableBlocks {
     }
     if (block.classList.contains('is-group')) return; // do not clone if block is shape
 
-    if (!block.classList.contains('clone')) {
+    const isMobileOrTablet = this.detectMobileOrTablet();
+    if (!block.classList.contains('clone') & !isMobileOrTablet) {
       let clonedDiv = block.cloneNode(true);
       clonedDiv.classList.add('clone');
       block.parentNode.appendChild(clonedDiv);
@@ -110292,6 +110363,24 @@ class EditableBlocks {
       this.refresh();
     }
   }
+  detectMobileOrTablet() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /ipad|iphone|ipod/.test(userAgent) && !window.MSStream;
+    const isAndroid = /android/.test(userAgent);
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    const screenWidth = window.innerWidth <= 1600;
+    if (isIOS || isAndroid) {
+      return true; // Definitely a mobile or tablet
+    }
+
+    // Additional check for other touch devices with screen width under 1600px
+    if (isTouchDevice && screenWidth) {
+      return true; // Likely a mobile or tablet
+    }
+
+    return false; // Likely not a mobile or tablet
+  }
+
   selectClear() {
     this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
     this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
@@ -118605,6 +118694,259 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     // return currentScript.replace(currentScriptFile, '');
   }
 
+  dropSnippet(snippetid) {
+    // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
+    const result = this.opts.snippetJSON.snippets.filter(item => {
+      if (item.id + '' === snippetid) return item;else return false;
+    });
+    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)
+    } else {
+      bSnippet = false; // Snippet is wrapped in row/colum
+    }
+
+    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   
+    let rowClass = this.opts.row; //row
+    let 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']
+    if (rowClass !== '' && colClass.length === 12) {
+      // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+      html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+      html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+      html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+      html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+      html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+      html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+      html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+      html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+      html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+      html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+      html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+      html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+    }
+    html = html.replace(/{id}/g, this.util.makeId());
+    if (this.opts.onAdd) {
+      html = this.opts.onAdd(html);
+    }
+    if (this.opts.snippetPathReplace.length > 0) {
+      // try {
+      if (this.opts.snippetPathReplace[0] !== '') {
+        let regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+        html = html.replace(regex, this.opts.snippetPathReplace[1]);
+        let string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+        let string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+        let regex2 = new RegExp(string1, 'g');
+        html = html.replace(regex2, string2);
+      }
+      // } catch (e) { 1; }
+    }
+
+    // this.addSnippet(html, bSnippet, noedit);
+
+    if (bSnippet) {
+      // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
+      // Can be inserted after current row, column (cell), element, or last row.
+
+      html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`;
+    } else if (isBlock) ; 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).
+
+      let snippet = this.dom.createElement('div');
+      snippet.innerHTML = html;
+      let blocks = snippet.querySelectorAll('[data-html]');
+      Array.prototype.forEach.call(blocks, block => {
+        // Render custom code block
+        html = decodeURIComponent(block.getAttribute('data-html'));
+        html = html.replace(/{id}/g, this.util.makeId());
+        html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
+        for (var i = 1; i <= 20; i++) {
+          html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+        }
+
+        block.innerHTML = html;
+      });
+      html = snippet.innerHTML;
+    }
+    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) {
+        if (activeBox.classList.contains('box-canvas')) {
+          // Canvas Mode
+
+          let snippet = this.dom.createElement('div');
+          snippet.innerHTML = html;
+          let blocks = snippet.querySelectorAll('[data-html]');
+          Array.prototype.forEach.call(blocks, block => {
+            // Render custom code block
+            html = decodeURIComponent(block.getAttribute('data-html'));
+            html = html.replace(/{id}/g, this.util.makeId());
+            html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
+            for (var i = 1; i <= 20; i++) {
+              html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+            }
+
+            block.innerHTML = html;
+          });
+          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 {
+            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>
+                        `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
+            // 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
+
+              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;
+  }
+  addRow(html, box) {
+    this.uo.saveForUndo();
+    let rowElement;
+    let bAddLast = false;
+
+    // Add after selected row
+    let cell = this.activeCol;
+    let row;
+    if (cell) {
+      row = cell.parentNode; // in email mode, cell active is also under row active (incorrect, but cell active is not needed in email mode. So this line works!)
+    } else {
+      // If no active cell, check if it is from .row-add-initial (empty info)
+      row = this.doc.querySelector('.row-active');
+      if (!row) {
+        bAddLast = true;
+      }
+    }
+    // Add after last row
+    if (bAddLast) {
+      const container = box.querySelector('.is-builder');
+      const rows = this.dom.elementChildren(container);
+      const lastrow = rows[rows.length - 1];
+      row = lastrow;
+    }
+
+    // Use createContextualFragment() to make embedded script executable
+    let range = document.createRange();
+    row.parentNode.insertBefore(range.createContextualFragment(html), row.nextSibling);
+    // rowElement = snippet.childNodes[0];
+
+    rowElement = row.nextElementSibling; // a must. Must be before applyBehavior to prevent element delete during fixLayout
+
+    // checkEmpty & onRender called here
+    let builderActive = box.querySelector('.builder-active');
+    if (builderActive) this.applyBehaviorOn(builderActive);else {
+      builderActive = box.querySelector('.is-builder');
+      if (builderActive) this.applyBehaviorOn(builderActive);
+    }
+    let cellElement = rowElement.querySelector('div');
+    if (cellElement) cellElement.click(); //change active block to the newly created
+
+    // Change to row selection
+    rowElement.className = rowElement.className.replace('row-outline', '');
+
+    //Hide Column tool (new!)
+    this.util.hideColumnTool();
+    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 = [];
@@ -151393,6 +151735,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
               box.classList.add('box-select');
               this.activeBox = box;
+              if (this.editor) this.editor.activeBox = box;
               this.wrapperEl.classList.add('hard-select');
             }
 
@@ -151421,6 +151764,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
                 // Unselect (do not unselect if anim panel or modal box/section settings is opened)
                 this.activeBox = box; // also needed
 
+                if (this.editor) this.editor.activeBox = box;
+
                 if (this.controlPanel) {
                   if (!this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
                     // Remove Hard Select
@@ -151454,6 +151799,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
                 if (prevSection) prevSection.classList.remove('section-select');
                 box.classList.add('box-select');
                 this.activeBox = box;
+                if (this.editor) this.editor.activeBox = box;
                 const section = box.closest('.is-section');
                 if (this.activeSection && section !== this.activeSection) this.prevSection = this.activeSection; // Save previous selected section
 
@@ -151778,6 +152124,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       if (box) {
         box.classList.add('box-select');
         this.activeBox = box;
+        if (this.editor) this.editor.activeBox = box;
       }
 
       if (section) {
@@ -152203,6 +152550,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       if (this.activeSection && section !== this.activeSection) this.prevSection = this.activeSection; // Save previous selected section
 
       this.activeBox = box;
+      if (this.editor) this.editor.activeBox = box;
       this.activeSection = section; //selectType
 
       const typePanel = document.querySelector('#divSidebarTypography');
@@ -152283,6 +152631,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       elm.classList.remove('section-select');
     });
     this.activeBox = null;
+    if (this.editor) this.editor.activeBox = null;
     this.activeSection = null;
     this.wrapperEl.classList.remove('is-container-edit');
     this.wrapperEl.classList.remove('is-clean-edit');
@@ -152729,6 +153078,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       // select box
       newSection.classList.add('box-select');
       this.activeBox = newSection;
+      if (this.editor) this.editor.activeBox = newSection;
       this.wrapperEl.classList.add('hard-select'); // select section
 
       newSection.classList.add('section-select');
@@ -152742,6 +153092,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       if (box) {
         box.classList.add('box-select');
         this.activeBox = box;
+        if (this.editor) this.editor.activeBox = box;
       }
 
       this.wrapperEl.classList.add('hard-select'); // select section
@@ -153232,6 +153583,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   loadHtml(html) {
     // Reset
     this.activeBox = null;
+    if (this.editor) this.editor.activeBox = null;
     this.activeSection = null; // Wait for IFRAME loaded
 
     const wrapper = this.wrapperEl;
@@ -153702,7 +154054,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     if (sectionBox) {
       // section
       // select box
-      this.activeBox = activeSection; // select section
+      this.activeBox = activeSection;
+      if (this.editor) this.editor.activeBox = activeSection; // select section
 
       activeSection.classList.add('section-select');
       this.activeSection = activeSection;
@@ -153713,6 +154066,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       if (box) {
         box.classList.add('box-select');
         this.activeBox = box;
+        if (this.editor) this.editor.activeBox = box;
       } // select section