@innovastudio/contentbox 1.0.27 → 1.0.28
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.
|
@@ -758,9 +758,9 @@ class SideBar {
|
|
|
758
758
|
|
|
759
759
|
for (var i = 0; i < styles.length; i++) {
|
|
760
760
|
stylehtml += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '"><div>[' + (i + 1) + '] ' + styles[i].caption + '</div><img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
|
|
761
|
-
}
|
|
761
|
+
} // stylehtml += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
|
|
762
|
+
|
|
762
763
|
|
|
763
|
-
stylehtml += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
|
|
764
764
|
var selection = document.querySelector('#divStyles');
|
|
765
765
|
selection.innerHTML = stylehtml;
|
|
766
766
|
var elms = elementChildren(selection);
|
|
@@ -869,7 +869,7 @@ class SideBar {
|
|
|
869
869
|
item.parentNode.removeChild(item);
|
|
870
870
|
}); //Add new page css
|
|
871
871
|
|
|
872
|
-
if (
|
|
872
|
+
if (pageCss != '') {
|
|
873
873
|
dom$I.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
|
|
874
874
|
}
|
|
875
875
|
} else if (mode === 'container') {
|
|
@@ -1888,7 +1888,7 @@ class EditSection {
|
|
|
1888
1888
|
let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:292px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">↑</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">↓</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇤</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇥</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' +
|
|
1889
1889
|
/*
|
|
1890
1890
|
'<button title="Auto" class="cmd-section-height" data-value="0">Auto</button>' + */
|
|
1891
|
-
'<button title="20%" class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25" style="border-left:none;">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50" style="border-left:none;">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default" style="border-left:none;">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm" style="border-left:none;">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m" style="border-left:none;">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg" style="border-left:none;">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value="none" style="border-left:none;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:
|
|
1891
|
+
'<button title="20%" class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25" style="border-left:none;">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50" style="border-left:none;">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default" style="border-left:none;">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm" style="border-left:none;">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m" style="border-left:none;">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg" style="border-left:none;">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value="none" style="border-left:none;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-command="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-command="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-command="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-command="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-command="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-command="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-command="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-command="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-command="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-command="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-command="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-command="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-command="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-command="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-command="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
|
|
1892
1892
|
dom$H.appendHtml(builderStuff, html);
|
|
1893
1893
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
1894
1894
|
this.modalEditSection = modalEditSection;
|
|
@@ -1965,6 +1965,16 @@ class EditSection {
|
|
|
1965
1965
|
this.builder.settings.onChange();
|
|
1966
1966
|
});
|
|
1967
1967
|
});
|
|
1968
|
+
const btnScrollPreset = modalEditSection.querySelectorAll('.cmd-scroll-preset');
|
|
1969
|
+
btnScrollPreset.forEach(btn => {
|
|
1970
|
+
btn.addEventListener('click', () => {
|
|
1971
|
+
this.builder.editor.saveForUndo();
|
|
1972
|
+
let s = btn.getAttribute('data-command');
|
|
1973
|
+
this.sectionScrollPreset(s); //Trigger Change event
|
|
1974
|
+
|
|
1975
|
+
this.builder.settings.onChange();
|
|
1976
|
+
});
|
|
1977
|
+
});
|
|
1968
1978
|
const chkScrollIcon = modalEditSection.querySelector('#chkScrollIcon');
|
|
1969
1979
|
chkScrollIcon.addEventListener('click', () => {
|
|
1970
1980
|
this.builder.editor.saveForUndo();
|
|
@@ -2140,6 +2150,313 @@ class EditSection {
|
|
|
2140
2150
|
}
|
|
2141
2151
|
}
|
|
2142
2152
|
|
|
2153
|
+
sectionScrollPreset(s) {
|
|
2154
|
+
const section = this.builder.activeSection;
|
|
2155
|
+
const scroll = section.querySelector('.is-arrow-down');
|
|
2156
|
+
if (scroll) scroll.parentNode.removeChild(scroll);
|
|
2157
|
+
|
|
2158
|
+
if (s === '1') {
|
|
2159
|
+
//light
|
|
2160
|
+
let color = '#fff';
|
|
2161
|
+
let bgcolor = 'rgb(173 173 173 / 26%)';
|
|
2162
|
+
let svgfill = '';
|
|
2163
|
+
|
|
2164
|
+
{
|
|
2165
|
+
svgfill = `fill:${color};`;
|
|
2166
|
+
}
|
|
2167
|
+
|
|
2168
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="10" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2169
|
+
<a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
|
|
2170
|
+
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2171
|
+
<g>
|
|
2172
|
+
<path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
|
|
2173
|
+
</g>
|
|
2174
|
+
</svg>
|
|
2175
|
+
</a>
|
|
2176
|
+
</div>`;
|
|
2177
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2180
|
+
if (s === '2') {
|
|
2181
|
+
//dark
|
|
2182
|
+
let color = '#000';
|
|
2183
|
+
let bgcolor = 'rgb(221 221 221 / 30%)';
|
|
2184
|
+
let svgfill = '';
|
|
2185
|
+
|
|
2186
|
+
{
|
|
2187
|
+
svgfill = `fill:${color};`;
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="10" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2191
|
+
<a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
|
|
2192
|
+
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2193
|
+
<g>
|
|
2194
|
+
<path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
|
|
2195
|
+
</g>
|
|
2196
|
+
</svg>
|
|
2197
|
+
</a>
|
|
2198
|
+
</div>`;
|
|
2199
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
if (s === '3') {
|
|
2203
|
+
//light
|
|
2204
|
+
let color = '#fff';
|
|
2205
|
+
let bgcolor = 'rgba(193, 193, 193, 0.18)';
|
|
2206
|
+
let svgfill = '';
|
|
2207
|
+
|
|
2208
|
+
{
|
|
2209
|
+
svgfill = `fill:${color};`;
|
|
2210
|
+
}
|
|
2211
|
+
|
|
2212
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="5">
|
|
2213
|
+
<a href="#" style="background:${bgcolor};border-radius:500px">
|
|
2214
|
+
<svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2215
|
+
<g>
|
|
2216
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2217
|
+
</g>
|
|
2218
|
+
</svg>
|
|
2219
|
+
</a>
|
|
2220
|
+
</div>`;
|
|
2221
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
if (s === '4') {
|
|
2225
|
+
//dark
|
|
2226
|
+
let color = '#000';
|
|
2227
|
+
let bgcolor = 'rgba(193, 193, 193, 0.18)';
|
|
2228
|
+
let svgfill = '';
|
|
2229
|
+
|
|
2230
|
+
{
|
|
2231
|
+
svgfill = `fill:${color};`;
|
|
2232
|
+
}
|
|
2233
|
+
|
|
2234
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="5">
|
|
2235
|
+
<a href="#" style="background:${bgcolor};border-radius:500px">
|
|
2236
|
+
<svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2237
|
+
<g>
|
|
2238
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2239
|
+
</g>
|
|
2240
|
+
</svg>
|
|
2241
|
+
</a>
|
|
2242
|
+
</div>`;
|
|
2243
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
if (s === '5') {
|
|
2247
|
+
let color = '#fff';
|
|
2248
|
+
let svgfill = '';
|
|
2249
|
+
svgfill = `fill:${color};`;
|
|
2250
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="1">
|
|
2251
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2252
|
+
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2253
|
+
<g>
|
|
2254
|
+
<path d="M349.7 322.2c-3.1-3.1-8-3-11.3 0L264 388.6V104c0-4.4-3.6-8-8-8s-8 3.6-8 8v284.6l-74.4-66.3c-3.4-2.9-8.1-3.2-11.2-.1-3.1 3.1-3.3 8.5-.1 11.4 0 0 87 79.2 88 80s2.8 2.4 5.7 2.4 4.9-1.6 5.7-2.4 88-80 88-80c1.5-1.5 2.3-3.6 2.3-5.7s-.8-4.1-2.3-5.7z"></path>
|
|
2255
|
+
</g>
|
|
2256
|
+
</svg>
|
|
2257
|
+
</a>
|
|
2258
|
+
</div>`;
|
|
2259
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2260
|
+
}
|
|
2261
|
+
|
|
2262
|
+
if (s === '6') {
|
|
2263
|
+
let color = '#000';
|
|
2264
|
+
let svgfill = '';
|
|
2265
|
+
svgfill = `fill:${color};`;
|
|
2266
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="1">
|
|
2267
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2268
|
+
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2269
|
+
<g>
|
|
2270
|
+
<path d="M349.7 322.2c-3.1-3.1-8-3-11.3 0L264 388.6V104c0-4.4-3.6-8-8-8s-8 3.6-8 8v284.6l-74.4-66.3c-3.4-2.9-8.1-3.2-11.2-.1-3.1 3.1-3.3 8.5-.1 11.4 0 0 87 79.2 88 80s2.8 2.4 5.7 2.4 4.9-1.6 5.7-2.4 88-80 88-80c1.5-1.5 2.3-3.6 2.3-5.7s-.8-4.1-2.3-5.7z"></path>
|
|
2271
|
+
</g>
|
|
2272
|
+
</svg>
|
|
2273
|
+
</a>
|
|
2274
|
+
</div>`;
|
|
2275
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
if (s === '7') {
|
|
2279
|
+
let color = '#fff';
|
|
2280
|
+
let border = 'border:#333 2px solid;';
|
|
2281
|
+
let svgfill = '';
|
|
2282
|
+
|
|
2283
|
+
{
|
|
2284
|
+
border = `border:${color} 2px solid;`;
|
|
2285
|
+
svgfill = `fill:${color};`;
|
|
2286
|
+
}
|
|
2287
|
+
|
|
2288
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="2" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2289
|
+
<a href="#" style="${border}border-radius: 5px;background:none;">
|
|
2290
|
+
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2291
|
+
<g>
|
|
2292
|
+
<path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
|
|
2293
|
+
</g>
|
|
2294
|
+
</svg>
|
|
2295
|
+
</a>
|
|
2296
|
+
</div>`;
|
|
2297
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
if (s === '8') {
|
|
2301
|
+
let color = '#000';
|
|
2302
|
+
let border = 'border:#333 2px solid;';
|
|
2303
|
+
let svgfill = '';
|
|
2304
|
+
|
|
2305
|
+
{
|
|
2306
|
+
border = `border:${color} 2px solid;`;
|
|
2307
|
+
svgfill = `fill:${color};`;
|
|
2308
|
+
}
|
|
2309
|
+
|
|
2310
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="2" style="width: 30px;margin-left: -15px;height: 40px;">
|
|
2311
|
+
<a href="#" style="${border}border-radius: 5px;background:none;">
|
|
2312
|
+
<svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2313
|
+
<g>
|
|
2314
|
+
<path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
|
|
2315
|
+
</g>
|
|
2316
|
+
</svg>
|
|
2317
|
+
</a>
|
|
2318
|
+
</div>`;
|
|
2319
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
if (s === '9') {
|
|
2323
|
+
let color = '#fff';
|
|
2324
|
+
let svgfill = '';
|
|
2325
|
+
|
|
2326
|
+
{
|
|
2327
|
+
svgfill = `fill:${color};`;
|
|
2328
|
+
}
|
|
2329
|
+
|
|
2330
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="3">
|
|
2331
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2332
|
+
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2333
|
+
<g>
|
|
2334
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2335
|
+
</g>
|
|
2336
|
+
</svg>
|
|
2337
|
+
</a>
|
|
2338
|
+
</div>`;
|
|
2339
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2340
|
+
}
|
|
2341
|
+
|
|
2342
|
+
if (s === '10') {
|
|
2343
|
+
let color = '#000';
|
|
2344
|
+
let svgfill = '';
|
|
2345
|
+
|
|
2346
|
+
{
|
|
2347
|
+
svgfill = `fill:${color};`;
|
|
2348
|
+
}
|
|
2349
|
+
|
|
2350
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="3">
|
|
2351
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2352
|
+
<svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2353
|
+
<g>
|
|
2354
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2355
|
+
</g>
|
|
2356
|
+
</svg>
|
|
2357
|
+
</a>
|
|
2358
|
+
</div>`;
|
|
2359
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2360
|
+
}
|
|
2361
|
+
|
|
2362
|
+
if (s === '11') {
|
|
2363
|
+
let color = '#fff';
|
|
2364
|
+
let svgfill = '';
|
|
2365
|
+
|
|
2366
|
+
{
|
|
2367
|
+
svgfill = `fill:${color};`;
|
|
2368
|
+
}
|
|
2369
|
+
|
|
2370
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="4">
|
|
2371
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2372
|
+
<svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2373
|
+
<g>
|
|
2374
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2375
|
+
</g>
|
|
2376
|
+
</svg>
|
|
2377
|
+
</a>
|
|
2378
|
+
</div>`;
|
|
2379
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2380
|
+
}
|
|
2381
|
+
|
|
2382
|
+
if (s === '12') {
|
|
2383
|
+
let color = '#000';
|
|
2384
|
+
let svgfill = '';
|
|
2385
|
+
|
|
2386
|
+
{
|
|
2387
|
+
svgfill = `fill:${color};`;
|
|
2388
|
+
}
|
|
2389
|
+
|
|
2390
|
+
let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="4">
|
|
2391
|
+
<a href="#" style="background:none;border-radius:unset;">
|
|
2392
|
+
<svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2393
|
+
<g>
|
|
2394
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2395
|
+
</g>
|
|
2396
|
+
</svg>
|
|
2397
|
+
</a>
|
|
2398
|
+
</div>`;
|
|
2399
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
if (s === '13') {
|
|
2403
|
+
//light
|
|
2404
|
+
let color = '#fff';
|
|
2405
|
+
let border = 'border:#111 2px solid;';
|
|
2406
|
+
let svgfill = '';
|
|
2407
|
+
|
|
2408
|
+
{
|
|
2409
|
+
border = `border:${color} 2px solid;`;
|
|
2410
|
+
svgfill = `fill:${color};`;
|
|
2411
|
+
}
|
|
2412
|
+
|
|
2413
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="7" style="width: 40px;margin-left: -20px;height: 35px;">
|
|
2414
|
+
<a href="#" style="background:none;border-radius:unset;${border};">
|
|
2415
|
+
<svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2416
|
+
<g>
|
|
2417
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2418
|
+
</g>
|
|
2419
|
+
</svg>
|
|
2420
|
+
</a>
|
|
2421
|
+
</div>`;
|
|
2422
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2423
|
+
}
|
|
2424
|
+
|
|
2425
|
+
if (s === '14') {
|
|
2426
|
+
//dark
|
|
2427
|
+
let color = '#000';
|
|
2428
|
+
let border = 'border:#111 2px solid;';
|
|
2429
|
+
let svgfill = '';
|
|
2430
|
+
|
|
2431
|
+
{
|
|
2432
|
+
border = `border:${color} 2px solid;`;
|
|
2433
|
+
svgfill = `fill:${color};`;
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2436
|
+
let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="7" style="width: 40px;margin-left: -20px;height: 35px;">
|
|
2437
|
+
<a href="#" style="background:none;border-radius:unset;${border}">
|
|
2438
|
+
<svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2439
|
+
<g>
|
|
2440
|
+
<path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
|
|
2441
|
+
</g>
|
|
2442
|
+
</svg>
|
|
2443
|
+
</a>
|
|
2444
|
+
</div>`;
|
|
2445
|
+
section.insertAdjacentHTML('beforeend', html);
|
|
2446
|
+
} // let refSection = section.querySelector('.is-section-tool');
|
|
2447
|
+
// refSection.insertAdjacentHTML('beforebegin', html);
|
|
2448
|
+
|
|
2449
|
+
|
|
2450
|
+
const scrollButton = section.querySelector('.is-arrow-down a');
|
|
2451
|
+
if (scrollButton) scrollButton.addEventListener('click', e => {
|
|
2452
|
+
// section.nextElementSibling.scrollIntoView({ behavior: 'smooth' });
|
|
2453
|
+
this.builder.scrollTo(section.nextElementSibling);
|
|
2454
|
+
e.preventDefault();
|
|
2455
|
+
e.stopImmediatePropagation();
|
|
2456
|
+
return false;
|
|
2457
|
+
});
|
|
2458
|
+
}
|
|
2459
|
+
|
|
2143
2460
|
}
|
|
2144
2461
|
|
|
2145
2462
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -7350,7 +7667,7 @@ class EditBox {
|
|
|
7350
7667
|
this.builder = builder;
|
|
7351
7668
|
this.builderStuff = this.builder.builderStuff;
|
|
7352
7669
|
const builderStuff = this.builderStuff;
|
|
7353
|
-
let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('
|
|
7670
|
+
let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="380" style="width:40px;border-left:none">380</button>' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1020" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div class="box-bgimage-preview"></div>' + '<div style="display: flex">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
7354
7671
|
html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Top/Bottom Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Left/Right Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
7355
7672
|
dom$G.appendHtml(builderStuff, html); // Box Tool
|
|
7356
7673
|
|
|
@@ -7480,6 +7797,27 @@ class EditBox {
|
|
|
7480
7797
|
this.builder.hideModal(modalEditBox); //Open divSidebarTypography
|
|
7481
7798
|
|
|
7482
7799
|
builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
|
|
7800
|
+
//--- overlay (this needs overlay to prevent activeBox change) ---
|
|
7801
|
+
|
|
7802
|
+
const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
|
|
7803
|
+
dom$G.appendHtml(builderStuff, overlayHtml);
|
|
7804
|
+
const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
|
|
7805
|
+
if (modalOverlay) modalOverlay.addEventListener('click', () => {
|
|
7806
|
+
// Close all opened sidebar
|
|
7807
|
+
const overlay = document.querySelector('.is-sidebar-overlay');
|
|
7808
|
+
|
|
7809
|
+
if (overlay) {
|
|
7810
|
+
overlay.remove();
|
|
7811
|
+
document.body.style.overflowY = '';
|
|
7812
|
+
}
|
|
7813
|
+
|
|
7814
|
+
document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
|
|
7815
|
+
dom$G.removeClass(elm, 'active');
|
|
7816
|
+
});
|
|
7817
|
+
document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
|
|
7818
|
+
dom$G.removeClass(elm, 'active');
|
|
7819
|
+
});
|
|
7820
|
+
}); //--- /overlay ---
|
|
7483
7821
|
|
|
7484
7822
|
builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
|
|
7485
7823
|
builderStuff.querySelector('.typo-target-default').style.display = 'none';
|
|
@@ -8373,12 +8711,8 @@ class EditBox {
|
|
|
8373
8711
|
modalEditBox.querySelector('#chkAnimateBg').checked = false;
|
|
8374
8712
|
}
|
|
8375
8713
|
|
|
8376
|
-
if (overlayBg.getAttribute('
|
|
8377
|
-
|
|
8378
|
-
modalEditBox.querySelector('#chkParallaxBg').checked = true;
|
|
8379
|
-
} else {
|
|
8380
|
-
modalEditBox.querySelector('#chkParallaxBg').checked = false;
|
|
8381
|
-
}
|
|
8714
|
+
if (overlayBg.getAttribute('data-top-bottom') || overlayBg.getAttribute('data-bottom-top')) {
|
|
8715
|
+
modalEditBox.querySelector('#chkParallaxBg').checked = true;
|
|
8382
8716
|
} else {
|
|
8383
8717
|
modalEditBox.querySelector('#chkParallaxBg').checked = false;
|
|
8384
8718
|
}
|
|
@@ -8957,8 +9291,8 @@ class EditBox {
|
|
|
8957
9291
|
if (!overlayBg) return;
|
|
8958
9292
|
|
|
8959
9293
|
if (this.modalEditBox.querySelector('#chkParallaxBg').checked) {
|
|
8960
|
-
overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-120px) scale(1
|
|
8961
|
-
overlayBg.setAttribute('data-top-bottom', 'transform:translateY(
|
|
9294
|
+
overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-120px) scale(1);');
|
|
9295
|
+
overlayBg.setAttribute('data-top-bottom', 'transform:translateY(50px) scale(1.4)');
|
|
8962
9296
|
this.builder.settings.onRender();
|
|
8963
9297
|
} else {
|
|
8964
9298
|
dom$G.removeClass(overlayBg, 'skrollable');
|
|
@@ -61406,12 +61740,6 @@ class Preferences {
|
|
|
61406
61740
|
|
|
61407
61741
|
}
|
|
61408
61742
|
|
|
61409
|
-
/*
|
|
61410
|
-
LATER:
|
|
61411
|
-
- Get/show current font size, line height & letter spacing
|
|
61412
|
-
- Click toggle button shows gray highlight
|
|
61413
|
-
- Image di luar domain gak bisa di-edit (kasih warning)
|
|
61414
|
-
*/
|
|
61415
61743
|
const dom$5 = new Dom();
|
|
61416
61744
|
|
|
61417
61745
|
class Rte {
|
|
@@ -63276,23 +63604,51 @@ class Rte {
|
|
|
63276
63604
|
} // var text = dom.getSelected();
|
|
63277
63605
|
|
|
63278
63606
|
|
|
63279
|
-
this.builder.uo.saveForUndo();
|
|
63280
|
-
|
|
63607
|
+
this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
|
|
63608
|
+
|
|
63609
|
+
let isInPx = false;
|
|
63610
|
+
let currentLineHeight = elm.style.lineHeight;
|
|
63611
|
+
|
|
63612
|
+
if (currentLineHeight) {
|
|
63613
|
+
if (currentLineHeight.indexOf('px') === -1) {
|
|
63614
|
+
currentLineHeight = parseFloat(currentLineHeight);
|
|
63615
|
+
} else {
|
|
63616
|
+
isInPx = true;
|
|
63617
|
+
}
|
|
63618
|
+
} else {
|
|
63619
|
+
isInPx = true;
|
|
63620
|
+
}
|
|
63621
|
+
|
|
63622
|
+
if (isInPx) {
|
|
63623
|
+
let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
|
|
63624
|
+
currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
|
|
63625
|
+
|
|
63626
|
+
if (fontSize > currentLineHeight) {
|
|
63627
|
+
currentLineHeight = fontSize / currentLineHeight;
|
|
63628
|
+
} else if (fontSize < currentLineHeight) {
|
|
63629
|
+
currentLineHeight = currentLineHeight / fontSize;
|
|
63630
|
+
} else {
|
|
63631
|
+
currentLineHeight = 1;
|
|
63632
|
+
}
|
|
63633
|
+
}
|
|
63634
|
+
|
|
63281
63635
|
let lineheight;
|
|
63282
63636
|
|
|
63283
63637
|
if (num === '+') {
|
|
63284
|
-
lineheight = currentLineHeight +
|
|
63638
|
+
lineheight = currentLineHeight + 0.2;
|
|
63285
63639
|
} else if (num === '-') {
|
|
63286
|
-
lineheight = currentLineHeight -
|
|
63640
|
+
lineheight = currentLineHeight - 0.2;
|
|
63287
63641
|
} else if (num === '') {
|
|
63288
63642
|
lineheight = '';
|
|
63289
63643
|
} else {
|
|
63290
63644
|
lineheight = num;
|
|
63291
63645
|
}
|
|
63646
|
+
|
|
63647
|
+
if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
|
|
63648
|
+
|
|
63292
63649
|
/** mod by Jack */
|
|
63293
63650
|
//elm.style.lineHeight = lineheight;
|
|
63294
63651
|
|
|
63295
|
-
|
|
63296
63652
|
dom$5.doFunction(elm, function (theEl) {
|
|
63297
63653
|
theEl.style.lineHeight = lineheight;
|
|
63298
63654
|
}, true); //save selection
|
|
@@ -71756,9 +72112,7 @@ class ContentBox {
|
|
|
71756
72112
|
btns.forEach(btn => {
|
|
71757
72113
|
btn.style.color = this.editor.styleModalColor;
|
|
71758
72114
|
});
|
|
71759
|
-
const sectionIframe = document.querySelector('#ifrIdeasPanel');
|
|
71760
|
-
// console.log(doc);
|
|
71761
|
-
|
|
72115
|
+
const sectionIframe = document.querySelector('#ifrIdeasPanel');
|
|
71762
72116
|
if (sectionIframe.contentWindow.applyParentStyles) sectionIframe.contentWindow.applyParentStyles();
|
|
71763
72117
|
}
|
|
71764
72118
|
|
|
@@ -71863,12 +72217,12 @@ class ContentBox {
|
|
|
71863
72217
|
const btnNew = builderStuff.querySelector('#' + btnId);
|
|
71864
72218
|
btnNew.addEventListener('click', () => {
|
|
71865
72219
|
if (btn.src) {
|
|
71866
|
-
if (!dom.hasClass(
|
|
72220
|
+
if (!dom.hasClass(btnNew, 'active')) {
|
|
71867
72221
|
dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
|
|
71868
72222
|
dom.removeClass(builderStuff.querySelector('.is-sidebar-content'), 'active');
|
|
71869
72223
|
document.body.style.overflowY = '';
|
|
71870
|
-
dom.addClass(
|
|
71871
|
-
var id =
|
|
72224
|
+
dom.addClass(btnNew, 'active');
|
|
72225
|
+
var id = btnNew.getAttribute('data-content');
|
|
71872
72226
|
dom.addClass(builderStuff.querySelector('#' + id), 'active');
|
|
71873
72227
|
var iframe = builderStuff.querySelector('#' + id + ' iframe');
|
|
71874
72228
|
|
|
@@ -71965,6 +72319,12 @@ class ContentBox {
|
|
|
71965
72319
|
}
|
|
71966
72320
|
|
|
71967
72321
|
loadHtml(html) {
|
|
72322
|
+
const wrapper = this.wrapperEl;
|
|
72323
|
+
|
|
72324
|
+
if (!wrapper.style.opacity) {
|
|
72325
|
+
wrapper.style.opacity = '0';
|
|
72326
|
+
}
|
|
72327
|
+
|
|
71968
72328
|
if (!this.editor) {
|
|
71969
72329
|
// Wait for the ContentBuilder init complete
|
|
71970
72330
|
setTimeout(() => {
|
|
@@ -71975,7 +72335,6 @@ class ContentBox {
|
|
|
71975
72335
|
|
|
71976
72336
|
|
|
71977
72337
|
let range = document.createRange();
|
|
71978
|
-
const wrapper = this.wrapperEl;
|
|
71979
72338
|
wrapper.innerHTML = '';
|
|
71980
72339
|
wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
71981
72340
|
|