@innovastudio/contentbox 1.4.58 → 1.4.60
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.
|
@@ -4009,7 +4009,9 @@ class EditSection {
|
|
|
4009
4009
|
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
4010
4010
|
html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
|
|
4011
4011
|
'<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
4012
|
-
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' +
|
|
4012
|
+
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + // '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' +
|
|
4013
|
+
// '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' +
|
|
4014
|
+
'<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
4013
4015
|
html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;"><span>' + out('Module Settings') + '</span>' + '<button class="is-modal-close" tabindex="-1" title="' + out('Close') + '">' + '<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>' + '</button>' + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
|
|
4014
4016
|
dom$k.appendHtml(builderStuff, html);
|
|
4015
4017
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
@@ -4733,6 +4735,21 @@ class EditSection {
|
|
|
4733
4735
|
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
4734
4736
|
} else {
|
|
4735
4737
|
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4738
|
+
}
|
|
4739
|
+
|
|
4740
|
+
if (s === '') {
|
|
4741
|
+
activeSection.style.transform = '';
|
|
4742
|
+
activeSection.style.transition = '';
|
|
4743
|
+
activeSection.style.opacity = '';
|
|
4744
|
+
activeSection.removeAttribute('data-anim-start');
|
|
4745
|
+
|
|
4746
|
+
if (!activeSection.hasAttribute('data-anim-end')) {
|
|
4747
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4748
|
+
}
|
|
4749
|
+
}
|
|
4750
|
+
|
|
4751
|
+
if (this.builder.win.skrollrr) {
|
|
4752
|
+
this.builder.win.skrollrr.refresh();
|
|
4736
4753
|
} //Trigger Render event
|
|
4737
4754
|
|
|
4738
4755
|
|
|
@@ -4774,6 +4791,21 @@ class EditSection {
|
|
|
4774
4791
|
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
4775
4792
|
} else {
|
|
4776
4793
|
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4794
|
+
}
|
|
4795
|
+
|
|
4796
|
+
if (s === '') {
|
|
4797
|
+
activeSection.style.transform = '';
|
|
4798
|
+
activeSection.style.transition = '';
|
|
4799
|
+
activeSection.style.opacity = '';
|
|
4800
|
+
activeSection.removeAttribute('data-anim-end');
|
|
4801
|
+
|
|
4802
|
+
if (!activeSection.hasAttribute('data-anim-start')) {
|
|
4803
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4804
|
+
}
|
|
4805
|
+
}
|
|
4806
|
+
|
|
4807
|
+
if (this.builder.win.skrollrr) {
|
|
4808
|
+
this.builder.win.skrollrr.refresh();
|
|
4777
4809
|
} //Trigger Render event
|
|
4778
4810
|
|
|
4779
4811
|
|
|
@@ -11358,6 +11390,8 @@ class EditBox {
|
|
|
11358
11390
|
btn.addEventListener('click', () => {
|
|
11359
11391
|
let activeBox = this.builder.activeBox;
|
|
11360
11392
|
let boxCentered = activeBox.querySelector('.is-box-centered');
|
|
11393
|
+
if (!boxCentered) boxCentered = activeBox; // for simplified flex section .is-section > .is-container
|
|
11394
|
+
|
|
11361
11395
|
this.builder.editor.saveForUndo();
|
|
11362
11396
|
let s = btn.getAttribute('data-value');
|
|
11363
11397
|
|
|
@@ -11813,7 +11847,10 @@ class EditBox {
|
|
|
11813
11847
|
overlayBg.style.left = '';
|
|
11814
11848
|
overlayBg.style.right = '';
|
|
11815
11849
|
overlayBg.style.width = '';
|
|
11816
|
-
overlayBg.style.height = '';
|
|
11850
|
+
overlayBg.style.height = '';
|
|
11851
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
11852
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
11853
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
11817
11854
|
}, btnBoxBgImage);
|
|
11818
11855
|
}); // Box Background Image Adjust
|
|
11819
11856
|
|
|
@@ -11821,7 +11858,7 @@ class EditBox {
|
|
|
11821
11858
|
if (btnBoxBgImageAdjust) btnBoxBgImageAdjust.addEventListener('click', () => {
|
|
11822
11859
|
const activeBox = this.builder.activeBox;
|
|
11823
11860
|
const overlayBg = activeBox.querySelector('.is-overlay-bg');
|
|
11824
|
-
this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust);
|
|
11861
|
+
this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust, true);
|
|
11825
11862
|
});
|
|
11826
11863
|
const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
11827
11864
|
chkBoxBgImageGrayscale.addEventListener('click', () => {
|
|
@@ -12141,7 +12178,10 @@ class EditBox {
|
|
|
12141
12178
|
overlayBg.style.left = '';
|
|
12142
12179
|
overlayBg.style.right = '';
|
|
12143
12180
|
overlayBg.style.width = '';
|
|
12144
|
-
overlayBg.style.height = '';
|
|
12181
|
+
overlayBg.style.height = '';
|
|
12182
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
12183
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
12184
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
12145
12185
|
});
|
|
12146
12186
|
}
|
|
12147
12187
|
|
|
@@ -13178,6 +13218,7 @@ class EditBox {
|
|
|
13178
13218
|
boxTextOpacity(s) {
|
|
13179
13219
|
let activeBox = this.builder.activeBox;
|
|
13180
13220
|
let cb = activeBox.querySelector('.is-box-centered');
|
|
13221
|
+
if (!cb) cb = activeBox; // for simplified flex section
|
|
13181
13222
|
|
|
13182
13223
|
if (s === '+') {
|
|
13183
13224
|
if (dom$j.hasClass(cb, 'is-opacity-20')) {
|
|
@@ -13629,7 +13670,10 @@ class EditBox {
|
|
|
13629
13670
|
overlayBg.style.left = '';
|
|
13630
13671
|
overlayBg.style.right = '';
|
|
13631
13672
|
overlayBg.style.width = '';
|
|
13632
|
-
overlayBg.style.height = '';
|
|
13673
|
+
overlayBg.style.height = '';
|
|
13674
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
13675
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
13676
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
13633
13677
|
//Show image tab
|
|
13634
13678
|
|
|
13635
13679
|
modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
|
|
@@ -63715,9 +63759,11 @@ class Image$1 {
|
|
|
63715
63759
|
img.setAttribute('data-filename', newname + '.' + extension);
|
|
63716
63760
|
}
|
|
63717
63761
|
|
|
63718
|
-
if (extension === 'jpg') {
|
|
63762
|
+
if (extension === 'jpg' || extension === 'jpeg') {
|
|
63719
63763
|
img.src = this.cropper.getCroppedCanvas({
|
|
63720
|
-
fillColor: '#fff'
|
|
63764
|
+
fillColor: '#fff',
|
|
63765
|
+
imageSmoothingEnabled: true,
|
|
63766
|
+
imageSmoothingQuality: 'high'
|
|
63721
63767
|
}).toDataURL('image/jpeg');
|
|
63722
63768
|
} else {
|
|
63723
63769
|
img.src = this.cropper.getCroppedCanvas({}).toDataURL();
|
|
@@ -64306,6 +64352,15 @@ class ButtonEditor {
|
|
|
64306
64352
|
<button title="${util.out('Text Color')}" class="text-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
|
|
64307
64353
|
</div>
|
|
64308
64354
|
</div>
|
|
64355
|
+
<div class="flex flex-col" style="margin-left: 60px;">
|
|
64356
|
+
<div>
|
|
64357
|
+
<label>${util.out('Width')}</label>:
|
|
64358
|
+
</div>
|
|
64359
|
+
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
64360
|
+
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
64361
|
+
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
64362
|
+
</div>
|
|
64363
|
+
</div>
|
|
64309
64364
|
</div>
|
|
64310
64365
|
|
|
64311
64366
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
@@ -64334,7 +64389,7 @@ class ButtonEditor {
|
|
|
64334
64389
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
64335
64390
|
<div class="flex flex-col" style="margin-right: 20px;">
|
|
64336
64391
|
<div>
|
|
64337
|
-
<label>${util.out('Padding
|
|
64392
|
+
<label>${util.out('Padding Left/Right')}</label>:
|
|
64338
64393
|
</div>
|
|
64339
64394
|
<div class="flex flex-row" style="margin-top:5px">
|
|
64340
64395
|
<button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
|
|
@@ -64348,7 +64403,7 @@ class ButtonEditor {
|
|
|
64348
64403
|
</div>
|
|
64349
64404
|
</div>
|
|
64350
64405
|
|
|
64351
|
-
<div class="flex flex-col">
|
|
64406
|
+
<div class="flex flex-col" style="display:none">
|
|
64352
64407
|
<div>
|
|
64353
64408
|
<label>${util.out('Padding Y')}</label>:
|
|
64354
64409
|
</div>
|
|
@@ -64363,6 +64418,36 @@ class ButtonEditor {
|
|
|
64363
64418
|
</div>
|
|
64364
64419
|
</div>
|
|
64365
64420
|
|
|
64421
|
+
<div class="flex flex-row" style="margin:15px 0 0">
|
|
64422
|
+
<div class="flex flex-col" style="margin-right: 20px;">
|
|
64423
|
+
<div>
|
|
64424
|
+
<label>${util.out('Padding Top')}</label>:
|
|
64425
|
+
</div>
|
|
64426
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
64427
|
+
<button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
|
|
64428
|
+
<button title="1" data-command="1" class="paddingtop-command" style="margin-right:4px">1</button>
|
|
64429
|
+
<button title="2" data-command="2" class="paddingtop-command" style="margin-right:4px">2</button>
|
|
64430
|
+
<button title="3" data-command="3" class="paddingtop-command" style="margin-right:4px">3</button>
|
|
64431
|
+
<button title="4" data-command="4" class="paddingtop-command" style="margin-right:4px">4</button>
|
|
64432
|
+
<button title="5" data-command="5" class="paddingtop-command" style="margin-right:4px">5</button>
|
|
64433
|
+
</div>
|
|
64434
|
+
</div>
|
|
64435
|
+
|
|
64436
|
+
<div class="flex flex-col">
|
|
64437
|
+
<div>
|
|
64438
|
+
<label>${util.out('Padding Bottom')}</label>:
|
|
64439
|
+
</div>
|
|
64440
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
64441
|
+
<button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
|
|
64442
|
+
<button title="1" data-command="1" class="paddingbottom-command" style="margin-right:4px">1</button>
|
|
64443
|
+
<button title="2" data-command="2" class="paddingbottom-command" style="margin-right:4px">2</button>
|
|
64444
|
+
<button title="3" data-command="3" class="paddingbottom-command" style="margin-right:4px">3</button>
|
|
64445
|
+
<button title="4" data-command="4" class="paddingbottom-command" style="margin-right:4px">4</button>
|
|
64446
|
+
<button title="5" data-command="5" class="paddingbottom-command" style="margin-right:4px">5</button>
|
|
64447
|
+
</div>
|
|
64448
|
+
</div>
|
|
64449
|
+
</div>
|
|
64450
|
+
|
|
64366
64451
|
<div class="flex flex-col" style="margin:15px 0 0">
|
|
64367
64452
|
<div>
|
|
64368
64453
|
<label>${util.out('Border Radius')}</label>:
|
|
@@ -64441,16 +64526,6 @@ class ButtonEditor {
|
|
|
64441
64526
|
|
|
64442
64527
|
</div>
|
|
64443
64528
|
|
|
64444
|
-
<div class="flex flex-col" style="margin:15px 0 0">
|
|
64445
|
-
<div>
|
|
64446
|
-
<label>${util.out('Width')}</label>:
|
|
64447
|
-
</div>
|
|
64448
|
-
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
64449
|
-
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
64450
|
-
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
64451
|
-
</div>
|
|
64452
|
-
</div>
|
|
64453
|
-
|
|
64454
64529
|
</div>
|
|
64455
64530
|
<div id="divButtonHover" class="is-tab-content" tabindex="-1" data-group="button">
|
|
64456
64531
|
|
|
@@ -64884,6 +64959,120 @@ class ButtonEditor {
|
|
|
64884
64959
|
dom.addClass(btn, 'on');
|
|
64885
64960
|
this.builder.opts.onChange();
|
|
64886
64961
|
});
|
|
64962
|
+
}); //padding top
|
|
64963
|
+
|
|
64964
|
+
btns = buttonModal.querySelectorAll('.paddingtop-command');
|
|
64965
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
64966
|
+
btn.addEventListener('click', () => {
|
|
64967
|
+
this.builder.uo.saveForUndo();
|
|
64968
|
+
const val = btn.getAttribute('data-command');
|
|
64969
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
64970
|
+
dom.removeClassesByPrefix(activeButton, 'pt-');
|
|
64971
|
+
|
|
64972
|
+
if (val === '0') {
|
|
64973
|
+
dom.addClass(activeButton, 'pt-0');
|
|
64974
|
+
}
|
|
64975
|
+
|
|
64976
|
+
if (val === '1') {
|
|
64977
|
+
dom.addClass(activeButton, 'pt-1');
|
|
64978
|
+
}
|
|
64979
|
+
|
|
64980
|
+
if (val === '2') {
|
|
64981
|
+
dom.addClass(activeButton, 'pt-2');
|
|
64982
|
+
}
|
|
64983
|
+
|
|
64984
|
+
if (val === '3') {
|
|
64985
|
+
dom.addClass(activeButton, 'pt-3');
|
|
64986
|
+
}
|
|
64987
|
+
|
|
64988
|
+
if (val === '4') {
|
|
64989
|
+
dom.addClass(activeButton, 'pt-4');
|
|
64990
|
+
}
|
|
64991
|
+
|
|
64992
|
+
if (val === '5') {
|
|
64993
|
+
dom.addClass(activeButton, 'pt-5');
|
|
64994
|
+
}
|
|
64995
|
+
|
|
64996
|
+
if (val === '6') {
|
|
64997
|
+
dom.addClass(activeButton, 'pt-6');
|
|
64998
|
+
} // Cleanup
|
|
64999
|
+
|
|
65000
|
+
|
|
65001
|
+
if ((activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5')) && (activeButton.classList.contains('pt-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
65002
|
+
activeButton.classList.remove('py-0');
|
|
65003
|
+
activeButton.classList.remove('py-1');
|
|
65004
|
+
activeButton.classList.remove('py-2');
|
|
65005
|
+
activeButton.classList.remove('py-3');
|
|
65006
|
+
activeButton.classList.remove('py-4');
|
|
65007
|
+
activeButton.classList.remove('p5-4');
|
|
65008
|
+
}
|
|
65009
|
+
|
|
65010
|
+
this.applyDefault(activeButton); // Button on/off
|
|
65011
|
+
|
|
65012
|
+
const items = buttonModal.querySelectorAll('.paddingtop-command');
|
|
65013
|
+
items.forEach(item => {
|
|
65014
|
+
dom.removeClass(item, 'on');
|
|
65015
|
+
});
|
|
65016
|
+
dom.addClass(btn, 'on');
|
|
65017
|
+
this.builder.opts.onChange();
|
|
65018
|
+
});
|
|
65019
|
+
}); //padding bottom
|
|
65020
|
+
|
|
65021
|
+
btns = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
65022
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
65023
|
+
btn.addEventListener('click', () => {
|
|
65024
|
+
this.builder.uo.saveForUndo();
|
|
65025
|
+
const val = btn.getAttribute('data-command');
|
|
65026
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
65027
|
+
dom.removeClassesByPrefix(activeButton, 'pb-');
|
|
65028
|
+
|
|
65029
|
+
if (val === '0') {
|
|
65030
|
+
dom.addClass(activeButton, 'pb-0');
|
|
65031
|
+
}
|
|
65032
|
+
|
|
65033
|
+
if (val === '1') {
|
|
65034
|
+
dom.addClass(activeButton, 'pb-1');
|
|
65035
|
+
}
|
|
65036
|
+
|
|
65037
|
+
if (val === '2') {
|
|
65038
|
+
dom.addClass(activeButton, 'pb-2');
|
|
65039
|
+
}
|
|
65040
|
+
|
|
65041
|
+
if (val === '3') {
|
|
65042
|
+
dom.addClass(activeButton, 'pb-3');
|
|
65043
|
+
}
|
|
65044
|
+
|
|
65045
|
+
if (val === '4') {
|
|
65046
|
+
dom.addClass(activeButton, 'pb-4');
|
|
65047
|
+
}
|
|
65048
|
+
|
|
65049
|
+
if (val === '5') {
|
|
65050
|
+
dom.addClass(activeButton, 'pb-5');
|
|
65051
|
+
}
|
|
65052
|
+
|
|
65053
|
+
if (val === '6') {
|
|
65054
|
+
dom.addClass(activeButton, 'pb-6');
|
|
65055
|
+
} // Cleanup
|
|
65056
|
+
|
|
65057
|
+
|
|
65058
|
+
if ((activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5')) && (activeButton.classList.contains('pt-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
65059
|
+
activeButton.classList.remove('py-0');
|
|
65060
|
+
activeButton.classList.remove('py-1');
|
|
65061
|
+
activeButton.classList.remove('py-2');
|
|
65062
|
+
activeButton.classList.remove('py-3');
|
|
65063
|
+
activeButton.classList.remove('py-4');
|
|
65064
|
+
activeButton.classList.remove('p5-4');
|
|
65065
|
+
}
|
|
65066
|
+
|
|
65067
|
+
this.applyDefault(activeButton); // Button on/off
|
|
65068
|
+
|
|
65069
|
+
const items = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
65070
|
+
items.forEach(item => {
|
|
65071
|
+
dom.removeClass(item, 'on');
|
|
65072
|
+
});
|
|
65073
|
+
dom.addClass(btn, 'on');
|
|
65074
|
+
this.builder.opts.onChange();
|
|
65075
|
+
});
|
|
64887
65076
|
}); //Font size
|
|
64888
65077
|
|
|
64889
65078
|
btns = buttonModal.querySelectorAll('.font-size-command');
|
|
@@ -65282,6 +65471,10 @@ class ButtonEditor {
|
|
|
65282
65471
|
dom.removeClass(btn, 'on');
|
|
65283
65472
|
btn = this.buttonModal.querySelector('.paddingy-command.on');
|
|
65284
65473
|
dom.removeClass(btn, 'on');
|
|
65474
|
+
btn = this.buttonModal.querySelector('.paddingtop-command.on');
|
|
65475
|
+
dom.removeClass(btn, 'on');
|
|
65476
|
+
btn = this.buttonModal.querySelector('.paddingbottom-command.on');
|
|
65477
|
+
dom.removeClass(btn, 'on');
|
|
65285
65478
|
btn = this.buttonModal.querySelector('.border-radius-command.on');
|
|
65286
65479
|
dom.removeClass(btn, 'on');
|
|
65287
65480
|
btn = this.buttonModal.querySelector('.letter-spacing-command.on');
|
|
@@ -65339,6 +65532,28 @@ class ButtonEditor {
|
|
|
65339
65532
|
let val = item.replace('py-', '');
|
|
65340
65533
|
let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
|
|
65341
65534
|
dom.addClass(btn, 'on');
|
|
65535
|
+
|
|
65536
|
+
if (!(activeButton.classList.contains('pt-0') || activeButton.classList.contains('pt-1') || activeButton.classList.contains('pt-2') || activeButton.classList.contains('pt-3') || activeButton.classList.contains('pt-4') || activeButton.classList.contains('pt-5'))) {
|
|
65537
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
65538
|
+
dom.addClass(btn, 'on');
|
|
65539
|
+
}
|
|
65540
|
+
|
|
65541
|
+
if (!(activeButton.classList.contains('pb-0') || activeButton.classList.contains('pb-1') || activeButton.classList.contains('pb-2') || activeButton.classList.contains('pb-3') || activeButton.classList.contains('pb-4') || activeButton.classList.contains('pb-5'))) {
|
|
65542
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
65543
|
+
dom.addClass(btn, 'on');
|
|
65544
|
+
}
|
|
65545
|
+
}
|
|
65546
|
+
|
|
65547
|
+
if (item.indexOf('pt-') === 0) {
|
|
65548
|
+
let val = item.replace('pt-', '');
|
|
65549
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
65550
|
+
dom.addClass(btn, 'on');
|
|
65551
|
+
}
|
|
65552
|
+
|
|
65553
|
+
if (item.indexOf('pb-') === 0) {
|
|
65554
|
+
let val = item.replace('pb-', '');
|
|
65555
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
65556
|
+
dom.addClass(btn, 'on');
|
|
65342
65557
|
}
|
|
65343
65558
|
|
|
65344
65559
|
if (item.indexOf('rounded-') === 0) {
|
|
@@ -71107,6 +71322,10 @@ class ColumnTool {
|
|
|
71107
71322
|
<input type="range" min="0" max="100" value="0" class="image-vert-slider is-rangeslider">
|
|
71108
71323
|
</div>
|
|
71109
71324
|
|
|
71325
|
+
<div style="padding-bottom:3px;padding-top: 10px;display:flex;justify-content:right;align-items:center;">
|
|
71326
|
+
<button title="${util.out('Reset')}" class="image-reset" style="display:flex;width:30px;height:30px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
71327
|
+
</div>
|
|
71328
|
+
|
|
71110
71329
|
</div>
|
|
71111
71330
|
|
|
71112
71331
|
</div>
|
|
@@ -71571,12 +71790,56 @@ class ColumnTool {
|
|
|
71571
71790
|
//val: 100 - 500
|
|
71572
71791
|
let val = inpImageScaleSlider.value;
|
|
71573
71792
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71793
|
+
// cell.style.backgroundSize = val + '%';
|
|
71794
|
+
|
|
71795
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71796
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71797
|
+
if (!dataBg) dataBg = '';
|
|
71798
|
+
let div = document.createElement('div');
|
|
71799
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71800
|
+
|
|
71801
|
+
div.style.backgroundSize = 'cover';
|
|
71802
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71803
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71804
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71805
|
+
if (!dataBg) dataBg = '';
|
|
71806
|
+
let div = document.createElement('div');
|
|
71807
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71808
|
+
|
|
71809
|
+
div.style.backgroundSize = 'cover';
|
|
71810
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
71811
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
71812
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
71813
|
+
if (!dataBg) dataBg = '';
|
|
71814
|
+
let div = document.createElement('div');
|
|
71815
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71816
|
+
|
|
71817
|
+
div.style.backgroundSize = 'cover';
|
|
71818
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
71819
|
+
} else {
|
|
71820
|
+
cell.style.backgroundSize = val + '%';
|
|
71821
|
+
} // Clean unused
|
|
71574
71822
|
|
|
71575
|
-
|
|
71823
|
+
|
|
71824
|
+
cell.style.left = '';
|
|
71825
|
+
cell.style.top = '';
|
|
71826
|
+
cell.style.width = '';
|
|
71827
|
+
cell.style.height = '';
|
|
71828
|
+
cell.removeAttribute('data-x');
|
|
71829
|
+
cell.removeAttribute('data-y');
|
|
71830
|
+
cell.removeAttribute('data-scale');
|
|
71576
71831
|
};
|
|
71577
71832
|
|
|
71578
71833
|
inpImageScaleSlider.onchange = () => {
|
|
71579
|
-
|
|
71834
|
+
if (document.querySelector('.page-preview.is-screen-375.active')) {
|
|
71835
|
+
inpImageScaleSlider.value = 0;
|
|
71836
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active')) {
|
|
71837
|
+
inpImageScaleSlider.value = 0;
|
|
71838
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active')) {
|
|
71839
|
+
inpImageScaleSlider.value = 0;
|
|
71840
|
+
} //Trigger Change event
|
|
71841
|
+
|
|
71842
|
+
|
|
71580
71843
|
this.builder.opts.onChange();
|
|
71581
71844
|
}; // Scale 2
|
|
71582
71845
|
|
|
@@ -71625,8 +71888,44 @@ class ColumnTool {
|
|
|
71625
71888
|
//val: 0 - 100
|
|
71626
71889
|
let val = inpImageHorSlider.value;
|
|
71627
71890
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71891
|
+
// cell.style.backgroundPositionX = val + '%';
|
|
71892
|
+
|
|
71893
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71894
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71895
|
+
if (!dataBg) dataBg = '';
|
|
71896
|
+
let div = document.createElement('div');
|
|
71897
|
+
div.style.cssText = dataBg;
|
|
71898
|
+
div.style.backgroundPositionX = val + '%';
|
|
71899
|
+
div.style.backgroundSize = 'cover';
|
|
71900
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71901
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71902
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71903
|
+
if (!dataBg) dataBg = '';
|
|
71904
|
+
let div = document.createElement('div');
|
|
71905
|
+
div.style.cssText = dataBg;
|
|
71906
|
+
div.style.backgroundPositionX = val + '%';
|
|
71907
|
+
div.style.backgroundSize = 'cover';
|
|
71908
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
71909
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
71910
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
71911
|
+
if (!dataBg) dataBg = '';
|
|
71912
|
+
let div = document.createElement('div');
|
|
71913
|
+
div.style.cssText = dataBg;
|
|
71914
|
+
div.style.backgroundPositionX = val + '%';
|
|
71915
|
+
div.style.backgroundSize = 'cover';
|
|
71916
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
71917
|
+
} else {
|
|
71918
|
+
cell.style.backgroundPositionX = val + '%';
|
|
71919
|
+
} // Clean unused
|
|
71920
|
+
|
|
71628
71921
|
|
|
71629
|
-
cell.style.
|
|
71922
|
+
cell.style.left = '';
|
|
71923
|
+
cell.style.top = '';
|
|
71924
|
+
cell.style.width = '';
|
|
71925
|
+
cell.style.height = '';
|
|
71926
|
+
cell.removeAttribute('data-x');
|
|
71927
|
+
cell.removeAttribute('data-y');
|
|
71928
|
+
cell.removeAttribute('data-scale');
|
|
71630
71929
|
};
|
|
71631
71930
|
|
|
71632
71931
|
inpImageHorSlider.onchange = () => {
|
|
@@ -71670,8 +71969,44 @@ class ColumnTool {
|
|
|
71670
71969
|
//val: 0 - 100
|
|
71671
71970
|
let val = inpImageVertSlider.value;
|
|
71672
71971
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71972
|
+
// cell.style.backgroundPositionY = val + '%';
|
|
71973
|
+
|
|
71974
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71975
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71976
|
+
if (!dataBg) dataBg = '';
|
|
71977
|
+
let div = document.createElement('div');
|
|
71978
|
+
div.style.cssText = dataBg;
|
|
71979
|
+
div.style.backgroundPositionY = val + '%';
|
|
71980
|
+
div.style.backgroundSize = 'cover';
|
|
71981
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71982
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71983
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71984
|
+
if (!dataBg) dataBg = '';
|
|
71985
|
+
let div = document.createElement('div');
|
|
71986
|
+
div.style.cssText = dataBg;
|
|
71987
|
+
div.style.backgroundPositionY = val + '%';
|
|
71988
|
+
div.style.backgroundSize = 'cover';
|
|
71989
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
71990
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
71991
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
71992
|
+
if (!dataBg) dataBg = '';
|
|
71993
|
+
let div = document.createElement('div');
|
|
71994
|
+
div.style.cssText = dataBg;
|
|
71995
|
+
div.style.backgroundPositionY = val + '%';
|
|
71996
|
+
div.style.backgroundSize = 'cover';
|
|
71997
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
71998
|
+
} else {
|
|
71999
|
+
cell.style.backgroundPositionY = val + '%';
|
|
72000
|
+
} // Clean unused
|
|
72001
|
+
|
|
71673
72002
|
|
|
71674
|
-
cell.style.
|
|
72003
|
+
cell.style.left = '';
|
|
72004
|
+
cell.style.top = '';
|
|
72005
|
+
cell.style.width = '';
|
|
72006
|
+
cell.style.height = '';
|
|
72007
|
+
cell.removeAttribute('data-x');
|
|
72008
|
+
cell.removeAttribute('data-y');
|
|
72009
|
+
cell.removeAttribute('data-scale');
|
|
71675
72010
|
};
|
|
71676
72011
|
|
|
71677
72012
|
inpImageVertSlider.onchange = () => {
|
|
@@ -71700,14 +72035,23 @@ class ColumnTool {
|
|
|
71700
72035
|
inpImageVertSlider2.onchange = () => {
|
|
71701
72036
|
//Trigger Change event
|
|
71702
72037
|
this.builder.opts.onChange();
|
|
71703
|
-
};
|
|
72038
|
+
}; //Reset
|
|
71704
72039
|
|
|
71705
|
-
|
|
72040
|
+
|
|
72041
|
+
const btnImageReset = imageAdjust.querySelector('.image-reset');
|
|
71706
72042
|
btnImageReset.addEventListener('click', () => {
|
|
71707
72043
|
this.builder.uo.saveForUndo();
|
|
71708
72044
|
let cell = this.builder.elementSelected;
|
|
71709
72045
|
this.resetImage(cell); //Trigger Change event
|
|
71710
72046
|
|
|
72047
|
+
this.builder.opts.onChange();
|
|
72048
|
+
});
|
|
72049
|
+
const btnImageReset2 = imageAdjust2.querySelector('.image-reset');
|
|
72050
|
+
btnImageReset2.addEventListener('click', () => {
|
|
72051
|
+
this.builder.uo.saveForUndo();
|
|
72052
|
+
let cell = this.builder.elementSelected;
|
|
72053
|
+
this.resetImage2(cell); //Trigger Change event
|
|
72054
|
+
|
|
71711
72055
|
this.builder.opts.onChange();
|
|
71712
72056
|
}); // Row Enlarge (Currently not used)
|
|
71713
72057
|
|
|
@@ -72635,8 +72979,9 @@ class ColumnTool {
|
|
|
72635
72979
|
if (btn) btn.setAttribute('data-focus', true);
|
|
72636
72980
|
}
|
|
72637
72981
|
|
|
72638
|
-
openImageAdjust(elm, btn) {
|
|
72639
|
-
//Current value
|
|
72982
|
+
openImageAdjust(elm, btn, useTarget) {
|
|
72983
|
+
if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
|
|
72984
|
+
|
|
72640
72985
|
const imageAdjust = this.imageAdjust;
|
|
72641
72986
|
const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
|
|
72642
72987
|
const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
|
|
@@ -72645,9 +72990,40 @@ class ColumnTool {
|
|
|
72645
72990
|
inpImageHorSlider.value = 0;
|
|
72646
72991
|
inpImageVertSlider.value = 0;
|
|
72647
72992
|
|
|
72648
|
-
if (
|
|
72993
|
+
if (useTarget) {
|
|
72994
|
+
inpImageHorSlider.value = 50;
|
|
72995
|
+
inpImageVertSlider.value = 60;
|
|
72996
|
+
}
|
|
72997
|
+
|
|
72998
|
+
let div = document.createElement('div');
|
|
72999
|
+
|
|
73000
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && useTarget) {
|
|
73001
|
+
let dataBg = elm.getAttribute('data-bg-xs');
|
|
73002
|
+
if (!dataBg) dataBg = '';
|
|
73003
|
+
div.style.cssText = dataBg;
|
|
73004
|
+
inpImageScaleSlider.disabled = true;
|
|
73005
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73006
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && useTarget) {
|
|
73007
|
+
let dataBg = elm.getAttribute('data-bg-sm');
|
|
73008
|
+
if (!dataBg) dataBg = '';
|
|
73009
|
+
div.style.cssText = dataBg;
|
|
73010
|
+
inpImageScaleSlider.disabled = true;
|
|
73011
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73012
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && useTarget) {
|
|
73013
|
+
let dataBg = elm.getAttribute('data-bg-md');
|
|
73014
|
+
if (!dataBg) dataBg = '';
|
|
73015
|
+
div.style.cssText = dataBg;
|
|
73016
|
+
inpImageScaleSlider.disabled = true;
|
|
73017
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73018
|
+
} else {
|
|
73019
|
+
div.style.cssText = elm.style.cssText;
|
|
73020
|
+
inpImageScaleSlider.disabled = false;
|
|
73021
|
+
inpImageScaleSlider.style.opacity = '';
|
|
73022
|
+
}
|
|
73023
|
+
|
|
73024
|
+
if (div.style.backgroundSize) {
|
|
72649
73025
|
let val;
|
|
72650
|
-
let bgSize =
|
|
73026
|
+
let bgSize = div.style.backgroundSize;
|
|
72651
73027
|
|
|
72652
73028
|
if (isNaN(parseInt(bgSize))) {
|
|
72653
73029
|
val = 100;
|
|
@@ -72660,9 +73036,9 @@ class ColumnTool {
|
|
|
72660
73036
|
}
|
|
72661
73037
|
}
|
|
72662
73038
|
|
|
72663
|
-
if (
|
|
73039
|
+
if (div.style.backgroundPositionX) {
|
|
72664
73040
|
let val;
|
|
72665
|
-
let bgPosX =
|
|
73041
|
+
let bgPosX = div.style.backgroundPositionX;
|
|
72666
73042
|
|
|
72667
73043
|
if (isNaN(parseInt(bgPosX))) {
|
|
72668
73044
|
val = 0;
|
|
@@ -72675,9 +73051,9 @@ class ColumnTool {
|
|
|
72675
73051
|
}
|
|
72676
73052
|
}
|
|
72677
73053
|
|
|
72678
|
-
if (
|
|
73054
|
+
if (div.style.backgroundPositionY) {
|
|
72679
73055
|
let val;
|
|
72680
|
-
let bgPosY =
|
|
73056
|
+
let bgPosY = div.style.backgroundPositionY;
|
|
72681
73057
|
|
|
72682
73058
|
if (isNaN(parseInt(bgPosY))) {
|
|
72683
73059
|
val = 0;
|
|
@@ -72704,6 +73080,31 @@ class ColumnTool {
|
|
|
72704
73080
|
}
|
|
72705
73081
|
|
|
72706
73082
|
resetImage(elm) {
|
|
73083
|
+
//Current value
|
|
73084
|
+
const imageAdjust = this.imageAdjust;
|
|
73085
|
+
const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
|
|
73086
|
+
const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
|
|
73087
|
+
const inpImageVertSlider = imageAdjust.querySelector('.image-vert-slider');
|
|
73088
|
+
inpImageHorSlider.value = 50;
|
|
73089
|
+
inpImageVertSlider.value = 60;
|
|
73090
|
+
inpImageScaleSlider.value = 0;
|
|
73091
|
+
elm.style.backgroundPositionX = '';
|
|
73092
|
+
elm.style.backgroundPositionY = '';
|
|
73093
|
+
elm.style.backgroundSize = ''; // Clean unused
|
|
73094
|
+
|
|
73095
|
+
elm.style.left = '';
|
|
73096
|
+
elm.style.top = '';
|
|
73097
|
+
elm.style.width = '';
|
|
73098
|
+
elm.style.height = '';
|
|
73099
|
+
elm.removeAttribute('data-x');
|
|
73100
|
+
elm.removeAttribute('data-y');
|
|
73101
|
+
elm.removeAttribute('data-scale');
|
|
73102
|
+
elm.removeAttribute('data-bg-xs');
|
|
73103
|
+
elm.removeAttribute('data-bg-sm');
|
|
73104
|
+
elm.removeAttribute('data-bg-md');
|
|
73105
|
+
}
|
|
73106
|
+
|
|
73107
|
+
resetImage2(elm) {
|
|
72707
73108
|
//Current value
|
|
72708
73109
|
const imageAdjust2 = this.imageAdjust2;
|
|
72709
73110
|
const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
|
|
@@ -89718,11 +90119,11 @@ class ContentBuilder {
|
|
|
89718
90119
|
this.colTool.openImagePicker(currentUrl, callback, btn);
|
|
89719
90120
|
}
|
|
89720
90121
|
|
|
89721
|
-
openImageAdjust(elm, btn) {
|
|
90122
|
+
openImageAdjust(elm, btn, useTarget) {
|
|
89722
90123
|
if (this.opts.imageAdjust === 2) {
|
|
89723
90124
|
this.colTool.openImageAdjust2(elm, btn);
|
|
89724
90125
|
} else {
|
|
89725
|
-
this.colTool.openImageAdjust(elm, btn);
|
|
90126
|
+
this.colTool.openImageAdjust(elm, btn, useTarget);
|
|
89726
90127
|
}
|
|
89727
90128
|
}
|
|
89728
90129
|
|
|
@@ -93686,6 +94087,10 @@ class AnimateScroll {
|
|
|
93686
94087
|
.is-screen-375 .is-modal-bar > span {
|
|
93687
94088
|
display: none;
|
|
93688
94089
|
}
|
|
94090
|
+
|
|
94091
|
+
.page-preview:focus-within {
|
|
94092
|
+
z-index:100021 !important
|
|
94093
|
+
}
|
|
93689
94094
|
</style>
|
|
93690
94095
|
<div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
93691
94096
|
<div class="is-modal-bar is-draggable" draggable="">
|
|
@@ -96013,6 +96418,12 @@ class AnimateScroll {
|
|
|
96013
96418
|
// };
|
|
96014
96419
|
|
|
96015
96420
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
96421
|
+
|
|
96422
|
+
iframe.onload = () => {
|
|
96423
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96424
|
+
iframe.focus();
|
|
96425
|
+
});
|
|
96426
|
+
};
|
|
96016
96427
|
});
|
|
96017
96428
|
const btnModalRefresh = modalPagePreview.querySelector('.is-modal-refresh');
|
|
96018
96429
|
btnModalRefresh.addEventListener('click', () => {
|
|
@@ -96024,6 +96435,12 @@ class AnimateScroll {
|
|
|
96024
96435
|
localStorage.setItem('preview-sectioncss', sectionCss);
|
|
96025
96436
|
const iframe = modalPagePreview.querySelector('iframe');
|
|
96026
96437
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
96438
|
+
|
|
96439
|
+
iframe.onload = () => {
|
|
96440
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96441
|
+
iframe.focus();
|
|
96442
|
+
});
|
|
96443
|
+
};
|
|
96027
96444
|
}); // ---
|
|
96028
96445
|
//Extend onPageContentClick
|
|
96029
96446
|
|
|
@@ -96116,6 +96533,12 @@ class AnimateScroll {
|
|
|
96116
96533
|
modalPagePreview.classList.add(localStorage.getItem('_livepreviewscreen'));
|
|
96117
96534
|
}
|
|
96118
96535
|
|
|
96536
|
+
iframe.onload = () => {
|
|
96537
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96538
|
+
iframe.focus();
|
|
96539
|
+
});
|
|
96540
|
+
};
|
|
96541
|
+
|
|
96119
96542
|
localStorage.setItem('_livepreview', '1');
|
|
96120
96543
|
}
|
|
96121
96544
|
|
|
@@ -97835,7 +98258,7 @@ class Timeline {
|
|
|
97835
98258
|
right: 30px !important;
|
|
97836
98259
|
z-index: 10002 !important;
|
|
97837
98260
|
}
|
|
97838
|
-
|
|
98261
|
+
/*
|
|
97839
98262
|
@media all and (max-width: 1919px) {
|
|
97840
98263
|
.is-modal.page-timeline {
|
|
97841
98264
|
width: 60vw !important;
|
|
@@ -97862,10 +98285,17 @@ class Timeline {
|
|
|
97862
98285
|
min-width: 576px;
|
|
97863
98286
|
}
|
|
97864
98287
|
}
|
|
98288
|
+
*/
|
|
98289
|
+
@media all and (max-width: 1340px) {
|
|
98290
|
+
.is-modal.page-timeline {
|
|
98291
|
+
width: 60vw !important;
|
|
98292
|
+
min-width: 576px;
|
|
98293
|
+
}
|
|
98294
|
+
}
|
|
97865
98295
|
|
|
97866
98296
|
.page-timeline td {
|
|
97867
98297
|
font-size: 13px;
|
|
97868
|
-
padding: 3px
|
|
98298
|
+
padding: 3px 1px;
|
|
97869
98299
|
}
|
|
97870
98300
|
.page-timeline .table-header td {
|
|
97871
98301
|
font-size: 11px;
|
|
@@ -97877,10 +98307,17 @@ class Timeline {
|
|
|
97877
98307
|
font-weight: 300 !important;
|
|
97878
98308
|
padding: 0 !important;
|
|
97879
98309
|
width: 36px !important;
|
|
97880
|
-
height:
|
|
98310
|
+
height: 29px !important;
|
|
97881
98311
|
text-align: center !important;
|
|
97882
98312
|
letter-spacing: 0px !important;
|
|
97883
98313
|
}
|
|
98314
|
+
.page-timeline td input.inp-extra2 {
|
|
98315
|
+
background-color: #f5f5f5 !important;
|
|
98316
|
+
}
|
|
98317
|
+
|
|
98318
|
+
.page-timeline:focus-within {
|
|
98319
|
+
z-index:100021 !important
|
|
98320
|
+
}
|
|
97884
98321
|
</style>
|
|
97885
98322
|
<div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
97886
98323
|
<div class="is-modal-bar is-draggable" draggable="">
|
|
@@ -97892,38 +98329,43 @@ class Timeline {
|
|
|
97892
98329
|
<div style="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
|
|
97893
98330
|
|
|
97894
98331
|
<div style="width:1180px;">
|
|
97895
|
-
<table class="table-timeline" style="margin:
|
|
98332
|
+
<table class="table-timeline" style="margin:0px 15px 12px;border-collapse:collapse;">
|
|
97896
98333
|
<tr class="table-header">
|
|
97897
98334
|
<td style="text-align:center"> </td>
|
|
97898
|
-
<td style="text-align:center">0
|
|
97899
|
-
<td style="text-align:center"></td>
|
|
98335
|
+
<td style="text-align:center">0%</td>
|
|
97900
98336
|
<td style="text-align:center"></td>
|
|
97901
98337
|
<td style="text-align:center"></td>
|
|
97902
98338
|
<td style="text-align:center"></td>
|
|
97903
98339
|
<td style="text-align:center"></td>
|
|
97904
98340
|
<td style="text-align:center"></td>
|
|
97905
|
-
<td style="text-align:center">50%</td>
|
|
97906
98341
|
<td style="text-align:center"></td>
|
|
97907
98342
|
<td style="text-align:center"></td>
|
|
98343
|
+
<td style="text-align:center">50%</td>
|
|
97908
98344
|
<td style="text-align:center"></td>
|
|
97909
98345
|
<td style="text-align:center"></td>
|
|
97910
98346
|
<td style="text-align:center"></td>
|
|
97911
98347
|
<td style="text-align:center"></td>
|
|
97912
|
-
<td style="text-align:center">100%</td>
|
|
97913
98348
|
<td style="text-align:center"></td>
|
|
97914
98349
|
<td style="text-align:center"></td>
|
|
97915
98350
|
<td style="text-align:center"></td>
|
|
98351
|
+
<td style="text-align:center;padding-right:9px">100%</td>
|
|
97916
98352
|
<td style="text-align:center"></td>
|
|
97917
98353
|
<td style="text-align:center"></td>
|
|
97918
98354
|
<td style="text-align:center"></td>
|
|
97919
|
-
<td style="text-align:center"
|
|
97920
|
-
|
|
98355
|
+
<td style="text-align:center" colspan="6">${out('Extended (for use with pinned section)')}</td>
|
|
98356
|
+
<!--<td style="text-align:center"></td>
|
|
97921
98357
|
<td style="text-align:center"></td>
|
|
97922
98358
|
<td style="text-align:center"></td>
|
|
97923
98359
|
<td style="text-align:center"></td>
|
|
98360
|
+
<td style="text-align:center">150%</td>
|
|
98361
|
+
<td style="text-align:center"></td>-->
|
|
97924
98362
|
<td style="text-align:center"></td>
|
|
97925
98363
|
<td style="text-align:center"></td>
|
|
97926
|
-
<td style="text-align:center">
|
|
98364
|
+
<td style="text-align:center;padding:0">
|
|
98365
|
+
<button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:23px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
|
|
98366
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98367
|
+
</button>
|
|
98368
|
+
</td>
|
|
97927
98369
|
</tr>
|
|
97928
98370
|
<tr>
|
|
97929
98371
|
<td>
|
|
@@ -97982,40 +98424,40 @@ class Timeline {
|
|
|
97982
98424
|
</td>
|
|
97983
98425
|
|
|
97984
98426
|
<td>
|
|
97985
|
-
<input class="inp-x-1700" placeholder="" type="text" />
|
|
98427
|
+
<input class="inp-x-1700 inp-extra" placeholder="" type="text" />
|
|
97986
98428
|
</td>
|
|
97987
98429
|
<td>
|
|
97988
|
-
<input class="inp-x-1800" placeholder="" type="text" />
|
|
98430
|
+
<input class="inp-x-1800 inp-extra" placeholder="" type="text" />
|
|
97989
98431
|
</td>
|
|
97990
98432
|
<td>
|
|
97991
|
-
<input class="inp-x-1900" placeholder="" type="text" />
|
|
98433
|
+
<input class="inp-x-1900 inp-extra" placeholder="" type="text" />
|
|
97992
98434
|
</td>
|
|
97993
98435
|
<td>
|
|
97994
|
-
<input class="inp-x-2000" placeholder="" type="text" />
|
|
98436
|
+
<input class="inp-x-2000 inp-extra" placeholder="" type="text" />
|
|
97995
98437
|
</td>
|
|
97996
98438
|
<td>
|
|
97997
|
-
<input class="inp-x-2100" placeholder="" type="text" />
|
|
98439
|
+
<input class="inp-x-2100 inp-extra" placeholder="" type="text" />
|
|
97998
98440
|
</td>
|
|
97999
98441
|
<td>
|
|
98000
|
-
<input class="inp-x-2200" placeholder="" type="text" />
|
|
98442
|
+
<input class="inp-x-2200 inp-extra" placeholder="" type="text" />
|
|
98001
98443
|
</td>
|
|
98002
98444
|
<td>
|
|
98003
|
-
<input class="inp-x-2300" placeholder="" type="text" />
|
|
98445
|
+
<input class="inp-x-2300 inp-extra" placeholder="" type="text" />
|
|
98004
98446
|
</td>
|
|
98005
98447
|
<td>
|
|
98006
|
-
<input class="inp-x-2400" placeholder="" type="text" />
|
|
98448
|
+
<input class="inp-x-2400 inp-extra" placeholder="" type="text" />
|
|
98007
98449
|
</td>
|
|
98008
98450
|
<td>
|
|
98009
|
-
<input class="inp-x-2500" placeholder="" type="text" />
|
|
98451
|
+
<input class="inp-x-2500 inp-extra" placeholder="" type="text" />
|
|
98010
98452
|
</td>
|
|
98011
98453
|
<td>
|
|
98012
|
-
<input class="inp-x-2600" placeholder="" type="text" />
|
|
98454
|
+
<input class="inp-x-2600 inp-extra" placeholder="" type="text" />
|
|
98013
98455
|
</td>
|
|
98014
98456
|
<td>
|
|
98015
|
-
<input class="inp-x-2700" placeholder="" type="text" />
|
|
98457
|
+
<input class="inp-x-2700 inp-extra" placeholder="" type="text" />
|
|
98016
98458
|
</td>
|
|
98017
98459
|
<td>
|
|
98018
|
-
<input class="inp-x-2800" placeholder="" type="text" />
|
|
98460
|
+
<input class="inp-x-2800 inp-extra" placeholder="" type="text" />
|
|
98019
98461
|
</td>
|
|
98020
98462
|
</tr>
|
|
98021
98463
|
<tr>
|
|
@@ -98075,40 +98517,40 @@ class Timeline {
|
|
|
98075
98517
|
</td>
|
|
98076
98518
|
|
|
98077
98519
|
<td>
|
|
98078
|
-
<input class="inp-y-1700" placeholder="" type="text" />
|
|
98520
|
+
<input class="inp-y-1700 inp-extra" placeholder="" type="text" />
|
|
98079
98521
|
</td>
|
|
98080
98522
|
<td>
|
|
98081
|
-
<input class="inp-y-1800" placeholder="" type="text" />
|
|
98523
|
+
<input class="inp-y-1800 inp-extra" placeholder="" type="text" />
|
|
98082
98524
|
</td>
|
|
98083
98525
|
<td>
|
|
98084
|
-
<input class="inp-y-1900" placeholder="" type="text" />
|
|
98526
|
+
<input class="inp-y-1900 inp-extra" placeholder="" type="text" />
|
|
98085
98527
|
</td>
|
|
98086
98528
|
<td>
|
|
98087
|
-
<input class="inp-y-2000" placeholder="" type="text" />
|
|
98529
|
+
<input class="inp-y-2000 inp-extra" placeholder="" type="text" />
|
|
98088
98530
|
</td>
|
|
98089
98531
|
<td>
|
|
98090
|
-
<input class="inp-y-2100" placeholder="" type="text" />
|
|
98532
|
+
<input class="inp-y-2100 inp-extra" placeholder="" type="text" />
|
|
98091
98533
|
</td>
|
|
98092
98534
|
<td>
|
|
98093
|
-
<input class="inp-y-2200" placeholder="" type="text" />
|
|
98535
|
+
<input class="inp-y-2200 inp-extra" placeholder="" type="text" />
|
|
98094
98536
|
</td>
|
|
98095
98537
|
<td>
|
|
98096
|
-
<input class="inp-y-2300" placeholder="" type="text" />
|
|
98538
|
+
<input class="inp-y-2300 inp-extra" placeholder="" type="text" />
|
|
98097
98539
|
</td>
|
|
98098
98540
|
<td>
|
|
98099
|
-
<input class="inp-y-2400" placeholder="" type="text" />
|
|
98541
|
+
<input class="inp-y-2400 inp-extra" placeholder="" type="text" />
|
|
98100
98542
|
</td>
|
|
98101
98543
|
<td>
|
|
98102
|
-
<input class="inp-y-2500" placeholder="" type="text" />
|
|
98544
|
+
<input class="inp-y-2500 inp-extra" placeholder="" type="text" />
|
|
98103
98545
|
</td>
|
|
98104
98546
|
<td>
|
|
98105
|
-
<input class="inp-y-2600" placeholder="" type="text" />
|
|
98547
|
+
<input class="inp-y-2600 inp-extra" placeholder="" type="text" />
|
|
98106
98548
|
</td>
|
|
98107
98549
|
<td>
|
|
98108
|
-
<input class="inp-y-2700" placeholder="" type="text" />
|
|
98550
|
+
<input class="inp-y-2700 inp-extra" placeholder="" type="text" />
|
|
98109
98551
|
</td>
|
|
98110
98552
|
<td>
|
|
98111
|
-
<input class="inp-y-2800" placeholder="" type="text" />
|
|
98553
|
+
<input class="inp-y-2800 inp-extra" placeholder="" type="text" />
|
|
98112
98554
|
</td>
|
|
98113
98555
|
</tr>
|
|
98114
98556
|
<tr>
|
|
@@ -98168,40 +98610,40 @@ class Timeline {
|
|
|
98168
98610
|
</td>
|
|
98169
98611
|
|
|
98170
98612
|
<td>
|
|
98171
|
-
<input class="inp-sc-1700" placeholder="" type="text" />
|
|
98613
|
+
<input class="inp-sc-1700 inp-extra" placeholder="" type="text" />
|
|
98172
98614
|
</td>
|
|
98173
98615
|
<td>
|
|
98174
|
-
<input class="inp-sc-1800" placeholder="" type="text" />
|
|
98616
|
+
<input class="inp-sc-1800 inp-extra" placeholder="" type="text" />
|
|
98175
98617
|
</td>
|
|
98176
98618
|
<td>
|
|
98177
|
-
<input class="inp-sc-1900" placeholder="" type="text" />
|
|
98619
|
+
<input class="inp-sc-1900 inp-extra" placeholder="" type="text" />
|
|
98178
98620
|
</td>
|
|
98179
98621
|
<td>
|
|
98180
|
-
<input class="inp-sc-2000" placeholder="" type="text" />
|
|
98622
|
+
<input class="inp-sc-2000 inp-extra" placeholder="" type="text" />
|
|
98181
98623
|
</td>
|
|
98182
98624
|
<td>
|
|
98183
|
-
<input class="inp-sc-2100" placeholder="" type="text" />
|
|
98625
|
+
<input class="inp-sc-2100 inp-extra" placeholder="" type="text" />
|
|
98184
98626
|
</td>
|
|
98185
98627
|
<td>
|
|
98186
|
-
<input class="inp-sc-2200" placeholder="" type="text" />
|
|
98628
|
+
<input class="inp-sc-2200 inp-extra" placeholder="" type="text" />
|
|
98187
98629
|
</td>
|
|
98188
98630
|
<td>
|
|
98189
|
-
<input class="inp-sc-2300" placeholder="" type="text" />
|
|
98631
|
+
<input class="inp-sc-2300 inp-extra" placeholder="" type="text" />
|
|
98190
98632
|
</td>
|
|
98191
98633
|
<td>
|
|
98192
|
-
<input class="inp-sc-2400" placeholder="" type="text" />
|
|
98634
|
+
<input class="inp-sc-2400 inp-extra" placeholder="" type="text" />
|
|
98193
98635
|
</td>
|
|
98194
98636
|
<td>
|
|
98195
|
-
<input class="inp-sc-2500" placeholder="" type="text" />
|
|
98637
|
+
<input class="inp-sc-2500 inp-extra" placeholder="" type="text" />
|
|
98196
98638
|
</td>
|
|
98197
98639
|
<td>
|
|
98198
|
-
<input class="inp-sc-2600" placeholder="" type="text" />
|
|
98640
|
+
<input class="inp-sc-2600 inp-extra" placeholder="" type="text" />
|
|
98199
98641
|
</td>
|
|
98200
98642
|
<td>
|
|
98201
|
-
<input class="inp-sc-2700" placeholder="" type="text" />
|
|
98643
|
+
<input class="inp-sc-2700 inp-extra" placeholder="" type="text" />
|
|
98202
98644
|
</td>
|
|
98203
98645
|
<td>
|
|
98204
|
-
<input class="inp-sc-2800" placeholder="" type="text" />
|
|
98646
|
+
<input class="inp-sc-2800 inp-extra" placeholder="" type="text" />
|
|
98205
98647
|
</td>
|
|
98206
98648
|
</tr>
|
|
98207
98649
|
<tr>
|
|
@@ -98261,40 +98703,40 @@ class Timeline {
|
|
|
98261
98703
|
</td>
|
|
98262
98704
|
|
|
98263
98705
|
<td>
|
|
98264
|
-
<input class="inp-rt-1700" placeholder="" type="text" />
|
|
98706
|
+
<input class="inp-rt-1700 inp-extra" placeholder="" type="text" />
|
|
98265
98707
|
</td>
|
|
98266
98708
|
<td>
|
|
98267
|
-
<input class="inp-rt-1800" placeholder="" type="text" />
|
|
98709
|
+
<input class="inp-rt-1800 inp-extra" placeholder="" type="text" />
|
|
98268
98710
|
</td>
|
|
98269
98711
|
<td>
|
|
98270
|
-
<input class="inp-rt-1900" placeholder="" type="text" />
|
|
98712
|
+
<input class="inp-rt-1900 inp-extra" placeholder="" type="text" />
|
|
98271
98713
|
</td>
|
|
98272
98714
|
<td>
|
|
98273
|
-
<input class="inp-rt-2000" placeholder="" type="text" />
|
|
98715
|
+
<input class="inp-rt-2000 inp-extra" placeholder="" type="text" />
|
|
98274
98716
|
</td>
|
|
98275
98717
|
<td>
|
|
98276
|
-
<input class="inp-rt-2100" placeholder="" type="text" />
|
|
98718
|
+
<input class="inp-rt-2100 inp-extra" placeholder="" type="text" />
|
|
98277
98719
|
</td>
|
|
98278
98720
|
<td>
|
|
98279
|
-
<input class="inp-rt-2200" placeholder="" type="text" />
|
|
98721
|
+
<input class="inp-rt-2200 inp-extra" placeholder="" type="text" />
|
|
98280
98722
|
</td>
|
|
98281
98723
|
<td>
|
|
98282
|
-
<input class="inp-rt-2300" placeholder="" type="text" />
|
|
98724
|
+
<input class="inp-rt-2300 inp-extra" placeholder="" type="text" />
|
|
98283
98725
|
</td>
|
|
98284
98726
|
<td>
|
|
98285
|
-
<input class="inp-rt-2400" placeholder="" type="text" />
|
|
98727
|
+
<input class="inp-rt-2400 inp-extra" placeholder="" type="text" />
|
|
98286
98728
|
</td>
|
|
98287
98729
|
<td>
|
|
98288
|
-
<input class="inp-rt-2500" placeholder="" type="text" />
|
|
98730
|
+
<input class="inp-rt-2500 inp-extra" placeholder="" type="text" />
|
|
98289
98731
|
</td>
|
|
98290
98732
|
<td>
|
|
98291
|
-
<input class="inp-rt-2600" placeholder="" type="text" />
|
|
98733
|
+
<input class="inp-rt-2600 inp-extra" placeholder="" type="text" />
|
|
98292
98734
|
</td>
|
|
98293
98735
|
<td>
|
|
98294
|
-
<input class="inp-rt-2700" placeholder="" type="text" />
|
|
98736
|
+
<input class="inp-rt-2700 inp-extra" placeholder="" type="text" />
|
|
98295
98737
|
</td>
|
|
98296
98738
|
<td>
|
|
98297
|
-
<input class="inp-rt-2800" placeholder="" type="text" />
|
|
98739
|
+
<input class="inp-rt-2800 inp-extra" placeholder="" type="text" />
|
|
98298
98740
|
</td>
|
|
98299
98741
|
</tr>
|
|
98300
98742
|
<tr>
|
|
@@ -98354,46 +98796,131 @@ class Timeline {
|
|
|
98354
98796
|
</td>
|
|
98355
98797
|
|
|
98356
98798
|
<td>
|
|
98357
|
-
<input class="inp-op-1700" placeholder="" type="text" />
|
|
98799
|
+
<input class="inp-op-1700 inp-extra" placeholder="" type="text" />
|
|
98358
98800
|
</td>
|
|
98359
98801
|
<td>
|
|
98360
|
-
<input class="inp-op-1800" placeholder="" type="text" />
|
|
98802
|
+
<input class="inp-op-1800 inp-extra" placeholder="" type="text" />
|
|
98361
98803
|
</td>
|
|
98362
98804
|
<td>
|
|
98363
|
-
<input class="inp-op-1900" placeholder="" type="text" />
|
|
98805
|
+
<input class="inp-op-1900 inp-extra" placeholder="" type="text" />
|
|
98364
98806
|
</td>
|
|
98365
98807
|
<td>
|
|
98366
|
-
<input class="inp-op-2000" placeholder="" type="text" />
|
|
98808
|
+
<input class="inp-op-2000 inp-extra" placeholder="" type="text" />
|
|
98367
98809
|
</td>
|
|
98368
98810
|
<td>
|
|
98369
|
-
<input class="inp-op-2100" placeholder="" type="text" />
|
|
98811
|
+
<input class="inp-op-2100 inp-extra" placeholder="" type="text" />
|
|
98370
98812
|
</td>
|
|
98371
98813
|
<td>
|
|
98372
|
-
<input class="inp-op-2200" placeholder="" type="text" />
|
|
98814
|
+
<input class="inp-op-2200 inp-extra" placeholder="" type="text" />
|
|
98373
98815
|
</td>
|
|
98374
98816
|
<td>
|
|
98375
|
-
<input class="inp-op-2300" placeholder="" type="text" />
|
|
98817
|
+
<input class="inp-op-2300 inp-extra" placeholder="" type="text" />
|
|
98376
98818
|
</td>
|
|
98377
98819
|
<td>
|
|
98378
|
-
<input class="inp-op-2400" placeholder="" type="text" />
|
|
98820
|
+
<input class="inp-op-2400 inp-extra" placeholder="" type="text" />
|
|
98379
98821
|
</td>
|
|
98380
98822
|
<td>
|
|
98381
|
-
<input class="inp-op-2500" placeholder="" type="text" />
|
|
98823
|
+
<input class="inp-op-2500 inp-extra" placeholder="" type="text" />
|
|
98382
98824
|
</td>
|
|
98383
98825
|
<td>
|
|
98384
|
-
<input class="inp-op-2600" placeholder="" type="text" />
|
|
98826
|
+
<input class="inp-op-2600 inp-extra" placeholder="" type="text" />
|
|
98385
98827
|
</td>
|
|
98386
98828
|
<td>
|
|
98387
|
-
<input class="inp-op-2700" placeholder="" type="text" />
|
|
98829
|
+
<input class="inp-op-2700 inp-extra" placeholder="" type="text" />
|
|
98388
98830
|
</td>
|
|
98389
98831
|
<td>
|
|
98390
|
-
<input class="inp-op-2800" placeholder="" type="text" />
|
|
98832
|
+
<input class="inp-op-2800 inp-extra" placeholder="" type="text" />
|
|
98391
98833
|
</td>
|
|
98392
98834
|
</tr>
|
|
98393
98835
|
</table>
|
|
98394
|
-
<div class="flex-wrap" style="padding:
|
|
98836
|
+
<div class="flex-wrap" style="padding: 3px 5px 15px 18px;box-sizing: border-box;width: 100%;justify-content: space-between;">
|
|
98395
98837
|
|
|
98396
|
-
<div class="flex-wrap">
|
|
98838
|
+
<div class="flex-wrap" style="width:470px">
|
|
98839
|
+
|
|
98840
|
+
<div class="flex-wrap" style="flex-direction:column;align-items: flex-start;">
|
|
98841
|
+
<div class="flex-wrap" style="height:40px">
|
|
98842
|
+
<div class="flex-wrap">
|
|
98843
|
+
<label for="chkPinSection2" style="margin:0;display:flex;">
|
|
98844
|
+
<input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98845
|
+
<span>${out('Pin Section')}</span>.
|
|
98846
|
+
</label>
|
|
98847
|
+
</div>
|
|
98848
|
+
<div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
|
|
98849
|
+
<div class="flex-wrap">
|
|
98850
|
+
<button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:30px;">${out('MD')}</button>
|
|
98851
|
+
<button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:30px;">${out('LG')}</button>
|
|
98852
|
+
<button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:30px;">${out('XL')}</button>
|
|
98853
|
+
</div>
|
|
98854
|
+
<label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
|
|
98855
|
+
<input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98856
|
+
<span>${out('Overlap')}</span>
|
|
98857
|
+
</label>
|
|
98858
|
+
<label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
|
|
98859
|
+
<input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98860
|
+
<span>${out('Widescreen')}</span>
|
|
98861
|
+
</label>
|
|
98862
|
+
</div>
|
|
98863
|
+
</div>
|
|
98864
|
+
|
|
98865
|
+
<div>
|
|
98866
|
+
<label for="chkTimelineDisableOnMobile" style="margin:0;display:flex;">
|
|
98867
|
+
<input id="chkTimelineDisableOnMobile" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98868
|
+
<span>${out('Disable All Section Animations on Mobile')}</span>.
|
|
98869
|
+
</label>
|
|
98870
|
+
</div>
|
|
98871
|
+
</div>
|
|
98872
|
+
</div>
|
|
98873
|
+
|
|
98874
|
+
<div class="flex-wrap" style="">
|
|
98875
|
+
|
|
98876
|
+
<div class="flex-wrap" style="flex-direction:column;margin-right:15px">
|
|
98877
|
+
<div style="font-size:10px;margin-top:-10px;margin-bottom:2px"><span>${out('Origin')}</span>:</div>
|
|
98878
|
+
<div>
|
|
98879
|
+
<div class="flex-wrap">
|
|
98880
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left top" title="${out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
|
|
98881
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center top" title="${out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
|
|
98882
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right top" title="${out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
|
|
98883
|
+
</div>
|
|
98884
|
+
<div class="flex-wrap">
|
|
98885
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left center" title="${out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
|
|
98886
|
+
<button class="cmd-anim-origin on" style="width:25px;height:19px;" data-value="center" title="${out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
|
|
98887
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right center" title="${out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
|
|
98888
|
+
</div>
|
|
98889
|
+
<div class="flex-wrap">
|
|
98890
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left bottom" title="${out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
|
|
98891
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center bottom" title="${out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
|
|
98892
|
+
<button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right bottom" title="${out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
|
|
98893
|
+
</div>
|
|
98894
|
+
</div>
|
|
98895
|
+
</div>
|
|
98896
|
+
|
|
98897
|
+
<div class="flex-wrap" style="flex-direction:column;align-items: flex-start;">
|
|
98898
|
+
<div class="flex-wrap">
|
|
98899
|
+
<div class="flex-wrap">
|
|
98900
|
+
<button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="height:34px;padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
|
|
98901
|
+
<button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="height:34px;padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
|
|
98902
|
+
</div>
|
|
98903
|
+
<!--
|
|
98904
|
+
<button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:34px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
|
|
98905
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98906
|
+
</button>
|
|
98907
|
+
-->
|
|
98908
|
+
</div>
|
|
98909
|
+
|
|
98910
|
+
<div style="display:none;margin-top:7px">
|
|
98911
|
+
|
|
98912
|
+
|
|
98913
|
+
|
|
98914
|
+
</div>
|
|
98915
|
+
|
|
98916
|
+
</div>
|
|
98917
|
+
</div>
|
|
98918
|
+
|
|
98919
|
+
<div class="flex-wrap" style="flex-direction:column;align-items:flex-start">
|
|
98920
|
+
<!--
|
|
98921
|
+
<div style="font-size:10px;margin-top:-20px;margin-bottom:5px"><span>${out('Target')}</span>:</div>
|
|
98922
|
+
-->
|
|
98923
|
+
<div class="flex-wrap">
|
|
98397
98924
|
<div class="flex-wrap" style="margin-right:15px">
|
|
98398
98925
|
<select class="input-target">
|
|
98399
98926
|
<option value="element">${out('Element')}</option>
|
|
@@ -98406,7 +98933,7 @@ class Timeline {
|
|
|
98406
98933
|
<option value="section">${out('Section')}</option>
|
|
98407
98934
|
</select>
|
|
98408
98935
|
</div>
|
|
98409
|
-
<div class="flex-wrap"
|
|
98936
|
+
<div class="flex-wrap">
|
|
98410
98937
|
<button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
|
|
98411
98938
|
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
98412
98939
|
</button>
|
|
@@ -98420,42 +98947,7 @@ class Timeline {
|
|
|
98420
98947
|
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
98421
98948
|
</button>
|
|
98422
98949
|
</div>
|
|
98423
|
-
|
|
98424
|
-
<div class="flex-wrap">
|
|
98425
|
-
<label for="chkPinSection2" style="margin:0;display:flex;">
|
|
98426
|
-
<input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98427
|
-
<span>${out('Pin Section')}</span>.
|
|
98428
|
-
</label>
|
|
98429
|
-
</div>
|
|
98430
|
-
<div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
|
|
98431
|
-
<div class="flex-wrap">
|
|
98432
|
-
<button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:34px;">${out('MD')}</button>
|
|
98433
|
-
<button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:34px;">${out('LG')}</button>
|
|
98434
|
-
<button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:34px;">${out('XL')}</button>
|
|
98435
|
-
</div>
|
|
98436
|
-
<label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
|
|
98437
|
-
<input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98438
|
-
<span>${out('Overlap')}</span>.
|
|
98439
|
-
</label>
|
|
98440
|
-
<label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
|
|
98441
|
-
<input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98442
|
-
<span>${out('Widescreen')}</span>.
|
|
98443
|
-
</label>
|
|
98444
|
-
</div>
|
|
98445
|
-
|
|
98446
|
-
</div>
|
|
98447
|
-
|
|
98448
|
-
<div class="flex-wrap" style="">
|
|
98449
|
-
|
|
98450
|
-
<div class="flex-wrap" style="margin-right:20px">
|
|
98451
|
-
<button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
|
|
98452
|
-
<button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
|
|
98453
98950
|
</div>
|
|
98454
|
-
|
|
98455
|
-
<button title="${out('Clear All')}" class="cmd-clear-timeline" style="height:34px;flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
|
|
98456
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98457
|
-
<span style="margin-left:7px">${out('Clear All')}</span>
|
|
98458
|
-
</button>
|
|
98459
98951
|
</div>
|
|
98460
98952
|
|
|
98461
98953
|
</div>
|
|
@@ -98650,6 +99142,8 @@ class Timeline {
|
|
|
98650
99142
|
btn.classList.add('on');
|
|
98651
99143
|
} else {
|
|
98652
99144
|
section.classList.remove('section-pin');
|
|
99145
|
+
section.classList.remove('pin-space-lg');
|
|
99146
|
+
section.classList.remove('pin-space-xl');
|
|
98653
99147
|
divPinSpacing.style.display = 'none';
|
|
98654
99148
|
} //Trigger Change event
|
|
98655
99149
|
|
|
@@ -98712,6 +99206,19 @@ class Timeline {
|
|
|
98712
99206
|
this.builder.onChange();
|
|
98713
99207
|
});
|
|
98714
99208
|
});
|
|
99209
|
+
const btnAnimOrigins = modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
99210
|
+
btnAnimOrigins.forEach(btn => {
|
|
99211
|
+
btn.addEventListener('click', () => {
|
|
99212
|
+
let elms = modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
99213
|
+
elms.forEach(elm => {
|
|
99214
|
+
elm.classList.remove('on');
|
|
99215
|
+
});
|
|
99216
|
+
btn.classList.add('on');
|
|
99217
|
+
this.applyTimeline(); //Trigger Change event
|
|
99218
|
+
|
|
99219
|
+
this.builder.onChange();
|
|
99220
|
+
});
|
|
99221
|
+
});
|
|
98715
99222
|
const btnDisableSmoothAnim = modalTimeline.querySelector('.cmd-disable-smoothanim');
|
|
98716
99223
|
btnDisableSmoothAnim.addEventListener('click', () => {
|
|
98717
99224
|
if (btnDisableSmoothAnim.classList.contains('on')) {
|
|
@@ -98743,14 +99250,30 @@ class Timeline {
|
|
|
98743
99250
|
activeElement.style.transform = '';
|
|
98744
99251
|
activeElement.style.transition = '';
|
|
98745
99252
|
activeElement.style.opacity = '';
|
|
98746
|
-
|
|
99253
|
+
activeElement.style.transformOrigin = '';
|
|
99254
|
+
this.builder.animateScroll.refreshPage(); // Stable alternative to skrollrr.refresh()
|
|
98747
99255
|
|
|
98748
|
-
if (this.builder.win.skrollrr) {
|
|
98749
|
-
|
|
99256
|
+
this.read(); // if (this.builder.win.skrollrr) {
|
|
99257
|
+
// this.builder.win.skrollrr.refresh();
|
|
99258
|
+
// }
|
|
99259
|
+
//Trigger Change event
|
|
99260
|
+
|
|
99261
|
+
this.builder.settings.onChange();
|
|
99262
|
+
});
|
|
99263
|
+
const chkTimelineDisableOnMobile = modalTimeline.querySelector('#chkTimelineDisableOnMobile');
|
|
99264
|
+
chkTimelineDisableOnMobile.addEventListener('click', () => {
|
|
99265
|
+
const section = this.builder.activeSection;
|
|
99266
|
+
if (!section) return;
|
|
99267
|
+
this.builder.editor.saveForUndo();
|
|
99268
|
+
|
|
99269
|
+
if (chkTimelineDisableOnMobile.checked) {
|
|
99270
|
+
section.classList.add('m-skrollrr-off');
|
|
99271
|
+
} else {
|
|
99272
|
+
section.classList.remove('m-skrollrr-off');
|
|
98750
99273
|
} //Trigger Change event
|
|
98751
99274
|
|
|
98752
99275
|
|
|
98753
|
-
this.builder.
|
|
99276
|
+
this.builder.onChange();
|
|
98754
99277
|
}); //Extend onPageContentClick
|
|
98755
99278
|
|
|
98756
99279
|
let old = this.builder.settings.onPageContentClick;
|
|
@@ -98954,19 +99477,11 @@ class Timeline {
|
|
|
98954
99477
|
this.inpOpacity_2500.value = '';
|
|
98955
99478
|
this.inpOpacity_2600.value = '';
|
|
98956
99479
|
this.inpOpacity_2700.value = '';
|
|
98957
|
-
this.inpOpacity_2800.value = '';
|
|
98958
|
-
|
|
98959
|
-
|
|
98960
|
-
|
|
98961
|
-
divPinSpacing.style.display = 'none';
|
|
98962
|
-
const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
|
|
98963
|
-
btnDisableSmoothAnim.classList.remove('on');
|
|
98964
|
-
const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
|
|
98965
|
-
btnHiddenOnStart.classList.remove('on');
|
|
98966
|
-
}
|
|
99480
|
+
this.inpOpacity_2800.value = ''; // const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
|
|
99481
|
+
// chkPinSection.checked = false;
|
|
99482
|
+
// const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
|
|
99483
|
+
// divPinSpacing.style.display = 'none';
|
|
98967
99484
|
|
|
98968
|
-
read() {
|
|
98969
|
-
this.clearSettings();
|
|
98970
99485
|
const activeSection = this.builder.activeSection;
|
|
98971
99486
|
|
|
98972
99487
|
if (activeSection) {
|
|
@@ -99017,12 +99532,50 @@ class Timeline {
|
|
|
99017
99532
|
let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
|
|
99018
99533
|
btn.classList.add('on');
|
|
99019
99534
|
}
|
|
99535
|
+
|
|
99536
|
+
const chkTimelineDisableOnMobile = this.modalTimeline.querySelector('#chkTimelineDisableOnMobile');
|
|
99537
|
+
|
|
99538
|
+
if (activeSection.classList.contains('m-skrollrr-off')) {
|
|
99539
|
+
chkTimelineDisableOnMobile.checked = true;
|
|
99540
|
+
} else {
|
|
99541
|
+
chkTimelineDisableOnMobile.checked = false;
|
|
99542
|
+
}
|
|
99020
99543
|
}
|
|
99021
99544
|
|
|
99545
|
+
const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
99546
|
+
btnAnimOrigins.forEach(btn => {
|
|
99547
|
+
if (btn.getAttribute('data-value') === 'center') {
|
|
99548
|
+
btn.classList.add('on');
|
|
99549
|
+
} else {
|
|
99550
|
+
btn.classList.remove('on');
|
|
99551
|
+
}
|
|
99552
|
+
});
|
|
99553
|
+
const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
|
|
99554
|
+
btnDisableSmoothAnim.classList.remove('on');
|
|
99555
|
+
const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
|
|
99556
|
+
btnHiddenOnStart.classList.remove('on');
|
|
99557
|
+
}
|
|
99558
|
+
|
|
99559
|
+
read() {
|
|
99560
|
+
this.clearSettings();
|
|
99022
99561
|
let activeElement;
|
|
99023
99562
|
let target = this.getTarget();
|
|
99024
99563
|
activeElement = target.element;
|
|
99025
99564
|
if (!activeElement) return;
|
|
99565
|
+
|
|
99566
|
+
if (activeElement.style.transformOrigin) {
|
|
99567
|
+
let origin = activeElement.style.transformOrigin;
|
|
99568
|
+
if (origin === 'center center') origin = 'center';
|
|
99569
|
+
const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
99570
|
+
btnAnimOrigins.forEach(btn => {
|
|
99571
|
+
if (origin === btn.getAttribute('data-value')) {
|
|
99572
|
+
btn.classList.add('on');
|
|
99573
|
+
} else {
|
|
99574
|
+
btn.classList.remove('on');
|
|
99575
|
+
}
|
|
99576
|
+
});
|
|
99577
|
+
}
|
|
99578
|
+
|
|
99026
99579
|
const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
|
|
99027
99580
|
|
|
99028
99581
|
if (activeElement.hasAttribute('data-smooth-scrolling')) {
|
|
@@ -99609,6 +100162,13 @@ class Timeline {
|
|
|
99609
100162
|
/* /mark device */
|
|
99610
100163
|
|
|
99611
100164
|
|
|
100165
|
+
const btnAnimOrigin = this.modalTimeline.querySelector('.cmd-anim-origin.on');
|
|
100166
|
+
|
|
100167
|
+
if (btnAnimOrigin) {
|
|
100168
|
+
let origin = btnAnimOrigin.getAttribute('data-value');
|
|
100169
|
+
activeElement.style.transformOrigin = origin;
|
|
100170
|
+
}
|
|
100171
|
+
|
|
99612
100172
|
const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
|
|
99613
100173
|
|
|
99614
100174
|
if (btnDisableSmoothAnim.classList.contains('on')) {
|
|
@@ -99637,6 +100197,7 @@ class Timeline {
|
|
|
99637
100197
|
let device = this.getDevice();
|
|
99638
100198
|
|
|
99639
100199
|
if (device === 'xs') {
|
|
100200
|
+
activeElement.removeAttribute('data-xs');
|
|
99640
100201
|
activeElement.removeAttribute('data-xs-t');
|
|
99641
100202
|
activeElement.removeAttribute('data-xs-t-100');
|
|
99642
100203
|
activeElement.removeAttribute('data-xs-t-200');
|
|
@@ -99667,6 +100228,7 @@ class Timeline {
|
|
|
99667
100228
|
activeElement.removeAttribute('data-xs-t-2700');
|
|
99668
100229
|
activeElement.removeAttribute('data-xs-t-2800');
|
|
99669
100230
|
} else if (device === 'sm') {
|
|
100231
|
+
activeElement.removeAttribute('data-sm');
|
|
99670
100232
|
activeElement.removeAttribute('data-sm-t');
|
|
99671
100233
|
activeElement.removeAttribute('data-sm-t-100');
|
|
99672
100234
|
activeElement.removeAttribute('data-sm-t-200');
|
|
@@ -99696,6 +100258,37 @@ class Timeline {
|
|
|
99696
100258
|
activeElement.removeAttribute('data-sm-t-2600');
|
|
99697
100259
|
activeElement.removeAttribute('data-sm-t-2700');
|
|
99698
100260
|
activeElement.removeAttribute('data-sm-t-2800');
|
|
100261
|
+
} else if (device === 'md') {
|
|
100262
|
+
activeElement.removeAttribute('data-md');
|
|
100263
|
+
activeElement.removeAttribute('data-md-t');
|
|
100264
|
+
activeElement.removeAttribute('data-md-t-100');
|
|
100265
|
+
activeElement.removeAttribute('data-md-t-200');
|
|
100266
|
+
activeElement.removeAttribute('data-md-t-300');
|
|
100267
|
+
activeElement.removeAttribute('data-md-t-400');
|
|
100268
|
+
activeElement.removeAttribute('data-md-t-500');
|
|
100269
|
+
activeElement.removeAttribute('data-md-t-600');
|
|
100270
|
+
activeElement.removeAttribute('data-md-t-700');
|
|
100271
|
+
activeElement.removeAttribute('data-md-t-800');
|
|
100272
|
+
activeElement.removeAttribute('data-md-t-900');
|
|
100273
|
+
activeElement.removeAttribute('data-md-t-1000');
|
|
100274
|
+
activeElement.removeAttribute('data-md-t-1100');
|
|
100275
|
+
activeElement.removeAttribute('data-md-t-1200');
|
|
100276
|
+
activeElement.removeAttribute('data-md-t-1300');
|
|
100277
|
+
activeElement.removeAttribute('data-md-t-1400');
|
|
100278
|
+
activeElement.removeAttribute('data-md-t-1500');
|
|
100279
|
+
activeElement.removeAttribute('data-md-t-1600');
|
|
100280
|
+
activeElement.removeAttribute('data-md-t-1700');
|
|
100281
|
+
activeElement.removeAttribute('data-md-t-1800');
|
|
100282
|
+
activeElement.removeAttribute('data-md-t-1900');
|
|
100283
|
+
activeElement.removeAttribute('data-md-t-2000');
|
|
100284
|
+
activeElement.removeAttribute('data-md-t-2100');
|
|
100285
|
+
activeElement.removeAttribute('data-md-t-2200');
|
|
100286
|
+
activeElement.removeAttribute('data-md-t-2300');
|
|
100287
|
+
activeElement.removeAttribute('data-md-t-2400');
|
|
100288
|
+
activeElement.removeAttribute('data-md-t-2500');
|
|
100289
|
+
activeElement.removeAttribute('data-md-t-2600');
|
|
100290
|
+
activeElement.removeAttribute('data-md-t-2700');
|
|
100291
|
+
activeElement.removeAttribute('data-md-t-2800');
|
|
99699
100292
|
} else {
|
|
99700
100293
|
activeElement.removeAttribute('data-t');
|
|
99701
100294
|
activeElement.removeAttribute('data-t-100');
|
|
@@ -99726,7 +100319,12 @@ class Timeline {
|
|
|
99726
100319
|
activeElement.removeAttribute('data-t-2600');
|
|
99727
100320
|
activeElement.removeAttribute('data-t-2700');
|
|
99728
100321
|
activeElement.removeAttribute('data-t-2800');
|
|
99729
|
-
}
|
|
100322
|
+
} // Cleanup from simple timeline panel
|
|
100323
|
+
|
|
100324
|
+
|
|
100325
|
+
this.builder.animateScroll.cleanup(activeElement);
|
|
100326
|
+
this.builder.animateScroll.cleanup_leave(activeElement);
|
|
100327
|
+
this.builder.animateScroll.cleanup_timeline(activeElement);
|
|
99730
100328
|
}
|
|
99731
100329
|
|
|
99732
100330
|
getDevice() {
|
|
@@ -102664,7 +103262,7 @@ class ContentBox {
|
|
|
102664
103262
|
container: '.is-container',
|
|
102665
103263
|
page: '.is-wrapper',
|
|
102666
103264
|
iframe: this.settings.iframe,
|
|
102667
|
-
imageAdjust:
|
|
103265
|
+
imageAdjust: 1,
|
|
102668
103266
|
// ContentBuilder
|
|
102669
103267
|
scriptPath: this.settings.scriptPath,
|
|
102670
103268
|
pluginPath: this.settings.pluginPath,
|
|
@@ -103379,7 +103977,7 @@ class ContentBox {
|
|
|
103379
103977
|
const modalEditBox = this.builderStuff.querySelector('.editbox');
|
|
103380
103978
|
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
103381
103979
|
|
|
103382
|
-
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
103980
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
103383
103981
|
// clear
|
|
103384
103982
|
const prevBox = this.doc.querySelector('.box-select');
|
|
103385
103983
|
if (prevBox) prevBox.classList.remove('box-select');
|
|
@@ -103429,7 +104027,7 @@ class ContentBox {
|
|
|
103429
104027
|
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
103430
104028
|
modalEditSection.style.display = '';
|
|
103431
104029
|
|
|
103432
|
-
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
104030
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
103433
104031
|
this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
|
|
103434
104032
|
|
|
103435
104033
|
const prevBox = this.doc.querySelectorAll('.box-select');
|
|
@@ -103441,6 +104039,8 @@ class ContentBox {
|
|
|
103441
104039
|
elm.classList.remove('section-select');
|
|
103442
104040
|
});
|
|
103443
104041
|
}
|
|
104042
|
+
|
|
104043
|
+
if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
|
|
103444
104044
|
}
|
|
103445
104045
|
} //---
|
|
103446
104046
|
|
|
@@ -104645,13 +105245,26 @@ class ContentBox {
|
|
|
104645
105245
|
wrapper.style.opacity = '0';
|
|
104646
105246
|
}
|
|
104647
105247
|
|
|
104648
|
-
|
|
105248
|
+
let waitSlider = false;
|
|
105249
|
+
|
|
105250
|
+
if (this.settings.slider === 'glide' || this.settings.slider === 'all') {
|
|
105251
|
+
if (typeof this.win.Glide !== 'undefined') {
|
|
105252
|
+
if (new this.win.Glide().mount) ; else {
|
|
105253
|
+
waitSlider = true; // console.log('not ready');
|
|
105254
|
+
}
|
|
105255
|
+
} else {
|
|
105256
|
+
waitSlider = true; // console.log('not loaded');
|
|
105257
|
+
}
|
|
105258
|
+
}
|
|
105259
|
+
|
|
105260
|
+
if (!this.editor || waitSlider) {
|
|
104649
105261
|
// Wait for the ContentBuilder init complete
|
|
104650
105262
|
setTimeout(() => {
|
|
104651
105263
|
this.loadHtml(html);
|
|
104652
105264
|
}, 100);
|
|
104653
105265
|
return;
|
|
104654
|
-
} //
|
|
105266
|
+
} // console.log((new this.win.Glide).mount);
|
|
105267
|
+
// Render html content
|
|
104655
105268
|
|
|
104656
105269
|
|
|
104657
105270
|
let range = document.createRange();
|