@innovastudio/contentbox 1.4.16 → 1.4.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.css

@@ -70,7 +70,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 50px;
+  width: 60px;
   height: 100vh;
   background: rgba(255, 255, 255, 0.97) !important;
   color: rgba(0, 0, 0, 0.8);
@@ -163,18 +163,19 @@
         #divSidebarSource
 */
 #divSidebarSnippets {
-  max-width: 316px;
+  max-width: 290px !important;
+  border-left: 60px solid transparent !important;
 }
 
 #divSidebarTypography {
-  max-width: 300px;
+  max-width: 320px;
 }
 
 #divSidebarSnippets > div:first-child {
   width: 100%;
   height: 40px;
   position: absolute;
-  padding: 0 0 0 50px;
+  padding: 0 0 0 60px;
   box-sizing: border-box;
 }
 
@@ -187,17 +188,17 @@
 
 #divSidebarSections > div,
 .sidebar-sections > div {
-  padding: 0 0 0 50px;
+  padding: 0 0 0 60px;
   box-sizing: border-box;
 }
 
 #divSidebarSource > div {
-  padding: 0 0 0 50px;
+  padding: 0 0 0 60px;
   box-sizing: border-box;
 }
 
 #divSidebarTypography > div {
-  padding: 0 0 0 50px;
+  padding: 0 0 0 60px;
   box-sizing: border-box;
 }
 
@@ -277,7 +278,7 @@
   right: 0;
   width: 100%;
   z-index: 2;
-  padding: 0 0 0 50px;
+  padding: 0 0 0 60px;
   box-sizing: border-box;
 }
 
@@ -288,8 +289,8 @@
   overflow-y: auto;
   overflow-x: hidden;
   top: 110px;
-  left: 50px;
-  width: calc(100% - 50px);
+  left: 60px;
+  width: calc(100% - 60px);
   height: calc(100% - 110px);
   position: absolute;
 }
@@ -474,7 +475,7 @@
   opacity: 0.01;
   /* setting display=none makes initial script may not work properly */
   transform-origin: top;
-  padding-left: 50px;
+  padding-left: 60px;
 }
 
 #_cbhtml {
@@ -638,10 +639,7 @@
   outline: none !important;
 }
 
