@innovastudio/contentbuilder 1.3.41 → 1.3.42

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.41",
+  "version": "1.3.42",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -22015,12 +22015,17 @@ const renderSnippetPanel = builder => {
         if (oldCss) oldCss.parentNode.removeChild(oldCss);
         builder.builderStuff.insertAdjacentHTML('afterbegin', newCss);
       }
+
+      builder.sectionDropSetup();
     },
-    onMove: () => {
+    onMove: evt => {
       let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
 
       if (emptyinfo) emptyinfo.style.display = 'none';
+      if (builder.sortableOnPage) if (evt.related.getBoundingClientRect().top < 0 || evt.related.getBoundingClientRect().top > window.innerHeight) {
+        return false;
+      }
     },
     onStart: () => {
       // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
@@ -22049,6 +22054,8 @@ const renderSnippetPanel = builder => {
       if (activeBuilderArea) {
         dom.addClass(activeBuilderArea, 'builder-active');
       }
+
+      if (builder.sortableOnPage) builder.sortableOnPage.destroy();
     }
   });
 
@@ -78091,6 +78098,199 @@ class ContentBuilder {
     // return currentScript.replace(currentScriptFile, '');
   }
 
+  sectionDropSetup() {
+    if (this.page) {
+      if (this.page !== '.is-wrapper') return; // only for ContentBox
+
+      const wrapper = this.doc.querySelector(this.page);
+      this.sortableOnPage = new Sortable(wrapper, {
+        scroll: true,
+        group: 'shared',
+        direction: 'vertical',
+        animation: 150,
+        sort: true,
+        // draggable: '.dummy',
+        swapThreshold: 0.1,
+        invertSwap: true,
+        onAdd: evt => {
+          var itemEl = evt.item;
+
+          if (itemEl.querySelector('.is-col-tool')) {
+            let rowTool = itemEl.querySelector('.is-row-tool');
+            let colTool = itemEl.querySelector('.is-col-tool');
+            let rowAddTool = itemEl.querySelector('.is-rowadd-tool');
+            itemEl.removeChild(rowTool);
+            itemEl.removeChild(colTool);
+            itemEl.removeChild(rowAddTool);
+            let elms = itemEl.querySelectorAll('[data-click]');
+            elms.forEach(elm => {
+              elm.removeAttribute('data-click');
+            });
+            itemEl.removeAttribute('draggable');
+            itemEl.classList.remove('row-active');
+            itemEl.classList.remove('row-outline');
+            elms = itemEl.querySelectorAll('.cell-active');
+            elms.forEach(elm => {
+              elm.classList.remove('cell-active');
+            });
+            elms = itemEl.querySelectorAll('*');
+            elms.forEach(elm => {
+              elm.style.cursor = '';
+            });
+            itemEl.outerHTML = `
+                        <div class="is-section is-box is-section-100 type-poppins">
+                            <div class="is-overlay"></div>
+                            <div class="is-boxes">
+                                <div class="is-box-centered">
+                                    <div class="is-container is-content-900 v2 size-18 leading-14">
+                                        ${itemEl.outerHTML}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        `;
+            if (this.opts.onSectionAdd) this.opts.onSectionAdd(); // //Trigger Change event
+            // this.opts.onChange();
+            // //Trigger Render event
+            // this.opts.onRender();
+
+            return;
+          }
+
+          if (itemEl.getAttribute('data-id')) {
+            // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
+            let snippetid = itemEl.getAttribute('data-id'); // 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;
+            });
+            var html = result[0].html;
+            var noedit = result[0].noedit;
+            var 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; // Convert snippet into your defined 12 columns grid   
+
+            var rowClass = this.opts.row; //row
+
+            var 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] !== '') {
+                var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+                html = html.replace(regex, this.opts.snippetPathReplace[1]);
+                var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+                var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+                var regex2 = new RegExp(string1, 'g');
+                html = html.replace(regex2, string2);
+              } // } catch (e) { 1; }
+
+            }
+
+            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>`; // Clean snippet from sortable related code
+
+              itemEl.removeAttribute('draggable');
+              this.dom.removeClass(itemEl, 'snippet-item'); // itemEl.outerHTML = html;
+
+              itemEl.outerHTML = `
+                            <div class="is-section is-box is-section-100 type-poppins">
+                                <div class="is-overlay"></div>
+                                <div class="is-boxes">
+                                    <div class="is-box-centered">
+                                        <div class="is-container is-content-900 v2 size-18 leading-14">${html}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            `;
+            } 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());
+
+                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; // Clean snippet from sortable related code
+
+              itemEl.removeAttribute('draggable');
+              this.dom.removeClass(itemEl, 'snippet-item');
+              itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
+              // https://ghinda.net/article/script-tags/
+
+              var range = document.createRange();
+              range.setStart(itemEl, 0);
+              itemEl.appendChild(range.createContextualFragment(html)); // itemEl.outerHTML = itemEl.innerHTML;
+
+              itemEl.outerHTML = `
+                            <div class="is-section is-box is-section-100 type-poppins">
+                                <div class="is-overlay"></div>
+                                <div class="is-boxes">
+                                    <div class="is-box-centered">
+                                        <div class="is-container is-content-900 v2 size-18 leading-14">${itemEl.innerHTML}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            `;
+            } // // After snippet has been added, re-apply behavior on builder areas
+            // this.applyBehaviorOn(builder);
+
+
+            if (this.opts.onSectionAdd) this.opts.onSectionAdd(); //Trigger Change event
+
+            this.opts.onChange(); //Trigger Render event
+
+            this.opts.onRender(); // // Hide element tool
+            // this.elmTool.hide();
+          } // this.sortableOnPage.option('draggable', '.dummy');
+
+
+          this.sortableOnPage.destroy();
+        }
+      });
+    }
+  }
+
 }
 //     var run = (opts = {}) => {
 //         return new ContentBuilder(opts);