@innovastudio/contentbox 1.4.19 → 1.4.20

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -1918,8 +1918,65 @@ class SideBar {
             const wait2 = document.querySelector('.is-waiting2');
             wait2.style.display = 'flex';
         
+            let totalLoaded = 0;
+
             let designId = 1;
             loadJsFiles(templateJSON, (template)=>{
+                // console.log(template_list)
+
+
+                // ---- Old Version (backward compatible) ----
+                totalLoaded+=1;
+                if(template_list.length!==totalLoaded) {
+                    if(template.url.indexOf('basic.js')!==-1) {
+
+                        let arr = {
+                            name: 'Simple Start',
+                            categories: [
+                                { id: 5, name: 'Random' }, 
+                                { id: 1, name: 'Basic' },
+                                { id: 2, name: 'Slider' },
+                                { id: 3, name: 'Video' },
+                                { id: 4, name: 'Custom' },
+                            ],
+                            designs: window.data_basic.designs
+                        };
+                        template_list.push(arr);
+
+                    }
+                    if(template.url.indexOf('examples.js')!==-1) {
+                        
+                        let arr = {
+                            name: 'Quick Start',
+                            categories: [
+                                { id: 101, name: 'Header' }, 
+                                { id: 118, name: 'Article' },
+                                { id: 102, name: 'Photos' },
+                                { id: 103, name: 'Profile' },
+                                { id: 104, name: 'Products, Services' },
+                                { id: 105, name: 'Features' },
+                                { id: 106, name: 'Process' },
+                                { id: 107, name: 'Pricing' },
+                                { id: 108, name: 'Skills' },
+                                { id: 109, name: 'Achievements' },
+                                { id: 110, name: 'Quotes' },
+                                { id: 111, name: 'Partners' },
+                                { id: 112, name: 'As Featured On' },
+                                { id: 113, name: 'Page Not Found' },
+                                { id: 114, name: 'Coming Soon' },
+                                { id: 115, name: 'Help, FAQ' },
+                                { id: 116, name: 'Contact' },
+                                { id: 117, name: 'Footer' },
+                            ],
+                            designs: window.data_examples.designs
+                        };
+                        template_list.push(arr);
+
+                    }
+                }
+                // ---- /Old Version ----
+
+
                 // console.log(template)
                 const templateAdded = template_list[template_list.length-1];
                 templateAdded.path = template.path;
@@ -10385,6 +10442,8 @@ class EditBox {
         dom$j.removeClass(activeBox.querySelector('.edge-y-3'), 'edge-y-3');
         dom$j.removeClass(activeBox.querySelector('.edge-y-4'), 'edge-y-4');
         dom$j.removeClass(activeBox.querySelector('.edge-y-5'), 'edge-y-5');
+        dom$j.removeClass(activeBox.querySelector('.edge-y-8'), 'edge-y-8'); // old (backward compatible)
+
         dom$j.removeClass(activeBox.querySelector('.edge-x--1'), 'edge-x--1');
         dom$j.removeClass(activeBox.querySelector('.edge-x--0-75'), 'edge-x--0-75');
         dom$j.removeClass(activeBox.querySelector('.edge-x--0-5'), 'edge-x--0-5');
@@ -11087,10 +11146,35 @@ class EditBox {
     chkBoxAddText.addEventListener('click', () => {
       const activeBox = this.builder.activeBox;
       const overlay = activeBox.querySelector('.is-overlay');
+      const boxes = activeBox.querySelector('.is-boxes');
+
+      if (boxes) {
+        if (boxes.querySelector('.is-overlay')) {
+          // Need fix
+          activeBox.prepend(overlay);
+          boxes.parentNode.removeChild(boxes);
+        }
+      }
+
+      let copyClass = '';
+      const otherContainer = activeBox.parentNode.querySelector('.is-container');
+
+      if (otherContainer) {
+        otherContainer.classList.forEach(item => {
+          if (item.indexOf('leading-') !== -1) {
+            copyClass += ' ' + item;
+          }
+
+          if (item.indexOf('size-') !== -1) {
+            copyClass += ' ' + item;
+          }
+        });
+      }
+
       let html = `
                 <div class="is-boxes">
                     <div class="is-box-centered">
-                        <div class="is-container container" style="max-width: 440px;">
+                        <div class="is-container is-content-700 v2${copyClass}">
                             
                         </div>
                     </div>
@@ -12392,8 +12476,8 @@ class EditBox {
     if (!overlayBg) return;
 
     if (this.modalEditBox.querySelector('#chkParallaxBg').checked) {
-      overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-120px) scale(1);');
-      overlayBg.setAttribute('data-top-bottom', 'transform:translateY(50px) scale(1.4)');
+      overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-70px) scale(1);');
+      overlayBg.setAttribute('data-top-bottom', 'transform:translateY(50px) scale(1.1)');
       this.builder.settings.onRender();
     } else {
       dom$j.removeClass(overlayBg, 'skrollable');
@@ -27229,7 +27313,25 @@ class HtmlUtil {
       range.setStart(area, 0);
       area.appendChild(range.createContextualFragment(html));
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      /*else {
+           const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+          if(builders.length > 1) {
+              const cell = util.cellSelected();
+              if(!cell) {
+                  // Return first instance
+                  area = builders[0];
+              } else {
+                  // Return active instance
+                  area = cell.parentNode.parentNode;
+              }
+          } else {
+              // Single instance
+              area = builders[0];
+          }
+          this.builder.applyBehaviorOn(area);
+       }*/
+      //Trigger Change event
 
       this.builder.opts.onChange(); //Trigger Render event
 
@@ -27457,9 +27559,9 @@ class HtmlUtil {
 
 
     let columnMore = builderStuff.querySelector('.is-pop.columnmore');
-    columnMore.style.display = '';
+    if (columnMore) columnMore.style.display = '';
     let rowMore = builderStuff.querySelector('.is-pop.rowmore');
-    rowMore.style.display = '';
+    if (rowMore) rowMore.style.display = '';
     this.builder.codeEditorMode = mode;
     this.builder.codeEditorArea = area;
     let codeEditor = viewhtml.querySelector('.input-code-editor');
@@ -62745,6 +62847,8 @@ class Image$1 {
           }
 
           newname = basename + '-edit' + this.util.makeId();
+          newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
           img.setAttribute('data-filename', newname + '.' + extension);
         }
 
@@ -62805,7 +62909,9 @@ class Image$1 {
         this.imageTool.style.display = '';
       }, 1000);
     } else {
-      this.refresh();
+      elm.onload = () => {
+        this.refresh();
+      };
     }
   }
 
@@ -62880,7 +62986,9 @@ class Image$1 {
           this.builder.moveable.updateRect();
           document.querySelector('.moveable-control-box').style.display = 'none';
         }
-      }, 300);
+
+        this.util.repositionColumnTool();
+      }, 0); // refesh() is called after img onload, so no need to have a delay.
     }
   }
 
@@ -78462,7 +78570,7 @@ class Rte {
       }
 
       if (this.builder.opts.toolbarAddSnippetButton && html_elementrte.indexOf('rte-addsnippet') === -1 && html_elementrtemore.indexOf('rte-addsnippet') === -1) {
-        html_elementrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_rte;
+        html_elementrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_elementrte; //html_rte;
       }
 
       if (html_elementrtemore !== '' && html_elementrte.indexOf('rte-more') === -1) {
@@ -78493,7 +78601,7 @@ class Rte {
       }
 
       if (this.builder.opts.toolbarAddSnippetButton && html_iconrte.indexOf('rte-addsnippet') === -1 && html_iconrtemore.indexOf('rte-addsnippet') === -1) {
-        html_iconrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_rte;
+        html_iconrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_iconrte; //html_rte;
       }
 
       if (html_iconrtemore !== '' && html_iconrte.indexOf('rte-more') === -1) {