@innovastudio/contentbox 1.4.19 → 1.4.21

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>
@@ -11875,6 +11959,15 @@ class EditBox {
     } else {
       chkBoxAddText.style.display = 'flex';
       chkBoxRemoveText.style.display = 'none';
+    } // noedit (not used yet)
+
+
+    let activeSection = this.builder.activeSection;
+
+    if (dom$j.hasClass(activeSection, 'noedit')) {
+      chkBoxAddText.style.display = 'none';
+    } else {
+      chkBoxAddText.style.display = 'flex';
     } // Content Height & Justify
 
 
@@ -12392,8 +12485,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 +27322,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 +27568,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 +62856,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 +62918,9 @@ class Image$1 {
         this.imageTool.style.display = '';
       }, 1000);
     } else {
-      this.refresh();
+      elm.onload = () => {
+        this.refresh();
+      };
     }
   }
 
@@ -62880,7 +62995,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 +78579,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 +78610,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) {
@@ -94549,6 +94666,25 @@ class ContentBox {
   } // boxSetup
 
 
+  addSection(html, contentCss) {
+    this.addIdea(html);
+    let contentClass = contentCss.replace('.css', '');
+    let contentStylePath = this.settings.contentStylePath; //Add contentCss
+
+    let exist = false;
+
+    let links = parent._cb.doc.getElementsByTagName('link');
+
+    for (let i = 0; i < links.length; i++) {
+      let src = links[i].href.toLowerCase();
+      if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
+    }
+
+    if (!exist) {
+      this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+    }
+  }
+
   addIdea(newArea) {
     this.editor.saveForUndo();
     const designPath = this.designPath;
@@ -95017,17 +95153,19 @@ class ContentBox {
             document.body.style.overflowY = '';
           });
         } else {
-          const sidebarOverlay = builderStuff.querySelector('.is-sidebar-overlay');
-          sidebarOverlay.parentNode.removeChild(sidebarOverlay);
-          let elms = builderStuff.querySelectorAll('.is-sidebar > div');
-          elms.forEach(elm => {
-            dom.removeClass(elm, 'active');
-          });
-          elms = builderStuff.querySelectorAll('.is-sidebar-content');
-          elms.forEach(elm => {
-            dom.removeClass(elm, 'active');
-          });
-          document.body.style.overflowY = '';
+          // const sidebarOverlay = builderStuff.querySelector('.is-sidebar-overlay');
+          // sidebarOverlay.parentNode.removeChild(sidebarOverlay);
+          // let elms = builderStuff.querySelectorAll('.is-sidebar > div');
+          // elms.forEach((elm)=>{
+          //     dom.removeClass(elm, 'active');
+          // });
+          // elms = builderStuff.querySelectorAll('.is-sidebar-content');
+          // elms.forEach((elm)=>{
+          //     dom.removeClass(elm, 'active');
+          // });
+          // document.body.style.overflowY = '';
+          // Close all opened sidebar
+          this.sidebar.closeSidebar();
         }
       } else {
         btn.onClick();