@innovastudio/contentbuilder 1.5.48 → 1.5.50

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -3711,6 +3711,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;
@@ -17223,7 +17241,26 @@ 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 => {
+      item.addEventListener('touchstart', () => {
+        snippetid = item.getAttribute('data-id');
+      }, {
+        passive: false
+      });
+      item.addEventListener('touchend', () => {
+        builder.dropSnippet(snippetid);
+      }, {
+        passive: false
+      });
+    });
+    useClick = true;
+  }
+  if (!useClick) new Sortable(snippetlist, {
     // forceFallback: safariAgent,
     group: {
       name: 'shared',
@@ -66679,6 +66716,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);
       });
@@ -66687,6 +66725,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);
@@ -66714,6 +66753,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);
       });
@@ -83277,6 +83317,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);
@@ -83302,6 +83343,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'));
   }
@@ -83612,14 +83654,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) {
@@ -83995,7 +84041,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);
@@ -84003,6 +84050,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'));
@@ -92316,6 +92381,224 @@ 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;
+    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();
+          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);
+            }
+          }
+        }
+      }
+    }
+    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();
+  }
   sectionDropSetup() {
     if (this.blockContainer) {
       this.sortableOnCanvas = [];