@innovastudio/contentbox 1.4.49 → 1.4.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.49",
+  "version": "1.4.51",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.54",
+    "@innovastudio/contentbuilder": "^1.3.56",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -1772,6 +1772,11 @@ class SideBar {
 
         const framework =  '${this.builder.framework}'; 
         const contentStylePath = '${this.builder.contentStylePath}'; 
+
+        const row = '${this.builder.row}'; 
+        const cols = [${this.builder.cols.map(item => {
+      return `'${item}'`;
+    })}];
         
         let templates = [
             ${sTemplates}
@@ -1932,6 +1937,27 @@ class SideBar {
                             html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');
                             html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');
                         }
+
+                        if(framework ==='') {
+                            // Convert snippet into your defined 12 columns grid   
+                            var rowClass = row;
+                            var colClass = cols;
+                            if(rowClass!=='' && colClass.length===12){
+                                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, makeid());
 
@@ -28569,17 +28595,19 @@ class HtmlUtil {
 
     if (this.builder.cleanHtmlFormatting) ;
 
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
-
-    let elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm);
-    let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
-            <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$h.appendHtml(builderStuff, html);
-    let tmp = builderStuff.querySelector('#tmp_content');
+    const util = this.builder.util; // const builderStuff = this.builder.builderStuff;
+    // //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
+    // let elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
+    //     <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
+    // dom.appendHtml(builderStuff, html);
+
+    let html; // let tmp = builderStuff.querySelector('#tmp_content');
+
+    let tmp = document.createElement('div');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
     let blocks = tmp.querySelectorAll('[data-html]');
@@ -28592,76 +28620,6 @@ class HtmlUtil {
         block.setAttribute('data-html-' + index, encodeURIComponent(html));
         index++;
       });
-      /* OLD
-      let index = 1;
-      //let _builders = block.querySelectorAll('.is-builder');
-      Array.prototype.forEach.call(_builders, (_builder) => {
-          // let builderhtml = _builder.innerHTML;
-           //if(dom.parentsHasClass(_builder, 'slick-cloned')) return; // direct LATER
-           //Cleaning
-          _builder.style.transform = '';
-          _builder.style.WebkitTransform= '';
-          _builder.style.MozTransform= '';
-          _builder.removeAttribute('data-sort');
-          dom.removeClass(_builder, 'builder-active');
-           _builder.removeAttribute('hidesnippetaddtool');
-          _builder.removeAttribute('gray');
-          _builder.removeAttribute('rowoutline');
-          _builder.removeAttribute('grayoutline');
-          _builder.removeAttribute('hideoutline');
-          _builder.removeAttribute('leftrowtool');
-          _builder.removeAttribute('minimal');
-          _builder.removeAttribute('clean');
-          _builder.removeAttribute('grideditor');
-          _builder.removeAttribute('gridoutline');
-           _builder.removeAttribute('gridoutline'); // old
-          _builder.removeAttribute('draggridoutline'); // old
-          _builder.removeAttribute('between-blocks-left'); // old
-          _builder.removeAttribute('between-blocks-center'); // old  
-          _builder.removeAttribute('hideelementhighlight'); 
-           let builderhtml = _builder.innerHTML;
-          let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
-          tmpbuilder.innerHTML = builderhtml;
-           let elms = tmp.querySelectorAll('.sortable-chosen');
-          dom.removeClasses(elms, 'sortable-chosen');
-          elms = tmp.querySelectorAll('.sortable-ghost');
-          dom.removeClasses(elms, 'sortable-ghost');
-          elms = tmpbuilder.querySelectorAll('.elm-active');
-          dom.removeClasses(elms, 'elm-active');
-          elms = tmpbuilder.querySelectorAll('.elm-inspected');
-          dom.removeClasses(elms, 'elm-inspected');
-          elms = tmpbuilder.querySelectorAll('.cell-active');
-          dom.removeClasses(elms, 'cell-active');
-          elms = tmpbuilder.querySelectorAll('.row-active');
-          dom.removeClasses(elms, 'row-active');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          //elms = tmpbuilder.querySelectorAll('.is-builder');
-          //dom.removeClasses(elms, 'is-builder');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          elms = tmpbuilder.querySelectorAll('[data-click]');
-          dom.removeAttributes(elms, 'data-click');
-          elms = tmpbuilder.querySelectorAll('[contenteditable]');
-          dom.removeAttributes(elms, 'contenteditable');
-          elms = tmpbuilder.querySelectorAll('[data-module-active]');
-          dom.removeAttributes(elms, 'data-module-active');
-           dom.removeElements( tmpbuilder.querySelectorAll('.is-row-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.is-rowadd-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.ovl') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.irow-add-initial') );
-           // LATER: rewrite in javascript
-          //$builder.find('*[class=""]').removeAttr('class');
-          //$builder.find('*[style=""]').removeAttr('style'); 
-           elms = tmpbuilder.querySelectorAll('[data-keep]');
-          dom.removeAttributes(elms, 'data-keep');
-           builderhtml = tmpbuilder.innerHTML.trim();
-          builderhtml = builderhtml.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-      
-          block.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
-                   index++;
-      });
-      */
     }); //Render custom code blocks (including any editable areas within)
 
     blocks = tmp.querySelectorAll('[data-html]');
