@innovastudio/contentbuilder 1.0.44 → 1.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.0.44",
+  "version": "1.0.48",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -840,12 +840,15 @@ class Util {
       range = document.createRange();
       row.parentNode.insertBefore(range.createContextualFragment(snippet.innerHTML), row.nextSibling);
       rowElement = snippet.childNodes[0]; // Auto scroll
-
-      const y = row.getBoundingClientRect().top + row.offsetHeight + window.pageYOffset - 120;
-      window.scroll({
-        top: y,
-        behavior: 'smooth'
-      }); // window.scrollTo(0, y);
+      // const y = row.getBoundingClientRect().top +  row.offsetHeight + window.pageYOffset - 120;
+      // window.scroll({
+      //     top: y,
+      //     behavior: 'smooth'
+      // });
+      // window.scrollTo(0, y);
+      // setTimeout(()=>{
+      //     row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // }, 600);
 
       rowElement = row.nextElementSibling; // a must. Must be before applyBehavior() to prevent element delete during fixLayout
 
@@ -1387,6 +1390,28 @@ class Util {
 
       i++;
     });
+    this.repositionColumnTool(true);
+    if (this.builder.onRefreshTool) this.builder.onRefreshTool();
+  } // Quick reposition column tool
+
+
+  repositionColumnTool(transition) {
+    let columnTool = this.builder.colTool.columnTool;
+    let col = this.builder.activeCol;
+
+    if (transition) {
+      columnTool.style.transition = 'all ease 100ms';
+      setTimeout(() => {
+        columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+        columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        setTimeout(() => {
+          columnTool.style.transition = '';
+        }, 100);
+      }, 10);
+    } else {
+      columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+      columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+    }
   }
 
   isTouchSupport() {
@@ -2950,6 +2975,12 @@ class Dom {
       });
     }
   }
+
+  baseName(str) {
+    if (typeof str !== 'string') return;
+    var frags = str.split('.');
+    return frags.splice(0, frags.length - 1).join('.');
+  }
   /** added by Jack */
 
 
@@ -10052,7 +10083,7 @@ class Snippets {
                 var snippetCategories = ${snippetCategoriesString};
                 var defaultSnippetCategory = ${defaultSnippetCategory};
 
-                ${this.builder.slider ? `
+                ${typeof this.builder.slider !== 'undefined' && this.builder.slider !== null ? `
                 var slider='${this.builder.slider}';` : 'var slider=null;'};
         
                 var numOfCat = snippetCategories.length;
@@ -10105,31 +10136,21 @@ class Snippets {
         
                 var snippets = data_basic.snippets; //DATA
 
-                if(slider) {
+                if (slider !== null){
                     if(slider==='slick') {
-                        for (let i = 0; i < snippets.length; i++) {
-                            if (snippets[i].type === 'glide') { //remove glide
-                                snippets.splice(i, 1);
-                                break;
-                            }
-                        }
+                        //remove glide
+                        const predicate = (item) => (item.type!=='glide');
+                        snippets = snippets.filter(predicate);
                     } else if(slider==='glide') {
-                        for (let i = 0; i < snippets.length; i++) {
-                            if (snippets[i].type === 'slick') { //remove slick
-                                snippets.splice(i, 1);
-                                break;
-                            }
-                        }
+                        //remove slick
+                        const predicate = (item) => (item.type!=='slick');
+                        snippets = snippets.filter(predicate);
                     } else if(slider==='all') {
                         // Do Nothing
                     } else {
                         // remove all slider (if incorrect settings)
-                        for (let i = 0; i < snippets.length; i++) {
-                            if (snippets[i].type === 'glide' || snippets[i].type === 'slick') { //remove glide & slick
-                                snippets.splice(i, 1);
-                                break;
-                            }
-                        }
+                        const predicate = (item) => (item.type!=='glide' && item.type!=='slick');
+                        snippets = snippets.filter(predicate);
                     }
 
                 } else {
@@ -15141,32 +15162,22 @@ const renderSnippetPanel = builder => {
   let snippets = builder.opts.snippetJSON.snippets;
   let slider = builder.opts.slider;
 
-  if (slider) {
+  if (typeof slider !== 'undefined' && slider !== null) {
     if (slider === 'slick') {
-      for (let i = 0; i < snippets.length; i++) {
-        if (snippets[i].type === 'glide') {
-          //remove glide
-          snippets.splice(i, 1);
-          break;
-        }
-      }
+      //remove glide
+      const predicate = item => item.type !== 'glide';
+
+      builder.opts.snippetJSON.snippets = snippets.filter(predicate);
     } else if (slider === 'glide') {
-      for (let i = 0; i < snippets.length; i++) {
-        if (snippets[i].type === 'slick') {
-          //remove slick
-          snippets.splice(i, 1);
-          break;
-        }
-      }
+      //remove slick
+      const predicate = item => item.type !== 'slick';
+
+      builder.opts.snippetJSON.snippets = snippets.filter(predicate);
     } else if (slider === 'all') ; else {
       // remove all slider (if incorrect settings)
-      for (let i = 0; i < snippets.length; i++) {
-        if (snippets[i].type === 'glide' || snippets[i].type === 'slick') {
-          //remove glide & slick
-          snippets.splice(i, 1);
-          break;
-        }
-      }
+      const predicate = item => item.type !== 'glide' && item.type !== 'slick';
+
+      builder.opts.snippetJSON.snippets = snippets.filter(predicate);
     }
   } else {
     //backward compatible
@@ -39012,6 +39023,26 @@ class Image {
           extension = f.substr(f.lastIndexOf('.') + 1).toLowerCase();
         }
 
+        if (this.builder.opts.imageRenameOnEdit) {
+          let basename = '';
+
+          if (img.src.indexOf('base64') === -1) {
+            let filename = img.src.substring(img.src.lastIndexOf('/') + 1);
+            basename = dom$w.baseName(filename);
+          } else {
+            basename = dom$w.baseName(img.getAttribute('data-filename'));
+          }
+
+          let newname = '';
+
+          if (basename.indexOf('-edit') !== -1) {
+            basename = basename.substr(0, basename.indexOf('-edit'));
+          }
+
+          newname = basename + '-edit' + this.util.makeId();
+          img.setAttribute('data-filename', newname + '.' + extension);
+        }
+
         if (extension === 'jpg') {
           img.src = this.cropper.getCroppedCanvas({
             fillColor: '#fff'
@@ -57133,6 +57164,7 @@ class ContentBuilder {
       //set -1 for no max (use original image width)
       zoom: 1,
       useLightbox: false,
+      imageRenameOnEdit: true,
 
       /*
       onZoomStart: () => {
@@ -57350,14 +57382,19 @@ class ContentBuilder {
 
     var oldget = this.opts.onChange;
 
-    this.opts.onChange = function () {
+    this.opts.onChange = () => {
       var ret = oldget.apply(this, arguments);
 
       if (this.activeCol) {
-        this.colTool.refreshColumnTool(this.activeCol);
+        // this.colTool.refreshColumnTool(this.activeCol);
+        // Quick reposition column tool
+        this.util.repositionColumnTool();
       }
 
       this.elmTool.repositionElementTool(true);
+      this.element.image.imageTool.style.display = '';
+      this.element.module.moduleTool.style.display = '';
+      this.colTool.lockIndicator.style.display = '';
       return ret;
     };