-.is-section.is-section-navbar .is-section-tool {
-  right: 50px;
-}
-
-.is-section.is-section-navbar .is-box-tool {
-  left: calc(50% - 70px) !important;
+.is-section.is-section-navbar,
+.is-section.is-section-navbar .is-topbar {
+  width: calc(100% - 60px);
 }

package/public/contentbox/contentbox.esm.js

@@ -1143,10 +1143,15 @@ class SideBar {
                 pathReplace: '${item.pathReplace}',
             },`;
     });
+    let sDefaultCategory = `{
+            id: ${this.builder.defaultCategory.id},
+            designId: ${this.builder.defaultCategory.designId},
+        }`;
     let sCategories = '';
     this.builder.featuredCategories.forEach(item => {
       sCategories += `{
                 id: '${item.id}',
+                designId: '${item.designId}',
                 name: '${item.name}',
             },`;
     });
@@ -1451,7 +1456,7 @@ class SideBar {
         const featuredCategories = [
             ${sCategories}
         ];
-        const defaultCat = ${this.builder.defaultDesignCategory};
+        const defaultCategory = ${sDefaultCategory};
         const navbar = ${this.builder.navbar ? 'true' : 'false'};
 
         const slider = '${this.builder.slider}';
@@ -1650,7 +1655,7 @@ class SideBar {
             });
         }
         
-        const showDesigns = (catId) => {
+        const showDesigns = (catId, designId) => {
 
             if(template_list.length>0) {
                 const wait = document.querySelector('.is-waiting');
@@ -1671,7 +1676,7 @@ class SideBar {
                         let isSelected = false;
                         let catSplit = item.category.split(',');
                         for (let j = 0; j < catSplit.length; j++) {
-                            if (parseInt(catSplit[j]) === parseInt(catId)) {
+                            if (parseInt(catSplit[j]) === parseInt(catId) && parseInt(gallery.designId) === parseInt(designId)) {
                                 isSelected = true;
                             }
                         }
@@ -1747,13 +1752,14 @@ class SideBar {
             // Set active Button
             const menu = document.querySelector('.mega-menu');
             menu.setAttribute('data-active-cat', catId);
+            menu.setAttribute('data-active-design', designId);
             const featuredCat = document.querySelector('.featured-categories');
             const btnActive1 = menu.querySelector('button.on');
             const btnActive2 = featuredCat.querySelector('button.on');
             if(btnActive1) btnActive1.classList.remove('on');
             if(btnActive2) btnActive2.classList.remove('on');
-            const btn1 = menu.querySelector('[data-cat="' + catId + '"]');
-            const btn2 = featuredCat.querySelector('[data-cat="' + catId + '"]');
+            const btn1 = menu.querySelector('.item-'+catId+'-'+designId);
+            const btn2 = featuredCat.querySelector('.item-'+catId+'-'+designId);
             if(btn1) btn1.classList.add('on');
             if(btn2) btn2.classList.add('on');
         }
@@ -1775,13 +1781,15 @@ class SideBar {
                 let html = '<h2>'+parent._cb.out(gallery.name)+'</h2><div class="cat' +catNum+ '"></div>';
                 menuContent.insertAdjacentHTML('beforeend', html);
                 const catList = menuContent.querySelector('.cat'+catNum);
+                
                 categories.forEach(categoryItem=>{
-                    let html= '<button data-cat="'+categoryItem.id+'">'+parent._cb.out(categoryItem.name)+'</button>';
+                    let html= '<button class="item-'+categoryItem.id+'-'+gallery.designId+'" data-cat="'+categoryItem.id+'" data-design="'+gallery.designId+'">'+parent._cb.out(categoryItem.name)+'</button>';
                     catList.insertAdjacentHTML('beforeend', html);
-                    const btn = catList.querySelector('[data-cat="'+categoryItem.id+'"]');
+                    const btn = catList.querySelector('.item-'+categoryItem.id+'-'+gallery.designId);
                     btn.addEventListener('click', (e)=>{
                         const catId = btn.getAttribute('data-cat');
-                        showDesigns(catId);
+                        const designId = btn.getAttribute('data-design');
+                        showDesigns(catId, designId);
         
                         closeMegaMenu();
                     });
@@ -1792,10 +1800,11 @@ class SideBar {
         
             // Set active Button
             const catId = menu.getAttribute('data-active-cat');
-            if(catId) {
+            const designId = menu.getAttribute('data-active-design');
+            if(catId && designId) {
                 const btnActive = menu.querySelector('button.on');
                 if(btnActive) btnActive.classList.remove('on');
-                const btn = menu.querySelector('[data-cat="' + catId + '"]');
+                const btn = menu.querySelector('.item-'+catId+'-'+designId);
                 if(btn) btn.classList.add('on');
             }
         }
@@ -1872,7 +1881,7 @@ class SideBar {
             let html = '';
             const div = document.querySelector('.featured-categories');
             featuredCategories.forEach(item=>{
-                html += '<button data-cat="'+item.id+'">'+parent._cb.out(item.name)+'</button>';
+                html += '<button class="item-'+item.id+'-'+item.designId+'" data-cat="'+item.id+'" data-design="'+item.designId+'">'+parent._cb.out(item.name)+'</button>';
             });
             html += '<button data-cat="0">'+parent._cb.out('All Categories')+'</button>';
             div.insertAdjacentHTML('beforeend', html);
@@ -1882,11 +1891,12 @@ class SideBar {
             btns.forEach(btn=>{
                 btn.addEventListener('click', (e)=>{
                     const catId = btn.getAttribute('data-cat');
+                    const designId = btn.getAttribute('data-design');
                     if(catId==='0') {
                         // Show All Categories' Mega Menu
                         showMegaMenu();
                     } else {
-                        showDesigns(catId);
+                        showDesigns(catId, designId);
                     }
                 });
             });`;
@@ -1907,19 +1917,14 @@ class SideBar {
             wait.style.display = 'flex';
             const wait2 = document.querySelector('.is-waiting2');
             wait2.style.display = 'flex';
-
-            // renderMegaMenu();
         
-            // showDesigns(defaultCat); // If not ready (not loaded yet) will show empty
-        
-            let designId = 0;
+            let designId = 1;
             loadJsFiles(templateJSON, (template)=>{
                 // console.log(template)
                 const templateAdded = template_list[template_list.length-1];
                 templateAdded.path = template.path;
                 templateAdded.pathReplace = template.pathReplace;
                 templateAdded.designId = designId;
-                designId++;
                 // console.log(templateAdded);
         
                 renderMegaMenu();
@@ -1928,11 +1933,12 @@ class SideBar {
                 if(designList.innerHTML.trim()==='') { // first load
                     const cats = templateAdded.categories;
                     cats.forEach(cat=>{
-                        if(parseInt(cat.id)===defaultCat) {
-                            showDesigns(defaultCat);
+                        if(parseInt(cat.id)===defaultCategory.id && designId===defaultCategory.designId) {
+                            showDesigns(defaultCategory.id, designId);
                         }
                     });
                 }
+                designId++;
             });
         })
         
@@ -3641,7 +3647,8 @@ class EditSection {
       activeSection.parentNode.removeChild(activeSection); //Trigger Render event
 
       this.builder.settings.onRender();
-      this.builder.editor.util.hideModal(modalDelConfirm); //Trigger Change event
+      this.builder.editor.util.hideModal(modalDelConfirm);
+      this.builder.editor.util.clearControls(); //Trigger Change event
 
       this.builder.settings.onChange(); // //Hide box tool
       // let boxTool = document.querySelector('#divBoxTool');
@@ -3821,6 +3828,9 @@ class EditSection {
         section.style.backgroundImage = ''; //remove gradient
 
         btnSectionBgColor.style.backgroundColor = s; // preview
+        //Trigger Change event
+
+        this.builder.onChange();
       }, bgcolor);
     }); // Section Background Gradient
 
