@innovastudio/contentbox 1.4.3 → 1.4.4

package/public/contentbox/contentbox.esm.js

@@ -499,7 +499,7 @@ class SideBar {
         sideIndex++;
       });
       html += '</div>';
-      html += '' + '<div id="divSidebarSections" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
+      html += '' + '<div id="divSidebarSections" class="is-sidebar-content ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
     } else {
       html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
     }
@@ -762,8 +762,14 @@ class SideBar {
       var doc = ifr.contentWindow.document;
 
       if (doc.body.innerHTML === '') {
-        doc.open();
-        doc.write(this.getTemplatesHtml());
+        doc.open(); // doc.write(this.getTemplatesHtml());
+
+        if (this.builder.templates.length === 0) {
+          doc.write(this.getTemplatesHtml_OLD());
+        } else {
+          doc.write(this.getTemplatesHtml());
+        }
+
         doc.close();
       }
     } else if (designPath) {
@@ -1121,6 +1127,840 @@ class SideBar {
   }
 
   getTemplatesHtml() {
+    let sTemplateJSON = '';
+    this.builder.templateJSON.forEach(item => {
+      sTemplateJSON += `{
+                url: '${item.url}',
+                path: '${item.path}',
+                pathReplace: '${item.pathReplace}',
+            },`;
+    });
+    let sTemplates = '';
+    this.builder.templates.forEach(item => {
+      sTemplates += `{
+                url: '${item.url}',
+                path: '${item.path}',
+                pathReplace: '${item.pathReplace}',
+            },`;
+    });
+    let sCategories = '';
+    this.builder.featuredCategories.forEach(item => {
+      sCategories += `{
+                id: '${item.id}',
+                name: '${item.name}',
+            },`;
+    });
+    let thumbWidth = '';
+    let thumbMargin = '';
+
+    if (this.builder.templateThumbnailSize === 'small') {
+      thumbWidth = '250px';
+      thumbMargin = '30px 0 0 30px';
+    } else if (this.builder.templateThumbnailSize === 'medium') {
+      thumbWidth = '350px';
+      thumbMargin = '40px 0 0 40px';
+    } else {
+      thumbWidth = '450px'; // '500px';
+
+      thumbMargin = '50px 0 0 50px'; // '62px 0 0 60px';
+    }
+
+    let html = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="utf-8">
+            <title>Browse</title>
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <meta name="description" content="">
+            <link rel="shortcut icon" href="#" />
+            <style>
+                body {
+                    margin: 0;
+                    background: #fff;
+                    font-family: sans-serif;
+                    font-weight: 300;
+                }
+                h2 {
+                    font-weight: 300;
+                }
+                button {
+                    cursor: pointer;
+                    border: none;
+                    background: #fdfdfd;
+                    padding: 12px 25px;
+                    border-radius: 500px;
+                    font-size: 11px;
+                    text-transform: uppercase;
+                    letter-spacing: 1px;;
+                    color: #333;
+                }
+                button.on {
+                    background: #f5f5f5;
+                }
+        
+                .featured-categories {
+                    background-color: #f5f5f5;
+                    position: absolute;
+                    width: 100%;
+                    height: 88px;
+                    z-index: 1;
+                    padding: 14px 15px 0 25px;
+                    box-sizing: border-box;
+                    /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */
+                }
+                .featured-categories button {
+                    margin: 10px 15px 0 0;
+                    font-size: 11px;
+                }
+        
+                .is-design-list {
+                    position: fixed;
+                    top: 0px;
+                    left: 0px;
+                    border-top: transparent 88px solid;
+                    width: 100%;
+                    height: 100%;
+                    overflow-y: auto;
+                    padding: 0px 0px 30px 0px;
+                    box-sizing: border-box;
+                    overflow: auto;
+                    transition: all 200ms ease;
+                }
+                .is-design-list > button {
+                    position: relative;
+                    width:  ${thumbWidth};;
+                    overflow: hidden;
+                    margin: ${thumbMargin};
+                    cursor: pointer;
+                    display: inline-block;
+                    padding: 0px;
+                    border: rgba(219, 219, 219, 0.39) 1px solid;
+                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+                    border-radius: 2px;
+                }
+                .is-design-list > button img {
+                    box-shadow: none;
+                    opacity: 1;
+                    display: block;
+                    box-sizing: border-box;
+                    transition: all 0.2s ease-in-out;
+                    max-width: 500px;
+                    width: 100%
+                }
+                .is-design-list > button .is-overlay {
+                    position: absolute;
+                    top:0px;
+                    left:0px;
+                    width:100%;
+                    height:100%;
+                }
+                .is-design-list > button .is-overlay:after {
+                    background: rgba(0, 0, 0, 0.05);
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    transition: all 0.2s ease-in-out;
+                    opacity: 0;
+                }
+                .is-design-list > button:hover .is-overlay:after {
+                    opacity: 0.5;
+                }
+        
+                .mega-menu {
+                    display: none;
+                    transform: translateY(-100%);
+                    background: #f5f5f5;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                    position: fixed;
+                    top: 88px;
+                    left: 0;
+                    right: 0;
+                    width: 100%;
+                    height: auto;
+                    z-index: 1;
+                    padding: 10px 50px 40px 40px;
+                    box-sizing: border-box;
+                    transition: all 300ms ease;
+                    min-width:400px;
+                    /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */
+                }
+                .mega-menu.active {
+                    opacity: 1;
+                    transform: scale(1);
+                    transform: translateY(0);
+                }
+                .mega-menu h2 {
+                    margin-top:30px;
+                    font-size: 21px
+                }
+                .mega-menu button {
+                    margin:15px 15px 0 0;
+                }
+                .mega-menu .close {
+                    position: absolute;
+                    top: 0px; right: 0px;
+                    background: transparent;
+                    width: 50px;
+                    height: 50px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 2px;;
+                }
+            </style>
+        </head>
+        <body style="touch-action: pan-y">`;
+    html += `
+        <div class="mega-menu">
+            <button class="close" tabindex="0"><svg style="width:40px;height:40px;flex:none;"><use xlink:href="#iconclose"></use></svg></button>
+        
+            <div class="mega-menu-content">
+            </div>
+        </div>
+        
+        <div class="featured-categories">
+        </div>
+        
+        <div class="is-design-list">
+        </div>
+        
+        
+        <svg width="0" height="0" style="position:absolute;display:none;">
+            <defs>
+                <symbol viewBox="0 0 24 24" id="iconclose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                </symbol>
+            </defs>
+        </svg>
+        
+        <script>
+            var template_list = [];
+        </script>
+        <!-- <script src="basic.js" type="text/javascript"></script>
+        <script src="examples.js" type="text/javascript"></script> -->
+        
+        <script>
+        
+        // Configuration
+        const featuredCategories = [
+            ${sCategories}
+        ];
+        const defaultCat = ${this.builder.defaultDesignCategory};
+        const navbar = ${this.builder.navbar ? 'true' : 'false'};
+
+        const slider = '${this.builder.slider}';
+
+        const framework =  '${this.builder.framework}'; 
+        const contentStylePath = '${this.builder.contentStylePath}'; 
+        
+        let templates = [
+            ${sTemplates}
+        ];
+        
+        let templateJSON = [
+            ${sTemplateJSON}
+        ];
+        // /Configuration
+
+        if(templates.length > 0) templateJSON = [...templates];
+        
+        const loadJsFiles = (list, callback) => {
+            if(list.length===0) {
+                return;
+            } else {
+                const url = list[0].url;
+                const script = document.createElement('script');
+                script.src = url; 
+                script.async = true;
+                script.onload = () => {
+                    callback(list[0]);
+                    loadJsFiles(list.slice(1), callback);
+                };
+                document.body.appendChild(script);
+            } 
+        }
+        
+        const imageObserver = new IntersectionObserver((entries, imgObserver) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const lazyImage = entry.target
+                    // console.log("lazy loading ", lazyImage)
+                    lazyImage.src = lazyImage.dataset.src
+                    lazyImage.classList.remove("lzy-img");
+                    imgObserver.unobserve(lazyImage);
+                }
+            })
+        });
+        
+        const makeid = () => { //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
+            var text = "";
+            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+            for (var i = 0; i < 2; i++)
+                text += possible.charAt(Math.floor(Math.random() * possible.length));
+        
+            var text2 = "";
+            var possible2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+            for (var i = 0; i < 5; i++)
+                text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
+        
+            return text + text2;
+        }
+        
+        const addDesign = (designid) => {
+
+            const wrapper = parent._cb.doc.querySelector('.is-wrapper');
+        
+            let nIndex = 0;
+            template_list.forEach(gallery=>{
+                let designs = gallery.designs;
+                designs.forEach(item=>{
+                    
+                    item.id = nIndex; //Give id
+        
+                    if(nIndex===parseInt(designid)) {
+                        // alert(item.html);
+                        // alert(gallery.path);
+                        // alert(gallery.pathReplace);
+
+                        let html = item.html;
+                        let googleFonts = item.googleFonts;
+                        let contentCss = item.contentCss;
+                        let contentClass = item.contentClass;
+        
+                        let designPath = gallery.path;
+                        let snippetPathReplace = gallery.pathReplace;
+        
+                        //To Tailwind
+                        if (framework == 'tailwind') {
+                            html = html.replace(new RegExp(' container', 'g'), ' container');
+                            html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
+                            html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
+                            html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');
+                            html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');
+                            html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');
+                            html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed
+                            html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');
+                            html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');
+                            html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');
+                            html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');
+                        }
+                                    
+                        //To Bootstrap
+                        if (framework == 'bootstrap') {
+                            html = html.replace(new RegExp(' container', 'g'), ' container-fluid');
+                            html = html.replace(new RegExp('row clearfix', 'g'), 'row');
+                            html = html.replace(new RegExp('column full', 'g'), 'col-md-12');
+                            html = html.replace(new RegExp('column half', 'g'), 'col-md-6');
+                            html = html.replace(new RegExp('column third', 'g'), 'col-md-4');
+                            html = html.replace(new RegExp('column fourth', 'g'), 'col-md-3');
+                            html = html.replace(new RegExp('column fifth', 'g'), 'col-md-2');
+                            html = html.replace(new RegExp('column sixth', 'g'), 'col-md-2');
+                            html = html.replace(new RegExp('column two-third', 'g'), 'col-md-8');
+                            html = html.replace(new RegExp('column two-fourth', 'g'), 'col-md-9');
+                            html = html.replace(new RegExp('column two-sixth', 'g'), 'col-md-10');
+                            html = html.replace(new RegExp('btn btn-primary', 'g'), 'btn btn-primary btn-lg');
+                            html = html.replace(new RegExp('btn btn-default', 'g'), 'btn btn-default btn-lg');
+                        }`;
+    html += `
+                        //To Foundation
+                        if (framework == 'foundation') {
+                            //html = html.replace(new RegExp(' container', 'g'), ' container');
+                            html = html.replace(new RegExp('row clearfix', 'g'), 'row');
+                            html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');
+                            html = html.replace(new RegExp('column half', 'g'), 'large-6 columns');
+                            html = html.replace(new RegExp('column third', 'g'), 'large-4 columns');
+                            html = html.replace(new RegExp('column fourth', 'g'), 'large-3 columns');
+                            html = html.replace(new RegExp('column fifth', 'g'), 'large-2 columns');
+                            html = html.replace(new RegExp('column sixth', 'g'), 'large-2 columns');
+                            html = html.replace(new RegExp('column two-third', 'g'), 'large-8 columns');
+                            html = html.replace(new RegExp('column two-fourth', 'g'), 'large-9 columns');
+                            html = html.replace(new RegExp('column two-sixth', 'g'), 'large-10 columns');
+                            html = html.replace(new RegExp('btn btn-primary', 'g'), 'button');
+                            html = html.replace(new RegExp('btn btn-default', 'g'), 'secondary button');
+                        }
+        
+                        //To UIKit
+                        if (framework == 'uikit') {
+                            html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');
+                            html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');
+                            html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');
+                            html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');
+                            html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');
+                            html = html.replace(new RegExp('column fourth', 'g'), 'uk-width-1-4');
+                            html = html.replace(new RegExp('column fifth', 'g'), 'uk-width-1-5');
+                            html = html.replace(new RegExp('column sixth', 'g'), 'uk-width-1-6');
+                            html = html.replace(new RegExp('column two-third', 'g'), 'uk-width-2-3');
+                            html = html.replace(new RegExp('column two-fourth', 'g'), 'uk-width-3-4');
+                            html = html.replace(new RegExp('column two-sixth', 'g'), 'uk-width-5-6');
+                            html = html.replace(new RegExp('btn btn-primary', 'g'), 'uk-button uk-button-primary uk-button-large');
+                            html = html.replace(new RegExp('btn btn-default', 'g'), 'uk-button uk-button-large');
+                        }
+        
+                        //To Material
+                        if (framework == 'material') {
+                            html = html.replace(new RegExp(' container', 'g'), '');
+                            html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');
+                            html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');
+                            html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');
+                            html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');
+                            html = html.replace(new RegExp('column fourth', 'g'), 'mdl-cell mdl-cell--3-col');
+                            html = html.replace(new RegExp('column fifth', 'g'), 'mdl-cell mdl-cell--2-col');
+                            html = html.replace(new RegExp('column sixth', 'g'), 'mdl-cell mdl-cell--2-col');
+                            html = html.replace(new RegExp('column two-third', 'g'), 'mdl-cell mdl-cell--8-col');
+                            html = html.replace(new RegExp('column two-fourth', 'g'), 'mdl-cell mdl-cell--9-col');
+                            html = html.replace(new RegExp('column two-sixth', 'g'), 'mdl-cell mdl-cell--10-col');
+                            html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');
+                            html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');
+                        }
+        
+                        html = html.replace(/{id}/g, makeid());
+
+                        if(snippetPathReplace.length>0) {
+                            if (snippetPathReplace[0] != '') {
+                                var regex = new RegExp(snippetPathReplace[0], 'g');
+                                html = html.replace(regex, snippetPathReplace[1]);
+                            }
+                        }
+        
+                        html = html.replace(/\\[%IMAGE_PATH%\\]/g, designPath);
+                        html = html.replace(/%5B%25IMAGE_PATH%25%5D/g, designPath); //If [%IMAGE_PATH%] is encoded (inside data-html)
+
+                        //Add html
+                        parent.contentbox.addIdea(html);
+        
+                        //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) wrapper.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+                    }
+        
+                    nIndex++;
+                });
+            });
+        }
+        
+        const showDesigns = (catId) => {
+        
+            const designList = document.querySelector('.is-design-list');
+            designList.style.opacity = 0;
+            setTimeout(()=>{
+                designList.innerHTML = '';
+                designList.style.opacity = 1;
+        
+                let nIndex = 0;
+        
+                template_list.forEach(gallery=>{
+                    let designs = gallery.designs;
+                    designs.forEach(item=>{
+                        let isSelected = false;
+                        let catSplit = item.category.split(',');
+                        for (let j = 0; j < catSplit.length; j++) {
+                            if (parseInt(catSplit[j]) === parseInt(catId)) {
+                                isSelected = true;
+                            }
+                        }
+                        
+                        item.id = nIndex; //Give id
+        
+                        if (isSelected) {
+        
+                            let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat=""' + item.category + '">' +
+                                '<img class="lzy-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" data-src="' + gallery.path + item.thumbnail + '">' +
+                                '<span class="is-overlay"></span>' +
+                            '</button>';
+                            
+                            if(item.type === 'glide' || item.type === 'slick') {
+                                if(slider==='glide') {
+                                    if(item.type === 'glide') {
+                                        designList.insertAdjacentHTML('beforeend', html);
+                                        const btn = designList.querySelector('[data-id="' + item.id + '"]');
+                                        btn.addEventListener('click', (e)=>{
+                                            const designid = btn.getAttribute('data-id');
+                                            addDesign(designid);
+                                        });
+                                    } 
+                                } else if(slider==='slick') {
+                                    if(item.type === 'slick') {
+                                        designList.insertAdjacentHTML('beforeend', html);
+                                        const btn = designList.querySelector('[data-id="' + item.id + '"]');
+                                        btn.addEventListener('click', (e)=>{
+                                            const designid = btn.getAttribute('data-id');
+                                            addDesign(designid);
+                                        });
+                                    } 
+                                } else if(slider==='all') {
+                                    designList.insertAdjacentHTML('beforeend', html);
+                                    const btn = designList.querySelector('[data-id="' + item.id + '"]');
+                                    btn.addEventListener('click', (e)=>{
+                                        const designid = btn.getAttribute('data-id');
+                                        addDesign(designid);
+                                    });
+                                } 
+                            } else if(item.type === 'navbar' ) {
+                                if(navbar) {
+                                    designList.insertAdjacentHTML('beforeend', html);
+                                    const btn = designList.querySelector('[data-id="' + item.id + '"]');
+                                    btn.addEventListener('click', (e)=>{
+                                        const designid = btn.getAttribute('data-id');
+                                        addDesign(designid);
+                                    });
+                                }
+                            } else {
+                                designList.insertAdjacentHTML('beforeend', html);
+                                const btn = designList.querySelector('[data-id="' + item.id + '"]');
+                                btn.addEventListener('click', (e)=>{
+                                    const designid = btn.getAttribute('data-id');
+                                    addDesign(designid);
+                                });
+                            }
+                        }`;
+    html += `
+                        nIndex++;
+                    });
+                });
+        
+                const arr = document.querySelectorAll('img.lzy-img')
+                arr.forEach((v) => {
+                    imageObserver.observe(v);
+                });
+        
+                closeMegaMenu();
+        
+            }, 200);
+        
+            // Set active Button
+            const menu = document.querySelector('.mega-menu');
+            menu.setAttribute('data-active-cat', catId);
+            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 + '"]');
+            if(btn1) btn1.classList.add('on');
+            if(btn2) btn2.classList.add('on');
+        }
+        
+        const renderMegaMenu = () => {
+        
+            const menu = document.querySelector('.mega-menu');
+            const menuContent = document.querySelector('.mega-menu-content');
+            menuContent.innerHTML = '';
+        
+            let catNum = 0;
+            template_list.forEach(gallery=>{
+                let categories = gallery.categories;
+                let html = '<h2>' + 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+'">'+categoryItem.name+'</button>';
+                    catList.insertAdjacentHTML('beforeend', html);
+                    const btn = catList.querySelector('[data-cat="'+categoryItem.id+'"]');
+                    btn.addEventListener('click', (e)=>{
+                        const catId = btn.getAttribute('data-cat');
+                        showDesigns(catId);
+        
+                        closeMegaMenu();
+                    });
+                });
+                
+                catNum++;
+            });
+        
+            // Set active Button
+            const catId = menu.getAttribute('data-active-cat');
+            if(catId) {
+                const btnActive = menu.querySelector('button.on');
+                if(btnActive) btnActive.classList.remove('on');
+                const btn = menu.querySelector('[data-cat="' + catId + '"]');
+                if(btn) btn.classList.add('on');
+            }
+        }
+        
+        const handleClick = (e) => {
+            if(!e.target.closest('.mega-menu') && !e.target.closest('[data-cat="0"]')) { 
+                closeMegaMenu();
+            }
+        };
+        
+        const showMegaMenu = () => {
+            const menu = document.querySelector('.mega-menu');
+            menu.style.display = 'block';
+            setTimeout(()=>{
+                menu.classList.add('active');
+                const menuClose = menu.querySelector('.close');
+                menuClose.focus();
+            }, 10);
+            const btn = document.querySelector('[data-cat="0"]');
+            btn.classList.add('on');
+        
+            document.addEventListener('click', handleClick); // handleClick
+        }
+        
+        const closeMegaMenu = () => {
+            const menu = document.querySelector('.mega-menu.active');
+            if(!menu) return;
+            menu.classList.remove('active');
+            setTimeout(()=>{
+                menu.style.display = '';
+            }, 300);
+            const btn = document.querySelector('[data-cat="0"]');
+            btn.classList.remove('on');
+        
+            document.removeEventListener('keydown', handleClick); // handleClick
+        }
+        
+        const renderResize = () => {
+            const btns = document.querySelectorAll('.featured-categories button');
+            let viewportWidth = document.body.clientWidth;
+            if(viewportWidth < 1024 && viewportWidth>=800) {
+                let n = 0;
+                btns.forEach(btn=>{
+                    if(n>=5) {
+                        btns[n].style.display = 'none';
+                    } else {
+                        btns[n].style.display = '';
+                    }
+                    n++;
+                });
+            } else if(viewportWidth < 800) {
+                let n = 0;
+                btns.forEach(btn=>{
+                    if(n>=2) {
+                        btns[n].style.display = 'none';
+                    } else {
+                        btns[n].style.display = '';
+                    }
+                    n++;
+                });
+            } else {
+                let n = 0;
+                btns.forEach(btn=>{
+                    btns[n].style.display = '';
+                    n++;
+                });
+            }
+            btns[btns.length-1].style.display = '';
+        };
+
+        const renderFeaturedCategories= () => {
+            let html = '';
+            const div = document.querySelector('.featured-categories');
+            featuredCategories.forEach(item=>{
+                html += '<button data-cat="'+item.id+'">'+item.name+'</button>';
+            });
+            html += '<button data-cat="0">All Categories</button>';
+            div.insertAdjacentHTML('beforeend', html);
+        
+            const menu = document.querySelector('.mega-menu');
+            const btns = div.querySelectorAll('[data-cat]');
+            btns.forEach(btn=>{
+                btn.addEventListener('click', (e)=>{
+                    const catId = btn.getAttribute('data-cat');
+                    if(catId==='0') {
+                        // Show All Categories' Mega Menu
+                        showMegaMenu();
+                    } else {
+                        showDesigns(catId);
+                    }
+                });
+            });`;
+    html += `
+            const menuClose = menu.querySelector('.close');
+            menuClose.addEventListener('click',()=>{
+                closeMegaMenu();
+            });
+
+            renderResize();
+        }
+        
+        document.addEventListener("DOMContentLoaded", function() {
+        
+            renderFeaturedCategories();
+        
+            renderMegaMenu();
+        
+            showDesigns(defaultCat); // If not ready (not loaded yet) will show empty
+        
+            loadJsFiles(templateJSON, (template)=>{
+                // console.log(template)
+                const templateAdded = template_list[template_list.length-1];
+                templateAdded.path = template.path;
+                templateAdded.pathReplace = template.pathReplace;
+                // console.log(templateAdded);
+        
+                renderMegaMenu();
+        
+                const designList = document.querySelector('.is-design-list');
+                if(designList.innerHTML.trim()==='') { // first load
+                    const cats = templateAdded.categories;
+                    cats.forEach(cat=>{
+                        if(parseInt(cat.id)===defaultCat) {
+                            showDesigns(defaultCat);
+                        }
+                    });
+                }
+            });
+        })
+        
+        
+        document.addEventListener('keydown', (e)=>{
+            if(e.keyCode === 27) { // escape key
+        
+                const menu = document.querySelector('.mega-menu.active');
+                if(menu) {
+                    closeMegaMenu();
+        
+                    e.preventDefault();
+                    return;
+                } 
+            }
+        });
+
+        window.addEventListener('resize', ()=>{
+            renderResize();
+        });
+
+        applyParentStyles();
+                  
+        // Style stuff
+        function applyParentStyles() {
+            var cssString = '' +
+                'body {' +
+                    'background: ' + parent._cb.styleSnippetBackground + ';' +
+                    'color: ' + parent._cb.styleSnippetColor + ';' +
+                    'margin: 0;' +
+                '}' +
+
+                'button {' +
+                    'background: ' + parent._cb.styleSnippetTabItemBackground + ';' +
+                    'color: ' + parent._cb.styleSnippetTabItemColor + ';' +
+                '}' +
+                'button.on {' +
+                    'background: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +
+                '}' +
+                '.featured-categories {' +
+                    'background-color: ' + parent._cb.styleSnippetTabsBackground + ';' +
+                '}' +
+
+                '.dark .is-design-list > button {' +
+                    'border: transparent 1px solid;' +
+                '}' +
+
+                '.mega-menu {' +
+                    'background: ' + parent._cb.styleSnippetTabsBackground + ';' +
+                '}' +
+
+                '/* Scrollbar for modal */' +
+
+                '/* Darker color, because background for snippet thumbnails is always light. */' +
+                '.dark * {' +
+                    'scrollbar-width: thin;' +
+                    'scrollbar-color: rgb(78 78 78 / 62%) auto;' +
+                '}' +
+                '.dark *::-webkit-scrollbar {' +
+                    'width: 12px;' +
+                '}' +
+                '.dark *::-webkit-scrollbar-track {' +
+                    'background: transparent;' +
+                '}' +
+                '.dark *::-webkit-scrollbar-thumb {' +
+                    'background-color:rgb(78 78 78 / 62%);' +
+                '}' +
+
+                '.colored-dark * {' +
+                    'scrollbar-width: thin;' +
+                    'scrollbar-color: rgb(100, 100, 100) auto;' +
+                '}' +
+                '.colored-dark *::-webkit-scrollbar {' +
+                    'width: 12px;' +
+                '}' +
+                '.colored-dark *::-webkit-scrollbar-track {' +
+                    'background: transparent;' +
+                '}' +
+                '.colored-dark *::-webkit-scrollbar-thumb {' +
+                    'background-color:rgb(100, 100, 100);' +
+                '}' +
+
+                '.colored * {' +
+                    'scrollbar-width: thin;' +
+                    'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
+                '}' +
+                '.colored *::-webkit-scrollbar {' +
+                    'width: 12px;' +
+                '}' +
+                '.colored *::-webkit-scrollbar-track {' +
+                    'background: transparent;' +
+                '}' +
+                '.colored *::-webkit-scrollbar-thumb {' +
+                    'background-color: rgba(0, 0, 0, 0.4);' +
+                '}' +
+
+                '.light * {' +
+                    'scrollbar-width: thin;' +
+                    'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
+                '}' +
+                '.light *::-webkit-scrollbar {' +
+                    'width: 12px;' +
+                '}' +
+                '.light *::-webkit-scrollbar-track {' +
+                    'background: transparent;' +
+                '}' +
+                '.light *::-webkit-scrollbar-thumb {' +
+                    'background-color: rgba(0, 0, 0, 0.4);' +
+                '}' +
+        
+                'svg {' +
+                    'fill: ' + parent._cb.styleSnippetColor + ';' +
+                '}' +
+
+                '.dark .is-design-list>div .is-overlay:after {' +
+                    'background: rgb(78 78 78 / 13%);' +
+                '}' +
+                '';
+            
+            let themestyle = document.querySelector('[data-theme-style]');
+            if(themestyle) themestyle.parentNode.removeChild(themestyle);
+            
+            var style = document.createElement("style");
+            style.setAttribute('data-theme-style','');
+            style.type = "text/css";
+            style.innerHTML = cssString;
+            document.head.appendChild(style);
+
+            if(parent._cb.styleDark) {
+                document.body.setAttribute('class', 'dark');
+            } else if(parent._cb.styleColored) {
+                document.body.setAttribute('class', 'colored');
+            } else if(parent._cb.styleColoredDark) {
+                document.body.setAttribute('class', 'colored-dark');
+            } else if(parent._cb.styleLight) {
+                document.body.setAttribute('class', 'light');
+            } else {
+                document.body.setAttribute('class', '');
+            }
+        }
+        </script>
+        </body>
+        </html>
+        `;
+    return html;
+  }
+
+  getTemplatesHtml_OLD() {
     const designUrl1 = this.builder.designUrl1;
     const designUrl2 = this.builder.designUrl2;
     let html = `
