@innovastudio/contentbuilder 1.5.94 → 1.5.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1476,11 +1476,11 @@ const renderQuickAdd = builder => {
|
|
|
1476
1476
|
}
|
|
1477
1477
|
}
|
|
1478
1478
|
</div>
|
|
1479
|
-
<
|
|
1479
|
+
<div id="form_{id}" style="padding: 25px 0 20px">
|
|
1480
1480
|
<div id="{id}"></div>
|
|
1481
1481
|
|
|
1482
1482
|
<div id="status_{id}"></div>
|
|
1483
|
-
</
|
|
1483
|
+
</div>
|
|
1484
1484
|
|
|
1485
1485
|
<script>
|
|
1486
1486
|
var css = document.querySelector('#_style_{id}').innerHTML;
|
|
@@ -1560,8 +1560,6 @@ const renderQuickAdd = builder => {
|
|
|
1560
1560
|
const initialFormData = JSON.stringify(json);
|
|
1561
1561
|
viewer.view(initialFormData);
|
|
1562
1562
|
|
|
1563
|
-
const form = document.querySelector('#form_{id}');
|
|
1564
|
-
|
|
1565
1563
|
var statusInfo = document.querySelector('#status_{id}');
|
|
1566
1564
|
|
|
1567
1565
|
/*
|
|
@@ -1583,11 +1581,16 @@ const renderQuickAdd = builder => {
|
|
|
1583
1581
|
});
|
|
1584
1582
|
*/
|
|
1585
1583
|
|
|
1586
|
-
var btnSend = form.querySelector('.btn-submitform');
|
|
1587
1584
|
|
|
1588
1585
|
async function handleSubmit(event) {
|
|
1589
1586
|
event.preventDefault();
|
|
1587
|
+
|
|
1588
|
+
var form = event.target;
|
|
1589
|
+
form.action = '/formsubmission';
|
|
1590
|
+
form.method = 'POST';
|
|
1590
1591
|
|
|
1592
|
+
var btnSend = form.querySelector('.btn-submitform');
|
|
1593
|
+
|
|
1591
1594
|
btnSend.innerHTML = '<span class="loading-icon"><svg class="animate-spin" style="margin-right:7px;width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>Submit';
|
|
1592
1595
|
|
|
1593
1596
|
var data = new FormData(form);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ContentBuilder=function(){"use strict";class t{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\n\n * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.2) auto;\n }\n *::-webkit-scrollbar {\n width: 12px;\n }\n *::-webkit-scrollbar-track {\n background: rgba(200, 200, 200, 0.2);\n }\n *::-webkit-scrollbar-thumb {\n background-color:rgba(0, 0, 0, 0.2); \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 ${this.builder.canvas||this.builder.isContentBox?"":"\n const canvasFilter = (item) => (item.mode!=='canvas');\n snippets = snippets.filter(canvasFilter);\n "}\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\n // check if is block\n if(html.includes('"is-block')) {\n html = snippets[i].html2;\n }\n\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?quickadd.getAttribute('data-mode'):null;\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 e=e=>{const i=e.util,n=e.builderStuff,o=e.dom;let s=["paragraph","headline","image","list","heading1","heading2","heading3","heading4","quote","preformatted","button","twobutton","map","youtube","video","icon","svg","form","table","social","code","spacer"];e.quickAddButtons&&(s=e.quickAddButtons);const l={paragraph:`<button title="${i.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>${i.out("Paragraph")}</button>`,headline:`<button title="${i.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${i.out("Headline")}</button>`,image:`<button title="${i.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>${i.out("Image")}</button>`,list:`<button title="${i.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>${i.out("List")}</button>`,heading1:`<button title="${i.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${i.out("Heading 1")}</button>`,heading2:`<button title="${i.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${i.out("Heading 2")}</button>`,heading3:`<button title="${i.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${i.out("Heading 3")}</button>`,heading4:`<button title="${i.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${i.out("Heading 4")}</button>`,quote:`<button title="${i.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>${i.out("Quote")}</button>`,preformatted:`<button style="display:none" title="${i.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>${i.out("Preformatted")}</button>`,button:`<button title="${i.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>${i.out("Button")}</button>`,twobutton:`<button title="${i.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>${i.out("Two Button")}</button>`,map:`<button title="${i.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>${i.out("Map")}</button>`,youtube:`<button title="${i.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>${i.out("Youtube")}</button>`,video:`<button title="${i.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>${i.out("Video")}</button>`,audio:`<button title="${i.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>${i.out("Audio")}</button>`,icon:`<button title="${i.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>${i.out("Icon")}</button>`,svg:`<button title="${i.out("SVG")}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${i.out("SVG")}</button>`,table:`<button title="${i.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>${i.out("Table")}</button>`,social:`<button title="${i.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>${i.out("Social Links")}</button>`,code:`<button title="${i.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>${i.out("HTML/JS")}</button>`,spacer:`<button title="${i.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>${i.out("Spacer")}</button>`,form:`<button title="${i.out("Form")}" class="add-form"><span style="display:block;margin:0 0 8px;">\n <svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;fill:none" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-forms"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>\n </span>${i.out("Form")}</button>`,line:`<button title="${i.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>${i.out("Line")}</button>`};let a=s.filter((t=>{if(e.opts.emailMode&&"button"===t)return!1;if(e.opts.emailMode&&"twobutton"===t)return!1;if(!e.quickAddButtons){if(!e.win.FormViewer&&"form"===t)return!1;if(e.win.FormViewer&&"svg"===t)return!1}return!0})).map((t=>l[t]||"")).join(""),r=n.querySelector(".quickadd");if(!r){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">${i.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${i.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 ${a}\n <div class="pop-separator" ${e.noSnippets?' style="display:none"':""}></div>\n <button title="${i.out("More...")}" class="add-more" style="flex-direction:initial;${e.noSnippets?"display:none":""}">${i.out("More...")}</button>\n </div>\n </div>`;o.appendHtml(n,s),r=n.querySelector(".quickadd");let l=r.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(l,(t=>{o.addEventListener(t,"click",(t=>{let e=r.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{o.removeClass(t,"active")})),o.addClass(t.target,"active"),"left"===r.querySelector(".active").getAttribute("data-value")?r.setAttribute("data-mode","cell-left"):r.setAttribute("data-mode","cell-right")}))}));let c=r.querySelector(".add-paragraph");o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-headline"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),c=r.querySelector(".add-image"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");let n=`<img src="${e.opts.snippetPath}example.png" alt="" />`;e.opts.snippetSampleImage&&(n=`<img src="${e.opts.snippetSampleImage}" alt="" />`),i.addContent(n,t)})),c=r.querySelector(".add-heading1"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h1>Heading 1 here</h1>",t)})),c=r.querySelector(".add-heading2"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h2>Heading 2 here</h2>",t)})),c=r.querySelector(".add-heading3"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h3>Heading 3 here</h3>",t)})),c=r.querySelector(".add-heading4"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h4>Heading 4 here</h4>",t)})),c=r.querySelector(".add-preformatted"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-list"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<ul>\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>",t)})),c=r.querySelector(".add-quote"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('\n <div class="text-left">\n <i class="icon ion-quote size-28"></i>\n </div>\n <p class="size-21 leading-14">It\'s easy to use, customizable, and user-friendly. A truly amazing features.</p>\n ',t)})),c=r.querySelector(".add-button"),o.addEventListener(c,"click",(()=>{const t=r.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>';e.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>'),i.addContent(n,t)})),c=r.querySelector(".add-twobutton"),o.addEventListener(c,"click",(()=>{const t=r.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>';e.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>'),i.addContent(n,t)})),c=r.querySelector(".add-spacer"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div class="spacer height-80"></div>',t)})),c=r.querySelector(".add-line"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<hr>",t)})),c=r.querySelector(".add-code"),o.addEventListener(c,"click",(()=>{let t='<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=e.opts.snippetPathReplace,o=e.opts.row,s=e.opts.cols;if(""!==o&&12===s.length&&(t=t.replace(new RegExp("row clearfix","g"),"row"),t=t.replace(new RegExp('"row',"g"),'"'+o),t=t.replace(new RegExp("column full","g"),s[11]),t=t.replace(new RegExp("column half","g"),s[5]),t=t.replace(new RegExp("column third","g"),s[3]),t=t.replace(new RegExp("column fourth","g"),s[2]),t=t.replace(new RegExp("column fifth","g"),s[1]),t=t.replace(new RegExp("column sixth","g"),s[1]),t=t.replace(new RegExp("column two-third","g"),s[7]),t=t.replace(new RegExp("column two-fourth","g"),s[8]),t=t.replace(new RegExp("column two-fifth","g"),s[9]),t=t.replace(new RegExp("column two-sixth","g"),s[9])),t=t.replace(/{id}/g,i.makeId()),e.opts.onAdd&&(t=e.opts.onAdd(t)),n.length>0&&""!==n[0]){let e=new RegExp(n[0],"g");t=t.replace(e,n[1])}e.addSnippet(t,!1,!0)})),c=r.querySelector(".add-form"),o.addEventListener(c,"click",(()=>{let t=`\n\t\t\t\t<div class="row">\n <div class="column" data-noedit \n data-dialog-width="1600px" \n data-dialog-height="85vh" \n data-module="form-builder" \n data-module-desc="Form Builder" \n data-html="\n\n\t\t\t\t\t\t\t${encodeURIComponent('\n <div id="_style_{id}" style="display:none">\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </div>\n <form id="form_{id}" method="POST" action="/formsubmission" style="padding: 25px 0 20px">\n <div id="{id}"></div>\n\n <div id="status_{id}"></div>\n </form>\n \n <script>\n var css = document.querySelector(\'#_style_{id}\').innerHTML;\n var head = document.getElementsByTagName(\'head\')[0];\n var s = document.createElement(\'style\');\n s.appendChild(document.createTextNode(css));\n head.appendChild(s);\n \n var docReady = function(fn) {\n var stateCheck = setInterval(function() {\n if (document.readyState !== "complete") return;\n clearInterval(stateCheck);\n try {\n fn()\n } catch (e) {}\n }, 1);\n };\n \n docReady(function() {\n \n var elm = document.getElementById(\'{id}\');\n var viewer = new FormViewer(elm, {\n onChange: (json) => {\n // console.log(json);\n },\n });\n\n let json = {\n "title": "Register for the Tech Conference",\n "description": "Join us for an insightful and engaging experience.",\n "elements": [\n {\n "title": "Full Name:",\n "name": "full_name",\n "type": "short-text",\n "isRequired": true,\n "placeholder": "Enter your full name"\n },\n {\n "title": "Ticket Type:",\n "name": "ticket_type",\n "type": "select",\n "isRequired": true,\n "choices": [\n "Standard Admission",\n "VIP Admission",\n "Student Discount"\n ]\n },\n {\n "title": "Select the sessions you’re interested in:",\n "name": "select_the_sessions_youre_interested_in",\n "type": "multi-select",\n "choices": [\n "Keynote Speech",\n "AI Workshop",\n "Networking Session"\n ]\n },\n {\n "title": "Are you attending the networking dinner?",\n "name": "are_you_attending_the_networking_dinner",\n "type": "switch"\n },\n {\n "title": "Email:",\n "name": "email",\n "type": "email",\n "isRequired": true,\n "placeholder": "Enter your email"\n }\n ],\n "useSubmitButton": true,\n "submitText": "Submit"\n};\n \n const initialFormData = JSON.stringify(json);\n viewer.view(initialFormData); \n\n const form = document.querySelector(\'#form_{id}\');\n\n var statusInfo = document.querySelector(\'#status_{id}\');\n\n /* \n form.addEventListener(\'submit\', async (event) => {\n\n event.preventDefault(); \n\n const form = event.target; \n const formData = new FormData(form); \n\n fetch(\'/formsubmission\', {\n method: \'POST\',\n body: formData,\n })\n .then(response=>response.json())\n .then(response=>{\n console.log(response);\n });\n });\n */\n\n var btnSend = form.querySelector(\'.btn-submitform\');\n\n async function handleSubmit(event) {\n event.preventDefault();\n\n btnSend.innerHTML = \'<span class="loading-icon"><svg class="animate-spin" style="margin-right:7px;width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>Submit\';\n\n var data = new FormData(form);\n fetch(form.action, {\n method: form.method,\n body: data,\n headers: {\n \'Accept\': \'application/json\'\n }\n }).then(response => {\n if (response.ok) {\n statusInfo.innerHTML = \'<div class="text-center pt-4"><i class="bi bi-send-check size-64"></i>\' +\n \'</div><div class="leading-11 text-center size-38 pb-4">Thanks for your submission!</div>\';\n form.reset();\n } else {\n response.json().then(data => {\n if (Object.hasOwn(data, \'errors\')) {\n statusInfo.innerHTML = data[\'errors\'].map(error => error[\'message\']).join(\', \');\n } else {\n statusInfo.innerHTML = \'<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>\';\n }\n });\n }\n\n btnSend.innerHTML = \'Submit\';\n }).catch(error => {\n statusInfo.innerHTML = \'<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>\';\n\n btnSend.innerHTML = \'Submit\';\n });\n }\n\n viewer.settings.onSubmit = handleSubmit;\n \n });\n <\/script>\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t')}\n\n " \n\t\t\t\t\t\t\n\t\t\t\t\t\tdata-settings="\n\n\t\t\t\t\t\t\t${encodeURIComponent('\n {\n "json": {\n "title": "Register for the Tech Conference",\n "description": "Join us for an insightful and engaging experience.",\n "elements": [\n {\n "title": "Full Name:",\n "name": "full_name",\n "type": "short-text",\n "isRequired": true,\n "placeholder": "Enter your full name"\n },\n {\n "title": "Ticket Type:",\n "name": "ticket_type",\n "type": "select",\n "isRequired": true,\n "choices": [\n "Standard Admission",\n "VIP Admission",\n "Student Discount"\n ]\n },\n {\n "title": "Select the sessions you’re interested in:",\n "name": "select_the_sessions_youre_interested_in",\n "type": "multi-select",\n "choices": [\n "Keynote Speech",\n "AI Workshop",\n "Networking Session"\n ]\n },\n {\n "title": "Are you attending the networking dinner?",\n "name": "are_you_attending_the_networking_dinner",\n "type": "switch"\n },\n {\n "title": "Email:",\n "name": "email",\n "type": "email",\n "isRequired": true,\n "placeholder": "Enter your email"\n }\n ],\n "useSubmitButton": true,\n "submitText": "Submit"\n},\n "thankYouMessage": "Thanks for your submission!",\n "errorMessage": "Oops! There was a problem submitting your form.",\n "buttonText": "Submit",\n "hideHeader": false,\n "formAction": "/formsubmission"\n }\n ')}\n\t\t\t\t\t\t\n\t\t\t\t\t\t">\n\n </div>\n </div>\n\t\t\t`,n=e.opts.snippetPathReplace,o=e.opts.row,s=e.opts.cols;if(""!==o&&12===s.length&&(t=t.replace(new RegExp("row clearfix","g"),"row"),t=t.replace(new RegExp('"row',"g"),'"'+o),t=t.replace(new RegExp("column full","g"),s[11]),t=t.replace(new RegExp("column half","g"),s[5]),t=t.replace(new RegExp("column third","g"),s[3]),t=t.replace(new RegExp("column fourth","g"),s[2]),t=t.replace(new RegExp("column fifth","g"),s[1]),t=t.replace(new RegExp("column sixth","g"),s[1]),t=t.replace(new RegExp("column two-third","g"),s[7]),t=t.replace(new RegExp("column two-fourth","g"),s[8]),t=t.replace(new RegExp("column two-fifth","g"),s[9]),t=t.replace(new RegExp("column two-sixth","g"),s[9])),t=t.replace(/{id}/g,i.makeId()),e.opts.onAdd&&(t=e.opts.onAdd(t)),n.length>0&&""!==n[0]){let e=new RegExp(n[0],"g");t=t.replace(e,n[1])}e.addSnippet(t,!1,!0)})),c=r.querySelector(".add-table"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-icon"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),c=r.querySelector(".add-svg"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div style="text-align: center;">\n <svg viewBox="0 0 259.25 969.39" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(100 177 45); width: 150px; height: 150px;">\n <g>\n <path d="M184,17.61S101.39,318.78,98.85,334,69.62,463.64,67.08,517s-16.52,141,19.06,202,86.41,110.56,151.21,75S320,675.85,320,675.85s16.52-179.17-58.45-414.26S184,17.61,184,17.61Z" transform="translate(-62.25 -17.61)"></path>\n <path d="M190.34,179l-7.63,319s-28-17.79-30.49-24.15-20.34-26.68-20.34-26.68,15.25,36.85,20.34,40.66,26.68,34.31,26.68,34.31l-1.27,181.72,1.27,274.47s11.44,17.79,14,2.54,3.81-305,3.81-305,34.31-78.79,41.94-95.3,12.7-39.4,12.7-39.4-45.74,87.68-50.83,94-6.35-231.28-6.35-231.28,11.44,6.36,22.87-33,7.63-52.1,7.63-52.1-14,45.74-20.33,55.91S190.34,179,190.34,179Z" transform="translate(-62.25 -17.61)" style="fill:#ededed"></path>\n </g>\n </svg>\n </div>',t)})),c=r.querySelector(".add-social"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('\n <div class="is-social text-left">\n <a href="https://twitter.com/"><i class="bi bi-twitter-x"></i></a>\n <a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a>\n <a href="https://www.instagram.com/" title=""><i class="icon bi bi-instagram"></i></a>\n </div>\n ',t)})),c=r.querySelector(".add-map"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-youtube"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-video"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");let n=`<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">\n <source src="${e.opts.snippetPath}example.mp4" type="video/mp4"></video>`;e.opts.snippetSampleVideo&&(n=`<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">\n <source src="${e.opts.snippetSampleVideo}" type="video/mp4"></video>`),i.addContent(n,t)})),c=r.querySelector(".add-audio"),o.addEventListener(c,"click",(()=>{const t=r.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="${e.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;e.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="${e.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),i.addContent(n,t)}));const u=new t(e);c=r.querySelector(".add-more"),o.addEventListener(c,"click",(()=>{let t=n.querySelector(".snippets");i.showModal(t,!1,null,!1);const e=t.querySelector("iframe");""===e.contentWindow.document.body.innerHTML&&(e.srcdoc=u.getSnippetsHtml()),i.hidePop(r)}))}return r};
|
|
1
|
+
var ContentBuilder=function(){"use strict";class t{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\n\n * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.2) auto;\n }\n *::-webkit-scrollbar {\n width: 12px;\n }\n *::-webkit-scrollbar-track {\n background: rgba(200, 200, 200, 0.2);\n }\n *::-webkit-scrollbar-thumb {\n background-color:rgba(0, 0, 0, 0.2); \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 ${this.builder.canvas||this.builder.isContentBox?"":"\n const canvasFilter = (item) => (item.mode!=='canvas');\n snippets = snippets.filter(canvasFilter);\n "}\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\n // check if is block\n if(html.includes('"is-block')) {\n html = snippets[i].html2;\n }\n\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?quickadd.getAttribute('data-mode'):null;\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 e=e=>{const i=e.util,n=e.builderStuff,o=e.dom;let s=["paragraph","headline","image","list","heading1","heading2","heading3","heading4","quote","preformatted","button","twobutton","map","youtube","video","icon","svg","form","table","social","code","spacer"];e.quickAddButtons&&(s=e.quickAddButtons);const l={paragraph:`<button title="${i.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>${i.out("Paragraph")}</button>`,headline:`<button title="${i.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${i.out("Headline")}</button>`,image:`<button title="${i.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>${i.out("Image")}</button>`,list:`<button title="${i.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>${i.out("List")}</button>`,heading1:`<button title="${i.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${i.out("Heading 1")}</button>`,heading2:`<button title="${i.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${i.out("Heading 2")}</button>`,heading3:`<button title="${i.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${i.out("Heading 3")}</button>`,heading4:`<button title="${i.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${i.out("Heading 4")}</button>`,quote:`<button title="${i.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>${i.out("Quote")}</button>`,preformatted:`<button style="display:none" title="${i.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>${i.out("Preformatted")}</button>`,button:`<button title="${i.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>${i.out("Button")}</button>`,twobutton:`<button title="${i.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>${i.out("Two Button")}</button>`,map:`<button title="${i.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>${i.out("Map")}</button>`,youtube:`<button title="${i.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>${i.out("Youtube")}</button>`,video:`<button title="${i.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>${i.out("Video")}</button>`,audio:`<button title="${i.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>${i.out("Audio")}</button>`,icon:`<button title="${i.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>${i.out("Icon")}</button>`,svg:`<button title="${i.out("SVG")}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${i.out("SVG")}</button>`,table:`<button title="${i.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>${i.out("Table")}</button>`,social:`<button title="${i.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>${i.out("Social Links")}</button>`,code:`<button title="${i.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>${i.out("HTML/JS")}</button>`,spacer:`<button title="${i.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>${i.out("Spacer")}</button>`,form:`<button title="${i.out("Form")}" class="add-form"><span style="display:block;margin:0 0 8px;">\n <svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;fill:none" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-forms"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>\n </span>${i.out("Form")}</button>`,line:`<button title="${i.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>${i.out("Line")}</button>`};let a=s.filter((t=>{if(e.opts.emailMode&&"button"===t)return!1;if(e.opts.emailMode&&"twobutton"===t)return!1;if(!e.quickAddButtons){if(!e.win.FormViewer&&"form"===t)return!1;if(e.win.FormViewer&&"svg"===t)return!1}return!0})).map((t=>l[t]||"")).join(""),r=n.querySelector(".quickadd");if(!r){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">${i.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${i.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 ${a}\n <div class="pop-separator" ${e.noSnippets?' style="display:none"':""}></div>\n <button title="${i.out("More...")}" class="add-more" style="flex-direction:initial;${e.noSnippets?"display:none":""}">${i.out("More...")}</button>\n </div>\n </div>`;o.appendHtml(n,s),r=n.querySelector(".quickadd");let l=r.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(l,(t=>{o.addEventListener(t,"click",(t=>{let e=r.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{o.removeClass(t,"active")})),o.addClass(t.target,"active"),"left"===r.querySelector(".active").getAttribute("data-value")?r.setAttribute("data-mode","cell-left"):r.setAttribute("data-mode","cell-right")}))}));let c=r.querySelector(".add-paragraph");o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-headline"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),c=r.querySelector(".add-image"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");let n=`<img src="${e.opts.snippetPath}example.png" alt="" />`;e.opts.snippetSampleImage&&(n=`<img src="${e.opts.snippetSampleImage}" alt="" />`),i.addContent(n,t)})),c=r.querySelector(".add-heading1"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h1>Heading 1 here</h1>",t)})),c=r.querySelector(".add-heading2"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h2>Heading 2 here</h2>",t)})),c=r.querySelector(".add-heading3"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h3>Heading 3 here</h3>",t)})),c=r.querySelector(".add-heading4"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<h4>Heading 4 here</h4>",t)})),c=r.querySelector(".add-preformatted"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-list"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<ul>\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>",t)})),c=r.querySelector(".add-quote"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('\n <div class="text-left">\n <i class="icon ion-quote size-28"></i>\n </div>\n <p class="size-21 leading-14">It\'s easy to use, customizable, and user-friendly. A truly amazing features.</p>\n ',t)})),c=r.querySelector(".add-button"),o.addEventListener(c,"click",(()=>{const t=r.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>';e.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>'),i.addContent(n,t)})),c=r.querySelector(".add-twobutton"),o.addEventListener(c,"click",(()=>{const t=r.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>';e.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>'),i.addContent(n,t)})),c=r.querySelector(".add-spacer"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div class="spacer height-80"></div>',t)})),c=r.querySelector(".add-line"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent("<hr>",t)})),c=r.querySelector(".add-code"),o.addEventListener(c,"click",(()=>{let t='<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=e.opts.snippetPathReplace,o=e.opts.row,s=e.opts.cols;if(""!==o&&12===s.length&&(t=t.replace(new RegExp("row clearfix","g"),"row"),t=t.replace(new RegExp('"row',"g"),'"'+o),t=t.replace(new RegExp("column full","g"),s[11]),t=t.replace(new RegExp("column half","g"),s[5]),t=t.replace(new RegExp("column third","g"),s[3]),t=t.replace(new RegExp("column fourth","g"),s[2]),t=t.replace(new RegExp("column fifth","g"),s[1]),t=t.replace(new RegExp("column sixth","g"),s[1]),t=t.replace(new RegExp("column two-third","g"),s[7]),t=t.replace(new RegExp("column two-fourth","g"),s[8]),t=t.replace(new RegExp("column two-fifth","g"),s[9]),t=t.replace(new RegExp("column two-sixth","g"),s[9])),t=t.replace(/{id}/g,i.makeId()),e.opts.onAdd&&(t=e.opts.onAdd(t)),n.length>0&&""!==n[0]){let e=new RegExp(n[0],"g");t=t.replace(e,n[1])}e.addSnippet(t,!1,!0)})),c=r.querySelector(".add-form"),o.addEventListener(c,"click",(()=>{let t=`\n\t\t\t\t<div class="row">\n <div class="column" data-noedit \n data-dialog-width="1600px" \n data-dialog-height="85vh" \n data-module="form-builder" \n data-module-desc="Form Builder" \n data-html="\n\n\t\t\t\t\t\t\t${encodeURIComponent('\n <div id="_style_{id}" style="display:none">\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n </div>\n <div id="form_{id}" style="padding: 25px 0 20px">\n <div id="{id}"></div>\n\n <div id="status_{id}"></div>\n </div>\n \n <script>\n var css = document.querySelector(\'#_style_{id}\').innerHTML;\n var head = document.getElementsByTagName(\'head\')[0];\n var s = document.createElement(\'style\');\n s.appendChild(document.createTextNode(css));\n head.appendChild(s);\n \n var docReady = function(fn) {\n var stateCheck = setInterval(function() {\n if (document.readyState !== "complete") return;\n clearInterval(stateCheck);\n try {\n fn()\n } catch (e) {}\n }, 1);\n };\n \n docReady(function() {\n \n var elm = document.getElementById(\'{id}\');\n var viewer = new FormViewer(elm, {\n onChange: (json) => {\n // console.log(json);\n },\n });\n\n let json = {\n "title": "Register for the Tech Conference",\n "description": "Join us for an insightful and engaging experience.",\n "elements": [\n {\n "title": "Full Name:",\n "name": "full_name",\n "type": "short-text",\n "isRequired": true,\n "placeholder": "Enter your full name"\n },\n {\n "title": "Ticket Type:",\n "name": "ticket_type",\n "type": "select",\n "isRequired": true,\n "choices": [\n "Standard Admission",\n "VIP Admission",\n "Student Discount"\n ]\n },\n {\n "title": "Select the sessions you’re interested in:",\n "name": "select_the_sessions_youre_interested_in",\n "type": "multi-select",\n "choices": [\n "Keynote Speech",\n "AI Workshop",\n "Networking Session"\n ]\n },\n {\n "title": "Are you attending the networking dinner?",\n "name": "are_you_attending_the_networking_dinner",\n "type": "switch"\n },\n {\n "title": "Email:",\n "name": "email",\n "type": "email",\n "isRequired": true,\n "placeholder": "Enter your email"\n }\n ],\n "useSubmitButton": true,\n "submitText": "Submit"\n};\n \n const initialFormData = JSON.stringify(json);\n viewer.view(initialFormData); \n\n var statusInfo = document.querySelector(\'#status_{id}\');\n\n /* \n form.addEventListener(\'submit\', async (event) => {\n\n event.preventDefault(); \n\n const form = event.target; \n const formData = new FormData(form); \n\n fetch(\'/formsubmission\', {\n method: \'POST\',\n body: formData,\n })\n .then(response=>response.json())\n .then(response=>{\n console.log(response);\n });\n });\n */\n\n\n async function handleSubmit(event) {\n event.preventDefault();\n \n var form = event.target;\n form.action = \'/formsubmission\';\n form.method = \'POST\';\n\n var btnSend = form.querySelector(\'.btn-submitform\');\n \n btnSend.innerHTML = \'<span class="loading-icon"><svg class="animate-spin" style="margin-right:7px;width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>Submit\';\n\n var data = new FormData(form);\n fetch(form.action, {\n method: form.method,\n body: data,\n headers: {\n \'Accept\': \'application/json\'\n }\n }).then(response => {\n if (response.ok) {\n statusInfo.innerHTML = \'<div class="text-center pt-4"><i class="bi bi-send-check size-64"></i>\' +\n \'</div><div class="leading-11 text-center size-38 pb-4">Thanks for your submission!</div>\';\n form.reset();\n } else {\n response.json().then(data => {\n if (Object.hasOwn(data, \'errors\')) {\n statusInfo.innerHTML = data[\'errors\'].map(error => error[\'message\']).join(\', \');\n } else {\n statusInfo.innerHTML = \'<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>\';\n }\n });\n }\n\n btnSend.innerHTML = \'Submit\';\n }).catch(error => {\n statusInfo.innerHTML = \'<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>\';\n\n btnSend.innerHTML = \'Submit\';\n });\n }\n\n viewer.settings.onSubmit = handleSubmit;\n \n });\n <\/script>\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t')}\n\n " \n\t\t\t\t\t\t\n\t\t\t\t\t\tdata-settings="\n\n\t\t\t\t\t\t\t${encodeURIComponent('\n {\n "json": {\n "title": "Register for the Tech Conference",\n "description": "Join us for an insightful and engaging experience.",\n "elements": [\n {\n "title": "Full Name:",\n "name": "full_name",\n "type": "short-text",\n "isRequired": true,\n "placeholder": "Enter your full name"\n },\n {\n "title": "Ticket Type:",\n "name": "ticket_type",\n "type": "select",\n "isRequired": true,\n "choices": [\n "Standard Admission",\n "VIP Admission",\n "Student Discount"\n ]\n },\n {\n "title": "Select the sessions you’re interested in:",\n "name": "select_the_sessions_youre_interested_in",\n "type": "multi-select",\n "choices": [\n "Keynote Speech",\n "AI Workshop",\n "Networking Session"\n ]\n },\n {\n "title": "Are you attending the networking dinner?",\n "name": "are_you_attending_the_networking_dinner",\n "type": "switch"\n },\n {\n "title": "Email:",\n "name": "email",\n "type": "email",\n "isRequired": true,\n "placeholder": "Enter your email"\n }\n ],\n "useSubmitButton": true,\n "submitText": "Submit"\n},\n "thankYouMessage": "Thanks for your submission!",\n "errorMessage": "Oops! There was a problem submitting your form.",\n "buttonText": "Submit",\n "hideHeader": false,\n "formAction": "/formsubmission"\n }\n ')}\n\t\t\t\t\t\t\n\t\t\t\t\t\t">\n\n </div>\n </div>\n\t\t\t`,n=e.opts.snippetPathReplace,o=e.opts.row,s=e.opts.cols;if(""!==o&&12===s.length&&(t=t.replace(new RegExp("row clearfix","g"),"row"),t=t.replace(new RegExp('"row',"g"),'"'+o),t=t.replace(new RegExp("column full","g"),s[11]),t=t.replace(new RegExp("column half","g"),s[5]),t=t.replace(new RegExp("column third","g"),s[3]),t=t.replace(new RegExp("column fourth","g"),s[2]),t=t.replace(new RegExp("column fifth","g"),s[1]),t=t.replace(new RegExp("column sixth","g"),s[1]),t=t.replace(new RegExp("column two-third","g"),s[7]),t=t.replace(new RegExp("column two-fourth","g"),s[8]),t=t.replace(new RegExp("column two-fifth","g"),s[9]),t=t.replace(new RegExp("column two-sixth","g"),s[9])),t=t.replace(/{id}/g,i.makeId()),e.opts.onAdd&&(t=e.opts.onAdd(t)),n.length>0&&""!==n[0]){let e=new RegExp(n[0],"g");t=t.replace(e,n[1])}e.addSnippet(t,!1,!0)})),c=r.querySelector(".add-table"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-icon"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),c=r.querySelector(".add-svg"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('<div style="text-align: center;">\n <svg viewBox="0 0 259.25 969.39" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(100 177 45); width: 150px; height: 150px;">\n <g>\n <path d="M184,17.61S101.39,318.78,98.85,334,69.62,463.64,67.08,517s-16.52,141,19.06,202,86.41,110.56,151.21,75S320,675.85,320,675.85s16.52-179.17-58.45-414.26S184,17.61,184,17.61Z" transform="translate(-62.25 -17.61)"></path>\n <path d="M190.34,179l-7.63,319s-28-17.79-30.49-24.15-20.34-26.68-20.34-26.68,15.25,36.85,20.34,40.66,26.68,34.31,26.68,34.31l-1.27,181.72,1.27,274.47s11.44,17.79,14,2.54,3.81-305,3.81-305,34.31-78.79,41.94-95.3,12.7-39.4,12.7-39.4-45.74,87.68-50.83,94-6.35-231.28-6.35-231.28,11.44,6.36,22.87-33,7.63-52.1,7.63-52.1-14,45.74-20.33,55.91S190.34,179,190.34,179Z" transform="translate(-62.25 -17.61)" style="fill:#ededed"></path>\n </g>\n </svg>\n </div>',t)})),c=r.querySelector(".add-social"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.addContent('\n <div class="is-social text-left">\n <a href="https://twitter.com/"><i class="bi bi-twitter-x"></i></a>\n <a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a>\n <a href="https://www.instagram.com/" title=""><i class="icon bi bi-instagram"></i></a>\n </div>\n ',t)})),c=r.querySelector(".add-map"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-youtube"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");i.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)})),c=r.querySelector(".add-video"),o.addEventListener(c,"click",(()=>{const t=r.getAttribute("data-mode");let n=`<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">\n <source src="${e.opts.snippetPath}example.mp4" type="video/mp4"></video>`;e.opts.snippetSampleVideo&&(n=`<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">\n <source src="${e.opts.snippetSampleVideo}" type="video/mp4"></video>`),i.addContent(n,t)})),c=r.querySelector(".add-audio"),o.addEventListener(c,"click",(()=>{const t=r.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="${e.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;e.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="${e.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),i.addContent(n,t)}));const u=new t(e);c=r.querySelector(".add-more"),o.addEventListener(c,"click",(()=>{let t=n.querySelector(".snippets");i.showModal(t,!1,null,!1);const e=t.querySelector("iframe");""===e.contentWindow.document.body.innerHTML&&(e.srcdoc=u.getSnippetsHtml()),i.hidePop(r)}))}return r};
|
|
2
2
|
/**!
|
|
3
3
|
* Sortable 1.15.2
|
|
4
4
|
* @author RubaXa <trash@rubaxa.org>
|
package/readme.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ContentBuilder.js 5.5.
|
|
1
|
+
ContentBuilder.js 5.5.28
|
|
2
2
|
|
|
3
3
|
Note: If you have Source Code package (Super license), please refer to:
|
|
4
4
|
|
|
@@ -35,7 +35,7 @@ A. To try the HTML example:
|
|
|
35
35
|
|
|
36
36
|
> node server.js
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
4. Open from your browser:
|
|
39
39
|
|
|
40
40
|
http://localhost:8081/example1.html (Default example)
|
|
41
41
|
|
|
@@ -81,6 +81,28 @@ NOTE:
|
|
|
81
81
|
|
|
82
82
|
$OPENAI_API_KEY = 'YOUR_API_KEY';
|
|
83
83
|
|
|
84
|
+
3. Ensure that the sendCommandUrl parameter is set with the API endpoint for using the OpenAI API:
|
|
85
|
+
|
|
86
|
+
const builder = new ContentBuilder({
|
|
87
|
+
// ...
|
|
88
|
+
sendCommandUrl: '/sendcommand',
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
If you're using PHP:
|
|
92
|
+
|
|
93
|
+
const builder = new ContentBuilder({
|
|
94
|
+
// ...
|
|
95
|
+
sendCommandUrl: 'api/sendcommand.php',
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
Most examples in the package have this parameter configured, so you can run and test them.
|
|
99
|
+
Examples in React/Next.js and Laravel are also provided.
|
|
100
|
+
|
|
101
|
+
The JavaScript project example in this package uses Node.js for the API endpoint /sendcommand.
|
|
102
|
+
Please refer to the Node.js file:
|
|
103
|
+
|
|
104
|
+
server.js
|
|
105
|
+
|
|
84
106
|
- For speech recognition (if dictation is enabled), the browser's built-in
|
|
85
107
|
speech recognition is used. However, certain browsers may not support this feature.
|
|
86
108
|
We recommend using Deepgram for browser compatibility and accuracy.
|