@innovastudio/contentbox 1.0.30 → 1.0.34

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.
@@ -233,7 +233,7 @@ class Dom$1 {
233
233
 
234
234
  removeElement(elm) {
235
235
  if (elm) elm.parentNode.removeChild(elm);
236
- } // source: http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
236
+ } // http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
237
237
 
238
238
 
239
239
  uniqueId() {
@@ -1087,6 +1087,7 @@ class SideBar {
1087
1087
 
1088
1088
  .is-more-categories {
1089
1089
  display: none;
1090
+ flex-flow: wrap;
1090
1091
  position: absolute;
1091
1092
  width: 400px;
1092
1093
  box-sizing: border-box;
@@ -1119,13 +1120,13 @@ class SideBar {
1119
1120
  background:#eee;
1120
1121
  } */
1121
1122
  .is-more-categories.active {
1122
- display: block;
1123
+ display: flex;
1123
1124
  }
1124
-
1125
+
1126
+ /*
1125
1127
  .is-category-list {visibility:hidden}
1126
1128
  .is-more-categories {visibility:hidden}
1127
-
1128
-
1129
+ */
1129
1130
 
1130
1131
  /* Responsive */
1131
1132
  .is-category-list > div > a.more-basic {display:none}
@@ -1227,6 +1228,21 @@ class SideBar {
1227
1228
  <a href="" data-cat="115">${out('Help, FAQ')}</a>
1228
1229
  <a href="" data-cat="116">${out('Contact')}</a>
1229
1230
  <a href="" data-cat="117" class="static-section">${out('Footer')}</a>
1231
+
1232
+ <div class="template-extension" style="display:none">
1233
+ <!--
1234
+ <div style="font-weight: 600;padding: 15px 0 10px 19px;width: 100%;position: relative !important;border-top: rgb(0 0 0 / 4%) 1px solid;">
1235
+ Writing Set
1236
+ </div>
1237
+ <div>
1238
+ <a href="" data-cat="102">${out('General')}</a>
1239
+ <a href="" data-cat="108">${out('Agency')}</a>
1240
+ <a href="" data-cat="114">${out('Travel')}</a>
1241
+ <a href="" data-cat="116">${out('Food')}</a>
1242
+ </div>
1243
+ -->
1244
+ </div>
1245
+
1230
1246
  </div>
1231
1247
 
1232
1248
  <div class="is-design-list">
@@ -1338,13 +1354,15 @@ class SideBar {
1338
1354
  elm = document.querySelector('#morebasic');
1339
1355
  tab = elm.querySelector('[data-cat="' + defaultCat + '"]');
1340
1356
  if(tab) addClass(tab,'active');
1341
-
1357
+
1358
+ /*
1342
1359
  elm = document.querySelector('.is-category-list');
1343
1360
  elm.style.visibility = 'visible';
1344
1361
  var elms = document.querySelectorAll('.is-more-categories');
1345
1362
  elms.forEach(function(elm){
1346
1363
  elm.style.visibility = 'visible';
1347
1364
  });
1365
+ */
1348
1366
 
1349
1367
  var nIndex = 1;
1350
1368
  var path = '${this.builder.designPath}';
@@ -1885,10 +1903,28 @@ class EditSection {
1885
1903
  this.builder = builder;
1886
1904
  const builderStuff = this.builder.builderStuff;
1887
1905
  this.builderStuff = builderStuff;
1888
- let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style=""><svg class="is-icon-flex"><use xlink:href="#ion-ios-copy-outline"></use></svg> <span>' + out('Duplicate') + '</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25" style="border-left:none;">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50" style="border-left:none;">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default" style="border-left:none;">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm" style="border-left:none;">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m" style="border-left:none;">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg" style="border-left:none;">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value="none" style="border-left:none;"><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-command="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-command="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-command="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-command="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-command="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-command="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-command="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-command="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-command="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-command="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-command="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-command="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-command="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-command="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-command="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
1906
+ let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>' + '<div id="divSectionGeneral" class="is-tab-content" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
1907
+ '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
1889
1908
  dom$H.appendHtml(builderStuff, html);
1890
1909
  let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
1891
1910
  this.modalEditSection = modalEditSection;
1911
+ const tabs = modalEditSection.querySelectorAll('.is-tabs a');
1912
+ tabs.forEach(tab => {
1913
+ tab.addEventListener('click', e => {
1914
+ e.preventDefault();
1915
+ if (dom$H.hasClass(tab, 'active')) return;
1916
+ tabs.forEach(item => {
1917
+ dom$H.removeClass(item, 'active');
1918
+ });
1919
+ dom$H.addClass(tab, 'active');
1920
+ let id = tab.getAttribute('data-content');
1921
+ const tabContents = modalEditSection.querySelectorAll('.is-tab-content');
1922
+ tabContents.forEach(tabContent => {
1923
+ tabContent.style.display = 'none';
1924
+ });
1925
+ modalEditSection.querySelector('#' + id).style.display = 'flex';
1926
+ });
1927
+ });
1892
1928
  const modalDelConfirm = builderStuff.querySelector('.is-modal.delsectionconfirm');
1893
1929
  const btnOk = modalDelConfirm.querySelector('.input-ok');
1894
1930
  btnOk.addEventListener('click', () => {
@@ -1901,7 +1937,11 @@ class EditSection {
1901
1937
 
1902
1938
  this.builder.settings.onChange(); //Hide box tool
1903
1939
 
1904
- document.querySelector('#divBoxTool').style.display = 'none';
1940
+ let boxTool = document.querySelector('#divBoxTool');
1941
+ boxTool.style.display = 'none';
1942
+ setTimeout(() => {
1943
+ boxTool.style.display = 'none';
1944
+ }, 300);
1905
1945
  this.builder.activeSection = null;
1906
1946
  });
1907
1947
  const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
@@ -1939,6 +1979,50 @@ class EditSection {
1939
1979
 
1940
1980
  this.builder.settings.onChange();
1941
1981
  });
1982
+ const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
1983
+ btnSectionAnimStart.forEach(btn => {
1984
+ btn.addEventListener('click', () => {
1985
+ this.builder.editor.saveForUndo();
1986
+ let val = btn.getAttribute('data-value');
1987
+ this.sectionAnimStart(val);
1988
+ let btns = modalEditSection.querySelectorAll('.cmd-section-anim-start');
1989
+ btns.forEach(btn => {
1990
+ dom$H.removeClass(btn, 'on');
1991
+ });
1992
+ dom$H.addClass(btn, 'on');
1993
+
1994
+ if (val === '') {
1995
+ setTimeout(() => {
1996
+ dom$H.removeClass(btn, 'on');
1997
+ }, 100);
1998
+ } //Trigger Change event
1999
+
2000
+
2001
+ this.builder.settings.onChange();
2002
+ });
2003
+ });
2004
+ const btnSectionAnimEnd = modalEditSection.querySelectorAll('.cmd-section-anim-end');
2005
+ btnSectionAnimEnd.forEach(btn => {
2006
+ btn.addEventListener('click', () => {
2007
+ this.builder.editor.saveForUndo();
2008
+ let val = btn.getAttribute('data-value');
2009
+ this.sectionAnimEnd(val);
2010
+ let btns = modalEditSection.querySelectorAll('.cmd-section-anim-end');
2011
+ btns.forEach(btn => {
2012
+ dom$H.removeClass(btn, 'on');
2013
+ });
2014
+ dom$H.addClass(btn, 'on');
2015
+
2016
+ if (val === '') {
2017
+ setTimeout(() => {
2018
+ dom$H.removeClass(btn, 'on');
2019
+ }, 100);
2020
+ } //Trigger Change event
2021
+
2022
+
2023
+ this.builder.settings.onChange();
2024
+ });
2025
+ });
1942
2026
  const btnSectionHeight = modalEditSection.querySelectorAll('.cmd-section-height');
1943
2027
  btnSectionHeight.forEach(btn => {
1944
2028
  btn.addEventListener('click', () => {
@@ -1964,7 +2048,14 @@ class EditSection {
1964
2048
  btns.forEach(btn => {
1965
2049
  dom$H.removeClass(btn, 'on');
1966
2050
  });
1967
- if (btn.getAttribute('data-value') !== 'none') dom$H.addClass(btn, 'on'); //Trigger Change event
2051
+ dom$H.addClass(btn, 'on');
2052
+
2053
+ if (val === '') {
2054
+ setTimeout(() => {
2055
+ dom$H.removeClass(btn, 'on');
2056
+ }, 100);
2057
+ } //Trigger Change event
2058
+
1968
2059
 
1969
2060
  this.builder.settings.onChange();
1970
2061
  });
@@ -1984,13 +2075,20 @@ class EditSection {
1984
2075
  btnScrollPreset.forEach(btn => {
1985
2076
  btn.addEventListener('click', () => {
1986
2077
  this.builder.editor.saveForUndo();
1987
- let s = btn.getAttribute('data-command');
1988
- this.sectionScrollPreset(s);
2078
+ let val = btn.getAttribute('data-value');
2079
+ this.sectionScrollPreset(val);
1989
2080
  let btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
1990
2081
  btns.forEach(btn => {
1991
2082
  dom$H.removeClass(btn, 'on');
1992
2083
  });
1993
- if (btn.getAttribute('data-command') !== '') dom$H.addClass(btn, 'on'); //Trigger Change event
2084
+ dom$H.addClass(btn, 'on');
2085
+
2086
+ if (val === '') {
2087
+ setTimeout(() => {
2088
+ dom$H.removeClass(btn, 'on');
2089
+ }, 100);
2090
+ } //Trigger Change event
2091
+
1994
2092
 
1995
2093
  this.builder.settings.onChange();
1996
2094
  });
@@ -2033,6 +2131,33 @@ class EditSection {
2033
2131
  if (dom$H.hasClass(activeSection, 'is-section-25')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="25"]'), 'on');
2034
2132
  if (dom$H.hasClass(activeSection, 'is-section-20')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="20"]'), 'on');
2035
2133
  if (dom$H.hasClass(activeSection, 'is-section-auto')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="0"]'), 'on');
2134
+ btns = modalEditSection.querySelectorAll('.cmd-section-anim-start');
2135
+ btns.forEach(btn => {
2136
+ dom$H.removeClass(btn, 'on');
2137
+ });
2138
+ btns = modalEditSection.querySelectorAll('.cmd-section-anim-end');
2139
+ btns.forEach(btn => {
2140
+ dom$H.removeClass(btn, 'on');
2141
+ });
2142
+
2143
+ if (activeSection.hasAttribute('data-anim-start')) {
2144
+ const animPreset = activeSection.getAttribute('data-anim-start');
2145
+ if (animPreset === 'zoom-in') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="zoom-in"]'), 'on');
2146
+ if (animPreset === 'zoom-out') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="zoom-out"]'), 'on');
2147
+ if (animPreset === 'slide-left') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="slide-left"]'), 'on');
2148
+ if (animPreset === 'slide-right') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="slide-right"]'), 'on');
2149
+ }
2150
+
2151
+ if (activeSection.hasAttribute('data-anim-end')) {
2152
+ const animPreset = activeSection.getAttribute('data-anim-end');
2153
+ if (animPreset === 'zoom-in') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="zoom-in"]'), 'on');
2154
+ if (animPreset === 'zoom-out') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="zoom-out"]'), 'on');
2155
+ if (animPreset === 'slide-left') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-left"]'), 'on');
2156
+ if (animPreset === 'slide-right') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-right"]'), 'on');
2157
+ if (animPreset === 'overlap') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="overlap"]'), 'on');
2158
+ if (animPreset === 'slide-back') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-back"]'), 'on');
2159
+ }
2160
+
2036
2161
  btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
2037
2162
  btns.forEach(btn => {
2038
2163
  dom$H.removeClass(btn, 'on');
@@ -2052,7 +2177,7 @@ class EditSection {
2052
2177
  let preset = btnScroll.getAttribute('data-scroll-preset');
2053
2178
 
2054
2179
  if (preset) {
2055
- let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-command="${preset}"]`);
2180
+ let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-value="${preset}"]`);
2056
2181
  dom$H.addClass(btn, 'on');
2057
2182
  }
2058
2183
  } // this.builder.scrollTo(activeSection);
@@ -2074,7 +2199,7 @@ class EditSection {
2074
2199
  activeSection.parentNode.insertBefore(activeSection, currPrev); //Trigger Render event
2075
2200
 
2076
2201
  this.builder.settings.onRender();
2077
- this.builder.scrollTo(activeSection);
2202
+ this.builder.scrollTo(activeSection, 600);
2078
2203
  }
2079
2204
  }
2080
2205
 
@@ -2093,7 +2218,7 @@ class EditSection {
2093
2218
  activeSection.parentNode.insertBefore(currNext, activeSection); //Trigger Render event
2094
2219
 
2095
2220
  this.builder.settings.onRender();
2096
- this.builder.scrollTo(activeSection);
2221
+ this.builder.scrollTo(activeSection, 600);
2097
2222
  }
2098
2223
 
2099
2224
  return false;
@@ -2106,7 +2231,7 @@ class EditSection {
2106
2231
  activeSection.parentNode.insertBefore(activeSection, refSection); //Trigger Render event
2107
2232
 
2108
2233
  this.builder.settings.onRender();
2109
- this.builder.scrollTo(activeSection);
2234
+ this.builder.scrollTo(activeSection, 600);
2110
2235
  }
2111
2236
 
2112
2237
  sectionBottom() {
@@ -2117,7 +2242,7 @@ class EditSection {
2117
2242
  activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
2118
2243
 
2119
2244
  this.builder.settings.onRender();
2120
- this.builder.scrollTo(activeSection);
2245
+ this.builder.scrollTo(activeSection, 600);
2121
2246
  }
2122
2247
 
2123
2248
  sectionDuplicate() {
@@ -2171,7 +2296,82 @@ class EditSection {
2171
2296
 
2172
2297
  this.builder.settings.onRender();
2173
2298
  this.builder.hideModal(this.modalEditSection);
2174
- this.builder.scrollTo(section);
2299
+ this.builder.scrollTo(section, 600);
2300
+ }
2301
+
2302
+ sectionAnimStart(s) {
2303
+ const activeSection = this.builder.activeSection;
2304
+ activeSection.removeAttribute('data-bottom-top');
2305
+ activeSection.removeAttribute('data-300-bottom');
2306
+ activeSection.removeAttribute('data-400-bottom');
2307
+ activeSection.removeAttribute('data-anim-start'); // activeSection.style.transform = '';
2308
+
2309
+ if (s === 'zoom-in') {
2310
+ activeSection.setAttribute('data-bottom-top', 'transform:translateX(0%) translateY(0%) scale(0.7)');
2311
+ activeSection.setAttribute('data-300-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
2312
+ } else if (s === 'zoom-out') {
2313
+ //NOT APPLICABLE
2314
+ activeSection.setAttribute('data-bottom-top', 'transform:translateX(0%) translateY(0%) scale(1.5)');
2315
+ activeSection.setAttribute('data-300-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
2316
+ } else if (s === 'slide-left') {
2317
+ activeSection.setAttribute('data-bottom-top', 'transform:translateX(100%) translateY(0%) scale(1)');
2318
+ activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)'); //400 is shorter than 300
2319
+ } else if (s === 'slide-right') {
2320
+ activeSection.setAttribute('data-bottom-top', 'transform:translateX(-100%) translateY(0%) scale(1)');
2321
+ activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
2322
+ }
2323
+
2324
+ activeSection.setAttribute('data-anim-start', s);
2325
+ let animEnd = activeSection.getAttribute('data-anim-end');
2326
+
2327
+ if (animEnd === 'overlap') {
2328
+ activeSection.setAttribute('data-smooth-scrolling', 'off');
2329
+ } else {
2330
+ activeSection.removeAttribute('data-smooth-scrolling');
2331
+ } //Trigger Render event
2332
+
2333
+
2334
+ this.builder.settings.onRender();
2335
+ }
2336
+
2337
+ sectionAnimEnd(s) {
2338
+ const activeSection = this.builder.activeSection;
2339
+ activeSection.removeAttribute('data-top-bottom');
2340
+ activeSection.removeAttribute('data-center');
2341
+ activeSection.removeAttribute('data-anim-end'); // activeSection.style.transform = '';
2342
+
2343
+ if (s === 'zoom-in') {
2344
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
2345
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(0%) scale(1.5)');
2346
+ } else if (s === 'zoom-out') {
2347
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1);');
2348
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(0%) scale(0.5)');
2349
+ } else if (s === 'overlap') {
2350
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
2351
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(70%) scale(1)');
2352
+ activeSection.setAttribute('data-smooth-scrolling', 'off');
2353
+ } else if (s === 'slide-left') {
2354
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
2355
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(-100%) translateY(0%) scale(1)');
2356
+ } else if (s === 'slide-right') {
2357
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
2358
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(100%) translateY(0%) scale(1)');
2359
+ } else if (s === 'slide-back') {
2360
+ activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1);');
2361
+ activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(100%) scale(0.5)');
2362
+ }
2363
+
2364
+ activeSection.setAttribute('data-anim-end', s);
2365
+ let animEnd = activeSection.getAttribute('data-anim-end');
2366
+
2367
+ if (animEnd === 'overlap') {
2368
+ activeSection.setAttribute('data-smooth-scrolling', 'off');
2369
+ } else {
2370
+ activeSection.removeAttribute('data-smooth-scrolling');
2371
+ } //Trigger Render event
2372
+
2373
+
2374
+ this.builder.settings.onRender();
2175
2375
  }
2176
2376
 
2177
2377
  sectionHeight(n) {
@@ -2198,13 +2398,13 @@ class EditSection {
2198
2398
 
2199
2399
 
2200
2400
  this.builder.settings.onRender();
2201
- this.builder.scrollTo(activeSection);
2401
+ this.builder.scrollTo(activeSection, 600);
2202
2402
  }
2203
2403
 
2204
2404
  boxSpacing(s) {
2205
2405
  const activeSection = this.builder.activeSection;
2206
2406
 
2207
- if (s == 'none') {
2407
+ if (s == '') {
2208
2408
  dom$H.removeClass(activeSection, 'box-space');
2209
2409
  dom$H.removeClass(activeSection, 'box-space-sm');
2210
2410
  dom$H.removeClass(activeSection, 'box-space-m');
@@ -7909,34 +8109,36 @@ class EditBox {
7909
8109
  const btnBoxTypos = modalEditBox.querySelectorAll('.cmd-box-typography');
7910
8110
  btnBoxTypos.forEach(btnBoxTypo => {
7911
8111
  btnBoxTypo.addEventListener('click', () => {
7912
- this.builder.hideModal(modalEditBox); //Open divSidebarTypography
8112
+ setTimeout(() => {
8113
+ this.builder.hideModal(modalEditBox); //Open divSidebarTypography
7913
8114
 
7914
- builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
7915
- //--- overlay (this needs overlay to prevent activeBox change) ---
8115
+ builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
8116
+ //--- overlay (this needs overlay to prevent activeBox change) ---
7916
8117
 
7917
- const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
7918
- dom$G.appendHtml(builderStuff, overlayHtml);
7919
- const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
7920
- if (modalOverlay) modalOverlay.addEventListener('click', () => {
7921
- // Close all opened sidebar
7922
- const overlay = document.querySelector('.is-sidebar-overlay');
8118
+ const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
8119
+ dom$G.appendHtml(builderStuff, overlayHtml);
8120
+ const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
8121
+ if (modalOverlay) modalOverlay.addEventListener('click', () => {
8122
+ // Close all opened sidebar
8123
+ const overlay = document.querySelector('.is-sidebar-overlay');
7923
8124
 
7924
- if (overlay) {
7925
- overlay.remove();
7926
- document.body.style.overflowY = '';
7927
- }
8125
+ if (overlay) {
8126
+ overlay.remove();
8127
+ document.body.style.overflowY = '';
8128
+ }
7928
8129
 
7929
- document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
7930
- dom$G.removeClass(elm, 'active');
7931
- });
7932
- document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
7933
- dom$G.removeClass(elm, 'active');
7934
- });
7935
- }); //--- /overlay ---
8130
+ document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
8131
+ dom$G.removeClass(elm, 'active');
8132
+ });
8133
+ document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
8134
+ dom$G.removeClass(elm, 'active');
8135
+ });
8136
+ }); //--- /overlay ---
7936
8137
 
7937
- builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
7938
- builderStuff.querySelector('.typo-target-default').style.display = 'none';
7939
- builderStuff.querySelector('.typo-target-box').style.display = 'flex';
8138
+ builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
8139
+ builderStuff.querySelector('.typo-target-default').style.display = 'none';
8140
+ builderStuff.querySelector('.typo-target-box').style.display = 'flex';
8141
+ }, 10); // delay to separate from currect click
7940
8142
  });
7941
8143
  });
7942
8144
  const btnBoxSizes = modalEditBox.querySelectorAll('.cmd-box-size');
@@ -9684,7 +9886,7 @@ class EditBox {
9684
9886
  let activeBox = this.builder.activeBox;
9685
9887
  let activeSection = this.builder.activeSection;
9686
9888
  let container = activeBox.querySelector('.is-builder');
9687
- let amount = '40%';
9889
+ let amount = '20%';
9688
9890
  let minHeight = parseInt(window.getComputedStyle(activeSection, null).getPropertyValue('min-height'));
9689
9891
 
9690
9892
  if (parseInt(minHeight) <= 50) {
@@ -55510,6 +55712,7 @@ class ColumnTool {
55510
55712
 
55511
55713
  this.showHideLockIndicator(cell);
55512
55714
  this.builder.element.applyBehavior(cell);
55715
+ this.columnMore.style.display = '';
55513
55716
  e.preventDefault();
55514
55717
  }); // Open Column Settings
55515
55718
 
@@ -68239,6 +68442,8 @@ class ContentBuilder {
68239
68442
  this.colTool.showColumnTool(this.activeCol);
68240
68443
  }
68241
68444
  }
68445
+
68446
+ this.util.checkEmpty(); // for multiple instances check
68242
68447
  },
68243
68448
  onAdd: evt => {
68244
68449
  var itemEl = evt.item;
@@ -69419,11 +69624,13 @@ class ContentBuilder {
69419
69624
  } else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
69420
69625
  this.lightbox.openExternalVideo(url, 'dark', color);
69421
69626
  } else {
69422
- // Will go to the link
69423
- const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69627
+ if (url.indexOf('#') === 0) ; else {
69628
+ // Will go to the link
69629
+ const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69424
69630
 
69425
- if (!answer) {
69426
- return false;
69631
+ if (!answer) {
69632
+ return false;
69633
+ }
69427
69634
  }
69428
69635
 
69429
69636
  window.location.href = url;
@@ -69542,20 +69749,31 @@ class ContentBuilder {
69542
69749
  return false;
69543
69750
  } else {
69544
69751
  // Will go to the link
69545
- const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69752
+ if (url.indexOf('#') === 0) ; else {
69753
+ const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69546
69754
 
69547
- if (!answer) {
69548
- e.preventDefault();
69549
- return false;
69755
+ if (!answer) {
69756
+ e.preventDefault();
69757
+ return false;
69758
+ }
69550
69759
  }
69551
69760
  }
69552
69761
  } else {
69553
- const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69762
+ let url = link.getAttribute('href');
69554
69763
 
69555
- if (!answer) {
69764
+ if (!url) {
69556
69765
  e.preventDefault();
69557
69766
  return false;
69558
69767
  }
69768
+
69769
+ if (url.indexOf('#') === 0) ; else {
69770
+ const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
69771
+
69772
+ if (!answer) {
69773
+ e.preventDefault();
69774
+ return false;
69775
+ }
69776
+ }
69559
69777
  }
69560
69778
  }
69561
69779
  } // e.preventDefault();
@@ -71473,6 +71691,7 @@ class ContentBox {
71473
71691
  undoContainerOnly: false,
71474
71692
  absolutePath: false,
71475
71693
  zoom: 0.6,
71694
+ contentStyleWithSample: false,
71476
71695
  contentStyles: {
71477
71696
  'data': {
71478
71697
  'categories': [
@@ -72446,400 +72665,1442 @@ class ContentBox {
72446
72665
  }]
72447
72666
  }
72448
72667
  },
72668
+ contentStylesAlt: {
72669
+ 'data': {
72670
+ 'categories': [
72671
+ /*{ "id": 0, "desc": "Default" },*/
72672
+ {
72673
+ 'id': -1,
72674
+ 'desc': 'ALL'
72675
+ }, {
72676
+ 'id': 1,
72677
+ 'desc': 'Sans-serif & Sans-serif'
72678
+ }, {
72679
+ 'id': 2,
72680
+ 'desc': 'Serif & Serif'
72681
+ }, {
72682
+ 'id': 3,
72683
+ 'desc': 'Sans-serif & Serif'
72684
+ }, {
72685
+ 'id': 4,
72686
+ 'desc': 'Serif & Sans-serif'
72687
+ }, {
72688
+ 'id': 5,
72689
+ 'desc': 'Monospace & Monospace'
72690
+ }, {
72691
+ 'id': 6,
72692
+ 'desc': 'Monospace & Sans-serif'
72693
+ }, {
72694
+ 'id': 7,
72695
+ 'desc': 'Sans-serif & Monospace'
72696
+ }, {
72697
+ 'id': 8,
72698
+ 'desc': 'Display & Sans-serif'
72699
+ }, {
72700
+ 'id': 9,
72701
+ 'desc': 'Handwriting & Sans-serif'
72702
+ }, {
72703
+ 'id': 10,
72704
+ 'desc': 'Display & Serif'
72705
+ }, {
72706
+ 'id': 11,
72707
+ 'desc': 'Handwriting & Serif'
72708
+ }, {
72709
+ 'id': 12,
72710
+ 'desc': 'Display & Monospace'
72711
+ }, {
72712
+ 'id': 13,
72713
+ 'desc': 'Handwriting & Monospace'
72714
+ }, {
72715
+ 'id': 14,
72716
+ 'desc': 'Display & Display'
72717
+ }],
72718
+ 'styles': [{
72719
+ 'css': 'basetype-opensans.css',
72720
+ 'sectioncss': 'type-opensans.css',
72721
+ 'classname': 'type-opensans',
72722
+ 'img': 'type-opensans.jpg',
72723
+ 'category': 9,
72724
+ 'default': true,
72725
+ 'caption': 'Open Sans'
72726
+ }, {
72727
+ 'css': 'basetype-spectralsc-karma.css',
72728
+ 'sectioncss': 'type-spectralsc-karma.css',
72729
+ 'classname': 'type-spectralsc-karma',
72730
+ 'img': 'type-spectralsc-karma.jpg',
72731
+ 'category': 2,
72732
+ 'default': true,
72733
+ 'caption': 'Spectral SC & Karma'
72734
+ }, {
72735
+ 'css': 'basetype-alegreyasanssc-hind.css',
72736
+ 'sectioncss': 'type-alegreyasanssc-hind.css',
72737
+ 'classname': 'type-alegreyasanssc-hind',
72738
+ 'img': 'type-alegreyasanssc-hind.jpg',
72739
+ 'category': 1,
72740
+ 'default': true,
72741
+ 'caption': 'Alegreya Sans SC & Hind'
72742
+ }, {
72743
+ 'css': 'basetype-cabinsketch-montserrat.css',
72744
+ 'sectioncss': 'type-cabinsketch-montserrat.css',
72745
+ 'classname': 'type-cabinsketch-montserrat',
72746
+ 'img': 'type-cabinsketch-montserrat.jpg',
72747
+ 'category': 8,
72748
+ 'default': true,
72749
+ 'caption': 'Cabin Sketch & Montserrat'
72750
+ }, {
72751
+ 'css': 'basetype-anonymouspro-catamaran.css',
72752
+ 'sectioncss': 'type-anonymouspro-catamaran.css',
72753
+ 'classname': 'type-anonymouspro-catamaran',
72754
+ 'img': 'type-anonymouspro-catamaran.jpg',
72755
+ 'category': 6,
72756
+ 'default': true,
72757
+ 'caption': 'Anonymous Pro & Catamaran'
72758
+ }, {
72759
+ 'css': 'basetype-nothingyouc-ibmplexmono.css',
72760
+ 'sectioncss': 'type-nothingyouc-ibmplexmono.css',
72761
+ 'classname': 'type-nothingyouc-ibmplexmono',
72762
+ 'img': 'type-nothingyouc-ibmplexmono.jpg',
72763
+ 'category': 13,
72764
+ 'default': true,
72765
+ 'caption': 'Nothing You Could Do & IBM Plex Mono'
72766
+ }, {
72767
+ 'css': 'basetype-juliussansone-taviraj.css',
72768
+ 'sectioncss': 'type-juliussansone-taviraj.css',
72769
+ 'classname': 'type-juliussansone-taviraj',
72770
+ 'img': 'type-juliussansone-taviraj.jpg',
72771
+ 'category': 3,
72772
+ 'default': true,
72773
+ 'caption': 'Julius Sans One & Taviraj'
72774
+ }, {
72775
+ 'css': 'basetype-voltaire-sourcecodepro.css',
72776
+ 'sectioncss': 'type-voltaire-sourcecodepro.css',
72777
+ 'classname': 'type-voltaire-sourcecodepro',
72778
+ 'img': 'type-voltaire-sourcecodepro.jpg',
72779
+ 'category': 7,
72780
+ 'default': true,
72781
+ 'caption': 'Voltaire & Source Code Pro'
72782
+ }, {
72783
+ 'css': 'basetype-oregano-zillaslab.css',
72784
+ 'sectioncss': 'type-oregano-zillaslab.css',
72785
+ 'classname': 'type-oregano-zillaslab',
72786
+ 'img': 'type-oregano-zillaslab.jpg',
72787
+ 'category': 10,
72788
+ 'default': true,
72789
+ 'caption': 'Oregano & Zilla Slab'
72790
+ }, {
72791
+ 'css': 'basetype-anonymouspro.css',
72792
+ 'sectioncss': 'type-anonymouspro.css',
72793
+ 'classname': 'type-anonymouspro',
72794
+ 'img': 'type-anonymouspro.jpg',
72795
+ 'category': 5,
72796
+ 'default': false,
72797
+ 'caption': 'Anonymous Pro'
72798
+ }, {
72799
+ 'css': 'basetype-dancingscript-anonymouspro.css',
72800
+ 'sectioncss': 'type-dancingscript-anonymouspro.css',
72801
+ 'classname': 'type-dancingscript-anonymouspro',
72802
+ 'img': 'type-dancingscript-anonymouspro.jpg',
72803
+ 'category': 13,
72804
+ 'default': false,
72805
+ 'caption': 'Dancing Script & Anonymous Pro'
72806
+ }, {
72807
+ 'css': 'basetype-unicaone-cormorantgaramond.css',
72808
+ 'sectioncss': 'type-unicaone-cormorantgaramond.css',
72809
+ 'classname': 'type-unicaone-cormorantgaramond',
72810
+ 'img': 'type-unicaone-cormorantgaramond.jpg',
72811
+ 'category': 10,
72812
+ 'default': false,
72813
+ 'caption': 'Unica One & Cormorant Garamond'
72814
+ }, {
72815
+ 'css': 'basetype-allan-overpassmono.css',
72816
+ 'sectioncss': 'type-allan-overpassmono.css',
72817
+ 'classname': 'type-allan-overpassmono',
72818
+ 'img': 'type-allan-overpassmono.jpg',
72819
+ 'category': 12,
72820
+ 'default': false,
72821
+ 'caption': 'Allan & Overpass Mono'
72822
+ }, {
72823
+ 'css': 'basetype-averialibre-barlow.css',
72824
+ 'sectioncss': 'type-averialibre-barlow.css',
72825
+ 'classname': 'type-averialibre-barlow',
72826
+ 'img': 'type-averialibre-barlow.jpg',
72827
+ 'category': 8,
72828
+ 'default': false,
72829
+ 'caption': 'Averia Libre & Barlow'
72830
+ }, {
72831
+ 'css': 'basetype-merriweathersans-martel.css',
72832
+ 'sectioncss': 'type-merriweathersans-martel.css',
72833
+ 'classname': 'type-merriweathersans-martel',
72834
+ 'img': 'type-merriweathersans-martel.jpg',
72835
+ 'category': 3,
72836
+ 'default': false,
72837
+ 'caption': 'Merriweather Sans & Martel'
72838
+ }, {
72839
+ 'css': 'basetype-poppins.css',
72840
+ 'sectioncss': 'type-poppins.css',
72841
+ 'classname': 'type-poppins',
72842
+ 'img': 'type-poppins.jpg',
72843
+ 'category': 1,
72844
+ 'default': false,
72845
+ 'caption': 'Poppins'
72846
+ }, {
72847
+ 'css': 'basetype-specialelite-encodesans.css',
72848
+ 'sectioncss': 'type-specialelite-encodesans.css',
72849
+ 'classname': 'type-specialelite-encodesans',
72850
+ 'img': 'type-specialelite-encodesans.jpg',
72851
+ 'category': 8,
72852
+ 'default': false,
72853
+ 'caption': 'Special Elite & Encode Sans'
72854
+ }, {
72855
+ 'css': 'basetype-marcellussc-heebo.css',
72856
+ 'sectioncss': 'type-marcellussc-heebo.css',
72857
+ 'classname': 'type-marcellussc-heebo',
72858
+ 'img': 'type-marcellussc-heebo.jpg',
72859
+ 'category': 4,
72860
+ 'default': false,
72861
+ 'caption': 'Marcellus SC & Heebo'
72862
+ }, {
72863
+ 'css': 'basetype-oswald-cousine.css',
72864
+ 'sectioncss': 'type-oswald-cousine.css',
72865
+ 'classname': 'type-oswald-cousine',
72866
+ 'img': 'type-oswald-cousine.jpg',
72867
+ 'category': 7,
72868
+ 'default': false,
72869
+ 'caption': 'Oswald & Cousine'
72870
+ }, {
72871
+ 'css': 'basetype-oranienbaum-sourcesanspro.css',
72872
+ 'sectioncss': 'type-oranienbaum-sourcesanspro.css',
72873
+ 'classname': 'type-oranienbaum-sourcesanspro',
72874
+ 'img': 'type-oranienbaum-sourcesanspro.jpg',
72875
+ 'category': 4,
72876
+ 'default': false,
72877
+ 'caption': 'Oranienbaum & Source Sans Pro'
72878
+ }, {
72879
+ 'css': 'basetype-sriracha-arvo.css',
72880
+ 'sectioncss': 'type-sriracha-arvo.css',
72881
+ 'classname': 'type-sriracha-arvo',
72882
+ 'img': 'type-sriracha-arvo.jpg',
72883
+ 'category': 11,
72884
+ 'default': false,
72885
+ 'caption': 'Sriracha & Arvo'
72886
+ }, {
72887
+ 'css': 'basetype-merriweather.css',
72888
+ 'sectioncss': 'type-merriweather.css',
72889
+ 'classname': 'type-merriweather',
72890
+ 'img': 'type-merriweather.jpg',
72891
+ 'category': 2,
72892
+ 'default': false,
72893
+ 'caption': 'Merriweather'
72894
+ }, {
72895
+ 'css': 'basetype-badscript-rokkitt.css',
72896
+ 'sectioncss': 'type-badscript-rokkitt.css',
72897
+ 'classname': 'type-badscript-rokkitt',
72898
+ 'img': 'type-badscript-rokkitt.jpg',
72899
+ 'category': 11,
72900
+ 'default': false,
72901
+ 'caption': 'Bad Script & Rokkitt'
72902
+ }, {
72903
+ 'css': 'basetype-inconsolata.css',
72904
+ 'sectioncss': 'type-inconsolata.css',
72905
+ 'classname': 'type-inconsolata',
72906
+ 'img': 'type-inconsolata.jpg',
72907
+ 'category': 5,
72908
+ 'default': false,
72909
+ 'caption': 'Inconsolata'
72910
+ }, {
72911
+ 'css': 'basetype-novamono-robotomono.css',
72912
+ 'sectioncss': 'type-novamono-robotomono.css',
72913
+ 'classname': 'type-novamono-robotomono',
72914
+ 'img': 'type-novamono-robotomono.jpg',
72915
+ 'category': 5,
72916
+ 'default': false,
72917
+ 'caption': 'Nova Mono & Roboto Mono'
72918
+ }, {
72919
+ 'css': 'basetype-spacemono.css',
72920
+ 'sectioncss': 'type-spacemono.css',
72921
+ 'classname': 'type-spacemono',
72922
+ 'img': 'type-spacemono.jpg',
72923
+ 'category': 5,
72924
+ 'default': false,
72925
+ 'caption': 'Space Mono'
72926
+ }, {
72927
+ 'css': 'basetype-elsie-frankruhllibre.css',
72928
+ 'sectioncss': 'type-elsie-frankruhllibre.css',
72929
+ 'classname': 'type-elsie-frankruhllibre',
72930
+ 'img': 'type-elsie-frankruhllibre.jpg',
72931
+ 'category': 10,
72932
+ 'default': false,
72933
+ 'caption': 'Elsie & Frank Ruhl Libre'
72934
+ }, {
72935
+ 'css': 'basetype-playfairdisp-petitformalscr.css',
72936
+ 'sectioncss': 'type-playfairdisp-petitformalscr.css',
72937
+ 'classname': 'type-playfairdisp-petitformalscr',
72938
+ 'img': 'type-playfairdisp-petitformalscr.jpg',
72939
+ 'category': 2,
72940
+ 'default': false,
72941
+ 'caption': 'Playfair Display'
72942
+ }, {
72943
+ 'css': 'basetype-josefinsans-neuton.css',
72944
+ 'sectioncss': 'type-josefinsans-neuton.css',
72945
+ 'classname': 'type-josefinsans-neuton',
72946
+ 'img': 'type-josefinsans-neuton.jpg',
72947
+ 'category': 3,
72948
+ 'default': false,
72949
+ 'caption': 'Josefin Sans & Neuton'
72950
+ }, {
72951
+ 'css': 'basetype-stintultracon-inconsolata.css',
72952
+ 'sectioncss': 'type-stintultracon-inconsolata.css',
72953
+ 'classname': 'type-stintultracon-inconsolata',
72954
+ 'img': 'type-stintultracon-inconsolata.jpg',
72955
+ 'category': 12,
72956
+ 'default': false,
72957
+ 'caption': 'Stint Ultra Condensed & Inconsolata'
72958
+ }, {
72959
+ 'css': 'basetype-raleway-playfairdisplay.css',
72960
+ 'sectioncss': 'type-raleway-playfairdisplay.css',
72961
+ 'classname': 'type-raleway-playfairdisplay',
72962
+ 'img': 'type-raleway-playfairdisplay.jpg',
72963
+ 'category': 1,
72964
+ 'default': false,
72965
+ 'caption': 'Raleway'
72966
+ }, {
72967
+ 'css': 'basetype-ubuntumono-sourcecodepro.css',
72968
+ 'sectioncss': 'type-ubuntumono-sourcecodepro.css',
72969
+ 'classname': 'type-ubuntumono-sourcecodepro',
72970
+ 'img': 'type-ubuntumono-sourcecodepro.jpg',
72971
+ 'category': 5,
72972
+ 'default': false,
72973
+ 'caption': 'Ubuntu Mono & Source Code Pro'
72974
+ }, {
72975
+ 'css': 'basetype-sharetechmono-nunito.css',
72976
+ 'sectioncss': 'type-sharetechmono-nunito.css',
72977
+ 'classname': 'type-sharetechmono-nunito',
72978
+ 'img': 'type-sharetechmono-nunito.jpg',
72979
+ 'category': 6,
72980
+ 'default': false,
72981
+ 'caption': 'Share Tech Mono & Nunito'
72982
+ }, {
72983
+ 'css': 'basetype-lato.css',
72984
+ 'sectioncss': 'type-lato.css',
72985
+ 'classname': 'type-lato',
72986
+ 'img': 'type-lato.jpg',
72987
+ 'category': 1,
72988
+ 'default': false,
72989
+ 'caption': 'Lato'
72990
+ }, {
72991
+ 'css': 'basetype-pathwaygothicone-merriweather.css',
72992
+ 'sectioncss': 'type-pathwaygothicone-merriweather.css',
72993
+ 'classname': 'type-pathwaygothicone-merriweather',
72994
+ 'img': 'type-pathwaygothicone-merriweather.jpg',
72995
+ 'category': 3,
72996
+ 'default': false,
72997
+ 'caption': 'Pathway Gothic One & Merriweather'
72998
+ }, {
72999
+ 'css': 'basetype-forum-nanumgothiccoding.css',
73000
+ 'sectioncss': 'type-forum-nanumgothiccoding.css',
73001
+ 'classname': 'type-forum-nanumgothiccoding',
73002
+ 'img': 'type-forum-nanumgothiccoding.jpg',
73003
+ 'category': 12,
73004
+ 'default': false,
73005
+ 'caption': 'Forum & Nanum Gothic Coding'
73006
+ }, {
73007
+ 'css': 'basetype-bilbo-halant.css',
73008
+ 'sectioncss': 'type-bilbo-halant.css',
73009
+ 'classname': 'type-bilbo-halant',
73010
+ 'img': 'type-bilbo-halant.jpg',
73011
+ 'category': 11,
73012
+ 'default': false,
73013
+ 'caption': 'Bilbo & Halant'
73014
+ }, {
73015
+ 'css': 'basetype-hammersmithone-poppins.css',
73016
+ 'sectioncss': 'type-hammersmithone-poppins.css',
73017
+ 'classname': 'type-hammersmithone-poppins',
73018
+ 'img': 'type-hammersmithone-poppins.jpg',
73019
+ 'category': 1,
73020
+ 'default': false,
73021
+ 'caption': 'Hammersmith One & Poppins'
73022
+ }, {
73023
+ 'css': 'basetype-arimamadurai.css',
73024
+ 'sectioncss': 'type-arimamadurai.css',
73025
+ 'classname': 'type-arimamadurai',
73026
+ 'img': 'type-arimamadurai.jpg',
73027
+ 'category': 14,
73028
+ 'default': false,
73029
+ 'caption': 'Arima Madurai'
73030
+ }, {
73031
+ 'css': 'basetype-teko-muktamahee.css',
73032
+ 'sectioncss': 'type-teko-muktamahee.css',
73033
+ 'classname': 'type-teko-muktamahee',
73034
+ 'img': 'type-teko-muktamahee.jpg',
73035
+ 'category': 1,
73036
+ 'default': false,
73037
+ 'caption': 'Teko & Mukta Mahee'
73038
+ }, {
73039
+ 'css': 'basetype-heebo-ibmplexmono.css',
73040
+ 'sectioncss': 'type-heebo-ibmplexmono.css',
73041
+ 'classname': 'type-heebo-ibmplexmono',
73042
+ 'img': 'type-heebo-ibmplexmono.jpg',
73043
+ 'category': 7,
73044
+ 'default': false,
73045
+ 'caption': 'Heebo & IBM Plex Mono'
73046
+ }, {
73047
+ 'css': 'basetype-sairacon-thegirlnextdoor.css',
73048
+ 'sectioncss': 'type-sairacon-thegirlnextdoor.css',
73049
+ 'classname': 'type-sairacon-thegirlnextdoor',
73050
+ 'img': 'type-sairacon-thegirlnextdoor.jpg',
73051
+ 'category': 1,
73052
+ 'default': false,
73053
+ 'caption': 'Saira Condensed'
73054
+ }, {
73055
+ 'css': 'basetype-frankruhllibre-lato.css',
73056
+ 'sectioncss': 'type-frankruhllibre-lato.css',
73057
+ 'classname': 'type-frankruhllibre-lato',
73058
+ 'img': 'type-frankruhllibre-lato.jpg',
73059
+ 'category': 4,
73060
+ 'default': false,
73061
+ 'caption': 'Frank Ruhl Libre & Lato'
73062
+ }, {
73063
+ 'css': 'basetype-yantramanav-ibmplexserif.css',
73064
+ 'sectioncss': 'type-yantramanav-ibmplexserif.css',
73065
+ 'classname': 'type-yantramanav-ibmplexserif',
73066
+ 'img': 'type-yantramanav-ibmplexserif.jpg',
73067
+ 'category': 1,
73068
+ 'default': false,
73069
+ 'caption': 'Yantramanav & IBM Plex Serif'
73070
+ }, {
73071
+ 'css': 'basetype-quicksand-kalam.css',
73072
+ 'sectioncss': 'type-quicksand-kalam.css',
73073
+ 'classname': 'type-quicksand-kalam',
73074
+ 'img': 'type-quicksand-kalam.jpg',
73075
+ 'category': 1,
73076
+ 'default': false,
73077
+ 'caption': 'Quicksand & Kalam'
73078
+ }, {
73079
+ 'css': 'basetype-ibmplexmono.css',
73080
+ 'sectioncss': 'type-ibmplexmono.css',
73081
+ 'classname': 'type-ibmplexmono',
73082
+ 'img': 'type-ibmplexmono.jpg',
73083
+ 'category': 5,
73084
+ 'default': false,
73085
+ 'caption': 'IBM Plex Mono'
73086
+ }, {
73087
+ 'css': 'basetype-cinzeldecor-palanquin.css',
73088
+ 'sectioncss': 'type-cinzeldecor-palanquin.css',
73089
+ 'classname': 'type-cinzeldecor-palanquin',
73090
+ 'img': 'type-cinzeldecor-palanquin.jpg',
73091
+ 'category': 8,
73092
+ 'default': false,
73093
+ 'caption': 'Cinzel Decorative & Palanquin'
73094
+ }, {
73095
+ 'css': 'basetype-oswald-biryani.css',
73096
+ 'sectioncss': 'type-oswald-biryani.css',
73097
+ 'classname': 'type-oswald-biryani',
73098
+ 'img': 'type-oswald-biryani.jpg',
73099
+ 'category': 1,
73100
+ 'default': false,
73101
+ 'caption': 'Oswald & Biryani'
73102
+ }, {
73103
+ 'css': 'basetype-yanonekaff-josefinsans.css',
73104
+ 'sectioncss': 'type-yanonekaff-josefinsans.css',
73105
+ 'classname': 'type-yanonekaff-josefinsans',
73106
+ 'img': 'type-yanonekaff-josefinsans.jpg',
73107
+ 'category': 1,
73108
+ 'default': false,
73109
+ 'caption': 'Yanone Kaffeesatz & Josefin Sans'
73110
+ }, {
73111
+ 'css': 'basetype-abrilfatface-assistant.css',
73112
+ 'sectioncss': 'type-abrilfatface-assistant.css',
73113
+ 'classname': 'type-abrilfatface-assistant',
73114
+ 'img': 'type-abrilfatface-assistant.jpg',
73115
+ 'category': 8,
73116
+ 'default': false,
73117
+ 'caption': 'Abril Fatface & Assistant'
73118
+ }, {
73119
+ 'css': 'basetype-nanumgothiccod-firasanscon.css',
73120
+ 'sectioncss': 'type-nanumgothiccod-firasanscon.css',
73121
+ 'classname': 'type-nanumgothiccod-firasanscon',
73122
+ 'img': 'type-nanumgothiccod-firasanscon.jpg',
73123
+ 'category': 6,
73124
+ 'default': false,
73125
+ 'caption': 'Nanum Gothic Coding & Fira Sans Condensed'
73126
+ }, {
73127
+ 'css': 'basetype-inder-trirong.css',
73128
+ 'sectioncss': 'type-inder-trirong.css',
73129
+ 'classname': 'type-inder-trirong',
73130
+ 'img': 'type-inder-trirong.jpg',
73131
+ 'category': 3,
73132
+ 'default': false,
73133
+ 'caption': 'Inder & Trirong'
73134
+ }, {
73135
+ 'css': 'basetype-atma-tajawal.css',
73136
+ 'sectioncss': 'type-atma-tajawal.css',
73137
+ 'classname': 'type-atma-tajawal',
73138
+ 'img': 'type-atma-tajawal.jpg',
73139
+ 'category': 8,
73140
+ 'default': false,
73141
+ 'caption': 'Atma & Tajawal'
73142
+ }, {
73143
+ 'css': 'basetype-prata-hindsiliguri.css',
73144
+ 'sectioncss': 'type-prata-hindsiliguri.css',
73145
+ 'classname': 'type-prata-hindsiliguri',
73146
+ 'img': 'type-prata-hindsiliguri.jpg',
73147
+ 'category': 4,
73148
+ 'default': false,
73149
+ 'caption': 'Prata & Hind Siliguri'
73150
+ }, {
73151
+ 'css': 'basetype-federo-gothica1.css',
73152
+ 'sectioncss': 'type-federo-gothica1.css',
73153
+ 'classname': 'type-federo-gothica1',
73154
+ 'img': 'type-federo-gothica1.jpg',
73155
+ 'category': 1,
73156
+ 'default': false,
73157
+ 'caption': 'Federo & Gothic A1'
73158
+ }, {
73159
+ 'css': 'basetype-fjallaone-ibmplexserif.css',
73160
+ 'sectioncss': 'type-fjallaone-ibmplexserif.css',
73161
+ 'classname': 'type-fjallaone-ibmplexserif',
73162
+ 'img': 'type-fjallaone-ibmplexserif.jpg',
73163
+ 'category': 3,
73164
+ 'default': false,
73165
+ 'caption': 'Fjalla One & IBM Plex Serif'
73166
+ }, {
73167
+ 'css': 'basetype-cormorantsc-ibmplexsanscon.css',
73168
+ 'sectioncss': 'type-cormorantsc-ibmplexsanscon.css',
73169
+ 'classname': 'type-cormorantsc-ibmplexsanscon',
73170
+ 'img': 'type-cormorantsc-ibmplexsanscon.jpg',
73171
+ 'category': 4,
73172
+ 'default': false,
73173
+ 'caption': 'Cormorant SC & IBM Plex Sans Condensed'
73174
+ }, {
73175
+ 'css': 'basetype-kalam-robotomono.css',
73176
+ 'sectioncss': 'type-kalam-robotomono.css',
73177
+ 'classname': 'type-kalam-robotomono',
73178
+ 'img': 'type-kalam-robotomono.jpg',
73179
+ 'category': 13,
73180
+ 'default': false,
73181
+ 'caption': 'Kalam & Roboto Mono'
73182
+ }, {
73183
+ 'css': 'basetype-fugazone-librefranklin.css',
73184
+ 'sectioncss': 'type-fugazone-librefranklin.css',
73185
+ 'classname': 'type-fugazone-librefranklin',
73186
+ 'img': 'type-fugazone-librefranklin.jpg',
73187
+ 'category': 8,
73188
+ 'default': false,
73189
+ 'caption': 'Fugaz One & Libre Franklin'
73190
+ }, {
73191
+ 'css': 'basetype-yeonsung-palanquin.css',
73192
+ 'sectioncss': 'type-yeonsung-palanquin.css',
73193
+ 'classname': 'type-yeonsung-palanquin',
73194
+ 'img': 'type-yeonsung-palanquin.jpg',
73195
+ 'category': 8,
73196
+ 'default': false,
73197
+ 'caption': 'Yeon Sung & Palanquin'
73198
+ }, {
73199
+ 'css': 'basetype-rancho-robotoslab.css',
73200
+ 'sectioncss': 'type-rancho-robotoslab.css',
73201
+ 'classname': 'type-rancho-robotoslab',
73202
+ 'img': 'type-rancho-robotoslab.jpg',
73203
+ 'category': 11,
73204
+ 'default': false,
73205
+ 'caption': 'Rancho & Roboto Slab'
73206
+ }, {
73207
+ 'css': 'basetype-tenaram-overpassmono.css',
73208
+ 'sectioncss': 'type-tenaram-overpassmono.css',
73209
+ 'classname': 'type-tenaram-overpassmono',
73210
+ 'img': 'type-tenaram-overpassmono.jpg',
73211
+ 'category': 7,
73212
+ 'default': false,
73213
+ 'caption': 'Tenali Ramakrishna & Overpass Mono'
73214
+ }, {
73215
+ 'css': 'basetype-thegirlnextdoor-sourcesanspro.css',
73216
+ 'sectioncss': 'type-thegirlnextdoor-sourcesanspro.css',
73217
+ 'classname': 'type-thegirlnextdoor-sourcesanspro',
73218
+ 'img': 'type-thegirlnextdoor-sourcesanspro.jpg',
73219
+ 'category': 9,
73220
+ 'default': false,
73221
+ 'caption': 'The Girl Next Door & Source Sans Pro'
73222
+ }, {
73223
+ 'css': 'basetype-boogaloo-inconsolata.css',
73224
+ 'sectioncss': 'type-boogaloo-inconsolata.css',
73225
+ 'classname': 'type-boogaloo-inconsolata',
73226
+ 'img': 'type-boogaloo-inconsolata.jpg',
73227
+ 'category': 12,
73228
+ 'default': false,
73229
+ 'caption': 'Boogaloo & Inconsolata'
73230
+ }, {
73231
+ 'css': 'basetype-caveat-sourcecodepro.css',
73232
+ 'sectioncss': 'type-caveat-sourcecodepro.css',
73233
+ 'classname': 'type-caveat-sourcecodepro',
73234
+ 'img': 'type-caveat-sourcecodepro.jpg',
73235
+ 'category': 13,
73236
+ 'default': false,
73237
+ 'caption': 'Caveat & Source Code Pro'
73238
+ }, {
73239
+ 'css': 'basetype-passionone-worksans.css',
73240
+ 'sectioncss': 'type-passionone-worksans.css',
73241
+ 'classname': 'type-passionone-worksans',
73242
+ 'img': 'type-passionone-worksans.jpg',
73243
+ 'category': 8,
73244
+ 'default': false,
73245
+ 'caption': 'Passion One & Work Sans'
73246
+ }, {
73247
+ 'css': 'basetype-anticdidone-halant.css',
73248
+ 'sectioncss': 'type-anticdidone-halant.css',
73249
+ 'classname': 'type-anticdidone-halant',
73250
+ 'img': 'type-anticdidone-halant.jpg',
73251
+ 'category': 2,
73252
+ 'default': false,
73253
+ 'caption': 'Antic Didone & Halant'
73254
+ }, {
73255
+ 'css': 'basetype-adventpro-opensans.css',
73256
+ 'sectioncss': 'type-adventpro-opensans.css',
73257
+ 'classname': 'type-adventpro-opensans',
73258
+ 'img': 'type-adventpro-opensans.jpg',
73259
+ 'category': 1,
73260
+ 'default': false,
73261
+ 'caption': 'Advent Pro & Open Sans'
73262
+ }, {
73263
+ 'css': 'basetype-cutivemono-lato.css',
73264
+ 'sectioncss': 'type-cutivemono-lato.css',
73265
+ 'classname': 'type-cutivemono-lato',
73266
+ 'img': 'type-cutivemono-lato.jpg',
73267
+ 'category': 6,
73268
+ 'default': false,
73269
+ 'caption': 'Cutive Mono & Lato'
73270
+ }, {
73271
+ 'css': 'basetype-elsie-montserrat.css',
73272
+ 'sectioncss': 'type-elsie-montserrat.css',
73273
+ 'classname': 'type-elsie-montserrat',
73274
+ 'img': 'type-elsie-montserrat.jpg',
73275
+ 'category': 8,
73276
+ 'default': false,
73277
+ 'caption': 'Elsie & Montserrat'
73278
+ }, {
73279
+ 'css': 'basetype-macondo-mukta.css',
73280
+ 'sectioncss': 'type-macondo-mukta.css',
73281
+ 'classname': 'type-macondo-mukta',
73282
+ 'img': 'type-macondo-mukta.jpg',
73283
+ 'category': 8,
73284
+ 'default': false,
73285
+ 'caption': 'Macondo & Mukta'
73286
+ }, {
73287
+ 'css': 'basetype-oswald-opensans.css',
73288
+ 'sectioncss': 'type-oswald-opensans.css',
73289
+ 'classname': 'type-oswald-opensans',
73290
+ 'img': 'type-oswald-opensans.jpg',
73291
+ 'category': 1,
73292
+ 'default': false,
73293
+ 'caption': 'Oswald & Open Sans'
73294
+ }, {
73295
+ 'css': 'basetype-poppins-lekton.css',
73296
+ 'sectioncss': 'type-poppins-lekton.css',
73297
+ 'classname': 'type-poppins-lekton',
73298
+ 'img': 'type-poppins-lekton.jpg',
73299
+ 'category': 1,
73300
+ 'default': false,
73301
+ 'caption': 'Poppins & Lekton'
73302
+ }, {
73303
+ 'css': 'basetype-raleway-neuton.css',
73304
+ 'sectioncss': 'type-raleway-neuton.css',
73305
+ 'classname': 'type-raleway-neuton',
73306
+ 'img': 'type-raleway-neuton.jpg',
73307
+ 'category': 3,
73308
+ 'default': false,
73309
+ 'caption': 'Raleway & Neuton'
73310
+ }, {
73311
+ 'css': 'basetype-sourcecodepro-nunitosans.css',
73312
+ 'sectioncss': 'type-sourcecodepro-nunitosans.css',
73313
+ 'classname': 'type-sourcecodepro-nunitosans',
73314
+ 'img': 'type-sourcecodepro-nunitosans.jpg',
73315
+ 'category': 6,
73316
+ 'default': false,
73317
+ 'caption': 'Source Code Pro & Nunito Sans'
73318
+ }, {
73319
+ 'css': 'basetype-tangerine-opensans.css',
73320
+ 'sectioncss': 'type-tangerine-opensans.css',
73321
+ 'classname': 'type-tangerine-opensans',
73322
+ 'img': 'type-tangerine-opensans.jpg',
73323
+ 'category': 9,
73324
+ 'default': false,
73325
+ 'caption': 'Tangerine & Open Sans'
73326
+ }, {
73327
+ 'css': 'basetype-alegreya-lato.css',
73328
+ 'sectioncss': 'type-alegreya-lato.css',
73329
+ 'classname': 'type-alegreya-lato',
73330
+ 'img': 'type-alegreya-lato.jpg',
73331
+ 'category': 4,
73332
+ 'default': false,
73333
+ 'caption': 'Alegreya & Lato'
73334
+ }, {
73335
+ 'css': 'basetype-amaticsc-lato.css',
73336
+ 'sectioncss': 'type-amaticsc-lato.css',
73337
+ 'classname': 'type-amaticsc-lato',
73338
+ 'img': 'type-amaticsc-lato.jpg',
73339
+ 'category': 9,
73340
+ 'default': false,
73341
+ 'caption': 'Amatic SC & Lato'
73342
+ }, {
73343
+ 'css': 'basetype-heebo-ibmplexmono-2.css',
73344
+ 'sectioncss': 'type-heebo-ibmplexmono-2.css',
73345
+ 'classname': 'type-heebo-ibmplexmono-2',
73346
+ 'img': 'type-heebo-ibmplexmono-2.jpg',
73347
+ 'category': 7,
73348
+ 'default': false,
73349
+ 'caption': 'Heebo & IBM Plex Mono'
73350
+ }, {
73351
+ 'css': 'basetype-juliussansone-robotocondensed.css',
73352
+ 'sectioncss': 'type-juliussansone-robotocondensed.css',
73353
+ 'classname': 'type-juliussansone-robotocondensed',
73354
+ 'img': 'type-juliussansone-robotocondensed.jpg',
73355
+ 'category': 1,
73356
+ 'default': false,
73357
+ 'caption': 'Julius Sans One & Roboto Condensed'
73358
+ }, {
73359
+ 'css': 'basetype-montserrat-roboto.css',
73360
+ 'sectioncss': 'type-montserrat-roboto.css',
73361
+ 'classname': 'type-montserrat-roboto',
73362
+ 'img': 'type-montserrat-roboto.jpg',
73363
+ 'category': 1,
73364
+ 'default': false,
73365
+ 'caption': 'Montserrat & Roboto'
73366
+ }, {
73367
+ 'css': 'basetype-nothingyouc-ibmplexmono-2.css',
73368
+ 'sectioncss': 'type-nothingyouc-ibmplexmono-2.css',
73369
+ 'classname': 'type-nothingyouc-ibmplexmono-2',
73370
+ 'img': 'type-nothingyouc-ibmplexmono-2.jpg',
73371
+ 'category': 13,
73372
+ 'default': false,
73373
+ 'caption': 'Nothing You Could Do & IBM Plex Mono'
73374
+ }, {
73375
+ 'css': 'basetype-raleway-lato.css',
73376
+ 'sectioncss': 'type-raleway-lato.css',
73377
+ 'classname': 'type-raleway-lato',
73378
+ 'img': 'type-raleway-lato.jpg',
73379
+ 'category': 1,
73380
+ 'default': false,
73381
+ 'caption': 'Raleway & Lato'
73382
+ }, {
73383
+ 'css': 'basetype-raleway-lusitana.css',
73384
+ 'sectioncss': 'type-raleway-lusitana.css',
73385
+ 'classname': 'type-raleway-lusitana',
73386
+ 'img': 'type-raleway-lusitana.jpg',
73387
+ 'category': 3,
73388
+ 'default': false,
73389
+ 'caption': 'Raleway & Lusitana'
73390
+ }, {
73391
+ 'css': 'basetype-rufina-oxygen.css',
73392
+ 'sectioncss': 'type-rufina-oxygen.css',
73393
+ 'classname': 'type-rufina-oxygen',
73394
+ 'img': 'type-rufina-oxygen.jpg',
73395
+ 'category': 4,
73396
+ 'default': false,
73397
+ 'caption': 'Rufina & Oxygen'
73398
+ }, {
73399
+ 'css': 'basetype-sacramento-opensans.css',
73400
+ 'sectioncss': 'type-sacramento-opensans.css',
73401
+ 'classname': 'type-sacramento-opensans',
73402
+ 'img': 'type-sacramento-opensans.jpg',
73403
+ 'category': 9,
73404
+ 'default': false,
73405
+ 'caption': 'Sacramento & Open Sans'
73406
+ }, {
73407
+ 'css': 'basetype-specialelite-playfairdisplay.css',
73408
+ 'sectioncss': 'type-specialelite-playfairdisplay.css',
73409
+ 'classname': 'type-specialelite-playfairdisplay',
73410
+ 'img': 'type-specialelite-playfairdisplay.jpg',
73411
+ 'category': 10,
73412
+ 'default': false,
73413
+ 'caption': 'Special Elite & Playfair Display'
73414
+ }, {
73415
+ 'css': 'basetype-unicaone-sourcesanspro.css',
73416
+ 'sectioncss': 'type-unicaone-sourcesanspro.css',
73417
+ 'classname': 'type-unicaone-sourcesanspro',
73418
+ 'img': 'type-unicaone-sourcesanspro.jpg',
73419
+ 'category': 8,
73420
+ 'default': false,
73421
+ 'caption': 'Unica One & Source Sans Pro'
73422
+ }, {
73423
+ 'css': 'basetype-amaticsc-josepfinsans.css',
73424
+ 'sectioncss': 'type-amaticsc-josepfinsans.css',
73425
+ 'classname': 'type-amaticsc-josepfinsans',
73426
+ 'img': 'type-amaticsc-josepfinsans.jpg',
73427
+ 'category': 9,
73428
+ 'default': true,
73429
+ 'caption': 'Amatic SC & Josefin Sans'
73430
+ }, {
73431
+ 'css': 'basetype-sourcesanspro-anonymouspro.css',
73432
+ 'sectioncss': 'type-sourcesanspro-anonymouspro.css',
73433
+ 'classname': 'type-sourcesanspro-anonymouspro',
73434
+ 'img': 'type-sourcesanspro-anonymouspro.jpg',
73435
+ 'category': 7,
73436
+ 'default': true,
73437
+ 'caption': 'Source Sans Pro & Anonymous Pro'
73438
+ }, {
73439
+ 'css': 'basetype-poppins-oldstandardtt.css',
73440
+ 'sectioncss': 'type-poppins-oldstandardtt.css',
73441
+ 'classname': 'type-poppins-oldstandardtt',
73442
+ 'img': 'type-poppins-oldstandardtt.jpg',
73443
+ 'category': 3,
73444
+ 'default': true,
73445
+ 'caption': 'Poppins & Old Standard TT'
73446
+ }, {
73447
+ 'css': 'basetype-yesteryear-chivo.css',
73448
+ 'sectioncss': 'type-yesteryear-chivo.css',
73449
+ 'classname': 'type-yesteryear-chivo',
73450
+ 'img': 'type-yesteryear-chivo.jpg',
73451
+ 'category': 9,
73452
+ 'default': true,
73453
+ 'caption': 'Yesteryear & Chivo'
73454
+ }, {
73455
+ 'css': 'basetype-ptserif-poppins.css',
73456
+ 'sectioncss': 'type-ptserif-poppins.css',
73457
+ 'classname': 'type-ptserif-poppins',
73458
+ 'img': 'type-ptserif-poppins.jpg',
73459
+ 'category': 4,
73460
+ 'default': true,
73461
+ 'caption': 'PT Serif & Poppins'
73462
+ }, {
73463
+ 'css': 'basetype-kellyslab-yantramanav.css',
73464
+ 'sectioncss': 'type-kellyslab-yantramanav.css',
73465
+ 'classname': 'type-kellyslab-yantramanav',
73466
+ 'img': 'type-kellyslab-yantramanav.jpg',
73467
+ 'category': 8,
73468
+ 'default': true,
73469
+ 'caption': 'Kelly Slab & Yantramanav'
73470
+ }, {
73471
+ 'css': 'basetype-yellowtail-frankruhllibre.css',
73472
+ 'sectioncss': 'type-yellowtail-frankruhllibre.css',
73473
+ 'classname': 'type-yellowtail-frankruhllibre',
73474
+ 'img': 'type-yellowtail-frankruhllibre.jpg',
73475
+ 'category': 11,
73476
+ 'default': true,
73477
+ 'caption': 'Yellowtail & Frank Ruhl Libre'
73478
+ }, {
73479
+ 'css': 'basetype-sedgwickave-spectral.css',
73480
+ 'sectioncss': 'type-sedgwickave-spectral.css',
73481
+ 'classname': 'type-sedgwickave-spectral',
73482
+ 'img': 'type-sedgwickave-spectral.jpg',
73483
+ 'category': 10,
73484
+ 'default': false,
73485
+ 'caption': 'Sedgwick Ave & Spectral'
73486
+ }, {
73487
+ 'css': 'basetype-satisfy-economica.css',
73488
+ 'sectioncss': 'type-satisfy-economica.css',
73489
+ 'classname': 'type-satisfy-economica',
73490
+ 'img': 'type-satisfy-economica.jpg',
73491
+ 'category': 9,
73492
+ 'default': false,
73493
+ 'caption': 'Satisfy & Economica'
73494
+ }, {
73495
+ 'css': 'basetype-josefinsans-lekton.css',
73496
+ 'sectioncss': 'type-josefinsans-lekton.css',
73497
+ 'classname': 'type-josefinsans-lekton',
73498
+ 'img': 'type-josefinsans-lekton.jpg',
73499
+ 'category': 1,
73500
+ 'default': false,
73501
+ 'caption': 'Josefin Sans & Lekton'
73502
+ }, {
73503
+ 'css': 'basetype-parisienne-maitree.css',
73504
+ 'sectioncss': 'type-parisienne-maitree.css',
73505
+ 'classname': 'type-parisienne-maitree',
73506
+ 'img': 'type-parisienne-maitree.jpg',
73507
+ 'category': 11,
73508
+ 'default': false,
73509
+ 'caption': 'Parisienne & Maitree'
73510
+ }, {
73511
+ 'css': 'basetype-londrinashadow-martel.css',
73512
+ 'sectioncss': 'type-londrinashadow-martel.css',
73513
+ 'classname': 'type-londrinashadow-martel',
73514
+ 'img': 'type-londrinashadow-martel.jpg',
73515
+ 'category': 10,
73516
+ 'default': false,
73517
+ 'caption': 'Londrina Shadow & Martel'
73518
+ }, {
73519
+ 'css': 'basetype-poiretone-pridi.css',
73520
+ 'sectioncss': 'type-poiretone-pridi.css',
73521
+ 'classname': 'type-poiretone-pridi',
73522
+ 'img': 'type-poiretone-pridi.jpg',
73523
+ 'category': 10,
73524
+ 'default': false,
73525
+ 'caption': 'Poiret One & Pridi'
73526
+ }, {
73527
+ 'css': 'basetype-pollerone-ibmplexserif.css',
73528
+ 'sectioncss': 'type-pollerone-ibmplexserif.css',
73529
+ 'classname': 'type-pollerone-ibmplexserif',
73530
+ 'img': 'type-pollerone-ibmplexserif.jpg',
73531
+ 'category': 10,
73532
+ 'default': false,
73533
+ 'caption': 'Poller One & IBM Plex Serif'
73534
+ }, {
73535
+ 'css': 'basetype-italiana-martel.css',
73536
+ 'sectioncss': 'type-italiana-martel.css',
73537
+ 'classname': 'type-italiana-martel',
73538
+ 'img': 'type-italiana-martel.jpg',
73539
+ 'category': 2,
73540
+ 'default': false,
73541
+ 'caption': 'Italiana & Martel'
73542
+ }, {
73543
+ 'css': 'basetype-julee-lora.css',
73544
+ 'sectioncss': 'type-julee-lora.css',
73545
+ 'classname': 'type-julee-lora',
73546
+ 'img': 'type-julee-lora.jpg',
73547
+ 'category': 11,
73548
+ 'default': false,
73549
+ 'caption': 'Julee & Lora'
73550
+ }, {
73551
+ 'css': 'basetype-sixcaps-robotomono.css',
73552
+ 'sectioncss': 'type-sixcaps-robotomono.css',
73553
+ 'classname': 'type-sixcaps-robotomono',
73554
+ 'img': 'type-sixcaps-robotomono.jpg',
73555
+ 'category': 7,
73556
+ 'default': false,
73557
+ 'caption': 'Six Caps & Roboto Mono'
73558
+ }, {
73559
+ 'css': 'basetype-pacifico-nanumgothiccod.css',
73560
+ 'sectioncss': 'type-pacifico-nanumgothiccod.css',
73561
+ 'classname': 'type-pacifico-nanumgothiccod',
73562
+ 'img': 'type-pacifico-nanumgothiccod.jpg',
73563
+ 'category': 13,
73564
+ 'default': false,
73565
+ 'caption': 'Pacifico & Nanum Gothic Coding'
73566
+ }, {
73567
+ 'css': 'basetype-greatvibes-robotomono.css',
73568
+ 'sectioncss': 'type-greatvibes-robotomono.css',
73569
+ 'classname': 'type-greatvibes-robotomono',
73570
+ 'img': 'type-greatvibes-robotomono.jpg',
73571
+ 'category': 13,
73572
+ 'default': false,
73573
+ 'caption': 'Great Vibes & Roboto Mono'
73574
+ }, {
73575
+ 'css': 'basetype-pinyonscript-firasans.css',
73576
+ 'sectioncss': 'type-pinyonscript-firasans.css',
73577
+ 'classname': 'type-pinyonscript-firasans',
73578
+ 'img': 'type-pinyonscript-firasans.jpg',
73579
+ 'category': 9,
73580
+ 'default': false,
73581
+ 'caption': 'Pinyon Script & Fira Sans'
73582
+ }, {
73583
+ 'css': 'basetype-sail-rasa.css',
73584
+ 'sectioncss': 'type-sail-rasa.css',
73585
+ 'classname': 'type-sail-rasa',
73586
+ 'img': 'type-sail-rasa.jpg',
73587
+ 'category': 10,
73588
+ 'default': false,
73589
+ 'caption': 'Sail & Rasa'
73590
+ }, {
73591
+ 'css': 'basetype-yesevaone-forum.css',
73592
+ 'sectioncss': 'type-yesevaone-forum.css',
73593
+ 'classname': 'type-yesevaone-forum',
73594
+ 'img': 'type-yesevaone-forum.jpg',
73595
+ 'category': 14,
73596
+ 'default': false,
73597
+ 'caption': 'Yeseva One & Forum'
73598
+ }, {
73599
+ 'css': 'basetype-dosis-oldstandardtt.css',
73600
+ 'sectioncss': 'type-dosis-oldstandardtt.css',
73601
+ 'classname': 'type-dosis-oldstandardtt',
73602
+ 'img': 'type-dosis-oldstandardtt.jpg',
73603
+ 'category': 1,
73604
+ 'default': false,
73605
+ 'caption': 'Dosis & Old Standard TT'
73606
+ }, {
73607
+ 'css': 'basetype-engagement-spectral.css',
73608
+ 'sectioncss': 'type-engagement-spectral.css',
73609
+ 'classname': 'type-engagement-spectral',
73610
+ 'img': 'type-engagement-spectral.jpg',
73611
+ 'category': 11,
73612
+ 'default': false,
73613
+ 'caption': 'Engagement & Spectral'
73614
+ }, {
73615
+ 'css': 'basetype-dynalight-mada.css',
73616
+ 'sectioncss': 'type-dynalight-mada.css',
73617
+ 'classname': 'type-dynalight-mada',
73618
+ 'img': 'type-dynalight-mada.jpg',
73619
+ 'category': 8,
73620
+ 'default': false,
73621
+ 'caption': 'Dynalight & Mada'
73622
+ }, {
73623
+ 'css': 'basetype-gravitasone-nanummyeongjo.css',
73624
+ 'sectioncss': 'type-gravitasone-nanummyeongjo.css',
73625
+ 'classname': 'type-gravitasone-nanummyeongjo',
73626
+ 'img': 'type-gravitasone-nanummyeongjo.jpg',
73627
+ 'category': 10,
73628
+ 'default': false,
73629
+ 'caption': 'Gravitas One & Nanum Myeongjo'
73630
+ }, {
73631
+ 'css': 'basetype-alexbrush-ibmplexsans.css',
73632
+ 'sectioncss': 'type-alexbrush-ibmplexsans.css',
73633
+ 'classname': 'type-alexbrush-ibmplexsans',
73634
+ 'img': 'type-alexbrush-ibmplexsans.jpg',
73635
+ 'category': 9,
73636
+ 'default': false,
73637
+ 'caption': 'Alex Brush & IBM Plex Sans'
73638
+ }]
73639
+ }
73640
+ },
73641
+
73642
+ /* Old Version (backward compatible) */
73643
+ onAddSectionOpen: function () {},
73644
+ contentHtmlStart: '<div class="is-container is-builder container"><div class="row clearfix"><div class="column full">',
73645
+ contentHtmlEnd: '</div></div></div>'
73646
+ };
73647
+ this.settings = Object.assign(this, defaults, settings);
73648
+
73649
+ if (this.settings.imageSelect !== '') {
73650
+ this.settings.imageselect = this.settings.imageSelect;
73651
+ } else if (this.settings.imageselect != '') {
73652
+ this.settings.imageSelect = this.settings.imageselect;
73653
+ }
73654
+
73655
+ if (this.settings.fileSelect !== '') {
73656
+ this.settings.fileselect = this.settings.fileSelect;
73657
+ } else if (this.settings.fileselect != '') {
73658
+ this.settings.fileSelect = this.settings.fileselect;
73659
+ }
73660
+
73661
+ if (this.settings.videoSelect !== '') {
73662
+ this.settings.videoselect = this.settings.videoSelect;
73663
+ } else if (this.settings.videoselect != '') {
73664
+ this.settings.videoSelect = this.settings.videoselect;
73665
+ }
73666
+
73667
+ if (this.settings.largerImageHandler !== '') {
73668
+ this.settings.mediaHandler = this.settings.largerImageHandler;
73669
+ } else if (this.settings.mediaHandler != '') {
73670
+ this.settings.largerImageHandler = this.settings.mediaHandler;
73671
+ }
73672
+
73673
+ if (this.settings.onLargerImageUpload) {
73674
+ this.settings.onMediaUpload = this.settings.onLargerImageUpload;
73675
+ } else if (this.settings.onMediaUpload) {
73676
+ this.settings.onLargerImageUpload = this.settings.onMediaUpload;
73677
+ }
73678
+
73679
+ if (this.settings.snippetPathReplace.length > 0 && this.settings.designPathReplace.length === 0) {
73680
+ this.settings.designPathReplace = this.settings.snippetPathReplace;
73681
+ }
73682
+
73683
+ if (this.settings.contentStyleWithSample) {
73684
+ this.settings.contentStyles = this.settings.contentStylesAlt;
73685
+ }
73686
+
73687
+ this.wrapperEl = document.querySelector(this.wrapper);
73688
+
73689
+ if (dom.hasClass(this.wrapperEl, 'preview')) {
73690
+ this.preview = true;
73691
+ return;
73692
+ }
73693
+
73694
+ dom.addClass(this.wrapperEl, 'is-wrapper');
73695
+ dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
73696
+
73697
+ let old = this.settings.onRender;
73698
+
73699
+ this.settings.onRender = function () {
73700
+ old.call(this);
73701
+
73702
+ try {
73703
+ //Run built-in plugin inside the builder
73704
+ setTimeout(function () {
73705
+ if (window.skrollr) {
73706
+ let obj = window.skrollr.get();
73707
+ if (obj) obj.refresh();
73708
+ }
73709
+ }, 100);
73710
+ } catch (e) {// Do Nothing
73711
+ }
73712
+ }; //Extend onChange with built-in plugins
73713
+
73714
+
73715
+ let old2 = this.settings.onChange;
73716
+
73717
+ this.settings.onChange = () => {
73718
+ old2.call(this);
73719
+ setTimeout(() => {
73720
+ this.quickPosTool();
73721
+ }, 100);
73722
+ }; // Hidden placement for builder things
73723
+
73724
+
73725
+ let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
73726
+
73727
+ if (!builderStuff) {
73728
+ builderStuff = document.createElement('div');
73729
+ builderStuff.id = '_cbhtml';
73730
+ builderStuff.className = 'is-ui';
73731
+ document.body.appendChild(builderStuff);
73732
+ builderStuff = document.querySelector('#_cbhtml');
73733
+ }
73734
+
73735
+ this.builderStuff = builderStuff;
73736
+ prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons)
73737
+
73738
+ this.sidebar = new SideBar(this);
73739
+
73740
+ if (!window.data_basic) {
73741
+ dom.addExternalScripts([this.snippetUrl], () => {
73742
+ this.editorSetup();
73743
+ this.init();
73744
+ });
73745
+ } else {
73746
+ this.editorSetup();
73747
+ this.init();
73748
+ }
73749
+
73750
+ window.contentbox = this;
73751
+ window.applyBoxImage = this.boxImage.bind(this);
73752
+ window.applyLargerImage = this.applyLargerImage.bind(this);
73753
+ window.returnUrl = this.returnUrl.bind(this);
73754
+ window._contentbox = this;
73755
+ } // constructor
73756
+
73757
+
73758
+ editorSetup() {
73759
+ this.editor = new ContentBuilder({
73760
+ container: '.is-container',
73761
+ page: '.is-wrapper',
73762
+ // ContentBuilder
73763
+ scriptPath: this.settings.scriptPath,
73764
+ pluginPath: this.settings.pluginPath,
73765
+ modulePath: this.settings.modulePath,
73766
+ fontAssetPath: this.settings.fontAssetPath,
73767
+ assetPath: this.settings.assetPath,
73768
+ plugins: this.settings.plugins,
73769
+ disableConfig: this.settings.disableConfig,
73770
+ snippetList: '#divSidebarSnippets',
73771
+ snippetPath: this.settings.snippetPath,
73772
+ snippetUrl: this.settings.snippetUrl,
73773
+ snippetJSON: window.data_basic,
73774
+ snippetPathReplace: this.settings.snippetPathReplace,
73775
+ maxColumns: 6,
73776
+ slider: this.settings.slider,
73777
+ onRender: this.settings.onRender,
73778
+ onChange: this.settings.onChange,
73779
+ onRefreshTool: () => {
73780
+ setTimeout(() => {
73781
+ this.quickPosTool();
73782
+ }, 100);
73783
+ },
73784
+ useLightbox: this.settings.useLightbox,
73785
+ themes: this.settings.themes,
73786
+ moduleConfig: this.settings.moduleConfig,
73787
+ onImageSelectClick: this.settings.onImageSelectClick,
73788
+ onFileSelectClick: this.settings.onFileSelectClick,
73789
+ onImageBrowseClick: this.settings.onImageBrowseClick,
73790
+ onImageSettingClick: this.settings.onImageSettingClick,
73791
+ onPluginsLoaded: this.settings.onPluginsLoaded,
73792
+ imageselect: this.settings.imageselect,
73793
+ fileselect: this.settings.fileselect,
73794
+ imageEmbed: this.settings.imageEmbed,
73795
+ sourceEditor: this.settings.sourceEditor,
73796
+ customval: this.settings.customval,
73797
+ colors: this.settings.colors,
73798
+ gradientcolors: this.settings.gradientcolors,
73799
+ buttons: this.settings.buttons,
73800
+ buttonsMore: this.settings.buttonsMore,
73801
+ elementButtons: this.settings.elementButtons,
73802
+ elementButtonsMore: this.settings.elementButtonsMore,
73803
+ iconButtons: this.settings.iconButtons,
73804
+ iconButtonsMore: this.settings.iconButtonsMore,
73805
+ customTags: this.settings.customTags,
73806
+ largerImageHandler: this.settings.largerImageHandler,
73807
+ onLargerImageUpload: this.settings.onLargerImageUpload,
73808
+ videoHandler: this.settings.videoHandler,
73809
+ onVideoUpload: this.settings.onVideoUpload,
73810
+ framework: this.settings.framework,
73811
+ cellFormat: this.settings.cellFormat,
73812
+ rowFormat: this.settings.rowFormat,
73813
+ row: this.settings.row,
73814
+ cols: this.settings.cols,
73815
+ colequal: this.settings.colequal,
73816
+ colsizes: this.settings.colsizes,
73817
+ classReplace: this.settings.classReplace,
73818
+ columnTool: this.settings.columnTool,
73819
+ elementTool: this.settings.elementTool,
73820
+ animateModal: this.settings.animateModal,
73821
+ elementAnimate: this.settings.elementAnimate,
73822
+ elementEditor: this.settings.elementEditor,
73823
+ onAdd: this.settings.onAdd,
73824
+ imageQuality: this.settings.imageQuality,
73825
+ columnHtmlEditor: this.settings.columnHtmlEditor,
73826
+ rowHtmlEditor: this.settings.rowHtmlEditor,
73827
+ rowMoveButtons: this.settings.rowMoveButtons,
73828
+ htmlSyntaxHighlighting: this.settings.htmlSyntaxHighlighting,
73829
+ scrollableEditingToolbar: this.settings.scrollableEditingToolbar,
73830
+ toolbar: this.settings.toolbar,
73831
+ toolbarDisplay: this.settings.toolbarDisplay,
73832
+ toolbarAddSnippetButton: this.settings.toolbarAddSnippetButton,
73833
+ paste: this.settings.paste,
73834
+ builderMode: this.settings.builderMode,
73835
+ rowcolOutline: this.settings.rowcolOutline,
73836
+ elementSelection: this.settings.elementSelection,
73837
+ animatedSorting: this.settings.animatedSorting,
73838
+ dragWithoutHandle: this.settings.dragWithoutHandle,
73839
+ addButtonPlacement: this.settings.addButtonPlacement,
73840
+ outlineMode: this.settings.outlineMode,
73841
+ elementHighlight: this.settings.elementHighlight,
73842
+ rowTool: this.settings.rowTool,
73843
+ toolStyle: this.settings.toolStyle,
73844
+ outlineStyle: this.settings.outlineStyle,
73845
+ snippetAddTool: this.settings.snippetAddTool,
73846
+ mobileSimpleEdit: this.settings.mobileSimpleEdit,
73847
+ clearPreferences: this.settings.clearPreferences,
73848
+ snippetCategories: this.settings.snippetCategories,
73849
+ defaultSnippetCategory: this.settings.defaultSnippetCategory,
73850
+ undoRedoStyles: this.settings.undoRedoStyles,
73851
+ onUndo: () => {
73852
+ this.pageSetup();
73853
+ },
73854
+ onRedo: () => {
73855
+ this.pageSetup();
73856
+ },
73857
+ undoContainerOnly: this.settings.undoContainerOnly,
73858
+ absolutePath: this.settings.absolutePath,
73859
+ zoom: this.zoom,
73860
+ onZoomStart: () => {
73861
+ // const wrapper = this.wrapperEl;
73862
+ // wrapper.style.transition = 'all ease 0.1s';
73863
+ let elms = document.querySelectorAll('.is-section-tool');
73864
+ Array.prototype.forEach.call(elms, function (elm) {
73865
+ if (elm.style.display === 'block') {
73866
+ elm.setAttribute('data-section-active', '');
73867
+ elm.style.display = 'none';
73868
+ }
73869
+ });
73870
+ let boxTool = document.querySelector('#divBoxTool');
73871
+
73872
+ if (boxTool.style.display === 'flex') {
73873
+ boxTool.setAttribute('data-box-active', '');
73874
+ boxTool.style.display = 'none';
73875
+ }
73876
+ },
73877
+ onZoomEnd: () => {
73878
+ this.addSpace();
73879
+ let elm = document.querySelector('.is-section-tool[data-section-active]');
73880
+
73881
+ if (elm) {
73882
+ elm.removeAttribute('data-section-active');
73883
+ elm.style.display = 'block';
73884
+ }
73885
+
73886
+ elm = document.querySelector('#divBoxTool[data-box-active]');
73887
+
73888
+ if (elm) {
73889
+ elm.removeAttribute('data-box-active');
73890
+ elm.style.display = 'flex';
73891
+ }
73892
+
73893
+ this.rePositionTool();
73894
+ },
73895
+ onThemeChange: () => {
73896
+ this.refreshUIStyle();
73897
+ },
73898
+ fileSelect: this.settings.fileSelect,
73899
+ imageSelect: this.settings.imageSelect,
73900
+ videoSelect: this.settings.videoSelect,
73901
+ onContentClick: e => {
73902
+ if (this.settings.onContentClick) this.settings.onContentClick();
73903
+ let elm = e.target;
73904
+ let editable = elm.closest('[contenteditable="true"]');
73905
+
73906
+ if (!editable) {
73907
+ // only for locked/protected content
73908
+ let link = this.editor.dom.getParentElement(elm, 'a');
73909
+
73910
+ if (elm.tagName.toLowerCase() === 'a' || link) {
73911
+ if (elm.tagName.toLowerCase() === 'a') link = elm;
73912
+ let url = link.getAttribute('href');
73913
+
73914
+ if (url) {
73915
+ if (url.indexOf('#') === 0) {
73916
+ if (url.indexOf('#section') === 0) {
73917
+ let num = url.replace('#section', '');
73918
+
73919
+ if (!isNaN(parseInt(num))) {
73920
+ let section = document.querySelector(`.is-section:nth-child(${num})`);
73921
+
73922
+ if (section) {
73923
+ this.scrollTo(section);
73924
+ e.preventDefault();
73925
+ }
73926
+ }
73927
+ } else {
73928
+ let bookmark = document.querySelector(url);
73929
+
73930
+ if (bookmark) {
73931
+ this.scrollTo(bookmark);
73932
+ e.preventDefault();
73933
+ }
73934
+ }
73935
+ }
73936
+ }
73937
+ }
73938
+ }
73939
+ }
73940
+ });
73941
+ } // editorSetup
73942
+
73943
+
73944
+ init() {
73945
+ // Add special css (remove on destroy)
73946
+ dom.appendHtml(document.head, `<style id="_contentbox_lightbox">
73947
+ body {
73948
+ background: ${this.settings.backgroundColor};
73949
+ }
73950
+ .block-click.is-box {
73951
+ cursor: unset;
73952
+ }
73953
+ .block-click.is-box > * {
73954
+ pointer-events: unset;
73955
+ user-select: unset;
73956
+ }
73957
+ </style>`); // Add page-overlay (to prevent mouseover during page init.
73958
+ // Otherwise the mouseover won't be triggered when the page ready)
73959
+
73960
+ const builderStuff = this.builderStuff;
73961
+ dom.appendHtml(builderStuff, '<div class="page-overlay"></div>');
73962
+ let pageOverlay = builderStuff.querySelector('.page-overlay');
73963
+ this.editsection = new EditSection(this);
73964
+ this.editbox = new EditBox(this);
73965
+ setTimeout(() => {
73966
+ if (!this.pageSetupDone) {
73967
+ this.pageSetup();
73968
+ } // this.wrapperEl.style.opacity = 1;
73969
+ // Remove the page-overlay
73970
+ // setTimeout(()=>{
73971
+ // pageOverlay.parentNode.removeChild(pageOverlay);
73972
+ // }, 10);
73973
+
73974
+ }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
73975
+
73976
+ Pace.start();
73977
+ Pace.on('hide', () => {
73978
+ let elm = document.querySelector('.pace-inactive');
73979
+ if (elm) elm.parentNode.removeChild(elm);
73980
+ this.wrapperEl.style.opacity = 1;
73981
+ let sidebar = builderStuff.querySelector('.is-sidebar');
73982
+ if (sidebar) sidebar.style.opacity = 1; // Remove the page-overlay
73983
+
73984
+ pageOverlay = builderStuff.querySelectorAll('.page-overlay');
73985
+ pageOverlay.forEach(elm => {
73986
+ elm.parentNode.removeChild(elm);
73987
+ });
73988
+ }); // Add document Click event
73989
+
73990
+ document.addEventListener('click', this.doDocumentClick = e => {
73991
+ e = e || window.event;
73992
+ var target = e.target || e.srcElement;
73993
+ let a = false,
73994
+ b = false,
73995
+ c = false,
73996
+ d = false;
73997
+ let element = target;
73998
+
73999
+ while (element) {
74000
+ if (!element.tagName) break;
74001
+ if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
74002
+ if (dom.hasClass(element, 'is-sidebar-content')) a = true;
74003
+ if (dom.hasClass(element, 'is-sidebar')) b = true;
74004
+ if (dom.hasClass(element, 'is-builder')) c = true;
74005
+
74006
+ if (dom.hasClass(element, 'is-section')) {
74007
+ if (element.hasAttribute('data-anim-start') || element.hasAttribute('data-anim-end')) d = true;
74008
+ }
74009
+
74010
+ element = element.parentNode;
74011
+ }
74012
+
74013
+ if (!(a || b)) {
74014
+ this.sidebar.closeSidebar();
74015
+ }
74016
+
74017
+ if (c && d) {
74018
+ this.controlHiddenOnScroll = true;
74019
+ }
74020
+ }); // Hide tool on scrolling
74021
+
74022
+ let timeoutId;
74023
+ window.addEventListener('scroll', this.doWindowScroll = () => {
74024
+ if (this.controlHiddenOnScroll) {
74025
+ let builderActive = document.querySelector('.builder-active');
74026
+
74027
+ if (builderActive) {
74028
+ this.editor.util.clearActiveCell();
74029
+ this.editor.util.clearControls();
74030
+ this.controlHiddenOnScroll = false;
74031
+ }
74032
+ }
74033
+
74034
+ clearTimeout(timeoutId);
74035
+ timeoutId = setTimeout(() => {
74036
+ let hover = false;
74037
+
74038
+ if (this.activeSection) {
74039
+ if (this.activeSection.matches(':hover')) {
74040
+ hover = true;
74041
+ }
74042
+ }
74043
+
74044
+ if (!hover) {
74045
+ let boxTool = document.querySelector('#divBoxTool');
74046
+ boxTool.style.display = 'none';
74047
+ }
74048
+ }, 30);
74049
+ });
74050
+ } // init
74051
+
74052
+
74053
+ pageSetup() {
74054
+ // Page Setup (previously: setup)
74055
+ const sections = this.wrapperEl.querySelectorAll('.is-section');
74056
+ sections.forEach(section => {
74057
+ // Section Setup
74058
+ this.sectionSetup(section); // Box Setup (previously: applyBoxBehavior)
74059
+
74060
+ if (dom.hasClass(section, 'is-box')) {
74061
+ this.boxSetup(section);
74062
+ } else {
74063
+ const boxes = section.querySelectorAll('.is-box');
74064
+ boxes.forEach(box => {
74065
+ this.boxSetup(box);
74066
+ });
74067
+ }
74068
+ });
74069
+ this.editor.applyBehavior();
74070
+ this.addSpace();
74071
+ } // pageSetup
74072
+
74073
+
74074
+ addSpace() {
74075
+ /*
74076
+ Add dummy DIV after the last section (for the ability to adjust last section according bottom bar).
74077
+ In FF, needed only when adding new section.
74078
+ In IE, needed on normal.
74079
+ */
74080
+ const dummy = this.wrapperEl.querySelector('div.is-dummy');
72449
74081
 
72450
- /* Old Version (backward compatible) */
72451
- onAddSectionOpen: function () {},
72452
- contentHtmlStart: '<div class="is-container is-builder container"><div class="row clearfix"><div class="column full">',
72453
- contentHtmlEnd: '</div></div></div>'
72454
- };
72455
- this.settings = Object.assign(this, defaults, settings);
72456
-
72457
- if (this.settings.imageSelect !== '') {
72458
- this.settings.imageselect = this.settings.imageSelect;
72459
- } else if (this.settings.imageselect != '') {
72460
- this.settings.imageSelect = this.settings.imageselect;
72461
- }
72462
-
72463
- if (this.settings.fileSelect !== '') {
72464
- this.settings.fileselect = this.settings.fileSelect;
72465
- } else if (this.settings.fileselect != '') {
72466
- this.settings.fileSelect = this.settings.fileselect;
72467
- }
72468
-
72469
- if (this.settings.videoSelect !== '') {
72470
- this.settings.videoselect = this.settings.videoSelect;
72471
- } else if (this.settings.videoselect != '') {
72472
- this.settings.videoSelect = this.settings.videoselect;
72473
- }
72474
-
72475
- if (this.settings.largerImageHandler !== '') {
72476
- this.settings.mediaHandler = this.settings.largerImageHandler;
72477
- } else if (this.settings.mediaHandler != '') {
72478
- this.settings.largerImageHandler = this.settings.mediaHandler;
72479
- }
72480
-
72481
- if (this.settings.onLargerImageUpload) {
72482
- this.settings.onMediaUpload = this.settings.onLargerImageUpload;
72483
- } else if (this.settings.onMediaUpload) {
72484
- this.settings.onLargerImageUpload = this.settings.onMediaUpload;
72485
- }
72486
-
72487
- if (this.settings.snippetPathReplace.length > 0 && this.settings.designPathReplace.length === 0) {
72488
- this.settings.designPathReplace = this.settings.snippetPathReplace;
72489
- }
72490
-
72491
- this.wrapperEl = document.querySelector(this.wrapper);
72492
-
72493
- if (dom.hasClass(this.wrapperEl, 'preview')) {
72494
- this.preview = true;
72495
- return;
72496
- }
72497
-
72498
- dom.addClass(this.wrapperEl, 'is-wrapper');
72499
- dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
72500
-
72501
- let old = this.settings.onRender;
72502
-
72503
- this.settings.onRender = function () {
72504
- old.call(this);
72505
-
72506
- try {
72507
- //Run built-in plugin inside the builder
72508
- setTimeout(function () {
72509
- if (window.skrollr) {
72510
- let obj = window.skrollr.get();
72511
- if (obj) obj.refresh();
72512
- }
72513
- }, 100);
72514
- } catch (e) {// Do Nothing
72515
- }
72516
- }; //Extend onChange with built-in plugins
72517
-
72518
-
72519
- let old2 = this.settings.onChange;
72520
-
72521
- this.settings.onChange = () => {
72522
- old2.call(this);
72523
- setTimeout(() => {
72524
- this.quickPosTool();
72525
- }, 100);
72526
- }; // Hidden placement for builder things
72527
-
72528
-
72529
- let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
72530
-
72531
- if (!builderStuff) {
72532
- builderStuff = document.createElement('div');
72533
- builderStuff.id = '_cbhtml';
72534
- builderStuff.className = 'is-ui';
72535
- document.body.appendChild(builderStuff);
72536
- builderStuff = document.querySelector('#_cbhtml');
72537
- }
72538
-
72539
- this.builderStuff = builderStuff;
72540
- prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons)
72541
-
72542
- this.sidebar = new SideBar(this);
72543
-
72544
- if (!window.data_basic) {
72545
- dom.addExternalScripts([this.snippetUrl], () => {
72546
- this.editorSetup();
72547
- this.init();
72548
- });
72549
- } else {
72550
- this.editorSetup();
72551
- this.init();
72552
- }
72553
-
72554
- window.contentbox = this;
72555
- window.applyBoxImage = this.boxImage.bind(this);
72556
- window.applyLargerImage = this.applyLargerImage.bind(this);
72557
- window.returnUrl = this.returnUrl.bind(this);
72558
- window._contentbox = this;
72559
- } // constructor
72560
-
72561
-
72562
- editorSetup() {
72563
- this.editor = new ContentBuilder({
72564
- container: '.is-container',
72565
- page: '.is-wrapper',
72566
- // ContentBuilder
72567
- scriptPath: this.settings.scriptPath,
72568
- pluginPath: this.settings.pluginPath,
72569
- modulePath: this.settings.modulePath,
72570
- fontAssetPath: this.settings.fontAssetPath,
72571
- assetPath: this.settings.assetPath,
72572
- plugins: this.settings.plugins,
72573
- disableConfig: this.settings.disableConfig,
72574
- snippetList: '#divSidebarSnippets',
72575
- snippetPath: this.settings.snippetPath,
72576
- snippetUrl: this.settings.snippetUrl,
72577
- snippetJSON: window.data_basic,
72578
- snippetPathReplace: this.settings.snippetPathReplace,
72579
- maxColumns: 6,
72580
- slider: this.settings.slider,
72581
- onRender: this.settings.onRender,
72582
- onChange: this.settings.onChange,
72583
- onRefreshTool: () => {
72584
- setTimeout(() => {
72585
- this.quickPosTool();
72586
- }, 100);
72587
- },
72588
- useLightbox: this.settings.useLightbox,
72589
- themes: this.settings.themes,
72590
- moduleConfig: this.settings.moduleConfig,
72591
- onImageSelectClick: this.settings.onImageSelectClick,
72592
- onFileSelectClick: this.settings.onFileSelectClick,
72593
- onImageBrowseClick: this.settings.onImageBrowseClick,
72594
- onImageSettingClick: this.settings.onImageSettingClick,
72595
- onPluginsLoaded: this.settings.onPluginsLoaded,
72596
- imageselect: this.settings.imageselect,
72597
- fileselect: this.settings.fileselect,
72598
- imageEmbed: this.settings.imageEmbed,
72599
- sourceEditor: this.settings.sourceEditor,
72600
- customval: this.settings.customval,
72601
- colors: this.settings.colors,
72602
- gradientcolors: this.settings.gradientcolors,
72603
- buttons: this.settings.buttons,
72604
- buttonsMore: this.settings.buttonsMore,
72605
- elementButtons: this.settings.elementButtons,
72606
- elementButtonsMore: this.settings.elementButtonsMore,
72607
- iconButtons: this.settings.iconButtons,
72608
- iconButtonsMore: this.settings.iconButtonsMore,
72609
- customTags: this.settings.customTags,
72610
- largerImageHandler: this.settings.largerImageHandler,
72611
- onLargerImageUpload: this.settings.onLargerImageUpload,
72612
- videoHandler: this.settings.videoHandler,
72613
- onVideoUpload: this.settings.onVideoUpload,
72614
- framework: this.settings.framework,
72615
- cellFormat: this.settings.cellFormat,
72616
- rowFormat: this.settings.rowFormat,
72617
- row: this.settings.row,
72618
- cols: this.settings.cols,
72619
- colequal: this.settings.colequal,
72620
- colsizes: this.settings.colsizes,
72621
- classReplace: this.settings.classReplace,
72622
- columnTool: this.settings.columnTool,
72623
- elementTool: this.settings.elementTool,
72624
- animateModal: this.settings.animateModal,
72625
- elementAnimate: this.settings.elementAnimate,
72626
- elementEditor: this.settings.elementEditor,
72627
- onAdd: this.settings.onAdd,
72628
- imageQuality: this.settings.imageQuality,
72629
- columnHtmlEditor: this.settings.columnHtmlEditor,
72630
- rowHtmlEditor: this.settings.rowHtmlEditor,
72631
- rowMoveButtons: this.settings.rowMoveButtons,
72632
- htmlSyntaxHighlighting: this.settings.htmlSyntaxHighlighting,
72633
- scrollableEditingToolbar: this.settings.scrollableEditingToolbar,
72634
- toolbar: this.settings.toolbar,
72635
- toolbarDisplay: this.settings.toolbarDisplay,
72636
- toolbarAddSnippetButton: this.settings.toolbarAddSnippetButton,
72637
- paste: this.settings.paste,
72638
- builderMode: this.settings.builderMode,
72639
- rowcolOutline: this.settings.rowcolOutline,
72640
- elementSelection: this.settings.elementSelection,
72641
- animatedSorting: this.settings.animatedSorting,
72642
- dragWithoutHandle: this.settings.dragWithoutHandle,
72643
- addButtonPlacement: this.settings.addButtonPlacement,
72644
- outlineMode: this.settings.outlineMode,
72645
- elementHighlight: this.settings.elementHighlight,
72646
- rowTool: this.settings.rowTool,
72647
- toolStyle: this.settings.toolStyle,
72648
- outlineStyle: this.settings.outlineStyle,
72649
- snippetAddTool: this.settings.snippetAddTool,
72650
- mobileSimpleEdit: this.settings.mobileSimpleEdit,
72651
- clearPreferences: this.settings.clearPreferences,
72652
- snippetCategories: this.settings.snippetCategories,
72653
- defaultSnippetCategory: this.settings.defaultSnippetCategory,
72654
- undoRedoStyles: this.settings.undoRedoStyles,
72655
- onUndo: () => {
72656
- this.pageSetup();
72657
- },
72658
- onRedo: () => {
72659
- this.pageSetup();
72660
- },
72661
- undoContainerOnly: this.settings.undoContainerOnly,
72662
- absolutePath: this.settings.absolutePath,
72663
- zoom: this.zoom,
72664
- onZoomStart: () => {
72665
- // const wrapper = this.wrapperEl;
72666
- // wrapper.style.transition = 'all ease 0.1s';
72667
- let elms = document.querySelectorAll('.is-section-tool');
72668
- Array.prototype.forEach.call(elms, function (elm) {
72669
- if (elm.style.display === 'block') {
72670
- elm.setAttribute('data-section-active', '');
72671
- elm.style.display = 'none';
72672
- }
72673
- });
72674
- let boxTool = document.querySelector('#divBoxTool');
72675
-
72676
- if (boxTool.style.display === 'flex') {
72677
- boxTool.setAttribute('data-box-active', '');
72678
- boxTool.style.display = 'none';
72679
- }
72680
- },
72681
- onZoomEnd: () => {
72682
- this.addSpace();
72683
- let elm = document.querySelector('.is-section-tool[data-section-active]');
72684
-
72685
- if (elm) {
72686
- elm.removeAttribute('data-section-active');
72687
- elm.style.display = 'block';
72688
- }
72689
-
72690
- elm = document.querySelector('#divBoxTool[data-box-active]');
72691
-
72692
- if (elm) {
72693
- elm.removeAttribute('data-box-active');
72694
- elm.style.display = 'flex';
72695
- }
72696
-
72697
- this.rePositionTool();
72698
- },
72699
- onThemeChange: () => {
72700
- this.refreshUIStyle();
72701
- },
72702
- fileSelect: this.settings.fileSelect,
72703
- imageSelect: this.settings.imageSelect,
72704
- videoSelect: this.settings.videoSelect,
72705
- onContentClick: () => {
72706
- this.sidebar.closeSidebar();
72707
- if (this.settings.onContentClick) this.settings.onContentClick(); // // Close all opened sidebar
72708
- // const overlay = document.querySelector('.is-sidebar-overlay');
72709
- // if(overlay) {
72710
- // overlay.remove();
72711
- // document.body.style.overflowY = '';
72712
- // }
72713
- // document.querySelectorAll('.is-sidebar-button.active').forEach((elm)=>{
72714
- // dom.removeClass(elm,'active');
72715
- // });
72716
- // document.querySelectorAll('.is-sidebar-content.active').forEach((elm)=>{
72717
- // dom.removeClass(elm,'active');
72718
- // });
72719
- }
72720
- });
72721
- } // editorSetup
72722
-
72723
-
72724
- init() {
72725
- // Add special css (remove on destroy)
72726
- dom.appendHtml(document.head, `<style id="_contentbox_lightbox">
72727
- body {
72728
- background: ${this.settings.backgroundColor};
72729
- }
72730
- .block-click.is-box {
72731
- cursor: unset;
72732
- }
72733
- .block-click.is-box > * {
72734
- pointer-events: unset;
72735
- user-select: unset;
72736
- }
72737
- </style>`); // Add page-overlay (to prevent mouseover during page init.
72738
- // Otherwise the mouseover won't be triggered when the page ready)
72739
-
72740
- const builderStuff = this.builderStuff;
72741
- dom.appendHtml(builderStuff, '<div class="page-overlay"></div>');
72742
- let pageOverlay = builderStuff.querySelector('.page-overlay');
72743
- this.editsection = new EditSection(this);
72744
- this.editbox = new EditBox(this);
72745
- setTimeout(() => {
72746
- if (!this.pageSetupDone) {
72747
- this.pageSetup();
72748
- } // this.wrapperEl.style.opacity = 1;
72749
- // Remove the page-overlay
72750
- // setTimeout(()=>{
72751
- // pageOverlay.parentNode.removeChild(pageOverlay);
72752
- // }, 10);
72753
-
72754
- }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
72755
-
72756
- Pace.start();
72757
- Pace.on('hide', () => {
72758
- let elm = document.querySelector('.pace-inactive');
72759
- if (elm) elm.parentNode.removeChild(elm);
72760
- this.wrapperEl.style.opacity = 1;
72761
- let sidebar = builderStuff.querySelector('.is-sidebar');
72762
- if (sidebar) sidebar.style.opacity = 1; // Remove the page-overlay
72763
-
72764
- pageOverlay = builderStuff.querySelectorAll('.page-overlay');
72765
- pageOverlay.forEach(elm => {
72766
- elm.parentNode.removeChild(elm);
72767
- });
72768
- }); // Add document Click event
72769
-
72770
- document.addEventListener('click', this.doDocumentClick = e => {
72771
- e = e || window.event;
72772
- var target = e.target || e.srcElement;
72773
- let a = false,
72774
- b = false;
72775
- let element = target;
72776
-
72777
- while (element) {
72778
- if (!element.tagName) break;
72779
- if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
72780
- if (dom.hasClass(element, 'is-sidebar-content')) a = true;
72781
- if (dom.hasClass(element, 'is-sidebar')) b = true;
72782
- element = element.parentNode;
72783
- }
72784
-
72785
- if (!(a || b)) {
72786
- this.sidebar.closeSidebar();
72787
- }
72788
- });
72789
- } // init
72790
-
72791
-
72792
- pageSetup() {
72793
- // Page Setup (previously: setup)
72794
- const sections = this.wrapperEl.querySelectorAll('.is-section');
72795
- sections.forEach(section => {
72796
- // Section Setup
72797
- this.sectionSetup(section); // Box Setup (previously: applyBoxBehavior)
72798
-
72799
- if (dom.hasClass(section, 'is-box')) {
72800
- this.boxSetup(section);
72801
- } else {
72802
- const boxes = section.querySelectorAll('.is-box');
72803
- boxes.forEach(box => {
72804
- this.boxSetup(box);
72805
- });
72806
- }
72807
- });
72808
- this.editor.applyBehavior();
72809
- this.addSpace();
72810
- } // pageSetup
72811
-
72812
-
72813
- addSpace() {
72814
- /*
72815
- Add dummy DIV after the last section (for the ability to adjust last section according bottom bar).
72816
- In FF, needed only when adding new section.
72817
- In IE, needed on normal.
72818
- */
72819
- const dummy = this.wrapperEl.querySelector('div.is-dummy');
72820
-
72821
- if (dummy) {
72822
- dummy.parentNode.removeChild(dummy);
72823
- }
72824
-
72825
- dom.appendHtml(this.wrapperEl, '<div class="is-dummy" style="height:0px;"></div>'); //always on the last
72826
-
72827
- setTimeout(() => {
72828
- const wrapper = this.wrapperEl;
72829
- wrapper.style.transition = '';
72830
- const top = (wrapper.getBoundingClientRect().top + window.pageYOffset) * 1 / this.editor.zoom;
72831
- const space = wrapper.querySelector('.is-dummy');
72832
- space.style.height = top + 'px';
72833
- }, 300);
72834
- }
72835
-
72836
- scrollTo(element) {
74082
+ if (dummy) {
74083
+ dummy.parentNode.removeChild(dummy);
74084
+ }
74085
+
74086
+ dom.appendHtml(this.wrapperEl, '<div class="is-dummy" style="height:0px;"></div>'); //always on the last
74087
+
74088
+ setTimeout(() => {
74089
+ const wrapper = this.wrapperEl;
74090
+ wrapper.style.transition = '';
74091
+ const top = (wrapper.getBoundingClientRect().top + window.pageYOffset) * 1 / this.editor.zoom;
74092
+ const space = wrapper.querySelector('.is-dummy');
74093
+ space.style.height = top + 'px';
74094
+ }, 300);
74095
+ }
74096
+
74097
+ scrollTo(element, delay = 0) {
72837
74098
  setTimeout(() => {
72838
74099
  element.scrollIntoView({
72839
74100
  behavior: 'smooth',
72840
74101
  block: 'center'
72841
74102
  });
72842
- }, 600);
74103
+ }, delay);
72843
74104
  }
