@innovastudio/contentbox 1.5.55 → 1.5.56
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@innovastudio/contentbox",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.5.
|
|
4
|
+
"version": "1.5.56",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
|
7
7
|
"files": [
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"webpack-dev-server": "^4.0.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@innovastudio/contentbuilder": "^1.4.
|
|
49
|
+
"@innovastudio/contentbuilder": "^1.4.49",
|
|
50
50
|
"js-beautify": "^1.14.0"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
@@ -32678,19 +32678,19 @@ class Grid {
|
|
|
32678
32678
|
if (this.builder.useDefaultGrid) {
|
|
32679
32679
|
let arrColumns = this.getAllColumns(cell);
|
|
32680
32680
|
|
|
32681
|
-
for (let i = 1; i < arrColumns.length; i++) {
|
|
32682
|
-
let cellNext = arrColumns[i]; // cellNext.style.width = '100%';
|
|
32683
|
-
|
|
32684
|
-
cellNext.style.width = '';
|
|
32685
|
-
cellNext.style.flex = '';
|
|
32686
|
-
this.removeColClasses(cellNext);
|
|
32687
|
-
}
|
|
32688
|
-
|
|
32689
32681
|
if (arrColumns.length > 1 && arrColumns.length < 9) {
|
|
32690
32682
|
this.builder.uo.saveForUndo();
|
|
32691
32683
|
let w = this.resizeColumn(cell, true, arrColumns.length);
|
|
32692
32684
|
|
|
32693
32685
|
if (w) {
|
|
32686
|
+
for (let i = 1; i < arrColumns.length; i++) {
|
|
32687
|
+
let cellNext = arrColumns[i]; // cellNext.style.width = '100%';
|
|
32688
|
+
|
|
32689
|
+
cellNext.style.width = '';
|
|
32690
|
+
cellNext.style.flex = '';
|
|
32691
|
+
this.removeColClasses(cellNext);
|
|
32692
|
+
}
|
|
32693
|
+
|
|
32694
32694
|
cell.style.width = w;
|
|
32695
32695
|
cell.style.flex = '0 0 auto';
|
|
32696
32696
|
this.removeColClasses(cell);
|
|
@@ -32870,19 +32870,19 @@ class Grid {
|
|
|
32870
32870
|
if (this.builder.useDefaultGrid) {
|
|
32871
32871
|
let arrColumns = this.getAllColumns(cell);
|
|
32872
32872
|
|
|
32873
|
-
for (let i = 1; i < arrColumns.length; i++) {
|
|
32874
|
-
let cellNext = arrColumns[i]; // cellNext.style.width = '100%';
|
|
32875
|
-
|
|
32876
|
-
cellNext.style.width = '';
|
|
32877
|
-
cellNext.style.flex = '';
|
|
32878
|
-
this.removeColClasses(cellNext);
|
|
32879
|
-
}
|
|
32880
|
-
|
|
32881
32873
|
if (arrColumns.length > 1 && arrColumns.length < 9) {
|
|
32882
32874
|
this.builder.uo.saveForUndo();
|
|
32883
32875
|
let w = this.resizeColumn(cell, false, arrColumns.length);
|
|
32884
32876
|
|
|
32885
32877
|
if (w) {
|
|
32878
|
+
for (let i = 1; i < arrColumns.length; i++) {
|
|
32879
|
+
let cellNext = arrColumns[i]; // cellNext.style.width = '100%';
|
|
32880
|
+
|
|
32881
|
+
cellNext.style.width = '';
|
|
32882
|
+
cellNext.style.flex = '';
|
|
32883
|
+
this.removeColClasses(cellNext);
|
|
32884
|
+
}
|
|
32885
|
+
|
|
32886
32886
|
cell.style.width = w;
|
|
32887
32887
|
cell.style.flex = '0 0 auto';
|
|
32888
32888
|
this.removeColClasses(cell);
|
|
@@ -22,7 +22,7 @@ var ContentBox=function(){"use strict";class t{appendHtml(t,e,i="beforeend"){t.i
|
|
|
22
22
|
License: MIT
|
|
23
23
|
Copyright (c) 2020 Paweł Kuna
|
|
24
24
|
https://github.com/tabler/tabler-icons
|
|
25
|
-
*/class Os{constructor(t){this.builder=t;const e=this.builder.util;this.util=e}getSnippetsHtml(){const t=this.util,e=this.builder.opts.snippetUrl,i=this.builder.opts.snippetPath;let n="[";for(let e=0;e<this.builder.opts.snippetCategories.length;e++)n+=`[${this.builder.opts.snippetCategories[e][0]},'${t.out(this.builder.opts.snippetCategories[e][1])}'],`;n+="]";const o=this.builder.opts.defaultSnippetCategory;return`\n <!DOCTYPE HTML>\n <html>\n \n <head>\n <meta charset="utf-8">\n <title></title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content="">\n <script src="${e}"><\/script>\n <style>\n body {\n // background: #fff;\n background: ${this.builder.styleSnippetBackground};\n margin: 0;\n }\n\n .is-pop-close {\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: transparent;\n z-index:10;width:30px;height:30px;position:absolute;\n top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;\n }\n .is-pop-close:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n /*\n body.dark {\n background: #111;\n }\n .dark .is-categories {\n background: #333;\n }\n .dark .is-category-list a {\n background: #333;\n color: #fff;\n }\n .dark .is-category-list a.active {\n background: #525252;\n color: #fff;\n }\n .dark .is-category-list a:hover {\n color: #fff;\n }\n .dark .is-design-list>li img {\n opacity: 0.93;\n }\n .dark .is-more-categories {\n background: #333;\n }\n .dark .is-more-categories a {\n background: #333;\n color: #fff;\n }\n .dark .is-more-categories a:hover,\n .dark .is-more-categories a:focus {\n background: #4c4c4c;\n }\n .dark .is-more-categories a.active {\n background: #4c4c4c;\n }\n */\n\n \n .dark .is-design-list>li {\n outline: transparent 1px solid;\n }\n\n \n \n /* Scrollbar for modal */\n\n /* Darker color, because background for snippet thumbnails is always light. */\n .dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(78 78 78 / 62%) auto;\n }\n .dark *::-webkit-scrollbar {\n width: 12px;\n }\n .dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .dark *::-webkit-scrollbar-thumb {\n background-color:rgb(78 78 78 / 62%);\n } \n\n .colored-dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(100, 100, 100) auto;\n }\n .colored-dark *::-webkit-scrollbar {\n width: 12px;\n }\n .colored-dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored-dark *::-webkit-scrollbar-thumb {\n background-color:rgb(100, 100, 100);\n } \n\n .colored * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .colored *::-webkit-scrollbar {\n width: 12px;\n }\n .colored *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n } \n\n .light * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .light *::-webkit-scrollbar {\n width: 12px;\n }\n .light *::-webkit-scrollbar-track {\n background: transparent;\n }\n .light *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n } \n \n svg {\n fill: ${this.builder.styleSnippetColor};\n }\n\n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 68px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 30px;\n box-sizing: border-box;\n overflow: auto;\n list-style: none;\n margin: 0;\n }\n \n .is-design-list>li {\n width: 250px;\n min-height:120px;\n position:relative;\n background: #fff;\n // background: ${this.builder.styleToolBackground};\n overflow: hidden;\n margin: 32px 40px 0 0;\n cursor: pointer;\n display: inline-block;\n outline: #ececec 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n\n .is-design-list>li:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>li img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 400px;\n width: 100%\n }\n \n // .is-design-list>li:hover img {\n // opacity: 0.95;\n // }\n \n // .is-design-list>li:hover {\n // background: #999;\n // }\n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>li .is-overlay:after {\n background: rgba(0, 0, 0, 0.02);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n }\n .is-design-list>li:hover .is-overlay:after,\n .is-design-list>li:focus .is-overlay:after {\n opacity: 0.9;\n }\n .dark .is-design-list>li .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n white-space: nowrap;\n padding: 0 30px;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabsBackground};\n // box-shadow: 0 5px 8px rgb(0 0 0 / 4%);\n }\n \n .is-category-list a {\n display: inline-block;\n padding: 10px 20px;\n // background: #fefefe;\n // color: #000;\n background: ${this.builder.styleSnippetTabItemBackground};\n color: ${this.builder.styleSnippetTabItemColor};\n border-radius: 50px;\n \n margin: 0 12px 0 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n transition: box-shadow ease 0.3s;\n }\n \n .is-category-list a:hover {\n /*background: #fafafa;*/\n background: ${this.builder.styleSnippetTabItemBackgroundHover};\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n }\n \n .is-category-list a.active {\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabItemBackgroundActive};\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n box-shadow: none;\n cursor: default;\n }\n\n .is-category-list a:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n \n .is-more-categories {\n display: none;\n position: absolute;\n width: 400px;\n box-sizing: border-box;\n padding: 0;\n z-index: 1;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n // background: #fff;\n background: ${this.builder.styleSnippetMoreItemBackground};\n }\n \n .is-more-categories a {\n width: 200px;\n float: left;\n display: block;\n box-sizing: border-box;\n padding: 12px 20px;\n // background: #fff;\n background: ${this.builder.styleSnippetMoreItemBackground};\n text-decoration: none;\n // color: #000;\n color: ${this.builder.styleSnippetMoreItemColor};\n line-height: 1.6;\n outline: none;\n }\n \n .is-more-categories a:hover,\n .is-more-categories a:focus {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundHover};\n }\n \n .is-more-categories a.active {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundActive};\n }\n \n .is-more-categories.active {\n display: block;\n }\n \n /* First Loading */\n /* .is-category-list {\n display: none;\n }\n \n .is-design-list {\n display: none;\n }\n \n .pace {\n -webkit-pointer-events: none;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n \n .pace-inactive {\n display: none;\n }\n \n .pace .pace-progress {\n background: #000000;\n position: fixed;\n z-index: 2000;\n top: 0;\n right: 100%;\n width: 100%;\n height: 2px;\n } */\n \n .is-more-categories>a:nth-child(0) {\n display: none\n }\n \n .is-more-categories>a:nth-child(1) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: none\n }\n \n @media all and (max-width: 1212px) {\n .is-categories>a:nth-child(7):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: block\n }\n }\n \n @media all and (max-width: 1070px) {\n .is-categories>a:nth-child(6):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: block\n }\n }\n \n @media all and (max-width: 940px) {\n .is-categories>a:nth-child(5):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: block\n }\n }\n \n @media all and (max-width: 700px) {\n .is-categories>a:nth-child(4):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: block\n }\n }\n \n @media all and (max-width: 555px) {\n .is-categories>a:nth-child(3):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: block\n }\n }\n \n @media all and (max-width: 415px) {\n .is-categories>a:nth-child(2):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: block\n }\n }\n \n @media all and (max-width: 640px) {\n .is-more-categories a {\n width: 150px;\n padding: 10px 5px 10px 15px;\n font-size: 10px;\n }\n \n .is-more-categories {\n left: 0 !important;\n width: 100% !important;\n }\n }\n </style>\n </head>\n \n <body${this.builder.styleDark?' class="dark"':""}${this.builder.styleColored?' class="colored"':""}${this.builder.styleColoredDark?' class="colored-dark"':""}${this.builder.styleLight?' class="light"':""}>\n\n <svg style="display:none">\n <defs>\n <symbol viewBox="0 0 512 512" id="ion-ios-close-empty">\n <path d="M340.2 160l-84.4 84.3-84-83.9-11.8 11.8 84 83.8-84 83.9 11.8 11.7 84-83.8 84.4 84.2 11.8-11.7-84.4-84.3 84.4-84.2z"></path>\n </symbol>\n </defs>\n </svg>\n \n <button class="is-pop-close" tabindex="-1">\n <svg class="is-icon-flex" style="width:30px;height:30px;">\n <use xlink:href="#ion-ios-close-empty"></use>\n </svg>\n </button>\n \n <div class="is-category-list">\n <div class="is-categories" style="position:fixed;top:0;left:0;right:0;height:68px;padding-top:17px;box-sizing:border-box;">\n </div>\n </div>\n\n <div class="is-more-categories" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </div>\n \n <ul class="is-design-list" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </ul>\n \n <script${this.builder.nonce?` nonce="${this.builder.nonce}"`:""}>\n \n var snippetPath = '${i}';\n var snippetCategories = ${n};\n var defaultSnippetCategory = ${o};\n\n ${void 0!==this.builder.slider&&null!==this.builder.slider?`\n var slider='${this.builder.slider}';`:"var slider=null;"};\n \n var numOfCat = snippetCategories.length;\n if (numOfCat <= 7) {\n document.querySelector('.is-more-categories').style.width = '200px';\n }\n \n var categorytabs = document.querySelector('.is-categories');\n categorytabs.innerHTML = '';\n let html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n if (i < 7) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n }\n html_catselect += '<a href="" class="more-snippets">' + parent._cb.out('More') + '</a>';\n categorytabs.innerHTML = html_catselect;\n \n var categorymore = document.querySelector('.is-more-categories');\n html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n categorymore.innerHTML = html_catselect;\n \n // Show/hide "More" button\n if (numOfCat <= 7) {\n var bHasMore = false;\n \n const childNodes = categorymore.childNodes;\n let i = childNodes.length;\n while (i--) {\n if(childNodes[i].style.display === 'block') {\n bHasMore = true;\n }\n }\n var more = document.querySelector('.more-snippets');\n if (!bHasMore) more.style.display = 'none';\n else more.style.display = '';\n }\n \n var elms = categorytabs.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n elms = categorymore.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n\n\n document.addEventListener('keydown', function(e){\n if(e.keyCode === 27) { // escape key\n const moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n moreCategories.classList.remove('active');\n const activeTab = categorylist.querySelector('.more-snippets');\n activeTab.classList.remove('active');\n activeTab.focus();\n } else {\n const modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n }\n }\n });\n\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n const select = (elm) => {\n\n if(elm.classList.contains('active')) {\n return false;\n }\n \n var cat = elm.getAttribute('data-cat');\n if (cat) if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n\n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb; \n \n if (snippets[i].category === cat) {\n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n\n newitem.addEventListener('keydown', (e)=>{\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n \n } \n }\n \n if (cat) {\n // Hide all, show items from selected category\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); \n var categorymore_items = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(categorymore_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var items = designlist.querySelectorAll('li');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, function(elm){\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = ''; // TODO: hide & show snippets => animated\n elm.classList.add('active');\n }\n }\n });\n \n } else {\n // show dropdown\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n var _width = moreCategories.offsetWidth;\n more.classList.add('active');\n moreCategories.classList.add('active');\n var top = more.getBoundingClientRect().top;\n var left = more.getBoundingClientRect().left;\n top = top + 50;\n moreCategories.style.top = top + 'px';\n moreCategories.style.left = left + 'px';\n }\n elm.classList.add('active');\n \n };\n\n let tabs = document.querySelectorAll('.is-categories a');\n Array.prototype.forEach.call(tabs, (tab) => {\n \n tab.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if ((e.which === 39 && e.target.nextElementSibling)) { // arrow right key pressed\n e.target.nextElementSibling.focus();\n } else if ((e.which === 37 && e.target.previousElementSibling)) { // arrow left key pressed\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n let moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n return;\n\n }\n\n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n } else if(e.which === 40 && e.target.classList.contains('more-snippets')) { // down\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n\n } \n\n \n });\n \n tab.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n \n });\n\n let dropdownItems = document.querySelectorAll('.is-more-categories a');\n Array.prototype.forEach.call(dropdownItems, (item) => {\n\n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n if(e.keyCode === 38 && e.target.previousElementSibling && window.getComputedStyle(e.target.previousElementSibling).getPropertyValue('display')==='block') { // up\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 40 && e.target.nextElementSibling && window.getComputedStyle(e.target.nextElementSibling).getPropertyValue('display')==='block') { // down\n e.target.nextElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n } \n \n });\n \n item.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n });\n\n\n \n var snippets = data_basic.snippets; //DATA\n\n if (slider !== null){\n if(slider==='slick') {\n //remove glide\n const predicate = (item) => (item.type!=='glide');\n snippets = snippets.filter(predicate);\n } else if(slider==='glide') {\n //remove slick\n const predicate = (item) => (item.type!=='slick');\n snippets = snippets.filter(predicate);\n } else if(slider==='all') {\n // Do Nothing\n } else {\n // remove all slider (if incorrect settings)\n const predicate = (item) => (item.type!=='glide' && item.type!=='slick');\n snippets = snippets.filter(predicate);\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n } else {\n // Backward compatible OR if slider param not set\n\n // Hide slider snippet if slick is not included\n var bHideSliderSnippet = true;\n if(parent._cb.win.jQuery) {\n if(parent._cb.win.jQuery.fn.slick) {\n bHideSliderSnippet = false;\n }\n }\n if(bHideSliderSnippet){\n const result = snippets.filter((item)=>{\n return item.type !== 'slick';\n });\n snippets = [...result];\n } \n\n if(!(parent._cb.win.Glide)){\n const result = snippets.filter((item)=>{\n return !(item.glide || item.type === 'glide');\n });\n snippets = [...result];\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n }\n \n\n for (let i = 0; i <snippets.length; i++) {\n \n snippets[i].id = i+1;\n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === defaultSnippetCategory + '') {\n designlist.insertAdjacentHTML('beforeend', '<li class="active" role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n \n newitem.addEventListener('keydown', (e)=>{\n\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n\n }\n \n\n\n\n /*\n elms = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(elms, function(elm){\n \n elm.addEventListener('click', function(e){\n \n var cat = elm.getAttribute('data-cat');\n if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n \n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === cat) {\n \n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n }\n \n } \n }\n \n // Hide all, show items from selected category\n Array.prototype.forEach.call(elms, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); // hide popup\n //var categorymore_items = categorymore.querySelectorAll('a');\n \n var categorylist = document.querySelector('.is-category-list');\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var more = document.querySelector('.more-snippets');\n more.className = more.className.replace('active', '');\n \n var items = designlist.querySelectorAll('div');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, function(elm){\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = '';\n elm.classList.add('active');\n }\n }\n });\n \n elm.classList.add('active');\n \n e.preventDefault();\n });\n \n });\n */\n \n var close = document.querySelector('.is-pop-close');\n close.addEventListener('click', function(e){\n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n });\n \n // Add document Click event\n document.addEventListener('click', function(e){\n e = e || window.event;\n var target = e.target || e.srcElement; \n \n if(parentsHasClass(target, 'more-snippets')) return;\n if(hasClass(target, 'more-snippets')) return;\n \n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n parent.document.addEventListener('click', function(e){\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n function addSnippet(snippetid) {\n \n // TODO: var framework = parent._cb.opts.framework;\n var snippetPathReplace = parent._cb.opts.snippetPathReplace;\n var emailMode = parent._cb.opts.emailMode;\n \n // \n for (let i = 0; i <snippets.length; i++) {\n if(snippets[i].id + ''=== snippetid) {\n \n var html = snippets[i].html;\n var noedit = snippets[i].noedit;\n break;\n }\n }\n \n var bSnippet;\n if (html.indexOf('"row') === -1) {\n bSnippet = true; // Just snippet (without row/column grid)\n } else {\n bSnippet = false; // Snippet is wrapped in row/colum\n }\n if (emailMode) bSnippet = false;\n\n if(bSnippet) {\n var quickadd = parent._cb.builderStuff.querySelector('.quickadd');\n var mode = quickadd.getAttribute('data-mode');\n if(!mode) {\n // in case of using viewSnippets() to open the dialog (mode=null) => change to non snippet.\n html = '<div class="row">' +\n '<div class="column full">' +\n html +\n '</div>' +\n '</div>';\n bSnippet=false;\n }\n }\n \n // Convert snippet into your defined 12 columns grid \n var rowClass = parent._cb.opts.row; //row\n var colClass = parent._cb.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']\n if(rowClass!=='' && colClass.length===12){\n\n //html = html.replace(new RegExp('row clearfix', 'g'), rowClass);\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);\n \n html = html.replace(new RegExp('column full', 'g'), colClass[11]);\n html = html.replace(new RegExp('column half', 'g'), colClass[5]);\n html = html.replace(new RegExp('column third', 'g'), colClass[3]);\n html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);\n html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);\n html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);\n html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);\n html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);\n }\n \n html = html.replace(/{id}/g, makeid()); // Replace {id} with auto generated id (for custom code snippet)\n \n if(parent._cb.opts.onAdd){\n html = parent._cb.opts.onAdd(html);\n }\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n\n /* for encoded replace, change / to %2F */\n var slash = new RegExp('/', 'g');\n var snippetPathReplace_0 = snippetPathReplace[0].replace(slash, '%2F');\n var snippetPathReplace_1 = snippetPathReplace[1].replace(slash, '%2F');\n regex = new RegExp(snippetPathReplace_0, 'g');\n html = html.replace(regex, snippetPathReplace_1);\n }\n }\n \n parent._cb.addSnippet(html, bSnippet, noedit);\n \n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n \n }\n \n function hasClass(element, classname) {\n if(!element) return false;\n return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);\n }\n \n function removeClass(element, classname) {\n if(!element) return;\n if(element.classList.length>0) {\n element.className = element.className.replace(classname, '');\n }\n }\n \n function parentsHasClass(element, classname) {\n while (element) {\n if(element.tagName === 'BODY' || element.tagName === 'HTML') return false;\n if(!element.classList) return false;\n if (element.classList.contains(classname)) {\n return true;\n }\n element = element.parentNode;\n }\n }\n \n function makeid() {//http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = "";\n var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = "";\n var possible2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n \n <\/script>\n \n </textarea>\n </body>\n \n </html>\n `}}const Ms=t=>{const e=t.util,i=t.builderStuff,n=t.dom;let o=i.querySelector(".quickadd");if(!o){const s=`<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>\n <div class="is-pop-tabs">\n <div class="is-pop-tab-item" data-value="left">${e.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${e.out("Add to Right")}</div>\n </div>\n <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">\n <button title="${e.out("Paragraph")}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${e.out("Paragraph")}</button>\n <button title="${e.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${e.out("Headline")}</button>\n <button title="${e.out("Image")}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${e.out("Image")}</button>\n <button title="${e.out("List")}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${e.out("List")}</button>\n <button title="${e.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${e.out("Heading 1")}</button>\n <button title="${e.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${e.out("Heading 2")}</button>\n <button title="${e.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${e.out("Heading 3")}</button>\n <button title="${e.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${e.out("Heading 4")}</button>\n <button title="${e.out("Quote")}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${e.out("Quote")}</button>\n <button title="${e.out("Preformatted")}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${e.out("Preformatted")}</button>\n ${t.opts.emailMode?"":`<button title="${e.out("Button")}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Button")}</button>`}\n ${t.opts.emailMode?"":`<button title="${e.out("Two Button")}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Two Button")}</button>`}\n <button title="${e.out("Youtube")}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${e.out("Youtube")}</button>\n <button title="${e.out("Video")}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${e.out("Video")}</button>\n <button style="display:none" title="${e.out("Audio")}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${e.out("Audio")}</button>\n <button title="${e.out("Map")}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${e.out("Map")}</button>\n <button title="${e.out("Table")}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${e.out("Table")}</button>\n <button title="${e.out("Icon")}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${e.out("Icon")}</button>\n <button title="${e.out("Social Links")}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${e.out("Social Links")}</button>\n <button title="${e.out("HTML/JS")}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${e.out("HTML/JS")}</button>\n <button title="${e.out("Spacer")}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${e.out("Spacer")}</button>\n <button style="display:none" title="${e.out("Line")}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${e.out("Line")}</button>\n <div class="pop-separator"></div>\n <button title="${e.out("More...")}" class="add-more" style="flex-direction:initial;">${e.out("More...")}</button>\n </div>\n </div>\n \n <div class="is-modal snippets" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-content" style="max-width:1250px;height:90%;padding:0;">\n <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>\n </div>\n </div>\n `;n.appendHtml(i,s),o=i.querySelector(".quickadd"),document.addEventListener("click",(t=>{var i=(t=t||window.event).target||t.srcElement;if("flex"===o.style.display){let t=n.parentsHasClass(i,"quickadd"),s=n.parentsHasClass(i,"row-add"),a=n.parentsHasClass(i,"is-rowadd-tool"),l=n.parentsHasClass(i,"cell-add"),r=n.parentsHasClass(i,"elm-add"),d=n.parentsHasClass(i,"row-add-initial");if(t||s||a||l||r||d)return;e.hidePop(o)}}));let a=o.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(a,(t=>{n.addEventListener(t,"click",(t=>{let e=o.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{n.removeClass(t,"active")})),n.addClass(t.target,"active"),"left"===o.querySelector(".active").getAttribute("data-value")?o.setAttribute("data-mode","cell-left"):o.setAttribute("data-mode","cell-right")}))}));let l=o.querySelector(".add-paragraph");n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",t)})),l=o.querySelector(".add-headline"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),l=o.querySelector(".add-image"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<img src="${t.opts.snippetPath}example.png" alt="" />`;t.opts.snippetSampleImage&&(n=`<img src="${t.opts.snippetSampleImage}" alt="" />`),e.addContent(n,i)})),l=o.querySelector(".add-heading1"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h1>Heading 1 here</h1>",t)})),l=o.querySelector(".add-heading2"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h2>Heading 2 here</h2>",t)})),l=o.querySelector(".add-heading3"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h3>Heading 3 here</h3>",t)})),l=o.querySelector(".add-heading4"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h4>Heading 4 here</h4>",t)})),l=o.querySelector(".add-preformatted"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pre>",t)})),l=o.querySelector(".add-list"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<ul style="list-style: initial;padding-left: 20px;">\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>',t)})),l=o.querySelector(".add-quote"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<blockquote>Lorem Ipsum is simply dummy text</blockquote>",t)})),l=o.querySelector(".add-button"),l&&n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n </div>';t.opts.emailMode&&(n='<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>'),e.addContent(n,i)})),l=o.querySelector(".add-twobutton"),l&&n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>\n </div>';t.opts.emailMode&&(n='<div>\n <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> \n <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>\n </div>'),e.addContent(n,i)})),l=o.querySelector(".add-spacer"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="spacer height-80"></div>',t)})),l=o.querySelector(".add-line"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<hr>",t)})),l=o.querySelector(".add-code"),n.addEventListener(l,"click",(()=>{let i='<div class="row"><div class="column full" data-noedit data-html="'+encodeURIComponent("<h1 id=\"{id}\">Lorem ipsum</h1><p>This is a code block. You can edit this block using the source dialog.</p><script>var docReady = function (fn) {var stateCheck = setInterval(function () {if (document.readyState !== \"complete\") return;clearInterval(stateCheck);try{fn()}catch(e){}}, 1);};docReady(function() {document.querySelector('#{id}').innerHTML ='<b>Hello World..!</b>';});<\/script>")+'"></div></div>',n=t.opts.snippetPathReplace,o=t.opts.row,s=t.opts.cols;if(""!==o&&12===s.length&&(i=i.replace(new RegExp("row clearfix","g"),"row"),i=i.replace(new RegExp('"row',"g"),'"'+o),i=i.replace(new RegExp("column full","g"),s[11]),i=i.replace(new RegExp("column half","g"),s[5]),i=i.replace(new RegExp("column third","g"),s[3]),i=i.replace(new RegExp("column fourth","g"),s[2]),i=i.replace(new RegExp("column fifth","g"),s[1]),i=i.replace(new RegExp("column sixth","g"),s[1]),i=i.replace(new RegExp("column two-third","g"),s[7]),i=i.replace(new RegExp("column two-fourth","g"),s[8]),i=i.replace(new RegExp("column two-fifth","g"),s[9]),i=i.replace(new RegExp("column two-sixth","g"),s[9])),i=i.replace(/{id}/g,e.makeId()),t.opts.onAdd&&(i=t.opts.onAdd(i)),n.length>0&&""!==n[0]){let t=new RegExp(n[0],"g");i=i.replace(t,n[1])}t.addSnippet(i,!1,!0)})),l=o.querySelector(".add-table"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<table class="default" style="border-collapse:collapse;width:100%;">\n <thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </table>',t)})),l=o.querySelector(".add-icon"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),l=o.querySelector(".add-social"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="is-social" style="text-align: center;">\n <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>\n <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>\n <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>\n </div>',t)})),l=o.querySelector(".add-map"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&hl=en&sll=-7.981898,112.626504&sspn=0.009084,0.016512&oq=melbourne&hnear=Melbourne+Victoria,+Australia&t=m&z=10&output=embed"></iframe>\n </div>',t)})),l=o.querySelector(".add-youtube"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>\n </div>',t)})),l=o.querySelector(".add-video"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetPath}example.mp4" type="video/mp4"></video>`;t.opts.snippetSampleVideo&&(n=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetSampleVideo}" type="video/mp4"></video>`),e.addContent(n,i)})),l=o.querySelector(".add-audio"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;t.opts.snippetSampleAudio&&(n=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),e.addContent(n,i)}));const r=new Os(t);l=o.querySelector(".add-more"),n.addEventListener(l,"click",(()=>{let t=i.querySelector(".snippets");e.showModal(t,!1,null,!1);var n=t.querySelector("iframe").contentWindow.document;""===n.body.innerHTML&&(n.open(),n.write(r.getSnippetsHtml()),n.close()),e.hidePop(o)}))}return o};class Rs{constructor(t){this.builder=t;const e=this.builder.util,i=this.builder.builderStuff;this.util=e,this.builderStuff=i;const n=this.builder.dom;this.dom=n,this.rowTool=new Bs(t)}moveColumnPrevious(){const t=this.util.cellSelected();t&&t.previousElementSibling&&(this.builder.uo.saveForUndo(),t.parentElement.insertBefore(t,t.previousElementSibling),this.builder.opts.onChange())}moveColumnNext(){let t=this.util;const e=t.cellSelected();if(!e)return;const i=t.cellNext(e);i&&(this.builder.uo.saveForUndo(),e.parentElement.insertBefore(i,e),this.builder.opts.onChange())}moveColumnUp(){let t=this.builder,e=this.util;const i=e.cellSelected();if(!i)return;let n=i.parentNode,o=3;if(n.querySelector(".is-row-overlay")&&(o=4),n.childElementCount-o==1){if(!n.previousElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),n.previousElementSibling.childElementCount>=e+o||n.previousElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),n.parentNode.insertBefore(n,n.previousElementSibling),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=n.previousElementSibling.querySelector(".is-row-tool");n.previousElementSibling.removeChild(e),e=n.previousElementSibling.querySelector(".is-rowadd-tool"),n.previousElementSibling.removeChild(e),e=n.previousElementSibling.querySelector(".is-col-tool"),n.previousElementSibling.removeChild(e),n.previousElementSibling.appendChild(i),n.parentNode.removeChild(n);let o=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(o),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var s=n.cloneNode(!0);s.innerHTML="",s.appendChild(i),n.parentNode.insertBefore(s,n);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}n=i.parentNode,e.fixLayout(n),n.nextElementSibling&&e.fixLayout(n.nextElementSibling)}moveColumnDown(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;let o=n.parentNode,s=3;if(o.querySelector(".is-row-overlay")&&(s=4),o.childElementCount-s==1){if(!o.nextElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),o.nextElementSibling.childElementCount>=e+s||o.nextElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),o.parentNode.insertBefore(o.nextElementSibling,o),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=o.nextElementSibling.querySelector(".is-row-tool");o.nextElementSibling.removeChild(e),e=o.nextElementSibling.querySelector(".is-rowadd-tool"),o.nextElementSibling.removeChild(e),e=o.nextElementSibling.querySelector(".is-col-tool"),o.nextElementSibling.removeChild(e),o.nextElementSibling.appendChild(n),o.parentNode.removeChild(o);let i=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(i),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var a=o.cloneNode(!0);a.innerHTML="",a.appendChild(n),i.moveAfter(a,o);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}o=n.parentNode,e.fixLayout(o),o.previousElementSibling&&e.fixLayout(o.previousElementSibling)}duplicateColumn(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;this.builder.uo.saveForUndo();var o=n.cloneNode(!0);i.removeClass(o,"cell-active"),o.removeAttribute("data-click"),this.builder.opts.enableDragResize&&(n.style.width="",n.style.flex="");let s=n.parentNode,a=3;s.querySelector(".is-row-overlay")&&(a=4);let l=4;if(this.builder.maxColumns&&(l=this.builder.maxColumns),s.childElementCount>=l+a)return alert(e.out("You have reached the maximum number of columns")),!1;s.insertBefore(o,n),e.fixLayout(s);let r=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(r),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}removeColumn(){let t=this.util;const e=t.cellSelected();if(!e)return;let i=e.parentNode,n=3;i.querySelector(".is-row-overlay")&&(n=4),t.confirm(t.out("Are you sure you want to delete this block?"),(o=>{o&&(this.builder.uo.saveForUndo(),i.childElementCount-n==1?(i.parentNode.removeChild(i),t.checkEmpty()):(i.removeChild(e),t.fixLayout(i)),t.clearActiveCell(),this.builder.opts.onChange())}))}removeColClasses(t){t.classList.remove("full"),t.classList.remove("two-third"),t.classList.remove("two-fourth"),t.classList.remove("two-fifth"),t.classList.remove("two-sixth"),t.classList.remove("half"),t.classList.remove("third"),t.classList.remove("fourth"),t.classList.remove("fifth"),t.classList.remove("sixth"),t.classList.remove("seventh"),t.classList.remove("eighth"),t.classList.remove("ninth"),t.classList.remove("tenth"),t.classList.remove("eleventh"),t.classList.remove("twelfth")}getAllColumns(t){let e=[],i=this.dom;i.elementChildren(t.parentNode).forEach((n=>{i.hasClass(n,"is-row-tool")||i.hasClass(n,"is-col-tool")||i.hasClass(n,"is-rowadd-tool")||i.hasClass(n,"is-row-overlay")||t!==n&&e.push(n)}));return[t].concat(e)}getCellWidth(t){return t.classList.contains("two-third")?66.666:t.classList.contains("two-fourth")?75:t.classList.contains("two-fifth")?80:t.classList.contains("two-sixth")?83.333:t.classList.contains("half")?50:t.classList.contains("third")?33.333:t.classList.contains("fourth")?25:t.classList.contains("fifth")?20:t.classList.contains("sixth")?16.666:t.classList.contains("seventh")?14.2857:t.classList.contains("eighth")?12.5:t.classList.contains("ninth")?11.111:t.classList.contains("tenth")?10:t.classList.contains("eleventh")?9.09:!!t.classList.contains("twelfth")&&8.333}resizeColumn(t,e,i){let n=this.getCellWidth(t);if(!n){n=parseFloat(window.getComputedStyle(t).getPropertyValue("width"))/parseFloat(window.getComputedStyle(t.parentNode).getPropertyValue("width"))*100}if(e){if(3===i){if(n>=28&&n<=30)return"33.333%";if(n>30&&n<38)return"40%";if(n>=68&&n<=90)return"75%"}if(4===i&&n>=48&&n<=90)return"60%";if(5===i&&n>=38&&n<=90)return"50%";if(6===i){if(n>=10&&n<13)return"16.666%";if(n>=28&&n<=90)return"40%"}if(7===i&&n>=23&&n<=90)return"30%";if(8===i&&n>=13&&n<=90)return"20%";if(n>=78&&n<=90)return"90%";if(n>=73&&n<78)return"80%";if(n>=68&&n<73)return"75%";if(n>=58&&n<68)return"70%";if(n>=48&&n<58)return"60%";if(n>=38&&n<48)return"50%";if(n>=28&&n<38)return"40%";if(n>=23&&n<28)return"30%";if(n>=18&&n<23)return"25%";if(n>=13&&n<18)return"20%";if(n>=10&&n<13)return"15%"}else{if(3===i){if(n>35&&n<=43)return"33.333%";if(n>33&&n<=35)return"30%"}if(6===i&&n>18&&n<=23)return"16.666%";if(n>93&&n<=100)return"90%";if(n>83&&n<=93)return"80%";if(n>78&&n<=83)return"75%";if(n>73&&n<=78)return"70%";if(n>63&&n<=73)return"60%";if(n>53&&n<=63)return"50%";if(n>43&&n<=53)return"40%";if(n>33&&n<=43)return"30%";if(n>28&&n<=33)return"25%";if(n>23&&n<=28)return"20%";if(n>18&&n<=23)return"15%";if(n>=10&&n<=18)return"10%"}return!1}increaseColumn(){let t,e,i=this.builder,n=this.util,o=this.dom,s=n.cellSelected();if(!s)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(s);for(let e=1;e<t.length;e++){let i=t[e];i.style.width="",i.style.flex="",this.removeColClasses(i)}if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(s,!0,t.length);e&&(s.style.width=e,s.style.flex="0 0 auto",this.removeColClasses(s)),this.builder.opts.onChange()}return}let a=this.getAllColumns(s);a[1]&&(t=a[1]),a[2]&&(e=a[2]);const l=i.opts.row;let r=i.opts.cols;const d=i.opts.colsizes;if(""!==l&&r.length>0&&d.length>0){if(e)for(let i=0;i<d.length;i++){let n=d[i];for(let i=0;i<n.length;i++)if(3===n[i].length&&o.hasClass(s,n[i][0])&&o.hasClass(t,n[i][1])&&o.hasClass(e,n[i][2])&&i+1!==n.length)return this.builder.uo.saveForUndo(),o.removeClass(s,n[i][0]),o.removeClass(t,n[i][1]),o.removeClass(e,n[i][2]),o.addClass(s,n[i+1][0]),o.addClass(t,n[i+1][1]),o.addClass(e,n[i+1][2]),void this.builder.opts.onChange()}for(let e=0;e<d.length;e++){let i=d[e];for(let e=0;e<i.length;e++)if(2===i[e].length&&o.hasClass(s,i[e][0])&&o.hasClass(t,i[e][1])&&e+1!==i.length)return this.builder.uo.saveForUndo(),o.removeClass(s,i[e][0]),o.removeClass(t,i[e][1]),o.addClass(s,i[e+1][0]),o.addClass(t,i[e+1][1]),void this.builder.opts.onChange()}}else if(""!==l&&r.length>0&&(-1!==s.className.indexOf("col-md-")||(-1!==s.className.indexOf("col-sm-")?r=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==s.className.indexOf("col-xs-")?r=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==s.className.indexOf("col-lg-")?r=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==s.className.indexOf("col-xl-")?r=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==s.className.indexOf("col-xxl-")&&(r=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!o.hasClass(s,r[11]))){if(o.hasClass(s,r[11]))return;if(o.hasClass(t,r[0]))return;this.builder.uo.saveForUndo(),o.hasClass(s,r[10])?(o.removeClass(s,r[10]),o.addClass(s,r[11])):o.hasClass(s,r[9])?(o.removeClass(s,r[9]),o.addClass(s,r[10])):o.hasClass(s,r[8])?(o.removeClass(s,r[8]),o.addClass(s,r[9])):o.hasClass(s,r[7])?(o.removeClass(s,r[7]),o.addClass(s,r[8])):o.hasClass(s,r[6])?(o.removeClass(s,r[6]),o.addClass(s,r[7])):o.hasClass(s,r[5])?(o.removeClass(s,r[5]),o.addClass(s,r[6])):o.hasClass(s,r[4])?(o.removeClass(s,r[4]),o.addClass(s,r[5])):o.hasClass(s,r[3])?(o.removeClass(s,r[3]),o.addClass(s,r[4])):o.hasClass(s,r[2])?(o.removeClass(s,r[2]),o.addClass(s,r[3])):o.hasClass(s,r[1])?(o.removeClass(s,r[1]),o.addClass(s,r[2])):o.hasClass(s,r[0])&&(o.removeClass(s,r[0]),o.addClass(s,r[1])),o.hasClass(t,r[1])?(o.removeClass(t,r[1]),o.addClass(t,r[0])):o.hasClass(t,r[2])?(o.removeClass(t,r[2]),o.addClass(t,r[1])):o.hasClass(t,r[3])?(o.removeClass(t,r[3]),o.addClass(t,r[2])):o.hasClass(t,r[4])?(o.removeClass(t,r[4]),o.addClass(t,r[3])):o.hasClass(t,r[5])?(o.removeClass(t,r[5]),o.addClass(t,r[4])):o.hasClass(t,r[6])?(o.removeClass(t,r[6]),o.addClass(t,r[5])):o.hasClass(t,r[7])?(o.removeClass(t,r[7]),o.addClass(t,r[6])):o.hasClass(t,r[8])?(o.removeClass(t,r[8]),o.addClass(t,r[7])):o.hasClass(t,r[9])?(o.removeClass(t,r[9]),o.addClass(t,r[8])):o.hasClass(t,r[10])?(o.removeClass(t,r[10]),o.addClass(t,r[9])):o.hasClass(t,r[11])&&(o.removeClass(t,r[11]),o.addClass(t,r[10])),this.builder.opts.onChange()}}decreaseColumn(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(n);for(let e=1;e<t.length;e++){let i=t[e];i.style.width="",i.style.flex="",this.removeColClasses(i)}if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(n,!1,t.length);e&&(n.style.width=e,n.style.flex="0 0 auto",this.removeColClasses(n)),this.builder.opts.onChange()}return}let o,s,a=this.getAllColumns(n);a[1]&&(o=a[1]),a[2]&&(s=a[2]);const l=t.opts.row;let r=t.opts.cols;const d=t.opts.colsizes;if(""!==l&&r.length>0&&d.length>0){if(s)for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(3===e[t].length&&i.hasClass(n,e[t][0])&&i.hasClass(o,e[t][1])&&i.hasClass(s,e[t][2])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(n,e[t][0]),i.removeClass(o,e[t][1]),i.removeClass(s,e[t][2]),i.addClass(n,e[t-1][0]),i.addClass(o,e[t-1][1]),i.addClass(s,e[t-1][2]),void this.builder.opts.onChange()}for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(2===e[t].length&&i.hasClass(n,e[t][0])&&i.hasClass(o,e[t][1])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(n,e[t][0]),i.removeClass(o,e[t][1]),i.addClass(n,e[t-1][0]),i.addClass(o,e[t-1][1]),void this.builder.opts.onChange()}}else if(""!==l&&r.length>0&&(-1!==n.className.indexOf("col-md-")||(-1!==n.className.indexOf("col-sm-")?r=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==n.className.indexOf("col-xs-")?r=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==n.className.indexOf("col-lg-")?r=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==n.className.indexOf("col-xl-")?r=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==n.className.indexOf("col-xxl-")&&(r=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!i.hasClass(n,r[11]))){if(i.hasClass(n,r[0]))return;if(i.hasClass(o,r[11]))return;this.builder.uo.saveForUndo(),i.hasClass(n,r[11])?(i.removeClass(n,r[11]),i.addClass(n,r[10])):i.hasClass(n,r[10])?(i.removeClass(n,r[10]),i.addClass(n,r[9])):i.hasClass(n,r[9])?(i.removeClass(n,r[9]),i.addClass(n,r[8])):i.hasClass(n,r[8])?(i.removeClass(n,r[8]),i.addClass(n,r[7])):i.hasClass(n,r[7])?(i.removeClass(n,r[7]),i.addClass(n,r[6])):i.hasClass(n,r[6])?(i.removeClass(n,r[6]),i.addClass(n,r[5])):i.hasClass(n,r[5])?(i.removeClass(n,r[5]),i.addClass(n,r[4])):i.hasClass(n,r[4])?(i.removeClass(n,r[4]),i.addClass(n,r[3])):i.hasClass(n,r[3])?(i.removeClass(n,r[3]),i.addClass(n,r[2])):i.hasClass(n,r[2])?(i.removeClass(n,r[2]),i.addClass(n,r[1])):i.hasClass(n,r[1])&&(i.removeClass(n,r[1]),i.addClass(n,r[0])),i.hasClass(o,r[0])?(i.removeClass(o,r[0]),i.addClass(o,r[1])):i.hasClass(o,r[1])?(i.removeClass(o,r[1]),i.addClass(o,r[2])):i.hasClass(o,r[2])?(i.removeClass(o,r[2]),i.addClass(o,r[3])):i.hasClass(o,r[3])?(i.removeClass(o,r[3]),i.addClass(o,r[4])):i.hasClass(o,r[4])?(i.removeClass(o,r[4]),i.addClass(o,r[5])):i.hasClass(o,r[5])?(i.removeClass(o,r[5]),i.addClass(o,r[6])):i.hasClass(o,r[6])?(i.removeClass(o,r[6]),i.addClass(o,r[7])):i.hasClass(o,r[7])?(i.removeClass(o,r[7]),i.addClass(o,r[8])):i.hasClass(o,r[8])?(i.removeClass(o,r[8]),i.addClass(o,r[9])):i.hasClass(o,r[9])?(i.removeClass(o,r[9]),i.addClass(o,r[10])):i.hasClass(o,r[10])&&(i.removeClass(o,r[10]),i.addClass(o,r[11])),this.builder.opts.onChange()}}removeRow(){let t,e=this.util,i=this.dom,n=e.cellSelected();t=n?n.parentNode:e.rowSelected(),t&&(i.removeClass(t,"row-outline"),e.confirm(e.out("Are you sure you want to delete this block?"),(t=>{let i,n=e.cellSelected();i=n?n.parentNode:e.rowSelected(),i&&t&&(this.builder.uo.saveForUndo(),i.parentNode.removeChild(i),e.checkEmpty(),this.builder.opts.onChange())})))}moveRowUp(){let t,e=this.util,i=this.dom,n=e.cellSelected();if(t=n?n.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.previousElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t,t.previousElementSibling),this.rowTool.position(t),this.builder.opts.onChange();else{let n=t.parentNode,o=null;const s=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(s,(s=>{if(s.innerHTML===n.innerHTML&&o)return i.moveAfter(t,o.lastChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;o=s}))}}moveRowDown(){let t,e=this.util,i=this.dom,n=e.cellSelected();if(t=n?n.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.nextElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t.nextElementSibling,t),this.rowTool.position(t),this.builder.opts.onChange();else{let i=t.parentNode,n=!1;const o=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(o,(o=>{if(n)return o.insertBefore(t,o.firstChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;o.innerHTML===i.innerHTML&&(n=!0)}))}}duplicateRow(){let t,e=this.builder,i=this.util,n=this.dom,o=i.cellSelected();if(t=o?o.parentNode:i.rowSelected(),!t)return;n.removeClass(t,"row-outline"),this.builder.uo.saveForUndo();const s=t.cloneNode(!0);s.removeChild(s.querySelector(".is-row-tool")),s.removeChild(s.querySelector(".is-col-tool"));let a=n.elementChildren(s);a.forEach((t=>{t.removeAttribute("data-click"),t.classList.contains("cell-active")&&(e.activeCol=t)})),n.moveAfter(s,t),n.removeClass(t,"row-active"),n.removeClass(t,"row-outline"),a=n.elementChildren(t),a.forEach((t=>{n.removeClass(t,"cell-active")}));let l=this.builder.doc.querySelector(".builder-active");e.applyBehaviorOn(l),this.rowTool.position(s),this.builder.opts.onChange()}}class Bs{constructor(t){this.builder=t;const e=this.builder.dom;this.dom=e}position(t){let e=this.dom;const i=this.builder.builderStuff;let n=t.querySelector(".is-row-tool"),o=i.querySelector(".rowmore");e.addClass(o,"transition1");const s=n.querySelector(".row-more");let a,l;if(this.builder.iframe){let t=this.builder.iframe.getBoundingClientRect().top+window.pageYOffset,e=this.builder.iframe.getBoundingClientRect().left+window.pageXOffset;a=s.getBoundingClientRect().top,l=s.getBoundingClientRect().left,a+=t,l+=e}else a=s.getBoundingClientRect().top+window.pageYOffset,l=s.getBoundingClientRect().left+window.pageXOffset;o.style.top=a-8+"px",e.removeClass(o,"arrow-bottom"),e.removeClass(o,"arrow-left"),e.removeClass(o,"arrow-right"),e.removeClass(o,"center"),e.removeClass(o,"right"),e.removeClass(o,"left"),"right"===this.builder.opts.rowTool?(o.style.left=l-o.offsetWidth-10+"px",e.addClass(o,"arrow-right"),e.addClass(o,"left")):(o.style.left=l+35+"px",e.addClass(o,"arrow-left"),e.addClass(o,"left")),setTimeout((()=>{e.removeClass(o,"transition1")}),300)}}let $s,Is,Ns,Ps,Ds,zs,Hs,js;class Fs{constructor(t={}){this.opts=t;const e=document.querySelectorAll(this.opts.selector);Array.prototype.forEach.call(e,(t=>{t.setAttribute("draggable",""),t.addEventListener("touchstart",this.dragStart,!1),t.addEventListener("touchend",this.dragEnd,!1),t.addEventListener("mousedown",this.dragStart,!1),t.addEventListener("mouseup",this.dragEnd,!1)})),document.addEventListener("touchmove",this.drag,!1),document.addEventListener("mousemove",this.drag,!1)}dragStart(t){var e,i;t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="none",Hs=!0,js=t.target.parentElement,js.getAttribute("data-xOffset")?e=js.getAttribute("data-xOffset"):(js.setAttribute("data-xOffset",0),e=0),js.getAttribute("data-yOffset")?i=js.getAttribute("data-yOffset"):(js.setAttribute("data-yOffset",0),i=0),"touchstart"===t.type?($s=t.touches[0].clientX-e,Is=t.touches[0].clientY-i):($s=t.clientX-e,Is=t.clientY-i),js.setAttribute("data-initialX",$s),js.setAttribute("data-initialY",Is))}dragEnd(t){t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="",Ns=js.getAttribute("data-currentX"),Ps=js.getAttribute("data-currentY"),$s=Ns,Is=Ps,js.setAttribute("data-initialX",$s),js.setAttribute("data-initialY",Is),Hs=!1)}drag(t){if(Hs){t.preventDefault();var e=js.getAttribute("data-initialX"),i=js.getAttribute("data-initialY");"touchmove"===t.type?(Ns=t.touches[0].clientX-e,Ps=t.touches[0].clientY-i):(Ns=t.clientX-e,Ps=t.clientY-i),js.style.transform="translate3d("+Ns+"px, "+Ps+"px, 0)",js.setAttribute("data-currentX",Ns),js.setAttribute("data-currentY",Ps),Ds=Ns,zs=Ps,js.setAttribute("data-xOffset",Ds),js.setAttribute("data-yOffset",zs)}}isTouchSupport(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}}
|
|
25
|
+
*/class Os{constructor(t){this.builder=t;const e=this.builder.util;this.util=e}getSnippetsHtml(){const t=this.util,e=this.builder.opts.snippetUrl,i=this.builder.opts.snippetPath;let n="[";for(let e=0;e<this.builder.opts.snippetCategories.length;e++)n+=`[${this.builder.opts.snippetCategories[e][0]},'${t.out(this.builder.opts.snippetCategories[e][1])}'],`;n+="]";const o=this.builder.opts.defaultSnippetCategory;return`\n <!DOCTYPE HTML>\n <html>\n \n <head>\n <meta charset="utf-8">\n <title></title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content="">\n <script src="${e}"><\/script>\n <style>\n body {\n // background: #fff;\n background: ${this.builder.styleSnippetBackground};\n margin: 0;\n }\n\n .is-pop-close {\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: transparent;\n z-index:10;width:30px;height:30px;position:absolute;\n top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;\n }\n .is-pop-close:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n /*\n body.dark {\n background: #111;\n }\n .dark .is-categories {\n background: #333;\n }\n .dark .is-category-list a {\n background: #333;\n color: #fff;\n }\n .dark .is-category-list a.active {\n background: #525252;\n color: #fff;\n }\n .dark .is-category-list a:hover {\n color: #fff;\n }\n .dark .is-design-list>li img {\n opacity: 0.93;\n }\n .dark .is-more-categories {\n background: #333;\n }\n .dark .is-more-categories a {\n background: #333;\n color: #fff;\n }\n .dark .is-more-categories a:hover,\n .dark .is-more-categories a:focus {\n background: #4c4c4c;\n }\n .dark .is-more-categories a.active {\n background: #4c4c4c;\n }\n */\n\n \n .dark .is-design-list>li {\n outline: transparent 1px solid;\n }\n\n \n \n /* Scrollbar for modal */\n\n /* Darker color, because background for snippet thumbnails is always light. */\n .dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(78 78 78 / 62%) auto;\n }\n .dark *::-webkit-scrollbar {\n width: 12px;\n }\n .dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .dark *::-webkit-scrollbar-thumb {\n background-color:rgb(78 78 78 / 62%);\n } \n\n .colored-dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(100, 100, 100) auto;\n }\n .colored-dark *::-webkit-scrollbar {\n width: 12px;\n }\n .colored-dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored-dark *::-webkit-scrollbar-thumb {\n background-color:rgb(100, 100, 100);\n } \n\n .colored * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .colored *::-webkit-scrollbar {\n width: 12px;\n }\n .colored *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n } \n\n .light * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .light *::-webkit-scrollbar {\n width: 12px;\n }\n .light *::-webkit-scrollbar-track {\n background: transparent;\n }\n .light *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n } \n \n svg {\n fill: ${this.builder.styleSnippetColor};\n }\n\n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 68px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 30px;\n box-sizing: border-box;\n overflow: auto;\n list-style: none;\n margin: 0;\n }\n \n .is-design-list>li {\n width: 250px;\n min-height:120px;\n position:relative;\n background: #fff;\n // background: ${this.builder.styleToolBackground};\n overflow: hidden;\n margin: 32px 40px 0 0;\n cursor: pointer;\n display: inline-block;\n outline: #ececec 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n\n .is-design-list>li:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>li img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 400px;\n width: 100%\n }\n \n // .is-design-list>li:hover img {\n // opacity: 0.95;\n // }\n \n // .is-design-list>li:hover {\n // background: #999;\n // }\n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>li .is-overlay:after {\n background: rgba(0, 0, 0, 0.02);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n }\n .is-design-list>li:hover .is-overlay:after,\n .is-design-list>li:focus .is-overlay:after {\n opacity: 0.9;\n }\n .dark .is-design-list>li .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n white-space: nowrap;\n padding: 0 30px;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabsBackground};\n // box-shadow: 0 5px 8px rgb(0 0 0 / 4%);\n }\n \n .is-category-list a {\n display: inline-block;\n padding: 10px 20px;\n // background: #fefefe;\n // color: #000;\n background: ${this.builder.styleSnippetTabItemBackground};\n color: ${this.builder.styleSnippetTabItemColor};\n border-radius: 50px;\n \n margin: 0 12px 0 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n transition: box-shadow ease 0.3s;\n }\n \n .is-category-list a:hover {\n /*background: #fafafa;*/\n background: ${this.builder.styleSnippetTabItemBackgroundHover};\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n }\n \n .is-category-list a.active {\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabItemBackgroundActive};\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n box-shadow: none;\n cursor: default;\n }\n\n .is-category-list a:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n \n .is-more-categories {\n display: none;\n position: absolute;\n width: 400px;\n box-sizing: border-box;\n padding: 0;\n z-index: 1;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n // background: #fff;\n background: ${this.builder.styleSnippetMoreItemBackground};\n }\n \n .is-more-categories a {\n width: 200px;\n float: left;\n display: block;\n box-sizing: border-box;\n padding: 12px 20px;\n // background: #fff;\n background: ${this.builder.styleSnippetMoreItemBackground};\n text-decoration: none;\n // color: #000;\n color: ${this.builder.styleSnippetMoreItemColor};\n line-height: 1.6;\n outline: none;\n }\n \n .is-more-categories a:hover,\n .is-more-categories a:focus {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundHover};\n }\n \n .is-more-categories a.active {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundActive};\n }\n \n .is-more-categories.active {\n display: block;\n }\n \n /* First Loading */\n /* .is-category-list {\n display: none;\n }\n \n .is-design-list {\n display: none;\n }\n \n .pace {\n -webkit-pointer-events: none;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n \n .pace-inactive {\n display: none;\n }\n \n .pace .pace-progress {\n background: #000000;\n position: fixed;\n z-index: 2000;\n top: 0;\n right: 100%;\n width: 100%;\n height: 2px;\n } */\n \n .is-more-categories>a:nth-child(0) {\n display: none\n }\n \n .is-more-categories>a:nth-child(1) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: none\n }\n \n @media all and (max-width: 1212px) {\n .is-categories>a:nth-child(7):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: block\n }\n }\n \n @media all and (max-width: 1070px) {\n .is-categories>a:nth-child(6):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: block\n }\n }\n \n @media all and (max-width: 940px) {\n .is-categories>a:nth-child(5):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: block\n }\n }\n \n @media all and (max-width: 700px) {\n .is-categories>a:nth-child(4):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: block\n }\n }\n \n @media all and (max-width: 555px) {\n .is-categories>a:nth-child(3):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: block\n }\n }\n \n @media all and (max-width: 415px) {\n .is-categories>a:nth-child(2):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: block\n }\n }\n \n @media all and (max-width: 640px) {\n .is-more-categories a {\n width: 150px;\n padding: 10px 5px 10px 15px;\n font-size: 10px;\n }\n \n .is-more-categories {\n left: 0 !important;\n width: 100% !important;\n }\n }\n </style>\n </head>\n \n <body${this.builder.styleDark?' class="dark"':""}${this.builder.styleColored?' class="colored"':""}${this.builder.styleColoredDark?' class="colored-dark"':""}${this.builder.styleLight?' class="light"':""}>\n\n <svg style="display:none">\n <defs>\n <symbol viewBox="0 0 512 512" id="ion-ios-close-empty">\n <path d="M340.2 160l-84.4 84.3-84-83.9-11.8 11.8 84 83.8-84 83.9 11.8 11.7 84-83.8 84.4 84.2 11.8-11.7-84.4-84.3 84.4-84.2z"></path>\n </symbol>\n </defs>\n </svg>\n \n <button class="is-pop-close" tabindex="-1">\n <svg class="is-icon-flex" style="width:30px;height:30px;">\n <use xlink:href="#ion-ios-close-empty"></use>\n </svg>\n </button>\n \n <div class="is-category-list">\n <div class="is-categories" style="position:fixed;top:0;left:0;right:0;height:68px;padding-top:17px;box-sizing:border-box;">\n </div>\n </div>\n\n <div class="is-more-categories" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </div>\n \n <ul class="is-design-list" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </ul>\n \n <script${this.builder.nonce?` nonce="${this.builder.nonce}"`:""}>\n \n var snippetPath = '${i}';\n var snippetCategories = ${n};\n var defaultSnippetCategory = ${o};\n\n ${void 0!==this.builder.slider&&null!==this.builder.slider?`\n var slider='${this.builder.slider}';`:"var slider=null;"};\n \n var numOfCat = snippetCategories.length;\n if (numOfCat <= 7) {\n document.querySelector('.is-more-categories').style.width = '200px';\n }\n \n var categorytabs = document.querySelector('.is-categories');\n categorytabs.innerHTML = '';\n let html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n if (i < 7) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n }\n html_catselect += '<a href="" class="more-snippets">' + parent._cb.out('More') + '</a>';\n categorytabs.innerHTML = html_catselect;\n \n var categorymore = document.querySelector('.is-more-categories');\n html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n categorymore.innerHTML = html_catselect;\n \n // Show/hide "More" button\n if (numOfCat <= 7) {\n var bHasMore = false;\n \n const childNodes = categorymore.childNodes;\n let i = childNodes.length;\n while (i--) {\n if(childNodes[i].style.display === 'block') {\n bHasMore = true;\n }\n }\n var more = document.querySelector('.more-snippets');\n if (!bHasMore) more.style.display = 'none';\n else more.style.display = '';\n }\n \n var elms = categorytabs.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n elms = categorymore.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n\n\n document.addEventListener('keydown', function(e){\n if(e.keyCode === 27) { // escape key\n const moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n moreCategories.classList.remove('active');\n const activeTab = categorylist.querySelector('.more-snippets');\n activeTab.classList.remove('active');\n activeTab.focus();\n } else {\n const modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n }\n }\n });\n\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n const select = (elm) => {\n\n if(elm.classList.contains('active')) {\n return false;\n }\n \n var cat = elm.getAttribute('data-cat');\n if (cat) if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n\n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb; \n \n if (snippets[i].category === cat) {\n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n\n newitem.addEventListener('keydown', (e)=>{\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n \n } \n }\n \n if (cat) {\n // Hide all, show items from selected category\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); \n var categorymore_items = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(categorymore_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var items = designlist.querySelectorAll('li');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, function(elm){\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = ''; // TODO: hide & show snippets => animated\n elm.classList.add('active');\n }\n }\n });\n \n } else {\n // show dropdown\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n var _width = moreCategories.offsetWidth;\n more.classList.add('active');\n moreCategories.classList.add('active');\n var top = more.getBoundingClientRect().top;\n var left = more.getBoundingClientRect().left;\n top = top + 50;\n moreCategories.style.top = top + 'px';\n moreCategories.style.left = left + 'px';\n }\n elm.classList.add('active');\n \n };\n\n let tabs = document.querySelectorAll('.is-categories a');\n Array.prototype.forEach.call(tabs, (tab) => {\n \n tab.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if ((e.which === 39 && e.target.nextElementSibling)) { // arrow right key pressed\n e.target.nextElementSibling.focus();\n } else if ((e.which === 37 && e.target.previousElementSibling)) { // arrow left key pressed\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n let moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n return;\n\n }\n\n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n } else if(e.which === 40 && e.target.classList.contains('more-snippets')) { // down\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n\n } \n\n \n });\n \n tab.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n \n });\n\n let dropdownItems = document.querySelectorAll('.is-more-categories a');\n Array.prototype.forEach.call(dropdownItems, (item) => {\n\n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n if(e.keyCode === 38 && e.target.previousElementSibling && window.getComputedStyle(e.target.previousElementSibling).getPropertyValue('display')==='block') { // up\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 40 && e.target.nextElementSibling && window.getComputedStyle(e.target.nextElementSibling).getPropertyValue('display')==='block') { // down\n e.target.nextElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n } \n \n });\n \n item.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n });\n\n\n \n var snippets = data_basic.snippets; //DATA\n\n if (slider !== null){\n if(slider==='slick') {\n //remove glide\n const predicate = (item) => (item.type!=='glide');\n snippets = snippets.filter(predicate);\n } else if(slider==='glide') {\n //remove slick\n const predicate = (item) => (item.type!=='slick');\n snippets = snippets.filter(predicate);\n } else if(slider==='all') {\n // Do Nothing\n } else {\n // remove all slider (if incorrect settings)\n const predicate = (item) => (item.type!=='glide' && item.type!=='slick');\n snippets = snippets.filter(predicate);\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n } else {\n // Backward compatible OR if slider param not set\n\n // Hide slider snippet if slick is not included\n var bHideSliderSnippet = true;\n if(parent._cb.win.jQuery) {\n if(parent._cb.win.jQuery.fn.slick) {\n bHideSliderSnippet = false;\n }\n }\n if(bHideSliderSnippet){\n const result = snippets.filter((item)=>{\n return item.type !== 'slick';\n });\n snippets = [...result];\n } \n\n if(!(parent._cb.win.Glide)){\n const result = snippets.filter((item)=>{\n return !(item.glide || item.type === 'glide');\n });\n snippets = [...result];\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n }\n \n\n for (let i = 0; i <snippets.length; i++) {\n \n snippets[i].id = i+1;\n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === defaultSnippetCategory + '') {\n designlist.insertAdjacentHTML('beforeend', '<li class="active" role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n \n newitem.addEventListener('keydown', (e)=>{\n\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n\n }\n \n\n\n\n /*\n elms = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(elms, function(elm){\n \n elm.addEventListener('click', function(e){\n \n var cat = elm.getAttribute('data-cat');\n if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n \n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === cat) {\n \n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n }\n \n } \n }\n \n // Hide all, show items from selected category\n Array.prototype.forEach.call(elms, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); // hide popup\n //var categorymore_items = categorymore.querySelectorAll('a');\n \n var categorylist = document.querySelector('.is-category-list');\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var more = document.querySelector('.more-snippets');\n more.className = more.className.replace('active', '');\n \n var items = designlist.querySelectorAll('div');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, function(elm){\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = '';\n elm.classList.add('active');\n }\n }\n });\n \n elm.classList.add('active');\n \n e.preventDefault();\n });\n \n });\n */\n \n var close = document.querySelector('.is-pop-close');\n close.addEventListener('click', function(e){\n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n });\n \n // Add document Click event\n document.addEventListener('click', function(e){\n e = e || window.event;\n var target = e.target || e.srcElement; \n \n if(parentsHasClass(target, 'more-snippets')) return;\n if(hasClass(target, 'more-snippets')) return;\n \n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n parent.document.addEventListener('click', function(e){\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n function addSnippet(snippetid) {\n \n // TODO: var framework = parent._cb.opts.framework;\n var snippetPathReplace = parent._cb.opts.snippetPathReplace;\n var emailMode = parent._cb.opts.emailMode;\n \n // \n for (let i = 0; i <snippets.length; i++) {\n if(snippets[i].id + ''=== snippetid) {\n \n var html = snippets[i].html;\n var noedit = snippets[i].noedit;\n break;\n }\n }\n \n var bSnippet;\n if (html.indexOf('"row') === -1) {\n bSnippet = true; // Just snippet (without row/column grid)\n } else {\n bSnippet = false; // Snippet is wrapped in row/colum\n }\n if (emailMode) bSnippet = false;\n\n if(bSnippet) {\n var quickadd = parent._cb.builderStuff.querySelector('.quickadd');\n var mode = quickadd.getAttribute('data-mode');\n if(!mode) {\n // in case of using viewSnippets() to open the dialog (mode=null) => change to non snippet.\n html = '<div class="row">' +\n '<div class="column full">' +\n html +\n '</div>' +\n '</div>';\n bSnippet=false;\n }\n }\n \n // Convert snippet into your defined 12 columns grid \n var rowClass = parent._cb.opts.row; //row\n var colClass = parent._cb.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']\n if(rowClass!=='' && colClass.length===12){\n\n //html = html.replace(new RegExp('row clearfix', 'g'), rowClass);\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);\n \n html = html.replace(new RegExp('column full', 'g'), colClass[11]);\n html = html.replace(new RegExp('column half', 'g'), colClass[5]);\n html = html.replace(new RegExp('column third', 'g'), colClass[3]);\n html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);\n html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);\n html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);\n html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);\n html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);\n }\n \n html = html.replace(/{id}/g, makeid()); // Replace {id} with auto generated id (for custom code snippet)\n \n if(parent._cb.opts.onAdd){\n html = parent._cb.opts.onAdd(html);\n }\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n\n /* for encoded replace, change / to %2F */\n var slash = new RegExp('/', 'g');\n var snippetPathReplace_0 = snippetPathReplace[0].replace(slash, '%2F');\n var snippetPathReplace_1 = snippetPathReplace[1].replace(slash, '%2F');\n regex = new RegExp(snippetPathReplace_0, 'g');\n html = html.replace(regex, snippetPathReplace_1);\n }\n }\n \n parent._cb.addSnippet(html, bSnippet, noedit);\n \n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n \n }\n \n function hasClass(element, classname) {\n if(!element) return false;\n return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);\n }\n \n function removeClass(element, classname) {\n if(!element) return;\n if(element.classList.length>0) {\n element.className = element.className.replace(classname, '');\n }\n }\n \n function parentsHasClass(element, classname) {\n while (element) {\n if(element.tagName === 'BODY' || element.tagName === 'HTML') return false;\n if(!element.classList) return false;\n if (element.classList.contains(classname)) {\n return true;\n }\n element = element.parentNode;\n }\n }\n \n function makeid() {//http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = "";\n var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = "";\n var possible2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n \n <\/script>\n \n </textarea>\n </body>\n \n </html>\n `}}const Ms=t=>{const e=t.util,i=t.builderStuff,n=t.dom;let o=i.querySelector(".quickadd");if(!o){const s=`<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>\n <div class="is-pop-tabs">\n <div class="is-pop-tab-item" data-value="left">${e.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${e.out("Add to Right")}</div>\n </div>\n <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">\n <button title="${e.out("Paragraph")}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${e.out("Paragraph")}</button>\n <button title="${e.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${e.out("Headline")}</button>\n <button title="${e.out("Image")}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${e.out("Image")}</button>\n <button title="${e.out("List")}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${e.out("List")}</button>\n <button title="${e.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${e.out("Heading 1")}</button>\n <button title="${e.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${e.out("Heading 2")}</button>\n <button title="${e.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${e.out("Heading 3")}</button>\n <button title="${e.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${e.out("Heading 4")}</button>\n <button title="${e.out("Quote")}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${e.out("Quote")}</button>\n <button title="${e.out("Preformatted")}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${e.out("Preformatted")}</button>\n ${t.opts.emailMode?"":`<button title="${e.out("Button")}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Button")}</button>`}\n ${t.opts.emailMode?"":`<button title="${e.out("Two Button")}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Two Button")}</button>`}\n <button title="${e.out("Youtube")}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${e.out("Youtube")}</button>\n <button title="${e.out("Video")}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${e.out("Video")}</button>\n <button style="display:none" title="${e.out("Audio")}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${e.out("Audio")}</button>\n <button title="${e.out("Map")}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${e.out("Map")}</button>\n <button title="${e.out("Table")}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${e.out("Table")}</button>\n <button title="${e.out("Icon")}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${e.out("Icon")}</button>\n <button title="${e.out("Social Links")}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${e.out("Social Links")}</button>\n <button title="${e.out("HTML/JS")}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${e.out("HTML/JS")}</button>\n <button title="${e.out("Spacer")}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${e.out("Spacer")}</button>\n <button style="display:none" title="${e.out("Line")}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${e.out("Line")}</button>\n <div class="pop-separator"></div>\n <button title="${e.out("More...")}" class="add-more" style="flex-direction:initial;">${e.out("More...")}</button>\n </div>\n </div>\n \n <div class="is-modal snippets" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-content" style="max-width:1250px;height:90%;padding:0;">\n <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>\n </div>\n </div>\n `;n.appendHtml(i,s),o=i.querySelector(".quickadd"),document.addEventListener("click",(t=>{var i=(t=t||window.event).target||t.srcElement;if("flex"===o.style.display){let t=n.parentsHasClass(i,"quickadd"),s=n.parentsHasClass(i,"row-add"),a=n.parentsHasClass(i,"is-rowadd-tool"),l=n.parentsHasClass(i,"cell-add"),r=n.parentsHasClass(i,"elm-add"),d=n.parentsHasClass(i,"row-add-initial");if(t||s||a||l||r||d)return;e.hidePop(o)}}));let a=o.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(a,(t=>{n.addEventListener(t,"click",(t=>{let e=o.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{n.removeClass(t,"active")})),n.addClass(t.target,"active"),"left"===o.querySelector(".active").getAttribute("data-value")?o.setAttribute("data-mode","cell-left"):o.setAttribute("data-mode","cell-right")}))}));let l=o.querySelector(".add-paragraph");n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",t)})),l=o.querySelector(".add-headline"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),l=o.querySelector(".add-image"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<img src="${t.opts.snippetPath}example.png" alt="" />`;t.opts.snippetSampleImage&&(n=`<img src="${t.opts.snippetSampleImage}" alt="" />`),e.addContent(n,i)})),l=o.querySelector(".add-heading1"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h1>Heading 1 here</h1>",t)})),l=o.querySelector(".add-heading2"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h2>Heading 2 here</h2>",t)})),l=o.querySelector(".add-heading3"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h3>Heading 3 here</h3>",t)})),l=o.querySelector(".add-heading4"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<h4>Heading 4 here</h4>",t)})),l=o.querySelector(".add-preformatted"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pre>",t)})),l=o.querySelector(".add-list"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<ul style="list-style: initial;padding-left: 20px;">\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>',t)})),l=o.querySelector(".add-quote"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<blockquote>Lorem Ipsum is simply dummy text</blockquote>",t)})),l=o.querySelector(".add-button"),l&&n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n </div>';t.opts.emailMode&&(n='<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>'),e.addContent(n,i)})),l=o.querySelector(".add-twobutton"),l&&n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>\n </div>';t.opts.emailMode&&(n='<div>\n <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> \n <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>\n </div>'),e.addContent(n,i)})),l=o.querySelector(".add-spacer"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="spacer height-80"></div>',t)})),l=o.querySelector(".add-line"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent("<hr>",t)})),l=o.querySelector(".add-code"),n.addEventListener(l,"click",(()=>{let i='<div class="row"><div class="column full" data-noedit data-html="'+encodeURIComponent("<h1 id=\"{id}\">Lorem ipsum</h1><p>This is a code block. You can edit this block using the source dialog.</p><script>var docReady = function (fn) {var stateCheck = setInterval(function () {if (document.readyState !== \"complete\") return;clearInterval(stateCheck);try{fn()}catch(e){}}, 1);};docReady(function() {document.querySelector('#{id}').innerHTML ='<b>Hello World..!</b>';});<\/script>")+'"></div></div>',n=t.opts.snippetPathReplace,o=t.opts.row,s=t.opts.cols;if(""!==o&&12===s.length&&(i=i.replace(new RegExp("row clearfix","g"),"row"),i=i.replace(new RegExp('"row',"g"),'"'+o),i=i.replace(new RegExp("column full","g"),s[11]),i=i.replace(new RegExp("column half","g"),s[5]),i=i.replace(new RegExp("column third","g"),s[3]),i=i.replace(new RegExp("column fourth","g"),s[2]),i=i.replace(new RegExp("column fifth","g"),s[1]),i=i.replace(new RegExp("column sixth","g"),s[1]),i=i.replace(new RegExp("column two-third","g"),s[7]),i=i.replace(new RegExp("column two-fourth","g"),s[8]),i=i.replace(new RegExp("column two-fifth","g"),s[9]),i=i.replace(new RegExp("column two-sixth","g"),s[9])),i=i.replace(/{id}/g,e.makeId()),t.opts.onAdd&&(i=t.opts.onAdd(i)),n.length>0&&""!==n[0]){let t=new RegExp(n[0],"g");i=i.replace(t,n[1])}t.addSnippet(i,!1,!0)})),l=o.querySelector(".add-table"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<table class="default" style="border-collapse:collapse;width:100%;">\n <thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </table>',t)})),l=o.querySelector(".add-icon"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),l=o.querySelector(".add-social"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="is-social" style="text-align: center;">\n <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>\n <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>\n <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>\n </div>',t)})),l=o.querySelector(".add-map"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&hl=en&sll=-7.981898,112.626504&sspn=0.009084,0.016512&oq=melbourne&hnear=Melbourne+Victoria,+Australia&t=m&z=10&output=embed"></iframe>\n </div>',t)})),l=o.querySelector(".add-youtube"),n.addEventListener(l,"click",(()=>{const t=o.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>\n </div>',t)})),l=o.querySelector(".add-video"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetPath}example.mp4" type="video/mp4"></video>`;t.opts.snippetSampleVideo&&(n=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetSampleVideo}" type="video/mp4"></video>`),e.addContent(n,i)})),l=o.querySelector(".add-audio"),n.addEventListener(l,"click",(()=>{const i=o.getAttribute("data-mode");let n=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;t.opts.snippetSampleAudio&&(n=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),e.addContent(n,i)}));const r=new Os(t);l=o.querySelector(".add-more"),n.addEventListener(l,"click",(()=>{let t=i.querySelector(".snippets");e.showModal(t,!1,null,!1);var n=t.querySelector("iframe").contentWindow.document;""===n.body.innerHTML&&(n.open(),n.write(r.getSnippetsHtml()),n.close()),e.hidePop(o)}))}return o};class Rs{constructor(t){this.builder=t;const e=this.builder.util,i=this.builder.builderStuff;this.util=e,this.builderStuff=i;const n=this.builder.dom;this.dom=n,this.rowTool=new Bs(t)}moveColumnPrevious(){const t=this.util.cellSelected();t&&t.previousElementSibling&&(this.builder.uo.saveForUndo(),t.parentElement.insertBefore(t,t.previousElementSibling),this.builder.opts.onChange())}moveColumnNext(){let t=this.util;const e=t.cellSelected();if(!e)return;const i=t.cellNext(e);i&&(this.builder.uo.saveForUndo(),e.parentElement.insertBefore(i,e),this.builder.opts.onChange())}moveColumnUp(){let t=this.builder,e=this.util;const i=e.cellSelected();if(!i)return;let n=i.parentNode,o=3;if(n.querySelector(".is-row-overlay")&&(o=4),n.childElementCount-o==1){if(!n.previousElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),n.previousElementSibling.childElementCount>=e+o||n.previousElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),n.parentNode.insertBefore(n,n.previousElementSibling),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=n.previousElementSibling.querySelector(".is-row-tool");n.previousElementSibling.removeChild(e),e=n.previousElementSibling.querySelector(".is-rowadd-tool"),n.previousElementSibling.removeChild(e),e=n.previousElementSibling.querySelector(".is-col-tool"),n.previousElementSibling.removeChild(e),n.previousElementSibling.appendChild(i),n.parentNode.removeChild(n);let o=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(o),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var s=n.cloneNode(!0);s.innerHTML="",s.appendChild(i),n.parentNode.insertBefore(s,n);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}n=i.parentNode,e.fixLayout(n),n.nextElementSibling&&e.fixLayout(n.nextElementSibling)}moveColumnDown(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;let o=n.parentNode,s=3;if(o.querySelector(".is-row-overlay")&&(s=4),o.childElementCount-s==1){if(!o.nextElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),o.nextElementSibling.childElementCount>=e+s||o.nextElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),o.parentNode.insertBefore(o.nextElementSibling,o),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=o.nextElementSibling.querySelector(".is-row-tool");o.nextElementSibling.removeChild(e),e=o.nextElementSibling.querySelector(".is-rowadd-tool"),o.nextElementSibling.removeChild(e),e=o.nextElementSibling.querySelector(".is-col-tool"),o.nextElementSibling.removeChild(e),o.nextElementSibling.appendChild(n),o.parentNode.removeChild(o);let i=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(i),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var a=o.cloneNode(!0);a.innerHTML="",a.appendChild(n),i.moveAfter(a,o);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}o=n.parentNode,e.fixLayout(o),o.previousElementSibling&&e.fixLayout(o.previousElementSibling)}duplicateColumn(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;this.builder.uo.saveForUndo();var o=n.cloneNode(!0);i.removeClass(o,"cell-active"),o.removeAttribute("data-click"),this.builder.opts.enableDragResize&&(n.style.width="",n.style.flex="");let s=n.parentNode,a=3;s.querySelector(".is-row-overlay")&&(a=4);let l=4;if(this.builder.maxColumns&&(l=this.builder.maxColumns),s.childElementCount>=l+a)return alert(e.out("You have reached the maximum number of columns")),!1;s.insertBefore(o,n),e.fixLayout(s);let r=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(r),setTimeout((()=>{n.click()}),30),this.builder.opts.onChange()}removeColumn(){let t=this.util;const e=t.cellSelected();if(!e)return;let i=e.parentNode,n=3;i.querySelector(".is-row-overlay")&&(n=4),t.confirm(t.out("Are you sure you want to delete this block?"),(o=>{o&&(this.builder.uo.saveForUndo(),i.childElementCount-n==1?(i.parentNode.removeChild(i),t.checkEmpty()):(i.removeChild(e),t.fixLayout(i)),t.clearActiveCell(),this.builder.opts.onChange())}))}removeColClasses(t){t.classList.remove("full"),t.classList.remove("two-third"),t.classList.remove("two-fourth"),t.classList.remove("two-fifth"),t.classList.remove("two-sixth"),t.classList.remove("half"),t.classList.remove("third"),t.classList.remove("fourth"),t.classList.remove("fifth"),t.classList.remove("sixth"),t.classList.remove("seventh"),t.classList.remove("eighth"),t.classList.remove("ninth"),t.classList.remove("tenth"),t.classList.remove("eleventh"),t.classList.remove("twelfth")}getAllColumns(t){let e=[],i=this.dom;i.elementChildren(t.parentNode).forEach((n=>{i.hasClass(n,"is-row-tool")||i.hasClass(n,"is-col-tool")||i.hasClass(n,"is-rowadd-tool")||i.hasClass(n,"is-row-overlay")||t!==n&&e.push(n)}));return[t].concat(e)}getCellWidth(t){return t.classList.contains("two-third")?66.666:t.classList.contains("two-fourth")?75:t.classList.contains("two-fifth")?80:t.classList.contains("two-sixth")?83.333:t.classList.contains("half")?50:t.classList.contains("third")?33.333:t.classList.contains("fourth")?25:t.classList.contains("fifth")?20:t.classList.contains("sixth")?16.666:t.classList.contains("seventh")?14.2857:t.classList.contains("eighth")?12.5:t.classList.contains("ninth")?11.111:t.classList.contains("tenth")?10:t.classList.contains("eleventh")?9.09:!!t.classList.contains("twelfth")&&8.333}resizeColumn(t,e,i){let n=this.getCellWidth(t);if(!n){n=parseFloat(window.getComputedStyle(t).getPropertyValue("width"))/parseFloat(window.getComputedStyle(t.parentNode).getPropertyValue("width"))*100}if(e){if(3===i){if(n>=28&&n<=30)return"33.333%";if(n>30&&n<38)return"40%";if(n>=68&&n<=90)return"75%"}if(4===i&&n>=48&&n<=90)return"60%";if(5===i&&n>=38&&n<=90)return"50%";if(6===i){if(n>=10&&n<13)return"16.666%";if(n>=28&&n<=90)return"40%"}if(7===i&&n>=23&&n<=90)return"30%";if(8===i&&n>=13&&n<=90)return"20%";if(n>=78&&n<=90)return"90%";if(n>=73&&n<78)return"80%";if(n>=68&&n<73)return"75%";if(n>=58&&n<68)return"70%";if(n>=48&&n<58)return"60%";if(n>=38&&n<48)return"50%";if(n>=28&&n<38)return"40%";if(n>=23&&n<28)return"30%";if(n>=18&&n<23)return"25%";if(n>=13&&n<18)return"20%";if(n>=10&&n<13)return"15%"}else{if(3===i){if(n>35&&n<=43)return"33.333%";if(n>33&&n<=35)return"30%"}if(6===i&&n>18&&n<=23)return"16.666%";if(n>93&&n<=100)return"90%";if(n>83&&n<=93)return"80%";if(n>78&&n<=83)return"75%";if(n>73&&n<=78)return"70%";if(n>63&&n<=73)return"60%";if(n>53&&n<=63)return"50%";if(n>43&&n<=53)return"40%";if(n>33&&n<=43)return"30%";if(n>28&&n<=33)return"25%";if(n>23&&n<=28)return"20%";if(n>18&&n<=23)return"15%";if(n>=10&&n<=18)return"10%"}return!1}increaseColumn(){let t,e,i=this.builder,n=this.util,o=this.dom,s=n.cellSelected();if(!s)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(s);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(s,!0,t.length);if(e){for(let e=1;e<t.length;e++){let i=t[e];i.style.width="",i.style.flex="",this.removeColClasses(i)}s.style.width=e,s.style.flex="0 0 auto",this.removeColClasses(s)}this.builder.opts.onChange()}return}let a=this.getAllColumns(s);a[1]&&(t=a[1]),a[2]&&(e=a[2]);const l=i.opts.row;let r=i.opts.cols;const d=i.opts.colsizes;if(""!==l&&r.length>0&&d.length>0){if(e)for(let i=0;i<d.length;i++){let n=d[i];for(let i=0;i<n.length;i++)if(3===n[i].length&&o.hasClass(s,n[i][0])&&o.hasClass(t,n[i][1])&&o.hasClass(e,n[i][2])&&i+1!==n.length)return this.builder.uo.saveForUndo(),o.removeClass(s,n[i][0]),o.removeClass(t,n[i][1]),o.removeClass(e,n[i][2]),o.addClass(s,n[i+1][0]),o.addClass(t,n[i+1][1]),o.addClass(e,n[i+1][2]),void this.builder.opts.onChange()}for(let e=0;e<d.length;e++){let i=d[e];for(let e=0;e<i.length;e++)if(2===i[e].length&&o.hasClass(s,i[e][0])&&o.hasClass(t,i[e][1])&&e+1!==i.length)return this.builder.uo.saveForUndo(),o.removeClass(s,i[e][0]),o.removeClass(t,i[e][1]),o.addClass(s,i[e+1][0]),o.addClass(t,i[e+1][1]),void this.builder.opts.onChange()}}else if(""!==l&&r.length>0&&(-1!==s.className.indexOf("col-md-")||(-1!==s.className.indexOf("col-sm-")?r=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==s.className.indexOf("col-xs-")?r=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==s.className.indexOf("col-lg-")?r=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==s.className.indexOf("col-xl-")?r=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==s.className.indexOf("col-xxl-")&&(r=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!o.hasClass(s,r[11]))){if(o.hasClass(s,r[11]))return;if(o.hasClass(t,r[0]))return;this.builder.uo.saveForUndo(),o.hasClass(s,r[10])?(o.removeClass(s,r[10]),o.addClass(s,r[11])):o.hasClass(s,r[9])?(o.removeClass(s,r[9]),o.addClass(s,r[10])):o.hasClass(s,r[8])?(o.removeClass(s,r[8]),o.addClass(s,r[9])):o.hasClass(s,r[7])?(o.removeClass(s,r[7]),o.addClass(s,r[8])):o.hasClass(s,r[6])?(o.removeClass(s,r[6]),o.addClass(s,r[7])):o.hasClass(s,r[5])?(o.removeClass(s,r[5]),o.addClass(s,r[6])):o.hasClass(s,r[4])?(o.removeClass(s,r[4]),o.addClass(s,r[5])):o.hasClass(s,r[3])?(o.removeClass(s,r[3]),o.addClass(s,r[4])):o.hasClass(s,r[2])?(o.removeClass(s,r[2]),o.addClass(s,r[3])):o.hasClass(s,r[1])?(o.removeClass(s,r[1]),o.addClass(s,r[2])):o.hasClass(s,r[0])&&(o.removeClass(s,r[0]),o.addClass(s,r[1])),o.hasClass(t,r[1])?(o.removeClass(t,r[1]),o.addClass(t,r[0])):o.hasClass(t,r[2])?(o.removeClass(t,r[2]),o.addClass(t,r[1])):o.hasClass(t,r[3])?(o.removeClass(t,r[3]),o.addClass(t,r[2])):o.hasClass(t,r[4])?(o.removeClass(t,r[4]),o.addClass(t,r[3])):o.hasClass(t,r[5])?(o.removeClass(t,r[5]),o.addClass(t,r[4])):o.hasClass(t,r[6])?(o.removeClass(t,r[6]),o.addClass(t,r[5])):o.hasClass(t,r[7])?(o.removeClass(t,r[7]),o.addClass(t,r[6])):o.hasClass(t,r[8])?(o.removeClass(t,r[8]),o.addClass(t,r[7])):o.hasClass(t,r[9])?(o.removeClass(t,r[9]),o.addClass(t,r[8])):o.hasClass(t,r[10])?(o.removeClass(t,r[10]),o.addClass(t,r[9])):o.hasClass(t,r[11])&&(o.removeClass(t,r[11]),o.addClass(t,r[10])),this.builder.opts.onChange()}}decreaseColumn(){let t=this.builder,e=this.util,i=this.dom;const n=e.cellSelected();if(!n)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(n);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(n,!1,t.length);if(e){for(let e=1;e<t.length;e++){let i=t[e];i.style.width="",i.style.flex="",this.removeColClasses(i)}n.style.width=e,n.style.flex="0 0 auto",this.removeColClasses(n)}this.builder.opts.onChange()}return}let o,s,a=this.getAllColumns(n);a[1]&&(o=a[1]),a[2]&&(s=a[2]);const l=t.opts.row;let r=t.opts.cols;const d=t.opts.colsizes;if(""!==l&&r.length>0&&d.length>0){if(s)for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(3===e[t].length&&i.hasClass(n,e[t][0])&&i.hasClass(o,e[t][1])&&i.hasClass(s,e[t][2])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(n,e[t][0]),i.removeClass(o,e[t][1]),i.removeClass(s,e[t][2]),i.addClass(n,e[t-1][0]),i.addClass(o,e[t-1][1]),i.addClass(s,e[t-1][2]),void this.builder.opts.onChange()}for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(2===e[t].length&&i.hasClass(n,e[t][0])&&i.hasClass(o,e[t][1])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(n,e[t][0]),i.removeClass(o,e[t][1]),i.addClass(n,e[t-1][0]),i.addClass(o,e[t-1][1]),void this.builder.opts.onChange()}}else if(""!==l&&r.length>0&&(-1!==n.className.indexOf("col-md-")||(-1!==n.className.indexOf("col-sm-")?r=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==n.className.indexOf("col-xs-")?r=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==n.className.indexOf("col-lg-")?r=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==n.className.indexOf("col-xl-")?r=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==n.className.indexOf("col-xxl-")&&(r=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!i.hasClass(n,r[11]))){if(i.hasClass(n,r[0]))return;if(i.hasClass(o,r[11]))return;this.builder.uo.saveForUndo(),i.hasClass(n,r[11])?(i.removeClass(n,r[11]),i.addClass(n,r[10])):i.hasClass(n,r[10])?(i.removeClass(n,r[10]),i.addClass(n,r[9])):i.hasClass(n,r[9])?(i.removeClass(n,r[9]),i.addClass(n,r[8])):i.hasClass(n,r[8])?(i.removeClass(n,r[8]),i.addClass(n,r[7])):i.hasClass(n,r[7])?(i.removeClass(n,r[7]),i.addClass(n,r[6])):i.hasClass(n,r[6])?(i.removeClass(n,r[6]),i.addClass(n,r[5])):i.hasClass(n,r[5])?(i.removeClass(n,r[5]),i.addClass(n,r[4])):i.hasClass(n,r[4])?(i.removeClass(n,r[4]),i.addClass(n,r[3])):i.hasClass(n,r[3])?(i.removeClass(n,r[3]),i.addClass(n,r[2])):i.hasClass(n,r[2])?(i.removeClass(n,r[2]),i.addClass(n,r[1])):i.hasClass(n,r[1])&&(i.removeClass(n,r[1]),i.addClass(n,r[0])),i.hasClass(o,r[0])?(i.removeClass(o,r[0]),i.addClass(o,r[1])):i.hasClass(o,r[1])?(i.removeClass(o,r[1]),i.addClass(o,r[2])):i.hasClass(o,r[2])?(i.removeClass(o,r[2]),i.addClass(o,r[3])):i.hasClass(o,r[3])?(i.removeClass(o,r[3]),i.addClass(o,r[4])):i.hasClass(o,r[4])?(i.removeClass(o,r[4]),i.addClass(o,r[5])):i.hasClass(o,r[5])?(i.removeClass(o,r[5]),i.addClass(o,r[6])):i.hasClass(o,r[6])?(i.removeClass(o,r[6]),i.addClass(o,r[7])):i.hasClass(o,r[7])?(i.removeClass(o,r[7]),i.addClass(o,r[8])):i.hasClass(o,r[8])?(i.removeClass(o,r[8]),i.addClass(o,r[9])):i.hasClass(o,r[9])?(i.removeClass(o,r[9]),i.addClass(o,r[10])):i.hasClass(o,r[10])&&(i.removeClass(o,r[10]),i.addClass(o,r[11])),this.builder.opts.onChange()}}removeRow(){let t,e=this.util,i=this.dom,n=e.cellSelected();t=n?n.parentNode:e.rowSelected(),t&&(i.removeClass(t,"row-outline"),e.confirm(e.out("Are you sure you want to delete this block?"),(t=>{let i,n=e.cellSelected();i=n?n.parentNode:e.rowSelected(),i&&t&&(this.builder.uo.saveForUndo(),i.parentNode.removeChild(i),e.checkEmpty(),this.builder.opts.onChange())})))}moveRowUp(){let t,e=this.util,i=this.dom,n=e.cellSelected();if(t=n?n.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.previousElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t,t.previousElementSibling),this.rowTool.position(t),this.builder.opts.onChange();else{let n=t.parentNode,o=null;const s=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(s,(s=>{if(s.innerHTML===n.innerHTML&&o)return i.moveAfter(t,o.lastChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;o=s}))}}moveRowDown(){let t,e=this.util,i=this.dom,n=e.cellSelected();if(t=n?n.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.nextElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t.nextElementSibling,t),this.rowTool.position(t),this.builder.opts.onChange();else{let i=t.parentNode,n=!1;const o=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(o,(o=>{if(n)return o.insertBefore(t,o.firstChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;o.innerHTML===i.innerHTML&&(n=!0)}))}}duplicateRow(){let t,e=this.builder,i=this.util,n=this.dom,o=i.cellSelected();if(t=o?o.parentNode:i.rowSelected(),!t)return;n.removeClass(t,"row-outline"),this.builder.uo.saveForUndo();const s=t.cloneNode(!0);s.removeChild(s.querySelector(".is-row-tool")),s.removeChild(s.querySelector(".is-col-tool"));let a=n.elementChildren(s);a.forEach((t=>{t.removeAttribute("data-click"),t.classList.contains("cell-active")&&(e.activeCol=t)})),n.moveAfter(s,t),n.removeClass(t,"row-active"),n.removeClass(t,"row-outline"),a=n.elementChildren(t),a.forEach((t=>{n.removeClass(t,"cell-active")}));let l=this.builder.doc.querySelector(".builder-active");e.applyBehaviorOn(l),this.rowTool.position(s),this.builder.opts.onChange()}}class Bs{constructor(t){this.builder=t;const e=this.builder.dom;this.dom=e}position(t){let e=this.dom;const i=this.builder.builderStuff;let n=t.querySelector(".is-row-tool"),o=i.querySelector(".rowmore");e.addClass(o,"transition1");const s=n.querySelector(".row-more");let a,l;if(this.builder.iframe){let t=this.builder.iframe.getBoundingClientRect().top+window.pageYOffset,e=this.builder.iframe.getBoundingClientRect().left+window.pageXOffset;a=s.getBoundingClientRect().top,l=s.getBoundingClientRect().left,a+=t,l+=e}else a=s.getBoundingClientRect().top+window.pageYOffset,l=s.getBoundingClientRect().left+window.pageXOffset;o.style.top=a-8+"px",e.removeClass(o,"arrow-bottom"),e.removeClass(o,"arrow-left"),e.removeClass(o,"arrow-right"),e.removeClass(o,"center"),e.removeClass(o,"right"),e.removeClass(o,"left"),"right"===this.builder.opts.rowTool?(o.style.left=l-o.offsetWidth-10+"px",e.addClass(o,"arrow-right"),e.addClass(o,"left")):(o.style.left=l+35+"px",e.addClass(o,"arrow-left"),e.addClass(o,"left")),setTimeout((()=>{e.removeClass(o,"transition1")}),300)}}let $s,Is,Ns,Ps,Ds,zs,Hs,js;class Fs{constructor(t={}){this.opts=t;const e=document.querySelectorAll(this.opts.selector);Array.prototype.forEach.call(e,(t=>{t.setAttribute("draggable",""),t.addEventListener("touchstart",this.dragStart,!1),t.addEventListener("touchend",this.dragEnd,!1),t.addEventListener("mousedown",this.dragStart,!1),t.addEventListener("mouseup",this.dragEnd,!1)})),document.addEventListener("touchmove",this.drag,!1),document.addEventListener("mousemove",this.drag,!1)}dragStart(t){var e,i;t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="none",Hs=!0,js=t.target.parentElement,js.getAttribute("data-xOffset")?e=js.getAttribute("data-xOffset"):(js.setAttribute("data-xOffset",0),e=0),js.getAttribute("data-yOffset")?i=js.getAttribute("data-yOffset"):(js.setAttribute("data-yOffset",0),i=0),"touchstart"===t.type?($s=t.touches[0].clientX-e,Is=t.touches[0].clientY-i):($s=t.clientX-e,Is=t.clientY-i),js.setAttribute("data-initialX",$s),js.setAttribute("data-initialY",Is))}dragEnd(t){t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="",Ns=js.getAttribute("data-currentX"),Ps=js.getAttribute("data-currentY"),$s=Ns,Is=Ps,js.setAttribute("data-initialX",$s),js.setAttribute("data-initialY",Is),Hs=!1)}drag(t){if(Hs){t.preventDefault();var e=js.getAttribute("data-initialX"),i=js.getAttribute("data-initialY");"touchmove"===t.type?(Ns=t.touches[0].clientX-e,Ps=t.touches[0].clientY-i):(Ns=t.clientX-e,Ps=t.clientY-i),js.style.transform="translate3d("+Ns+"px, "+Ps+"px, 0)",js.setAttribute("data-currentX",Ns),js.setAttribute("data-currentY",Ps),Ds=Ns,zs=Ps,js.setAttribute("data-xOffset",Ds),js.setAttribute("data-yOffset",zs)}}isTouchSupport(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}}
|
|
26
26
|
/**!
|
|
27
27
|
* Sortable 1.14.0
|
|
28
28
|
* @author RubaXa <trash@rubaxa.org>
|