@@ -89783,11 +90623,59 @@ class ContentBox {
       designUrl2: 'assets/designs/examples.js',
       designPath: 'assets/designs/',
       designPathReplace: [],
-      // Example:
-      //      designUrl1: 'https://.../assets/designs/basic.js', 
-      //      designUrl2: 'https://.../assets/designs/examples.js', 
-      //      designPath: 'https://.../assets/designs/', 
-      //      designPathReplace: ['assets/', 'https://.../assets/'],
+
+      /*
+      Example:
+           designUrl1: 'https://.../assets/designs/basic.js', 
+           designUrl2: 'https://.../assets/designs/examples.js', 
+           designPath: 'https://.../assets/designs/', 
+           designPathReplace: ['assets/', 'https://.../assets/'],
+      */
+      templates: [],
+      // ver.5.3
+
+      /*
+      Example: => this will replace the previous approach (designUrl1, designUrl2, designPath & designPathReplace)
+      templates: [
+          {
+              url: 'assets/designs/basic.js',
+              path: 'assets/designs/', 
+              pathReplace: []
+          },
+          {
+              url: 'assets/designs/examples.js',
+              path: 'assets/designs/', 
+              pathReplace: []
+          },
+          {
+              url: 'assets/writing-set/basic.js',
+              path: 'assets/writing-set/',
+              pathReplace: []
+          }
+      ]
+      */
+      featuredCategories: [{
+        id: 5,
+        name: 'Random'
+      }, // If apos ' is used, use: \\\'
+      {
+        id: 1,
+        name: 'Basic'
+      }, {
+        id: 2,
+        name: 'Slider'
+      }, {
+        id: 101,
+        name: 'Header'
+      }, {
+        id: 118,
+        name: 'Article'
+      }, {
+        id: 102,
+        name: 'Photos'
+      }],
+      templateThumbnailSize: '',
+      //small, medium
       // ContentBuilder
       scriptPath: '',
       snippetUrl: 'assets/minimalist-blocks/content.js',
@@ -92153,6 +93041,19 @@ class ContentBox {
       contentHtmlEnd: '</div></div></div>'
     };
     this.settings = Object.assign(this, defaults, settings);
+    this.templateJSON = [{
+      url: this.settings.designUrl1,
+      path: this.settings.designPath,
+      pathReplace: this.settings.designPathReplace
+    }, {
+      url: this.settings.designUrl2,
+      path: this.settings.designPath,
+      pathReplace: this.settings.designPathReplace
+    }];
+
+    if (this.settings.templates.length !== 0 && this.settings.templateThumbnailSize === '') {
+      this.settings.templateThumbnailSize = 'large';
+    }
 
     if (this.settings.imageSelect !== '') {
       this.settings.imageselect = this.settings.imageSelect;