@innovastudio/contentbox 1.4.16 → 1.4.17

package/package.json

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

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++;
             });
         })
         
@@ -91184,10 +91190,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 +91205,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 +91233,7 @@ class ContentBox {
               path: 'assets/designs/', 
               pathReplace: []
           },
+           // If you're using Writing Set collection:
           {
               url: 'assets/writing-set/basic.js',
               path: 'assets/writing-set/',
@@ -91220,25 +91242,31 @@ class ContentBox {
       ]
       */
       featuredCategories: [{
-        id: 5,
-        name: 'Random'
-      }, // If apos ' is used, use: \\\'
-      {
         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 +91371,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: '',