@innovastudio/contentbox 1.5.1 → 1.5.2
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.
|
@@ -444,46 +444,6 @@ const prepareSvgIcons$1 = builder => {
|
|
|
444
444
|
<circle cx="12" cy="12" r="3"></circle>
|
|
445
445
|
</symbol>
|
|
446
446
|
|
|
447
|
-
<symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
448
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
449
|
-
<rect x="13" y="8" width="8" height="12" rx="1"></rect>
|
|
450
|
-
<path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
|
|
451
|
-
<line x1="16" y1="9" x2="18" y2="9"></line>
|
|
452
|
-
</symbol>
|
|
453
|
-
|
|
454
|
-
<symbol id="icon-device-desktop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
455
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
456
|
-
<rect x="3" y="4" width="18" height="12" rx="1"></rect>
|
|
457
|
-
<line x1="7" y1="20" x2="17" y2="20"></line>
|
|
458
|
-
<line x1="9" y1="16" x2="9" y2="20"></line>
|
|
459
|
-
<line x1="15" y1="16" x2="15" y2="20"></line>
|
|
460
|
-
</symbol>
|
|
461
|
-
|
|
462
|
-
<symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
463
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
464
|
-
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
|
|
465
|
-
<path d="M20 4v5h-5"></path>
|
|
466
|
-
</symbol>
|
|
467
|
-
|
|
468
|
-
<symbol id="icon-device-mobile" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
469
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
470
|
-
<rect x="6" y="3" width="12" height="18" rx="2"></rect>
|
|
471
|
-
<line x1="11" y1="4" x2="13" y2="4"></line>
|
|
472
|
-
<line x1="12" y1="17" x2="12" y2="17.01"></line>
|
|
473
|
-
</symbol>
|
|
474
|
-
|
|
475
|
-
<symbol id="icon-device-laptop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
476
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
477
|
-
<line x1="3" y1="19" x2="21" y2="19"></line>
|
|
478
|
-
<rect x="5" y="6" width="14" height="10" rx="1"></rect>
|
|
479
|
-
</symbol>
|
|
480
|
-
|
|
481
|
-
<symbol id="icon-device-tablet" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
482
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
483
|
-
<rect x="5" y="3" width="14" height="18" rx="1"></rect>
|
|
484
|
-
<circle cx="12" cy="17" r="1"></circle>
|
|
485
|
-
</symbol>
|
|
486
|
-
|
|
487
447
|
|
|
488
448
|
</defs>
|
|
489
449
|
</svg>`;
|
|
@@ -1915,7 +1875,11 @@ class SideBar {
|
|
|
1915
1875
|
//To Tailwind
|
|
1916
1876
|
if (framework == 'tailwind') {
|
|
1917
1877
|
html = html.replace(new RegExp(' container', 'g'), ' container');
|
|
1918
|
-
|
|
1878
|
+
|
|
1879
|
+
//html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
|
|
1880
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
|
|
1881
|
+
html = html.replace(new RegExp('"row', 'g'), '"' + 'flex flex-col md:flex-row');
|
|
1882
|
+
|
|
1919
1883
|
html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
|
|
1920
1884
|
html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');
|
|
1921
1885
|
html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');
|
|
@@ -1964,7 +1928,11 @@ class SideBar {
|
|
|
1964
1928
|
//To UIKit
|
|
1965
1929
|
if (framework == 'uikit') {
|
|
1966
1930
|
html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');
|
|
1967
|
-
|
|
1931
|
+
|
|
1932
|
+
// html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');
|
|
1933
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
|
|
1934
|
+
html = html.replace(new RegExp('"row', 'g'), '"' + 'uk-grid');
|
|
1935
|
+
|
|
1968
1936
|
html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');
|
|
1969
1937
|
html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');
|
|
1970
1938
|
html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');
|
|
@@ -1981,7 +1949,11 @@ class SideBar {
|
|
|
1981
1949
|
//To Material
|
|
1982
1950
|
if (framework == 'material') {
|
|
1983
1951
|
html = html.replace(new RegExp(' container', 'g'), '');
|
|
1984
|
-
|
|
1952
|
+
|
|
1953
|
+
// html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');
|
|
1954
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
|
|
1955
|
+
html = html.replace(new RegExp('"row', 'g'), '"' + 'mdl-grid');
|
|
1956
|
+
|
|
1985
1957
|
html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');
|
|
1986
1958
|
html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');
|
|
1987
1959
|
html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');
|
|
@@ -4046,9 +4018,16 @@ class EditSection {
|
|
|
4046
4018
|
<button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
|
4047
4019
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
4048
4020
|
</button>
|
|
4049
|
-
<button title="${out('Tablet')}" class="input-device" data-value="
|
|
4021
|
+
<button title="${out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
4022
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
4023
|
+
</button>
|
|
4024
|
+
<button title="${out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
4050
4025
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
4051
4026
|
</button>
|
|
4027
|
+
<!--
|
|
4028
|
+
<button title="${out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
4029
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
4030
|
+
</button>-->
|
|
4052
4031
|
<button title="${out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
|
4053
4032
|
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
4054
4033
|
</button>
|
|
@@ -4056,11 +4035,11 @@ class EditSection {
|
|
|
4056
4035
|
|
|
4057
4036
|
<div style="padding-top:0;padding-bottom:3px;">${out('Visibility')}:</div>
|
|
4058
4037
|
<div class="div-visibility" style="display:flex;">
|
|
4059
|
-
<button title="${out('Visible')}" class="input-visible on"
|
|
4038
|
+
<button title="${out('Visible')}" class="input-visible on" style="width:100px;height:34px;">
|
|
4060
4039
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
|
|
4061
4040
|
<span>${out('Visible')}</span>
|
|
4062
4041
|
</button>
|
|
4063
|
-
<button title="${out('Hidden')}" class="input-hidden"
|
|
4042
|
+
<button title="${out('Hidden')}" class="input-hidden" style="width:100px;height:34px;">
|
|
4064
4043
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
|
|
4065
4044
|
<span>${out('Hidden')}</span>
|
|
4066
4045
|
</button>
|
|
@@ -4451,6 +4430,7 @@ class EditSection {
|
|
|
4451
4430
|
btnVisible.addEventListener('click', () => {
|
|
4452
4431
|
let section = this.builder.activeSection;
|
|
4453
4432
|
if (!section) return;
|
|
4433
|
+
this.builder.editor.saveForUndo();
|
|
4454
4434
|
section.classList.remove('hideonmobile');
|
|
4455
4435
|
let divTarget = modalEditSection.querySelector('.div-target');
|
|
4456
4436
|
let target = this.builder.editor.responsive.readTarget(divTarget);
|
|
@@ -4459,16 +4439,21 @@ class EditSection {
|
|
|
4459
4439
|
section.classList.remove('xs-hidden');
|
|
4460
4440
|
} else if (target === 'sm') {
|
|
4461
4441
|
section.classList.remove('sm-hidden');
|
|
4442
|
+
} else if (target === 'md') {
|
|
4443
|
+
section.classList.remove('md-hidden');
|
|
4462
4444
|
} else if (target === '') {
|
|
4463
4445
|
section.classList.remove('desktop-hidden');
|
|
4464
4446
|
}
|
|
4465
4447
|
|
|
4466
4448
|
btnVisible.classList.add('on');
|
|
4467
|
-
btnHidden.classList.remove('on');
|
|
4449
|
+
btnHidden.classList.remove('on'); //Trigger Change event
|
|
4450
|
+
|
|
4451
|
+
this.builder.onChange();
|
|
4468
4452
|
});
|
|
4469
4453
|
btnHidden.addEventListener('click', () => {
|
|
4470
4454
|
let section = this.builder.activeSection;
|
|
4471
4455
|
if (!section) return;
|
|
4456
|
+
this.builder.editor.saveForUndo();
|
|
4472
4457
|
section.classList.remove('hideonmobile');
|
|
4473
4458
|
let divTarget = modalEditSection.querySelector('.div-target');
|
|
4474
4459
|
let target = this.builder.editor.responsive.readTarget(divTarget);
|
|
@@ -4477,12 +4462,16 @@ class EditSection {
|
|
|
4477
4462
|
section.classList.add('xs-hidden');
|
|
4478
4463
|
} else if (target === 'sm') {
|
|
4479
4464
|
section.classList.add('sm-hidden');
|
|
4465
|
+
} else if (target === 'md') {
|
|
4466
|
+
section.classList.add('md-hidden');
|
|
4480
4467
|
} else if (target === '') {
|
|
4481
4468
|
section.classList.add('desktop-hidden');
|
|
4482
4469
|
}
|
|
4483
4470
|
|
|
4484
4471
|
btnVisible.classList.remove('on');
|
|
4485
|
-
btnHidden.classList.add('on');
|
|
4472
|
+
btnHidden.classList.add('on'); //Trigger Change event
|
|
4473
|
+
|
|
4474
|
+
this.builder.onChange();
|
|
4486
4475
|
});
|
|
4487
4476
|
} // Section Visibility
|
|
4488
4477
|
|
|
@@ -10670,7 +10659,9 @@ class EditBox {
|
|
|
10670
10659
|
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>' +
|
|
10671
10660
|
'<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
|
|
10672
10661
|
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;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: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
10673
|
-
html += '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:
|
|
10662
|
+
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + // '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' +
|
|
10663
|
+
// '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' +
|
|
10664
|
+
'<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>';
|
|
10674
10665
|
html += '<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>') +
|
|
10675
10666
|
/*
|
|
10676
10667
|
'<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
@@ -11292,6 +11283,32 @@ class EditBox {
|
|
|
11292
11283
|
this.builder.settings.onChange();
|
|
11293
11284
|
});
|
|
11294
11285
|
});
|
|
11286
|
+
const btnContentSpacing = modalEditBox.querySelectorAll('.cmd-box-content-spacing');
|
|
11287
|
+
btnContentSpacing.forEach(btn => {
|
|
11288
|
+
btn.addEventListener('click', () => {
|
|
11289
|
+
this.builder.editor.saveForUndo();
|
|
11290
|
+
let s = btn.getAttribute('data-value');
|
|
11291
|
+
let activeBox = this.builder.activeBox;
|
|
11292
|
+
let container = activeBox.querySelector('.is-container');
|
|
11293
|
+
container.classList.remove('content-py-0');
|
|
11294
|
+
container.classList.remove('content-py-10');
|
|
11295
|
+
container.classList.remove('content-py-20');
|
|
11296
|
+
container.classList.remove('content-py-30');
|
|
11297
|
+
container.classList.remove('content-py-40');
|
|
11298
|
+
container.classList.remove('content-py-50');
|
|
11299
|
+
container.classList.remove('content-py-60');
|
|
11300
|
+
container.classList.remove('content-py-70');
|
|
11301
|
+
container.classList.remove('content-py-80');
|
|
11302
|
+
if (s !== '') container.classList.add(`content-py-${s}`);
|
|
11303
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-box-content-spacing');
|
|
11304
|
+
btnPos.forEach(btn => {
|
|
11305
|
+
dom$l.removeClass(btn, 'on');
|
|
11306
|
+
});
|
|
11307
|
+
dom$l.addClass(btn, 'on'); //Trigger Change event
|
|
11308
|
+
|
|
11309
|
+
this.builder.settings.onChange();
|
|
11310
|
+
});
|
|
11311
|
+
});
|
|
11295
11312
|
const btnBoxContentPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
|
|
11296
11313
|
btnBoxContentPos.forEach(btn => {
|
|
11297
11314
|
btn.addEventListener('click', () => {
|
|
@@ -13006,6 +13023,49 @@ class EditBox {
|
|
|
13006
13023
|
}
|
|
13007
13024
|
}
|
|
13008
13025
|
|
|
13026
|
+
const btnContentSpacing = modalEditBox.querySelectorAll('.cmd-box-content-spacing');
|
|
13027
|
+
btnContentSpacing.forEach(btn => {
|
|
13028
|
+
dom$l.removeClass(btn, 'on');
|
|
13029
|
+
});
|
|
13030
|
+
|
|
13031
|
+
if (container) {
|
|
13032
|
+
if (container.classList.contains('content-py-0')) {
|
|
13033
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="0"]'), 'on');
|
|
13034
|
+
}
|
|
13035
|
+
|
|
13036
|
+
if (container.classList.contains('content-py-10')) {
|
|
13037
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="10"]'), 'on');
|
|
13038
|
+
}
|
|
13039
|
+
|
|
13040
|
+
if (container.classList.contains('content-py-20')) {
|
|
13041
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="20"]'), 'on');
|
|
13042
|
+
}
|
|
13043
|
+
|
|
13044
|
+
if (container.classList.contains('content-py-30')) {
|
|
13045
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="30"]'), 'on');
|
|
13046
|
+
}
|
|
13047
|
+
|
|
13048
|
+
if (container.classList.contains('content-py-40')) {
|
|
13049
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="40"]'), 'on');
|
|
13050
|
+
}
|
|
13051
|
+
|
|
13052
|
+
if (container.classList.contains('content-py-50')) {
|
|
13053
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="50"]'), 'on');
|
|
13054
|
+
}
|
|
13055
|
+
|
|
13056
|
+
if (container.classList.contains('content-py-60')) {
|
|
13057
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="60"]'), 'on');
|
|
13058
|
+
}
|
|
13059
|
+
|
|
13060
|
+
if (container.classList.contains('content-py-70')) {
|
|
13061
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="70"]'), 'on');
|
|
13062
|
+
}
|
|
13063
|
+
|
|
13064
|
+
if (container.classList.contains('content-py-80')) {
|
|
13065
|
+
dom$l.addClass(modalEditBox.querySelector('.cmd-box-content-spacing[data-value="80"]'), 'on');
|
|
13066
|
+
}
|
|
13067
|
+
}
|
|
13068
|
+
|
|
13009
13069
|
if (modalEditBox.querySelector('#divBoxImage').style.display === 'flex' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none') {
|
|
13010
13070
|
modalEditBox.querySelector('#tabBoxGeneral').click();
|
|
13011
13071
|
}
|
|
@@ -18390,13 +18450,36 @@ class Util$1 {
|
|
|
18390
18450
|
// return;
|
|
18391
18451
|
// }
|
|
18392
18452
|
|
|
18453
|
+
let smHidden = false;
|
|
18454
|
+
let mdHidden = false;
|
|
18393
18455
|
Array.from(row.children).map(item => {
|
|
18394
18456
|
if (item.classList.contains('is-row-tool')) return;
|
|
18395
18457
|
if (item.classList.contains('is-col-tool')) return;
|
|
18396
18458
|
if (item.classList.contains('is-rowadd-tool')) return;
|
|
18397
18459
|
item.style.width = '';
|
|
18398
18460
|
item.style.flex = '';
|
|
18461
|
+
|
|
18462
|
+
if (item.classList.contains('sm-hidden')) {
|
|
18463
|
+
smHidden = true;
|
|
18464
|
+
}
|
|
18465
|
+
|
|
18466
|
+
if (item.classList.contains('md-hidden')) {
|
|
18467
|
+
mdHidden = true;
|
|
18468
|
+
}
|
|
18399
18469
|
});
|
|
18470
|
+
|
|
18471
|
+
if (smHidden) {
|
|
18472
|
+
row.classList.add('sm-autofit');
|
|
18473
|
+
} else {
|
|
18474
|
+
row.classList.remove('sm-autofit');
|
|
18475
|
+
}
|
|
18476
|
+
|
|
18477
|
+
if (mdHidden) {
|
|
18478
|
+
row.classList.add('md-autofit');
|
|
18479
|
+
} else {
|
|
18480
|
+
row.classList.remove('md-autofit');
|
|
18481
|
+
}
|
|
18482
|
+
|
|
18400
18483
|
let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
|
|
18401
18484
|
|
|
18402
18485
|
if (row.querySelector('.is-row-overlay')) {
|
|
@@ -30072,6 +30155,11 @@ const prepareSvgIcons = builder => {
|
|
|
30072
30155
|
|
|
30073
30156
|
|
|
30074
30157
|
|
|
30158
|
+
<symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
30159
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
30160
|
+
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
|
|
30161
|
+
<path d="M20 4v5h-5"></path>
|
|
30162
|
+
</symbol>
|
|
30075
30163
|
<symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
30076
30164
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
30077
30165
|
<rect x="13" y="8" width="8" height="12" rx="1"></rect>
|
|
@@ -32554,6 +32642,7 @@ class Draggable$1 {
|
|
|
32554
32642
|
dragStart(e) {
|
|
32555
32643
|
if (!e.target.hasAttribute('draggable')) return; //any child element (ex. close button) should not be draggable. LATER: revew.
|
|
32556
32644
|
|
|
32645
|
+
e.target.parentNode.style.transition = 'none';
|
|
32557
32646
|
dragActive = true;
|
|
32558
32647
|
activeDraggableBox = e.target.parentElement;
|
|
32559
32648
|
var xOffset;
|
|
@@ -32587,7 +32676,8 @@ class Draggable$1 {
|
|
|
32587
32676
|
|
|
32588
32677
|
dragEnd(e) {
|
|
32589
32678
|
if (!e.target.hasAttribute('draggable')) return; //any child element (ex. close button) should not be draggable. LATER: revew.
|
|
32590
|
-
|
|
32679
|
+
|
|
32680
|
+
e.target.parentNode.style.transition = ''; //Update
|
|
32591
32681
|
|
|
32592
32682
|
currentX = activeDraggableBox.getAttribute('data-currentX');
|
|
32593
32683
|
currentY = activeDraggableBox.getAttribute('data-currentY');
|
|
@@ -71303,7 +71393,13 @@ class RowTool {
|
|
|
71303
71393
|
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
|
71304
71394
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
71305
71395
|
</button>
|
|
71306
|
-
|
|
71396
|
+
<!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
71397
|
+
<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-device-laptop"></use></svg>
|
|
71398
|
+
</button>-->
|
|
71399
|
+
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
71400
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
71401
|
+
</button>
|
|
71402
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
71307
71403
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
71308
71404
|
</button>
|
|
71309
71405
|
<button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
|
@@ -71555,6 +71651,7 @@ class RowTool {
|
|
|
71555
71651
|
btnVisible.addEventListener('click', () => {
|
|
71556
71652
|
let row = util.rowSelected();
|
|
71557
71653
|
if (!row) return;
|
|
71654
|
+
this.builder.uo.saveForUndo();
|
|
71558
71655
|
row.classList.remove('hideonmobile');
|
|
71559
71656
|
let divTarget = this.rowSettings.querySelector('.div-target');
|
|
71560
71657
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -71563,16 +71660,21 @@ class RowTool {
|
|
|
71563
71660
|
row.classList.remove('xs-hidden');
|
|
71564
71661
|
} else if (target === 'sm') {
|
|
71565
71662
|
row.classList.remove('sm-hidden');
|
|
71663
|
+
} else if (target === 'md') {
|
|
71664
|
+
row.classList.remove('md-hidden');
|
|
71566
71665
|
} else if (target === '') {
|
|
71567
71666
|
row.classList.remove('desktop-hidden');
|
|
71568
71667
|
}
|
|
71569
71668
|
|
|
71570
71669
|
btnVisible.classList.add('on');
|
|
71571
|
-
btnHidden.classList.remove('on');
|
|
71670
|
+
btnHidden.classList.remove('on'); //Trigger Change event
|
|
71671
|
+
|
|
71672
|
+
this.builder.opts.onChange();
|
|
71572
71673
|
});
|
|
71573
71674
|
btnHidden.addEventListener('click', () => {
|
|
71574
71675
|
let row = util.rowSelected();
|
|
71575
71676
|
if (!row) return;
|
|
71677
|
+
this.builder.uo.saveForUndo();
|
|
71576
71678
|
row.classList.remove('hideonmobile');
|
|
71577
71679
|
let divTarget = this.rowSettings.querySelector('.div-target');
|
|
71578
71680
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -71581,12 +71683,16 @@ class RowTool {
|
|
|
71581
71683
|
row.classList.add('xs-hidden');
|
|
71582
71684
|
} else if (target === 'sm') {
|
|
71583
71685
|
row.classList.add('sm-hidden');
|
|
71686
|
+
} else if (target === 'md') {
|
|
71687
|
+
row.classList.add('md-hidden');
|
|
71584
71688
|
} else if (target === '') {
|
|
71585
71689
|
row.classList.add('desktop-hidden');
|
|
71586
71690
|
}
|
|
71587
71691
|
|
|
71588
71692
|
btnVisible.classList.remove('on');
|
|
71589
|
-
btnHidden.classList.add('on');
|
|
71693
|
+
btnHidden.classList.add('on'); //Trigger Change event
|
|
71694
|
+
|
|
71695
|
+
this.builder.opts.onChange();
|
|
71590
71696
|
}); //More
|
|
71591
71697
|
|
|
71592
71698
|
let inpRowId = rowSettings.querySelector('.input-row-id');
|
|
@@ -72278,7 +72384,13 @@ class ColumnTool {
|
|
|
72278
72384
|
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
|
72279
72385
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
72280
72386
|
</button>
|
|
72281
|
-
|
|
72387
|
+
<!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
72388
|
+
<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-device-laptop"></use></svg>
|
|
72389
|
+
</button>-->
|
|
72390
|
+
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
72391
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
72392
|
+
</button>
|
|
72393
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
72282
72394
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
72283
72395
|
</button>
|
|
72284
72396
|
<button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
|
@@ -72288,11 +72400,11 @@ class ColumnTool {
|
|
|
72288
72400
|
|
|
72289
72401
|
<div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
|
|
72290
72402
|
<div class="div-visibility" style="display:flex;">
|
|
72291
|
-
<button title="${util.out('Visible')}" class="input-visible on"
|
|
72403
|
+
<button title="${util.out('Visible')}" class="input-visible on" style="width:100px;height:34px;">
|
|
72292
72404
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
|
|
72293
72405
|
<span>${util.out('Visible')}</span>
|
|
72294
72406
|
</button>
|
|
72295
|
-
<button title="${util.out('Hidden')}" class="input-hidden"
|
|
72407
|
+
<button title="${util.out('Hidden')}" class="input-hidden" style="width:100px;height:34px;">
|
|
72296
72408
|
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
|
|
72297
72409
|
<span>${util.out('Hidden')}</span>
|
|
72298
72410
|
</button>
|
|
@@ -73984,6 +74096,7 @@ class ColumnTool {
|
|
|
73984
74096
|
btnVisible.addEventListener('click', () => {
|
|
73985
74097
|
let cell = this.util.cellSelected();
|
|
73986
74098
|
if (!cell) return;
|
|
74099
|
+
this.builder.uo.saveForUndo();
|
|
73987
74100
|
cell.classList.remove('hideonmobile');
|
|
73988
74101
|
let divTarget = this.cellSettings.querySelector('.div-target');
|
|
73989
74102
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -73992,16 +74105,23 @@ class ColumnTool {
|
|
|
73992
74105
|
cell.classList.remove('xs-hidden');
|
|
73993
74106
|
} else if (target === 'sm') {
|
|
73994
74107
|
cell.classList.remove('sm-hidden');
|
|
74108
|
+
cell.parentNode.classList.remove('sm-autofit');
|
|
74109
|
+
} else if (target === 'md') {
|
|
74110
|
+
cell.classList.remove('md-hidden');
|
|
74111
|
+
cell.parentNode.classList.remove('md-autofit');
|
|
73995
74112
|
} else if (target === '') {
|
|
73996
74113
|
cell.classList.remove('desktop-hidden');
|
|
73997
74114
|
}
|
|
73998
74115
|
|
|
73999
74116
|
btnVisible.classList.add('on');
|
|
74000
|
-
btnHidden.classList.remove('on');
|
|
74117
|
+
btnHidden.classList.remove('on'); //Trigger Change event
|
|
74118
|
+
|
|
74119
|
+
this.builder.opts.onChange();
|
|
74001
74120
|
});
|
|
74002
74121
|
btnHidden.addEventListener('click', () => {
|
|
74003
74122
|
let cell = this.util.cellSelected();
|
|
74004
74123
|
if (!cell) return;
|
|
74124
|
+
this.builder.uo.saveForUndo();
|
|
74005
74125
|
cell.classList.remove('hideonmobile');
|
|
74006
74126
|
let divTarget = this.cellSettings.querySelector('.div-target');
|
|
74007
74127
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -74010,12 +74130,18 @@ class ColumnTool {
|
|
|
74010
74130
|
cell.classList.add('xs-hidden');
|
|
74011
74131
|
} else if (target === 'sm') {
|
|
74012
74132
|
cell.classList.add('sm-hidden');
|
|
74133
|
+
cell.parentNode.classList.add('sm-autofit');
|
|
74134
|
+
} else if (target === 'md') {
|
|
74135
|
+
cell.classList.add('md-hidden');
|
|
74136
|
+
cell.parentNode.classList.add('md-autofit');
|
|
74013
74137
|
} else if (target === '') {
|
|
74014
74138
|
cell.classList.add('desktop-hidden');
|
|
74015
74139
|
}
|
|
74016
74140
|
|
|
74017
74141
|
btnVisible.classList.remove('on');
|
|
74018
|
-
btnHidden.classList.add('on');
|
|
74142
|
+
btnHidden.classList.add('on'); //Trigger Change event
|
|
74143
|
+
|
|
74144
|
+
this.builder.opts.onChange();
|
|
74019
74145
|
});
|
|
74020
74146
|
}
|
|
74021
74147
|
|
|
@@ -75044,7 +75170,13 @@ class ElementGeneralStyles {
|
|
|
75044
75170
|
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
|
75045
75171
|
<svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
75046
75172
|
</button>
|
|
75047
|
-
|
|
75173
|
+
<!--<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
75174
|
+
<svg class="is-icon-flex" style="width:19px;height:19px;flex:none"><use xlink:href="#icon-device-laptop"></use></svg>
|
|
75175
|
+
</button>-->
|
|
75176
|
+
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
75177
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;flex:none;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
75178
|
+
</button>
|
|
75179
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
75048
75180
|
<svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
75049
75181
|
</button>
|
|
75050
75182
|
<button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
|
@@ -75055,11 +75187,11 @@ class ElementGeneralStyles {
|
|
|
75055
75187
|
<div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
|
|
75056
75188
|
<div class="div-visibility" style="display:flex;">
|
|
75057
75189
|
<button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
|
|
75058
|
-
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
|
|
75190
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-eye"></use></svg>
|
|
75059
75191
|
<span>${util.out('Visible')}</span>
|
|
75060
75192
|
</button>
|
|
75061
75193
|
<button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
|
|
75062
|
-
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
|
|
75194
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;flex:none"><use xlink:href="#icon-eye-off"></use></svg>
|
|
75063
75195
|
<span>${util.out('Hidden')}</span>
|
|
75064
75196
|
</button>
|
|
75065
75197
|
</div>
|
|
@@ -75238,6 +75370,7 @@ class ElementGeneralStyles {
|
|
|
75238
75370
|
let btnHidden = panelStuff.querySelector('.input-hidden');
|
|
75239
75371
|
btnVisible.addEventListener('click', () => {
|
|
75240
75372
|
const elm = this.builder.inspectedElement;
|
|
75373
|
+
this.builder.uo.saveForUndo();
|
|
75241
75374
|
elm.classList.remove('hideonmobile');
|
|
75242
75375
|
let divTarget = panelStuff.querySelector('.div-target');
|
|
75243
75376
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -75246,15 +75379,20 @@ class ElementGeneralStyles {
|
|
|
75246
75379
|
elm.classList.remove('xs-hidden');
|
|
75247
75380
|
} else if (target === 'sm') {
|
|
75248
75381
|
elm.classList.remove('sm-hidden');
|
|
75382
|
+
} else if (target === 'md') {
|
|
75383
|
+
elm.classList.remove('md-hidden');
|
|
75249
75384
|
} else if (target === '') {
|
|
75250
75385
|
elm.classList.remove('desktop-hidden');
|
|
75251
75386
|
}
|
|
75252
75387
|
|
|
75253
75388
|
btnVisible.classList.add('on');
|
|
75254
|
-
btnHidden.classList.remove('on');
|
|
75389
|
+
btnHidden.classList.remove('on'); //Trigger Change event
|
|
75390
|
+
|
|
75391
|
+
this.builder.opts.onChange();
|
|
75255
75392
|
});
|
|
75256
75393
|
btnHidden.addEventListener('click', () => {
|
|
75257
75394
|
const elm = this.builder.inspectedElement;
|
|
75395
|
+
this.builder.uo.saveForUndo();
|
|
75258
75396
|
elm.classList.remove('hideonmobile');
|
|
75259
75397
|
let divTarget = panelStuff.querySelector('.div-target');
|
|
75260
75398
|
let target = this.builder.responsive.readTarget(divTarget);
|
|
@@ -75263,12 +75401,16 @@ class ElementGeneralStyles {
|
|
|
75263
75401
|
elm.classList.add('xs-hidden');
|
|
75264
75402
|
} else if (target === 'sm') {
|
|
75265
75403
|
elm.classList.add('sm-hidden');
|
|
75404
|
+
} else if (target === 'md') {
|
|
75405
|
+
elm.classList.add('md-hidden');
|
|
75266
75406
|
} else if (target === '') {
|
|
75267
75407
|
elm.classList.add('desktop-hidden');
|
|
75268
75408
|
}
|
|
75269
75409
|
|
|
75270
75410
|
btnVisible.classList.remove('on');
|
|
75271
|
-
btnHidden.classList.add('on');
|
|
75411
|
+
btnHidden.classList.add('on'); //Trigger Change event
|
|
75412
|
+
|
|
75413
|
+
this.builder.opts.onChange();
|
|
75272
75414
|
});
|
|
75273
75415
|
}
|
|
75274
75416
|
|
|
@@ -81788,7 +81930,7 @@ class Rte {
|
|
|
81788
81930
|
|
|
81789
81931
|
if (!rteTool) {
|
|
81790
81932
|
if (builder.plugins.length > 0) {
|
|
81791
|
-
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full'];
|
|
81933
|
+
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full'];
|
|
81792
81934
|
|
|
81793
81935
|
const filterButtons = myArray => {
|
|
81794
81936
|
let newArray = myArray;
|
|
@@ -81810,7 +81952,12 @@ class Rte {
|
|
|
81810
81952
|
newArray = newArray.filter(e => e !== item);
|
|
81811
81953
|
}
|
|
81812
81954
|
}
|
|
81813
|
-
});
|
|
81955
|
+
}); // if(!this.builder.previewURL && newArray.indexOf('livepreview')!==-1) {
|
|
81956
|
+
// newArray = newArray.filter((item)=>{
|
|
81957
|
+
// return item !== 'livepreview';
|
|
81958
|
+
// });
|
|
81959
|
+
// }
|
|
81960
|
+
|
|
81814
81961
|
return newArray;
|
|
81815
81962
|
};
|
|
81816
81963
|
|
|
@@ -81838,7 +81985,7 @@ class Rte {
|
|
|
81838
81985
|
for (var j = 0; j < builder.opts.buttonsMore.length; j++) {
|
|
81839
81986
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
|
81840
81987
|
if (btn === 'createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'removeformat') html_rtemore += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'bold') html_rtemore += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rtemore += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rtemore += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`; // else if(btn==='createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;
|
|
81841
|
-
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === '|') {
|
|
81988
|
+
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
81842
81989
|
html_rtemore += '<div class="rte-separator"></div>';
|
|
81843
81990
|
} else {
|
|
81844
81991
|
html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -81849,7 +81996,7 @@ class Rte {
|
|
|
81849
81996
|
|
|
81850
81997
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
|
81851
81998
|
btn = builder.opts.buttons[j].toLowerCase();
|
|
81852
|
-
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === '|') {
|
|
81999
|
+
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
81853
82000
|
html_rte += '<div class="rte-separator"></div>';
|
|
81854
82001
|
} else {
|
|
81855
82002
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -81869,7 +82016,7 @@ class Rte {
|
|
|
81869
82016
|
|
|
81870
82017
|
for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
|
|
81871
82018
|
btn = builder.opts.elementButtonsMore[j].toLowerCase();
|
|
81872
|
-
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === '|') {
|
|
82019
|
+
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
81873
82020
|
html_elementrtemore += '<div class="rte-separator"></div>';
|
|
81874
82021
|
} else {
|
|
81875
82022
|
html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -81880,7 +82027,7 @@ class Rte {
|
|
|
81880
82027
|
|
|
81881
82028
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
|
81882
82029
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
|
81883
|
-
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === '|') {
|
|
82030
|
+
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
81884
82031
|
html_elementrte += '<div class="rte-separator"></div>';
|
|
81885
82032
|
} else {
|
|
81886
82033
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -81902,7 +82049,7 @@ class Rte {
|
|
|
81902
82049
|
|
|
81903
82050
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
|
81904
82051
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
|
81905
|
-
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === '|') {
|
|
82052
|
+
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
81906
82053
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
|
81907
82054
|
} else {
|
|
81908
82055
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -81911,7 +82058,7 @@ class Rte {
|
|
|
81911
82058
|
|
|
81912
82059
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
|
81913
82060
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
|
81914
|
-
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
|
|
82061
|
+
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
|
|
81915
82062
|
html_iconrte += '<div class="rte-separator"></div>';
|
|
81916
82063
|
} else {
|
|
81917
82064
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -82901,8 +83048,21 @@ class Rte {
|
|
|
82901
83048
|
});
|
|
82902
83049
|
} else {
|
|
82903
83050
|
dom.removeClass(inputImageInsertSrc, 'image-select');
|
|
82904
|
-
} //
|
|
83051
|
+
} // Live Preview
|
|
83052
|
+
|
|
82905
83053
|
|
|
83054
|
+
let livePreviewButton = builderStuff.querySelectorAll('button.rte-livepreview');
|
|
83055
|
+
livePreviewButton.forEach(btn => {
|
|
83056
|
+
dom.addEventListener(btn, 'click', () => {
|
|
83057
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview');
|
|
83058
|
+
|
|
83059
|
+
if (modal.classList.contains('active')) {
|
|
83060
|
+
this.builder.closePreview();
|
|
83061
|
+
} else {
|
|
83062
|
+
this.builder.openPreview();
|
|
83063
|
+
}
|
|
83064
|
+
});
|
|
83065
|
+
}); // Zoom Settings
|
|
82906
83066
|
|
|
82907
83067
|
let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
|
|
82908
83068
|
zoomButton.forEach(btn => {
|
|
@@ -87941,18 +88101,25 @@ class Lightbox {
|
|
|
87941
88101
|
let youRegexMatches = src.match(youRegex);
|
|
87942
88102
|
let vimeoRegexMatches = vimeoRegex.exec(src); // if (youRegexMatches !== null || vimeoRegexMatches !== null) {
|
|
87943
88103
|
|
|
87944
|
-
if ((youRegexMatches !== null || vimeoRegexMatches !== null) && src.indexOf('player.vimeo.com') === -1 && src.indexOf('youtube.com/embed/') === -1) {
|
|
88104
|
+
if ((youRegexMatches !== null || vimeoRegexMatches !== null) && src.indexOf('player.vimeo.com') === -1 && src.indexOf('youtube.com/embed/') === -1 && src.indexOf('youtube-nocookie.com/embed/') === -1) {
|
|
87945
88105
|
if (youRegexMatches !== null) {
|
|
87946
88106
|
// && youRegexMatches.length >= 7) {
|
|
87947
88107
|
// let youMatch = youRegexMatches[6];
|
|
87948
|
-
let youMatch = youRegexMatches[1];
|
|
87949
|
-
|
|
88108
|
+
let youMatch = youRegexMatches[1]; // src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0&autoplay=1&color=white';
|
|
88109
|
+
|
|
88110
|
+
src = 'https://www.youtube-nocookie.com/embed/' + youMatch + '?rel=0&autoplay=1&color=white';
|
|
87950
88111
|
}
|
|
87951
88112
|
|
|
87952
88113
|
if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
|
|
87953
88114
|
let vimeoMatch = vimeoRegexMatches[6];
|
|
87954
88115
|
src = 'https://player.vimeo.com/video/' + vimeoMatch;
|
|
87955
88116
|
}
|
|
88117
|
+
} else {
|
|
88118
|
+
if (src.indexOf('youtube-nocookie.com/embed/') !== -1) {
|
|
88119
|
+
if (src.indexOf('?') === -1) {
|
|
88120
|
+
src += '?rel=0&autoplay=1&color=white';
|
|
88121
|
+
}
|
|
88122
|
+
}
|
|
87956
88123
|
}
|
|
87957
88124
|
|
|
87958
88125
|
return src;
|
|
@@ -88015,7 +88182,7 @@ class Lightbox {
|
|
|
88015
88182
|
theme: 'dark',
|
|
88016
88183
|
color: color
|
|
88017
88184
|
});
|
|
88018
|
-
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
88185
|
+
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('youtube-nocookie.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
88019
88186
|
arrGallery.push({
|
|
88020
88187
|
type: 'externalvideo',
|
|
88021
88188
|
url: url,
|
|
@@ -90211,6 +90378,7 @@ class Responsive {
|
|
|
90211
90378
|
getVisibility(elm, target) {
|
|
90212
90379
|
if (target === 'xs') return !elm.classList.contains('xs-hidden');
|
|
90213
90380
|
if (target === 'sm') return !elm.classList.contains('sm-hidden');
|
|
90381
|
+
if (target === 'md') return !elm.classList.contains('md-hidden');
|
|
90214
90382
|
if (target === '') return !elm.classList.contains('desktop-hidden');
|
|
90215
90383
|
}
|
|
90216
90384
|
|
|
@@ -90223,6 +90391,10 @@ class Responsive {
|
|
|
90223
90391
|
if (visibility) elm.classList.remove('sm-hidden');else elm.classList.add('sm-hidden');
|
|
90224
90392
|
}
|
|
90225
90393
|
|
|
90394
|
+
if (target === 'md') {
|
|
90395
|
+
if (visibility) elm.classList.remove('md-hidden');else elm.classList.add('md-hidden');
|
|
90396
|
+
}
|
|
90397
|
+
|
|
90226
90398
|
if (target === '') {
|
|
90227
90399
|
if (visibility) elm.classList.remove('desktop-hidden');else elm.classList.add('desktop-hidden');
|
|
90228
90400
|
}
|
|
@@ -90245,6 +90417,301 @@ class Responsive {
|
|
|
90245
90417
|
|
|
90246
90418
|
}
|
|
90247
90419
|
|
|
90420
|
+
class LivePreview {
|
|
90421
|
+
constructor(builder) {
|
|
90422
|
+
this.builder = builder;
|
|
90423
|
+
const util = this.builder.util;
|
|
90424
|
+
const builderStuff = this.builder.builderStuff;
|
|
90425
|
+
this.util = util;
|
|
90426
|
+
this.builderStuff = builderStuff;
|
|
90427
|
+
const dom = this.builder.dom;
|
|
90428
|
+
this.dom = dom;
|
|
90429
|
+
let modal = builderStuff.querySelector('.content-preview');
|
|
90430
|
+
|
|
90431
|
+
if (!modal) {
|
|
90432
|
+
let html = `
|
|
90433
|
+
<style>
|
|
90434
|
+
.is-modal.content-preview {
|
|
90435
|
+
transition: all 0.1s ease;
|
|
90436
|
+
}
|
|
90437
|
+
.is-modal.content-preview > div > div {
|
|
90438
|
+
transition: all 0.1s ease;
|
|
90439
|
+
}
|
|
90440
|
+
.is-modal.content-preview .is-modal-refresh,
|
|
90441
|
+
.is-modal.content-preview .is-modal-device,
|
|
90442
|
+
.is-modal.content-preview .is-modal-close {
|
|
90443
|
+
background:transparent !important;
|
|
90444
|
+
width:32px !important;
|
|
90445
|
+
height:32px !important;
|
|
90446
|
+
position:absolute !important;
|
|
90447
|
+
box-shadow:none !important;
|
|
90448
|
+
}
|
|
90449
|
+
.is-modal.content-preview .is-modal-device {
|
|
90450
|
+
top:2px;
|
|
90451
|
+
left:2px;
|
|
90452
|
+
}
|
|
90453
|
+
.is-modal.content-preview .is-modal-refresh {
|
|
90454
|
+
top:2px;
|
|
90455
|
+
right:34px;
|
|
90456
|
+
}
|
|
90457
|
+
.is-modal.content-preview .is-modal-close {
|
|
90458
|
+
top:2px;
|
|
90459
|
+
right:2px;
|
|
90460
|
+
}
|
|
90461
|
+
|
|
90462
|
+
.is-screen-1920 {
|
|
90463
|
+
width: 576px !important;
|
|
90464
|
+
height: 332px !important;
|
|
90465
|
+
}
|
|
90466
|
+
.is-screen-1440 {
|
|
90467
|
+
width: 431px !important;
|
|
90468
|
+
height: 258px !important;
|
|
90469
|
+
}
|
|
90470
|
+
.is-screen-768 {
|
|
90471
|
+
width: 245px !important;
|
|
90472
|
+
height: 363px !important;
|
|
90473
|
+
}
|
|
90474
|
+
.is-screen-1024 {
|
|
90475
|
+
width: 328px !important;
|
|
90476
|
+
height: 281px !important;
|
|
90477
|
+
}
|
|
90478
|
+
.is-screen-375 {
|
|
90479
|
+
width: 167px !important;
|
|
90480
|
+
height: 332px !important;
|
|
90481
|
+
}
|
|
90482
|
+
|
|
90483
|
+
.is-screen-1920 .preview-screen {
|
|
90484
|
+
width: 1920px;height: 992px;transform: scale(0.3);
|
|
90485
|
+
}
|
|
90486
|
+
.is-screen-1440 .preview-screen {
|
|
90487
|
+
width: 1440px;height: 744px;transform: scale(0.3);
|
|
90488
|
+
}
|
|
90489
|
+
.is-screen-768 .preview-screen {
|
|
90490
|
+
width: 768px;height: 1024px;transform: scale(0.32);
|
|
90491
|
+
}
|
|
90492
|
+
.is-screen-1024 .preview-screen {
|
|
90493
|
+
width: 1024px;height: 768px;transform: scale(0.32);
|
|
90494
|
+
}
|
|
90495
|
+
.is-screen-375 .preview-screen {
|
|
90496
|
+
width: 375px;height: 667px;transform: scale(0.446);
|
|
90497
|
+
}
|
|
90498
|
+
.is-screen-375 .is-modal-bar > span {
|
|
90499
|
+
display: none;
|
|
90500
|
+
}
|
|
90501
|
+
|
|
90502
|
+
.content-preview:focus-within {
|
|
90503
|
+
z-index:100021 !important
|
|
90504
|
+
}
|
|
90505
|
+
</style>
|
|
90506
|
+
<div style="z-index:10003;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
90507
|
+
<div class="is-modal-bar is-draggable" draggable="">
|
|
90508
|
+
<span>${util.out('Live Preview')}</span>
|
|
90509
|
+
<button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
|
|
90510
|
+
|
|
90511
|
+
</button>
|
|
90512
|
+
<button class="is-modal-refresh" tabindex="-1" title="${util.out('Reload')}">
|
|
90513
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-reload"></use></svg>
|
|
90514
|
+
</button>
|
|
90515
|
+
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
|
90516
|
+
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
90517
|
+
</button>
|
|
90518
|
+
</div>
|
|
90519
|
+
<div style="position:relative;position:absolute;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;">
|
|
90520
|
+
<div class="preview-screen" style="padding:0;position: absolute;top: 0;left: 0;box-sizing: border-box;transform-origin: top left;">
|
|
90521
|
+
<iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>
|
|
90522
|
+
</div>
|
|
90523
|
+
</div>
|
|
90524
|
+
<div style="position:absolute;left:3px;bottom:3px;border-radius:3px;display:flex;overflow:hidden;">
|
|
90525
|
+
<button class="is-modal-size" tabindex="-1" title="${util.out('Screen Sizes')}" style="width:30px;height:30px;">
|
|
90526
|
+
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#icon-devices"></use></svg>
|
|
90527
|
+
</button>
|
|
90528
|
+
</div>
|
|
90529
|
+
</div>
|
|
90530
|
+
`;
|
|
90531
|
+
dom.appendHtml(builderStuff, html);
|
|
90532
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview');
|
|
90533
|
+
this.modal = modal;
|
|
90534
|
+
const btnPreviewClose = modal.querySelector('.is-modal-close');
|
|
90535
|
+
btnPreviewClose.addEventListener('click', () => {
|
|
90536
|
+
this.closePreview();
|
|
90537
|
+
});
|
|
90538
|
+
const btnModalSize = modal.querySelector('.is-modal-size');
|
|
90539
|
+
const infoDevice = modal.querySelector('.is-modal-device');
|
|
90540
|
+
btnModalSize.addEventListener('click', () => {
|
|
90541
|
+
if (modal.classList.contains('is-screen-1920')) {
|
|
90542
|
+
modal.classList.remove('is-screen-1920');
|
|
90543
|
+
modal.classList.add('is-screen-1440');
|
|
90544
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
|
|
90545
|
+
infoDevice.setAttribute('title', util.out('Laptop'));
|
|
90546
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
|
|
90547
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
|
90548
|
+
modal.classList.remove('is-screen-1440');
|
|
90549
|
+
modal.classList.add('is-screen-1024');
|
|
90550
|
+
infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
|
|
90551
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
|
|
90552
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
|
|
90553
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
|
90554
|
+
modal.classList.remove('is-screen-1024');
|
|
90555
|
+
modal.classList.add('is-screen-768');
|
|
90556
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-768');
|
|
90557
|
+
infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
|
|
90558
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
|
|
90559
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
|
90560
|
+
modal.classList.remove('is-screen-768');
|
|
90561
|
+
modal.classList.add('is-screen-375');
|
|
90562
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-375');
|
|
90563
|
+
infoDevice.setAttribute('title', util.out('Mobile'));
|
|
90564
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
|
|
90565
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
|
90566
|
+
modal.classList.remove('is-screen-375');
|
|
90567
|
+
modal.classList.add('is-screen-1920');
|
|
90568
|
+
localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
|
|
90569
|
+
infoDevice.setAttribute('title', util.out('Desktop'));
|
|
90570
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
|
|
90571
|
+
}
|
|
90572
|
+
|
|
90573
|
+
this.previewRefresh(true);
|
|
90574
|
+
});
|
|
90575
|
+
const btnModalRefresh = modal.querySelector('.is-modal-refresh');
|
|
90576
|
+
btnModalRefresh.addEventListener('click', () => {
|
|
90577
|
+
this.previewRefresh();
|
|
90578
|
+
}); //Extend onChange
|
|
90579
|
+
|
|
90580
|
+
let old2 = this.builder.settings.onChange;
|
|
90581
|
+
|
|
90582
|
+
this.builder.settings.onChange = () => {
|
|
90583
|
+
old2.call(this);
|
|
90584
|
+
this.previewRefresh();
|
|
90585
|
+
};
|
|
90586
|
+
}
|
|
90587
|
+
}
|
|
90588
|
+
|
|
90589
|
+
previewRefresh(disableOnContentLoad) {
|
|
90590
|
+
if (this.modal.classList.contains('active')) {
|
|
90591
|
+
// let html = this.builder.html();
|
|
90592
|
+
// localStorage.setItem('preview-html', html);
|
|
90593
|
+
if (this.builder.onPreviewOpen) this.builder.onPreviewOpen();
|
|
90594
|
+
const iframe = this.modal.querySelector('iframe');
|
|
90595
|
+
|
|
90596
|
+
if (!this.builder.doc.querySelector('.is-wrapper')) {
|
|
90597
|
+
// ContentBuilder
|
|
90598
|
+
if (this.builder.previewURL) {
|
|
90599
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
90600
|
+
} else {
|
|
90601
|
+
this.writeHtml(iframe);
|
|
90602
|
+
}
|
|
90603
|
+
} else {
|
|
90604
|
+
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
90605
|
+
}
|
|
90606
|
+
|
|
90607
|
+
iframe.onload = () => {
|
|
90608
|
+
if (this.builder.onPreviewContentLoad && !disableOnContentLoad) this.builder.onPreviewContentLoad();
|
|
90609
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
90610
|
+
iframe.focus();
|
|
90611
|
+
});
|
|
90612
|
+
};
|
|
90613
|
+
}
|
|
90614
|
+
}
|
|
90615
|
+
|
|
90616
|
+
openPreview() {
|
|
90617
|
+
// if(!this.builder.previewURL) return;
|
|
90618
|
+
if (this.modal.classList.contains('active')) return;
|
|
90619
|
+
const util = this.util;
|
|
90620
|
+
const modal = this.modal;
|
|
90621
|
+
modal.classList.add('active');
|
|
90622
|
+
|
|
90623
|
+
if (localStorage.getItem('_livepreviewscreen') != null) {
|
|
90624
|
+
modal.classList.remove('is-screen-1920');
|
|
90625
|
+
modal.classList.remove('is-screen-1440');
|
|
90626
|
+
modal.classList.remove('is-screen-1024');
|
|
90627
|
+
modal.classList.remove('is-screen-768');
|
|
90628
|
+
modal.classList.remove('is-screen-375');
|
|
90629
|
+
modal.classList.add(localStorage.getItem('_livepreviewscreen'));
|
|
90630
|
+
const infoDevice = modal.querySelector('.is-modal-device');
|
|
90631
|
+
|
|
90632
|
+
if (modal.classList.contains('is-screen-1920')) {
|
|
90633
|
+
infoDevice.setAttribute('title', util.out('Desktop'));
|
|
90634
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
|
|
90635
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
|
90636
|
+
infoDevice.setAttribute('title', util.out('Laptop'));
|
|
90637
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
|
|
90638
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
|
90639
|
+
infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
|
|
90640
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
|
|
90641
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
|
90642
|
+
infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
|
|
90643
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
|
|
90644
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
|
90645
|
+
infoDevice.setAttribute('title', util.out('Mobile'));
|
|
90646
|
+
infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
|
|
90647
|
+
}
|
|
90648
|
+
}
|
|
90649
|
+
|
|
90650
|
+
this.previewRefresh();
|
|
90651
|
+
localStorage.setItem('_livepreview', '1');
|
|
90652
|
+
}
|
|
90653
|
+
|
|
90654
|
+
closePreview() {
|
|
90655
|
+
const modal = this.modal;
|
|
90656
|
+
modal.classList.remove('active');
|
|
90657
|
+
if (this.builder.onPreviewClose) this.builder.onPreviewClose();
|
|
90658
|
+
localStorage.removeItem('_livepreview');
|
|
90659
|
+
}
|
|
90660
|
+
|
|
90661
|
+
writeHtml(iframe) {
|
|
90662
|
+
let doc = this.builder.doc;
|
|
90663
|
+
let basehref = '';
|
|
90664
|
+
let base = doc.querySelectorAll('base[href]');
|
|
90665
|
+
|
|
90666
|
+
if (base.length > 0) {
|
|
90667
|
+
basehref = '<base href="' + base[0].href + '" />';
|
|
90668
|
+
}
|
|
90669
|
+
|
|
90670
|
+
let csslinks = '';
|
|
90671
|
+
let styles = doc.querySelectorAll('link[href]');
|
|
90672
|
+
|
|
90673
|
+
for (let i = 0; i < styles.length; i++) {
|
|
90674
|
+
if (styles[i].href.indexOf('.css') != -1 && styles[i].href.indexOf('contentbox.css') == -1 && styles[i].href.indexOf('contentbuilder.css') == -1) {
|
|
90675
|
+
csslinks += '<link href="' + styles[i].href + '" rel="stylesheet" type="text/css" />';
|
|
90676
|
+
}
|
|
90677
|
+
}
|
|
90678
|
+
|
|
90679
|
+
let jsincludes1 = '';
|
|
90680
|
+
let scripts = doc.head.querySelectorAll('script[src]');
|
|
90681
|
+
|
|
90682
|
+
for (let i = 0; i < scripts.length; i++) {
|
|
90683
|
+
if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
|
|
90684
|
+
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
90685
|
+
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
90686
|
+
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90687
|
+
jsincludes1 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
|
|
90688
|
+
}
|
|
90689
|
+
}
|
|
90690
|
+
|
|
90691
|
+
let jsincludes2 = '';
|
|
90692
|
+
scripts = doc.body.querySelectorAll('script[src]');
|
|
90693
|
+
|
|
90694
|
+
for (let i = 0; i < scripts.length; i++) {
|
|
90695
|
+
if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
|
|
90696
|
+
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
90697
|
+
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
90698
|
+
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90699
|
+
jsincludes2 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
|
|
90700
|
+
}
|
|
90701
|
+
}
|
|
90702
|
+
|
|
90703
|
+
let maxwidth = '800px';
|
|
90704
|
+
let maxw = window.getComputedStyle(doc.querySelector('.is-builder')).getPropertyValue('max-width');
|
|
90705
|
+
if (!isNaN(parseInt(maxw))) maxwidth = maxw;
|
|
90706
|
+
let content = this.builder.html();
|
|
90707
|
+
doc = iframe.contentWindow.document;
|
|
90708
|
+
doc.open();
|
|
90709
|
+
doc.write('<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet" type="text/css" />' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>');
|
|
90710
|
+
doc.close();
|
|
90711
|
+
}
|
|
90712
|
+
|
|
90713
|
+
}
|
|
90714
|
+
|
|
90248
90715
|
class ContentBuilder {
|
|
90249
90716
|
constructor(opts = {}) {
|
|
90250
90717
|
let defaults = {
|
|
@@ -90260,6 +90727,15 @@ class ContentBuilder {
|
|
|
90260
90727
|
snippetJSON: {
|
|
90261
90728
|
'snippets': []
|
|
90262
90729
|
},
|
|
90730
|
+
// Live Preview
|
|
90731
|
+
// previewURL: 'preview.html',
|
|
90732
|
+
onPreviewOpen: () => {
|
|
90733
|
+
let html = this.html();
|
|
90734
|
+
localStorage.setItem('preview-html', html);
|
|
90735
|
+
},
|
|
90736
|
+
// onPreviewClose: ()=>{},
|
|
90737
|
+
previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
|
|
90738
|
+
livePreviewOpen: false,
|
|
90263
90739
|
scriptPath: '',
|
|
90264
90740
|
// Deprecated
|
|
90265
90741
|
// Old way:
|
|
@@ -90389,11 +90865,11 @@ class ContentBuilder {
|
|
|
90389
90865
|
assetRefresh: false,
|
|
90390
90866
|
// asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
|
|
90391
90867
|
customTags: [],
|
|
90392
|
-
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
|
|
90868
|
+
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
|
|
90393
90869
|
buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
|
|
90394
|
-
elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'more'],
|
|
90870
|
+
elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
|
|
90395
90871
|
elementButtonsMore: ['|', 'html', 'preferences'],
|
|
90396
|
-
iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'more'],
|
|
90872
|
+
iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
|
|
90397
90873
|
iconButtonsMore: ['|', 'html', 'preferences'],
|
|
90398
90874
|
lang: [],
|
|
90399
90875
|
checkLang: false,
|
|
@@ -91042,6 +91518,7 @@ class ContentBuilder {
|
|
|
91042
91518
|
this.colTool = new ColumnTool(this); // Render Column Tool
|
|
91043
91519
|
|
|
91044
91520
|
this._rowTool = new RowTool(this);
|
|
91521
|
+
this.livePreview = new LivePreview(this);
|
|
91045
91522
|
this.mediaPicker = new MediaPicker(this); // Extend the onChange function
|
|
91046
91523
|
|
|
91047
91524
|
var oldget = this.opts.onChange;
|
|
@@ -91307,6 +91784,16 @@ class ContentBuilder {
|
|
|
91307
91784
|
window.selectAsset = this.selectAsset.bind(this);
|
|
91308
91785
|
window.assetType = this.assetType.bind(this);
|
|
91309
91786
|
window.hideModal = this.hideModal.bind(this);
|
|
91787
|
+
setTimeout(() => {
|
|
91788
|
+
// Remember UI
|
|
91789
|
+
if (localStorage.getItem('_livepreview') != null) {
|
|
91790
|
+
this.openPreview();
|
|
91791
|
+
} else {
|
|
91792
|
+
if (this.opts.livePreviewOpen) {
|
|
91793
|
+
this.openPreview();
|
|
91794
|
+
}
|
|
91795
|
+
}
|
|
91796
|
+
}, 300);
|
|
91310
91797
|
} // constructor
|
|
91311
91798
|
// Convenience constructor, so that the plugin can be called directly using: ContentBuilder.run({ ... });
|
|
91312
91799
|
|
|
@@ -92348,6 +92835,14 @@ class ContentBuilder {
|
|
|
92348
92835
|
beautify(html) {
|
|
92349
92836
|
const htmlutil = new HtmlUtil(this);
|
|
92350
92837
|
return htmlutil.beautify(html);
|
|
92838
|
+
}
|
|
92839
|
+
|
|
92840
|
+
openPreview() {
|
|
92841
|
+
this.livePreview.openPreview();
|
|
92842
|
+
}
|
|
92843
|
+
|
|
92844
|
+
closePreview() {
|
|
92845
|
+
this.livePreview.closePreview();
|
|
92351
92846
|
} // Module related
|
|
92352
92847
|
|
|
92353
92848
|
|
|
@@ -92911,6 +93406,10 @@ class ContentBuilder {
|
|
|
92911
93406
|
this.opts.onChange(); //Trigger Render event
|
|
92912
93407
|
|
|
92913
93408
|
this.opts.onRender();
|
|
93409
|
+
|
|
93410
|
+
if (localStorage.getItem('_livepreview') != null) {
|
|
93411
|
+
this.livePreview.openPreview();
|
|
93412
|
+
}
|
|
92914
93413
|
} // loadHtml(html) {
|
|
92915
93414
|
// let area = this.getScope();
|
|
92916
93415
|
// area.innerHTML = html;
|
|
@@ -93102,7 +93601,7 @@ class ContentBuilder {
|
|
|
93102
93601
|
this.lightbox.openImage(url, theme, color);
|
|
93103
93602
|
} else if (extension === 'mp4') {
|
|
93104
93603
|
this.lightbox.openVideo(url, 'dark', color);
|
|
93105
|
-
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
93604
|
+
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('youtube-nocookie.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
93106
93605
|
this.lightbox.openExternalVideo(url, 'dark', color);
|
|
93107
93606
|
} else {
|
|
93108
93607
|
if (url.indexOf('#') === 0) ; else {
|
|
@@ -93229,7 +93728,7 @@ class ContentBuilder {
|
|
|
93229
93728
|
this.lightbox.openVideo(url, 'dark', color);
|
|
93230
93729
|
e.preventDefault();
|
|
93231
93730
|
return false;
|
|
93232
|
-
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
93731
|
+
} else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('youtube-nocookie.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
|
|
93233
93732
|
this.lightbox.openExternalVideo(url, 'dark', color);
|
|
93234
93733
|
e.preventDefault();
|
|
93235
93734
|
return false;
|
|
@@ -96023,90 +96522,7 @@ class AnimateScroll {
|
|
|
96023
96522
|
width: 80px !important;
|
|
96024
96523
|
height: 35px !important;
|
|
96025
96524
|
}
|
|
96026
|
-
|
|
96027
|
-
.is-modal.page-preview {
|
|
96028
|
-
transition: all 0.1s ease;
|
|
96029
|
-
}
|
|
96030
|
-
.is-modal.page-preview > div > div {
|
|
96031
|
-
transition: all 0.1s ease;
|
|
96032
|
-
}
|
|
96033
|
-
.is-modal.page-preview .is-modal-refresh,
|
|
96034
|
-
.is-modal.page-preview .is-modal-close {
|
|
96035
|
-
background:transparent !important;
|
|
96036
|
-
width:32px !important;
|
|
96037
|
-
height:32px !important;
|
|
96038
|
-
position:absolute !important;
|
|
96039
|
-
box-shadow:none !important;
|
|
96040
|
-
}
|
|
96041
|
-
.is-modal.page-preview .is-modal-refresh {
|
|
96042
|
-
top:2px;
|
|
96043
|
-
right:34px;
|
|
96044
|
-
}
|
|
96045
|
-
.is-modal.page-preview .is-modal-close {
|
|
96046
|
-
top:2px;
|
|
96047
|
-
right:2px;
|
|
96048
|
-
}
|
|
96049
|
-
|
|
96050
|
-
.is-screen-1920 { width: 576px !important; }
|
|
96051
|
-
.is-screen-1440 {
|
|
96052
|
-
width: 431px !important;
|
|
96053
|
-
height: 258px !important;
|
|
96054
|
-
}
|
|
96055
|
-
.is-screen-768 {
|
|
96056
|
-
width: 245px !important;
|
|
96057
|
-
height: 363px !important;
|
|
96058
|
-
}
|
|
96059
|
-
.is-screen-1024 {
|
|
96060
|
-
width: 328px !important;
|
|
96061
|
-
height: 281px !important;
|
|
96062
|
-
}
|
|
96063
|
-
.is-screen-375 { width: 167px !important; }
|
|
96064
|
-
|
|
96065
|
-
.is-screen-1920 .preview-screen {
|
|
96066
|
-
width: 1920px;height: 992px;transform: scale(0.3);
|
|
96067
|
-
}
|
|
96068
|
-
.is-screen-1440 .preview-screen {
|
|
96069
|
-
width: 1440px;height: 744px;transform: scale(0.3);
|
|
96070
|
-
}
|
|
96071
|
-
.is-screen-768 .preview-screen {
|
|
96072
|
-
width: 768px;height: 1024px;transform: scale(0.32);
|
|
96073
|
-
}
|
|
96074
|
-
.is-screen-1024 .preview-screen {
|
|
96075
|
-
width: 1024px;height: 768px;transform: scale(0.32);
|
|
96076
|
-
}
|
|
96077
|
-
.is-screen-375 .preview-screen {
|
|
96078
|
-
width: 375px;height: 667px;transform: scale(0.446);
|
|
96079
|
-
}
|
|
96080
|
-
.is-screen-375 .is-modal-bar > span {
|
|
96081
|
-
display: none;
|
|
96082
|
-
}
|
|
96083
|
-
|
|
96084
|
-
.page-preview:focus-within {
|
|
96085
|
-
z-index:100021 !important
|
|
96086
|
-
}
|
|
96087
96525
|
</style>
|
|
96088
|
-
<div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
96089
|
-
<div class="is-modal-bar is-draggable" draggable="">
|
|
96090
|
-
<span>${out('Live Preview')}</span>
|
|
96091
|
-
<button class="is-modal-refresh" tabindex="-1" title="${out('Reload')}">
|
|
96092
|
-
<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-reload"></use></svg>
|
|
96093
|
-
</button>
|
|
96094
|
-
<button class="is-modal-close" tabindex="-1" title="${out('Close')}">
|
|
96095
|
-
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
96096
|
-
</button>
|
|
96097
|
-
</div>
|
|
96098
|
-
<div style="position:relative;position:absolute;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;">
|
|
96099
|
-
<div class="preview-screen" style="padding:0;position: absolute;top: 0;left: 0;box-sizing: border-box;transform-origin: top left;">
|
|
96100
|
-
<iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>
|
|
96101
|
-
</div>
|
|
96102
|
-
</div>
|
|
96103
|
-
<div style="position:absolute;left:3px;bottom:3px;border-radius:3px;display:flex;overflow:hidden;">
|
|
96104
|
-
<button class="is-modal-size" tabindex="-1" title="${out('Screen Sizes')}" style="width:30px;height:30px;">
|
|
96105
|
-
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#icon-devices"></use></svg>
|
|
96106
|
-
</button>
|
|
96107
|
-
</div>
|
|
96108
|
-
</div>
|
|
96109
|
-
|
|
96110
96526
|
|
|
96111
96527
|
<div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
96112
96528
|
|
|
@@ -96966,8 +97382,6 @@ class AnimateScroll {
|
|
|
96966
97382
|
});
|
|
96967
97383
|
this.divAnimScrollSimple = modalAnimateScroll.querySelector('#divAnimScrollSimple');
|
|
96968
97384
|
this.divAnimSettings = modalAnimateScroll.querySelector('#divAnimSettings');
|
|
96969
|
-
const modalPagePreview = this.builderStuff.querySelector('.is-modal.page-preview');
|
|
96970
|
-
this.modalPagePreview = modalPagePreview;
|
|
96971
97385
|
const btnOpenPreviewWindow = this.builder.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
|
|
96972
97386
|
this.btnOpenPreviewWindow = btnOpenPreviewWindow; // Target
|
|
96973
97387
|
|
|
@@ -98334,12 +98748,11 @@ class AnimateScroll {
|
|
|
98334
98748
|
localStorage.setItem('_disableanimation', '1');
|
|
98335
98749
|
}
|
|
98336
98750
|
|
|
98337
|
-
this.refreshPage();
|
|
98338
|
-
|
|
98339
|
-
|
|
98340
|
-
|
|
98341
|
-
|
|
98342
|
-
|
|
98751
|
+
this.refreshPage(); // const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
98752
|
+
// if(modalPagePreview.classList.contains('active')) {
|
|
98753
|
+
// this.openPreview(); // refresh
|
|
98754
|
+
// }
|
|
98755
|
+
// Reset
|
|
98343
98756
|
|
|
98344
98757
|
let elmTool = document.querySelector('.is-element-tool');
|
|
98345
98758
|
if (elmTool) elmTool.style.display = '';
|
|
@@ -98358,11 +98771,10 @@ class AnimateScroll {
|
|
|
98358
98771
|
}
|
|
98359
98772
|
}
|
|
98360
98773
|
|
|
98361
|
-
this.refreshPage();
|
|
98362
|
-
|
|
98363
|
-
|
|
98364
|
-
|
|
98365
|
-
}
|
|
98774
|
+
this.refreshPage(); // const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
98775
|
+
// if(modalPagePreview.classList.contains('active')) {
|
|
98776
|
+
// this.openPreview(); // refresh
|
|
98777
|
+
// }
|
|
98366
98778
|
});
|
|
98367
98779
|
}
|
|
98368
98780
|
|
|
@@ -98370,74 +98782,6 @@ class AnimateScroll {
|
|
|
98370
98782
|
this.openPreview();
|
|
98371
98783
|
const pop = this.builder.sidebar.pageQuickSettings;
|
|
98372
98784
|
this.builder.editor.util.hidePop(pop);
|
|
98373
|
-
});
|
|
98374
|
-
const btnPreviewClose = modalPagePreview.querySelector('.is-modal-close');
|
|
98375
|
-
btnPreviewClose.addEventListener('click', () => {
|
|
98376
|
-
this.closePreview();
|
|
98377
|
-
});
|
|
98378
|
-
const btnModalSize = modalPagePreview.querySelector('.is-modal-size');
|
|
98379
|
-
btnModalSize.addEventListener('click', () => {
|
|
98380
|
-
if (modalPagePreview.classList.contains('is-screen-1920')) {
|
|
98381
|
-
modalPagePreview.classList.remove('is-screen-1920');
|
|
98382
|
-
modalPagePreview.classList.add('is-screen-1440');
|
|
98383
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
|
|
98384
|
-
} else if (modalPagePreview.classList.contains('is-screen-1440')) {
|
|
98385
|
-
modalPagePreview.classList.remove('is-screen-1440');
|
|
98386
|
-
modalPagePreview.classList.add('is-screen-1024');
|
|
98387
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
|
|
98388
|
-
} else if (modalPagePreview.classList.contains('is-screen-1024')) {
|
|
98389
|
-
modalPagePreview.classList.remove('is-screen-1024');
|
|
98390
|
-
modalPagePreview.classList.add('is-screen-768');
|
|
98391
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-768');
|
|
98392
|
-
} else if (modalPagePreview.classList.contains('is-screen-768')) {
|
|
98393
|
-
modalPagePreview.classList.remove('is-screen-768');
|
|
98394
|
-
modalPagePreview.classList.add('is-screen-375');
|
|
98395
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-375');
|
|
98396
|
-
} else if (modalPagePreview.classList.contains('is-screen-375')) {
|
|
98397
|
-
modalPagePreview.classList.remove('is-screen-375');
|
|
98398
|
-
modalPagePreview.classList.add('is-screen-1920');
|
|
98399
|
-
localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
|
|
98400
|
-
}
|
|
98401
|
-
|
|
98402
|
-
let html = this.builder.html();
|
|
98403
|
-
localStorage.setItem('preview-html', html);
|
|
98404
|
-
let mainCss = this.builder.mainCss();
|
|
98405
|
-
localStorage.setItem('preview-maincss', mainCss);
|
|
98406
|
-
let sectionCss = this.builder.sectionCss();
|
|
98407
|
-
localStorage.setItem('preview-sectioncss', sectionCss); // const div = modalPagePreview.querySelector('.preview-screen');
|
|
98408
|
-
// div.innerHTML = '<iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>';
|
|
98409
|
-
|
|
98410
|
-
const iframe = modalPagePreview.querySelector('iframe'); // iframe.onload = ()=>{
|
|
98411
|
-
// setTimeout(()=>{
|
|
98412
|
-
// // iframe.contentWindow.scrollTo(0,this.builder.win.scrollY);
|
|
98413
|
-
// this.scrollSync(iframe);
|
|
98414
|
-
// },1000);
|
|
98415
|
-
// };
|
|
98416
|
-
|
|
98417
|
-
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
98418
|
-
|
|
98419
|
-
iframe.onload = () => {
|
|
98420
|
-
iframe.contentWindow.document.addEventListener('click', () => {
|
|
98421
|
-
iframe.focus();
|
|
98422
|
-
});
|
|
98423
|
-
};
|
|
98424
|
-
});
|
|
98425
|
-
const btnModalRefresh = modalPagePreview.querySelector('.is-modal-refresh');
|
|
98426
|
-
btnModalRefresh.addEventListener('click', () => {
|
|
98427
|
-
let html = this.builder.html();
|
|
98428
|
-
localStorage.setItem('preview-html', html);
|
|
98429
|
-
let mainCss = this.builder.mainCss();
|
|
98430
|
-
localStorage.setItem('preview-maincss', mainCss);
|
|
98431
|
-
let sectionCss = this.builder.sectionCss();
|
|
98432
|
-
localStorage.setItem('preview-sectioncss', sectionCss);
|
|
98433
|
-
const iframe = modalPagePreview.querySelector('iframe');
|
|
98434
|
-
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
98435
|
-
|
|
98436
|
-
iframe.onload = () => {
|
|
98437
|
-
iframe.contentWindow.document.addEventListener('click', () => {
|
|
98438
|
-
iframe.focus();
|
|
98439
|
-
});
|
|
98440
|
-
};
|
|
98441
98785
|
}); // ---
|
|
98442
98786
|
//Extend onPageContentClick
|
|
98443
98787
|
|
|
@@ -98457,95 +98801,16 @@ class AnimateScroll {
|
|
|
98457
98801
|
|
|
98458
98802
|
this.builder.settings.onChange = () => {
|
|
98459
98803
|
old2.call(this);
|
|
98460
|
-
|
|
98461
|
-
if (modalPagePreview.classList.contains('active')) {
|
|
98462
|
-
let html = this.builder.html();
|
|
98463
|
-
localStorage.setItem('preview-html', html);
|
|
98464
|
-
let mainCss = this.builder.mainCss();
|
|
98465
|
-
localStorage.setItem('preview-maincss', mainCss);
|
|
98466
|
-
let sectionCss = this.builder.sectionCss();
|
|
98467
|
-
localStorage.setItem('preview-sectioncss', sectionCss);
|
|
98468
|
-
modalPagePreview.querySelector('iframe').src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
98469
|
-
}
|
|
98804
|
+
this.builder.editor.livePreview.previewRefresh();
|
|
98470
98805
|
};
|
|
98471
|
-
|
|
98472
|
-
const iframe = modalPagePreview.querySelector('iframe');
|
|
98473
|
-
|
|
98474
|
-
iframe.onload = () => {
|
|
98475
|
-
setTimeout(() => {
|
|
98476
|
-
// iframe.contentWindow.scrollTo(0,this.builder.win.scrollY);
|
|
98477
|
-
this.scrollSync(iframe);
|
|
98478
|
-
}, 1000);
|
|
98479
|
-
};
|
|
98480
|
-
|
|
98481
|
-
this.builder.win.addEventListener('scroll', this.builder.doScrollSync = () => {
|
|
98482
|
-
this.scrollSync(iframe);
|
|
98483
|
-
});
|
|
98484
|
-
}
|
|
98485
|
-
|
|
98486
|
-
scrollSync(iframe) {
|
|
98487
|
-
if (!this.modalPagePreview.classList.contains('active')) return;
|
|
98488
|
-
if (this.builder.cancelScrollSync) return;
|
|
98489
|
-
|
|
98490
|
-
try {
|
|
98491
|
-
// let marginTop = parseInt(this.builder.wrapperEl.style.marginTop);
|
|
98492
|
-
let ifrScrollHeight = iframe.contentWindow.document.querySelector('.is-wrapper').offsetHeight;
|
|
98493
|
-
let pgScrollHeight = this.builder.wrapperEl.offsetHeight * this.builder.editor.zoom; // + marginTop;
|
|
98494
|
-
|
|
98495
|
-
let adj = ifrScrollHeight - pgScrollHeight; // let ifrScrollHeight2 = iframe.contentWindow.document.body.scrollHeight;
|
|
98496
|
-
// let pgScrollHeight2 = this.builder.doc.body.scrollHeight;
|
|
98497
|
-
// console.log(ifrScrollHeight2, pgScrollHeight2)
|
|
98498
|
-
// if(pgScrollHeight2<ifrScrollHeight2) {
|
|
98499
|
-
// let adj2 = ifrScrollHeight2-pgScrollHeight2;
|
|
98500
|
-
// this.builder.wrapperEl.style.marginBottom = (adj2)+'px';
|
|
98501
|
-
// console.log(adj2)
|
|
98502
|
-
// }
|
|
98503
|
-
|
|
98504
|
-
this.builder.wrapperEl.style.marginBottom = '100vh';
|
|
98505
|
-
iframe.contentWindow.scrollTo(0, this.builder.win.scrollY + this.builder.win.scrollY / pgScrollHeight * adj);
|
|
98506
|
-
} catch (e) {// Do Nothing
|
|
98507
|
-
}
|
|
98508
98806
|
}
|
|
98509
98807
|
|
|
98510
98808
|
openPreview() {
|
|
98511
|
-
|
|
98512
|
-
const btnOpenPreviewWindow = this.btnOpenPreviewWindow;
|
|
98513
|
-
let html = this.builder.html();
|
|
98514
|
-
localStorage.setItem('preview-html', html);
|
|
98515
|
-
let mainCss = this.builder.mainCss();
|
|
98516
|
-
localStorage.setItem('preview-maincss', mainCss);
|
|
98517
|
-
let sectionCss = this.builder.sectionCss();
|
|
98518
|
-
localStorage.setItem('preview-sectioncss', sectionCss);
|
|
98519
|
-
modalPagePreview.classList.add('active');
|
|
98520
|
-
btnOpenPreviewWindow.classList.add('on');
|
|
98521
|
-
const iframe = modalPagePreview.querySelector('iframe');
|
|
98522
|
-
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
98523
|
-
|
|
98524
|
-
if (localStorage.getItem('_livepreviewscreen') != null) {
|
|
98525
|
-
modalPagePreview.classList.remove('is-screen-1920');
|
|
98526
|
-
modalPagePreview.classList.remove('is-screen-1440');
|
|
98527
|
-
modalPagePreview.classList.remove('is-screen-1024');
|
|
98528
|
-
modalPagePreview.classList.remove('is-screen-768');
|
|
98529
|
-
modalPagePreview.classList.remove('is-screen-375');
|
|
98530
|
-
modalPagePreview.classList.add(localStorage.getItem('_livepreviewscreen'));
|
|
98531
|
-
}
|
|
98532
|
-
|
|
98533
|
-
iframe.onload = () => {
|
|
98534
|
-
iframe.contentWindow.document.addEventListener('click', () => {
|
|
98535
|
-
iframe.focus();
|
|
98536
|
-
});
|
|
98537
|
-
};
|
|
98538
|
-
|
|
98539
|
-
localStorage.setItem('_livepreview', '1');
|
|
98809
|
+
this.builder.editor.openPreview();
|
|
98540
98810
|
}
|
|
98541
98811
|
|
|
98542
98812
|
closePreview() {
|
|
98543
|
-
|
|
98544
|
-
const btnOpenPreviewWindow = this.btnOpenPreviewWindow;
|
|
98545
|
-
modalPagePreview.classList.remove('active');
|
|
98546
|
-
btnOpenPreviewWindow.classList.remove('on');
|
|
98547
|
-
this.builder.wrapperEl.style.marginBottom = '';
|
|
98548
|
-
localStorage.removeItem('_livepreview');
|
|
98813
|
+
this.builder.editor.closePreview();
|
|
98549
98814
|
}
|
|
98550
98815
|
|
|
98551
98816
|
refreshPage() {
|
|
@@ -100896,7 +101161,7 @@ class Timeline {
|
|
|
100896
101161
|
</div>
|
|
100897
101162
|
</div>
|
|
100898
101163
|
</div>
|
|
100899
|
-
<div class="flex-wrap" style="width:
|
|
101164
|
+
<div class="flex-wrap" style="width:515px">
|
|
100900
101165
|
|
|
100901
101166
|
<div class="flex-wrap" style="flex-direction:column;align-items: flex-start;">
|
|
100902
101167
|
<div class="flex-wrap" style="height:35px;margin-bottom: 2px;">
|
|
@@ -100918,7 +101183,7 @@ class Timeline {
|
|
|
100918
101183
|
</label>
|
|
100919
101184
|
<label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
|
|
100920
101185
|
<input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0">
|
|
100921
|
-
<span>${out('
|
|
101186
|
+
<span>${out('Disable Pin on Mobile')}</span>
|
|
100922
101187
|
</label>
|
|
100923
101188
|
</div>
|
|
100924
101189
|
</div>
|
|
@@ -105614,6 +105879,30 @@ class ContentBox {
|
|
|
105614
105879
|
this.editor = new ContentBuilder({
|
|
105615
105880
|
container: '.is-container',
|
|
105616
105881
|
page: '.is-wrapper',
|
|
105882
|
+
// Live Preview
|
|
105883
|
+
previewURL: this.settings.previewURL,
|
|
105884
|
+
onPreviewOpen: () => {
|
|
105885
|
+
let html = this.html();
|
|
105886
|
+
localStorage.setItem('preview-html', html);
|
|
105887
|
+
let mainCss = this.mainCss();
|
|
105888
|
+
localStorage.setItem('preview-maincss', mainCss);
|
|
105889
|
+
let sectionCss = this.sectionCss();
|
|
105890
|
+
localStorage.setItem('preview-sectioncss', sectionCss); // const btnOpenPreviewWindow = this.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
|
|
105891
|
+
// btnOpenPreviewWindow.classList.add('on');
|
|
105892
|
+
},
|
|
105893
|
+
onPreviewClose: () => {
|
|
105894
|
+
this.wrapperEl.style.marginBottom = ''; // const btnOpenPreviewWindow = this.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
|
|
105895
|
+
// btnOpenPreviewWindow.classList.remove('on');
|
|
105896
|
+
},
|
|
105897
|
+
onPreviewContentLoad: () => {
|
|
105898
|
+
setTimeout(() => {
|
|
105899
|
+
const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
105900
|
+
const iframe = modalPagePreview.querySelector('iframe');
|
|
105901
|
+
this.scrollSync(iframe);
|
|
105902
|
+
}, 1000);
|
|
105903
|
+
},
|
|
105904
|
+
previewStyle: 'top:auto;bottom:30px;left:90px;right:auto;',
|
|
105905
|
+
livePreviewOpen: false,
|
|
105617
105906
|
iframe: this.settings.iframe,
|
|
105618
105907
|
imageAdjust: 1,
|
|
105619
105908
|
// ContentBuilder
|
|
@@ -105865,10 +106154,42 @@ class ContentBox {
|
|
|
105865
106154
|
}
|
|
105866
106155
|
}
|
|
105867
106156
|
}
|
|
106157
|
+
}); // Live Preview
|
|
106158
|
+
|
|
106159
|
+
const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
106160
|
+
const iframe = modalPagePreview.querySelector('iframe');
|
|
106161
|
+
this.win.addEventListener('scroll', this.doScrollSync = () => {
|
|
106162
|
+
this.scrollSync(iframe);
|
|
105868
106163
|
});
|
|
105869
106164
|
this.isTouchSupport = this.editor.isTouchSupport;
|
|
105870
106165
|
} // editorSetup
|
|
106166
|
+
// Live Preview
|
|
106167
|
+
|
|
106168
|
+
|
|
106169
|
+
scrollSync(iframe) {
|
|
106170
|
+
const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
106171
|
+
if (!modalPagePreview.classList.contains('active')) return;
|
|
106172
|
+
if (this.cancelScrollSync) return;
|
|
106173
|
+
|
|
106174
|
+
try {
|
|
106175
|
+
// let marginTop = parseInt(this.wrapperEl.style.marginTop);
|
|
106176
|
+
let ifrScrollHeight = iframe.contentWindow.document.querySelector('.is-wrapper').offsetHeight;
|
|
106177
|
+
let pgScrollHeight = this.wrapperEl.offsetHeight * this.editor.zoom; // + marginTop;
|
|
105871
106178
|
|
|
106179
|
+
let adj = ifrScrollHeight - pgScrollHeight; // let ifrScrollHeight2 = iframe.contentWindow.document.body.scrollHeight;
|
|
106180
|
+
// let pgScrollHeight2 = this.doc.body.scrollHeight;
|
|
106181
|
+
// console.log(ifrScrollHeight2, pgScrollHeight2)
|
|
106182
|
+
// if(pgScrollHeight2<ifrScrollHeight2) {
|
|
106183
|
+
// let adj2 = ifrScrollHeight2-pgScrollHeight2;
|
|
106184
|
+
// this.wrapperEl.style.marginBottom = (adj2)+'px';
|
|
106185
|
+
// console.log(adj2)
|
|
106186
|
+
// }
|
|
106187
|
+
|
|
106188
|
+
this.wrapperEl.style.marginBottom = '100vh';
|
|
106189
|
+
iframe.contentWindow.scrollTo(0, this.win.scrollY + this.win.scrollY / pgScrollHeight * adj);
|
|
106190
|
+
} catch (e) {// Do Nothing
|
|
106191
|
+
}
|
|
106192
|
+
}
|
|
105872
106193
|
|
|
105873
106194
|
init() {
|
|
105874
106195
|
// Add special css (remove on destroy)
|
|
@@ -106031,26 +106352,6 @@ class ContentBox {
|
|
|
106031
106352
|
display: none;
|
|
106032
106353
|
}
|
|
106033
106354
|
|
|
106034
|
-
#_cbhtml .is-modal.page-preview.is-modal-content {
|
|
106035
|
-
z-index: 10002;
|
|
106036
|
-
position: fixed;
|
|
106037
|
-
overflow: hidden;
|
|
106038
|
-
width: 576px;
|
|
106039
|
-
height: 332px;
|
|
106040
|
-
top: auto;
|
|
106041
|
-
bottom: 30px;
|
|
106042
|
-
left:90px;
|
|
106043
|
-
box-sizing: content-box;
|
|
106044
|
-
flex-direction: row;
|
|
106045
|
-
align-items: flex-start;
|
|
106046
|
-
}
|
|
106047
|
-
#_cbhtml .is-modal.page-preview.is-modal-content.active {
|
|
106048
|
-
display: flex;
|
|
106049
|
-
}
|
|
106050
|
-
#_cbhtml .is-modal.page-preview.is-modal-content .is-modal-overlay {
|
|
106051
|
-
display: none;
|
|
106052
|
-
}
|
|
106053
|
-
|
|
106054
106355
|
#_cbhtml .is-modal.editsection.is-modal-content {
|
|
106055
106356
|
z-index: 10002;
|
|
106056
106357
|
position: fixed;
|
|
@@ -106693,8 +106994,9 @@ class ContentBox {
|
|
|
106693
106994
|
});
|
|
106694
106995
|
setTimeout(() => {
|
|
106695
106996
|
this.cancelScrollSync = false;
|
|
106696
|
-
const
|
|
106697
|
-
|
|
106997
|
+
const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
|
|
106998
|
+
const iframe = modalPagePreview.querySelector('iframe');
|
|
106999
|
+
this.scrollSync(iframe);
|
|
106698
107000
|
}, 1000);
|
|
106699
107001
|
}, delay);
|
|
106700
107002
|
}
|