@innovastudio/contentbox 1.4.2 → 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 = `
@@ -78403,22 +79243,20 @@ class Rte {
 
       this.builder.setZoomOnArea(); // hide tools
 
-      /*
-      let tools = this.builderStuff.querySelectorAll('.is-tool');
-      Array.prototype.forEach.call(tools, (tool) => {
-          tool.style.display = '';
+      let tools = this.builder.doc.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, tool => {
+        tool.style.display = '';
       });
-       let tool = this.builderStuff.querySelector('.is-column-tool');
+      let tool = this.builder.doc.querySelector('.is-column-tool');
       tool.style.display = 'none';
-       tools = this.builder.doc.querySelectorAll('.is-row-tool');
-      tools.forEach(tool=>{
-          tool.style.display = 'none';
+      tools = this.builder.doc.querySelectorAll('.is-row-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
       });
-       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-      tools.forEach(tool=>{
-          tool.style.opacity = 0;
+      tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool => {
+        tool.style.opacity = 0;
       });
-      */
 
       if (this.builder.onZoom) {
         let val = this.inpZoomSlider.value;
@@ -78440,23 +79278,27 @@ class Rte {
           });
         } // show & reposition
 
-        /*
+
         this.builder.elmTool.repositionElementTool();
-         let col = this.builder.activeCol;
-        let tool = this.builderStuff.querySelector('.is-column-tool');
+        let col = this.builder.activeCol;
+        let tool = this.builder.doc.querySelector('.is-column-tool');
         tool.style.display = '';
-        tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
-        tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
-         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
-        tools.forEach(tool=>{
-            tool.style.display = '';
+        tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+        tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        let tools = this.builder.doc.querySelectorAll('.is-row-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
         });
-         tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-        tools.forEach(tool=>{
-            tool.style.opacity = '';
+        tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+        tools.forEach(tool => {
+          tool.style.opacity = '';
         });
-        */
 
+        if (this.builder.onZoomEnd) {
+          let val = this.rteZoomSlider.value;
+          let scale = val / 100;
+          this.builder.onZoomEnd(scale);
+        }
 
         if (this.builder.onZoomEnd) {
           let val = this.inpZoomSlider.value;
@@ -79616,6 +80458,7 @@ class Rte {
             }
           }
 
+          if (this.builder.activeElement) this.builder.activeElement.style.letterSpacing = '';
           if (newClassName === classes.tracking_000) newClassName = ''; // clear for normal tracking
 
           dom.execCommandClass(newClassName, classes);
@@ -82256,6 +83099,7 @@ function isAChildOf(parent, child) {
 class Lightbox {
   constructor(builder) {
     this.builder = builder;
+    this.arrow = this.builder.lightboxArrow;
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     this.util = util;
@@ -82270,42 +83114,76 @@ class Lightbox {
     // } 
     // this.builderStuff = builderStuff;
 
-    this.id = this.makeid();
+    this.id = this.makeid(); // let html = `
+    //     <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;">
+    //             <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+    //             <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    //             </div>
+    //         </div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <svg width="0" height="0" style="position:absolute;display:none;">
+    //         <defs>
+    //             <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" 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>
+    // `;
+
     let html = `
-            <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;">
-                    <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
-                    <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+                <div class="is-lightbox lightbox-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                    <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button">
+                        <svg><use xlink:href="#__${this.id}svgLightboxClose"></use></svg>
+                    </button>
+
+                    <div class="lightbox-content" style="width:100%;">
                     </div>
+
+                    <button class="cmd-lightbox-prev" title="${util.out('Previous')}" type="button" style="top:50%;left:3px;">
+                        <svg><use xlink:href="#__${this.id}svgLightboxLeft"></use></svg>
+                    </button>
+                    <button class="cmd-lightbox-next" title="${util.out('Next')}" type="button" style="top:50%;left:auto;right:3px">
+                        <svg><use xlink:href="#__${this.id}svgLightboxRight"></use></svg>
+                    </button>
                 </div>
-            </div>
-            <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <svg width="0" height="0" style="position:absolute;display:none;">
-                <defs>
-                    <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" 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>
-        `;
+
+                <svg width="0" height="0" style="position:absolute;display:none;">
+                    <defs>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxClose" 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>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxLeft" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="15 6 9 12 15 18"></polyline>
+                        </symbol>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxRight" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="9 6 15 12 9 18"></polyline>
+                        </symbol>
+                    </defs>
+                </svg>
+            `;
     dom.appendHtml(this.builderStuff, html);
 
     const close = () => {
-      let lightbox = document.querySelector('.is-lightbox.active');
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
       dom.removeClass(lightbox, 'active');
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
       btnClose.style.opacity = 0;
@@ -82325,22 +83203,70 @@ class Lightbox {
       }, 300);
     };
 
-    const handleItemKeyDown = e => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    const prev = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          let prevIndex;
+          prevIndex = (currentIndex - 1) % list.length;
+
+          if (prevIndex === -1) {
+            prevIndex = list.length - 1;
+          }
+
+          this.openThen(list[prevIndex]);
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.focus();
+        }
+      });
+    };
+
+    const next = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          const nextIndex = (currentIndex + 1) % list.length;
+          this.openThen(list[nextIndex]);
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.focus();
+        }
+      });
+    };
 
+    const handleItemKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
         close();
-      } else if (e.which === 9 && !e.shiftKey) {
-        // tab key pressed
+        e.preventDefault();
+      }
+      /*else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed
         let lightbox = document.querySelector('.is-lightbox.active');
         const btnClose = lightbox.querySelector('.cmd-lightbox-close');
         btnClose.focus();
+        e.preventDefault();
+      }*/
+
+
+      if (this.arrow) {
+        if (e.which === 37 && !e.shiftKey) {
+          // left
+          prev();
+        }
+
+        if (e.which === 39 && !e.shiftKey) {
+          // right
+          next();
+        }
       }
     };
 
-    const lightboxes = this.builderStuff.querySelectorAll('.lightbox-externalvideo-edit,.lightbox-video-edit,.lightbox-image-edit');
+    const lightboxes = this.builderStuff.querySelectorAll('div.lightbox-edit');
     lightboxes.forEach(lightbox => {
       lightbox.addEventListener('keydown', handleItemKeyDown);
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
@@ -82358,6 +83284,32 @@ class Lightbox {
         e.preventDefault();
         e.stopImmediatePropagation();
       });
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      if (btnPrev) btnPrev.addEventListener('click', e => {
+        prev();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnPrev) btnPrev.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          prev();
+          e.preventDefault();
+        }
+      });
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      if (btnNext) btnNext.addEventListener('click', e => {
+        next();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnNext) btnNext.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          next();
+          e.preventDefault();
+        }
+      });
     }); // this.init();
   } //constructor
 
@@ -82413,21 +83365,89 @@ class Lightbox {
   */
 
 
+  openThen(item) {
+    if (item.type === 'image') {
+      this.programmatically = true;
+      this.openImage(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'video') {
+      this.programmatically = true;
+      this.openVideo(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'externalvideo') {
+      this.programmatically = true;
+      this.openExternalVideo(item.url, item.theme, item.color);
+    }
+  }
+
   openImage(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-image-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.add('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<img src="${url}">`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<img src="${url}">`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<img src="${url}">`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82439,34 +83459,82 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-video-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-video-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.add('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<video class="is-video-bg" playsinline controls autoplay width="100%">
-            <source src="${url}" type="video/mp4">
-        </video>`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<video playsinline controls autoplay width="100%">
+                <source src="${url}" type="video/mp4">
+            </video>`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<video playsinline controls autoplay width="100%">
+                    <source src="${url}" type="video/mp4">
+                </video>`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82478,29 +83546,65 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openExternalVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.add('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
 
     if (theme === 'light') {
@@ -82511,22 +83615,37 @@ class Lightbox {
       dom.removeClass(lightbox, 'light');
     }
 
-    const iframe = lightbox.querySelector('iframe');
-    url = this.getIframeVideoUrl(url);
-    if (url !== '') iframe.setAttribute('src', url);
-    lightbox.style.display = 'flex';
-    if (!window.frameElement) document.body.style.overflowY = 'hidden';
     const div = lightbox.querySelector('.lightbox-content');
-    div.style.width = div.offsetHeight * 16 / 9 + 'px';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
+
+    if (!this.programmatically) {
+      div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>`;
+      const iframe = lightbox.querySelector('iframe');
+      url = this.getIframeVideoUrl(url);
+      if (url !== '') iframe.setAttribute('src', url);
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
       setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
+        div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                    <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>`;
+        div.style.opacity = '1';
+        const iframe = lightbox.querySelector('iframe');
+        url = this.getIframeVideoUrl(url);
+        if (url !== '') iframe.setAttribute('src', url);
+      }, 200);
+    }
+
+    lightbox.style.display = 'flex';
+    if (!window.frameElement) document.body.style.overflowY = 'hidden'; // const div = lightbox.querySelector('.lightbox-content');
+    // div.style.width=((div.offsetHeight*16)/9) + 'px';
+
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   getIframeVideoUrl(src) {
@@ -82570,6 +83689,88 @@ class Lightbox {
     return text + text2;
   }
 
+  getList() {
+    const arrGallery = [];
+    let blockClickables = this.builder.doc.querySelectorAll('.block-click,.button-click,.is-lightbox');
+
+    if (this.parent) {
+      blockClickables = this.parent.querySelectorAll('.block-click,.button-click,.is-lightbox');
+    }
+
+    blockClickables.forEach(block => {
+      if (!this.parent) {
+        if (block.closest('[data-gallery')) return;
+      }
+
+      let url;
+      let extension;
+
+      if (block.tagName.toLowerCase() === 'a') {
+        url = block.getAttribute('href');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      } else if (block.getAttribute('data-modal-url')) {
+        url = block.getAttribute('data-modal-url');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      }
+
+      let theme = block.getAttribute('data-modal-theme');
+      if (!theme) theme = 'light';
+      const color = block.getAttribute('data-modal-color');
+
+      if (url) {
+        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
+          arrGallery.push({
+            type: 'image',
+            url: url,
+            theme: theme,
+            color: color
+          });
+        } else if (extension === 'mp4') {
+          arrGallery.push({
+            type: 'video',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        } else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
+          arrGallery.push({
+            type: 'externalvideo',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        }
+      }
+
+      if (block.getAttribute('data-modal-image')) {
+        url = block.getAttribute('data-modal-image');
+        arrGallery.push({
+          type: 'image',
+          url: url,
+          theme: theme,
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-video')) {
+        url = block.getAttribute('data-modal-video');
+        arrGallery.push({
+          type: 'video',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-externalvideo')) {
+        url = block.getAttribute('data-modal-externalvideo');
+        arrGallery.push({
+          type: 'externalvideo',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      }
+    });
+    return arrGallery;
+  }
+
 } //Lightbox
 
 class ShortcutInfo {
@@ -83189,6 +84390,13 @@ class Resize {
       pane: col,
       onResize: (width, height) => {
         this.builder.util.hideControls();
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
 
         if (width) {
           col.style.flex = 'none';
@@ -83212,16 +84420,29 @@ class Resize {
             // Adjust to max
             // percentage = (max / row.offsetWidth) * 100;
             // Or make others auto
-            let numOfCols = 1;
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
-              numOfCols++;
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
 
             if (numOfCols === 1) {
@@ -83251,6 +84472,14 @@ class Resize {
         }
       },
       resizeEnd: () => {
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
+
         if (col.style.width) {
           col.style.width = col.offsetWidth + 'px'; // change from % to px
 
@@ -83279,10 +84508,25 @@ class Resize {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
           } // /adjust others
           // New: Final fix (if column resized exceeds its max)
@@ -83336,12 +84580,11 @@ class Resize {
             item.style.height = '';
             item.style.minHeight = '';
           });
-        } // To position columnTool correctly, add delay.
+        } // // To position columnTool correctly, add delay.
+        // setTimeout(()=>{
+        //     col.click();
+        // },30);
 
-
-        setTimeout(() => {
-          col.click();
-        }, 30);
       }
     });
   }
@@ -84491,6 +85734,7 @@ class ContentBuilder {
       //set -1 for no max (use original image width)
       zoom: 1,
       useLightbox: false,
+      lightboxArrow: true,
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
 
@@ -85234,6 +86478,8 @@ class ContentBuilder {
             util.clearControls();
           }
         }
+
+        this.element.hyperlink.buttonEditor.hide();
       } // Button Modal
 
 
@@ -89377,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',
@@ -89411,6 +90705,7 @@ class ContentBox {
       }],
       disableConfig: false,
       useLightbox: true,
+      lightboxArrow: true,
       themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css'], ['#0088dc', 'colored', 'contentbuilder/themes/colored-blue.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue6.css'], ['#0a4d92', 'colored', 'contentbuilder/themes/colored-darkblue.css'], ['#96af16', 'colored', 'contentbuilder/themes/colored-green.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-orange.css'], ['#b92ea6', 'colored', 'contentbuilder/themes/colored-magenta.css'], ['#e73171', 'colored', 'contentbuilder/themes/colored-pink.css'], ['#782ec5', 'colored', 'contentbuilder/themes/colored-purple.css'], ['#ed2828', 'colored', 'contentbuilder/themes/colored-red.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow.css'], ['#13b34b', 'colored', 'contentbuilder/themes/colored-green4.css'], ['#333333', 'colored-dark', 'contentbuilder/themes/colored-dark.css'], ['#dbe5f5', 'light', 'contentbuilder/themes/light-blue.css'], ['#fbe6f2', 'light', 'contentbuilder/themes/light-pink.css'], ['#dcdaf3', 'light', 'contentbuilder/themes/light-purple.css'], ['#ffe9e0', 'light', 'contentbuilder/themes/light-red.css'], ['#fffae5', 'light', 'contentbuilder/themes/light-yellow.css'], ['#ddf3dc', 'light', 'contentbuilder/themes/light-green.css'], ['#c7ebfd', 'light', 'contentbuilder/themes/light-blue2.css'], ['#ffd5f2', 'light', 'contentbuilder/themes/light-pink2.css'], ['#eadafb', 'light', 'contentbuilder/themes/light-purple2.css'], ['#c5d4ff', 'light', 'contentbuilder/themes/light-blue3.css'], ['#ffefb1', 'light', 'contentbuilder/themes/light-yellow2.css'], ['#fefefe', 'light', 'contentbuilder/themes/light-gray3.css'], ['#e5e5e5', 'light', 'contentbuilder/themes/light-gray2.css'], ['#dadada', 'light', 'contentbuilder/themes/light-gray.css'], ['#3f4ec9', 'colored', 'contentbuilder/themes/colored-blue2.css'], ['#6779d9', 'colored', 'contentbuilder/themes/colored-blue4.css'], ['#10b9d7', 'colored', 'contentbuilder/themes/colored-blue3.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue5.css'], ['#e92f94', 'colored', 'contentbuilder/themes/colored-pink3.css'], ['#a761d9', 'colored', 'contentbuilder/themes/colored-purple2.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow2.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-red3.css'], ['#36b741', 'colored', 'contentbuilder/themes/colored-green2.css'], ['#00c17c', 'colored', 'contentbuilder/themes/colored-green3.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink2.css'], ['#ff6d13', 'colored', 'contentbuilder/themes/colored-orange2.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red2.css'], ['#646464', 'colored', 'contentbuilder/themes/colored-gray.css'], ['#3f4ec9', 'dark', 'contentbuilder/themes/dark-blue.css'], ['#0b4d92', 'dark', 'contentbuilder/themes/dark-blue2.css'], ['#006add', 'dark', 'contentbuilder/themes/dark-blue3.css'], ['#5f3ebf', 'dark', 'contentbuilder/themes/dark-purple.css'], ['#e92f69', 'dark', 'contentbuilder/themes/dark-pink.css'], ['#4c4c4c', 'dark', 'contentbuilder/themes/dark-gray.css'], ['#ed2828', 'dark', 'contentbuilder/themes/dark-red.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue8.css'], ['#ff7723', 'colored', 'contentbuilder/themes/colored-orange3.css'], ['#ff5722', 'colored', 'contentbuilder/themes/colored-red5.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red4.css'], ['#00bd79', 'colored', 'contentbuilder/themes/colored-green5.css'], ['#557ae9', 'colored', 'contentbuilder/themes/colored-blue7.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink4.css']],
       backgroundColor: '#f1f1f1',
       imageselect: '',
@@ -91746,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;
@@ -91924,6 +93232,7 @@ class ContentBox {
       //     }, 100);
       // },
       useLightbox: this.settings.useLightbox,
+      lightboxArrow: this.settings.lightboxArrow,
       themes: this.settings.themes,
       moduleConfig: this.settings.moduleConfig,
       onImageSelectClick: this.settings.onImageSelectClick,