@innovastudio/contentbox 1.0.29 → 1.0.30
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.
|
@@ -412,12 +412,10 @@ class SideBar {
|
|
|
412
412
|
let panelId = btn.getAttribute('data-content');
|
|
413
413
|
|
|
414
414
|
if (panelId) {
|
|
415
|
-
if
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
}
|
|
420
|
-
|
|
415
|
+
// if(panelId==='divSidebarSections') { // || panelId==='divSidebarTypography'
|
|
416
|
+
// 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>';
|
|
417
|
+
// dom.appendHtml(builderStuff, overlayHtml);
|
|
418
|
+
// }
|
|
421
419
|
const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
|
|
422
420
|
if (modalOverlay) modalOverlay.addEventListener('click', () => {
|
|
423
421
|
// Close all opened sidebar
|
|
@@ -630,8 +628,7 @@ class SideBar {
|
|
|
630
628
|
}
|
|
631
629
|
|
|
632
630
|
viewIdeas() {
|
|
633
|
-
document.body.style.overflowY = 'hidden'; //overflow
|
|
634
|
-
|
|
631
|
+
// document.body.style.overflowY = 'hidden'; //overflow
|
|
635
632
|
const designPath = this.builder.designPath;
|
|
636
633
|
const designUrl1 = this.builder.designUrl1;
|
|
637
634
|
const designUrl2 = this.builder.designUrl2;
|
|
@@ -1025,7 +1022,7 @@ class SideBar {
|
|
|
1025
1022
|
position:absolute;left:0px;top:0px;width:100%;height:100%;
|
|
1026
1023
|
}
|
|
1027
1024
|
.is-design-list>div .is-overlay:after {
|
|
1028
|
-
background: rgba(0, 0, 0, 0.
|
|
1025
|
+
background: rgba(0, 0, 0, 0.03);
|
|
1029
1026
|
position: absolute;
|
|
1030
1027
|
content: "";
|
|
1031
1028
|
display: block;
|
|
@@ -1186,8 +1183,9 @@ class SideBar {
|
|
|
1186
1183
|
<!--<a href="" data-cat="0">Default</a>-->
|
|
1187
1184
|
<div style="border-right: rgba(255,255,255,0.1) 1px solid;">
|
|
1188
1185
|
<div>${out('Simple Start:')}</div>
|
|
1189
|
-
<a href="" data-cat="
|
|
1190
|
-
<a href=""
|
|
1186
|
+
<a href="" data-cat="5">${out('Random')}</a>
|
|
1187
|
+
<a href="" data-cat="1" class="screen2">Basic</a>
|
|
1188
|
+
<a href="" class="slider-section screen2" data-cat="2">${out('Slider')}</a>
|
|
1191
1189
|
<a href="" data-cat="3" class="screen1 screen2">${out('Video')}</a>
|
|
1192
1190
|
<a href="" data-cat="4" class="screen1 screen2 custom">${out('Custom')}</a>
|
|
1193
1191
|
<a href="" class="more-basic">${out('More')}</a>
|
|
@@ -1201,6 +1199,7 @@ class SideBar {
|
|
|
1201
1199
|
</div>
|
|
1202
1200
|
</div>
|
|
1203
1201
|
<div id="morebasic" class="is-more-categories" style="width:200px">
|
|
1202
|
+
<a href="" data-cat="1" class="screen2">${out('Basic')}</a>
|
|
1204
1203
|
<a href="" data-cat="2" class="screen2">${out('Slider')}</a>
|
|
1205
1204
|
<a href="" data-cat="3" class="screen1">${out('Video')}</a>
|
|
1206
1205
|
<a href="" data-cat="4" class="screen1">${out('Custom')}</a>
|
|
@@ -1321,7 +1320,7 @@ class SideBar {
|
|
|
1321
1320
|
};
|
|
1322
1321
|
}
|
|
1323
1322
|
|
|
1324
|
-
var defaultCat =
|
|
1323
|
+
var defaultCat = ${this.builder.defaultDesignCategory}; //Show 'Header' category: 101
|
|
1325
1324
|
var disableStaticSection = false;
|
|
1326
1325
|
try {
|
|
1327
1326
|
disableStaticSection = ${this.builder.disableStaticSection};
|
|
@@ -1362,7 +1361,7 @@ class SideBar {
|
|
|
1362
1361
|
|
|
1363
1362
|
if (isdefault) {
|
|
1364
1363
|
var elm = document.querySelector('.is-design-list');
|
|
1365
|
-
var html = '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"></div>';
|
|
1364
|
+
var html = '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"><span class="is-overlay"></span></div>';
|
|
1366
1365
|
appendHtml(elm, html);
|
|
1367
1366
|
}
|
|
1368
1367
|
|
|
@@ -1382,7 +1381,7 @@ class SideBar {
|
|
|
1382
1381
|
|
|
1383
1382
|
if (isdefault) {
|
|
1384
1383
|
var elm = document.querySelector('.is-design-list');
|
|
1385
|
-
var html = '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"></div>';
|
|
1384
|
+
var html = '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"><span class="is-overlay"></span></div>';
|
|
1386
1385
|
appendHtml(elm, html);
|
|
1387
1386
|
}
|
|
1388
1387
|
|
|
@@ -1508,30 +1507,30 @@ class SideBar {
|
|
|
1508
1507
|
if(slider==='glide') {
|
|
1509
1508
|
if(cat === '2') {
|
|
1510
1509
|
if(item.type === 'glide') {
|
|
1511
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1510
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1512
1511
|
}
|
|
1513
1512
|
} else {
|
|
1514
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1513
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1515
1514
|
}
|
|
1516
1515
|
} else if(slider==='slick') {
|
|
1517
1516
|
if(cat === '2') {
|
|
1518
1517
|
if(item.type === 'slick') {
|
|
1519
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1518
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1520
1519
|
}
|
|
1521
1520
|
} else {
|
|
1522
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1521
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1523
1522
|
}
|
|
1524
1523
|
} else if(slider==='all') {
|
|
1525
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1524
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1526
1525
|
} else {
|
|
1527
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1526
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1528
1527
|
}
|
|
1529
1528
|
|
|
1530
1529
|
}
|
|
1531
1530
|
});
|
|
1532
1531
|
data_examples.designs.forEach(function(item){
|
|
1533
1532
|
if (cat == item.category) {
|
|
1534
|
-
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"></div>');
|
|
1533
|
+
appendHtml(div, '<div data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');
|
|
1535
1534
|
}
|
|
1536
1535
|
});
|
|
1537
1536
|
|
|
@@ -1886,10 +1885,7 @@ class EditSection {
|
|
|
1886
1885
|
this.builder = builder;
|
|
1887
1886
|
const builderStuff = this.builder.builderStuff;
|
|
1888
1887
|
this.builderStuff = builderStuff;
|
|
1889
|
-
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:
|
|
1890
|
-
/*
|
|
1891
|
-
'<button title="Auto" class="cmd-section-height" data-value="0">Auto</button>' + */
|
|
1892
|
-
'<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="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" style="width:11px;height:11px;"><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="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>' + '';
|
|
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="">↑</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">↓</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;">⇤</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;">⇥</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>' + '';
|
|
1893
1889
|
dom$H.appendHtml(builderStuff, html);
|
|
1894
1890
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
1895
1891
|
this.modalEditSection = modalEditSection;
|
|
@@ -1906,6 +1902,7 @@ class EditSection {
|
|
|
1906
1902
|
this.builder.settings.onChange(); //Hide box tool
|
|
1907
1903
|
|
|
1908
1904
|
document.querySelector('#divBoxTool').style.display = 'none';
|
|
1905
|
+
this.builder.activeSection = null;
|
|
1909
1906
|
});
|
|
1910
1907
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
|
1911
1908
|
btnSectionUp.addEventListener('click', () => {
|
|
@@ -1947,7 +1944,12 @@ class EditSection {
|
|
|
1947
1944
|
btn.addEventListener('click', () => {
|
|
1948
1945
|
this.builder.editor.saveForUndo();
|
|
1949
1946
|
let val = btn.getAttribute('data-value');
|
|
1950
|
-
this.sectionHeight(val);
|
|
1947
|
+
this.sectionHeight(val);
|
|
1948
|
+
let btns = modalEditSection.querySelectorAll('.cmd-section-height');
|
|
1949
|
+
btns.forEach(btn => {
|
|
1950
|
+
dom$H.removeClass(btn, 'on');
|
|
1951
|
+
});
|
|
1952
|
+
dom$H.addClass(btn, 'on'); //Trigger Change event
|
|
1951
1953
|
|
|
1952
1954
|
this.builder.settings.onChange();
|
|
1953
1955
|
});
|
|
@@ -1957,7 +1959,12 @@ class EditSection {
|
|
|
1957
1959
|
btn.addEventListener('click', () => {
|
|
1958
1960
|
this.builder.editor.saveForUndo();
|
|
1959
1961
|
let val = btn.getAttribute('data-value');
|
|
1960
|
-
this.boxSpacing(val);
|
|
1962
|
+
this.boxSpacing(val);
|
|
1963
|
+
let btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
|
|
1964
|
+
btns.forEach(btn => {
|
|
1965
|
+
dom$H.removeClass(btn, 'on');
|
|
1966
|
+
});
|
|
1967
|
+
if (btn.getAttribute('data-value') !== 'none') dom$H.addClass(btn, 'on'); //Trigger Change event
|
|
1961
1968
|
|
|
1962
1969
|
this.builder.settings.onChange();
|
|
1963
1970
|
});
|
|
@@ -1978,7 +1985,12 @@ class EditSection {
|
|
|
1978
1985
|
btn.addEventListener('click', () => {
|
|
1979
1986
|
this.builder.editor.saveForUndo();
|
|
1980
1987
|
let s = btn.getAttribute('data-command');
|
|
1981
|
-
this.sectionScrollPreset(s);
|
|
1988
|
+
this.sectionScrollPreset(s);
|
|
1989
|
+
let btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
|
|
1990
|
+
btns.forEach(btn => {
|
|
1991
|
+
dom$H.removeClass(btn, 'on');
|
|
1992
|
+
});
|
|
1993
|
+
if (btn.getAttribute('data-command') !== '') dom$H.addClass(btn, 'on'); //Trigger Change event
|
|
1982
1994
|
|
|
1983
1995
|
this.builder.settings.onChange();
|
|
1984
1996
|
});
|
|
@@ -2003,6 +2015,46 @@ class EditSection {
|
|
|
2003
2015
|
chkScrollIcon.checked = true;
|
|
2004
2016
|
} else {
|
|
2005
2017
|
chkScrollIcon.checked = false;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
let btns = modalEditSection.querySelectorAll('.cmd-section-height');
|
|
2021
|
+
btns.forEach(btn => {
|
|
2022
|
+
dom$H.removeClass(btn, 'on');
|
|
2023
|
+
});
|
|
2024
|
+
if (dom$H.hasClass(activeSection, 'is-section-100')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="100"]'), 'on');
|
|
2025
|
+
if (dom$H.hasClass(activeSection, 'is-section-90')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="90"]'), 'on');
|
|
2026
|
+
if (dom$H.hasClass(activeSection, 'is-section-80')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="80"]'), 'on');
|
|
2027
|
+
if (dom$H.hasClass(activeSection, 'is-section-75')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="75"]'), 'on');
|
|
2028
|
+
if (dom$H.hasClass(activeSection, 'is-section-70')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="70"]'), 'on');
|
|
2029
|
+
if (dom$H.hasClass(activeSection, 'is-section-60')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="60"]'), 'on');
|
|
2030
|
+
if (dom$H.hasClass(activeSection, 'is-section-50')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="50"]'), 'on');
|
|
2031
|
+
if (dom$H.hasClass(activeSection, 'is-section-40')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="40"]'), 'on');
|
|
2032
|
+
if (dom$H.hasClass(activeSection, 'is-section-30')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="30"]'), 'on');
|
|
2033
|
+
if (dom$H.hasClass(activeSection, 'is-section-25')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="25"]'), 'on');
|
|
2034
|
+
if (dom$H.hasClass(activeSection, 'is-section-20')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="20"]'), 'on');
|
|
2035
|
+
if (dom$H.hasClass(activeSection, 'is-section-auto')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="0"]'), 'on');
|
|
2036
|
+
btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
|
|
2037
|
+
btns.forEach(btn => {
|
|
2038
|
+
dom$H.removeClass(btn, 'on');
|
|
2039
|
+
});
|
|
2040
|
+
|
|
2041
|
+
if (dom$H.hasClass(activeSection, 'box-space')) {
|
|
2042
|
+
if (dom$H.hasClass(activeSection, 'box-space-sm')) dom$H.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$H.hasClass(activeSection, 'box-space-m')) dom$H.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$H.hasClass(activeSection, 'box-space-lg')) dom$H.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$H.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
|
|
2046
|
+
btns.forEach(btn => {
|
|
2047
|
+
dom$H.removeClass(btn, 'on');
|
|
2048
|
+
});
|
|
2049
|
+
const btnScroll = activeSection.querySelector('.is-arrow-down');
|
|
2050
|
+
|
|
2051
|
+
if (btnScroll) {
|
|
2052
|
+
let preset = btnScroll.getAttribute('data-scroll-preset');
|
|
2053
|
+
|
|
2054
|
+
if (preset) {
|
|
2055
|
+
let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-command="${preset}"]`);
|
|
2056
|
+
dom$H.addClass(btn, 'on');
|
|
2057
|
+
}
|
|
2006
2058
|
} // this.builder.scrollTo(activeSection);
|
|
2007
2059
|
|
|
2008
2060
|
}
|
|
@@ -2135,6 +2187,7 @@ class EditSection {
|
|
|
2135
2187
|
dom$H.removeClass(activeSection, 'is-section-70');
|
|
2136
2188
|
dom$H.removeClass(activeSection, 'is-section-75');
|
|
2137
2189
|
dom$H.removeClass(activeSection, 'is-section-80');
|
|
2190
|
+
dom$H.removeClass(activeSection, 'is-section-90');
|
|
2138
2191
|
dom$H.removeClass(activeSection, 'is-section-100');
|
|
2139
2192
|
|
|
2140
2193
|
if (n === '0') {
|
|
@@ -2227,7 +2280,7 @@ class EditSection {
|
|
|
2227
2280
|
svgfill = `fill:${color};`;
|
|
2228
2281
|
}
|
|
2229
2282
|
|
|
2230
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2283
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="1" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2231
2284
|
<a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
|
|
2232
2285
|
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2233
2286
|
<g>
|
|
@@ -2249,7 +2302,7 @@ class EditSection {
|
|
|
2249
2302
|
svgfill = `fill:${color};`;
|
|
2250
2303
|
}
|
|
2251
2304
|
|
|
2252
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2305
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="2" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2253
2306
|
<a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
|
|
2254
2307
|
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2255
2308
|
<g>
|
|
@@ -2271,7 +2324,7 @@ class EditSection {
|
|
|
2271
2324
|
svgfill = `fill:${color};`;
|
|
2272
2325
|
}
|
|
2273
2326
|
|
|
2274
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2327
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="3">
|
|
2275
2328
|
<a href="#" style="background:${bgcolor};border-radius:500px">
|
|
2276
2329
|
<svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2277
2330
|
<g>
|
|
@@ -2293,7 +2346,7 @@ class EditSection {
|
|
|
2293
2346
|
svgfill = `fill:${color};`;
|
|
2294
2347
|
}
|
|
2295
2348
|
|
|
2296
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2349
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="4">
|
|
2297
2350
|
<a href="#" style="background:${bgcolor};border-radius:500px">
|
|
2298
2351
|
<svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2299
2352
|
<g>
|
|
@@ -2309,7 +2362,7 @@ class EditSection {
|
|
|
2309
2362
|
let color = '#fff';
|
|
2310
2363
|
let svgfill = '';
|
|
2311
2364
|
svgfill = `fill:${color};`;
|
|
2312
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2365
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="5">
|
|
2313
2366
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2314
2367
|
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2315
2368
|
<g>
|
|
@@ -2325,7 +2378,7 @@ class EditSection {
|
|
|
2325
2378
|
let color = '#000';
|
|
2326
2379
|
let svgfill = '';
|
|
2327
2380
|
svgfill = `fill:${color};`;
|
|
2328
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2381
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="6">
|
|
2329
2382
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2330
2383
|
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2331
2384
|
<g>
|
|
@@ -2347,7 +2400,7 @@ class EditSection {
|
|
|
2347
2400
|
svgfill = `fill:${color};`;
|
|
2348
2401
|
}
|
|
2349
2402
|
|
|
2350
|
-
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2403
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="7" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2351
2404
|
<a href="#" style="${border}border-radius: 5px;background:none;">
|
|
2352
2405
|
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2353
2406
|
<g>
|
|
@@ -2369,7 +2422,7 @@ class EditSection {
|
|
|
2369
2422
|
svgfill = `fill:${color};`;
|
|
2370
2423
|
}
|
|
2371
2424
|
|
|
2372
|
-
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2425
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="8" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2373
2426
|
<a href="#" style="${border}border-radius: 5px;background:none;">
|
|
2374
2427
|
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2375
2428
|
<g>
|
|
@@ -2389,7 +2442,7 @@ class EditSection {
|
|
|
2389
2442
|
svgfill = `fill:${color};`;
|
|
2390
2443
|
}
|
|
2391
2444
|
|
|
2392
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2445
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="9">
|
|
2393
2446
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2394
2447
|
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2395
2448
|
<g>
|
|
@@ -2409,7 +2462,7 @@ class EditSection {
|
|
|
2409
2462
|
svgfill = `fill:${color};`;
|
|
2410
2463
|
}
|
|
2411
2464
|
|
|
2412
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2465
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="10">
|
|
2413
2466
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2414
2467
|
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2415
2468
|
<g>
|
|
@@ -2429,7 +2482,7 @@ class EditSection {
|
|
|
2429
2482
|
svgfill = `fill:${color};`;
|
|
2430
2483
|
}
|
|
2431
2484
|
|
|
2432
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2485
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="11">
|
|
2433
2486
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2434
2487
|
<svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2435
2488
|
<g>
|
|
@@ -2449,7 +2502,7 @@ class EditSection {
|
|
|
2449
2502
|
svgfill = `fill:${color};`;
|
|
2450
2503
|
}
|
|
2451
2504
|
|
|
2452
|
-
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2505
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="12">
|
|
2453
2506
|
<a href="#" style="background:none;border-radius:unset;">
|
|
2454
2507
|
<svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2455
2508
|
<g>
|
|
@@ -2472,7 +2525,7 @@ class EditSection {
|
|
|
2472
2525
|
svgfill = `fill:${color};`;
|
|
2473
2526
|
}
|
|
2474
2527
|
|
|
2475
|
-
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2528
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="13" style="width: 40px;margin-left: -20px;height: 35px;">
|
|
2476
2529
|
<a href="#" style="background:none;border-radius:unset;${border};">
|
|
2477
2530
|
<svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2478
2531
|
<g>
|
|
@@ -2495,7 +2548,7 @@ class EditSection {
|
|
|
2495
2548
|
svgfill = `fill:${color};`;
|
|
2496
2549
|
}
|
|
2497
2550
|
|
|
2498
|
-
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="
|
|
2551
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="14" style="width: 40px;margin-left: -20px;height: 35px;">
|
|
2499
2552
|
<a href="#" style="background:none;border-radius:unset;${border}">
|
|
2500
2553
|
<svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2501
2554
|
<g>
|
|
@@ -7729,8 +7782,8 @@ class EditBox {
|
|
|
7729
7782
|
this.builder = builder;
|
|
7730
7783
|
this.builderStuff = this.builder.builderStuff;
|
|
7731
7784
|
const builderStuff = this.builderStuff;
|
|
7732
|
-
let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</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>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="380" style="width:40px;border-left:none">380</button>' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1020" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div class="box-bgimage-preview"></div>' + '<div style="display: flex">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
7733
|
-
html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Top/Bottom Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Left/Right Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;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('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
7785
|
+
let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</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>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="380" style="width:40px;border-left:none">380</button>' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1020" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
7786
|
+
html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;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('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
7734
7787
|
dom$G.appendHtml(builderStuff, html); // Box Tool
|
|
7735
7788
|
|
|
7736
7789
|
this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
|
|
@@ -7946,6 +7999,8 @@ class EditBox {
|
|
|
7946
7999
|
btnBoxContentPos.forEach(btn => {
|
|
7947
8000
|
btn.addEventListener('click', () => {
|
|
7948
8001
|
let activeBox = this.builder.activeBox;
|
|
8002
|
+
let boxCentered = activeBox.querySelector('.is-box-centered');
|
|
8003
|
+
let container = activeBox.querySelector('.is-container');
|
|
7949
8004
|
this.builder.editor.saveForUndo();
|
|
7950
8005
|
dom$G.removeClass(activeBox.querySelector('.edge-y--5'), 'edge-y--5');
|
|
7951
8006
|
dom$G.removeClass(activeBox.querySelector('.edge-y--4'), 'edge-y--4');
|
|
@@ -7953,12 +8008,22 @@ class EditBox {
|
|
|
7953
8008
|
dom$G.removeClass(activeBox.querySelector('.edge-y--2'), 'edge-y--2');
|
|
7954
8009
|
dom$G.removeClass(activeBox.querySelector('.edge-y--1'), 'edge-y--1');
|
|
7955
8010
|
dom$G.removeClass(activeBox.querySelector('.edge-y-0'), 'edge-y-0');
|
|
8011
|
+
dom$G.removeClass(activeBox.querySelector('.edge-y-0-25'), 'edge-y-0-25');
|
|
8012
|
+
dom$G.removeClass(activeBox.querySelector('.edge-y-0-5'), 'edge-y-0-5');
|
|
8013
|
+
dom$G.removeClass(activeBox.querySelector('.edge-y-0-75'), 'edge-y-0-75');
|
|
7956
8014
|
dom$G.removeClass(activeBox.querySelector('.edge-y-1'), 'edge-y-1');
|
|
7957
8015
|
dom$G.removeClass(activeBox.querySelector('.edge-y-2'), 'edge-y-2');
|
|
7958
8016
|
dom$G.removeClass(activeBox.querySelector('.edge-y-3'), 'edge-y-3');
|
|
7959
8017
|
dom$G.removeClass(activeBox.querySelector('.edge-y-4'), 'edge-y-4');
|
|
7960
8018
|
dom$G.removeClass(activeBox.querySelector('.edge-y-5'), 'edge-y-5');
|
|
8019
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x--1'), 'edge-x--1');
|
|
8020
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x--0-75'), 'edge-x--0-75');
|
|
8021
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x--0-5'), 'edge-x--0-5');
|
|
8022
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x--0-25'), 'edge-x--0-25');
|
|
7961
8023
|
dom$G.removeClass(activeBox.querySelector('.edge-x-0'), 'edge-x-0');
|
|
8024
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x-0-25'), 'edge-x-0-25');
|
|
8025
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x-0-5'), 'edge-x-0-5');
|
|
8026
|
+
dom$G.removeClass(activeBox.querySelector('.edge-x-0-75'), 'edge-x-0-75');
|
|
7962
8027
|
dom$G.removeClass(activeBox.querySelector('.edge-x-1'), 'edge-x-1');
|
|
7963
8028
|
dom$G.removeClass(activeBox.querySelector('.edge-x-2'), 'edge-x-2');
|
|
7964
8029
|
dom$G.removeClass(activeBox.querySelector('.edge-x-3'), 'edge-x-3');
|
|
@@ -7979,6 +8044,9 @@ class EditBox {
|
|
|
7979
8044
|
dom$G.addClass(activeBox, 'is-content-top'); //simplified
|
|
7980
8045
|
|
|
7981
8046
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-left');
|
|
8047
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
8048
|
+
|
|
8049
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
7982
8050
|
}
|
|
7983
8051
|
|
|
7984
8052
|
if (s === 'topcenter') {
|
|
@@ -7986,6 +8054,7 @@ class EditBox {
|
|
|
7986
8054
|
dom$G.addClass(activeBox, 'is-content-top'); //simplified
|
|
7987
8055
|
|
|
7988
8056
|
dom$G.removeClass(activeBox.querySelector('.is-container'), 'is-content-left');
|
|
8057
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
7989
8058
|
}
|
|
7990
8059
|
|
|
7991
8060
|
if (s === 'topright') {
|
|
@@ -7993,14 +8062,19 @@ class EditBox {
|
|
|
7993
8062
|
dom$G.addClass(activeBox, 'is-content-top'); //simplified
|
|
7994
8063
|
|
|
7995
8064
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-right');
|
|
8065
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
8066
|
+
|
|
8067
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
7996
8068
|
}
|
|
7997
8069
|
|
|
7998
8070
|
if (s === 'middleleft') {
|
|
7999
8071
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-left');
|
|
8072
|
+
dom$G.addClass(container, 'edge-x-0-5'); //initial
|
|
8000
8073
|
}
|
|
8001
8074
|
|
|
8002
8075
|
if (s === 'middleright') {
|
|
8003
8076
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-right');
|
|
8077
|
+
dom$G.addClass(container, 'edge-x-0-5'); //initial
|
|
8004
8078
|
}
|
|
8005
8079
|
|
|
8006
8080
|
if (s === 'bottomleft') {
|
|
@@ -8008,11 +8082,16 @@ class EditBox {
|
|
|
8008
8082
|
dom$G.addClass(activeBox, 'is-content-bottom'); //simplified
|
|
8009
8083
|
|
|
8010
8084
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-left');
|
|
8085
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
8086
|
+
|
|
8087
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
8011
8088
|
}
|
|
8012
8089
|
|
|
8013
8090
|
if (s === 'bottomcenter') {
|
|
8014
8091
|
dom$G.addClass(activeBox.querySelector('.is-box-centered'), 'is-content-bottom');
|
|
8015
8092
|
dom$G.addClass(activeBox, 'is-content-bottom'); //simplified
|
|
8093
|
+
|
|
8094
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
8016
8095
|
}
|
|
8017
8096
|
|
|
8018
8097
|
if (s === 'bottomright') {
|
|
@@ -8020,8 +8099,16 @@ class EditBox {
|
|
|
8020
8099
|
dom$G.addClass(activeBox, 'is-content-bottom'); //simplified
|
|
8021
8100
|
|
|
8022
8101
|
dom$G.addClass(activeBox.querySelector('.is-container'), 'is-content-right');
|
|
8023
|
-
|
|
8102
|
+
dom$G.addClass(boxCentered, 'edge-y-1'); //initial
|
|
8024
8103
|
|
|
8104
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
8105
|
+
}
|
|
8106
|
+
|
|
8107
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
|
|
8108
|
+
btnPos.forEach(btn => {
|
|
8109
|
+
dom$G.removeClass(btn, 'on');
|
|
8110
|
+
});
|
|
8111
|
+
dom$G.addClass(btn, 'on'); //Trigger Change event
|
|
8025
8112
|
|
|
8026
8113
|
this.builder.settings.onChange();
|
|
8027
8114
|
});
|
|
@@ -8035,11 +8122,32 @@ class EditBox {
|
|
|
8035
8122
|
let s = btn.getAttribute('data-value');
|
|
8036
8123
|
|
|
8037
8124
|
if (s === '-') {
|
|
8038
|
-
if (dom$G.hasClass(container, 'edge-x
|
|
8125
|
+
if (dom$G.hasClass(container, 'edge-x--1')) {
|
|
8039
8126
|
return false;
|
|
8127
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-75')) {
|
|
8128
|
+
dom$G.removeClass(container, 'edge-x--0-75');
|
|
8129
|
+
dom$G.addClass(container, 'edge-x--1');
|
|
8130
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-5')) {
|
|
8131
|
+
dom$G.removeClass(container, 'edge-x--0-5');
|
|
8132
|
+
dom$G.addClass(container, 'edge-x--0-75');
|
|
8133
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-25')) {
|
|
8134
|
+
dom$G.removeClass(container, 'edge-x--0-25');
|
|
8135
|
+
dom$G.addClass(container, 'edge-x--0-5');
|
|
8136
|
+
} else if (dom$G.hasClass(container, 'edge-x-0')) {
|
|
8137
|
+
dom$G.removeClass(container, 'edge-x-0');
|
|
8138
|
+
dom$G.addClass(container, 'edge-x--0-25');
|
|
8139
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-25')) {
|
|
8140
|
+
dom$G.removeClass(container, 'edge-x-0-25');
|
|
8141
|
+
dom$G.addClass(container, 'edge-x-0');
|
|
8142
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-5')) {
|
|
8143
|
+
dom$G.removeClass(container, 'edge-x-0-5');
|
|
8144
|
+
dom$G.addClass(container, 'edge-x-0-25');
|
|
8145
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-75')) {
|
|
8146
|
+
dom$G.removeClass(container, 'edge-x-0-75');
|
|
8147
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
8040
8148
|
} else if (dom$G.hasClass(container, 'edge-x-1')) {
|
|
8041
8149
|
dom$G.removeClass(container, 'edge-x-1');
|
|
8042
|
-
dom$G.addClass(container, 'edge-x-0');
|
|
8150
|
+
dom$G.addClass(container, 'edge-x-0-75');
|
|
8043
8151
|
} else if (dom$G.hasClass(container, 'edge-x-2')) {
|
|
8044
8152
|
dom$G.removeClass(container, 'edge-x-2');
|
|
8045
8153
|
dom$G.addClass(container, 'edge-x-1');
|
|
@@ -8061,8 +8169,29 @@ class EditBox {
|
|
|
8061
8169
|
}
|
|
8062
8170
|
|
|
8063
8171
|
if (s === '+') {
|
|
8064
|
-
if (dom$G.hasClass(container, 'edge-x
|
|
8172
|
+
if (dom$G.hasClass(container, 'edge-x--1')) {
|
|
8173
|
+
dom$G.removeClass(container, 'edge-x--1');
|
|
8174
|
+
dom$G.addClass(container, 'edge-x--0-75');
|
|
8175
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-75')) {
|
|
8176
|
+
dom$G.removeClass(container, 'edge-x--0-75');
|
|
8177
|
+
dom$G.addClass(container, 'edge-x--0-5');
|
|
8178
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-5')) {
|
|
8179
|
+
dom$G.removeClass(container, 'edge-x--0-5');
|
|
8180
|
+
dom$G.addClass(container, 'edge-x--0-25');
|
|
8181
|
+
} else if (dom$G.hasClass(container, 'edge-x--0-25')) {
|
|
8182
|
+
dom$G.removeClass(container, 'edge-x--0-25');
|
|
8183
|
+
dom$G.addClass(container, 'edge-x-0');
|
|
8184
|
+
} else if (dom$G.hasClass(container, 'edge-x-0')) {
|
|
8065
8185
|
dom$G.removeClass(container, 'edge-x-0');
|
|
8186
|
+
dom$G.addClass(container, 'edge-x-0-25');
|
|
8187
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-25')) {
|
|
8188
|
+
dom$G.removeClass(container, 'edge-x-0-25');
|
|
8189
|
+
dom$G.addClass(container, 'edge-x-0-5');
|
|
8190
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-5')) {
|
|
8191
|
+
dom$G.removeClass(container, 'edge-x-0-5');
|
|
8192
|
+
dom$G.addClass(container, 'edge-x-0-75');
|
|
8193
|
+
} else if (dom$G.hasClass(container, 'edge-x-0-75')) {
|
|
8194
|
+
dom$G.removeClass(container, 'edge-x-0-75');
|
|
8066
8195
|
dom$G.addClass(container, 'edge-x-1');
|
|
8067
8196
|
} else if (dom$G.hasClass(container, 'edge-x-1')) {
|
|
8068
8197
|
dom$G.removeClass(container, 'edge-x-1');
|
|
@@ -8087,7 +8216,14 @@ class EditBox {
|
|
|
8087
8216
|
}
|
|
8088
8217
|
|
|
8089
8218
|
if (s === '') {
|
|
8219
|
+
dom$G.removeClass(container, 'edge-x--1');
|
|
8220
|
+
dom$G.removeClass(container, 'edge-x--0-75');
|
|
8221
|
+
dom$G.removeClass(container, 'edge-x--0-5');
|
|
8222
|
+
dom$G.removeClass(container, 'edge-x--0-25');
|
|
8090
8223
|
dom$G.removeClass(container, 'edge-x-0');
|
|
8224
|
+
dom$G.removeClass(container, 'edge-x-0-25');
|
|
8225
|
+
dom$G.removeClass(container, 'edge-x-0-5');
|
|
8226
|
+
dom$G.removeClass(container, 'edge-x-0-75');
|
|
8091
8227
|
dom$G.removeClass(container, 'edge-x-1');
|
|
8092
8228
|
dom$G.removeClass(container, 'edge-x-2');
|
|
8093
8229
|
dom$G.removeClass(container, 'edge-x-3');
|
|
@@ -8126,9 +8262,18 @@ class EditBox {
|
|
|
8126
8262
|
} else if (dom$G.hasClass(boxCentered, 'edge-y-0')) {
|
|
8127
8263
|
dom$G.removeClass(boxCentered, 'edge-y-0');
|
|
8128
8264
|
dom$G.addClass(boxCentered, 'edge-y--1');
|
|
8265
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-25')) {
|
|
8266
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-25');
|
|
8267
|
+
dom$G.addClass(boxCentered, 'edge-y-0');
|
|
8268
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-5')) {
|
|
8269
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-5');
|
|
8270
|
+
dom$G.addClass(boxCentered, 'edge-y-0-25');
|
|
8271
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-75')) {
|
|
8272
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-75');
|
|
8273
|
+
dom$G.addClass(boxCentered, 'edge-y-0-5');
|
|
8129
8274
|
} else if (dom$G.hasClass(boxCentered, 'edge-y-1')) {
|
|
8130
8275
|
dom$G.removeClass(boxCentered, 'edge-y-1');
|
|
8131
|
-
dom$G.addClass(boxCentered, 'edge-y-0');
|
|
8276
|
+
dom$G.addClass(boxCentered, 'edge-y-0-75');
|
|
8132
8277
|
} else if (dom$G.hasClass(boxCentered, 'edge-y-2')) {
|
|
8133
8278
|
dom$G.removeClass(boxCentered, 'edge-y-2');
|
|
8134
8279
|
dom$G.addClass(boxCentered, 'edge-y-1');
|
|
@@ -8173,6 +8318,15 @@ class EditBox {
|
|
|
8173
8318
|
dom$G.addClass(boxCentered, 'edge-y-0');
|
|
8174
8319
|
} else if (dom$G.hasClass(boxCentered, 'edge-y-0')) {
|
|
8175
8320
|
dom$G.removeClass(boxCentered, 'edge-y-0');
|
|
8321
|
+
dom$G.addClass(boxCentered, 'edge-y-0-25');
|
|
8322
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-25')) {
|
|
8323
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-25');
|
|
8324
|
+
dom$G.addClass(boxCentered, 'edge-y-0-5');
|
|
8325
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-5')) {
|
|
8326
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-5');
|
|
8327
|
+
dom$G.addClass(boxCentered, 'edge-y-0-75');
|
|
8328
|
+
} else if (dom$G.hasClass(boxCentered, 'edge-y-0-75')) {
|
|
8329
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-75');
|
|
8176
8330
|
dom$G.addClass(boxCentered, 'edge-y-1');
|
|
8177
8331
|
} else if (dom$G.hasClass(boxCentered, 'edge-y-1')) {
|
|
8178
8332
|
dom$G.removeClass(boxCentered, 'edge-y-1');
|
|
@@ -8209,6 +8363,9 @@ class EditBox {
|
|
|
8209
8363
|
dom$G.removeClass(boxCentered, 'edge-y--2');
|
|
8210
8364
|
dom$G.removeClass(boxCentered, 'edge-y--1');
|
|
8211
8365
|
dom$G.removeClass(boxCentered, 'edge-y-0');
|
|
8366
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-25');
|
|
8367
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-5');
|
|
8368
|
+
dom$G.removeClass(boxCentered, 'edge-y-0-75');
|
|
8212
8369
|
dom$G.removeClass(boxCentered, 'edge-y-1');
|
|
8213
8370
|
dom$G.removeClass(boxCentered, 'edge-y-2');
|
|
8214
8371
|
dom$G.removeClass(boxCentered, 'edge-y-3');
|
|
@@ -8268,6 +8425,20 @@ class EditBox {
|
|
|
8268
8425
|
this.builder.settings.onChange();
|
|
8269
8426
|
});
|
|
8270
8427
|
});
|
|
8428
|
+
const chkParallaxContent = modalEditBox.querySelector('#chkParallaxContent');
|
|
8429
|
+
chkParallaxContent.addEventListener('click', () => {
|
|
8430
|
+
this.builder.editor.saveForUndo();
|
|
8431
|
+
this.boxContainerAnim(); //Trigger Change event
|
|
8432
|
+
|
|
8433
|
+
this.builder.settings.onChange();
|
|
8434
|
+
});
|
|
8435
|
+
const chkFadeContent = modalEditBox.querySelector('#chkFadeContent');
|
|
8436
|
+
chkFadeContent.addEventListener('click', () => {
|
|
8437
|
+
this.builder.editor.saveForUndo();
|
|
8438
|
+
this.boxContainerAnim(); //Trigger Change event
|
|
8439
|
+
|
|
8440
|
+
this.builder.settings.onChange();
|
|
8441
|
+
});
|
|
8271
8442
|
const btnBoxPickPhoto = modalEditBox.querySelector('.cmd-box-pickphoto');
|
|
8272
8443
|
btnBoxPickPhoto.addEventListener('click', () => {
|
|
8273
8444
|
const modal = modalEditBox.querySelector('.is-modal.pickphoto');
|
|
@@ -8458,6 +8629,51 @@ class EditBox {
|
|
|
8458
8629
|
const overlayBg = activeBox.querySelector('.is-overlay-bg');
|
|
8459
8630
|
this.builder.editor.openImageAdjust(overlayBg);
|
|
8460
8631
|
});
|
|
8632
|
+
const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
8633
|
+
chkBoxBgImageGrayscale.addEventListener('click', () => {
|
|
8634
|
+
const activeBox = this.builder.activeBox;
|
|
8635
|
+
const overlayBg = activeBox.querySelector('.is-overlay-bg');
|
|
8636
|
+
|
|
8637
|
+
if (chkBoxBgImageGrayscale.checked) {
|
|
8638
|
+
overlayBg.style.filter = 'grayscale(1)';
|
|
8639
|
+
} else {
|
|
8640
|
+
if (overlayBg.style.filter) {
|
|
8641
|
+
overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
|
|
8642
|
+
}
|
|
8643
|
+
}
|
|
8644
|
+
});
|
|
8645
|
+
const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
|
|
8646
|
+
chkBoxAddText.addEventListener('click', () => {
|
|
8647
|
+
const activeBox = this.builder.activeBox;
|
|
8648
|
+
const overlay = activeBox.querySelector('.is-overlay');
|
|
8649
|
+
let html = `
|
|
8650
|
+
<div class="is-boxes">
|
|
8651
|
+
<div class="is-box-centered">
|
|
8652
|
+
<div class="is-container container" style="max-width: 440px;">
|
|
8653
|
+
|
|
8654
|
+
</div>
|
|
8655
|
+
</div>
|
|
8656
|
+
</div>
|
|
8657
|
+
`;
|
|
8658
|
+
dom$G.appendHtml(overlay, html, 'afterend');
|
|
8659
|
+
let container = activeBox.querySelector('.is-container');
|
|
8660
|
+
this.builder.editor.applyBehaviorOn(container); //Trigger Change event
|
|
8661
|
+
|
|
8662
|
+
this.builder.onChange();
|
|
8663
|
+
this.edit();
|
|
8664
|
+
});
|
|
8665
|
+
const chkBoxRemoveText = modalEditBox.querySelector('.cmd-box-removetext');
|
|
8666
|
+
chkBoxRemoveText.addEventListener('click', () => {
|
|
8667
|
+
this.builder.editor.util.confirm(out('Are you sure you want to remove all text/content in this box?'), ok => {
|
|
8668
|
+
if (ok) {
|
|
8669
|
+
const activeBox = this.builder.activeBox;
|
|
8670
|
+
const overlay = activeBox.querySelector('.is-overlay');
|
|
8671
|
+
const boxes = overlay.nextElementSibling;
|
|
8672
|
+
boxes.parentNode.removeChild(boxes);
|
|
8673
|
+
this.edit();
|
|
8674
|
+
}
|
|
8675
|
+
});
|
|
8676
|
+
});
|
|
8461
8677
|
const btnBoxBgImageRemove = modalEditBox.querySelector('.input-box-bgremove');
|
|
8462
8678
|
if (btnBoxBgImageRemove) btnBoxBgImageRemove.addEventListener('click', () => {
|
|
8463
8679
|
this.boxImage('');
|
|
@@ -8754,8 +8970,45 @@ class EditBox {
|
|
|
8754
8970
|
modalEditBox.querySelector('#tabBoxContentContainer').style.display = 'none';
|
|
8755
8971
|
modalEditBox.querySelector('#divContentSize').style.display = 'none';
|
|
8756
8972
|
}
|
|
8757
|
-
} //
|
|
8973
|
+
} // Content Position
|
|
8974
|
+
|
|
8975
|
+
|
|
8976
|
+
let vPos = 'middle';
|
|
8977
|
+
|
|
8978
|
+
if (dom$G.hasClass(activeBox, 'is-content-top') || activeBox.querySelector('.is-content-top')) {
|
|
8979
|
+
vPos = 'top';
|
|
8980
|
+
}
|
|
8981
|
+
|
|
8982
|
+
if (dom$G.hasClass(activeBox, 'is-content-bottom') || activeBox.querySelector('.is-content-bottom')) {
|
|
8983
|
+
vPos = 'bottom';
|
|
8984
|
+
}
|
|
8758
8985
|
|
|
8986
|
+
const container = activeBox.querySelector('.is-builder');
|
|
8987
|
+
let hPos = 'center';
|
|
8988
|
+
|
|
8989
|
+
if (container) {
|
|
8990
|
+
if (dom$G.hasClass(container, 'is-content-left')) {
|
|
8991
|
+
hPos = 'left';
|
|
8992
|
+
}
|
|
8993
|
+
|
|
8994
|
+
if (dom$G.hasClass(container, 'is-content-right')) {
|
|
8995
|
+
hPos = 'right';
|
|
8996
|
+
}
|
|
8997
|
+
}
|
|
8998
|
+
|
|
8999
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
|
|
9000
|
+
btnPos.forEach(btn => {
|
|
9001
|
+
dom$G.removeClass(btn, 'on');
|
|
9002
|
+
});
|
|
9003
|
+
if (vPos === 'top' && hPos === 'left') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="topleft"]'), 'on');
|
|
9004
|
+
if (vPos === 'top' && hPos === 'center') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="topcenter"]'), 'on');
|
|
9005
|
+
if (vPos === 'top' && hPos === 'right') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="topright"]'), 'on');
|
|
9006
|
+
if (vPos === 'middle' && hPos === 'left') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="middleleft"]'), 'on');
|
|
9007
|
+
if (vPos === 'middle' && hPos === 'center') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="middlecenter"]'), 'on');
|
|
9008
|
+
if (vPos === 'middle' && hPos === 'right') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="middleright"]'), 'on');
|
|
9009
|
+
if (vPos === 'bottom' && hPos === 'left') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="bottomleft"]'), 'on');
|
|
9010
|
+
if (vPos === 'bottom' && hPos === 'center') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="bottomcenter"]'), 'on');
|
|
9011
|
+
if (vPos === 'bottom' && hPos === 'right') dom$G.addClass(modalEditBox.querySelector('.cmd-box-content-pos[data-value="bottomright"]'), 'on'); // Ex. Slider on overlayContent
|
|
8759
9012
|
|
|
8760
9013
|
modalEditBox.querySelector('#divContainerTransparency').style.display = '';
|
|
8761
9014
|
modalEditBox.querySelector('#divContainerTextAlign').style.display = '';
|
|
@@ -8800,10 +9053,26 @@ class EditBox {
|
|
|
8800
9053
|
modalEditBox.querySelector('#divBoxSize').style.display = 'block';
|
|
8801
9054
|
}
|
|
8802
9055
|
|
|
9056
|
+
modalEditBox.querySelector('#chkParallaxContent').checked = false;
|
|
9057
|
+
modalEditBox.querySelector('#chkFadeContent').checked = false;
|
|
9058
|
+
|
|
9059
|
+
if (container) {
|
|
9060
|
+
let boxDataSkrollStart = container.getAttribute('data-bottom-top');
|
|
9061
|
+
|
|
9062
|
+
if (boxDataSkrollStart) {
|
|
9063
|
+
if (boxDataSkrollStart.indexOf('translateY') !== -1) {
|
|
9064
|
+
modalEditBox.querySelector('#chkParallaxContent').checked = true;
|
|
9065
|
+
}
|
|
9066
|
+
|
|
9067
|
+
if (boxDataSkrollStart.indexOf('opacity') !== -1) {
|
|
9068
|
+
modalEditBox.querySelector('#chkFadeContent').checked = true;
|
|
9069
|
+
}
|
|
9070
|
+
}
|
|
9071
|
+
}
|
|
9072
|
+
|
|
8803
9073
|
dom$G.addClass(activeBox, 'box-active');
|
|
8804
9074
|
this.builder.showModal(modalEditBox);
|
|
8805
9075
|
const inpBoxSize = modalEditBox.querySelector('.inp-box-size');
|
|
8806
|
-
const container = activeBox.querySelector('.is-container');
|
|
8807
9076
|
|
|
8808
9077
|
if (container) {
|
|
8809
9078
|
let maxWidth = parseInt(container.style.maxWidth);
|
|
@@ -8880,14 +9149,28 @@ class EditBox {
|
|
|
8880
9149
|
}
|
|
8881
9150
|
const divPreview = modalEditBox.querySelector('.box-bgimage-preview');
|
|
8882
9151
|
const btnImageAdjust = modalEditBox.querySelector('.input-box-bgimageadjust');
|
|
9152
|
+
const btnImageGrayscale = modalEditBox.querySelector('.label-box-bgimage-grayscale');
|
|
9153
|
+
const chkImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
8883
9154
|
btnImageAdjust.style.display = 'none';
|
|
9155
|
+
btnImageGrayscale.style.display = 'none';
|
|
8884
9156
|
const btnImageRemove = modalEditBox.querySelector('.input-box-bgremove');
|
|
8885
9157
|
btnImageRemove.style.display = 'none';
|
|
9158
|
+
chkImageGrayscale.checked = false;
|
|
8886
9159
|
|
|
8887
9160
|
if (url !== '') {
|
|
8888
9161
|
divPreview.innerHTML = `<img src="${url}">`;
|
|
9162
|
+
|
|
9163
|
+
if (overlayBg) {
|
|
9164
|
+
if (overlayBg.style.filter) {
|
|
9165
|
+
if (overlayBg.style.filter.indexOf('grayscale') !== -1) {
|
|
9166
|
+
chkImageGrayscale.checked = true;
|
|
9167
|
+
}
|
|
9168
|
+
}
|
|
9169
|
+
}
|
|
9170
|
+
|
|
8889
9171
|
btnImageAdjust.style.display = 'flex';
|
|
8890
9172
|
btnImageRemove.style.display = 'flex';
|
|
9173
|
+
btnImageGrayscale.style.display = 'flex';
|
|
8891
9174
|
} else {
|
|
8892
9175
|
divPreview.innerHTML = '';
|
|
8893
9176
|
} // Overlay color
|
|
@@ -8949,6 +9232,17 @@ class EditBox {
|
|
|
8949
9232
|
btnBoxBgColor.style.backgroundColor = bgcolor; //preview
|
|
8950
9233
|
}
|
|
8951
9234
|
}
|
|
9235
|
+
|
|
9236
|
+
const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
|
|
9237
|
+
const chkBoxRemoveText = modalEditBox.querySelector('.cmd-box-removetext');
|
|
9238
|
+
|
|
9239
|
+
if (container) {
|
|
9240
|
+
chkBoxAddText.style.display = 'none';
|
|
9241
|
+
chkBoxRemoveText.style.display = 'flex';
|
|
9242
|
+
} else {
|
|
9243
|
+
chkBoxAddText.style.display = 'flex';
|
|
9244
|
+
chkBoxRemoveText.style.display = 'none';
|
|
9245
|
+
}
|
|
8952
9246
|
} //edit
|
|
8953
9247
|
|
|
8954
9248
|
|
|
@@ -9158,6 +9452,9 @@ class EditBox {
|
|
|
9158
9452
|
let elms = activeBox.querySelectorAll('.is-builder > div > div > *');
|
|
9159
9453
|
elms.forEach(elm => {
|
|
9160
9454
|
elm.style.textAlign = '';
|
|
9455
|
+
this.builder.editor.dom.doFunction(elm, theEl => {
|
|
9456
|
+
theEl.style.textAlign = '';
|
|
9457
|
+
}, true);
|
|
9161
9458
|
});
|
|
9162
9459
|
|
|
9163
9460
|
if (s == 'right') {
|
|
@@ -9383,6 +9680,46 @@ class EditBox {
|
|
|
9383
9680
|
}
|
|
9384
9681
|
}
|
|
9385
9682
|
|
|
9683
|
+
boxContainerAnim() {
|
|
9684
|
+
let activeBox = this.builder.activeBox;
|
|
9685
|
+
let activeSection = this.builder.activeSection;
|
|
9686
|
+
let container = activeBox.querySelector('.is-builder');
|
|
9687
|
+
let amount = '40%';
|
|
9688
|
+
let minHeight = parseInt(window.getComputedStyle(activeSection, null).getPropertyValue('min-height'));
|
|
9689
|
+
|
|
9690
|
+
if (parseInt(minHeight) <= 50) {
|
|
9691
|
+
amount = '10%';
|
|
9692
|
+
}
|
|
9693
|
+
|
|
9694
|
+
let isParallax = this.modalEditBox.querySelector('#chkParallaxContent').checked;
|
|
9695
|
+
let isFade = this.modalEditBox.querySelector('#chkFadeContent').checked;
|
|
9696
|
+
container.removeAttribute('data-100-bottom');
|
|
9697
|
+
container.removeAttribute('data-center');
|
|
9698
|
+
|
|
9699
|
+
if (isParallax && !isFade) {
|
|
9700
|
+
container.setAttribute('data-bottom-top', `transform:translateY(-${amount})`);
|
|
9701
|
+
container.removeAttribute('data-100-bottom');
|
|
9702
|
+
container.setAttribute('data-top-bottom', `transform:translateY(${amount})`);
|
|
9703
|
+
} else if (isFade && !isParallax) {
|
|
9704
|
+
container.setAttribute('data-bottom-top', 'opacity:0');
|
|
9705
|
+
container.setAttribute('data-100-bottom', 'opacity:1');
|
|
9706
|
+
container.removeAttribute('data-top-bottom');
|
|
9707
|
+
} else if (isFade && isParallax) {
|
|
9708
|
+
container.setAttribute('data-bottom-top', `transform:translateY(-${amount});opacity:0;`);
|
|
9709
|
+
container.setAttribute('data-100-bottom', 'opacity:1');
|
|
9710
|
+
container.setAttribute('data-top-bottom', `transform:translateY(${amount})`);
|
|
9711
|
+
} else {
|
|
9712
|
+
dom$G.removeClass(container, 'skrollable');
|
|
9713
|
+
dom$G.removeClass(container, 'skrollable-between');
|
|
9714
|
+
container.removeAttribute('data-bottom-top');
|
|
9715
|
+
container.removeAttribute('data-100-bottom');
|
|
9716
|
+
container.removeAttribute('data-top-bottom');
|
|
9717
|
+
container.style.transform = '';
|
|
9718
|
+
}
|
|
9719
|
+
|
|
9720
|
+
this.builder.settings.onRender();
|
|
9721
|
+
}
|
|
9722
|
+
|
|
9386
9723
|
boxOverlayOpacity(s) {
|
|
9387
9724
|
let activeBox = this.builder.activeBox;
|
|
9388
9725
|
let overlay = activeBox.querySelector('.is-overlay');
|
|
@@ -9463,6 +9800,8 @@ class EditBox {
|
|
|
9463
9800
|
const preview = modalEditBox.querySelector('.box-bgimage-preview');
|
|
9464
9801
|
const btnImageAdjust = modalEditBox.querySelector('.input-box-bgimageadjust');
|
|
9465
9802
|
btnImageAdjust.style.display = 'none';
|
|
9803
|
+
const btnImageGrayscale = modalEditBox.querySelector('.label-box-bgimage-grayscale');
|
|
9804
|
+
btnImageGrayscale.style.display = 'none';
|
|
9466
9805
|
const btnImageRemove = modalEditBox.querySelector('.input-box-bgremove');
|
|
9467
9806
|
btnImageRemove.style.display = 'none';
|
|
9468
9807
|
|
|
@@ -9484,7 +9823,15 @@ class EditBox {
|
|
|
9484
9823
|
|
|
9485
9824
|
preview.innerHTML = `<img src="${url}">`;
|
|
9486
9825
|
btnImageAdjust.style.display = 'flex';
|
|
9487
|
-
btnImageRemove.style.display = 'flex';
|
|
9826
|
+
btnImageRemove.style.display = 'flex';
|
|
9827
|
+
btnImageGrayscale.style.display = 'flex';
|
|
9828
|
+
const chkImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
9829
|
+
chkImageGrayscale.checked = false;
|
|
9830
|
+
|
|
9831
|
+
if (overlayBg.style.filter) {
|
|
9832
|
+
overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
|
|
9833
|
+
} //Show image tab
|
|
9834
|
+
|
|
9488
9835
|
|
|
9489
9836
|
modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
|
|
9490
9837
|
} else {
|
|
@@ -11919,6 +12266,7 @@ class Util {
|
|
|
11919
12266
|
on = true;
|
|
11920
12267
|
}
|
|
11921
12268
|
}
|
|
12269
|
+
/*
|
|
11922
12270
|
if(on) {
|
|
11923
12271
|
parent._cb.clearFont();
|
|
11924
12272
|
} else {
|
|
@@ -11929,6 +12277,13 @@ class Util {
|
|
|
11929
12277
|
//parent._cb.applyFont(fontfamily, fontstyle, provider);
|
|
11930
12278
|
parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
|
|
11931
12279
|
}
|
|
12280
|
+
*/
|
|
12281
|
+
var provider = elm.getAttribute('data-provider');
|
|
12282
|
+
var fontfamily = elm.getAttribute('data-font-family');
|
|
12283
|
+
var fontstyle = elm.getAttribute('data-font-style');
|
|
12284
|
+
var fontdisplay = elm.getAttribute('data-font-display');
|
|
12285
|
+
//parent._cb.applyFont(fontfamily, fontstyle, provider);
|
|
12286
|
+
parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
|
|
11932
12287
|
|
|
11933
12288
|
});
|
|
11934
12289
|
}
|
|
@@ -12120,6 +12475,7 @@ class Util {
|
|
|
12120
12475
|
on = true;
|
|
12121
12476
|
}
|
|
12122
12477
|
}
|
|
12478
|
+
/*
|
|
12123
12479
|
if(on) {
|
|
12124
12480
|
parent._cb.clearFont();
|
|
12125
12481
|
} else {
|
|
@@ -12130,6 +12486,13 @@ class Util {
|
|
|
12130
12486
|
//parent._cb.applyFont(fontfamily, fontstyle, provider);
|
|
12131
12487
|
parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
|
|
12132
12488
|
}
|
|
12489
|
+
*/
|
|
12490
|
+
var provider = elm.getAttribute('data-provider');
|
|
12491
|
+
var fontfamily = elm.getAttribute('data-font-family');
|
|
12492
|
+
var fontstyle = elm.getAttribute('data-font-style');
|
|
12493
|
+
var fontdisplay = elm.getAttribute('data-font-display');
|
|
12494
|
+
//parent._cb.applyFont(fontfamily, fontstyle, provider);
|
|
12495
|
+
parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
|
|
12133
12496
|
|
|
12134
12497
|
});
|
|
12135
12498
|
}
|
|
@@ -12239,6 +12602,16 @@ class Dom {
|
|
|
12239
12602
|
return children;
|
|
12240
12603
|
}
|
|
12241
12604
|
|
|
12605
|
+
getElementOffset(el) {
|
|
12606
|
+
const rect = el.getBoundingClientRect();
|
|
12607
|
+
return {
|
|
12608
|
+
top: rect.top + window.pageYOffset,
|
|
12609
|
+
left: rect.left + window.pageXOffset,
|
|
12610
|
+
width: rect.width,
|
|
12611
|
+
height: rect.height
|
|
12612
|
+
};
|
|
12613
|
+
}
|
|
12614
|
+
|
|
12242
12615
|
parentsHasClass(element, classname) {
|
|
12243
12616
|
while (element) {
|
|
12244
12617
|
// if(classname==='is-side') console.log(element.nodeName); // NOTE: click on svg can still returns undefined in IE11
|
|
@@ -12448,40 +12821,45 @@ class Dom {
|
|
|
12448
12821
|
}
|
|
12449
12822
|
|
|
12450
12823
|
textSelection() {
|
|
12824
|
+
/*
|
|
12451
12825
|
try {
|
|
12452
|
-
|
|
12453
|
-
|
|
12454
|
-
|
|
12455
|
-
|
|
12456
|
-
|
|
12457
|
-
|
|
12458
|
-
|
|
12459
|
-
|
|
12460
|
-
|
|
12826
|
+
var elm;
|
|
12827
|
+
var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
|
|
12828
|
+
if (curr.nodeType === 3) { // text node
|
|
12829
|
+
elm = curr.parentNode;
|
|
12830
|
+
if(this.parentsHasClass(elm, 'is-builder')) {
|
|
12831
|
+
return elm;
|
|
12832
|
+
}
|
|
12833
|
+
else {
|
|
12834
|
+
return false;
|
|
12835
|
+
}
|
|
12461
12836
|
} else {
|
|
12462
|
-
|
|
12463
|
-
|
|
12464
|
-
|
|
12465
|
-
|
|
12466
|
-
|
|
12467
|
-
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
|
|
12477
|
-
|
|
12837
|
+
elm = curr;
|
|
12838
|
+
var nodeName = elm.nodeName.toLowerCase();
|
|
12839
|
+
if(nodeName === 'i' && elm.innerHTML === '') { //icon
|
|
12840
|
+
if(this.parentsHasClass(elm, 'is-builder')) {
|
|
12841
|
+
return elm;
|
|
12842
|
+
}
|
|
12843
|
+
}
|
|
12844
|
+
|
|
12845
|
+
// Check if a block (because when placing cursor using arrow keys on empty block, nodeType=1 not 3)
|
|
12846
|
+
if(nodeName === 'p' || nodeName === 'h1' || nodeName === 'h2'
|
|
12847
|
+
|| nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5'
|
|
12848
|
+
|| nodeName === 'h6' || nodeName === 'li' || nodeName === 'pre'
|
|
12849
|
+
|| nodeName === 'blockquote') {
|
|
12850
|
+
return elm;
|
|
12851
|
+
}
|
|
12852
|
+
return false;
|
|
12478
12853
|
}
|
|
12479
|
-
|
|
12480
|
-
return false;
|
|
12481
|
-
}
|
|
12482
12854
|
} catch (e) {
|
|
12483
|
-
|
|
12855
|
+
return false;
|
|
12484
12856
|
}
|
|
12857
|
+
*/
|
|
12858
|
+
const selection = this.getSelection();
|
|
12859
|
+
const anchorNode = selection.anchorNode;
|
|
12860
|
+
if (!anchorNode) return false;
|
|
12861
|
+
const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
|
|
12862
|
+
return container;
|
|
12485
12863
|
}
|
|
12486
12864
|
|
|
12487
12865
|
getStyle(element, property) {
|
|
@@ -12533,7 +12911,347 @@ class Dom {
|
|
|
12533
12911
|
}
|
|
12534
12912
|
}
|
|
12535
12913
|
} // ---
|
|
12914
|
+
// execCommand replacement
|
|
12915
|
+
|
|
12916
|
+
|
|
12917
|
+
execCommand(action, value, callback) {
|
|
12918
|
+
const selection = this.getSelection();
|
|
12919
|
+
if (!selection) return;
|
|
12920
|
+
const anchorNode = selection.anchorNode;
|
|
12921
|
+
|
|
12922
|
+
if (anchorNode) {
|
|
12923
|
+
const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
|
|
12924
|
+
const sameSelection = container && container.innerText === selection.toString();
|
|
12925
|
+
let newElement;
|
|
12926
|
+
|
|
12927
|
+
if (sameSelection || selection.toString().trim() === '') {
|
|
12928
|
+
newElement = this.updateSelection(action, value, container);
|
|
12929
|
+
} else {
|
|
12930
|
+
newElement = this.replaceSelection(action, value, selection, container);
|
|
12931
|
+
}
|
|
12932
|
+
|
|
12933
|
+
if (callback) callback(true, newElement);
|
|
12934
|
+
} else {
|
|
12935
|
+
if (callback) callback(false);
|
|
12936
|
+
}
|
|
12937
|
+
}
|
|
12938
|
+
|
|
12939
|
+
updateSelection(action, value, container) {
|
|
12940
|
+
// container.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
|
|
12941
|
+
container.style[action] = this.getStyleValue(container, action, value); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
|
|
12942
|
+
|
|
12943
|
+
this.checkStyleIfSameAsParent(container, action);
|
|
12944
|
+
this.cleanChildren(action, container); // this.cleanUnusedSpan(container);
|
|
12945
|
+
|
|
12946
|
+
return container;
|
|
12947
|
+
}
|
|
12948
|
+
|
|
12949
|
+
replaceSelection(action, value, selection, container) {
|
|
12950
|
+
const range = selection.getRangeAt(0);
|
|
12951
|
+
const fragment = range.extractContents();
|
|
12952
|
+
const span = this.createSpan(container, action, value);
|
|
12953
|
+
span.appendChild(fragment);
|
|
12954
|
+
this.cleanChildren(action, span); // this.cleanUnusedSpan(span);
|
|
12955
|
+
|
|
12956
|
+
range.insertNode(span);
|
|
12957
|
+
selection.selectAllChildren(span); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
|
|
12958
|
+
|
|
12959
|
+
this.checkStyleIfSameAsParent(span, action);
|
|
12960
|
+
return span;
|
|
12961
|
+
}
|
|
12962
|
+
|
|
12963
|
+
checkStyleIfSameAsParent(element, action) {
|
|
12964
|
+
if (element.parentNode) {
|
|
12965
|
+
if (element.parentNode.style[action] === element.style[action] || window.getComputedStyle(element.parentNode, null).getPropertyValue(action) === element.style[action]) {
|
|
12966
|
+
element.style[action] = '';
|
|
12967
|
+
|
|
12968
|
+
if (element.getAttribute('style') === '' || element.style === null) {
|
|
12969
|
+
element.removeAttribute('style');
|
|
12970
|
+
} // let unused = ( element.attributes.length === 0 || (element.attributes.length === 1 && element.hasAttribute('data-keep')));
|
|
12971
|
+
// if (element.nodeName.toLowerCase() === 'span' && unused) {
|
|
12972
|
+
// const text = document.createTextNode(element.textContent);
|
|
12973
|
+
// element.parentElement.replaceChild(text, element);
|
|
12974
|
+
// }
|
|
12975
|
+
|
|
12976
|
+
}
|
|
12977
|
+
}
|
|
12978
|
+
}
|
|
12979
|
+
|
|
12980
|
+
createSpan(container, action, value) {
|
|
12981
|
+
const span = document.createElement('span'); // span.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
|
|
12982
|
+
|
|
12983
|
+
span.style[action] = this.getStyleValue(container, action, value);
|
|
12984
|
+
return span;
|
|
12985
|
+
}
|
|
12986
|
+
|
|
12987
|
+
findParentStyle(node, action) {
|
|
12988
|
+
if (node.nodeName.toUpperCase() === 'HTML' || node.nodeName.toUpperCase() === 'BODY') {
|
|
12989
|
+
return null;
|
|
12990
|
+
}
|
|
12991
|
+
|
|
12992
|
+
if (!node.parentNode) {
|
|
12993
|
+
return null;
|
|
12994
|
+
}
|
|
12995
|
+
|
|
12996
|
+
const hasStyle = node.style[action] !== null && node.style[action] !== undefined && node.style[action] !== '';
|
|
12997
|
+
|
|
12998
|
+
if (hasStyle) {
|
|
12999
|
+
return node;
|
|
13000
|
+
}
|
|
13001
|
+
|
|
13002
|
+
this.findParentStyle(node.parentNode, action);
|
|
13003
|
+
}
|
|
13004
|
+
|
|
13005
|
+
getStyleValue(container, action, value) {
|
|
13006
|
+
if (action === 'font-weight' || action === 'font-style' || action === 'text-decoration' || action === 'text-transform') {
|
|
13007
|
+
// Toggle
|
|
13008
|
+
// let currentValue = window.getComputedStyle(container, null).getPropertyValue(action);
|
|
13009
|
+
let parent = this.findParentStyle(container, action);
|
|
13010
|
+
let currentValue;
|
|
13011
|
+
|
|
13012
|
+
if (parent) {
|
|
13013
|
+
currentValue = parent.style[action];
|
|
13014
|
+
}
|
|
13015
|
+
|
|
13016
|
+
if (value === currentValue) {
|
|
13017
|
+
//toggle here
|
|
13018
|
+
// value = 'initial'; // the problem with initial is that it is always refer to font-weight: 400 (won;t work for custom 300 for normal paragraph)
|
|
13019
|
+
// so we'll do the test first, to find the actuat initial value
|
|
13020
|
+
container.style[action] = ''; // test
|
|
13021
|
+
|
|
13022
|
+
let initialValue = window.getComputedStyle(container, null).getPropertyValue(action); // get the actual initial value
|
|
13023
|
+
// console.log('initial:' +initialValue);
|
|
13024
|
+
|
|
13025
|
+
container.style[action] = currentValue; //return back from test
|
|
13026
|
+
|
|
13027
|
+
value = initialValue;
|
|
13028
|
+
}
|
|
13029
|
+
}
|
|
13030
|
+
|
|
13031
|
+
return value;
|
|
13032
|
+
}
|
|
13033
|
+
|
|
13034
|
+
getSelection() {
|
|
13035
|
+
if (window && window.getSelection) {
|
|
13036
|
+
return window.getSelection();
|
|
13037
|
+
} else if (document && document.getSelection) {
|
|
13038
|
+
return document.getSelection();
|
|
13039
|
+
} else if (document && document.selection) {
|
|
13040
|
+
return document.selection.createRange().text;
|
|
13041
|
+
}
|
|
13042
|
+
|
|
13043
|
+
return null;
|
|
13044
|
+
}
|
|
13045
|
+
|
|
13046
|
+
cleanChildren(action, span) {
|
|
13047
|
+
if (!span.hasChildNodes()) {
|
|
13048
|
+
return;
|
|
13049
|
+
} // Direct children with same style rule
|
|
13050
|
+
|
|
13051
|
+
|
|
13052
|
+
const children = Array.from(span.children).filter(element => {
|
|
13053
|
+
return element.style[action] !== undefined && element.style[action.style] !== '';
|
|
13054
|
+
});
|
|
13055
|
+
|
|
13056
|
+
if (children && children.length > 0) {
|
|
13057
|
+
children.forEach(element => {
|
|
13058
|
+
element.style[action] = '';
|
|
13059
|
+
|
|
13060
|
+
if (element.getAttribute('style') === '' || element.style === null) {
|
|
13061
|
+
element.removeAttribute('style');
|
|
13062
|
+
}
|
|
13063
|
+
});
|
|
13064
|
+
} // Deeper childrens
|
|
13065
|
+
|
|
13066
|
+
|
|
13067
|
+
const cleanChildrenChildren = Array.from(span.children).map(element => {
|
|
13068
|
+
return this.cleanChildren(action, element);
|
|
13069
|
+
});
|
|
13070
|
+
|
|
13071
|
+
if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
|
|
13072
|
+
return;
|
|
13073
|
+
}
|
|
13074
|
+
} // Clean HTML stuff
|
|
13075
|
+
|
|
13076
|
+
|
|
13077
|
+
removeEmptyStyle(area) {
|
|
13078
|
+
if (!area.hasChildNodes()) {
|
|
13079
|
+
return;
|
|
13080
|
+
}
|
|
12536
13081
|
|
|
13082
|
+
const children = Array.from(area.children).filter(element => {
|
|
13083
|
+
return element.getAttribute('style');
|
|
13084
|
+
});
|
|
13085
|
+
|
|
13086
|
+
if (children && children.length > 0) {
|
|
13087
|
+
children.forEach(element => {
|
|
13088
|
+
if (element.getAttribute('style').trim() === '' || element.style === null) {
|
|
13089
|
+
element.removeAttribute('style');
|
|
13090
|
+
}
|
|
13091
|
+
});
|
|
13092
|
+
} // Deeper childrens
|
|
13093
|
+
|
|
13094
|
+
|
|
13095
|
+
const removeEmptyStyleChildren = Array.from(area.children).map(element => {
|
|
13096
|
+
return this.removeEmptyStyle(element);
|
|
13097
|
+
});
|
|
13098
|
+
|
|
13099
|
+
if (!removeEmptyStyleChildren || removeEmptyStyleChildren.length <= 0) {
|
|
13100
|
+
return;
|
|
13101
|
+
}
|
|
13102
|
+
}
|
|
13103
|
+
|
|
13104
|
+
cleanEmptySpans(area) {
|
|
13105
|
+
let spans = area.querySelectorAll('span');
|
|
13106
|
+
const filter = Array.prototype.filter;
|
|
13107
|
+
let children = filter.call(spans, element => {
|
|
13108
|
+
return element.attributes.length === 0;
|
|
13109
|
+
}); // Remove empty spans
|
|
13110
|
+
|
|
13111
|
+
if (children && children.length > 0) {
|
|
13112
|
+
children.forEach(element => {
|
|
13113
|
+
element.outerHTML = element.innerHTML;
|
|
13114
|
+
});
|
|
13115
|
+
} // Remove spans which have empty content
|
|
13116
|
+
|
|
13117
|
+
|
|
13118
|
+
spans = area.querySelectorAll('span');
|
|
13119
|
+
filter.call(spans, element => {
|
|
13120
|
+
if (element.innerHTML === '') {
|
|
13121
|
+
element.parentNode.removeChild(element);
|
|
13122
|
+
}
|
|
13123
|
+
}); // Recheck
|
|
13124
|
+
|
|
13125
|
+
spans = area.querySelectorAll('span');
|
|
13126
|
+
children = filter.call(spans, element => {
|
|
13127
|
+
return element.attributes.length === 0;
|
|
13128
|
+
});
|
|
13129
|
+
|
|
13130
|
+
if (children && children.length > 0) {
|
|
13131
|
+
this.cleanEmptySpans(area);
|
|
13132
|
+
} else {
|
|
13133
|
+
return;
|
|
13134
|
+
}
|
|
13135
|
+
} // Font Size stuff
|
|
13136
|
+
|
|
13137
|
+
|
|
13138
|
+
cleanClassSize(span, className) {
|
|
13139
|
+
if (!span.hasChildNodes()) {
|
|
13140
|
+
return;
|
|
13141
|
+
} // Direct children with same style rule
|
|
13142
|
+
|
|
13143
|
+
|
|
13144
|
+
const children = Array.from(span.children).filter(element => {
|
|
13145
|
+
return this.hasClass(element, className);
|
|
13146
|
+
});
|
|
13147
|
+
|
|
13148
|
+
if (children && children.length > 0) {
|
|
13149
|
+
children.forEach(element => {
|
|
13150
|
+
this.removeClass(element, className);
|
|
13151
|
+
});
|
|
13152
|
+
} // Deeper childrens
|
|
13153
|
+
|
|
13154
|
+
|
|
13155
|
+
const cleanClassSizeChildren = Array.from(span.children).map(element => {
|
|
13156
|
+
return this.cleanClassSize(element, className);
|
|
13157
|
+
});
|
|
13158
|
+
|
|
13159
|
+
if (!cleanClassSizeChildren || cleanClassSizeChildren.length <= 0) {
|
|
13160
|
+
return;
|
|
13161
|
+
}
|
|
13162
|
+
} // Remove Format stuff
|
|
13163
|
+
|
|
13164
|
+
|
|
13165
|
+
removeFormat() {
|
|
13166
|
+
const selection = this.getSelection();
|
|
13167
|
+
if (!selection) return;
|
|
13168
|
+
const anchorNode = selection.anchorNode;
|
|
13169
|
+
if (!anchorNode) return;
|
|
13170
|
+
const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
|
|
13171
|
+
const sameSelection = container && container.innerText === selection.toString();
|
|
13172
|
+
|
|
13173
|
+
if (sameSelection || selection.toString().trim() === '') {
|
|
13174
|
+
this.cleanElement(container);
|
|
13175
|
+
} else {
|
|
13176
|
+
this.cleanSelection(selection);
|
|
13177
|
+
}
|
|
13178
|
+
}
|
|
13179
|
+
|
|
13180
|
+
cleanElement(elm) {
|
|
13181
|
+
elm.style.fontWeight = '';
|
|
13182
|
+
elm.style.fontStyle = '';
|
|
13183
|
+
elm.style.textDecoration = '';
|
|
13184
|
+
elm.style.textTransform = '';
|
|
13185
|
+
elm.style.fontFamily = '';
|
|
13186
|
+
elm.style.fontSize = '';
|
|
13187
|
+
elm.style.color = '';
|
|
13188
|
+
elm.style.backgroundColor = '';
|
|
13189
|
+
elm.classList.forEach(item => {
|
|
13190
|
+
if (item.indexOf('size-') !== -1) {
|
|
13191
|
+
this.removeClass(elm, item);
|
|
13192
|
+
}
|
|
13193
|
+
});
|
|
13194
|
+
let elms = elm.querySelectorAll('*');
|
|
13195
|
+
elms.forEach(elm => {
|
|
13196
|
+
elm.style.fontWeight = '';
|
|
13197
|
+
elm.style.fontStyle = '';
|
|
13198
|
+
elm.style.textDecoration = '';
|
|
13199
|
+
elm.style.textTransform = '';
|
|
13200
|
+
elm.style.fontFamily = '';
|
|
13201
|
+
elm.style.fontSize = '';
|
|
13202
|
+
elm.style.color = '';
|
|
13203
|
+
elm.style.backgroundColor = '';
|
|
13204
|
+
elm.classList.forEach(item => {
|
|
13205
|
+
if (item.indexOf('size-') !== -1) {
|
|
13206
|
+
this.removeClass(elm, item);
|
|
13207
|
+
}
|
|
13208
|
+
});
|
|
13209
|
+
});
|
|
13210
|
+
this.cleanUnusedSpan(elm); // causes lost selection
|
|
13211
|
+
}
|
|
13212
|
+
|
|
13213
|
+
cleanSelection(selection) {
|
|
13214
|
+
const range = selection.getRangeAt(0);
|
|
13215
|
+
const fragment = range.extractContents();
|
|
13216
|
+
const span = document.createElement('span');
|
|
13217
|
+
span.appendChild(fragment);
|
|
13218
|
+
range.insertNode(span);
|
|
13219
|
+
selection.selectAllChildren(span);
|
|
13220
|
+
this.cleanElement(span);
|
|
13221
|
+
}
|
|
13222
|
+
|
|
13223
|
+
cleanUnusedSpan(span) {
|
|
13224
|
+
if (!span.hasChildNodes()) {
|
|
13225
|
+
return;
|
|
13226
|
+
} // Direct children with no style
|
|
13227
|
+
|
|
13228
|
+
|
|
13229
|
+
const children = Array.from(span.children).filter(element => {
|
|
13230
|
+
if (element.getAttribute('style') === '' || element.style === null) {
|
|
13231
|
+
element.removeAttribute('style');
|
|
13232
|
+
}
|
|
13233
|
+
|
|
13234
|
+
let unused = element.attributes.length === 0 || element.attributes.length === 1 && element.hasAttribute('data-keep');
|
|
13235
|
+
return element.nodeName.toLowerCase() === 'span' && unused;
|
|
13236
|
+
});
|
|
13237
|
+
|
|
13238
|
+
if (children && children.length > 0) {
|
|
13239
|
+
children.forEach(element => {
|
|
13240
|
+
const text = document.createTextNode(element.textContent);
|
|
13241
|
+
element.parentElement.replaceChild(text, element);
|
|
13242
|
+
});
|
|
13243
|
+
return;
|
|
13244
|
+
} // Deeper childrens
|
|
13245
|
+
|
|
13246
|
+
|
|
13247
|
+
const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
|
|
13248
|
+
return this.cleanUnusedSpan(element);
|
|
13249
|
+
});
|
|
13250
|
+
|
|
13251
|
+
if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
|
|
13252
|
+
return;
|
|
13253
|
+
}
|
|
13254
|
+
}
|
|
12537
13255
|
|
|
12538
13256
|
}
|
|
12539
13257
|
|
|
@@ -18225,6 +18943,8 @@ class HtmlUtil {
|
|
|
18225
18943
|
dom$E.removeAttributes(elms, 'draggable');
|
|
18226
18944
|
elms = tmp.querySelectorAll('[data-animated]');
|
|
18227
18945
|
dom$E.removeAttributes(elms, 'data-animated');
|
|
18946
|
+
elms = tmp.querySelectorAll('[data-saveforundo]');
|
|
18947
|
+
dom$E.removeAttributes(elms, 'data-saveforundo');
|
|
18228
18948
|
elms = tmp.querySelectorAll('[hidesnippetaddtool]');
|
|
18229
18949
|
dom$E.removeAttributes(elms, 'hidesnippetaddtool');
|
|
18230
18950
|
elms = tmp.querySelectorAll('[gray]');
|
|
@@ -18270,6 +18990,8 @@ class HtmlUtil {
|
|
|
18270
18990
|
Array.prototype.forEach.call(emptystyles, emptystyle => {
|
|
18271
18991
|
emptystyle.removeAttribute('style');
|
|
18272
18992
|
});
|
|
18993
|
+
dom$E.removeEmptyStyle(tmp);
|
|
18994
|
+
dom$E.cleanEmptySpans(tmp);
|
|
18273
18995
|
elms = tmp.querySelectorAll('[data-keep]');
|
|
18274
18996
|
dom$E.removeAttributes(elms, 'data-keep'); //Cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
|
|
18275
18997
|
|
|
@@ -54463,6 +55185,10 @@ class ColumnTool {
|
|
|
54463
55185
|
<button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
54464
55186
|
</div>
|
|
54465
55187
|
|
|
55188
|
+
<div style="padding-top:20px;">
|
|
55189
|
+
<label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
55190
|
+
</div>
|
|
55191
|
+
|
|
54466
55192
|
<div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
|
|
54467
55193
|
<div style="display: none;">
|
|
54468
55194
|
<button title="${util.out('Normal')}" class="input-row-enlarge" data-command="0" style="margin-right:1px;">${util.out('Normal')}</button>
|
|
@@ -55126,6 +55852,22 @@ class ColumnTool {
|
|
|
55126
55852
|
this.builder.opts.onChange();
|
|
55127
55853
|
});
|
|
55128
55854
|
});
|
|
55855
|
+
const chkCellGrayscale = cellSettings.querySelector('.chk-cell-grayscale');
|
|
55856
|
+
dom$l.addEventListener(chkCellGrayscale, 'click', () => {
|
|
55857
|
+
this.builder.uo.saveForUndo();
|
|
55858
|
+
let cell = util.cellSelected();
|
|
55859
|
+
|
|
55860
|
+
if (chkCellGrayscale.checked) {
|
|
55861
|
+
cell.style.filter = 'grayscale(1)';
|
|
55862
|
+
} else {
|
|
55863
|
+
if (cell.style.filter) {
|
|
55864
|
+
cell.style.filter = cell.style.filter.replace('grayscale(1)', '');
|
|
55865
|
+
}
|
|
55866
|
+
} //Trigger Change event
|
|
55867
|
+
|
|
55868
|
+
|
|
55869
|
+
this.builder.opts.onChange();
|
|
55870
|
+
});
|
|
55129
55871
|
elms = cellSettings.querySelectorAll('.input-cell-height');
|
|
55130
55872
|
Array.prototype.forEach.call(elms, elm => {
|
|
55131
55873
|
dom$l.addEventListener(elm, 'click', () => {
|
|
@@ -55477,6 +56219,15 @@ class ColumnTool {
|
|
|
55477
56219
|
dom$l.addClass(btn, 'on');
|
|
55478
56220
|
}
|
|
55479
56221
|
|
|
56222
|
+
const chkCellGrayscale = this.cellSettings.querySelector('.chk-cell-grayscale');
|
|
56223
|
+
chkCellGrayscale.checked = false;
|
|
56224
|
+
|
|
56225
|
+
if (cell.style.filter) {
|
|
56226
|
+
if (cell.style.filter.indexOf('grayscale') !== -1) {
|
|
56227
|
+
chkCellGrayscale.checked = true;
|
|
56228
|
+
}
|
|
56229
|
+
}
|
|
56230
|
+
|
|
55480
56231
|
elms = this.cellSettings.querySelectorAll('.input-cell-height');
|
|
55481
56232
|
Array.prototype.forEach.call(elms, elm => {
|
|
55482
56233
|
dom$l.removeClass(elm, 'on');
|
|
@@ -62030,18 +62781,18 @@ class Rte {
|
|
|
62030
62781
|
<button title="18px" data-value="18">18</button>
|
|
62031
62782
|
<button title="21px" data-value="21">21</button>
|
|
62032
62783
|
<button title="24px" data-value="24">24</button>
|
|
62033
|
-
|
|
62784
|
+
<!--<button title="28px" data-value="28">28</button>-->
|
|
62034
62785
|
<button title="32px" data-value="32">32</button>
|
|
62035
|
-
<!--<button title="
|
|
62036
|
-
<button title="38px" data-value="38">38</button>
|
|
62037
|
-
<!--<button title="42px" data-value="42">42</button>-->
|
|
62786
|
+
<!--<button title="38px" data-value="38">38</button>-->
|
|
62038
62787
|
<button title="48px" data-value="48">48</button>
|
|
62039
|
-
<!--<button title="
|
|
62040
|
-
<button title="60px" data-value="60">60</button>
|
|
62041
|
-
<!--<button title="68px" data-value="68">68</button>-->
|
|
62788
|
+
<!--<button title="60px" data-value="60">60</button>-->
|
|
62042
62789
|
<button title="76px" data-value="76">76</button>
|
|
62043
|
-
<!--<button title="84px" data-value="84">84</button>-->
|
|
62044
62790
|
<button title="96px" data-value="96">96</button>
|
|
62791
|
+
|
|
62792
|
+
<button title="120px" data-value="120">120</button>
|
|
62793
|
+
<button title="160px" data-value="160">160</button>
|
|
62794
|
+
<button title="200px" data-value="200">200</button>
|
|
62795
|
+
|
|
62045
62796
|
<button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
|
|
62046
62797
|
<button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
|
|
62047
62798
|
<button title="${util.out('Clear')}" data-value=""><svg class="is-icon-flex" style="width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
@@ -63679,6 +64430,20 @@ class Rte {
|
|
|
63679
64430
|
|
|
63680
64431
|
if (this.builder.activeIcon) {
|
|
63681
64432
|
elm = this.builder.activeIcon;
|
|
64433
|
+
} // Find block element (line-height only works on block element)
|
|
64434
|
+
|
|
64435
|
+
|
|
64436
|
+
let element = elm;
|
|
64437
|
+
|
|
64438
|
+
while (element) {
|
|
64439
|
+
if (element.tagName === 'BODY' || element.tagName === 'HTML') return false;
|
|
64440
|
+
|
|
64441
|
+
if (window.getComputedStyle(element).getPropertyValue('display') !== 'inline') {
|
|
64442
|
+
elm = element;
|
|
64443
|
+
break;
|
|
64444
|
+
}
|
|
64445
|
+
|
|
64446
|
+
element = element.parentNode;
|
|
63682
64447
|
} // var text = dom.getSelected();
|
|
63683
64448
|
|
|
63684
64449
|
|
|
@@ -63713,22 +64478,24 @@ class Rte {
|
|
|
63713
64478
|
let lineheight;
|
|
63714
64479
|
|
|
63715
64480
|
if (num === '+') {
|
|
63716
|
-
lineheight = currentLineHeight + 0.
|
|
64481
|
+
lineheight = currentLineHeight + 0.1;
|
|
63717
64482
|
} else if (num === '-') {
|
|
63718
|
-
lineheight = currentLineHeight - 0.
|
|
64483
|
+
lineheight = currentLineHeight - 0.1;
|
|
64484
|
+
if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
|
|
63719
64485
|
} else if (num === '') {
|
|
63720
64486
|
lineheight = '';
|
|
63721
64487
|
} else {
|
|
63722
64488
|
lineheight = num;
|
|
63723
64489
|
}
|
|
63724
|
-
|
|
63725
|
-
if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
|
|
63726
|
-
|
|
63727
64490
|
/** mod by Jack */
|
|
63728
64491
|
//elm.style.lineHeight = lineheight;
|
|
63729
64492
|
|
|
64493
|
+
|
|
63730
64494
|
dom$5.doFunction(elm, function (theEl) {
|
|
63731
|
-
|
|
64495
|
+
// apply to block element only
|
|
64496
|
+
if (window.getComputedStyle(theEl).getPropertyValue('display') !== 'inline') {
|
|
64497
|
+
theEl.style.lineHeight = lineheight;
|
|
64498
|
+
}
|
|
63732
64499
|
}, true); //save selection
|
|
63733
64500
|
|
|
63734
64501
|
util.saveSelection();
|
|
@@ -66839,7 +67606,8 @@ class ContentBuilder {
|
|
|
66839
67606
|
['#ed2828','dark','contentbuilder/themes/dark-red.css'],
|
|
66840
67607
|
],
|
|
66841
67608
|
*/
|
|
66842
|
-
colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700]
|
|
67609
|
+
colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700] // maxColumns: 6,
|
|
67610
|
+
|
|
66843
67611
|
}; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
|
|
66844
67612
|
|
|
66845
67613
|
this.opts = Object.assign(this, defaults, opts);
|
|
@@ -66934,7 +67702,7 @@ class ContentBuilder {
|
|
|
66934
67702
|
// DEFAULT: Built-in simple css grid
|
|
66935
67703
|
this.opts.row = 'row clearfix';
|
|
66936
67704
|
this.opts.cols = ['column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
|
|
66937
|
-
this.opts.colequal = [['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
|
|
67705
|
+
this.opts.colequal = [['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
|
|
66938
67706
|
this.opts.colsizes = [//needed for columns in which the size increment is not constant.
|
|
66939
67707
|
[//increment for 3 columns
|
|
66940
67708
|
['column third', 'column third', 'column third'], ['column half', 'column fourth', 'column fourth']], [//increment for 2 columns
|
|
@@ -68811,7 +69579,30 @@ class ContentBuilder {
|
|
|
68811
69579
|
} // Show Lock Indicator
|
|
68812
69580
|
|
|
68813
69581
|
|
|
68814
|
-
this.colTool.showHideLockIndicator(col);
|
|
69582
|
+
this.colTool.showHideLockIndicator(col); // Check if last row, make sure the Row Add Tool visible
|
|
69583
|
+
|
|
69584
|
+
const tool = row.querySelector('.is-rowadd-tool');
|
|
69585
|
+
const tollAddButton = tool.querySelector('button');
|
|
69586
|
+
tollAddButton.style.marginTop = '';
|
|
69587
|
+
const children = Array.from(row.parentNode.children).filter(element => {
|
|
69588
|
+
return element.nodeName.toLowerCase() === 'div';
|
|
69589
|
+
});
|
|
69590
|
+
|
|
69591
|
+
if (children && children.length > 0) {
|
|
69592
|
+
let lastChild = children[children.length - 1];
|
|
69593
|
+
|
|
69594
|
+
if (row === lastChild) {
|
|
69595
|
+
const section = row.parentNode.parentNode;
|
|
69596
|
+
const sectionOffset = dom$F.getElementOffset(section);
|
|
69597
|
+
let h1 = sectionOffset.top + sectionOffset.height;
|
|
69598
|
+
const rowOffset = dom$F.getElementOffset(row);
|
|
69599
|
+
let h2 = rowOffset.top + rowOffset.height;
|
|
69600
|
+
|
|
69601
|
+
if (h1 - h2 < 19) {
|
|
69602
|
+
tollAddButton.style.marginTop = '-14px';
|
|
69603
|
+
}
|
|
69604
|
+
}
|
|
69605
|
+
}
|
|
68815
69606
|
}
|
|
68816
69607
|
|
|
68817
69608
|
handleCellKeypress(e) {
|
|
@@ -70665,8 +71456,10 @@ class ContentBox {
|
|
|
70665
71456
|
animatedSorting: false,
|
|
70666
71457
|
dragWithoutHandle: false,
|
|
70667
71458
|
addButtonPlacement: '',
|
|
71459
|
+
defaultDesignCategory: 5,
|
|
71460
|
+
// 101 for header
|
|
70668
71461
|
snippetCategories: [[120, 'Basic'], [118, 'Article'], [101, 'Headline'], [119, 'Buttons'], [102, 'Photos'], [103, 'Profile'], [116, 'Contact'], [104, 'Products'], [105, 'Features'], [106, 'Process'], [107, 'Pricing'], [108, 'Skills'], [109, 'Achievements'], [110, 'Quotes'], [111, 'Partners'], [112, 'As Featured On'], [113, 'Page Not Found'], [114, 'Coming Soon'], [115, 'Help, FAQ']],
|
|
70669
|
-
defaultSnippetCategory:
|
|
71462
|
+
defaultSnippetCategory: 101,
|
|
70670
71463
|
outlineMode: '',
|
|
70671
71464
|
elementHighlight: true,
|
|
70672
71465
|
rowTool: 'right',
|
|
@@ -70731,50 +71524,26 @@ class ContentBox {
|
|
|
70731
71524
|
'desc': 'Display & Display'
|
|
70732
71525
|
}],
|
|
70733
71526
|
'styles': [{
|
|
70734
|
-
'css': 'basetype-
|
|
70735
|
-
'sectioncss': 'type-
|
|
70736
|
-
'classname': 'type-
|
|
70737
|
-
'img': '
|
|
71527
|
+
'css': 'basetype-opensans.css',
|
|
71528
|
+
'sectioncss': 'type-opensans.css',
|
|
71529
|
+
'classname': 'type-opensans',
|
|
71530
|
+
'img': '000.png',
|
|
70738
71531
|
'category': 9,
|
|
70739
71532
|
'default': true,
|
|
70740
|
-
'caption': '
|
|
70741
|
-
}, {
|
|
70742
|
-
'css': 'basetype-sourcesanspro-anonymouspro.css',
|
|
70743
|
-
'sectioncss': 'type-sourcesanspro-anonymouspro.css',
|
|
70744
|
-
'classname': 'type-sourcesanspro-anonymouspro',
|
|
70745
|
-
'img': 'type-sourcesanspro-anonymouspro.jpg',
|
|
70746
|
-
'category': 7,
|
|
70747
|
-
'default': true,
|
|
70748
|
-
'caption': 'Source Sans Pro & Anonymous Pro'
|
|
70749
|
-
}, {
|
|
70750
|
-
'css': 'basetype-poppins-oldstandardtt.css',
|
|
70751
|
-
'sectioncss': 'type-poppins-oldstandardtt.css',
|
|
70752
|
-
'classname': 'type-poppins-oldstandardtt',
|
|
70753
|
-
'img': 'type-poppins-oldstandardtt.jpg',
|
|
70754
|
-
'category': 3,
|
|
70755
|
-
'default': true,
|
|
70756
|
-
'caption': 'Poppins & Old Standard TT'
|
|
71533
|
+
'caption': 'Open Sans'
|
|
70757
71534
|
}, {
|
|
70758
71535
|
'css': 'basetype-spectralsc-karma.css',
|
|
70759
71536
|
'sectioncss': 'type-spectralsc-karma.css',
|
|
70760
71537
|
'classname': 'type-spectralsc-karma',
|
|
70761
|
-
'img': '
|
|
71538
|
+
'img': '004.png',
|
|
70762
71539
|
'category': 2,
|
|
70763
71540
|
'default': true,
|
|
70764
71541
|
'caption': 'Spectral SC & Karma'
|
|
70765
|
-
}, {
|
|
70766
|
-
'css': 'basetype-yesteryear-chivo.css',
|
|
70767
|
-
'sectioncss': 'type-yesteryear-chivo.css',
|
|
70768
|
-
'classname': 'type-yesteryear-chivo',
|
|
70769
|
-
'img': 'type-yesteryear-chivo.jpg',
|
|
70770
|
-
'category': 9,
|
|
70771
|
-
'default': true,
|
|
70772
|
-
'caption': 'Yesteryear & Chivo'
|
|
70773
71542
|
}, {
|
|
70774
71543
|
'css': 'basetype-alegreyasanssc-hind.css',
|
|
70775
71544
|
'sectioncss': 'type-alegreyasanssc-hind.css',
|
|
70776
71545
|
'classname': 'type-alegreyasanssc-hind',
|
|
70777
|
-
'img': '
|
|
71546
|
+
'img': '006.png',
|
|
70778
71547
|
'category': 1,
|
|
70779
71548
|
'default': true,
|
|
70780
71549
|
'caption': 'Alegreya Sans SC & Hind'
|
|
@@ -70782,31 +71551,15 @@ class ContentBox {
|
|
|
70782
71551
|
'css': 'basetype-cabinsketch-montserrat.css',
|
|
70783
71552
|
'sectioncss': 'type-cabinsketch-montserrat.css',
|
|
70784
71553
|
'classname': 'type-cabinsketch-montserrat',
|
|
70785
|
-
'img': '
|
|
71554
|
+
'img': '007.png',
|
|
70786
71555
|
'category': 8,
|
|
70787
71556
|
'default': true,
|
|
70788
71557
|
'caption': 'Cabin Sketch & Montserrat'
|
|
70789
|
-
}, {
|
|
70790
|
-
'css': 'basetype-ptserif-poppins.css',
|
|
70791
|
-
'sectioncss': 'type-ptserif-poppins.css',
|
|
70792
|
-
'classname': 'type-ptserif-poppins',
|
|
70793
|
-
'img': 'type-ptserif-poppins.jpg',
|
|
70794
|
-
'category': 4,
|
|
70795
|
-
'default': true,
|
|
70796
|
-
'caption': 'PT Serif & Poppins'
|
|
70797
|
-
}, {
|
|
70798
|
-
'css': 'basetype-kellyslab-yantramanav.css',
|
|
70799
|
-
'sectioncss': 'type-kellyslab-yantramanav.css',
|
|
70800
|
-
'classname': 'type-kellyslab-yantramanav',
|
|
70801
|
-
'img': 'type-kellyslab-yantramanav.jpg',
|
|
70802
|
-
'category': 8,
|
|
70803
|
-
'default': true,
|
|
70804
|
-
'caption': 'Kelly Slab & Yantramanav'
|
|
70805
71558
|
}, {
|
|
70806
71559
|
'css': 'basetype-anonymouspro-catamaran.css',
|
|
70807
71560
|
'sectioncss': 'type-anonymouspro-catamaran.css',
|
|
70808
71561
|
'classname': 'type-anonymouspro-catamaran',
|
|
70809
|
-
'img': '
|
|
71562
|
+
'img': '010.png',
|
|
70810
71563
|
'category': 6,
|
|
70811
71564
|
'default': true,
|
|
70812
71565
|
'caption': 'Anonymous Pro & Catamaran'
|
|
@@ -70814,7 +71567,7 @@ class ContentBox {
|
|
|
70814
71567
|
'css': 'basetype-nothingyouc-ibmplexmono.css',
|
|
70815
71568
|
'sectioncss': 'type-nothingyouc-ibmplexmono.css',
|
|
70816
71569
|
'classname': 'type-nothingyouc-ibmplexmono',
|
|
70817
|
-
'img': '
|
|
71570
|
+
'img': '011.png',
|
|
70818
71571
|
'category': 13,
|
|
70819
71572
|
'default': true,
|
|
70820
71573
|
'caption': 'Nothing You Could Do & IBM Plex Mono'
|
|
@@ -70822,7 +71575,7 @@ class ContentBox {
|
|
|
70822
71575
|
'css': 'basetype-juliussansone-taviraj.css',
|
|
70823
71576
|
'sectioncss': 'type-juliussansone-taviraj.css',
|
|
70824
71577
|
'classname': 'type-juliussansone-taviraj',
|
|
70825
|
-
'img': '
|
|
71578
|
+
'img': '012.png',
|
|
70826
71579
|
'category': 3,
|
|
70827
71580
|
'default': true,
|
|
70828
71581
|
'caption': 'Julius Sans One & Taviraj'
|
|
@@ -70830,7 +71583,7 @@ class ContentBox {
|
|
|
70830
71583
|
'css': 'basetype-voltaire-sourcecodepro.css',
|
|
70831
71584
|
'sectioncss': 'type-voltaire-sourcecodepro.css',
|
|
70832
71585
|
'classname': 'type-voltaire-sourcecodepro',
|
|
70833
|
-
'img': '
|
|
71586
|
+
'img': '013.png',
|
|
70834
71587
|
'category': 7,
|
|
70835
71588
|
'default': true,
|
|
70836
71589
|
'caption': 'Voltaire & Source Code Pro'
|
|
@@ -70838,39 +71591,23 @@ class ContentBox {
|
|
|
70838
71591
|
'css': 'basetype-oregano-zillaslab.css',
|
|
70839
71592
|
'sectioncss': 'type-oregano-zillaslab.css',
|
|
70840
71593
|
'classname': 'type-oregano-zillaslab',
|
|
70841
|
-
'img': '
|
|
71594
|
+
'img': '014.png',
|
|
70842
71595
|
'category': 10,
|
|
70843
71596
|
'default': true,
|
|
70844
71597
|
'caption': 'Oregano & Zilla Slab'
|
|
70845
|
-
}, {
|
|
70846
|
-
'css': 'basetype-yellowtail-frankruhllibre.css',
|
|
70847
|
-
'sectioncss': 'type-yellowtail-frankruhllibre.css',
|
|
70848
|
-
'classname': 'type-yellowtail-frankruhllibre',
|
|
70849
|
-
'img': 'type-yellowtail-frankruhllibre.jpg',
|
|
70850
|
-
'category': 11,
|
|
70851
|
-
'default': true,
|
|
70852
|
-
'caption': 'Yellowtail & Frank Ruhl Libre'
|
|
70853
71598
|
}, {
|
|
70854
71599
|
'css': 'basetype-anonymouspro.css',
|
|
70855
71600
|
'sectioncss': 'type-anonymouspro.css',
|
|
70856
71601
|
'classname': 'type-anonymouspro',
|
|
70857
|
-
'img': '
|
|
71602
|
+
'img': '016.png',
|
|
70858
71603
|
'category': 5,
|
|
70859
71604
|
'default': false,
|
|
70860
71605
|
'caption': 'Anonymous Pro'
|
|
70861
|
-
}, {
|
|
70862
|
-
'css': 'basetype-sedgwickave-spectral.css',
|
|
70863
|
-
'sectioncss': 'type-sedgwickave-spectral.css',
|
|
70864
|
-
'classname': 'type-sedgwickave-spectral',
|
|
70865
|
-
'img': 'type-sedgwickave-spectral.jpg',
|
|
70866
|
-
'category': 10,
|
|
70867
|
-
'default': false,
|
|
70868
|
-
'caption': 'Sedgwick Ave & Spectral'
|
|
70869
71606
|
}, {
|
|
70870
71607
|
'css': 'basetype-dancingscript-anonymouspro.css',
|
|
70871
71608
|
'sectioncss': 'type-dancingscript-anonymouspro.css',
|
|
70872
71609
|
'classname': 'type-dancingscript-anonymouspro',
|
|
70873
|
-
'img': '
|
|
71610
|
+
'img': '018.png',
|
|
70874
71611
|
'category': 13,
|
|
70875
71612
|
'default': false,
|
|
70876
71613
|
'caption': 'Dancing Script & Anonymous Pro'
|
|
@@ -70878,7 +71615,7 @@ class ContentBox {
|
|
|
70878
71615
|
'css': 'basetype-unicaone-cormorantgaramond.css',
|
|
70879
71616
|
'sectioncss': 'type-unicaone-cormorantgaramond.css',
|
|
70880
71617
|
'classname': 'type-unicaone-cormorantgaramond',
|
|
70881
|
-
'img': '
|
|
71618
|
+
'img': '019.png',
|
|
70882
71619
|
'category': 10,
|
|
70883
71620
|
'default': false,
|
|
70884
71621
|
'caption': 'Unica One & Cormorant Garamond'
|
|
@@ -70886,7 +71623,7 @@ class ContentBox {
|
|
|
70886
71623
|
'css': 'basetype-allan-overpassmono.css',
|
|
70887
71624
|
'sectioncss': 'type-allan-overpassmono.css',
|
|
70888
71625
|
'classname': 'type-allan-overpassmono',
|
|
70889
|
-
'img': '
|
|
71626
|
+
'img': '020.png',
|
|
70890
71627
|
'category': 12,
|
|
70891
71628
|
'default': false,
|
|
70892
71629
|
'caption': 'Allan & Overpass Mono'
|
|
@@ -70894,7 +71631,7 @@ class ContentBox {
|
|
|
70894
71631
|
'css': 'basetype-averialibre-barlow.css',
|
|
70895
71632
|
'sectioncss': 'type-averialibre-barlow.css',
|
|
70896
71633
|
'classname': 'type-averialibre-barlow',
|
|
70897
|
-
'img': '
|
|
71634
|
+
'img': '021.png',
|
|
70898
71635
|
'category': 8,
|
|
70899
71636
|
'default': false,
|
|
70900
71637
|
'caption': 'Averia Libre & Barlow'
|
|
@@ -70902,7 +71639,7 @@ class ContentBox {
|
|
|
70902
71639
|
'css': 'basetype-merriweathersans-martel.css',
|
|
70903
71640
|
'sectioncss': 'type-merriweathersans-martel.css',
|
|
70904
71641
|
'classname': 'type-merriweathersans-martel',
|
|
70905
|
-
'img': '
|
|
71642
|
+
'img': '022.png',
|
|
70906
71643
|
'category': 3,
|
|
70907
71644
|
'default': false,
|
|
70908
71645
|
'caption': 'Merriweather Sans & Martel'
|
|
@@ -70910,47 +71647,23 @@ class ContentBox {
|
|
|
70910
71647
|
'css': 'basetype-poppins.css',
|
|
70911
71648
|
'sectioncss': 'type-poppins.css',
|
|
70912
71649
|
'classname': 'type-poppins',
|
|
70913
|
-
'img': '
|
|
71650
|
+
'img': '023.png',
|
|
70914
71651
|
'category': 1,
|
|
70915
71652
|
'default': false,
|
|
70916
71653
|
'caption': 'Poppins'
|
|
70917
|
-
}, {
|
|
70918
|
-
'css': 'basetype-satisfy-economica.css',
|
|
70919
|
-
'sectioncss': 'type-satisfy-economica.css',
|
|
70920
|
-
'classname': 'type-satisfy-economica',
|
|
70921
|
-
'img': 'type-satisfy-economica.jpg',
|
|
70922
|
-
'category': 9,
|
|
70923
|
-
'default': false,
|
|
70924
|
-
'caption': 'Satisfy & Economica'
|
|
70925
|
-
}, {
|
|
70926
|
-
'css': 'basetype-josefinsans-lekton.css',
|
|
70927
|
-
'sectioncss': 'type-josefinsans-lekton.css',
|
|
70928
|
-
'classname': 'type-josefinsans-lekton',
|
|
70929
|
-
'img': 'type-josefinsans-lekton.jpg',
|
|
70930
|
-
'category': 1,
|
|
70931
|
-
'default': false,
|
|
70932
|
-
'caption': 'Josefin Sans & Lekton'
|
|
70933
71654
|
}, {
|
|
70934
71655
|
'css': 'basetype-specialelite-encodesans.css',
|
|
70935
71656
|
'sectioncss': 'type-specialelite-encodesans.css',
|
|
70936
71657
|
'classname': 'type-specialelite-encodesans',
|
|
70937
|
-
'img': '
|
|
71658
|
+
'img': '026.png',
|
|
70938
71659
|
'category': 8,
|
|
70939
71660
|
'default': false,
|
|
70940
71661
|
'caption': 'Special Elite & Encode Sans'
|
|
70941
|
-
}, {
|
|
70942
|
-
'css': 'basetype-parisienne-maitree.css',
|
|
70943
|
-
'sectioncss': 'type-parisienne-maitree.css',
|
|
70944
|
-
'classname': 'type-parisienne-maitree',
|
|
70945
|
-
'img': 'type-parisienne-maitree.jpg',
|
|
70946
|
-
'category': 11,
|
|
70947
|
-
'default': false,
|
|
70948
|
-
'caption': 'Parisienne & Maitree'
|
|
70949
71662
|
}, {
|
|
70950
71663
|
'css': 'basetype-marcellussc-heebo.css',
|
|
70951
71664
|
'sectioncss': 'type-marcellussc-heebo.css',
|
|
70952
71665
|
'classname': 'type-marcellussc-heebo',
|
|
70953
|
-
'img': '
|
|
71666
|
+
'img': '028.png',
|
|
70954
71667
|
'category': 4,
|
|
70955
71668
|
'default': false,
|
|
70956
71669
|
'caption': 'Marcellus SC & Heebo'
|
|
@@ -70958,23 +71671,15 @@ class ContentBox {
|
|
|
70958
71671
|
'css': 'basetype-oswald-cousine.css',
|
|
70959
71672
|
'sectioncss': 'type-oswald-cousine.css',
|
|
70960
71673
|
'classname': 'type-oswald-cousine',
|
|
70961
|
-
'img': '
|
|
71674
|
+
'img': '029.png',
|
|
70962
71675
|
'category': 7,
|
|
70963
71676
|
'default': false,
|
|
70964
71677
|
'caption': 'Oswald & Cousine'
|
|
70965
|
-
}, {
|
|
70966
|
-
'css': 'basetype-londrinashadow-martel.css',
|
|
70967
|
-
'sectioncss': 'type-londrinashadow-martel.css',
|
|
70968
|
-
'classname': 'type-londrinashadow-martel',
|
|
70969
|
-
'img': 'type-londrinashadow-martel.jpg',
|
|
70970
|
-
'category': 10,
|
|
70971
|
-
'default': false,
|
|
70972
|
-
'caption': 'Londrina Shadow & Martel'
|
|
70973
71678
|
}, {
|
|
70974
71679
|
'css': 'basetype-oranienbaum-sourcesanspro.css',
|
|
70975
71680
|
'sectioncss': 'type-oranienbaum-sourcesanspro.css',
|
|
70976
71681
|
'classname': 'type-oranienbaum-sourcesanspro',
|
|
70977
|
-
'img': '
|
|
71682
|
+
'img': '031.png',
|
|
70978
71683
|
'category': 4,
|
|
70979
71684
|
'default': false,
|
|
70980
71685
|
'caption': 'Oranienbaum & Source Sans Pro'
|
|
@@ -70982,7 +71687,7 @@ class ContentBox {
|
|
|
70982
71687
|
'css': 'basetype-sriracha-arvo.css',
|
|
70983
71688
|
'sectioncss': 'type-sriracha-arvo.css',
|
|
70984
71689
|
'classname': 'type-sriracha-arvo',
|
|
70985
|
-
'img': '
|
|
71690
|
+
'img': '032.png',
|
|
70986
71691
|
'category': 11,
|
|
70987
71692
|
'default': false,
|
|
70988
71693
|
'caption': 'Sriracha & Arvo'
|
|
@@ -70990,7 +71695,7 @@ class ContentBox {
|
|
|
70990
71695
|
'css': 'basetype-merriweather.css',
|
|
70991
71696
|
'sectioncss': 'type-merriweather.css',
|
|
70992
71697
|
'classname': 'type-merriweather',
|
|
70993
|
-
'img': '
|
|
71698
|
+
'img': '033.png',
|
|
70994
71699
|
'category': 2,
|
|
70995
71700
|
'default': false,
|
|
70996
71701
|
'caption': 'Merriweather'
|
|
@@ -70998,23 +71703,15 @@ class ContentBox {
|
|
|
70998
71703
|
'css': 'basetype-badscript-rokkitt.css',
|
|
70999
71704
|
'sectioncss': 'type-badscript-rokkitt.css',
|
|
71000
71705
|
'classname': 'type-badscript-rokkitt',
|
|
71001
|
-
'img': '
|
|
71706
|
+
'img': '034.png',
|
|
71002
71707
|
'category': 11,
|
|
71003
71708
|
'default': false,
|
|
71004
71709
|
'caption': 'Bad Script & Rokkitt'
|
|
71005
|
-
}, {
|
|
71006
|
-
'css': 'basetype-poiretone-pridi.css',
|
|
71007
|
-
'sectioncss': 'type-poiretone-pridi.css',
|
|
71008
|
-
'classname': 'type-poiretone-pridi',
|
|
71009
|
-
'img': 'type-poiretone-pridi.jpg',
|
|
71010
|
-
'category': 10,
|
|
71011
|
-
'default': false,
|
|
71012
|
-
'caption': 'Poiret One & Pridi'
|
|
71013
71710
|
}, {
|
|
71014
71711
|
'css': 'basetype-inconsolata.css',
|
|
71015
71712
|
'sectioncss': 'type-inconsolata.css',
|
|
71016
71713
|
'classname': 'type-inconsolata',
|
|
71017
|
-
'img': '
|
|
71714
|
+
'img': '036.png',
|
|
71018
71715
|
'category': 5,
|
|
71019
71716
|
'default': false,
|
|
71020
71717
|
'caption': 'Inconsolata'
|
|
@@ -71022,7 +71719,7 @@ class ContentBox {
|
|
|
71022
71719
|
'css': 'basetype-novamono-robotomono.css',
|
|
71023
71720
|
'sectioncss': 'type-novamono-robotomono.css',
|
|
71024
71721
|
'classname': 'type-novamono-robotomono',
|
|
71025
|
-
'img': '
|
|
71722
|
+
'img': '037.png',
|
|
71026
71723
|
'category': 5,
|
|
71027
71724
|
'default': false,
|
|
71028
71725
|
'caption': 'Nova Mono & Roboto Mono'
|
|
@@ -71030,39 +71727,15 @@ class ContentBox {
|
|
|
71030
71727
|
'css': 'basetype-spacemono.css',
|
|
71031
71728
|
'sectioncss': 'type-spacemono.css',
|
|
71032
71729
|
'classname': 'type-spacemono',
|
|
71033
|
-
'img': '
|
|
71730
|
+
'img': '038.png',
|
|
71034
71731
|
'category': 5,
|
|
71035
71732
|
'default': false,
|
|
71036
71733
|
'caption': 'Space Mono'
|
|
71037
|
-
}, {
|
|
71038
|
-
'css': 'basetype-pollerone-ibmplexserif.css',
|
|
71039
|
-
'sectioncss': 'type-pollerone-ibmplexserif.css',
|
|
71040
|
-
'classname': 'type-pollerone-ibmplexserif',
|
|
71041
|
-
'img': 'type-pollerone-ibmplexserif.jpg',
|
|
71042
|
-
'category': 10,
|
|
71043
|
-
'default': false,
|
|
71044
|
-
'caption': 'Poller One & IBM Plex Serif'
|
|
71045
|
-
}, {
|
|
71046
|
-
'css': 'basetype-italiana-martel.css',
|
|
71047
|
-
'sectioncss': 'type-italiana-martel.css',
|
|
71048
|
-
'classname': 'type-italiana-martel',
|
|
71049
|
-
'img': 'type-italiana-martel.jpg',
|
|
71050
|
-
'category': 2,
|
|
71051
|
-
'default': false,
|
|
71052
|
-
'caption': 'Italiana & Martel'
|
|
71053
|
-
}, {
|
|
71054
|
-
'css': 'basetype-julee-lora.css',
|
|
71055
|
-
'sectioncss': 'type-julee-lora.css',
|
|
71056
|
-
'classname': 'type-julee-lora',
|
|
71057
|
-
'img': 'type-julee-lora.jpg',
|
|
71058
|
-
'category': 11,
|
|
71059
|
-
'default': false,
|
|
71060
|
-
'caption': 'Julee & Lora'
|
|
71061
71734
|
}, {
|
|
71062
71735
|
'css': 'basetype-elsie-frankruhllibre.css',
|
|
71063
71736
|
'sectioncss': 'type-elsie-frankruhllibre.css',
|
|
71064
71737
|
'classname': 'type-elsie-frankruhllibre',
|
|
71065
|
-
'img': '
|
|
71738
|
+
'img': '042.png',
|
|
71066
71739
|
'category': 10,
|
|
71067
71740
|
'default': false,
|
|
71068
71741
|
'caption': 'Elsie & Frank Ruhl Libre'
|
|
@@ -71070,7 +71743,7 @@ class ContentBox {
|
|
|
71070
71743
|
'css': 'basetype-playfairdisp-petitformalscr.css',
|
|
71071
71744
|
'sectioncss': 'type-playfairdisp-petitformalscr.css',
|
|
71072
71745
|
'classname': 'type-playfairdisp-petitformalscr',
|
|
71073
|
-
'img': '
|
|
71746
|
+
'img': '043.png',
|
|
71074
71747
|
'category': 2,
|
|
71075
71748
|
'default': false,
|
|
71076
71749
|
'caption': 'Playfair Display'
|
|
@@ -71078,7 +71751,7 @@ class ContentBox {
|
|
|
71078
71751
|
'css': 'basetype-josefinsans-neuton.css',
|
|
71079
71752
|
'sectioncss': 'type-josefinsans-neuton.css',
|
|
71080
71753
|
'classname': 'type-josefinsans-neuton',
|
|
71081
|
-
'img': '
|
|
71754
|
+
'img': '044.png',
|
|
71082
71755
|
'category': 3,
|
|
71083
71756
|
'default': false,
|
|
71084
71757
|
'caption': 'Josefin Sans & Neuton'
|
|
@@ -71086,39 +71759,23 @@ class ContentBox {
|
|
|
71086
71759
|
'css': 'basetype-stintultracon-inconsolata.css',
|
|
71087
71760
|
'sectioncss': 'type-stintultracon-inconsolata.css',
|
|
71088
71761
|
'classname': 'type-stintultracon-inconsolata',
|
|
71089
|
-
'img': '
|
|
71762
|
+
'img': '045.png',
|
|
71090
71763
|
'category': 12,
|
|
71091
71764
|
'default': false,
|
|
71092
71765
|
'caption': 'Stint Ultra Condensed & Inconsolata'
|
|
71093
|
-
}, {
|
|
71094
|
-
'css': 'basetype-sixcaps-robotomono.css',
|
|
71095
|
-
'sectioncss': 'type-sixcaps-robotomono.css',
|
|
71096
|
-
'classname': 'type-sixcaps-robotomono',
|
|
71097
|
-
'img': 'type-sixcaps-robotomono.jpg',
|
|
71098
|
-
'category': 7,
|
|
71099
|
-
'default': false,
|
|
71100
|
-
'caption': 'Six Caps & Roboto Mono'
|
|
71101
71766
|
}, {
|
|
71102
71767
|
'css': 'basetype-raleway-playfairdisplay.css',
|
|
71103
71768
|
'sectioncss': 'type-raleway-playfairdisplay.css',
|
|
71104
71769
|
'classname': 'type-raleway-playfairdisplay',
|
|
71105
|
-
'img': '
|
|
71770
|
+
'img': '047.png',
|
|
71106
71771
|
'category': 1,
|
|
71107
71772
|
'default': false,
|
|
71108
71773
|
'caption': 'Raleway'
|
|
71109
|
-
}, {
|
|
71110
|
-
'css': 'basetype-pacifico-nanumgothiccod.css',
|
|
71111
|
-
'sectioncss': 'type-pacifico-nanumgothiccod.css',
|
|
71112
|
-
'classname': 'type-pacifico-nanumgothiccod',
|
|
71113
|
-
'img': 'type-pacifico-nanumgothiccod.jpg',
|
|
71114
|
-
'category': 13,
|
|
71115
|
-
'default': false,
|
|
71116
|
-
'caption': 'Pacifico & Nanum Gothic Coding'
|
|
71117
71774
|
}, {
|
|
71118
71775
|
'css': 'basetype-ubuntumono-sourcecodepro.css',
|
|
71119
71776
|
'sectioncss': 'type-ubuntumono-sourcecodepro.css',
|
|
71120
71777
|
'classname': 'type-ubuntumono-sourcecodepro',
|
|
71121
|
-
'img': '
|
|
71778
|
+
'img': '049.png',
|
|
71122
71779
|
'category': 5,
|
|
71123
71780
|
'default': false,
|
|
71124
71781
|
'caption': 'Ubuntu Mono & Source Code Pro'
|
|
@@ -71126,7 +71783,7 @@ class ContentBox {
|
|
|
71126
71783
|
'css': 'basetype-sharetechmono-nunito.css',
|
|
71127
71784
|
'sectioncss': 'type-sharetechmono-nunito.css',
|
|
71128
71785
|
'classname': 'type-sharetechmono-nunito',
|
|
71129
|
-
'img': '
|
|
71786
|
+
'img': '050.png',
|
|
71130
71787
|
'category': 6,
|
|
71131
71788
|
'default': false,
|
|
71132
71789
|
'caption': 'Share Tech Mono & Nunito'
|
|
@@ -71134,7 +71791,7 @@ class ContentBox {
|
|
|
71134
71791
|
'css': 'basetype-lato.css',
|
|
71135
71792
|
'sectioncss': 'type-lato.css',
|
|
71136
71793
|
'classname': 'type-lato',
|
|
71137
|
-
'img': '
|
|
71794
|
+
'img': '051.png',
|
|
71138
71795
|
'category': 1,
|
|
71139
71796
|
'default': false,
|
|
71140
71797
|
'caption': 'Lato'
|
|
@@ -71142,7 +71799,7 @@ class ContentBox {
|
|
|
71142
71799
|
'css': 'basetype-pathwaygothicone-merriweather.css',
|
|
71143
71800
|
'sectioncss': 'type-pathwaygothicone-merriweather.css',
|
|
71144
71801
|
'classname': 'type-pathwaygothicone-merriweather',
|
|
71145
|
-
'img': '
|
|
71802
|
+
'img': '052.png',
|
|
71146
71803
|
'category': 3,
|
|
71147
71804
|
'default': false,
|
|
71148
71805
|
'caption': 'Pathway Gothic One & Merriweather'
|
|
@@ -71150,7 +71807,7 @@ class ContentBox {
|
|
|
71150
71807
|
'css': 'basetype-forum-nanumgothiccoding.css',
|
|
71151
71808
|
'sectioncss': 'type-forum-nanumgothiccoding.css',
|
|
71152
71809
|
'classname': 'type-forum-nanumgothiccoding',
|
|
71153
|
-
'img': '
|
|
71810
|
+
'img': '053.png',
|
|
71154
71811
|
'category': 12,
|
|
71155
71812
|
'default': false,
|
|
71156
71813
|
'caption': 'Forum & Nanum Gothic Coding'
|
|
@@ -71158,31 +71815,15 @@ class ContentBox {
|
|
|
71158
71815
|
'css': 'basetype-bilbo-halant.css',
|
|
71159
71816
|
'sectioncss': 'type-bilbo-halant.css',
|
|
71160
71817
|
'classname': 'type-bilbo-halant',
|
|
71161
|
-
'img': '
|
|
71818
|
+
'img': '054.png',
|
|
71162
71819
|
'category': 11,
|
|
71163
71820
|
'default': false,
|
|
71164
71821
|
'caption': 'Bilbo & Halant'
|
|
71165
|
-
}, {
|
|
71166
|
-
'css': 'basetype-greatvibes-robotomono.css',
|
|
71167
|
-
'sectioncss': 'type-greatvibes-robotomono.css',
|
|
71168
|
-
'classname': 'type-greatvibes-robotomono',
|
|
71169
|
-
'img': 'type-greatvibes-robotomono.jpg',
|
|
71170
|
-
'category': 13,
|
|
71171
|
-
'default': false,
|
|
71172
|
-
'caption': 'Great Vibes & Roboto Mono'
|
|
71173
|
-
}, {
|
|
71174
|
-
'css': 'basetype-pinyonscript-firasans.css',
|
|
71175
|
-
'sectioncss': 'type-pinyonscript-firasans.css',
|
|
71176
|
-
'classname': 'type-pinyonscript-firasans',
|
|
71177
|
-
'img': 'type-pinyonscript-firasans.jpg',
|
|
71178
|
-
'category': 9,
|
|
71179
|
-
'default': false,
|
|
71180
|
-
'caption': 'Pinyon Script & Fira Sans'
|
|
71181
71822
|
}, {
|
|
71182
71823
|
'css': 'basetype-hammersmithone-poppins.css',
|
|
71183
71824
|
'sectioncss': 'type-hammersmithone-poppins.css',
|
|
71184
71825
|
'classname': 'type-hammersmithone-poppins',
|
|
71185
|
-
'img': '
|
|
71826
|
+
'img': '057.png',
|
|
71186
71827
|
'category': 1,
|
|
71187
71828
|
'default': false,
|
|
71188
71829
|
'caption': 'Hammersmith One & Poppins'
|
|
@@ -71190,7 +71831,7 @@ class ContentBox {
|
|
|
71190
71831
|
'css': 'basetype-arimamadurai.css',
|
|
71191
71832
|
'sectioncss': 'type-arimamadurai.css',
|
|
71192
71833
|
'classname': 'type-arimamadurai',
|
|
71193
|
-
'img': '
|
|
71834
|
+
'img': '058.png',
|
|
71194
71835
|
'category': 14,
|
|
71195
71836
|
'default': false,
|
|
71196
71837
|
'caption': 'Arima Madurai'
|
|
@@ -71198,7 +71839,7 @@ class ContentBox {
|
|
|
71198
71839
|
'css': 'basetype-teko-muktamahee.css',
|
|
71199
71840
|
'sectioncss': 'type-teko-muktamahee.css',
|
|
71200
71841
|
'classname': 'type-teko-muktamahee',
|
|
71201
|
-
'img': '
|
|
71842
|
+
'img': '059.png',
|
|
71202
71843
|
'category': 1,
|
|
71203
71844
|
'default': false,
|
|
71204
71845
|
'caption': 'Teko & Mukta Mahee'
|
|
@@ -71206,23 +71847,15 @@ class ContentBox {
|
|
|
71206
71847
|
'css': 'basetype-heebo-ibmplexmono.css',
|
|
71207
71848
|
'sectioncss': 'type-heebo-ibmplexmono.css',
|
|
71208
71849
|
'classname': 'type-heebo-ibmplexmono',
|
|
71209
|
-
'img': '
|
|
71850
|
+
'img': '060.png',
|
|
71210
71851
|
'category': 7,
|
|
71211
71852
|
'default': false,
|
|
71212
71853
|
'caption': 'Heebo & IBM Plex Mono'
|
|
71213
|
-
}, {
|
|
71214
|
-
'css': 'basetype-sail-rasa.css',
|
|
71215
|
-
'sectioncss': 'type-sail-rasa.css',
|
|
71216
|
-
'classname': 'type-sail-rasa',
|
|
71217
|
-
'img': 'type-sail-rasa.jpg',
|
|
71218
|
-
'category': 10,
|
|
71219
|
-
'default': false,
|
|
71220
|
-
'caption': 'Sail & Rasa'
|
|
71221
71854
|
}, {
|
|
71222
71855
|
'css': 'basetype-sairacon-thegirlnextdoor.css',
|
|
71223
71856
|
'sectioncss': 'type-sairacon-thegirlnextdoor.css',
|
|
71224
71857
|
'classname': 'type-sairacon-thegirlnextdoor',
|
|
71225
|
-
'img': '
|
|
71858
|
+
'img': '062.png',
|
|
71226
71859
|
'category': 1,
|
|
71227
71860
|
'default': false,
|
|
71228
71861
|
'caption': 'Saira Condensed'
|
|
@@ -71230,7 +71863,7 @@ class ContentBox {
|
|
|
71230
71863
|
'css': 'basetype-frankruhllibre-lato.css',
|
|
71231
71864
|
'sectioncss': 'type-frankruhllibre-lato.css',
|
|
71232
71865
|
'classname': 'type-frankruhllibre-lato',
|
|
71233
|
-
'img': '
|
|
71866
|
+
'img': '063.png',
|
|
71234
71867
|
'category': 4,
|
|
71235
71868
|
'default': false,
|
|
71236
71869
|
'caption': 'Frank Ruhl Libre & Lato'
|
|
@@ -71238,7 +71871,7 @@ class ContentBox {
|
|
|
71238
71871
|
'css': 'basetype-yantramanav-ibmplexserif.css',
|
|
71239
71872
|
'sectioncss': 'type-yantramanav-ibmplexserif.css',
|
|
71240
71873
|
'classname': 'type-yantramanav-ibmplexserif',
|
|
71241
|
-
'img': '
|
|
71874
|
+
'img': '064.png',
|
|
71242
71875
|
'category': 1,
|
|
71243
71876
|
'default': false,
|
|
71244
71877
|
'caption': 'Yantramanav & IBM Plex Serif'
|
|
@@ -71246,7 +71879,7 @@ class ContentBox {
|
|
|
71246
71879
|
'css': 'basetype-quicksand-kalam.css',
|
|
71247
71880
|
'sectioncss': 'type-quicksand-kalam.css',
|
|
71248
71881
|
'classname': 'type-quicksand-kalam',
|
|
71249
|
-
'img': '
|
|
71882
|
+
'img': '065.png',
|
|
71250
71883
|
'category': 1,
|
|
71251
71884
|
'default': false,
|
|
71252
71885
|
'caption': 'Quicksand & Kalam'
|
|
@@ -71254,7 +71887,7 @@ class ContentBox {
|
|
|
71254
71887
|
'css': 'basetype-ibmplexmono.css',
|
|
71255
71888
|
'sectioncss': 'type-ibmplexmono.css',
|
|
71256
71889
|
'classname': 'type-ibmplexmono',
|
|
71257
|
-
'img': '
|
|
71890
|
+
'img': '066.png',
|
|
71258
71891
|
'category': 5,
|
|
71259
71892
|
'default': false,
|
|
71260
71893
|
'caption': 'IBM Plex Mono'
|
|
@@ -71262,23 +71895,15 @@ class ContentBox {
|
|
|
71262
71895
|
'css': 'basetype-cinzeldecor-palanquin.css',
|
|
71263
71896
|
'sectioncss': 'type-cinzeldecor-palanquin.css',
|
|
71264
71897
|
'classname': 'type-cinzeldecor-palanquin',
|
|
71265
|
-
'img': '
|
|
71898
|
+
'img': '067.png',
|
|
71266
71899
|
'category': 8,
|
|
71267
71900
|
'default': false,
|
|
71268
71901
|
'caption': 'Cinzel Decorative & Palanquin'
|
|
71269
|
-
}, {
|
|
71270
|
-
'css': 'basetype-yesevaone-forum.css',
|
|
71271
|
-
'sectioncss': 'type-yesevaone-forum.css',
|
|
71272
|
-
'classname': 'type-yesevaone-forum',
|
|
71273
|
-
'img': 'type-yesevaone-forum.jpg',
|
|
71274
|
-
'category': 14,
|
|
71275
|
-
'default': false,
|
|
71276
|
-
'caption': 'Yeseva One & Forum'
|
|
71277
71902
|
}, {
|
|
71278
71903
|
'css': 'basetype-oswald-biryani.css',
|
|
71279
71904
|
'sectioncss': 'type-oswald-biryani.css',
|
|
71280
71905
|
'classname': 'type-oswald-biryani',
|
|
71281
|
-
'img': '
|
|
71906
|
+
'img': '069.png',
|
|
71282
71907
|
'category': 1,
|
|
71283
71908
|
'default': false,
|
|
71284
71909
|
'caption': 'Oswald & Biryani'
|
|
@@ -71286,7 +71911,7 @@ class ContentBox {
|
|
|
71286
71911
|
'css': 'basetype-yanonekaff-josefinsans.css',
|
|
71287
71912
|
'sectioncss': 'type-yanonekaff-josefinsans.css',
|
|
71288
71913
|
'classname': 'type-yanonekaff-josefinsans',
|
|
71289
|
-
'img': '
|
|
71914
|
+
'img': '070.png',
|
|
71290
71915
|
'category': 1,
|
|
71291
71916
|
'default': false,
|
|
71292
71917
|
'caption': 'Yanone Kaffeesatz & Josefin Sans'
|
|
@@ -71294,7 +71919,7 @@ class ContentBox {
|
|
|
71294
71919
|
'css': 'basetype-abrilfatface-assistant.css',
|
|
71295
71920
|
'sectioncss': 'type-abrilfatface-assistant.css',
|
|
71296
71921
|
'classname': 'type-abrilfatface-assistant',
|
|
71297
|
-
'img': '
|
|
71922
|
+
'img': '071.png',
|
|
71298
71923
|
'category': 8,
|
|
71299
71924
|
'default': false,
|
|
71300
71925
|
'caption': 'Abril Fatface & Assistant'
|
|
@@ -71302,7 +71927,7 @@ class ContentBox {
|
|
|
71302
71927
|
'css': 'basetype-nanumgothiccod-firasanscon.css',
|
|
71303
71928
|
'sectioncss': 'type-nanumgothiccod-firasanscon.css',
|
|
71304
71929
|
'classname': 'type-nanumgothiccod-firasanscon',
|
|
71305
|
-
'img': '
|
|
71930
|
+
'img': '072.png',
|
|
71306
71931
|
'category': 6,
|
|
71307
71932
|
'default': false,
|
|
71308
71933
|
'caption': 'Nanum Gothic Coding & Fira Sans Condensed'
|
|
@@ -71310,23 +71935,15 @@ class ContentBox {
|
|
|
71310
71935
|
'css': 'basetype-inder-trirong.css',
|
|
71311
71936
|
'sectioncss': 'type-inder-trirong.css',
|
|
71312
71937
|
'classname': 'type-inder-trirong',
|
|
71313
|
-
'img': '
|
|
71938
|
+
'img': '073.png',
|
|
71314
71939
|
'category': 3,
|
|
71315
71940
|
'default': false,
|
|
71316
71941
|
'caption': 'Inder & Trirong'
|
|
71317
|
-
}, {
|
|
71318
|
-
'css': 'basetype-dosis-oldstandardtt.css',
|
|
71319
|
-
'sectioncss': 'type-dosis-oldstandardtt.css',
|
|
71320
|
-
'classname': 'type-dosis-oldstandardtt',
|
|
71321
|
-
'img': 'type-dosis-oldstandardtt.jpg',
|
|
71322
|
-
'category': 1,
|
|
71323
|
-
'default': false,
|
|
71324
|
-
'caption': 'Dosis & Old Standard TT'
|
|
71325
71942
|
}, {
|
|
71326
71943
|
'css': 'basetype-atma-tajawal.css',
|
|
71327
71944
|
'sectioncss': 'type-atma-tajawal.css',
|
|
71328
71945
|
'classname': 'type-atma-tajawal',
|
|
71329
|
-
'img': '
|
|
71946
|
+
'img': '075.png',
|
|
71330
71947
|
'category': 8,
|
|
71331
71948
|
'default': false,
|
|
71332
71949
|
'caption': 'Atma & Tajawal'
|
|
@@ -71334,23 +71951,15 @@ class ContentBox {
|
|
|
71334
71951
|
'css': 'basetype-prata-hindsiliguri.css',
|
|
71335
71952
|
'sectioncss': 'type-prata-hindsiliguri.css',
|
|
71336
71953
|
'classname': 'type-prata-hindsiliguri',
|
|
71337
|
-
'img': '
|
|
71954
|
+
'img': '076.png',
|
|
71338
71955
|
'category': 4,
|
|
71339
71956
|
'default': false,
|
|
71340
71957
|
'caption': 'Prata & Hind Siliguri'
|
|
71341
|
-
}, {
|
|
71342
|
-
'css': 'basetype-engagement-spectral.css',
|
|
71343
|
-
'sectioncss': 'type-engagement-spectral.css',
|
|
71344
|
-
'classname': 'type-engagement-spectral',
|
|
71345
|
-
'img': 'type-engagement-spectral.jpg',
|
|
71346
|
-
'category': 11,
|
|
71347
|
-
'default': false,
|
|
71348
|
-
'caption': 'Engagement & Spectral'
|
|
71349
71958
|
}, {
|
|
71350
71959
|
'css': 'basetype-federo-gothica1.css',
|
|
71351
71960
|
'sectioncss': 'type-federo-gothica1.css',
|
|
71352
71961
|
'classname': 'type-federo-gothica1',
|
|
71353
|
-
'img': '
|
|
71962
|
+
'img': '078.png',
|
|
71354
71963
|
'category': 1,
|
|
71355
71964
|
'default': false,
|
|
71356
71965
|
'caption': 'Federo & Gothic A1'
|
|
@@ -71358,23 +71967,15 @@ class ContentBox {
|
|
|
71358
71967
|
'css': 'basetype-fjallaone-ibmplexserif.css',
|
|
71359
71968
|
'sectioncss': 'type-fjallaone-ibmplexserif.css',
|
|
71360
71969
|
'classname': 'type-fjallaone-ibmplexserif',
|
|
71361
|
-
'img': '
|
|
71970
|
+
'img': '079.png',
|
|
71362
71971
|
'category': 3,
|
|
71363
71972
|
'default': false,
|
|
71364
71973
|
'caption': 'Fjalla One & IBM Plex Serif'
|
|
71365
|
-
}, {
|
|
71366
|
-
'css': 'basetype-dynalight-mada.css',
|
|
71367
|
-
'sectioncss': 'type-dynalight-mada.css',
|
|
71368
|
-
'classname': 'type-dynalight-mada',
|
|
71369
|
-
'img': 'type-dynalight-mada.jpg',
|
|
71370
|
-
'category': 8,
|
|
71371
|
-
'default': false,
|
|
71372
|
-
'caption': 'Dynalight & Mada'
|
|
71373
71974
|
}, {
|
|
71374
71975
|
'css': 'basetype-cormorantsc-ibmplexsanscon.css',
|
|
71375
71976
|
'sectioncss': 'type-cormorantsc-ibmplexsanscon.css',
|
|
71376
71977
|
'classname': 'type-cormorantsc-ibmplexsanscon',
|
|
71377
|
-
'img': '
|
|
71978
|
+
'img': '081.png',
|
|
71378
71979
|
'category': 4,
|
|
71379
71980
|
'default': false,
|
|
71380
71981
|
'caption': 'Cormorant SC & IBM Plex Sans Condensed'
|
|
@@ -71382,7 +71983,7 @@ class ContentBox {
|
|
|
71382
71983
|
'css': 'basetype-kalam-robotomono.css',
|
|
71383
71984
|
'sectioncss': 'type-kalam-robotomono.css',
|
|
71384
71985
|
'classname': 'type-kalam-robotomono',
|
|
71385
|
-
'img': '
|
|
71986
|
+
'img': '082.png',
|
|
71386
71987
|
'category': 13,
|
|
71387
71988
|
'default': false,
|
|
71388
71989
|
'caption': 'Kalam & Roboto Mono'
|
|
@@ -71390,23 +71991,15 @@ class ContentBox {
|
|
|
71390
71991
|
'css': 'basetype-fugazone-librefranklin.css',
|
|
71391
71992
|
'sectioncss': 'type-fugazone-librefranklin.css',
|
|
71392
71993
|
'classname': 'type-fugazone-librefranklin',
|
|
71393
|
-
'img': '
|
|
71994
|
+
'img': '083.png',
|
|
71394
71995
|
'category': 8,
|
|
71395
71996
|
'default': false,
|
|
71396
71997
|
'caption': 'Fugaz One & Libre Franklin'
|
|
71397
|
-
}, {
|
|
71398
|
-
'css': 'basetype-gravitasone-nanummyeongjo.css',
|
|
71399
|
-
'sectioncss': 'type-gravitasone-nanummyeongjo.css',
|
|
71400
|
-
'classname': 'type-gravitasone-nanummyeongjo',
|
|
71401
|
-
'img': 'type-gravitasone-nanummyeongjo.jpg',
|
|
71402
|
-
'category': 10,
|
|
71403
|
-
'default': false,
|
|
71404
|
-
'caption': 'Gravitas One & Nanum Myeongjo'
|
|
71405
71998
|
}, {
|
|
71406
71999
|
'css': 'basetype-yeonsung-palanquin.css',
|
|
71407
72000
|
'sectioncss': 'type-yeonsung-palanquin.css',
|
|
71408
72001
|
'classname': 'type-yeonsung-palanquin',
|
|
71409
|
-
'img': '
|
|
72002
|
+
'img': '085.png',
|
|
71410
72003
|
'category': 8,
|
|
71411
72004
|
'default': false,
|
|
71412
72005
|
'caption': 'Yeon Sung & Palanquin'
|
|
@@ -71414,7 +72007,7 @@ class ContentBox {
|
|
|
71414
72007
|
'css': 'basetype-rancho-robotoslab.css',
|
|
71415
72008
|
'sectioncss': 'type-rancho-robotoslab.css',
|
|
71416
72009
|
'classname': 'type-rancho-robotoslab',
|
|
71417
|
-
'img': '
|
|
72010
|
+
'img': '086.png',
|
|
71418
72011
|
'category': 11,
|
|
71419
72012
|
'default': false,
|
|
71420
72013
|
'caption': 'Rancho & Roboto Slab'
|
|
@@ -71422,7 +72015,7 @@ class ContentBox {
|
|
|
71422
72015
|
'css': 'basetype-tenaram-overpassmono.css',
|
|
71423
72016
|
'sectioncss': 'type-tenaram-overpassmono.css',
|
|
71424
72017
|
'classname': 'type-tenaram-overpassmono',
|
|
71425
|
-
'img': '
|
|
72018
|
+
'img': '087.png',
|
|
71426
72019
|
'category': 7,
|
|
71427
72020
|
'default': false,
|
|
71428
72021
|
'caption': 'Tenali Ramakrishna & Overpass Mono'
|
|
@@ -71430,23 +72023,15 @@ class ContentBox {
|
|
|
71430
72023
|
'css': 'basetype-thegirlnextdoor-sourcesanspro.css',
|
|
71431
72024
|
'sectioncss': 'type-thegirlnextdoor-sourcesanspro.css',
|
|
71432
72025
|
'classname': 'type-thegirlnextdoor-sourcesanspro',
|
|
71433
|
-
'img': '
|
|
72026
|
+
'img': '088.png',
|
|
71434
72027
|
'category': 9,
|
|
71435
72028
|
'default': false,
|
|
71436
72029
|
'caption': 'The Girl Next Door & Source Sans Pro'
|
|
71437
|
-
}, {
|
|
71438
|
-
'css': 'basetype-alexbrush-ibmplexsans.css',
|
|
71439
|
-
'sectioncss': 'type-alexbrush-ibmplexsans.css',
|
|
71440
|
-
'classname': 'type-alexbrush-ibmplexsans',
|
|
71441
|
-
'img': 'type-alexbrush-ibmplexsans.jpg',
|
|
71442
|
-
'category': 9,
|
|
71443
|
-
'default': false,
|
|
71444
|
-
'caption': 'Alex Brush & IBM Plex Sans'
|
|
71445
72030
|
}, {
|
|
71446
72031
|
'css': 'basetype-boogaloo-inconsolata.css',
|
|
71447
72032
|
'sectioncss': 'type-boogaloo-inconsolata.css',
|
|
71448
72033
|
'classname': 'type-boogaloo-inconsolata',
|
|
71449
|
-
'img': '
|
|
72034
|
+
'img': '090.png',
|
|
71450
72035
|
'category': 12,
|
|
71451
72036
|
'default': false,
|
|
71452
72037
|
'caption': 'Boogaloo & Inconsolata'
|
|
@@ -71454,7 +72039,7 @@ class ContentBox {
|
|
|
71454
72039
|
'css': 'basetype-caveat-sourcecodepro.css',
|
|
71455
72040
|
'sectioncss': 'type-caveat-sourcecodepro.css',
|
|
71456
72041
|
'classname': 'type-caveat-sourcecodepro',
|
|
71457
|
-
'img': '
|
|
72042
|
+
'img': '091.png',
|
|
71458
72043
|
'category': 13,
|
|
71459
72044
|
'default': false,
|
|
71460
72045
|
'caption': 'Caveat & Source Code Pro'
|
|
@@ -71462,7 +72047,7 @@ class ContentBox {
|
|
|
71462
72047
|
'css': 'basetype-passionone-worksans.css',
|
|
71463
72048
|
'sectioncss': 'type-passionone-worksans.css',
|
|
71464
72049
|
'classname': 'type-passionone-worksans',
|
|
71465
|
-
'img': '
|
|
72050
|
+
'img': '092.png',
|
|
71466
72051
|
'category': 8,
|
|
71467
72052
|
'default': false,
|
|
71468
72053
|
'caption': 'Passion One & Work Sans'
|
|
@@ -71470,7 +72055,7 @@ class ContentBox {
|
|
|
71470
72055
|
'css': 'basetype-anticdidone-halant.css',
|
|
71471
72056
|
'sectioncss': 'type-anticdidone-halant.css',
|
|
71472
72057
|
'classname': 'type-anticdidone-halant',
|
|
71473
|
-
'img': '
|
|
72058
|
+
'img': '093.png',
|
|
71474
72059
|
'category': 2,
|
|
71475
72060
|
'default': false,
|
|
71476
72061
|
'caption': 'Antic Didone & Halant'
|
|
@@ -71478,7 +72063,7 @@ class ContentBox {
|
|
|
71478
72063
|
'css': 'basetype-adventpro-opensans.css',
|
|
71479
72064
|
'sectioncss': 'type-adventpro-opensans.css',
|
|
71480
72065
|
'classname': 'type-adventpro-opensans',
|
|
71481
|
-
'img': '
|
|
72066
|
+
'img': '094.png',
|
|
71482
72067
|
'category': 1,
|
|
71483
72068
|
'default': false,
|
|
71484
72069
|
'caption': 'Advent Pro & Open Sans'
|
|
@@ -71486,7 +72071,7 @@ class ContentBox {
|
|
|
71486
72071
|
'css': 'basetype-cutivemono-lato.css',
|
|
71487
72072
|
'sectioncss': 'type-cutivemono-lato.css',
|
|
71488
72073
|
'classname': 'type-cutivemono-lato',
|
|
71489
|
-
'img': '
|
|
72074
|
+
'img': '095.png',
|
|
71490
72075
|
'category': 6,
|
|
71491
72076
|
'default': false,
|
|
71492
72077
|
'caption': 'Cutive Mono & Lato'
|
|
@@ -71494,7 +72079,7 @@ class ContentBox {
|
|
|
71494
72079
|
'css': 'basetype-elsie-montserrat.css',
|
|
71495
72080
|
'sectioncss': 'type-elsie-montserrat.css',
|
|
71496
72081
|
'classname': 'type-elsie-montserrat',
|
|
71497
|
-
'img': '
|
|
72082
|
+
'img': '096.png',
|
|
71498
72083
|
'category': 8,
|
|
71499
72084
|
'default': false,
|
|
71500
72085
|
'caption': 'Elsie & Montserrat'
|
|
@@ -71502,7 +72087,7 @@ class ContentBox {
|
|
|
71502
72087
|
'css': 'basetype-macondo-mukta.css',
|
|
71503
72088
|
'sectioncss': 'type-macondo-mukta.css',
|
|
71504
72089
|
'classname': 'type-macondo-mukta',
|
|
71505
|
-
'img': '
|
|
72090
|
+
'img': '097.png',
|
|
71506
72091
|
'category': 8,
|
|
71507
72092
|
'default': false,
|
|
71508
72093
|
'caption': 'Macondo & Mukta'
|
|
@@ -71510,7 +72095,7 @@ class ContentBox {
|
|
|
71510
72095
|
'css': 'basetype-oswald-opensans.css',
|
|
71511
72096
|
'sectioncss': 'type-oswald-opensans.css',
|
|
71512
72097
|
'classname': 'type-oswald-opensans',
|
|
71513
|
-
'img': '
|
|
72098
|
+
'img': '098.png',
|
|
71514
72099
|
'category': 1,
|
|
71515
72100
|
'default': false,
|
|
71516
72101
|
'caption': 'Oswald & Open Sans'
|
|
@@ -71518,7 +72103,7 @@ class ContentBox {
|
|
|
71518
72103
|
'css': 'basetype-poppins-lekton.css',
|
|
71519
72104
|
'sectioncss': 'type-poppins-lekton.css',
|
|
71520
72105
|
'classname': 'type-poppins-lekton',
|
|
71521
|
-
'img': '
|
|
72106
|
+
'img': '099.png',
|
|
71522
72107
|
'category': 1,
|
|
71523
72108
|
'default': false,
|
|
71524
72109
|
'caption': 'Poppins & Lekton'
|
|
@@ -71526,7 +72111,7 @@ class ContentBox {
|
|
|
71526
72111
|
'css': 'basetype-raleway-neuton.css',
|
|
71527
72112
|
'sectioncss': 'type-raleway-neuton.css',
|
|
71528
72113
|
'classname': 'type-raleway-neuton',
|
|
71529
|
-
'img': '
|
|
72114
|
+
'img': '100.png',
|
|
71530
72115
|
'category': 3,
|
|
71531
72116
|
'default': false,
|
|
71532
72117
|
'caption': 'Raleway & Neuton'
|
|
@@ -71534,7 +72119,7 @@ class ContentBox {
|
|
|
71534
72119
|
'css': 'basetype-sourcecodepro-nunitosans.css',
|
|
71535
72120
|
'sectioncss': 'type-sourcecodepro-nunitosans.css',
|
|
71536
72121
|
'classname': 'type-sourcecodepro-nunitosans',
|
|
71537
|
-
'img': '
|
|
72122
|
+
'img': '101.png',
|
|
71538
72123
|
'category': 6,
|
|
71539
72124
|
'default': false,
|
|
71540
72125
|
'caption': 'Source Code Pro & Nunito Sans'
|
|
@@ -71542,7 +72127,7 @@ class ContentBox {
|
|
|
71542
72127
|
'css': 'basetype-tangerine-opensans.css',
|
|
71543
72128
|
'sectioncss': 'type-tangerine-opensans.css',
|
|
71544
72129
|
'classname': 'type-tangerine-opensans',
|
|
71545
|
-
'img': '
|
|
72130
|
+
'img': '102.png',
|
|
71546
72131
|
'category': 9,
|
|
71547
72132
|
'default': false,
|
|
71548
72133
|
'caption': 'Tangerine & Open Sans'
|
|
@@ -71550,7 +72135,7 @@ class ContentBox {
|
|
|
71550
72135
|
'css': 'basetype-alegreya-lato.css',
|
|
71551
72136
|
'sectioncss': 'type-alegreya-lato.css',
|
|
71552
72137
|
'classname': 'type-alegreya-lato',
|
|
71553
|
-
'img': '
|
|
72138
|
+
'img': '103.png',
|
|
71554
72139
|
'category': 4,
|
|
71555
72140
|
'default': false,
|
|
71556
72141
|
'caption': 'Alegreya & Lato'
|
|
@@ -71558,7 +72143,7 @@ class ContentBox {
|
|
|
71558
72143
|
'css': 'basetype-amaticsc-lato.css',
|
|
71559
72144
|
'sectioncss': 'type-amaticsc-lato.css',
|
|
71560
72145
|
'classname': 'type-amaticsc-lato',
|
|
71561
|
-
'img': '
|
|
72146
|
+
'img': '104.png',
|
|
71562
72147
|
'category': 9,
|
|
71563
72148
|
'default': false,
|
|
71564
72149
|
'caption': 'Amatic SC & Lato'
|
|
@@ -71566,7 +72151,7 @@ class ContentBox {
|
|
|
71566
72151
|
'css': 'basetype-heebo-ibmplexmono-2.css',
|
|
71567
72152
|
'sectioncss': 'type-heebo-ibmplexmono-2.css',
|
|
71568
72153
|
'classname': 'type-heebo-ibmplexmono-2',
|
|
71569
|
-
'img': '
|
|
72154
|
+
'img': '105.png',
|
|
71570
72155
|
'category': 7,
|
|
71571
72156
|
'default': false,
|
|
71572
72157
|
'caption': 'Heebo & IBM Plex Mono'
|
|
@@ -71574,7 +72159,7 @@ class ContentBox {
|
|
|
71574
72159
|
'css': 'basetype-juliussansone-robotocondensed.css',
|
|
71575
72160
|
'sectioncss': 'type-juliussansone-robotocondensed.css',
|
|
71576
72161
|
'classname': 'type-juliussansone-robotocondensed',
|
|
71577
|
-
'img': '
|
|
72162
|
+
'img': '106.png',
|
|
71578
72163
|
'category': 1,
|
|
71579
72164
|
'default': false,
|
|
71580
72165
|
'caption': 'Julius Sans One & Roboto Condensed'
|
|
@@ -71582,7 +72167,7 @@ class ContentBox {
|
|
|
71582
72167
|
'css': 'basetype-montserrat-roboto.css',
|
|
71583
72168
|
'sectioncss': 'type-montserrat-roboto.css',
|
|
71584
72169
|
'classname': 'type-montserrat-roboto',
|
|
71585
|
-
'img': '
|
|
72170
|
+
'img': '107.png',
|
|
71586
72171
|
'category': 1,
|
|
71587
72172
|
'default': false,
|
|
71588
72173
|
'caption': 'Montserrat & Roboto'
|
|
@@ -71590,7 +72175,7 @@ class ContentBox {
|
|
|
71590
72175
|
'css': 'basetype-nothingyouc-ibmplexmono-2.css',
|
|
71591
72176
|
'sectioncss': 'type-nothingyouc-ibmplexmono-2.css',
|
|
71592
72177
|
'classname': 'type-nothingyouc-ibmplexmono-2',
|
|
71593
|
-
'img': '
|
|
72178
|
+
'img': '108.png',
|
|
71594
72179
|
'category': 13,
|
|
71595
72180
|
'default': false,
|
|
71596
72181
|
'caption': 'Nothing You Could Do & IBM Plex Mono'
|
|
@@ -71598,7 +72183,7 @@ class ContentBox {
|
|
|
71598
72183
|
'css': 'basetype-raleway-lato.css',
|
|
71599
72184
|
'sectioncss': 'type-raleway-lato.css',
|
|
71600
72185
|
'classname': 'type-raleway-lato',
|
|
71601
|
-
'img': '
|
|
72186
|
+
'img': '109.png',
|
|
71602
72187
|
'category': 1,
|
|
71603
72188
|
'default': false,
|
|
71604
72189
|
'caption': 'Raleway & Lato'
|
|
@@ -71606,7 +72191,7 @@ class ContentBox {
|
|
|
71606
72191
|
'css': 'basetype-raleway-lusitana.css',
|
|
71607
72192
|
'sectioncss': 'type-raleway-lusitana.css',
|
|
71608
72193
|
'classname': 'type-raleway-lusitana',
|
|
71609
|
-
'img': '
|
|
72194
|
+
'img': '110.png',
|
|
71610
72195
|
'category': 3,
|
|
71611
72196
|
'default': false,
|
|
71612
72197
|
'caption': 'Raleway & Lusitana'
|
|
@@ -71614,7 +72199,7 @@ class ContentBox {
|
|
|
71614
72199
|
'css': 'basetype-rufina-oxygen.css',
|
|
71615
72200
|
'sectioncss': 'type-rufina-oxygen.css',
|
|
71616
72201
|
'classname': 'type-rufina-oxygen',
|
|
71617
|
-
'img': '
|
|
72202
|
+
'img': '111.png',
|
|
71618
72203
|
'category': 4,
|
|
71619
72204
|
'default': false,
|
|
71620
72205
|
'caption': 'Rufina & Oxygen'
|
|
@@ -71622,7 +72207,7 @@ class ContentBox {
|
|
|
71622
72207
|
'css': 'basetype-sacramento-opensans.css',
|
|
71623
72208
|
'sectioncss': 'type-sacramento-opensans.css',
|
|
71624
72209
|
'classname': 'type-sacramento-opensans',
|
|
71625
|
-
'img': '
|
|
72210
|
+
'img': '112.png',
|
|
71626
72211
|
'category': 9,
|
|
71627
72212
|
'default': false,
|
|
71628
72213
|
'caption': 'Sacramento & Open Sans'
|
|
@@ -71630,7 +72215,7 @@ class ContentBox {
|
|
|
71630
72215
|
'css': 'basetype-specialelite-playfairdisplay.css',
|
|
71631
72216
|
'sectioncss': 'type-specialelite-playfairdisplay.css',
|
|
71632
72217
|
'classname': 'type-specialelite-playfairdisplay',
|
|
71633
|
-
'img': '
|
|
72218
|
+
'img': '113.png',
|
|
71634
72219
|
'category': 10,
|
|
71635
72220
|
'default': false,
|
|
71636
72221
|
'caption': 'Special Elite & Playfair Display'
|
|
@@ -71638,10 +72223,226 @@ class ContentBox {
|
|
|
71638
72223
|
'css': 'basetype-unicaone-sourcesanspro.css',
|
|
71639
72224
|
'sectioncss': 'type-unicaone-sourcesanspro.css',
|
|
71640
72225
|
'classname': 'type-unicaone-sourcesanspro',
|
|
71641
|
-
'img': '
|
|
72226
|
+
'img': '114.png',
|
|
71642
72227
|
'category': 8,
|
|
71643
72228
|
'default': false,
|
|
71644
72229
|
'caption': 'Unica One & Source Sans Pro'
|
|
72230
|
+
}, {
|
|
72231
|
+
'css': 'basetype-amaticsc-josepfinsans.css',
|
|
72232
|
+
'sectioncss': 'type-amaticsc-josepfinsans.css',
|
|
72233
|
+
'classname': 'type-amaticsc-josepfinsans',
|
|
72234
|
+
'img': '001.png',
|
|
72235
|
+
'category': 9,
|
|
72236
|
+
'default': true,
|
|
72237
|
+
'caption': 'Amatic SC & Josefin Sans'
|
|
72238
|
+
}, {
|
|
72239
|
+
'css': 'basetype-sourcesanspro-anonymouspro.css',
|
|
72240
|
+
'sectioncss': 'type-sourcesanspro-anonymouspro.css',
|
|
72241
|
+
'classname': 'type-sourcesanspro-anonymouspro',
|
|
72242
|
+
'img': '002.png',
|
|
72243
|
+
'category': 7,
|
|
72244
|
+
'default': true,
|
|
72245
|
+
'caption': 'Source Sans Pro & Anonymous Pro'
|
|
72246
|
+
}, {
|
|
72247
|
+
'css': 'basetype-poppins-oldstandardtt.css',
|
|
72248
|
+
'sectioncss': 'type-poppins-oldstandardtt.css',
|
|
72249
|
+
'classname': 'type-poppins-oldstandardtt',
|
|
72250
|
+
'img': '003.png',
|
|
72251
|
+
'category': 3,
|
|
72252
|
+
'default': true,
|
|
72253
|
+
'caption': 'Poppins & Old Standard TT'
|
|
72254
|
+
}, {
|
|
72255
|
+
'css': 'basetype-yesteryear-chivo.css',
|
|
72256
|
+
'sectioncss': 'type-yesteryear-chivo.css',
|
|
72257
|
+
'classname': 'type-yesteryear-chivo',
|
|
72258
|
+
'img': '005.png',
|
|
72259
|
+
'category': 9,
|
|
72260
|
+
'default': true,
|
|
72261
|
+
'caption': 'Yesteryear & Chivo'
|
|
72262
|
+
}, {
|
|
72263
|
+
'css': 'basetype-ptserif-poppins.css',
|
|
72264
|
+
'sectioncss': 'type-ptserif-poppins.css',
|
|
72265
|
+
'classname': 'type-ptserif-poppins',
|
|
72266
|
+
'img': '008.png',
|
|
72267
|
+
'category': 4,
|
|
72268
|
+
'default': true,
|
|
72269
|
+
'caption': 'PT Serif & Poppins'
|
|
72270
|
+
}, {
|
|
72271
|
+
'css': 'basetype-kellyslab-yantramanav.css',
|
|
72272
|
+
'sectioncss': 'type-kellyslab-yantramanav.css',
|
|
72273
|
+
'classname': 'type-kellyslab-yantramanav',
|
|
72274
|
+
'img': '009.png',
|
|
72275
|
+
'category': 8,
|
|
72276
|
+
'default': true,
|
|
72277
|
+
'caption': 'Kelly Slab & Yantramanav'
|
|
72278
|
+
}, {
|
|
72279
|
+
'css': 'basetype-yellowtail-frankruhllibre.css',
|
|
72280
|
+
'sectioncss': 'type-yellowtail-frankruhllibre.css',
|
|
72281
|
+
'classname': 'type-yellowtail-frankruhllibre',
|
|
72282
|
+
'img': '015.png',
|
|
72283
|
+
'category': 11,
|
|
72284
|
+
'default': true,
|
|
72285
|
+
'caption': 'Yellowtail & Frank Ruhl Libre'
|
|
72286
|
+
}, {
|
|
72287
|
+
'css': 'basetype-sedgwickave-spectral.css',
|
|
72288
|
+
'sectioncss': 'type-sedgwickave-spectral.css',
|
|
72289
|
+
'classname': 'type-sedgwickave-spectral',
|
|
72290
|
+
'img': '017.png',
|
|
72291
|
+
'category': 10,
|
|
72292
|
+
'default': false,
|
|
72293
|
+
'caption': 'Sedgwick Ave & Spectral'
|
|
72294
|
+
}, {
|
|
72295
|
+
'css': 'basetype-satisfy-economica.css',
|
|
72296
|
+
'sectioncss': 'type-satisfy-economica.css',
|
|
72297
|
+
'classname': 'type-satisfy-economica',
|
|
72298
|
+
'img': '024.png',
|
|
72299
|
+
'category': 9,
|
|
72300
|
+
'default': false,
|
|
72301
|
+
'caption': 'Satisfy & Economica'
|
|
72302
|
+
}, {
|
|
72303
|
+
'css': 'basetype-josefinsans-lekton.css',
|
|
72304
|
+
'sectioncss': 'type-josefinsans-lekton.css',
|
|
72305
|
+
'classname': 'type-josefinsans-lekton',
|
|
72306
|
+
'img': '025.png',
|
|
72307
|
+
'category': 1,
|
|
72308
|
+
'default': false,
|
|
72309
|
+
'caption': 'Josefin Sans & Lekton'
|
|
72310
|
+
}, {
|
|
72311
|
+
'css': 'basetype-parisienne-maitree.css',
|
|
72312
|
+
'sectioncss': 'type-parisienne-maitree.css',
|
|
72313
|
+
'classname': 'type-parisienne-maitree',
|
|
72314
|
+
'img': '027.png',
|
|
72315
|
+
'category': 11,
|
|
72316
|
+
'default': false,
|
|
72317
|
+
'caption': 'Parisienne & Maitree'
|
|
72318
|
+
}, {
|
|
72319
|
+
'css': 'basetype-londrinashadow-martel.css',
|
|
72320
|
+
'sectioncss': 'type-londrinashadow-martel.css',
|
|
72321
|
+
'classname': 'type-londrinashadow-martel',
|
|
72322
|
+
'img': '030.png',
|
|
72323
|
+
'category': 10,
|
|
72324
|
+
'default': false,
|
|
72325
|
+
'caption': 'Londrina Shadow & Martel'
|
|
72326
|
+
}, {
|
|
72327
|
+
'css': 'basetype-poiretone-pridi.css',
|
|
72328
|
+
'sectioncss': 'type-poiretone-pridi.css',
|
|
72329
|
+
'classname': 'type-poiretone-pridi',
|
|
72330
|
+
'img': '035.png',
|
|
72331
|
+
'category': 10,
|
|
72332
|
+
'default': false,
|
|
72333
|
+
'caption': 'Poiret One & Pridi'
|
|
72334
|
+
}, {
|
|
72335
|
+
'css': 'basetype-pollerone-ibmplexserif.css',
|
|
72336
|
+
'sectioncss': 'type-pollerone-ibmplexserif.css',
|
|
72337
|
+
'classname': 'type-pollerone-ibmplexserif',
|
|
72338
|
+
'img': '039.png',
|
|
72339
|
+
'category': 10,
|
|
72340
|
+
'default': false,
|
|
72341
|
+
'caption': 'Poller One & IBM Plex Serif'
|
|
72342
|
+
}, {
|
|
72343
|
+
'css': 'basetype-italiana-martel.css',
|
|
72344
|
+
'sectioncss': 'type-italiana-martel.css',
|
|
72345
|
+
'classname': 'type-italiana-martel',
|
|
72346
|
+
'img': '040.png',
|
|
72347
|
+
'category': 2,
|
|
72348
|
+
'default': false,
|
|
72349
|
+
'caption': 'Italiana & Martel'
|
|
72350
|
+
}, {
|
|
72351
|
+
'css': 'basetype-julee-lora.css',
|
|
72352
|
+
'sectioncss': 'type-julee-lora.css',
|
|
72353
|
+
'classname': 'type-julee-lora',
|
|
72354
|
+
'img': '041.png',
|
|
72355
|
+
'category': 11,
|
|
72356
|
+
'default': false,
|
|
72357
|
+
'caption': 'Julee & Lora'
|
|
72358
|
+
}, {
|
|
72359
|
+
'css': 'basetype-sixcaps-robotomono.css',
|
|
72360
|
+
'sectioncss': 'type-sixcaps-robotomono.css',
|
|
72361
|
+
'classname': 'type-sixcaps-robotomono',
|
|
72362
|
+
'img': '046.png',
|
|
72363
|
+
'category': 7,
|
|
72364
|
+
'default': false,
|
|
72365
|
+
'caption': 'Six Caps & Roboto Mono'
|
|
72366
|
+
}, {
|
|
72367
|
+
'css': 'basetype-pacifico-nanumgothiccod.css',
|
|
72368
|
+
'sectioncss': 'type-pacifico-nanumgothiccod.css',
|
|
72369
|
+
'classname': 'type-pacifico-nanumgothiccod',
|
|
72370
|
+
'img': '048.png',
|
|
72371
|
+
'category': 13,
|
|
72372
|
+
'default': false,
|
|
72373
|
+
'caption': 'Pacifico & Nanum Gothic Coding'
|
|
72374
|
+
}, {
|
|
72375
|
+
'css': 'basetype-greatvibes-robotomono.css',
|
|
72376
|
+
'sectioncss': 'type-greatvibes-robotomono.css',
|
|
72377
|
+
'classname': 'type-greatvibes-robotomono',
|
|
72378
|
+
'img': '055.png',
|
|
72379
|
+
'category': 13,
|
|
72380
|
+
'default': false,
|
|
72381
|
+
'caption': 'Great Vibes & Roboto Mono'
|
|
72382
|
+
}, {
|
|
72383
|
+
'css': 'basetype-pinyonscript-firasans.css',
|
|
72384
|
+
'sectioncss': 'type-pinyonscript-firasans.css',
|
|
72385
|
+
'classname': 'type-pinyonscript-firasans',
|
|
72386
|
+
'img': '056.png',
|
|
72387
|
+
'category': 9,
|
|
72388
|
+
'default': false,
|
|
72389
|
+
'caption': 'Pinyon Script & Fira Sans'
|
|
72390
|
+
}, {
|
|
72391
|
+
'css': 'basetype-sail-rasa.css',
|
|
72392
|
+
'sectioncss': 'type-sail-rasa.css',
|
|
72393
|
+
'classname': 'type-sail-rasa',
|
|
72394
|
+
'img': '061.png',
|
|
72395
|
+
'category': 10,
|
|
72396
|
+
'default': false,
|
|
72397
|
+
'caption': 'Sail & Rasa'
|
|
72398
|
+
}, {
|
|
72399
|
+
'css': 'basetype-yesevaone-forum.css',
|
|
72400
|
+
'sectioncss': 'type-yesevaone-forum.css',
|
|
72401
|
+
'classname': 'type-yesevaone-forum',
|
|
72402
|
+
'img': '068.png',
|
|
72403
|
+
'category': 14,
|
|
72404
|
+
'default': false,
|
|
72405
|
+
'caption': 'Yeseva One & Forum'
|
|
72406
|
+
}, {
|
|
72407
|
+
'css': 'basetype-dosis-oldstandardtt.css',
|
|
72408
|
+
'sectioncss': 'type-dosis-oldstandardtt.css',
|
|
72409
|
+
'classname': 'type-dosis-oldstandardtt',
|
|
72410
|
+
'img': '074.png',
|
|
72411
|
+
'category': 1,
|
|
72412
|
+
'default': false,
|
|
72413
|
+
'caption': 'Dosis & Old Standard TT'
|
|
72414
|
+
}, {
|
|
72415
|
+
'css': 'basetype-engagement-spectral.css',
|
|
72416
|
+
'sectioncss': 'type-engagement-spectral.css',
|
|
72417
|
+
'classname': 'type-engagement-spectral',
|
|
72418
|
+
'img': '077.png',
|
|
72419
|
+
'category': 11,
|
|
72420
|
+
'default': false,
|
|
72421
|
+
'caption': 'Engagement & Spectral'
|
|
72422
|
+
}, {
|
|
72423
|
+
'css': 'basetype-dynalight-mada.css',
|
|
72424
|
+
'sectioncss': 'type-dynalight-mada.css',
|
|
72425
|
+
'classname': 'type-dynalight-mada',
|
|
72426
|
+
'img': '080.png',
|
|
72427
|
+
'category': 8,
|
|
72428
|
+
'default': false,
|
|
72429
|
+
'caption': 'Dynalight & Mada'
|
|
72430
|
+
}, {
|
|
72431
|
+
'css': 'basetype-gravitasone-nanummyeongjo.css',
|
|
72432
|
+
'sectioncss': 'type-gravitasone-nanummyeongjo.css',
|
|
72433
|
+
'classname': 'type-gravitasone-nanummyeongjo',
|
|
72434
|
+
'img': '084.png',
|
|
72435
|
+
'category': 10,
|
|
72436
|
+
'default': false,
|
|
72437
|
+
'caption': 'Gravitas One & Nanum Myeongjo'
|
|
72438
|
+
}, {
|
|
72439
|
+
'css': 'basetype-alexbrush-ibmplexsans.css',
|
|
72440
|
+
'sectioncss': 'type-alexbrush-ibmplexsans.css',
|
|
72441
|
+
'classname': 'type-alexbrush-ibmplexsans',
|
|
72442
|
+
'img': '089.png',
|
|
72443
|
+
'category': 9,
|
|
72444
|
+
'default': false,
|
|
72445
|
+
'caption': 'Alex Brush & IBM Plex Sans'
|
|
71645
72446
|
}]
|
|
71646
72447
|
}
|
|
71647
72448
|
},
|
|
@@ -71775,6 +72576,7 @@ class ContentBox {
|
|
|
71775
72576
|
snippetUrl: this.settings.snippetUrl,
|
|
71776
72577
|
snippetJSON: window.data_basic,
|
|
71777
72578
|
snippetPathReplace: this.settings.snippetPathReplace,
|
|
72579
|
+
maxColumns: 6,
|
|
71778
72580
|
slider: this.settings.slider,
|
|
71779
72581
|
onRender: this.settings.onRender,
|
|
71780
72582
|
onChange: this.settings.onChange,
|
|
@@ -71963,6 +72765,26 @@ class ContentBox {
|
|
|
71963
72765
|
pageOverlay.forEach(elm => {
|
|
71964
72766
|
elm.parentNode.removeChild(elm);
|
|
71965
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
|
+
}
|
|
71966
72788
|
});
|
|
71967
72789
|
} // init
|
|
71968
72790
|
|
|
@@ -72058,39 +72880,120 @@ class ContentBox {
|
|
|
72058
72880
|
newArea = newArea.replace(/\[%IMAGE_PATH%\]/g, designPath);
|
|
72059
72881
|
newArea = newArea.replace(/%5B%25IMAGE_PATH%25%5D/g, designPath); //If [%IMAGE_PATH%] is encoded (inside data-html)
|
|
72060
72882
|
|
|
72061
|
-
let newSection;
|
|
72883
|
+
let newSection;
|
|
72884
|
+
let arrSections = [];
|
|
72062
72885
|
|
|
72063
|
-
|
|
72064
|
-
|
|
72065
|
-
|
|
72886
|
+
if (newArea.indexOf('is-static') !== -1) {
|
|
72887
|
+
// Insert last
|
|
72888
|
+
let lastSection = dom.getLastElement(this.wrapperEl, '.is-section');
|
|
72066
72889
|
|
|
72067
|
-
|
|
72068
|
-
|
|
72069
|
-
|
|
72070
|
-
|
|
72071
|
-
|
|
72072
|
-
|
|
72073
|
-
|
|
72074
|
-
|
|
72890
|
+
if (lastSection) {
|
|
72891
|
+
dom.appendHtml(lastSection, newArea, 'afterend');
|
|
72892
|
+
newSection = lastSection.nextElementSibling;
|
|
72893
|
+
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
|
72894
|
+
|
|
72895
|
+
let nextSection = newSection.nextElementSibling;
|
|
72896
|
+
|
|
72897
|
+
if (nextSection) {
|
|
72898
|
+
let ok = nextSection.querySelector('.is-section-tool');
|
|
72899
|
+
|
|
72900
|
+
if (!ok) {
|
|
72901
|
+
arrSections.push(nextSection);
|
|
72902
|
+
}
|
|
72903
|
+
|
|
72904
|
+
nextSection = nextSection.nextElementSibling;
|
|
72905
|
+
|
|
72906
|
+
if (nextSection) {
|
|
72907
|
+
ok = nextSection.querySelector('.is-section-tool');
|
|
72908
|
+
|
|
72909
|
+
if (!ok) {
|
|
72910
|
+
arrSections.push(nextSection);
|
|
72911
|
+
}
|
|
72912
|
+
}
|
|
72913
|
+
}
|
|
72914
|
+
}
|
|
72075
72915
|
} else {
|
|
72076
|
-
|
|
72916
|
+
if (this.activeSection) {
|
|
72917
|
+
let activeSection = this.activeSection;
|
|
72077
72918
|
|
|
72078
|
-
|
|
72079
|
-
|
|
72080
|
-
|
|
72919
|
+
if (dom.hasClass(activeSection, 'is-static')) {
|
|
72920
|
+
// Insert before
|
|
72921
|
+
dom.appendHtml(activeSection, newArea, 'beforebegin');
|
|
72922
|
+
newSection = activeSection.previousElementSibling;
|
|
72923
|
+
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
|
72924
|
+
|
|
72925
|
+
let prevSection = newSection.previousElementSibling;
|
|
72926
|
+
|
|
72927
|
+
if (prevSection) {
|
|
72928
|
+
let ok = prevSection.querySelector('.is-section-tool');
|
|
72929
|
+
|
|
72930
|
+
if (!ok) {
|
|
72931
|
+
arrSections.push(prevSection);
|
|
72932
|
+
}
|
|
72933
|
+
|
|
72934
|
+
prevSection = prevSection.previousElementSibling;
|
|
72935
|
+
|
|
72936
|
+
if (prevSection) {
|
|
72937
|
+
ok = prevSection.querySelector('.is-section-tool');
|
|
72938
|
+
|
|
72939
|
+
if (!ok) {
|
|
72940
|
+
arrSections.push(prevSection);
|
|
72941
|
+
}
|
|
72942
|
+
}
|
|
72943
|
+
}
|
|
72944
|
+
} else {
|
|
72945
|
+
// Insert afer
|
|
72946
|
+
dom.appendHtml(activeSection, newArea, 'afterend');
|
|
72947
|
+
newSection = activeSection.nextElementSibling;
|
|
72948
|
+
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
|
72949
|
+
|
|
72950
|
+
let nextSection = newSection.nextElementSibling;
|
|
72951
|
+
|
|
72952
|
+
if (nextSection) {
|
|
72953
|
+
let ok = nextSection.querySelector('.is-section-tool');
|
|
72954
|
+
|
|
72955
|
+
if (!ok) {
|
|
72956
|
+
arrSections.push(nextSection);
|
|
72957
|
+
}
|
|
72958
|
+
|
|
72959
|
+
nextSection = nextSection.nextElementSibling;
|
|
72960
|
+
|
|
72961
|
+
if (nextSection) {
|
|
72962
|
+
ok = nextSection.querySelector('.is-section-tool');
|
|
72963
|
+
|
|
72964
|
+
if (!ok) {
|
|
72965
|
+
arrSections.push(nextSection);
|
|
72966
|
+
}
|
|
72967
|
+
}
|
|
72968
|
+
}
|
|
72969
|
+
}
|
|
72081
72970
|
} else {
|
|
72082
|
-
// Insert the new section at the begining inside wrapper
|
|
72083
72971
|
dom.appendHtml(this.wrapperEl, newArea, 'afterbegin');
|
|
72084
|
-
|
|
72972
|
+
newSection = this.wrapperEl.querySelector('.is-section');
|
|
72973
|
+
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
|
72085
72974
|
|
|
72086
|
-
|
|
72087
|
-
|
|
72088
|
-
|
|
72089
|
-
|
|
72090
|
-
|
|
72975
|
+
let nextSection = newSection.nextElementSibling;
|
|
72976
|
+
|
|
72977
|
+
if (nextSection) {
|
|
72978
|
+
let ok = nextSection.querySelector('.is-section-tool');
|
|
72979
|
+
|
|
72980
|
+
if (!ok) {
|
|
72981
|
+
arrSections.push(nextSection);
|
|
72982
|
+
}
|
|
72983
|
+
|
|
72984
|
+
nextSection = nextSection.nextElementSibling;
|
|
72985
|
+
|
|
72986
|
+
if (nextSection) {
|
|
72987
|
+
ok = nextSection.querySelector('.is-section-tool');
|
|
72988
|
+
|
|
72989
|
+
if (!ok) {
|
|
72990
|
+
arrSections.push(nextSection);
|
|
72991
|
+
}
|
|
72992
|
+
}
|
|
72993
|
+
}
|
|
72994
|
+
}
|
|
72091
72995
|
}
|
|
72092
72996
|
|
|
72093
|
-
let arrSections = [];
|
|
72094
72997
|
arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
|
|
72095
72998
|
|
|
72096
72999
|
let prevSection = newSection.previousElementSibling;
|
|
@@ -72148,7 +73051,19 @@ class ContentBox {
|
|
|
72148
73051
|
});
|
|
72149
73052
|
}
|
|
72150
73053
|
});
|
|
72151
|
-
this.editor.applyBehavior(); //
|
|
73054
|
+
this.editor.applyBehavior(); // Re-apply
|
|
73055
|
+
|
|
73056
|
+
this.settings.onRender();
|
|
73057
|
+
const scrollButton = this.wrapperEl.querySelectorAll('.is-arrow-down a');
|
|
73058
|
+
scrollButton.forEach(btn => {
|
|
73059
|
+
btn.addEventListener('click', e => {
|
|
73060
|
+
let section = btn.parentNode.parentNode;
|
|
73061
|
+
this.scrollTo(section.nextElementSibling);
|
|
73062
|
+
e.preventDefault();
|
|
73063
|
+
e.stopImmediatePropagation();
|
|
73064
|
+
return false;
|
|
73065
|
+
});
|
|
73066
|
+
}); //Trigger Change event
|
|
72152
73067
|
|
|
72153
73068
|
this.onChange();
|
|
72154
73069
|
dom.removeElement(document.querySelector('.is-sidebar-overlay'));
|
|
@@ -72418,6 +73333,19 @@ class ContentBox {
|
|
|
72418
73333
|
|
|
72419
73334
|
this.pageSetup();
|
|
72420
73335
|
this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
|
|
73336
|
+
// Re-apply
|
|
73337
|
+
|
|
73338
|
+
this.settings.onRender();
|
|
73339
|
+
const scrollButton = wrapper.querySelectorAll('.is-arrow-down a');
|
|
73340
|
+
scrollButton.forEach(btn => {
|
|
73341
|
+
btn.addEventListener('click', e => {
|
|
73342
|
+
let section = btn.parentNode.parentNode;
|
|
73343
|
+
this.scrollTo(section.nextElementSibling);
|
|
73344
|
+
e.preventDefault();
|
|
73345
|
+
e.stopImmediatePropagation();
|
|
73346
|
+
return false;
|
|
73347
|
+
});
|
|
73348
|
+
});
|
|
72421
73349
|
}
|
|
72422
73350
|
|
|
72423
73351
|
boxImage(url) {
|