@@ -28958,12 +28916,12 @@ class HtmlUtil {
       });
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-    }
+    } // elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // return html;
 
-    elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
     html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
@@ -66656,8 +66614,7 @@ class Spacer {
           this.showTool(spacer); //Trigger Change event
 
           this.builder.opts.onChange(); //Trigger Render event
-
-          this.builder.opts.onRender();
+          // this.builder.opts.onRender();
         });
       });
     }
@@ -90942,7 +90899,9 @@ class ContentBuilder {
   }
 
   handleCellKeydown(col, e) {
+    this.oriLen = col.textContent.length; // get character length
     // Cleanup unwanted span
+
     let spans = col.querySelectorAll('span');
     Array.prototype.forEach.call(spans, span => {
       span.setAttribute('data-keep', '');
@@ -91446,13 +91405,27 @@ class ContentBuilder {
     // jQuery('.cell-active').find('.elm-active').removeClass('elm-active');
     // jQuery("#divElementTool").css("display", "none"); //force hide ellement tool
     // Call onChange to indicate content change
+    // this.opts.onChange();
+    // console.log(this.oriLen,col.textContent.length);
+
 
+    if (this.oriLen !== col.textContent.length) {
+      // check if typing produce/reduce a character
+      this.typing();
+    } // Hide element highlight & tool during typing
 
-    this.opts.onChange(); // Hide element highlight & tool during typing
 
     this.elmTool.hide();
   }
 
+  typing() {
+    // console.log('typing');
+    if (this.timeoutId) clearTimeout(this.timeoutId);
+    this.timeoutId = setTimeout(() => {
+      this.opts.onChange();
+    }, 2000);
+  }
+
   handleCellPaste() {
     this.uo.saveForUndo();
     const util = this.util;
@@ -100399,14 +100372,13 @@ class ContentBox {
       try {
         // Built-in onRender
         //Run parts of box(-flex).js
-        this.box(); //Run built-in plugin inside the builder
-
-        setTimeout(() => {
-          if (this.win.skrollr) {
-            let obj = this.win.skrollr.get();
-            if (obj) obj.refresh();
-          }
-        }, 100);
+        this.box(); // //Run built-in plugin inside the builder
+        // setTimeout(()=>{
+        //     if (this.win.skrollr) {
+        //         let obj = this.win.skrollr.get();
+        //         if(obj) obj.refresh();
+        //     }
+        // }, 100);
       } catch (e) {// Do Nothing
       }
     }; //Extend onChange with built-in plugins