@@ -3830,7 +3840,10 @@ class EditSection {
 
       const section = this.builder.activeSection;
       let gradientPicker = this.builder.editor.gradientpicker();
-      gradientPicker.open(section);
+      gradientPicker.open(section, () => {
+        //Trigger Change event
+        this.builder.onChange();
+      });
     });
   }
 
@@ -11065,7 +11078,10 @@ class EditBox {
         if (overlay.style.filter) {
           overlay.style.filter = overlay.style.filter.replace('grayscale(1)', '');
         }
-      }
+      } //Trigger Change event
+
+
+      this.builder.onChange();
     });
     const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
     chkBoxAddText.addEventListener('click', () => {
@@ -11121,6 +11137,9 @@ class EditBox {
         overlay.style.backgroundImage = ''; //remove gradient
 
         btnBoxBgColor.style.backgroundColor = s; // preview
+        //Trigger Change event
+
+        this.builder.onChange();
       }, bgcolor);
     }); // Box Background Gradient
 
@@ -11135,6 +11154,9 @@ class EditBox {
         activeBox.style.backgroundColor = ''; // clean old
 
         activeBox.style.backgroundImage = ''; // clean old
+        //Trigger Change event
+
+        this.builder.onChange();
       });
     }); // Box Overlay Color
 
@@ -11188,7 +11210,9 @@ class EditBox {
         }
 
         btnBoxOverlayColor.style.backgroundColor = s; // preview
+        //Trigger Change event
 
+        this.builder.onChange();
         return false;
       }, color); //Note: if color empty, colorpicker will stay with its previous color
     }); // Click to Open Media Select Dialog
@@ -89898,11 +89922,13 @@ var pace = {exports: {}};
         checkInterval: 100,
         selectors: ['body']
       },