72844
74105
 
72845
74106
  sectionSetup(section) {
@@ -73071,7 +74332,7 @@ class ContentBox {
73071
74332
  dom.removeClass(document.querySelectorAll('.is-sidebar-content'), 'active');
73072
74333
  document.body.style.overflowY = '';
73073
74334
  this.addSpace();
73074
- this.scrollTo(newSection);
74335
+ this.scrollTo(newSection, 600);
73075
74336
  } // addIdea
73076
74337
 
73077
74338
 
@@ -73140,7 +74401,7 @@ class ContentBox {
73140
74401
  if (localStorage.getItem('_zoom') !== null) {
73141
74402
  zoom = localStorage.getItem('_zoom');
73142
74403
  } else {
73143
- zoom = 1;
74404
+ zoom = this.settings.zoom; //1;
73144
74405
  }
73145
74406
 
73146
74407
  let leftadj;
@@ -73312,6 +74573,9 @@ class ContentBox {
73312
74573
  }
73313
74574
 
73314
74575
  loadHtml(html) {
74576
+ // Reset
74577
+ this.activeBox = null;
74578
+ this.activeSection = null;
73315
74579
  const wrapper = this.wrapperEl;
73316
74580
 
73317
74581
  if (!wrapper.style.opacity) {
@@ -73389,6 +74653,8 @@ class ContentBox {
73389
74653
  }
73390
74654
 
73391
74655
  destroy() {
74656
+ document.removeEventListener('click', this.doDocumentClick, false);
74657
+ window.removeEventListener('scroll', this.doWindowScroll, false);
73392
74658
  let html = this.html(); // this.builderStuff.parentNode.removeChild(this.builderStuff);
73393
74659
 
73394
74660
  this.builderStuff.innerHTML = '';