@innovastudio/contentbox 1.4.24 → 1.4.26
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.
|
@@ -446,7 +446,7 @@ class SideBar {
|
|
|
446
446
|
this.builderStuff = builderStuff;
|
|
447
447
|
|
|
448
448
|
if (this.builder.useSidebar) {
|
|
449
|
-
html += '<div class="is-sidebar active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
|
|
449
|
+
html += '<div class="is-sidebar is-area active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';
|
|
450
450
|
var sideIndex = 0;
|
|
451
451
|
this.builder.sidebarData.buttons.map(button => {
|
|
452
452
|
if (button.name == 'section') {
|
|
@@ -490,7 +490,7 @@ class SideBar {
|
|
|
490
490
|
if (sideIndex == btn.pos) {
|
|
491
491
|
var panelId = dom$l.uniqueId();
|
|
492
492
|
html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
493
|
-
let panelHtml = '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
493
|
+
let panelHtml = '<div id="' + panelId + '" class="is-sidebar-content is-area-2nd ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
494
494
|
dom$l.appendHtml(builderStuff, panelHtml);
|
|
495
495
|
}
|
|
496
496
|
});
|
|
@@ -499,7 +499,7 @@ class SideBar {
|
|
|
499
499
|
sideIndex++;
|
|
500
500
|
});
|
|
501
501
|
html += '</div>';
|
|
502
|
-
html += '' + '<div id="divSidebarSections" class="is-sidebar-content ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
502
|
+
html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
503
503
|
} else {
|
|
504
504
|
html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
|
|
505
505
|
}
|
|
@@ -1272,6 +1272,9 @@ class SideBar {
|
|
|
1272
1272
|
transition: all 0.2s ease-in-out;
|
|
1273
1273
|
opacity: 0;
|
|
1274
1274
|
}
|
|
1275
|
+
.dark .is-design-list > button .is-overlay:after {
|
|
1276
|
+
opacity: 0.97;
|
|
1277
|
+
}
|
|
1275
1278
|
.is-design-list > button:hover .is-overlay:after {
|
|
1276
1279
|
opacity: 0.5;
|
|
1277
1280
|
}
|
|
@@ -1403,6 +1406,84 @@ class SideBar {
|
|
|
1403
1406
|
transform: rotate(450deg);
|
|
1404
1407
|
}
|
|
1405
1408
|
}
|
|
1409
|
+
|
|
1410
|
+
|
|
1411
|
+
|
|
1412
|
+
|
|
1413
|
+
body {
|
|
1414
|
+
margin: 0;
|
|
1415
|
+
}
|
|
1416
|
+
.dark .is-design-list > button {
|
|
1417
|
+
border: none;
|
|
1418
|
+
}
|
|
1419
|
+
.dark .path,
|
|
1420
|
+
.colored .path,
|
|
1421
|
+
.colored-dark .path {
|
|
1422
|
+
stroke: #b3b3b3;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* Scrollbar for modal */
|
|
1426
|
+
|
|
1427
|
+
/* Darker color, because background for snippet thumbnails is always light. */
|
|
1428
|
+
.dark * {
|
|
1429
|
+
scrollbar-width: thin;
|
|
1430
|
+
scrollbar-color: rgb(78 78 78 / 62%) auto;
|
|
1431
|
+
}
|
|
1432
|
+
.dark *::-webkit-scrollbar {
|
|
1433
|
+
width: 12px;
|
|
1434
|
+
}
|
|
1435
|
+
.dark *::-webkit-scrollbar-track {
|
|
1436
|
+
background: transparent;
|
|
1437
|
+
}
|
|
1438
|
+
.dark *::-webkit-scrollbar-thumb {
|
|
1439
|
+
background-color:rgb(78 78 78 / 62%);
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
.colored-dark * {
|
|
1443
|
+
scrollbar-width: thin;
|
|
1444
|
+
scrollbar-color: rgb(100, 100, 100) auto;
|
|
1445
|
+
}
|
|
1446
|
+
.colored-dark *::-webkit-scrollbar {
|
|
1447
|
+
width: 12px;
|
|
1448
|
+
}
|
|
1449
|
+
.colored-dark *::-webkit-scrollbar-track {
|
|
1450
|
+
background: transparent;
|
|
1451
|
+
}
|
|
1452
|
+
.colored-dark *::-webkit-scrollbar-thumb {
|
|
1453
|
+
background-color:rgb(100, 100, 100);
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.colored * {
|
|
1457
|
+
scrollbar-width: thin;
|
|
1458
|
+
scrollbar-color: rgba(0, 0, 0, 0.4) auto;
|
|
1459
|
+
}
|
|
1460
|
+
.colored *::-webkit-scrollbar {
|
|
1461
|
+
width: 12px;
|
|
1462
|
+
}
|
|
1463
|
+
.colored *::-webkit-scrollbar-track {
|
|
1464
|
+
background: transparent;
|
|
1465
|
+
}
|
|
1466
|
+
.colored *::-webkit-scrollbar-thumb {
|
|
1467
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
.light * {
|
|
1471
|
+
scrollbar-width: thin;
|
|
1472
|
+
scrollbar-color: rgba(0, 0, 0, 0.4) auto;
|
|
1473
|
+
}
|
|
1474
|
+
.light *::-webkit-scrollbar {
|
|
1475
|
+
width: 12px;
|
|
1476
|
+
}
|
|
1477
|
+
.light *::-webkit-scrollbar-track {
|
|
1478
|
+
background: transparent;
|
|
1479
|
+
}
|
|
1480
|
+
.light *::-webkit-scrollbar-thumb {
|
|
1481
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1484
|
+
.dark .is-design-list>div .is-overlay:after {
|
|
1485
|
+
background: rgb(78 78 78 / 13%);
|
|
1486
|
+
}
|
|
1406
1487
|
</style>
|
|
1407
1488
|
</head>
|
|
1408
1489
|
<body style="touch-action: pan-y">`;
|
|
@@ -1422,7 +1503,7 @@ class SideBar {
|
|
|
1422
1503
|
</div>
|
|
1423
1504
|
</div>
|
|
1424
1505
|
|
|
1425
|
-
<div class="featured-categories">
|
|
1506
|
+
<div class="featured-categories tabs">
|
|
1426
1507
|
</div>
|
|
1427
1508
|
|
|
1428
1509
|
<div class="is-design-list">
|
|
@@ -2022,107 +2103,57 @@ class SideBar {
|
|
|
2022
2103
|
// Style stuff
|
|
2023
2104
|
function applyParentStyles() {
|
|
2024
2105
|
var cssString = '' +
|
|
2025
|
-
'
|
|
2026
|
-
'
|
|
2027
|
-
'
|
|
2028
|
-
'
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
'background: ' + parent._cb.styleSnippetTabItemBackground + ';' +
|
|
2033
|
-
'
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
'
|
|
2037
|
-
|
|
2038
|
-
'.featured-categories {' +
|
|
2039
|
-
'background-color: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2040
|
-
'}' +
|
|
2041
|
-
|
|
2042
|
-
'.dark .is-design-list > button {' +
|
|
2043
|
-
'border: transparent 1px solid;' +
|
|
2044
|
-
'}' +
|
|
2045
|
-
|
|
2046
|
-
'.mega-menu {' +
|
|
2047
|
-
'background: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2048
|
-
'}' +
|
|
2049
|
-
|
|
2050
|
-
'.is-waiting {' +
|
|
2051
|
-
'background: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2106
|
+
'html {' +
|
|
2107
|
+
'--area-color: ' + parent._cb.styleModalColor + ';' +
|
|
2108
|
+
'--area-background: ' + parent._cb.styleModalBackground + ';' +
|
|
2109
|
+
'--area2-color: ' + parent._cb.styleSnippetColor + ';' +
|
|
2110
|
+
'--area2-background: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2111
|
+
'--tabs-background: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2112
|
+
'--tab-item-color: ' + parent._cb.styleSnippetTabItemColor + ';' +
|
|
2113
|
+
'--tab-item-background: ' + parent._cb.styleSnippetTabItemBackground + ';' +
|
|
2114
|
+
'--tab-item-active: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +
|
|
2115
|
+
'--tab-item-hover: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +
|
|
2116
|
+
'--mega-menu: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2117
|
+
'--is-waiting: ' + parent._cb.styleSnippetBackground + ';' +
|
|
2118
|
+
'--is-waiting2: ' + parent._cb.styleSnippetTabsBackground + ';' +
|
|
2052
2119
|
'}' +
|
|
2053
|
-
'.
|
|
2054
|
-
'
|
|
2120
|
+
'.area2 {' +
|
|
2121
|
+
'color: var(--area2-color);' +
|
|
2122
|
+
'background: var(--area2-background);' +
|
|
2055
2123
|
'}' +
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
'stroke: #b3b3b3;' +
|
|
2124
|
+
'.area2 button {' +
|
|
2125
|
+
'color: var(--area2-color);' +
|
|
2059
2126
|
'}' +
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
'/* Darker color, because background for snippet thumbnails is always light. */' +
|
|
2064
|
-
'.dark * {' +
|
|
2065
|
-
'scrollbar-width: thin;' +
|
|
2066
|
-
'scrollbar-color: rgb(78 78 78 / 62%) auto;' +
|
|
2127
|
+
'.area2 button svg{' +
|
|
2128
|
+
'fill: var(--area2-color);' +
|
|
2067
2129
|
'}' +
|
|
2068
|
-
'.
|
|
2069
|
-
'
|
|
2130
|
+
'.tabs {' +
|
|
2131
|
+
'background: var(--tabs-background);' +
|
|
2070
2132
|
'}' +
|
|
2071
|
-
'.
|
|
2072
|
-
'
|
|
2133
|
+
'.tabs button, .mega-menu button {' +
|
|
2134
|
+
'color: var(--tab-item-color);' +
|
|
2135
|
+
'background: var(--tab-item-background);' +
|
|
2073
2136
|
'}' +
|
|
2074
|
-
'.
|
|
2075
|
-
'background
|
|
2137
|
+
'.tabs button.on, .mega-menu button.on {' +
|
|
2138
|
+
'background: var(--tab-item-active);' +
|
|
2076
2139
|
'}' +
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
'scrollbar-width: thin;' +
|
|
2080
|
-
'scrollbar-color: rgb(100, 100, 100) auto;' +
|
|
2081
|
-
'}' +
|
|
2082
|
-
'.colored-dark *::-webkit-scrollbar {' +
|
|
2083
|
-
'width: 12px;' +
|
|
2140
|
+
'.tabs button.on:hover, .mega-menu button.on:hover {' +
|
|
2141
|
+
'background: var(--tab-item-active);' +
|
|
2084
2142
|
'}' +
|
|
2085
|
-
'.
|
|
2086
|
-
'background:
|
|
2143
|
+
'.tabs button:hover, .mega-menu button:hover {' +
|
|
2144
|
+
'background: var(--tab-item-hover);' +
|
|
2087
2145
|
'}' +
|
|
2088
|
-
'.
|
|
2089
|
-
'background
|
|
2090
|
-
'}' +
|
|
2091
|
-
|
|
2092
|
-
'.colored * {' +
|
|
2093
|
-
'scrollbar-width: thin;' +
|
|
2094
|
-
'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
|
|
2095
|
-
'}' +
|
|
2096
|
-
'.colored *::-webkit-scrollbar {' +
|
|
2097
|
-
'width: 12px;' +
|
|
2098
|
-
'}' +
|
|
2099
|
-
'.colored *::-webkit-scrollbar-track {' +
|
|
2100
|
-
'background: transparent;' +
|
|
2101
|
-
'}' +
|
|
2102
|
-
'.colored *::-webkit-scrollbar-thumb {' +
|
|
2103
|
-
'background-color: rgba(0, 0, 0, 0.4);' +
|
|
2104
|
-
'}' +
|
|
2105
|
-
|
|
2106
|
-
'.light * {' +
|
|
2107
|
-
'scrollbar-width: thin;' +
|
|
2108
|
-
'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +
|
|
2109
|
-
'}' +
|
|
2110
|
-
'.light *::-webkit-scrollbar {' +
|
|
2111
|
-
'width: 12px;' +
|
|
2112
|
-
'}' +
|
|
2113
|
-
'.light *::-webkit-scrollbar-track {' +
|
|
2114
|
-
'background: transparent;' +
|
|
2146
|
+
'.mega-menu {' +
|
|
2147
|
+
'background: var(--mega-menu);' +
|
|
2115
2148
|
'}' +
|
|
2116
|
-
'.
|
|
2117
|
-
'background
|
|
2149
|
+
'.mega-menu button.close:hover {' +
|
|
2150
|
+
'background: var(--mega-menu);' +
|
|
2118
2151
|
'}' +
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
'fill: ' + parent._cb.styleSnippetColor + ';' +
|
|
2152
|
+
'.is-waiting {' +
|
|
2153
|
+
'background: var(--is-waiting);' +
|
|
2122
2154
|
'}' +
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
'background: rgb(78 78 78 / 13%);' +
|
|
2155
|
+
'.is-waiting2 {' +
|
|
2156
|
+
'background: var(--is-waiting2);' +
|
|
2126
2157
|
'}' +
|
|
2127
2158
|
'';
|
|
2128
2159
|
|
|
@@ -2146,6 +2177,8 @@ class SideBar {
|
|
|
2146
2177
|
} else {
|
|
2147
2178
|
document.body.setAttribute('class', '');
|
|
2148
2179
|
}
|
|
2180
|
+
|
|
2181
|
+
document.body.classList.add('area2');
|
|
2149
2182
|
}
|
|
2150
2183
|
</script>
|
|
2151
2184
|
</body>
|
|
@@ -3671,10 +3704,10 @@ class EditSection {
|
|
|
3671
3704
|
let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
|
|
3672
3705
|
html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">↑</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">↓</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇤</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇥</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
|
|
3673
3706
|
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
3674
|
-
html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:
|
|
3707
|
+
html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
|
|
3675
3708
|
'<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
3676
3709
|
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
3677
|
-
html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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>' + '' + '';
|
|
3710
|
+
html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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;"><span>' + out('Module Settings') + '</span>' + '<button class="is-modal-close" tabindex="-1" title="' + out('Close') + '">' + '<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>' + '</button>' + '</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>' + '' + '';
|
|
3678
3711
|
dom$k.appendHtml(builderStuff, html);
|
|
3679
3712
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
3680
3713
|
this.modalEditSection = modalEditSection;
|
|
@@ -3701,7 +3734,8 @@ class EditSection {
|
|
|
3701
3734
|
btnOk.addEventListener('click', () => {
|
|
3702
3735
|
const activeSection = this.builder.activeSection;
|
|
3703
3736
|
this.builder.editor.saveForUndo();
|
|
3704
|
-
activeSection.parentNode.removeChild(activeSection);
|
|
3737
|
+
activeSection.parentNode.removeChild(activeSection);
|
|
3738
|
+
this.builder.sectionStack(); //Trigger Render event
|
|
3705
3739
|
|
|
3706
3740
|
this.builder.settings.onRender();
|
|
3707
3741
|
this.builder.editor.util.hideModal(modalDelConfirm);
|
|
@@ -3719,35 +3753,40 @@ class EditSection {
|
|
|
3719
3753
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
|
3720
3754
|
btnSectionUp.addEventListener('click', () => {
|
|
3721
3755
|
this.builder.editor.saveForUndo();
|
|
3722
|
-
this.sectionUp();
|
|
3756
|
+
this.sectionUp();
|
|
3757
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3723
3758
|
|
|
3724
3759
|
this.builder.settings.onChange();
|
|
3725
3760
|
});
|
|
3726
3761
|
const btnSectionDown = modalEditSection.querySelector('.cmd-section-down');
|
|
3727
3762
|
btnSectionDown.addEventListener('click', () => {
|
|
3728
3763
|
this.builder.editor.saveForUndo();
|
|
3729
|
-
this.sectionDown();
|
|
3764
|
+
this.sectionDown();
|
|
3765
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3730
3766
|
|
|
3731
3767
|
this.builder.settings.onChange();
|
|
3732
3768
|
});
|
|
3733
3769
|
const btnSectionTop = modalEditSection.querySelector('.cmd-section-top');
|
|
3734
3770
|
btnSectionTop.addEventListener('click', () => {
|
|
3735
3771
|
this.builder.editor.saveForUndo();
|
|
3736
|
-
this.sectionTop();
|
|
3772
|
+
this.sectionTop();
|
|
3773
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3737
3774
|
|
|
3738
3775
|
this.builder.settings.onChange();
|
|
3739
3776
|
});
|
|
3740
3777
|
const btnSectionBottom = modalEditSection.querySelector('.cmd-section-bottom');
|
|
3741
3778
|
btnSectionBottom.addEventListener('click', () => {
|
|
3742
3779
|
this.builder.editor.saveForUndo();
|
|
3743
|
-
this.sectionBottom();
|
|
3780
|
+
this.sectionBottom();
|
|
3781
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3744
3782
|
|
|
3745
3783
|
this.builder.settings.onChange();
|
|
3746
3784
|
});
|
|
3747
3785
|
const btnSectionDuplicate = modalEditSection.querySelector('.cmd-section-duplicate');
|
|
3748
3786
|
btnSectionDuplicate.addEventListener('click', () => {
|
|
3749
3787
|
this.builder.editor.saveForUndo();
|
|
3750
|
-
this.sectionDuplicate();
|
|
3788
|
+
this.sectionDuplicate();
|
|
3789
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3751
3790
|
|
|
3752
3791
|
this.builder.settings.onChange();
|
|
3753
3792
|
});
|
|
@@ -4413,6 +4452,8 @@ class EditSection {
|
|
|
4413
4452
|
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4414
4453
|
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4415
4454
|
}
|
|
4455
|
+
|
|
4456
|
+
this.builder.sectionStack();
|
|
4416
4457
|
}
|
|
4417
4458
|
|
|
4418
4459
|
sectionUseScroll() {
|
|
@@ -10024,11 +10065,17 @@ class EditBox {
|
|
|
10024
10065
|
// '<button id="btnEditModule" tabindex="-1" 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>' +
|
|
10025
10066
|
// '</div>';
|
|
10026
10067
|
|
|
10068
|
+
html += `
|
|
10069
|
+
<form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-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);">
|
|
10070
|
+
<input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
10071
|
+
<input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
|
|
10072
|
+
</form>
|
|
10073
|
+
`;
|
|
10027
10074
|
html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
|
|
10028
|
-
html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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;" data-group="boxsettings">' + '<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 active" 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>';
|
|
10075
|
+
html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<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;" data-group="boxsettings">' + '<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 active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<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="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
|
|
10029
10076
|
html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': <span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</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="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></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>';
|
|
10030
|
-
html += '<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>';
|
|
10031
|
-
html += '<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_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="
|
|
10077
|
+
html += '<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('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</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>';
|
|
10078
|
+
html += '<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%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" 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" tabindex="-1" 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>';
|
|
10032
10079
|
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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>';
|
|
10033
10080
|
html += '<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>' + '</div>' + '</div>' + '<div style="padding-top:27px;">' + out('Default Text Formatting') + ':</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">' + out('Alignment') + ':</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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div id="divContainerParagraphSize" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div>' + '<div style="display:flex">' + '<button title="' + out('16') + '" class="cmd-box-parasize" data-value="16" style="width:40px">16</button>' + '<button title="' + out('17') + '" class="cmd-box-parasize" data-value="17" style="width:40px">17</button>' + '<button title="' + out('18') + '" class="cmd-box-parasize" data-value="18" style="width:40px">18</button>' + '<button title="' + out('19') + '" class="cmd-box-parasize" data-value="19" style="width:40px">19</button>' + '<button title="' + out('20') + '" class="cmd-box-parasize" data-value="20" style="width:40px">20</button>' + '<button title="' + out('21') + '" class="cmd-box-parasize" data-value="21" style="width:40px">21</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-parasize" data-value="" style="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Auto adjust text size on large screen.') + '</label>' + '</div>' + '<div id="divContainerLineHeight" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div>' + '<div style="display:flex;flex-flow: wrap;width: 290px;">' + '<button title="' + out('1') + '" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button>' + '<button title="' + out('1.1') + '" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button>' + '<button title="' + out('1.2') + '" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button>' + '<button title="' + out('1.3') + '" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button>' + '<button title="' + out('1.4') + '" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button>' + '<button title="' + out('1.5') + '" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button>' + '<button title="' + out('1.6') + '" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button>' + '<button title="' + out('1.7') + '" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button>' + '<button title="' + out('1.8') + '" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button>' + '<button title="' + out('1.9') + '" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button>' + '<button title="' + out('2') + '" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-lineheight" data-value="" style="">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
10034
10081
|
html += (this.builder.settings.enableContentStyle ? '<div style="padding-top:10px;display:flex;flex-direction: column;">' + // '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
|
|
@@ -10091,6 +10138,67 @@ class EditBox {
|
|
|
10091
10138
|
this.modalEditBox = modalEditBox;
|
|
10092
10139
|
const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
|
|
10093
10140
|
const modalEditModule = builderStuff.querySelector('.is-modal.editmodule');
|
|
10141
|
+
const divBoxClick = modalEditBox.querySelector('#divBoxClick');
|
|
10142
|
+
this.divBoxClick = divBoxClick;
|
|
10143
|
+
const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
|
|
10144
|
+
this.divBoxGeneral = divBoxGeneral; // ------ Box Cover Upload -------
|
|
10145
|
+
|
|
10146
|
+
let fileCover = builderStuff.querySelector('.input-file-cover-central');
|
|
10147
|
+
|
|
10148
|
+
if (this.builder.iframe) {
|
|
10149
|
+
fileCover = this.builder.contentStuff.querySelector('.input-file-cover-central');
|
|
10150
|
+
}
|
|
10151
|
+
|
|
10152
|
+
if (fileCover) fileCover.addEventListener('click', () => {
|
|
10153
|
+
this.targetBox = this.builder.activeBox;
|
|
10154
|
+
});
|
|
10155
|
+
if (fileCover) fileCover.addEventListener('change', e => {
|
|
10156
|
+
if (fileCover.value === '') return;
|
|
10157
|
+
this.builder.editor.saveForUndo(); // Show Waiting Indicator
|
|
10158
|
+
|
|
10159
|
+
const builderStuff = this.builderStuff;
|
|
10160
|
+
dom$j.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
10161
|
+
<div class="waiting-indicator">
|
|
10162
|
+
<div>${out('Uploading..')}</div>
|
|
10163
|
+
</div>
|
|
10164
|
+
`);
|
|
10165
|
+
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
10166
|
+
let targetBox = this.targetBox;
|
|
10167
|
+
let top, left;
|
|
10168
|
+
|
|
10169
|
+
if (!this.builder.iframe) {
|
|
10170
|
+
top = targetBox.getBoundingClientRect().top + window.pageYOffset;
|
|
10171
|
+
left = targetBox.getBoundingClientRect().left + window.pageXOffset;
|
|
10172
|
+
indicator.style.top = top + 'px';
|
|
10173
|
+
indicator.style.left = left + 'px';
|
|
10174
|
+
} else {
|
|
10175
|
+
// let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
10176
|
+
// let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
10177
|
+
// top = targetBox.getBoundingClientRect().top + adjY;
|
|
10178
|
+
// left = targetBox.getBoundingClientRect().left + adjX;
|
|
10179
|
+
// indicator.style.top = top + 'px';
|
|
10180
|
+
// indicator.style.left = left + 'px';
|
|
10181
|
+
indicator.style.top = '0';
|
|
10182
|
+
indicator.style.left = 'calc(50% - 68px)';
|
|
10183
|
+
} // builderStuff.querySelector('.input-custom-value-central').value = this.builder.settings.customval;
|
|
10184
|
+
|
|
10185
|
+
|
|
10186
|
+
if (this.builder.settings.onUploadCoverImage) {
|
|
10187
|
+
this.builder.settings.onUploadCoverImage(e);
|
|
10188
|
+
} else {
|
|
10189
|
+
if (!this.builder.iframe) {
|
|
10190
|
+
builderStuff.querySelector('.is-cover-upload-central').submit();
|
|
10191
|
+
} else {
|
|
10192
|
+
this.builder.contentStuff.querySelector('.is-cover-upload-central').submit();
|
|
10193
|
+
}
|
|
10194
|
+
}
|
|
10195
|
+
|
|
10196
|
+
fileCover.value = ''; // Clear Input
|
|
10197
|
+
|
|
10198
|
+
e.preventDefault();
|
|
10199
|
+
e.stopImmediatePropagation();
|
|
10200
|
+
}); // /------ Box Cover Upload -------
|
|
10201
|
+
|
|
10094
10202
|
new Tabs$1(modalEditBox); // Backward compatibility
|
|
10095
10203
|
|
|
10096
10204
|
let s = '<div class="feature-master-style"></div>';
|
|
@@ -10138,6 +10246,44 @@ class EditBox {
|
|
|
10138
10246
|
|
|
10139
10247
|
this.builder.settings.onChange();
|
|
10140
10248
|
});
|
|
10249
|
+
const btnBoxLeft = modalEditBox.querySelector('.cmd-box-left');
|
|
10250
|
+
btnBoxLeft.addEventListener('click', () => {
|
|
10251
|
+
this.builder.editor.saveForUndo();
|
|
10252
|
+
let activeBox = this.builder.activeBox;
|
|
10253
|
+
let currPrev = activeBox.previousElementSibling;
|
|
10254
|
+
|
|
10255
|
+
if (currPrev) {
|
|
10256
|
+
while (!dom$j.hasClass(currPrev, 'is-box')) {
|
|
10257
|
+
if (!currPrev.previousElementSibling) break;
|
|
10258
|
+
currPrev = currPrev.previousElementSibling;
|
|
10259
|
+
}
|
|
10260
|
+
}
|
|
10261
|
+
|
|
10262
|
+
if (currPrev) {
|
|
10263
|
+
activeBox.parentNode.insertBefore(activeBox, currPrev); //Trigger Change event
|
|
10264
|
+
|
|
10265
|
+
this.builder.settings.onChange();
|
|
10266
|
+
}
|
|
10267
|
+
});
|
|
10268
|
+
const btnBoxRight = modalEditBox.querySelector('.cmd-box-right');
|
|
10269
|
+
btnBoxRight.addEventListener('click', () => {
|
|
10270
|
+
this.builder.editor.saveForUndo();
|
|
10271
|
+
let activeBox = this.builder.activeBox;
|
|
10272
|
+
let currNext = activeBox.nextElementSibling;
|
|
10273
|
+
|
|
10274
|
+
if (currNext) {
|
|
10275
|
+
while (!dom$j.hasClass(currNext, 'is-box')) {
|
|
10276
|
+
if (!currNext.nextElementSibling) break;
|
|
10277
|
+
currNext = currNext.previousElementSibling;
|
|
10278
|
+
}
|
|
10279
|
+
}
|
|
10280
|
+
|
|
10281
|
+
if (currNext) {
|
|
10282
|
+
activeBox.parentNode.insertBefore(currNext, activeBox); //Trigger Change event
|
|
10283
|
+
|
|
10284
|
+
this.builder.settings.onChange();
|
|
10285
|
+
}
|
|
10286
|
+
});
|
|
10141
10287
|
const btnBoxTextColors = modalEditBox.querySelectorAll('.cmd-box-textcolor');
|
|
10142
10288
|
btnBoxTextColors.forEach(btnBoxTextColor => {
|
|
10143
10289
|
btnBoxTextColor.addEventListener('click', () => {
|
|
@@ -11420,7 +11566,11 @@ class EditBox {
|
|
|
11420
11566
|
}
|
|
11421
11567
|
|
|
11422
11568
|
if (!onImageSelectClick && imageselect === '') {
|
|
11423
|
-
|
|
11569
|
+
this.divBoxClick.querySelector('.input-select').style.display = 'none';
|
|
11570
|
+
}
|
|
11571
|
+
|
|
11572
|
+
if (!onImageSelectClick && imageselect === '') {
|
|
11573
|
+
this.divBoxGeneral.querySelector('.input-select').style.display = 'none';
|
|
11424
11574
|
} // Select image (opens Asset Manager plugin or custom dialog)
|
|
11425
11575
|
|
|
11426
11576
|
|
|
@@ -11444,12 +11594,37 @@ class EditBox {
|
|
|
11444
11594
|
}
|
|
11445
11595
|
|
|
11446
11596
|
if (onImageSelectClick || imageselect || onFileSelectClick || fileselect) {
|
|
11447
|
-
const elm =
|
|
11597
|
+
const elm = this.divBoxClick.querySelector('.input-select');
|
|
11448
11598
|
if (elm) elm.addEventListener('click', () => {
|
|
11449
11599
|
this.builder.editor.openAsset(modalEditBox.querySelector('.input-src'), 'media', elm);
|
|
11450
11600
|
});
|
|
11451
11601
|
}
|
|
11452
11602
|
|
|
11603
|
+
if (onImageSelectClick || imageselect) {
|
|
11604
|
+
const btnSelectBoxBgImage = this.divBoxGeneral.querySelector('.input-select');
|
|
11605
|
+
this.builder.editor.renderSelectAsset(btnSelectBoxBgImage, 'image', url => {
|
|
11606
|
+
this.boxImage(url);
|
|
11607
|
+
const activeBox = this.builder.activeBox;
|
|
11608
|
+
const overlay = activeBox.querySelector('.is-overlay');
|
|
11609
|
+
const overlayBg = activeBox.querySelector('.is-overlay-bg'); // Reset position & filter (grayscale)
|
|
11610
|
+
|
|
11611
|
+
overlayBg.style.filter = '';
|
|
11612
|
+
overlay.style.filter = '';
|
|
11613
|
+
const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
11614
|
+
chkBoxBgImageGrayscale.checked = false;
|
|
11615
|
+
overlayBg.style.backgroundPosition = '50% 60%';
|
|
11616
|
+
overlayBg.removeAttribute('data-scale');
|
|
11617
|
+
overlayBg.removeAttribute('data-x');
|
|
11618
|
+
overlayBg.removeAttribute('data-y');
|
|
11619
|
+
overlayBg.style.top = '';
|
|
11620
|
+
overlayBg.style.bottom = '';
|
|
11621
|
+
overlayBg.style.left = '';
|
|
11622
|
+
overlayBg.style.right = '';
|
|
11623
|
+
overlayBg.style.width = '';
|
|
11624
|
+
overlayBg.style.height = ''; // /Reset
|
|
11625
|
+
});
|
|
11626
|
+
}
|
|
11627
|
+
|
|
11453
11628
|
let fileLargerImage = modalEditBox.querySelector('#fileImage5');
|
|
11454
11629
|
fileLargerImage.addEventListener('change', e => {
|
|
11455
11630
|
let element = fileLargerImage;
|
|
@@ -11707,8 +11882,10 @@ class EditBox {
|
|
|
11707
11882
|
|
|
11708
11883
|
if (dom$j.hasClass(activeBox, 'is-section')) {
|
|
11709
11884
|
modalEditBox.querySelector('#divBoxSize').style.display = 'none';
|
|
11885
|
+
modalEditBox.querySelector('#divBoxMove').style.display = 'none';
|
|
11710
11886
|
} else {
|
|
11711
11887
|
modalEditBox.querySelector('#divBoxSize').style.display = 'block';
|
|
11888
|
+
modalEditBox.querySelector('#divBoxMove').style.display = 'block';
|
|
11712
11889
|
}
|
|
11713
11890
|
|
|
11714
11891
|
modalEditBox.querySelector('#chkParallaxContent').checked = false;
|
|
@@ -12191,7 +12368,7 @@ class EditBox {
|
|
|
12191
12368
|
doc.open();
|
|
12192
12369
|
doc.write(result);
|
|
12193
12370
|
doc.close();
|
|
12194
|
-
this.builder.showModal(modalEditModule);
|
|
12371
|
+
this.builder.showModal(modalEditModule, true);
|
|
12195
12372
|
setTimeout(() => {
|
|
12196
12373
|
iframe.style.opacity = 1;
|
|
12197
12374
|
}, 200);
|
|
@@ -12199,9 +12376,9 @@ class EditBox {
|
|
|
12199
12376
|
const modalBar = modalEditModule.querySelector('.is-modal-bar');
|
|
12200
12377
|
|
|
12201
12378
|
if (moduleDesc) {
|
|
12202
|
-
modalBar.innerHTML = moduleDesc;
|
|
12379
|
+
modalBar.querySelector('span').innerHTML = out(moduleDesc);
|
|
12203
12380
|
} else {
|
|
12204
|
-
modalBar.innerHTML = out('Module Settings');
|
|
12381
|
+
modalBar.querySelector('span').innerHTML = out('Module Settings');
|
|
12205
12382
|
}
|
|
12206
12383
|
|
|
12207
12384
|
let w = activeModule.getAttribute('data-dialog-width');
|
|
@@ -12218,6 +12395,12 @@ class EditBox {
|
|
|
12218
12395
|
|
|
12219
12396
|
modalEditModule.childNodes.forEach(div => {
|
|
12220
12397
|
if (!dom$j.hasClass(div, 'is-modal-overlay')) {
|
|
12398
|
+
if (moduleName === 'slider-box') {
|
|
12399
|
+
div.style.width = '1600px';
|
|
12400
|
+
w = '90vw';
|
|
12401
|
+
h = '80vh';
|
|
12402
|
+
}
|
|
12403
|
+
|
|
12221
12404
|
div.style.maxWidth = w;
|
|
12222
12405
|
div.style.height = h;
|
|
12223
12406
|
}
|
|
@@ -18741,6 +18924,124 @@ class Util {
|
|
|
18741
18924
|
}
|
|
18742
18925
|
|
|
18743
18926
|
getUIStyles() {
|
|
18927
|
+
const dom = this.dom;
|
|
18928
|
+
const html = `
|
|
18929
|
+
<input type="text" class="style-helper-input" style="display:none;">
|
|
18930
|
+
<label class="style-helper-label" style="display:none;"></label>
|
|
18931
|
+
<button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18932
|
+
<select class="style-helper-select" style="display:none;"><option value=""></option></select>
|
|
18933
|
+
|
|
18934
|
+
<div class="style-helper modal-color"></div>
|
|
18935
|
+
<div class="style-helper modal-background"></div>
|
|
18936
|
+
<div class="style-helper button-pickcolor-border"></div>
|
|
18937
|
+
<div class="style-helper button-pickcolor-background"></div>
|
|
18938
|
+
|
|
18939
|
+
<button class="style-helper base"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18940
|
+
<div class="style-helper base on"></div>
|
|
18941
|
+
<div class="style-helper base hover"></div>
|
|
18942
|
+
|
|
18943
|
+
<div class="style-helper snippet-color"></div>
|
|
18944
|
+
<div class="style-helper snippet-background"></div>
|
|
18945
|
+
<div class="style-helper snippet-tabs-background"></div>
|
|
18946
|
+
<div class="style-helper snippet-tab-item-background"></div>
|
|
18947
|
+
<div class="style-helper snippet-tab-item-background-active"></div>
|
|
18948
|
+
<div class="style-helper snippet-tab-item-background-hover"></div>
|
|
18949
|
+
<div class="style-helper snippet-tab-item-color"></div>
|
|
18950
|
+
|
|
18951
|
+
<div class="style-helper snippet-more-item-background"></div>
|
|
18952
|
+
<div class="style-helper snippet-more-item-background-active"></div>
|
|
18953
|
+
<div class="style-helper snippet-more-item-background-hover"></div>
|
|
18954
|
+
<div class="style-helper snippet-more-item-color"></div>
|
|
18955
|
+
|
|
18956
|
+
<div class="style-helper tabs-background"></div>
|
|
18957
|
+
<div class="style-helper tab-item-active-border-bottom"></div>
|
|
18958
|
+
<div class="style-helper tab-item-color"></div>
|
|
18959
|
+
<div class="style-helper tabs-more-background"></div>
|
|
18960
|
+
<div class="style-helper tabs-more-border"></div>
|
|
18961
|
+
<div class="style-helper tabs-more-item-color"></div>
|
|
18962
|
+
<div class="style-helper tabs-more-item-background-hover"></div>
|
|
18963
|
+
<div class="style-helper separator-color"></div>
|
|
18964
|
+
<div class="style-helper outline-color"></div>
|
|
18965
|
+
`;
|
|
18966
|
+
dom.appendHtml(this.builder.builderStuff, html); // new method
|
|
18967
|
+
|
|
18968
|
+
const getVal = (selector, rule) => {
|
|
18969
|
+
const stuff = this.builder.builderStuff.querySelector('.style-helper' + selector);
|
|
18970
|
+
return window.getComputedStyle(stuff, null).getPropertyValue(rule);
|
|
18971
|
+
};
|
|
18972
|
+
|
|
18973
|
+
const getSvgFill = () => {
|
|
18974
|
+
const btn = this.builder.builderStuff.querySelector('.style-helper.base');
|
|
18975
|
+
return window.getComputedStyle(btn.querySelector('svg'), null).getPropertyValue('fill');
|
|
18976
|
+
};
|
|
18977
|
+
|
|
18978
|
+
const inp = this.builder.builderStuff.querySelector('.style-helper-input');
|
|
18979
|
+
const lbl = this.builder.builderStuff.querySelector('.style-helper-label');
|
|
18980
|
+
const sel = this.builder.builderStuff.querySelector('.style-helper-select');
|
|
18981
|
+
const btnClassic = this.builder.builderStuff.querySelector('.style-helper-button-classic');
|
|
18982
|
+
this.builder.styleModalColor = getVal('.modal-color', 'background-color');
|
|
18983
|
+
this.builder.styleModalBackground = getVal('.modal-background', 'background-color');
|
|
18984
|
+
this.builder.styleButtonPickColorBorder = getVal('.button-pickcolor-border', 'border');
|
|
18985
|
+
this.builder.styleButtonPickColorBackground = getVal('.button-pickcolor-background', 'background-color');
|
|
18986
|
+
this.builder.styleToolBackground = getVal('.base', 'background-color');
|
|
18987
|
+
this.builder.styleButtonColor = getVal('.base', 'color');
|
|
18988
|
+
this.builder.styleButtonSvgFill = getSvgFill(); // this.builder.styleButtonBackgroundOn = getVal('.base.on', 'background-color');
|
|
18989
|
+
|
|
18990
|
+
this.builder.styleButtonBackgroundHover = getVal('.base.hover', 'background-color');
|
|
18991
|
+
this.builder.styleSnippetColor = getVal('.snippet-color', 'background-color');
|
|
18992
|
+
this.builder.styleSnippetBackground = getVal('.snippet-background', 'background-color');
|
|
18993
|
+
this.builder.styleSnippetTabsBackground = getVal('.snippet-tabs-background', 'background-color');
|
|
18994
|
+
this.builder.styleSnippetTabItemBackground = getVal('.snippet-tab-item-background', 'background-color');
|
|
18995
|
+
this.builder.styleSnippetTabItemBackgroundActive = getVal('.snippet-tab-item-background-active', 'background-color');
|
|
18996
|
+
this.builder.styleSnippetTabItemBackgroundHover = getVal('.snippet-tab-item-background-hover', 'background-color');
|
|
18997
|
+
this.builder.styleSnippetTabItemColor = getVal('.snippet-tab-item-color', 'background-color');
|
|
18998
|
+
this.builder.styleSnippetMoreItemBackground = getVal('.snippet-more-item-background', 'background-color');
|
|
18999
|
+
this.builder.styleSnippetMoreItemBackgroundActive = getVal('.snippet-more-item-background-active', 'background-color');
|
|
19000
|
+
this.builder.styleSnippetMoreItemBackgroundHover = getVal('.snippet-more-item-background-hover', 'background-color');
|
|
19001
|
+
this.builder.styleSnippetMoreItemColor = getVal('.snippet-more-item-color', 'background-color'); // Normal Tabs (ex. used in 'Symbol' plugin)
|
|
19002
|
+
|
|
19003
|
+
this.builder.styleTabsBackground = getVal('.tabs-background', 'background-color');
|
|
19004
|
+
this.builder.styleTabItemBorderBottomActive = getVal('.tab-item-active-border-bottom', 'border');
|
|
19005
|
+
this.builder.styleTabItemColor = getVal('.tab-item-color', 'background-color');
|
|
19006
|
+
this.builder.styleTabsMoreBackground = getVal('.tabs-more-background', 'background-color');
|
|
19007
|
+
this.builder.styleTabsMoreBorder = getVal('.tabs-more-border', 'border');
|
|
19008
|
+
this.builder.styleTabsMoreItemColor = getVal('.tabs-more-item-color', 'background-color');
|
|
19009
|
+
this.builder.styleTabsMoreBackgroundHover = getVal('.tabs-more-item-background-hover', 'background-color');
|
|
19010
|
+
this.builder.styleSeparatorColor = getVal('.separator-color', 'background-color');
|
|
19011
|
+
this.builder.styleOutlineColor = getVal('.outline-color', 'background-color'); // Select (ex. used in 'Button Editor' plugin, 'Slider' plugin, 'Slider Content' plugin)
|
|
19012
|
+
|
|
19013
|
+
this.builder.styleSelectBackground = window.getComputedStyle(sel, null).getPropertyValue('background-color');
|
|
19014
|
+
this.builder.styleSelectColor = window.getComputedStyle(sel, null).getPropertyValue('color');
|
|
19015
|
+
this.builder.styleSelectOptionBackground = window.getComputedStyle(sel.querySelector('option'), null).getPropertyValue('background-color'); // Input (ex. used in 'Search & Replace' plugin)
|
|
19016
|
+
|
|
19017
|
+
this.builder.styleInputBackground = window.getComputedStyle(inp, null).getPropertyValue('background-color');
|
|
19018
|
+
this.builder.styleInputBorderBottom = window.getComputedStyle(inp, null).getPropertyValue('border-bottom');
|
|
19019
|
+
this.builder.styleInputColor = window.getComputedStyle(inp, null).getPropertyValue('color'); // Label (ex. used in 'Search & Replace' plugin)
|
|
19020
|
+
|
|
19021
|
+
this.builder.styleLabelColor = window.getComputedStyle(lbl, null).getPropertyValue('color'); // Button Classic (ex. used in 'Search & Replace' plugin)
|
|
19022
|
+
|
|
19023
|
+
this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
|
|
19024
|
+
this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
|
|
19025
|
+
this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color');
|
|
19026
|
+
this.builder.styleDark = false;
|
|
19027
|
+
this.builder.styleColored = false;
|
|
19028
|
+
this.builder.styleColoredDark = false;
|
|
19029
|
+
this.builder.styleLight = false;
|
|
19030
|
+
|
|
19031
|
+
if (document.body.getAttribute('class')) {
|
|
19032
|
+
if (document.body.getAttribute('class').indexOf('colored-dark') !== -1) {
|
|
19033
|
+
this.builder.styleColoredDark = true;
|
|
19034
|
+
} else if (document.body.getAttribute('class').indexOf('dark') !== -1) {
|
|
19035
|
+
this.builder.styleDark = true;
|
|
19036
|
+
} else if (document.body.getAttribute('class').indexOf('colored') !== -1) {
|
|
19037
|
+
this.builder.styleColored = true;
|
|
19038
|
+
} else if (document.body.getAttribute('class').indexOf('light') !== -1) {
|
|
19039
|
+
this.builder.styleLight = true;
|
|
19040
|
+
}
|
|
19041
|
+
}
|
|
19042
|
+
}
|
|
19043
|
+
|
|
19044
|
+
getUIStyles_OLD() {
|
|
18744
19045
|
const dom = this.dom;
|
|
18745
19046
|
const html = `<button class="style-helper"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
|
18746
19047
|
<input type="text" class="style-helper-input" style="display:none;">
|
|
@@ -28697,7 +28998,7 @@ class Snippets {
|
|
|
28697
28998
|
z-index:10;width:30px;height:30px;position:absolute;
|
|
28698
28999
|
top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;
|
|
28699
29000
|
}
|
|
28700
|
-
.is-pop-close:focus {
|
|
29001
|
+
.is-pop-close:focus-visible {
|
|
28701
29002
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28702
29003
|
}
|
|
28703
29004
|
|
|
@@ -28838,7 +29139,7 @@ class Snippets {
|
|
|
28838
29139
|
border-radius: 2px;
|
|
28839
29140
|
}
|
|
28840
29141
|
|
|
28841
|
-
.is-design-list>li:focus {
|
|
29142
|
+
.is-design-list>li:focus-visible {
|
|
28842
29143
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28843
29144
|
}
|
|
28844
29145
|
|
|
@@ -28937,7 +29238,7 @@ class Snippets {
|
|
|
28937
29238
|
cursor: default;
|
|
28938
29239
|
}
|
|
28939
29240
|
|
|
28940
|
-
.is-category-list a:focus {
|
|
29241
|
+
.is-category-list a:focus-visible {
|
|
28941
29242
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28942
29243
|
}
|
|
28943
29244
|
|
|
@@ -62241,10 +62542,10 @@ class Image$1 {
|
|
|
62241
62542
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
62242
62543
|
<input id="hidRefId1" name="hidRefId" type="hidden" value="" />
|
|
62243
62544
|
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
62244
|
-
<input title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62545
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62245
62546
|
</form>
|
|
62246
62547
|
|
|
62247
|
-
<iframe
|
|
62548
|
+
<iframe id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
62248
62549
|
</div>
|
|
62249
62550
|
</div>
|
|
62250
62551
|
|
|
@@ -62259,7 +62560,7 @@ class Image$1 {
|
|
|
62259
62560
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
62260
62561
|
<input id="hidRefId2" name="hidRefId" type="hidden" value="" />
|
|
62261
62562
|
<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
62262
|
-
<input title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62563
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62263
62564
|
</form>
|
|
62264
62565
|
</div>
|
|
62265
62566
|
</div>
|
|
@@ -65994,9 +66295,13 @@ class Module {
|
|
|
65994
66295
|
var moduleDesc = module.getAttribute('data-module-desc');
|
|
65995
66296
|
|
|
65996
66297
|
if (moduleDesc) {
|
|
65997
|
-
moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}"
|
|
66298
|
+
moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
|
66299
|
+
<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
66300
|
+
</button>`;
|
|
65998
66301
|
} else {
|
|
65999
|
-
moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}"
|
|
66302
|
+
moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
|
66303
|
+
<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
66304
|
+
</button>`;
|
|
66000
66305
|
}
|
|
66001
66306
|
|
|
66002
66307
|
var w = module.getAttribute('data-dialog-width');
|
|
@@ -66011,6 +66316,12 @@ class Module {
|
|
|
66011
66316
|
h = '570px';
|
|
66012
66317
|
}
|
|
66013
66318
|
|
|
66319
|
+
if (modulename === 'slider-builder') {
|
|
66320
|
+
moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
|
|
66321
|
+
w = '1500px';
|
|
66322
|
+
h = '80vh';
|
|
66323
|
+
}
|
|
66324
|
+
|
|
66014
66325
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
|
|
66015
66326
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
|
|
66016
66327
|
let btnClose = moduleModal.querySelector('.is-modal-close');
|
|
@@ -67287,6 +67598,12 @@ class Video {
|
|
|
67287
67598
|
let elm = e.target;
|
|
67288
67599
|
|
|
67289
67600
|
if (elm.tagName.toLowerCase() === 'video') {
|
|
67601
|
+
if (elm.closest('[data-html]')) {
|
|
67602
|
+
this.builder.activeVideo = null;
|
|
67603
|
+
this.videoTool.style.display = '';
|
|
67604
|
+
return;
|
|
67605
|
+
}
|
|
67606
|
+
|
|
67290
67607
|
this.builder.activeVideo = elm;
|
|
67291
67608
|
this.videoTool.style.display = 'flex';
|
|
67292
67609
|
let _toolwidth = this.videoTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
@@ -67294,7 +67611,8 @@ class Video {
|
|
|
67294
67611
|
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
67295
67612
|
let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
|
|
67296
67613
|
let left = elm.getBoundingClientRect().left;
|
|
67297
|
-
left = left + (w - _toolwidth); //
|
|
67614
|
+
left = left + (w - _toolwidth); // left = left + (w/2 - _toolwidth/2);
|
|
67615
|
+
//Adjust left in case an element is outside the screen
|
|
67298
67616
|
|
|
67299
67617
|
const _screenwidth = window.innerWidth;
|
|
67300
67618
|
if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
|
|
@@ -70019,6 +70337,7 @@ class ColumnTool {
|
|
|
70019
70337
|
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
|
70020
70338
|
<span>${util.out('Image')}</span>
|
|
70021
70339
|
</button>
|
|
70340
|
+
<button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
70022
70341
|
<button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
70023
70342
|
<button title="${util.out('Adjust')}" class="input-cell-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
70024
70343
|
</div>
|
|
@@ -70153,11 +70472,11 @@ class ColumnTool {
|
|
|
70153
70472
|
<div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
70154
70473
|
<form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
|
|
70155
70474
|
<input id="hidRefId4" name="hidRefId" type="hidden" value="">
|
|
70156
|
-
<svg class="is-icon-flex"><use xlink:href="#ion-
|
|
70157
|
-
<input title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
|
|
70475
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
70476
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
|
|
70158
70477
|
</form>
|
|
70159
70478
|
|
|
70160
|
-
<iframe tabindex="
|
|
70479
|
+
<iframe tabindex="-1" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
70161
70480
|
</div>
|
|
70162
70481
|
</div>
|
|
70163
70482
|
<div style="padding-top:20px">
|
|
@@ -70250,11 +70569,11 @@ class ColumnTool {
|
|
|
70250
70569
|
<div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
70251
70570
|
<form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
|
70252
70571
|
<input id="hidRefId3" name="hidRefId" type="hidden" value="">
|
|
70253
|
-
<svg class="is-icon-flex"><use xlink:href="#ion-
|
|
70254
|
-
<input title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
70572
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
70573
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
70255
70574
|
</form>
|
|
70256
70575
|
|
|
70257
|
-
<iframe tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
70576
|
+
<iframe tabindex="-1" tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
70258
70577
|
</div>
|
|
70259
70578
|
</div>
|
|
70260
70579
|
|
|
@@ -70282,6 +70601,8 @@ class ColumnTool {
|
|
|
70282
70601
|
|
|
70283
70602
|
columnMore = builderStuff.querySelector('.columnmore');
|
|
70284
70603
|
this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
|
|
70604
|
+
this.divCellClick = builderStuff.querySelector('#divCellClick');
|
|
70605
|
+
this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
|
|
70285
70606
|
const quickadd = renderQuickAdd(builder); // Prepare for tooltip
|
|
70286
70607
|
|
|
70287
70608
|
let elms = columnTool.querySelectorAll('[title]');
|
|
@@ -70622,6 +70943,36 @@ class ColumnTool {
|
|
|
70622
70943
|
btnImageRemove.style.display = 'none';
|
|
70623
70944
|
div.innerHTML = ''; //Trigger Change event
|
|
70624
70945
|
|
|
70946
|
+
this.builder.opts.onChange();
|
|
70947
|
+
}); // Column Background Image Open Asset
|
|
70948
|
+
|
|
70949
|
+
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
70950
|
+
this.divCellGeneral.querySelector('.input-select').style.display = 'none';
|
|
70951
|
+
}
|
|
70952
|
+
|
|
70953
|
+
const btnCellBgImageOpenAsset = this.divCellGeneral.querySelector('.input-select');
|
|
70954
|
+
this.builder.renderSelectAsset(btnCellBgImageOpenAsset, 'image', url => {
|
|
70955
|
+
let cell = util.cellSelected();
|
|
70956
|
+
if (!cell) return;
|
|
70957
|
+
this.builder.uo.saveForUndo();
|
|
70958
|
+
cell.style.backgroundImage = `url("${url}")`;
|
|
70959
|
+
cell.style.backgroundSize = 'cover';
|
|
70960
|
+
cell.style.backgroundRepeat = 'no-repeat';
|
|
70961
|
+
const div = cellSettings.querySelector('.cell-bgimage-preview');
|
|
70962
|
+
const btnImageAdjust = this.cellSettings.querySelector('.input-cell-bgimageadjust');
|
|
70963
|
+
const btnImageRemove = this.cellSettings.querySelector('.input-cell-bgremove');
|
|
70964
|
+
btnImageAdjust.style.display = 'none';
|
|
70965
|
+
btnImageRemove.style.display = 'none';
|
|
70966
|
+
|
|
70967
|
+
if (url !== '') {
|
|
70968
|
+
div.innerHTML = `<img src="${url}">`;
|
|
70969
|
+
btnImageAdjust.style.display = 'flex';
|
|
70970
|
+
btnImageRemove.style.display = 'flex';
|
|
70971
|
+
} else {
|
|
70972
|
+
div.innerHTML = '';
|
|
70973
|
+
} //Trigger Change event
|
|
70974
|
+
|
|
70975
|
+
|
|
70625
70976
|
this.builder.opts.onChange();
|
|
70626
70977
|
}); // Column Background Image Select Dialog (.is-modal.imagesource)
|
|
70627
70978
|
|
|
@@ -71419,13 +71770,13 @@ class ColumnTool {
|
|
|
71419
71770
|
}
|
|
71420
71771
|
|
|
71421
71772
|
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
71422
|
-
this.
|
|
71773
|
+
this.divCellClick.querySelector('.input-select').style.display = 'none';
|
|
71423
71774
|
} // Select image (opens Asset Manager plugin or custom dialog)
|
|
71424
71775
|
|
|
71425
71776
|
|
|
71426
71777
|
if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
|
|
71427
71778
|
const inpSrc = this.cellSettings.querySelector('.input-src');
|
|
71428
|
-
elm = this.
|
|
71779
|
+
elm = this.divCellClick.querySelector('.input-select');
|
|
71429
71780
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
71430
71781
|
//---default
|
|
71431
71782
|
this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
|
|
@@ -72303,6 +72654,24 @@ class ColumnTool {
|
|
|
72303
72654
|
this.columnTool.querySelector('.cell-remove').style.display = '';
|
|
72304
72655
|
this.columnTool.querySelector('.cell-more').style.display = '';
|
|
72305
72656
|
}
|
|
72657
|
+
} // Column Lock will hide Add & Remove column
|
|
72658
|
+
|
|
72659
|
+
|
|
72660
|
+
if (col.classList.contains('column-lock')) {
|
|
72661
|
+
this.columnTool.querySelector('.cell-add').style.display = 'none';
|
|
72662
|
+
this.columnTool.querySelector('.cell-remove').style.display = 'none';
|
|
72663
|
+
this.columnMore.querySelector('.cell-prev').style.display = 'none';
|
|
72664
|
+
this.columnMore.querySelector('.cell-next').style.display = 'none';
|
|
72665
|
+
this.columnMore.querySelector('.cell-up').style.display = 'none';
|
|
72666
|
+
this.columnMore.querySelector('.cell-down').style.display = 'none';
|
|
72667
|
+
this.columnMore.querySelector('.cell-increase').style.display = 'none';
|
|
72668
|
+
this.columnMore.querySelector('.cell-decrease').style.display = 'none';
|
|
72669
|
+
this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
|
|
72670
|
+
this.columnMore.querySelector('.is-separator').style.display = 'none';
|
|
72671
|
+
this.columnMore.querySelector('.cell-locking').style.display = 'none';
|
|
72672
|
+
} else {
|
|
72673
|
+
this.columnMore.querySelector('.is-separator').style.display = '';
|
|
72674
|
+
this.columnMore.querySelector('.cell-locking').style.display = '';
|
|
72306
72675
|
}
|
|
72307
72676
|
}
|
|
72308
72677
|
|
|
@@ -83419,7 +83788,7 @@ class Rte {
|
|
|
83419
83788
|
|
|
83420
83789
|
if (count < 3) {
|
|
83421
83790
|
//not used
|
|
83422
|
-
|
|
83791
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83423
83792
|
|
|
83424
83793
|
if (!attr) {
|
|
83425
83794
|
links[i].setAttribute('data-rel', '_del');
|
|
@@ -83550,23 +83919,46 @@ class Rte {
|
|
|
83550
83919
|
fontname = fontname.replace(/'/g, ''); // NEW 4.0.5 (replace quotes in font family)
|
|
83551
83920
|
|
|
83552
83921
|
if (provider === 'google') {
|
|
83553
|
-
|
|
83554
|
-
|
|
83922
|
+
let bExist = false;
|
|
83923
|
+
bExist = this.checkIfFontCssLinkExists(fontfamily);
|
|
83555
83924
|
|
|
83556
|
-
|
|
83557
|
-
|
|
83558
|
-
|
|
83559
|
-
|
|
83925
|
+
if (!bExist) {
|
|
83926
|
+
let element = elm;
|
|
83927
|
+
|
|
83928
|
+
while (!dom.hasClass(element, 'is-builder')) {
|
|
83929
|
+
element = element.parentNode;
|
|
83930
|
+
}
|
|
83931
|
+
|
|
83932
|
+
let cssUrl = '';
|
|
83933
|
+
|
|
83934
|
+
if (this.builder.fontPath) {
|
|
83935
|
+
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
83936
|
+
cssUrl = this.builder.fontPath + cssFileName;
|
|
83937
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
|
|
83938
|
+
} else {
|
|
83939
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
|
|
83940
|
+
}
|
|
83560
83941
|
}
|
|
83942
|
+
}
|
|
83943
|
+
|
|
83944
|
+
if (provider === 'others') {
|
|
83945
|
+
let bExist = false;
|
|
83946
|
+
bExist = this.checkIfFontCssLinkExists(fontfamily);
|
|
83561
83947
|
|
|
83562
83948
|
if (!bExist) {
|
|
83563
|
-
|
|
83949
|
+
let element = elm;
|
|
83564
83950
|
|
|
83565
83951
|
while (!dom.hasClass(element, 'is-builder')) {
|
|
83566
83952
|
element = element.parentNode;
|
|
83567
83953
|
}
|
|
83568
83954
|
|
|
83569
|
-
|
|
83955
|
+
let cssUrl = '';
|
|
83956
|
+
|
|
83957
|
+
if (this.builder.fontPath) {
|
|
83958
|
+
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
83959
|
+
cssUrl = this.builder.fontPath + cssFileName;
|
|
83960
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
|
|
83961
|
+
}
|
|
83570
83962
|
}
|
|
83571
83963
|
}
|
|
83572
83964
|
|
|
@@ -83584,9 +83976,12 @@ class Rte {
|
|
|
83584
83976
|
} //Trigger Change event
|
|
83585
83977
|
|
|
83586
83978
|
|
|
83587
|
-
this.builder.opts.onChange(); //
|
|
83588
|
-
|
|
83979
|
+
this.builder.opts.onChange(); //Cleanup Google font css link
|
|
83980
|
+
|
|
83981
|
+
this.cleanupFontCssLink();
|
|
83982
|
+
}
|
|
83589
83983
|
|
|
83984
|
+
cleanupFontCssLink() {
|
|
83590
83985
|
const fonts = [];
|
|
83591
83986
|
|
|
83592
83987
|
if (this.builder.opts.page !== '') {
|
|
@@ -83603,54 +83998,64 @@ class Rte {
|
|
|
83603
83998
|
if (fonts.indexOf(fontFamily) === -1) fonts.push(fontFamily);
|
|
83604
83999
|
});
|
|
83605
84000
|
});
|
|
83606
|
-
}
|
|
84001
|
+
} // Cleanup
|
|
83607
84002
|
|
|
83608
|
-
links = this.builder.doc.getElementsByTagName('link');
|
|
83609
84003
|
|
|
83610
|
-
|
|
83611
|
-
|
|
84004
|
+
let links = this.builder.doc.getElementsByTagName('link');
|
|
84005
|
+
|
|
84006
|
+
for (let i = 0; i < links.length; i++) {
|
|
84007
|
+
let sSrc = links[i].href.toLowerCase();
|
|
83612
84008
|
|
|
83613
84009
|
if (sSrc.indexOf('googleapis') !== -1) {
|
|
83614
84010
|
//get fontname
|
|
83615
84011
|
sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
83616
|
-
|
|
84012
|
+
let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
|
|
83617
84013
|
|
|
83618
|
-
if (
|
|
83619
|
-
|
|
84014
|
+
if (linkFontName.indexOf(':') !== -1) {
|
|
84015
|
+
linkFontName = linkFontName.split(':')[0];
|
|
83620
84016
|
}
|
|
83621
84017
|
|
|
83622
|
-
if (
|
|
83623
|
-
|
|
84018
|
+
if (linkFontName.indexOf('|') !== -1) {
|
|
84019
|
+
linkFontName = linkFontName.split('|')[0];
|
|
83624
84020
|
}
|
|
83625
84021
|
|
|
83626
|
-
|
|
83627
|
-
//console.log(
|
|
83628
|
-
//check if fontname used in content
|
|
83629
|
-
// let tmp = this.builder.doc.body.innerHTML.toLowerCase();
|
|
84022
|
+
linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
|
|
84023
|
+
// console.log(linkFontName);
|
|
84024
|
+
// check if fontname used in content
|
|
83630
84025
|
|
|
83631
84026
|
let used = false;
|
|
83632
84027
|
fonts.forEach(item => {
|
|
83633
|
-
if (item.toLowerCase().indexOf(
|
|
84028
|
+
if (item.toLowerCase().indexOf(linkFontName.toLowerCase()) === -1) ; else {
|
|
83634
84029
|
used = true;
|
|
83635
84030
|
}
|
|
83636
84031
|
});
|
|
83637
84032
|
|
|
83638
84033
|
if (!used) {
|
|
83639
84034
|
//not used
|
|
83640
|
-
|
|
84035
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83641
84036
|
|
|
83642
84037
|
if (!attr) {
|
|
83643
84038
|
links[i].setAttribute('data-rel', '_del');
|
|
83644
84039
|
}
|
|
83645
|
-
}
|
|
83646
|
-
|
|
83647
|
-
|
|
83648
|
-
|
|
83649
|
-
|
|
83650
|
-
|
|
83651
|
-
|
|
83652
|
-
|
|
84040
|
+
}
|
|
84041
|
+
} else if (links[i].getAttribute('data-name') === 'fontfamily') {
|
|
84042
|
+
let used = false;
|
|
84043
|
+
fonts.forEach(item => {
|
|
84044
|
+
const cssFileName = item.split(',')[0].replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-').toLowerCase() + '.css';
|
|
84045
|
+
|
|
84046
|
+
if (sSrc.toLowerCase().indexOf('/' + cssFileName) === -1) ; else {
|
|
84047
|
+
used = true;
|
|
84048
|
+
}
|
|
84049
|
+
});
|
|
84050
|
+
|
|
84051
|
+
if (!used) {
|
|
84052
|
+
//not used
|
|
84053
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83653
84054
|
|
|
84055
|
+
if (!attr) {
|
|
84056
|
+
links[i].setAttribute('data-rel', '_del');
|
|
84057
|
+
}
|
|
84058
|
+
}
|
|
83654
84059
|
}
|
|
83655
84060
|
}
|
|
83656
84061
|
|
|
@@ -83659,6 +84064,54 @@ class Rte {
|
|
|
83659
84064
|
});
|
|
83660
84065
|
}
|
|
83661
84066
|
|
|
84067
|
+
checkIfFontCssLinkExists(fontfamily) {
|
|
84068
|
+
let bExist = false;
|
|
84069
|
+
let fontname = fontfamily.split(',')[0];
|
|
84070
|
+
fontname = fontname.replace(/'/g, '');
|
|
84071
|
+
fontname = fontname.replace(/"/g, ''); // (replace double quotes in font family)
|
|
84072
|
+
|
|
84073
|
+
fontname = fontname.toLowerCase();
|
|
84074
|
+
let links = this.builder.doc.getElementsByTagName('link');
|
|
84075
|
+
|
|
84076
|
+
for (let i = 0; i < links.length; i++) {
|
|
84077
|
+
let sSrc = links[i].href.toLowerCase();
|
|
84078
|
+
|
|
84079
|
+
if (sSrc.indexOf('googleapis') !== -1) {
|
|
84080
|
+
if (!this.builder.fontPath) {
|
|
84081
|
+
//get fontname
|
|
84082
|
+
sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
84083
|
+
let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
|
|
84084
|
+
|
|
84085
|
+
if (linkFontName.indexOf(':') !== -1) {
|
|
84086
|
+
linkFontName = linkFontName.split(':')[0];
|
|
84087
|
+
}
|
|
84088
|
+
|
|
84089
|
+
if (linkFontName.indexOf('|') !== -1) {
|
|
84090
|
+
linkFontName = linkFontName.split('|')[0];
|
|
84091
|
+
}
|
|
84092
|
+
|
|
84093
|
+
linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
|
|
84094
|
+
//check if fontname used in content
|
|
84095
|
+
// let tmp = this.builder.doc.body.innerHTML.toLowerCase();
|
|
84096
|
+
|
|
84097
|
+
if (linkFontName === fontname.toLowerCase()) {
|
|
84098
|
+
bExist = true; // console.log(fontname.toLowerCase() + '-' +linkFontName);
|
|
84099
|
+
}
|
|
84100
|
+
}
|
|
84101
|
+
} else if (links[i].getAttribute('data-name') === 'fontfamily') {
|
|
84102
|
+
if (this.builder.fontPath) {
|
|
84103
|
+
let cssFile = fontname.replace(/\s/g, '-').toLowerCase() + '.css';
|
|
84104
|
+
|
|
84105
|
+
if (sSrc.toLowerCase().indexOf('/' + cssFile) !== -1) {
|
|
84106
|
+
bExist = true;
|
|
84107
|
+
}
|
|
84108
|
+
}
|
|
84109
|
+
}
|
|
84110
|
+
}
|
|
84111
|
+
|
|
84112
|
+
return bExist;
|
|
84113
|
+
}
|
|
84114
|
+
|
|
83662
84115
|
positionToolbar() {
|
|
83663
84116
|
const viewportWidth = document.body.clientWidth; //window.innerWidth;
|
|
83664
84117
|
|
|
@@ -86540,6 +86993,177 @@ class ContentStuff$1 {
|
|
|
86540
86993
|
|
|
86541
86994
|
}
|
|
86542
86995
|
|
|
86996
|
+
class MediaPicker {
|
|
86997
|
+
constructor(builder) {
|
|
86998
|
+
this.builder = builder;
|
|
86999
|
+
const util = this.builder.util;
|
|
87000
|
+
this.util = util;
|
|
87001
|
+
const builderStuff = this.builder.builderStuff;
|
|
87002
|
+
const dom = this.builder.dom;
|
|
87003
|
+
this.dom = dom;
|
|
87004
|
+
this.id = this.builder.util.makeId();
|
|
87005
|
+
const html = `
|
|
87006
|
+
<div class="is-modal mediasource" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
87007
|
+
<div class="is-modal-content" style="max-width:550px;">
|
|
87008
|
+
|
|
87009
|
+
<label for="inpMediaSource" style="display:block">${util.out('Source')}:</label>
|
|
87010
|
+
<div class="image-src">
|
|
87011
|
+
<input id="inpMediaSource" class="input-src" type="text">
|
|
87012
|
+
<button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
87013
|
+
<div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
87014
|
+
<form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.onLargerImageUpload}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
|
87015
|
+
<input name="hidRefId" class="input-ref-id" type="hidden" value="">
|
|
87016
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
87017
|
+
<input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
87018
|
+
</form>
|
|
87019
|
+
<iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
87020
|
+
</div>
|
|
87021
|
+
</div>
|
|
87022
|
+
|
|
87023
|
+
<div style="text-align:right;margin-top:20px;">
|
|
87024
|
+
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
|
87025
|
+
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
|
87026
|
+
</div>
|
|
87027
|
+
|
|
87028
|
+
</div>
|
|
87029
|
+
</div>
|
|
87030
|
+
`;
|
|
87031
|
+
dom.appendHtml(builderStuff, html);
|
|
87032
|
+
const modalMediaSelect = document.querySelector('.mediasource');
|
|
87033
|
+
this.modalMediaSelect = modalMediaSelect;
|
|
87034
|
+
|
|
87035
|
+
if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
|
|
87036
|
+
modalMediaSelect.querySelector('.input-upload').style.display = 'none';
|
|
87037
|
+
}
|
|
87038
|
+
|
|
87039
|
+
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
87040
|
+
modalMediaSelect.querySelector('.input-select').style.display = 'none';
|
|
87041
|
+
}
|
|
87042
|
+
|
|
87043
|
+
if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
|
|
87044
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87045
|
+
const elm = modalMediaSelect.querySelector('.input-select');
|
|
87046
|
+
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
87047
|
+
if (this.builder.opts.onFileSelectClick) {
|
|
87048
|
+
this.builder.opts.onFileSelectClick({
|
|
87049
|
+
targetInput: inpSrc,
|
|
87050
|
+
theTrigger: elm
|
|
87051
|
+
});
|
|
87052
|
+
} else if (this.builder.opts.onImageSelectClick) {
|
|
87053
|
+
this.builder.opts.onImageSelectClick({
|
|
87054
|
+
targetInput: inpSrc,
|
|
87055
|
+
theTrigger: elm
|
|
87056
|
+
});
|
|
87057
|
+
} else if (this.builder.opts.fileselect) {
|
|
87058
|
+
let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
|
|
87059
|
+
let iframe = modalFileSelect.querySelector('iframe');
|
|
87060
|
+
|
|
87061
|
+
if (this.builder.opts.assetRefresh) {
|
|
87062
|
+
iframe.src = this.builder.opts.fileselect;
|
|
87063
|
+
this.builder.opts.assetRefresh = false;
|
|
87064
|
+
}
|
|
87065
|
+
|
|
87066
|
+
if (iframe.src === 'about:blank') {
|
|
87067
|
+
iframe.src = this.builder.opts.fileselect;
|
|
87068
|
+
}
|
|
87069
|
+
|
|
87070
|
+
util.showModal(modalFileSelect, false, () => {
|
|
87071
|
+
elm.removeAttribute('data-focus');
|
|
87072
|
+
elm.focus();
|
|
87073
|
+
});
|
|
87074
|
+
elm.setAttribute('data-focus', true);
|
|
87075
|
+
this.builder.targetInput = inpSrc;
|
|
87076
|
+
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87077
|
+
} else if (this.builder.opts.imageselect) {
|
|
87078
|
+
let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
|
|
87079
|
+
let iframe = modalImageSelect.querySelector('iframe');
|
|
87080
|
+
|
|
87081
|
+
if (this.builder.opts.assetRefresh) {
|
|
87082
|
+
iframe.src = this.builder.opts.imageselect;
|
|
87083
|
+
this.builder.opts.assetRefresh = false;
|
|
87084
|
+
}
|
|
87085
|
+
|
|
87086
|
+
if (iframe.src === 'about:blank') {
|
|
87087
|
+
iframe.src = this.builder.opts.imageselect;
|
|
87088
|
+
}
|
|
87089
|
+
|
|
87090
|
+
util.showModal(modalImageSelect, false, () => {
|
|
87091
|
+
elm.removeAttribute('data-focus');
|
|
87092
|
+
elm.focus();
|
|
87093
|
+
});
|
|
87094
|
+
elm.setAttribute('data-focus', true);
|
|
87095
|
+
this.builder.targetInput = inpSrc;
|
|
87096
|
+
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87097
|
+
}
|
|
87098
|
+
});
|
|
87099
|
+
}
|
|
87100
|
+
|
|
87101
|
+
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87102
|
+
dom.addEventListener(inputFileSelect, 'change', e => {
|
|
87103
|
+
let element = inputFileSelect;
|
|
87104
|
+
|
|
87105
|
+
while (element.nodeName.toLowerCase() !== 'form') {
|
|
87106
|
+
element = element.parentNode;
|
|
87107
|
+
}
|
|
87108
|
+
|
|
87109
|
+
let frmUpload = element;
|
|
87110
|
+
dom.addClass(frmUpload, 'please-wait');
|
|
87111
|
+
modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
|
|
87112
|
+
|
|
87113
|
+
if (this.builder.opts.onLargerImageUpload) {
|
|
87114
|
+
this.builder.opts.onLargerImageUpload(e);
|
|
87115
|
+
} else {
|
|
87116
|
+
frmUpload.submit();
|
|
87117
|
+
}
|
|
87118
|
+
|
|
87119
|
+
inputFileSelect.value = ''; // Clear Input
|
|
87120
|
+
});
|
|
87121
|
+
const btnImageOk = modalMediaSelect.querySelector('.input-ok');
|
|
87122
|
+
dom.addEventListener(btnImageOk, 'click', () => {
|
|
87123
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87124
|
+
const url = inpSrc.value;
|
|
87125
|
+
if (this.builder.mediaSelectedCallback) this.builder.mediaSelectedCallback(url);
|
|
87126
|
+
this.builder.hideModal(modalMediaSelect);
|
|
87127
|
+
});
|
|
87128
|
+
const btnImageCancel = modalMediaSelect.querySelector('.input-cancel');
|
|
87129
|
+
dom.addEventListener(btnImageCancel, 'click', () => {
|
|
87130
|
+
this.builder.hideModal(modalMediaSelect);
|
|
87131
|
+
});
|
|
87132
|
+
}
|
|
87133
|
+
|
|
87134
|
+
openMediaPicker(currentUrl, assetType, callback, btn) {
|
|
87135
|
+
this.builder.targetAssetType = assetType;
|
|
87136
|
+
const modalMediaSelect = this.modalMediaSelect;
|
|
87137
|
+
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87138
|
+
|
|
87139
|
+
if (assetType === 'media') {
|
|
87140
|
+
inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
|
|
87141
|
+
} else if (assetType === 'video') {
|
|
87142
|
+
inputFileSelect.setAttribute('accept', 'video/mp4');
|
|
87143
|
+
} else if (assetType === 'image') {
|
|
87144
|
+
inputFileSelect.setAttribute('accept', 'image/*');
|
|
87145
|
+
} else if (assetType === 'audio') {
|
|
87146
|
+
inputFileSelect.setAttribute('accept', 'audio/mp3');
|
|
87147
|
+
} //Current value
|
|
87148
|
+
|
|
87149
|
+
|
|
87150
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87151
|
+
inpSrc.value = currentUrl; //mediaSelectedCallback
|
|
87152
|
+
|
|
87153
|
+
this.builder.mediaSelectedCallback = callback; //Show modal
|
|
87154
|
+
|
|
87155
|
+
modalMediaSelect.style.zIndex = '10005';
|
|
87156
|
+
this.util.showModal(modalMediaSelect, false, () => {
|
|
87157
|
+
if (btn) {
|
|
87158
|
+
btn.removeAttribute('data-focus');
|
|
87159
|
+
btn.focus();
|
|
87160
|
+
}
|
|
87161
|
+
});
|
|
87162
|
+
if (btn) btn.setAttribute('data-focus', true);
|
|
87163
|
+
}
|
|
87164
|
+
|
|
87165
|
+
}
|
|
87166
|
+
|
|
86543
87167
|
class ContentBuilder {
|
|
86544
87168
|
constructor(opts = {}) {
|
|
86545
87169
|
let defaults = {
|
|
@@ -86583,6 +87207,8 @@ class ContentBuilder {
|
|
|
86583
87207
|
assetPath: 'assets/',
|
|
86584
87208
|
// Used for the location of ionicons/ (see rte.js 2788) & scripts/ (see plugins/preview/plugin.js 237)
|
|
86585
87209
|
fontAssetPath: 'assets/fonts/',
|
|
87210
|
+
// Option for self-hosted fonts:
|
|
87211
|
+
// fontPath: 'assets/cssfonts/', // If set, will be used
|
|
86586
87212
|
snippetData: 'assets/minimalist-blocks/snippetlist.html',
|
|
86587
87213
|
// Deprecated
|
|
86588
87214
|
snippetUrl: 'assets/minimalist-blocks/content.js',
|
|
@@ -87286,7 +87912,8 @@ class ContentBuilder {
|
|
|
87286
87912
|
}
|
|
87287
87913
|
|
|
87288
87914
|
this.colTool = new ColumnTool(this); // Render Column Tool
|
|
87289
|
-
|
|
87915
|
+
|
|
87916
|
+
this.mediaPicker = new MediaPicker(this); // Extend the onChange function
|
|
87290
87917
|
|
|
87291
87918
|
var oldget = this.opts.onChange;
|
|
87292
87919
|
|
|
@@ -88180,6 +88807,10 @@ class ContentBuilder {
|
|
|
88180
88807
|
this.opts.assetRefresh = true; // After file upload, make open asset refreshed
|
|
88181
88808
|
}
|
|
88182
88809
|
|
|
88810
|
+
openMediaPicker(currentUrl, assetType = 'media', callback, btn) {
|
|
88811
|
+
this.mediaPicker.openMediaPicker(currentUrl, assetType, callback, btn);
|
|
88812
|
+
}
|
|
88813
|
+
|
|
88183
88814
|
openImagePicker(currentUrl, callback, btn) {
|
|
88184
88815
|
this.colTool.openImagePicker(currentUrl, callback, btn);
|
|
88185
88816
|
}
|
|
@@ -88265,6 +88896,65 @@ class ContentBuilder {
|
|
|
88265
88896
|
return this.targetAssetType; // not used yet
|
|
88266
88897
|
}
|
|
88267
88898
|
|
|
88899
|
+
renderSelectAsset(btn, targetAssetType, callback) {
|
|
88900
|
+
const _id = 'inp_' + this.util.makeId();
|
|
88901
|
+
|
|
88902
|
+
btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
|
|
88903
|
+
const inpUrl = btn.parentNode.querySelector(`#${_id}`);
|
|
88904
|
+
btn.addEventListener('click', () => {
|
|
88905
|
+
this.openAsset(inpUrl, targetAssetType, btn);
|
|
88906
|
+
});
|
|
88907
|
+
|
|
88908
|
+
let out = s => this.util.out(s);
|
|
88909
|
+
|
|
88910
|
+
const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
|
88911
|
+
Object.defineProperty(inpUrl, 'value', {
|
|
88912
|
+
get: desc.get,
|
|
88913
|
+
set: function (s) {
|
|
88914
|
+
// Additional protection if normal selectAsset() is not used in asset dialog.
|
|
88915
|
+
// This is used if onImageSelectClick or onFileSelectClick are used.
|
|
88916
|
+
const filename = s.substring(s.lastIndexOf('/') + 1);
|
|
88917
|
+
let extension = filename.split('.').pop();
|
|
88918
|
+
extension = extension.toLowerCase();
|
|
88919
|
+
let ok = false;
|
|
88920
|
+
|
|
88921
|
+
if (targetAssetType === 'all') {
|
|
88922
|
+
ok = true;
|
|
88923
|
+
} else if (targetAssetType === 'media') {
|
|
88924
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
|
|
88925
|
+
ok = true;
|
|
88926
|
+
} else {
|
|
88927
|
+
alert(out('Please select an image or video file.'));
|
|
88928
|
+
}
|
|
88929
|
+
} else if (targetAssetType === 'video') {
|
|
88930
|
+
if (extension === 'mp4') {
|
|
88931
|
+
ok = true;
|
|
88932
|
+
} else {
|
|
88933
|
+
alert(out('Please select an mp4 file.'));
|
|
88934
|
+
}
|
|
88935
|
+
} else if (targetAssetType === 'image') {
|
|
88936
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
88937
|
+
ok = true;
|
|
88938
|
+
} else {
|
|
88939
|
+
alert(out('Please select an image file.'));
|
|
88940
|
+
}
|
|
88941
|
+
} else if (targetAssetType === 'audio') {
|
|
88942
|
+
if (extension === 'mp3') {
|
|
88943
|
+
ok = true;
|
|
88944
|
+
} else {
|
|
88945
|
+
alert(out('Please select an mp3 file.'));
|
|
88946
|
+
}
|
|
88947
|
+
}
|
|
88948
|
+
|
|
88949
|
+
if (ok) {
|
|
88950
|
+
if (callback) callback(s);
|
|
88951
|
+
}
|
|
88952
|
+
|
|
88953
|
+
desc.set.call(this, s);
|
|
88954
|
+
}
|
|
88955
|
+
});
|
|
88956
|
+
}
|
|
88957
|
+
|
|
88268
88958
|
openAsset(targetInput, targetAssetType, theTrigger) {
|
|
88269
88959
|
if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
|
|
88270
88960
|
if (this.opts.onFileSelectClick) {
|
|
@@ -91412,6 +92102,10 @@ class ContentStuff {
|
|
|
91412
92102
|
this.builder = builder; // const util = builder.util;
|
|
91413
92103
|
|
|
91414
92104
|
const html = `
|
|
92105
|
+
<form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-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);">
|
|
92106
|
+
<input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
92107
|
+
<input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
|
|
92108
|
+
</form>
|
|
91415
92109
|
<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
91416
92110
|
`;
|
|
91417
92111
|
builder.contentStuff.insertAdjacentHTML('afterbegin', html);
|
|
@@ -91705,6 +92399,8 @@ class ContentBox {
|
|
|
91705
92399
|
contentStylePath: 'assets/styles/',
|
|
91706
92400
|
pluginPath: 'contentbuilder/',
|
|
91707
92401
|
fontAssetPath: 'assets/fonts/',
|
|
92402
|
+
// Option for self-hosted fonts:
|
|
92403
|
+
// fontPath: 'assets/cssfonts/', // If set, will be used
|
|
91708
92404
|
plugins: [{
|
|
91709
92405
|
name: 'preview',
|
|
91710
92406
|
showInMainToolbar: true,
|
|
@@ -91794,7 +92490,7 @@ class ContentBox {
|
|
|
91794
92490
|
dragWithoutHandle: false,
|
|
91795
92491
|
addButtonPlacement: '',
|
|
91796
92492
|
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']],
|
|
91797
|
-
defaultSnippetCategory:
|
|
92493
|
+
defaultSnippetCategory: 120,
|
|
91798
92494
|
outlineMode: '',
|
|
91799
92495
|
elementHighlight: true,
|
|
91800
92496
|
rowTool: 'right',
|
|
@@ -94233,6 +94929,7 @@ class ContentBox {
|
|
|
94233
94929
|
pluginPath: this.settings.pluginPath,
|
|
94234
94930
|
modulePath: this.settings.modulePath,
|
|
94235
94931
|
fontAssetPath: this.settings.fontAssetPath,
|
|
94932
|
+
fontPath: this.settings.fontPath,
|
|
94236
94933
|
assetPath: this.settings.assetPath,
|
|
94237
94934
|
plugins: this.settings.plugins,
|
|
94238
94935
|
disableConfig: this.settings.disableConfig,
|
|
@@ -94822,7 +95519,7 @@ class ContentBox {
|
|
|
94822
95519
|
}
|
|
94823
95520
|
|
|
94824
95521
|
sectionSetup(section) {
|
|
94825
|
-
dom.appendHtml(section, '<div class="is-section-tool">' + '<button class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">✕</button>' + '</div>'); // this.editor.setTooltip(section);
|
|
95522
|
+
dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">✕</button>' + '</div>'); // this.editor.setTooltip(section);
|
|
94826
95523
|
// Prepare for tooltip
|
|
94827
95524
|
|
|
94828
95525
|
let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
|
|
@@ -94850,7 +95547,7 @@ class ContentBox {
|
|
|
94850
95547
|
boxSetup(box) {
|
|
94851
95548
|
let tool = box.querySelector('.is-box-tool');
|
|
94852
95549
|
if (tool) tool.parentNode.removeChild(tool);
|
|
94853
|
-
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<
|
|
95550
|
+
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" target="target-upload-cover" method="post" action="' + this.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" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-box-edit" tabindex="-1" 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 type="button" class="is-module-edit" tabindex="-1" 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>'); // this.editor.setTooltip(box);
|
|
94854
95551
|
// Prepare for tooltip
|
|
94855
95552
|
|
|
94856
95553
|
if (tool) {
|
|
@@ -94874,60 +95571,66 @@ class ContentBox {
|
|
|
94874
95571
|
if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
|
|
94875
95572
|
this.editbox.editModule();
|
|
94876
95573
|
});
|
|
94877
|
-
|
|
94878
|
-
if (
|
|
94879
|
-
|
|
94880
|
-
// Remove Waiting Indicator
|
|
94881
|
-
const builderStuff = this.builderStuff;
|
|
94882
|
-
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
94883
|
-
if(indicator) {
|
|
94884
|
-
alert('Please wait until another upload process completed.')
|
|
94885
|
-
e.preventDefault();
|
|
94886
|
-
return;
|
|
94887
|
-
}
|
|
94888
|
-
*/
|
|
94889
|
-
// prevent lost of activeBox during uploading cover (save to targetBox)
|
|
94890
|
-
this.editbox.targetBox = this.activeBox;
|
|
94891
|
-
});
|
|
94892
|
-
if (fileCover) fileCover.addEventListener('change', e => {
|
|
94893
|
-
if (fileCover.value === '') return;
|
|
94894
|
-
this.editor.saveForUndo(); // Show Waiting Indicator
|
|
94895
|
-
|
|
94896
|
-
const builderStuff = this.builderStuff;
|
|
94897
|
-
dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
94898
|
-
<div class="waiting-indicator">
|
|
94899
|
-
<div>${out('Uploading..')}</div>
|
|
94900
|
-
</div>
|
|
94901
|
-
`);
|
|
94902
|
-
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
94903
|
-
let targetBox = this.editbox.targetBox;
|
|
94904
|
-
let top, left;
|
|
95574
|
+
let btnCover = box.querySelector('.is-cover-upload');
|
|
95575
|
+
if (btnCover) btnCover.addEventListener('mouseenter', () => {
|
|
95576
|
+
let btnCoverCentral;
|
|
94905
95577
|
|
|
94906
95578
|
if (!this.iframe) {
|
|
94907
|
-
|
|
94908
|
-
left = targetBox.getBoundingClientRect().left + window.pageXOffset;
|
|
94909
|
-
} else {
|
|
94910
|
-
let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
94911
|
-
let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
94912
|
-
top = targetBox.getBoundingClientRect().top + adjY;
|
|
94913
|
-
left = targetBox.getBoundingClientRect().left + adjX;
|
|
94914
|
-
}
|
|
94915
|
-
|
|
94916
|
-
indicator.style.top = top + 'px';
|
|
94917
|
-
indicator.style.left = left + 'px';
|
|
94918
|
-
box.querySelector('.input-custom-value').value = this.settings.customval;
|
|
94919
|
-
|
|
94920
|
-
if (this.settings.onUploadCoverImage) {
|
|
94921
|
-
this.settings.onUploadCoverImage(e);
|
|
95579
|
+
btnCoverCentral = this.builderStuff.querySelector('.is-cover-upload-central');
|
|
94922
95580
|
} else {
|
|
94923
|
-
|
|
95581
|
+
btnCoverCentral = this.contentStuff.querySelector('.is-cover-upload-central');
|
|
94924
95582
|
}
|
|
94925
95583
|
|
|
94926
|
-
|
|
94927
|
-
|
|
94928
|
-
|
|
94929
|
-
|
|
95584
|
+
let top, left;
|
|
95585
|
+
top = btnCover.getBoundingClientRect().top + this.win.pageYOffset;
|
|
95586
|
+
left = btnCover.getBoundingClientRect().left + this.win.pageXOffset;
|
|
95587
|
+
btnCoverCentral.style.top = top + 'px';
|
|
95588
|
+
btnCoverCentral.style.left = left + 'px';
|
|
94930
95589
|
});
|
|
95590
|
+
/*
|
|
95591
|
+
const fileCover = box.querySelector('.input-file-cover');
|
|
95592
|
+
if(fileCover) fileCover.addEventListener('click', ()=>{
|
|
95593
|
+
// prevent lost of activeBox during uploading cover (save to targetBox)
|
|
95594
|
+
this.editbox.targetBox = this.activeBox;
|
|
95595
|
+
});
|
|
95596
|
+
if(fileCover) fileCover.addEventListener('change', (e)=>{
|
|
95597
|
+
if (fileCover.value === '') return;
|
|
95598
|
+
|
|
95599
|
+
this.editor.saveForUndo();
|
|
95600
|
+
// Show Waiting Indicator
|
|
95601
|
+
const builderStuff = this.builderStuff;
|
|
95602
|
+
dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
95603
|
+
<div class="waiting-indicator">
|
|
95604
|
+
<div>${out('Uploading..')}</div>
|
|
95605
|
+
</div>
|
|
95606
|
+
`);
|
|
95607
|
+
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
95608
|
+
let targetBox = this.editbox.targetBox;
|
|
95609
|
+
let top, left;
|
|
95610
|
+
if(!this.iframe) {
|
|
95611
|
+
top = (targetBox.getBoundingClientRect().top + window.pageYOffset);
|
|
95612
|
+
left = (targetBox.getBoundingClientRect().left + window.pageXOffset);
|
|
95613
|
+
} else {
|
|
95614
|
+
let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
95615
|
+
let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
95616
|
+
top = targetBox.getBoundingClientRect().top + adjY;
|
|
95617
|
+
left = targetBox.getBoundingClientRect().left + adjX;
|
|
95618
|
+
}
|
|
95619
|
+
indicator.style.top = top + 'px';
|
|
95620
|
+
indicator.style.left = left + 'px';
|
|
95621
|
+
box.querySelector('.input-custom-value').value = this.settings.customval;
|
|
95622
|
+
if(this.settings.onUploadCoverImage) {
|
|
95623
|
+
this.settings.onUploadCoverImage(e);
|
|
95624
|
+
} else {
|
|
95625
|
+
box.querySelector('.is-cover-upload').submit();
|
|
95626
|
+
}
|
|
95627
|
+
|
|
95628
|
+
fileCover.value = ''; // Clear Input
|
|
95629
|
+
e.preventDefault();
|
|
95630
|
+
e.stopImmediatePropagation();
|
|
95631
|
+
});
|
|
95632
|
+
*/
|
|
95633
|
+
|
|
94931
95634
|
box.addEventListener('mouseenter', () => {
|
|
94932
95635
|
this.positionTool(box);
|
|
94933
95636
|
let activeSection;
|
|
@@ -94968,6 +95671,47 @@ class ContentBox {
|
|
|
94968
95671
|
}
|
|
94969
95672
|
}
|
|
94970
95673
|
|
|
95674
|
+
sectionStack() {
|
|
95675
|
+
const sections = this.wrapperEl.querySelectorAll('.is-section.box-space');
|
|
95676
|
+
sections.forEach(section => {
|
|
95677
|
+
let prev = false;
|
|
95678
|
+
|
|
95679
|
+
if (section.previousElementSibling) {
|
|
95680
|
+
if (section.previousElementSibling.classList.contains('box-space')) prev = true;
|
|
95681
|
+
}
|
|
95682
|
+
|
|
95683
|
+
let next = false;
|
|
95684
|
+
|
|
95685
|
+
if (section.nextElementSibling) {
|
|
95686
|
+
if (section.nextElementSibling.classList.contains('box-space')) next = true;
|
|
95687
|
+
}
|
|
95688
|
+
|
|
95689
|
+
if (!prev && next) {
|
|
95690
|
+
section.classList.add('stack-top');
|
|
95691
|
+
section.classList.remove('stack-middle');
|
|
95692
|
+
section.classList.remove('stack-bottom');
|
|
95693
|
+
}
|
|
95694
|
+
|
|
95695
|
+
if (!prev && !next) {
|
|
95696
|
+
section.classList.remove('stack-top');
|
|
95697
|
+
section.classList.remove('stack-middle');
|
|
95698
|
+
section.classList.remove('stack-bottom');
|
|
95699
|
+
}
|
|
95700
|
+
|
|
95701
|
+
if (!next && prev) {
|
|
95702
|
+
section.classList.add('stack-bottom');
|
|
95703
|
+
section.classList.remove('stack-middle');
|
|
95704
|
+
section.classList.remove('stack-top');
|
|
95705
|
+
}
|
|
95706
|
+
|
|
95707
|
+
if (prev && next) {
|
|
95708
|
+
section.classList.remove('stack-top');
|
|
95709
|
+
section.classList.add('stack-middle');
|
|
95710
|
+
section.classList.remove('stack-bottom');
|
|
95711
|
+
}
|
|
95712
|
+
});
|
|
95713
|
+
}
|
|
95714
|
+
|
|
94971
95715
|
addIdea(newArea) {
|
|
94972
95716
|
this.editor.saveForUndo();
|
|
94973
95717
|
const designPath = this.designPath;
|
|
@@ -95109,31 +95853,42 @@ class ContentBox {
|
|
|
95109
95853
|
}
|
|
95110
95854
|
} // arrSections.push(newSection);
|
|
95111
95855
|
// Check up to 3 sections (in case a template has up to 3 sections)
|
|
95856
|
+
// let prevSection = newSection.previousElementSibling;
|
|
95857
|
+
// if(prevSection) {
|
|
95858
|
+
// let ok = prevSection.querySelector('.is-section-tool');
|
|
95859
|
+
// if(!ok) {
|
|
95860
|
+
// arrSections.push(prevSection);
|
|
95861
|
+
// }
|
|
95862
|
+
// prevSection = prevSection.previousElementSibling;
|
|
95863
|
+
// if(prevSection) {
|
|
95864
|
+
// ok = prevSection.querySelector('.is-section-tool');
|
|
95865
|
+
// if(!ok) {
|
|
95866
|
+
// arrSections.push(prevSection);
|
|
95867
|
+
// }
|
|
95868
|
+
// // more sections here
|
|
95869
|
+
// }
|
|
95870
|
+
// }
|
|
95871
|
+
// Check all sections
|
|
95112
95872
|
|
|
95113
95873
|
|
|
95114
|
-
|
|
95115
|
-
|
|
95116
|
-
|
|
95117
|
-
let ok = prevSection.querySelector('.is-section-tool');
|
|
95874
|
+
const sections = this.wrapperEl.querySelectorAll('.is-section');
|
|
95875
|
+
sections.forEach(section => {
|
|
95876
|
+
let ok = section.querySelector('.is-section-tool');
|
|
95118
95877
|
|
|
95119
95878
|
if (!ok) {
|
|
95120
|
-
arrSections.push(
|
|
95121
|
-
}
|
|
95122
|
-
|
|
95123
|
-
prevSection = prevSection.previousElementSibling;
|
|
95124
|
-
|
|
95125
|
-
if (prevSection) {
|
|
95126
|
-
ok = prevSection.querySelector('.is-section-tool');
|
|
95127
|
-
|
|
95128
|
-
if (!ok) {
|
|
95129
|
-
arrSections.push(prevSection);
|
|
95130
|
-
}
|
|
95879
|
+
arrSections.push(section);
|
|
95131
95880
|
}
|
|
95132
|
-
}
|
|
95133
|
-
|
|
95881
|
+
});
|
|
95134
95882
|
arrSections.forEach(section => {
|
|
95135
95883
|
// Code Blocks Handling
|
|
95136
|
-
let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
|
|
95884
|
+
// let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
|
|
95885
|
+
// codeBlocks.forEach(element => {
|
|
95886
|
+
// let html = (decodeURIComponent(element.getAttribute('data-html'))); // Original code is stored in data-html attribute
|
|
95887
|
+
// html = html.replace(/{id}/g, dom.uniqueId());
|
|
95888
|
+
// //Fill the block with original code
|
|
95889
|
+
// dom.html(element, html);
|
|
95890
|
+
// });
|
|
95891
|
+
let codeBlocks = section.querySelectorAll('[data-html]');
|
|
95137
95892
|
codeBlocks.forEach(element => {
|
|
95138
95893
|
let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
|
|
95139
95894
|
|
|
@@ -95187,7 +95942,8 @@ class ContentBox {
|
|
|
95187
95942
|
e.stopImmediatePropagation();
|
|
95188
95943
|
return false;
|
|
95189
95944
|
});
|
|
95190
|
-
});
|
|
95945
|
+
});
|
|
95946
|
+
this.sectionStack(); //Trigger Change event
|
|
95191
95947
|
|
|
95192
95948
|
this.onChange();
|
|
95193
95949
|
dom.removeElement(document.querySelector('.is-sidebar-overlay'));
|
|
@@ -95200,6 +95956,16 @@ class ContentBox {
|
|
|
95200
95956
|
|
|
95201
95957
|
|
|
95202
95958
|
refreshUIStyle() {
|
|
95959
|
+
// -------
|
|
95960
|
+
|
|
95961
|
+
/*
|
|
95962
|
+
Important Info:
|
|
95963
|
+
With the latest update (the contentbuilder css/themes => the new .is-area & .is-area-2nd general purpose classes),
|
|
95964
|
+
all these (below) settings are not needed.
|
|
95965
|
+
They are kept only to maintain backward compatibility, so that
|
|
95966
|
+
if latest npm is used and the local css files are still using the old version,
|
|
95967
|
+
it won't be a problem.
|
|
95968
|
+
*/
|
|
95203
95969
|
if (!this.editor) return;
|
|
95204
95970
|
|
|
95205
95971
|
if (!this.editor.styleSnippetBackground) {
|
|
@@ -95228,7 +95994,8 @@ class ContentBox {
|
|
|
95228
95994
|
const btns = sidebar.querySelectorAll('button');
|
|
95229
95995
|
btns.forEach(btn => {
|
|
95230
95996
|
btn.style.color = this.editor.styleModalColor;
|
|
95231
|
-
});
|
|
95997
|
+
}); // -------
|
|
95998
|
+
|
|
95232
95999
|
const sectionIframe = document.querySelector('#ifrIdeasPanel');
|
|
95233
96000
|
|
|
95234
96001
|
if (sectionIframe.contentWindow.applyParentStyles) {
|
|
@@ -95420,11 +96187,11 @@ class ContentBox {
|
|
|
95420
96187
|
let btnHtml;
|
|
95421
96188
|
|
|
95422
96189
|
if (btn.src) {
|
|
95423
|
-
btnHtml = '<button id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
96190
|
+
btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
95424
96191
|
var panelHtml = '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
|
|
95425
96192
|
dom.appendHtml(builderStuff, panelHtml);
|
|
95426
96193
|
} else {
|
|
95427
|
-
btnHtml = '<button id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
96194
|
+
btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
95428
96195
|
}
|
|
95429
96196
|
|
|
95430
96197
|
const sidebar = builderStuff.querySelector('.is-sidebar');
|
|
@@ -95712,40 +96479,38 @@ class ContentBox {
|
|
|
95712
96479
|
}
|
|
95713
96480
|
|
|
95714
96481
|
cleanupUnused() {
|
|
96482
|
+
/*
|
|
95715
96483
|
let links = this.doc.getElementsByTagName('link');
|
|
95716
|
-
|
|
95717
96484
|
for (let i = 0; i < links.length; i++) {
|
|
95718
|
-
|
|
95719
|
-
|
|
95720
|
-
|
|
95721
|
-
|
|
95722
|
-
|
|
95723
|
-
|
|
95724
|
-
|
|
95725
|
-
|
|
95726
|
-
|
|
95727
|
-
|
|
95728
|
-
|
|
95729
|
-
|
|
95730
|
-
|
|
95731
|
-
|
|
95732
|
-
|
|
95733
|
-
|
|
95734
|
-
|
|
95735
|
-
|
|
95736
|
-
|
|
95737
|
-
|
|
95738
|
-
|
|
95739
|
-
|
|
95740
|
-
|
|
95741
|
-
links[i].setAttribute('data-rel', '_del');
|
|
95742
|
-
}
|
|
96485
|
+
//Remove unused google font links
|
|
96486
|
+
let src = links[i].getAttribute('href');
|
|
96487
|
+
if (src.indexOf('googleapis') !== -1) {
|
|
96488
|
+
//get fontname
|
|
96489
|
+
src = src.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
96490
|
+
let fontname = src.substr(src.indexOf('family=') + 7);
|
|
96491
|
+
if (fontname.indexOf(':') != -1) {
|
|
96492
|
+
fontname = fontname.split(':')[0];
|
|
96493
|
+
}
|
|
96494
|
+
fontname = fontname.toLowerCase();
|
|
96495
|
+
//check if fontname used in content
|
|
96496
|
+
let exist = false;
|
|
96497
|
+
let tmp = this.wrapperEl.innerHTML.toLowerCase();
|
|
96498
|
+
let count = tmp.split(fontname).length;
|
|
96499
|
+
if (count >= 3) exist = true;
|
|
96500
|
+
if (!exist) {
|
|
96501
|
+
let attr = links[i].getAttribute('data-protect');
|
|
96502
|
+
if (typeof attr !== typeof undefined && attr !== false) {
|
|
96503
|
+
//do not delete
|
|
96504
|
+
} else {
|
|
96505
|
+
links[i].setAttribute('data-rel', '_del');
|
|
96506
|
+
}
|
|
96507
|
+
}
|
|
95743
96508
|
}
|
|
95744
|
-
|
|
95745
|
-
|
|
95746
|
-
|
|
96509
|
+
}
|
|
96510
|
+
*/
|
|
96511
|
+
this.editor.rte.cleanupFontCssLink(); //Cleanup unused contentstyles
|
|
95747
96512
|
|
|
95748
|
-
links = this.doc.getElementsByTagName('link');
|
|
96513
|
+
let links = this.doc.getElementsByTagName('link');
|
|
95749
96514
|
|
|
95750
96515
|
for (let i = 0; i < links.length; i++) {
|
|
95751
96516
|
if (links[i].getAttribute('data-name') === 'contentstyle') {
|