-      eventLag: {
-        minSamples: 10,
-        sampleCount: 3,
-        lagThreshold: 3
-      },
+      eventLag: false,
+      // https://github.com/CodeByZach/pace/issues/510
+      // eventLag: {
+      // 	minSamples: 10,
+      // 	sampleCount: 3,
+      // 	lagThreshold: 50,//3
+      // },
       ajax: {
         trackMethods: ['GET'],
         trackWebSockets: true,
@@ -91123,11 +91149,12 @@ class ContentStuff {
             left: 1px;
             right: 1px;
           }
-          
+          /*
           .content-edit .is-section-tool,
           .content-edit .is-box-tool {
             display: none !important;
           }
+          */
           .content-edit .box-hover {
             outline: none !important;
           }
@@ -91184,10 +91211,13 @@ class ContentBox {
       enableContentStyle: true,
       disableStaticSection: false,
       framework: '',
+      // Old Template System:
       designUrl1: 'assets/designs/basic.js',
       designUrl2: 'assets/designs/examples.js',
       designPath: 'assets/designs/',
       designPathReplace: [],
+      defaultDesignCategory: 5,
+      // 101 for header
 
       /*
       Example:
@@ -91196,12 +91226,24 @@ class ContentBox {
            designPath: 'https://.../assets/designs/', 
            designPathReplace: ['assets/', 'https://.../assets/'], // Only if needed
       */
+      // New Template System:  => this will replace the previous approach (designUrl1, designUrl2, designPath, designPathReplace & defaultDesignCategory)
       templates: [],
       // ver.5.3
 
       /*
-      Example: => this will replace the previous approach (designUrl1, designUrl2, designPath & designPathReplace)
+      Example:
       templates: [
+          {
+              url: 'assets/simplestart/examples.js',
+              path: 'assets/simplestart/', 
+              pathReplace: []
+          },
+          {
+              url: 'assets/quickstart/examples.js',
+              path: 'assets/quickstart/', 
+              pathReplace: []
+          },
+           // If you want to include old templates:
           {
               url: 'assets/designs/basic.js',
               path: 'assets/designs/', 
@@ -91212,6 +91254,7 @@ class ContentBox {
               path: 'assets/designs/', 
               pathReplace: []
           },
+           // If you're using Writing Set collection:
           {
               url: 'assets/writing-set/basic.js',
               path: 'assets/writing-set/',
@@ -91219,26 +91262,33 @@ class ContentBox {
           }
       ]
       */
-      featuredCategories: [{
-        id: 5,
-        name: 'Random'
-      }, // If apos ' is used, use: \\\'
+      featuredCategories: [// to configure your own, please see the template's JSON file (eg. templates.js)
       {
         id: 1,
+        designId: 1,
         name: 'Basic'
-      }, {
+      }, // If name has apos ' => use: \\\'
+      {
         id: 2,
+        designId: 1,
         name: 'Slider'
       }, {
-        id: 101,
+        id: 1,
+        designId: 2,
         name: 'Header'
       }, {
-        id: 118,
+        id: 2,
+        designId: 2,
         name: 'Article'
       }, {
-        id: 102,
+        id: 3,
+        designId: 2,
         name: 'Photos'
       }],
+      defaultCategory: {
+        id: 1,
+        designId: 1
+      },
       templateThumbnailSize: '',
       //small, medium, large or '' (empty => dynamic)
       // ContentBuilder
@@ -91343,8 +91393,6 @@ class ContentBox {
       animatedSorting: false,
       dragWithoutHandle: false,
       addButtonPlacement: '',
-      defaultDesignCategory: 5,
-      // 101 for header
       snippetCategories: [[120, 'Basic'], [118, 'Article'], [101, 'Headline'], [119, 'Buttons'], [102, 'Photos'], [103, 'Profile'], [116, 'Contact'], [104, 'Products'], [105, 'Features'], [106, 'Process'], [107, 'Pricing'], [108, 'Skills'], [109, 'Achievements'], [110, 'Quotes'], [111, 'Partners'], [112, 'As Featured On'], [113, 'Page Not Found'], [114, 'Coming Soon'], [115, 'Help, FAQ']],
       defaultSnippetCategory: 101,
       outlineMode: '',
@@ -94064,7 +94112,7 @@ class ContentBox {
       const EXPIRE_DATE = JSON.parse(localStorage.getItem(NAMESPACE)).expiresOn;
 
       if (Date.now() > EXPIRE_DATE) {
-        console.log('session expired');
+        // console.log('session expired');
         showProgress = true; // reset
 
         localStorage.setItem(NAMESPACE, JSON.stringify({
@@ -94288,8 +94336,8 @@ class ContentBox {
           let url = link.getAttribute('href');
 
           if (url) {
-            // Will go to the link
             if (url.indexOf('#') === 0) {
+              // Will go to bookmark
               if (url.indexOf('#section') === 0) {
                 let num = url.replace('#section', '');
 
@@ -94324,12 +94372,17 @@ class ContentBox {
                 } catch (e) {// Do Nothing
                 }
               }
+            } else {
+              // Prevent to go to the link
+              e.preventDefault();
+              e.stopImmediatePropagation();
             }
-          } // if(link.closest('.is-menu-search'))  return;
-          // if(link.closest('.is-menu-toggle'))  return;
-          // e.preventDefault();
-          // e.stopImmediatePropagation();
-
+          } else {
+            if (link.closest('.is-menu-search')) ; else {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+            }
+          }
         });
       });
     }