@innovastudio/contentbox 1.4.59 → 1.4.61
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.
|
@@ -1550,6 +1550,8 @@ class SideBar {
|
|
|
1550
1550
|
right: 0;
|
|
1551
1551
|
width: 100%;
|
|
1552
1552
|
height: auto;
|
|
1553
|
+
height: calc(100% - 88px);
|
|
1554
|
+
max-height: 700px;
|
|
1553
1555
|
z-index: 1;
|
|
1554
1556
|
padding: 10px 50px 40px 40px;
|
|
1555
1557
|
box-sizing: border-box;
|
|
@@ -1580,6 +1582,18 @@ class SideBar {
|
|
|
1580
1582
|
justify-content: center;
|
|
1581
1583
|
align-items: center;
|
|
1582
1584
|
border-radius: 2px;;
|
|
1585
|
+
z-index: 1;
|
|
1586
|
+
}
|
|
1587
|
+
.mega-menu-content {
|
|
1588
|
+
position: absolute;
|
|
1589
|
+
top: 0;
|
|
1590
|
+
left: 0;
|
|
1591
|
+
width: 100%;
|
|
1592
|
+
height: 100%;
|
|
1593
|
+
overflow-y: auto;
|
|
1594
|
+
padding-left: 25px;
|
|
1595
|
+
padding-bottom: 35px;
|
|
1596
|
+
box-sizing: border-box;
|
|
1583
1597
|
}
|
|
1584
1598
|
|
|
1585
1599
|
.is-waiting {
|
|
@@ -4009,7 +4023,9 @@ class EditSection {
|
|
|
4009
4023
|
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
4024
|
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
4025
|
'<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>' +
|
|
4026
|
+
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>' +
|
|
4027
|
+
// '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' +
|
|
4028
|
+
'<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
4029
|
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
4030
|
dom$k.appendHtml(builderStuff, html);
|
|
4015
4031
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
@@ -4733,6 +4749,21 @@ class EditSection {
|
|
|
4733
4749
|
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
4734
4750
|
} else {
|
|
4735
4751
|
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4752
|
+
}
|
|
4753
|
+
|
|
4754
|
+
if (s === '') {
|
|
4755
|
+
activeSection.style.transform = '';
|
|
4756
|
+
activeSection.style.transition = '';
|
|
4757
|
+
activeSection.style.opacity = '';
|
|
4758
|
+
activeSection.removeAttribute('data-anim-start');
|
|
4759
|
+
|
|
4760
|
+
if (!activeSection.hasAttribute('data-anim-end')) {
|
|
4761
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4762
|
+
}
|
|
4763
|
+
}
|
|
4764
|
+
|
|
4765
|
+
if (this.builder.win.skrollrr) {
|
|
4766
|
+
this.builder.win.skrollrr.refresh();
|
|
4736
4767
|
} //Trigger Render event
|
|
4737
4768
|
|
|
4738
4769
|
|
|
@@ -4774,6 +4805,21 @@ class EditSection {
|
|
|
4774
4805
|
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
4775
4806
|
} else {
|
|
4776
4807
|
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4808
|
+
}
|
|
4809
|
+
|
|
4810
|
+
if (s === '') {
|
|
4811
|
+
activeSection.style.transform = '';
|
|
4812
|
+
activeSection.style.transition = '';
|
|
4813
|
+
activeSection.style.opacity = '';
|
|
4814
|
+
activeSection.removeAttribute('data-anim-end');
|
|
4815
|
+
|
|
4816
|
+
if (!activeSection.hasAttribute('data-anim-start')) {
|
|
4817
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
4818
|
+
}
|
|
4819
|
+
}
|
|
4820
|
+
|
|
4821
|
+
if (this.builder.win.skrollrr) {
|
|
4822
|
+
this.builder.win.skrollrr.refresh();
|
|
4777
4823
|
} //Trigger Render event
|
|
4778
4824
|
|
|
4779
4825
|
|
|
@@ -11815,7 +11861,10 @@ class EditBox {
|
|
|
11815
11861
|
overlayBg.style.left = '';
|
|
11816
11862
|
overlayBg.style.right = '';
|
|
11817
11863
|
overlayBg.style.width = '';
|
|
11818
|
-
overlayBg.style.height = '';
|
|
11864
|
+
overlayBg.style.height = '';
|
|
11865
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
11866
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
11867
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
11819
11868
|
}, btnBoxBgImage);
|
|
11820
11869
|
}); // Box Background Image Adjust
|
|
11821
11870
|
|
|
@@ -11823,7 +11872,7 @@ class EditBox {
|
|
|
11823
11872
|
if (btnBoxBgImageAdjust) btnBoxBgImageAdjust.addEventListener('click', () => {
|
|
11824
11873
|
const activeBox = this.builder.activeBox;
|
|
11825
11874
|
const overlayBg = activeBox.querySelector('.is-overlay-bg');
|
|
11826
|
-
this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust);
|
|
11875
|
+
this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust, true);
|
|
11827
11876
|
});
|
|
11828
11877
|
const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
11829
11878
|
chkBoxBgImageGrayscale.addEventListener('click', () => {
|
|
@@ -12143,7 +12192,10 @@ class EditBox {
|
|
|
12143
12192
|
overlayBg.style.left = '';
|
|
12144
12193
|
overlayBg.style.right = '';
|
|
12145
12194
|
overlayBg.style.width = '';
|
|
12146
|
-
overlayBg.style.height = '';
|
|
12195
|
+
overlayBg.style.height = '';
|
|
12196
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
12197
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
12198
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
12147
12199
|
});
|
|
12148
12200
|
}
|
|
12149
12201
|
|
|
@@ -13632,7 +13684,10 @@ class EditBox {
|
|
|
13632
13684
|
overlayBg.style.left = '';
|
|
13633
13685
|
overlayBg.style.right = '';
|
|
13634
13686
|
overlayBg.style.width = '';
|
|
13635
|
-
overlayBg.style.height = '';
|
|
13687
|
+
overlayBg.style.height = '';
|
|
13688
|
+
overlayBg.removeAttribute('data-bg-xs');
|
|
13689
|
+
overlayBg.removeAttribute('data-bg-sm');
|
|
13690
|
+
overlayBg.removeAttribute('data-bg-md'); // /Reset
|
|
13636
13691
|
//Show image tab
|
|
13637
13692
|
|
|
13638
13693
|
modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
|
|
@@ -63718,9 +63773,11 @@ class Image$1 {
|
|
|
63718
63773
|
img.setAttribute('data-filename', newname + '.' + extension);
|
|
63719
63774
|
}
|
|
63720
63775
|
|
|
63721
|
-
if (extension === 'jpg') {
|
|
63776
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'webm' || extension === 'webp') {
|
|
63722
63777
|
img.src = this.cropper.getCroppedCanvas({
|
|
63723
|
-
fillColor: '#fff'
|
|
63778
|
+
fillColor: '#fff',
|
|
63779
|
+
imageSmoothingEnabled: true,
|
|
63780
|
+
imageSmoothingQuality: 'high'
|
|
63724
63781
|
}).toDataURL('image/jpeg');
|
|
63725
63782
|
} else {
|
|
63726
63783
|
img.src = this.cropper.getCroppedCanvas({}).toDataURL();
|
|
@@ -64309,6 +64366,15 @@ class ButtonEditor {
|
|
|
64309
64366
|
<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>
|
|
64310
64367
|
</div>
|
|
64311
64368
|
</div>
|
|
64369
|
+
<div class="flex flex-col" style="margin-left: 60px;">
|
|
64370
|
+
<div>
|
|
64371
|
+
<label>${util.out('Width')}</label>:
|
|
64372
|
+
</div>
|
|
64373
|
+
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
64374
|
+
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
64375
|
+
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
64376
|
+
</div>
|
|
64377
|
+
</div>
|
|
64312
64378
|
</div>
|
|
64313
64379
|
|
|
64314
64380
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
@@ -64337,7 +64403,7 @@ class ButtonEditor {
|
|
|
64337
64403
|
<div class="flex flex-row" style="margin:15px 0 0">
|
|
64338
64404
|
<div class="flex flex-col" style="margin-right: 20px;">
|
|
64339
64405
|
<div>
|
|
64340
|
-
<label>${util.out('Padding
|
|
64406
|
+
<label>${util.out('Padding Left/Right')}</label>:
|
|
64341
64407
|
</div>
|
|
64342
64408
|
<div class="flex flex-row" style="margin-top:5px">
|
|
64343
64409
|
<button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
|
|
@@ -64351,7 +64417,7 @@ class ButtonEditor {
|
|
|
64351
64417
|
</div>
|
|
64352
64418
|
</div>
|
|
64353
64419
|
|
|
64354
|
-
<div class="flex flex-col">
|
|
64420
|
+
<div class="flex flex-col" style="display:none">
|
|
64355
64421
|
<div>
|
|
64356
64422
|
<label>${util.out('Padding Y')}</label>:
|
|
64357
64423
|
</div>
|
|
@@ -64366,6 +64432,36 @@ class ButtonEditor {
|
|
|
64366
64432
|
</div>
|
|
64367
64433
|
</div>
|
|
64368
64434
|
|
|
64435
|
+
<div class="flex flex-row" style="margin:15px 0 0">
|
|
64436
|
+
<div class="flex flex-col" style="margin-right: 20px;">
|
|
64437
|
+
<div>
|
|
64438
|
+
<label>${util.out('Padding Top')}</label>:
|
|
64439
|
+
</div>
|
|
64440
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
64441
|
+
<button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
|
|
64442
|
+
<button title="1" data-command="1" class="paddingtop-command" style="margin-right:4px">1</button>
|
|
64443
|
+
<button title="2" data-command="2" class="paddingtop-command" style="margin-right:4px">2</button>
|
|
64444
|
+
<button title="3" data-command="3" class="paddingtop-command" style="margin-right:4px">3</button>
|
|
64445
|
+
<button title="4" data-command="4" class="paddingtop-command" style="margin-right:4px">4</button>
|
|
64446
|
+
<button title="5" data-command="5" class="paddingtop-command" style="margin-right:4px">5</button>
|
|
64447
|
+
</div>
|
|
64448
|
+
</div>
|
|
64449
|
+
|
|
64450
|
+
<div class="flex flex-col">
|
|
64451
|
+
<div>
|
|
64452
|
+
<label>${util.out('Padding Bottom')}</label>:
|
|
64453
|
+
</div>
|
|
64454
|
+
<div class="flex flex-row" style="margin-top:5px">
|
|
64455
|
+
<button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
|
|
64456
|
+
<button title="1" data-command="1" class="paddingbottom-command" style="margin-right:4px">1</button>
|
|
64457
|
+
<button title="2" data-command="2" class="paddingbottom-command" style="margin-right:4px">2</button>
|
|
64458
|
+
<button title="3" data-command="3" class="paddingbottom-command" style="margin-right:4px">3</button>
|
|
64459
|
+
<button title="4" data-command="4" class="paddingbottom-command" style="margin-right:4px">4</button>
|
|
64460
|
+
<button title="5" data-command="5" class="paddingbottom-command" style="margin-right:4px">5</button>
|
|
64461
|
+
</div>
|
|
64462
|
+
</div>
|
|
64463
|
+
</div>
|
|
64464
|
+
|
|
64369
64465
|
<div class="flex flex-col" style="margin:15px 0 0">
|
|
64370
64466
|
<div>
|
|
64371
64467
|
<label>${util.out('Border Radius')}</label>:
|
|
@@ -64444,16 +64540,6 @@ class ButtonEditor {
|
|
|
64444
64540
|
|
|
64445
64541
|
</div>
|
|
64446
64542
|
|
|
64447
|
-
<div class="flex flex-col" style="margin:15px 0 0">
|
|
64448
|
-
<div>
|
|
64449
|
-
<label>${util.out('Width')}</label>:
|
|
64450
|
-
</div>
|
|
64451
|
-
<div class="flex flex-row flex-wrap" style="margin-top:5px">
|
|
64452
|
-
<button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
|
|
64453
|
-
<button title="${util.out('Full')}" data-command="full" class="width-command" style="margin-right:4px">${util.out('Full')}</button>
|
|
64454
|
-
</div>
|
|
64455
|
-
</div>
|
|
64456
|
-
|
|
64457
64543
|
</div>
|
|
64458
64544
|
<div id="divButtonHover" class="is-tab-content" tabindex="-1" data-group="button">
|
|
64459
64545
|
|
|
@@ -64887,6 +64973,120 @@ class ButtonEditor {
|
|
|
64887
64973
|
dom.addClass(btn, 'on');
|
|
64888
64974
|
this.builder.opts.onChange();
|
|
64889
64975
|
});
|
|
64976
|
+
}); //padding top
|
|
64977
|
+
|
|
64978
|
+
btns = buttonModal.querySelectorAll('.paddingtop-command');
|
|
64979
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
64980
|
+
btn.addEventListener('click', () => {
|
|
64981
|
+
this.builder.uo.saveForUndo();
|
|
64982
|
+
const val = btn.getAttribute('data-command');
|
|
64983
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
64984
|
+
dom.removeClassesByPrefix(activeButton, 'pt-');
|
|
64985
|
+
|
|
64986
|
+
if (val === '0') {
|
|
64987
|
+
dom.addClass(activeButton, 'pt-0');
|
|
64988
|
+
}
|
|
64989
|
+
|
|
64990
|
+
if (val === '1') {
|
|
64991
|
+
dom.addClass(activeButton, 'pt-1');
|
|
64992
|
+
}
|
|
64993
|
+
|
|
64994
|
+
if (val === '2') {
|
|
64995
|
+
dom.addClass(activeButton, 'pt-2');
|
|
64996
|
+
}
|
|
64997
|
+
|
|
64998
|
+
if (val === '3') {
|
|
64999
|
+
dom.addClass(activeButton, 'pt-3');
|
|
65000
|
+
}
|
|
65001
|
+
|
|
65002
|
+
if (val === '4') {
|
|
65003
|
+
dom.addClass(activeButton, 'pt-4');
|
|
65004
|
+
}
|
|
65005
|
+
|
|
65006
|
+
if (val === '5') {
|
|
65007
|
+
dom.addClass(activeButton, 'pt-5');
|
|
65008
|
+
}
|
|
65009
|
+
|
|
65010
|
+
if (val === '6') {
|
|
65011
|
+
dom.addClass(activeButton, 'pt-6');
|
|
65012
|
+
} // Cleanup
|
|
65013
|
+
|
|
65014
|
+
|
|
65015
|
+
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'))) {
|
|
65016
|
+
activeButton.classList.remove('py-0');
|
|
65017
|
+
activeButton.classList.remove('py-1');
|
|
65018
|
+
activeButton.classList.remove('py-2');
|
|
65019
|
+
activeButton.classList.remove('py-3');
|
|
65020
|
+
activeButton.classList.remove('py-4');
|
|
65021
|
+
activeButton.classList.remove('p5-4');
|
|
65022
|
+
}
|
|
65023
|
+
|
|
65024
|
+
this.applyDefault(activeButton); // Button on/off
|
|
65025
|
+
|
|
65026
|
+
const items = buttonModal.querySelectorAll('.paddingtop-command');
|
|
65027
|
+
items.forEach(item => {
|
|
65028
|
+
dom.removeClass(item, 'on');
|
|
65029
|
+
});
|
|
65030
|
+
dom.addClass(btn, 'on');
|
|
65031
|
+
this.builder.opts.onChange();
|
|
65032
|
+
});
|
|
65033
|
+
}); //padding bottom
|
|
65034
|
+
|
|
65035
|
+
btns = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
65036
|
+
Array.prototype.forEach.call(btns, btn => {
|
|
65037
|
+
btn.addEventListener('click', () => {
|
|
65038
|
+
this.builder.uo.saveForUndo();
|
|
65039
|
+
const val = btn.getAttribute('data-command');
|
|
65040
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
65041
|
+
dom.removeClassesByPrefix(activeButton, 'pb-');
|
|
65042
|
+
|
|
65043
|
+
if (val === '0') {
|
|
65044
|
+
dom.addClass(activeButton, 'pb-0');
|
|
65045
|
+
}
|
|
65046
|
+
|
|
65047
|
+
if (val === '1') {
|
|
65048
|
+
dom.addClass(activeButton, 'pb-1');
|
|
65049
|
+
}
|
|
65050
|
+
|
|
65051
|
+
if (val === '2') {
|
|
65052
|
+
dom.addClass(activeButton, 'pb-2');
|
|
65053
|
+
}
|
|
65054
|
+
|
|
65055
|
+
if (val === '3') {
|
|
65056
|
+
dom.addClass(activeButton, 'pb-3');
|
|
65057
|
+
}
|
|
65058
|
+
|
|
65059
|
+
if (val === '4') {
|
|
65060
|
+
dom.addClass(activeButton, 'pb-4');
|
|
65061
|
+
}
|
|
65062
|
+
|
|
65063
|
+
if (val === '5') {
|
|
65064
|
+
dom.addClass(activeButton, 'pb-5');
|
|
65065
|
+
}
|
|
65066
|
+
|
|
65067
|
+
if (val === '6') {
|
|
65068
|
+
dom.addClass(activeButton, 'pb-6');
|
|
65069
|
+
} // Cleanup
|
|
65070
|
+
|
|
65071
|
+
|
|
65072
|
+
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'))) {
|
|
65073
|
+
activeButton.classList.remove('py-0');
|
|
65074
|
+
activeButton.classList.remove('py-1');
|
|
65075
|
+
activeButton.classList.remove('py-2');
|
|
65076
|
+
activeButton.classList.remove('py-3');
|
|
65077
|
+
activeButton.classList.remove('py-4');
|
|
65078
|
+
activeButton.classList.remove('p5-4');
|
|
65079
|
+
}
|
|
65080
|
+
|
|
65081
|
+
this.applyDefault(activeButton); // Button on/off
|
|
65082
|
+
|
|
65083
|
+
const items = buttonModal.querySelectorAll('.paddingbottom-command');
|
|
65084
|
+
items.forEach(item => {
|
|
65085
|
+
dom.removeClass(item, 'on');
|
|
65086
|
+
});
|
|
65087
|
+
dom.addClass(btn, 'on');
|
|
65088
|
+
this.builder.opts.onChange();
|
|
65089
|
+
});
|
|
64890
65090
|
}); //Font size
|
|
64891
65091
|
|
|
64892
65092
|
btns = buttonModal.querySelectorAll('.font-size-command');
|
|
@@ -65285,6 +65485,10 @@ class ButtonEditor {
|
|
|
65285
65485
|
dom.removeClass(btn, 'on');
|
|
65286
65486
|
btn = this.buttonModal.querySelector('.paddingy-command.on');
|
|
65287
65487
|
dom.removeClass(btn, 'on');
|
|
65488
|
+
btn = this.buttonModal.querySelector('.paddingtop-command.on');
|
|
65489
|
+
dom.removeClass(btn, 'on');
|
|
65490
|
+
btn = this.buttonModal.querySelector('.paddingbottom-command.on');
|
|
65491
|
+
dom.removeClass(btn, 'on');
|
|
65288
65492
|
btn = this.buttonModal.querySelector('.border-radius-command.on');
|
|
65289
65493
|
dom.removeClass(btn, 'on');
|
|
65290
65494
|
btn = this.buttonModal.querySelector('.letter-spacing-command.on');
|
|
@@ -65342,6 +65546,28 @@ class ButtonEditor {
|
|
|
65342
65546
|
let val = item.replace('py-', '');
|
|
65343
65547
|
let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
|
|
65344
65548
|
dom.addClass(btn, 'on');
|
|
65549
|
+
|
|
65550
|
+
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'))) {
|
|
65551
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
65552
|
+
dom.addClass(btn, 'on');
|
|
65553
|
+
}
|
|
65554
|
+
|
|
65555
|
+
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'))) {
|
|
65556
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
65557
|
+
dom.addClass(btn, 'on');
|
|
65558
|
+
}
|
|
65559
|
+
}
|
|
65560
|
+
|
|
65561
|
+
if (item.indexOf('pt-') === 0) {
|
|
65562
|
+
let val = item.replace('pt-', '');
|
|
65563
|
+
let btn = this.buttonModal.querySelector(`.paddingtop-command[data-command="${val}"]`);
|
|
65564
|
+
dom.addClass(btn, 'on');
|
|
65565
|
+
}
|
|
65566
|
+
|
|
65567
|
+
if (item.indexOf('pb-') === 0) {
|
|
65568
|
+
let val = item.replace('pb-', '');
|
|
65569
|
+
let btn = this.buttonModal.querySelector(`.paddingbottom-command[data-command="${val}"]`);
|
|
65570
|
+
dom.addClass(btn, 'on');
|
|
65345
65571
|
}
|
|
65346
65572
|
|
|
65347
65573
|
if (item.indexOf('rounded-') === 0) {
|
|
@@ -71110,6 +71336,10 @@ class ColumnTool {
|
|
|
71110
71336
|
<input type="range" min="0" max="100" value="0" class="image-vert-slider is-rangeslider">
|
|
71111
71337
|
</div>
|
|
71112
71338
|
|
|
71339
|
+
<div style="padding-bottom:3px;padding-top: 10px;display:flex;justify-content:right;align-items:center;">
|
|
71340
|
+
<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>
|
|
71341
|
+
</div>
|
|
71342
|
+
|
|
71113
71343
|
</div>
|
|
71114
71344
|
|
|
71115
71345
|
</div>
|
|
@@ -71574,12 +71804,56 @@ class ColumnTool {
|
|
|
71574
71804
|
//val: 100 - 500
|
|
71575
71805
|
let val = inpImageScaleSlider.value;
|
|
71576
71806
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71807
|
+
// cell.style.backgroundSize = val + '%';
|
|
71808
|
+
|
|
71809
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71810
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71811
|
+
if (!dataBg) dataBg = '';
|
|
71812
|
+
let div = document.createElement('div');
|
|
71813
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71814
|
+
|
|
71815
|
+
div.style.backgroundSize = 'cover';
|
|
71816
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71817
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71818
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71819
|
+
if (!dataBg) dataBg = '';
|
|
71820
|
+
let div = document.createElement('div');
|
|
71821
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71822
|
+
|
|
71823
|
+
div.style.backgroundSize = 'cover';
|
|
71824
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
71825
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
71826
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
71827
|
+
if (!dataBg) dataBg = '';
|
|
71828
|
+
let div = document.createElement('div');
|
|
71829
|
+
div.style.cssText = dataBg; // div.style.backgroundSize = val + '%';
|
|
71830
|
+
|
|
71831
|
+
div.style.backgroundSize = 'cover';
|
|
71832
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
71833
|
+
} else {
|
|
71834
|
+
cell.style.backgroundSize = val + '%';
|
|
71835
|
+
} // Clean unused
|
|
71577
71836
|
|
|
71578
|
-
|
|
71837
|
+
|
|
71838
|
+
cell.style.left = '';
|
|
71839
|
+
cell.style.top = '';
|
|
71840
|
+
cell.style.width = '';
|
|
71841
|
+
cell.style.height = '';
|
|
71842
|
+
cell.removeAttribute('data-x');
|
|
71843
|
+
cell.removeAttribute('data-y');
|
|
71844
|
+
cell.removeAttribute('data-scale');
|
|
71579
71845
|
};
|
|
71580
71846
|
|
|
71581
71847
|
inpImageScaleSlider.onchange = () => {
|
|
71582
|
-
|
|
71848
|
+
if (document.querySelector('.page-preview.is-screen-375.active')) {
|
|
71849
|
+
inpImageScaleSlider.value = 0;
|
|
71850
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active')) {
|
|
71851
|
+
inpImageScaleSlider.value = 0;
|
|
71852
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active')) {
|
|
71853
|
+
inpImageScaleSlider.value = 0;
|
|
71854
|
+
} //Trigger Change event
|
|
71855
|
+
|
|
71856
|
+
|
|
71583
71857
|
this.builder.opts.onChange();
|
|
71584
71858
|
}; // Scale 2
|
|
71585
71859
|
|
|
@@ -71628,8 +71902,44 @@ class ColumnTool {
|
|
|
71628
71902
|
//val: 0 - 100
|
|
71629
71903
|
let val = inpImageHorSlider.value;
|
|
71630
71904
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71905
|
+
// cell.style.backgroundPositionX = val + '%';
|
|
71906
|
+
|
|
71907
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71908
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71909
|
+
if (!dataBg) dataBg = '';
|
|
71910
|
+
let div = document.createElement('div');
|
|
71911
|
+
div.style.cssText = dataBg;
|
|
71912
|
+
div.style.backgroundPositionX = val + '%';
|
|
71913
|
+
div.style.backgroundSize = 'cover';
|
|
71914
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71915
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71916
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71917
|
+
if (!dataBg) dataBg = '';
|
|
71918
|
+
let div = document.createElement('div');
|
|
71919
|
+
div.style.cssText = dataBg;
|
|
71920
|
+
div.style.backgroundPositionX = val + '%';
|
|
71921
|
+
div.style.backgroundSize = 'cover';
|
|
71922
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
71923
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
71924
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
71925
|
+
if (!dataBg) dataBg = '';
|
|
71926
|
+
let div = document.createElement('div');
|
|
71927
|
+
div.style.cssText = dataBg;
|
|
71928
|
+
div.style.backgroundPositionX = val + '%';
|
|
71929
|
+
div.style.backgroundSize = 'cover';
|
|
71930
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
71931
|
+
} else {
|
|
71932
|
+
cell.style.backgroundPositionX = val + '%';
|
|
71933
|
+
} // Clean unused
|
|
71934
|
+
|
|
71631
71935
|
|
|
71632
|
-
cell.style.
|
|
71936
|
+
cell.style.left = '';
|
|
71937
|
+
cell.style.top = '';
|
|
71938
|
+
cell.style.width = '';
|
|
71939
|
+
cell.style.height = '';
|
|
71940
|
+
cell.removeAttribute('data-x');
|
|
71941
|
+
cell.removeAttribute('data-y');
|
|
71942
|
+
cell.removeAttribute('data-scale');
|
|
71633
71943
|
};
|
|
71634
71944
|
|
|
71635
71945
|
inpImageHorSlider.onchange = () => {
|
|
@@ -71673,8 +71983,44 @@ class ColumnTool {
|
|
|
71673
71983
|
//val: 0 - 100
|
|
71674
71984
|
let val = inpImageVertSlider.value;
|
|
71675
71985
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
71986
|
+
// cell.style.backgroundPositionY = val + '%';
|
|
71987
|
+
|
|
71988
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && this.useTarget) {
|
|
71989
|
+
let dataBg = cell.getAttribute('data-bg-xs');
|
|
71990
|
+
if (!dataBg) dataBg = '';
|
|
71991
|
+
let div = document.createElement('div');
|
|
71992
|
+
div.style.cssText = dataBg;
|
|
71993
|
+
div.style.backgroundPositionY = val + '%';
|
|
71994
|
+
div.style.backgroundSize = 'cover';
|
|
71995
|
+
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
71996
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && this.useTarget) {
|
|
71997
|
+
let dataBg = cell.getAttribute('data-bg-sm');
|
|
71998
|
+
if (!dataBg) dataBg = '';
|
|
71999
|
+
let div = document.createElement('div');
|
|
72000
|
+
div.style.cssText = dataBg;
|
|
72001
|
+
div.style.backgroundPositionY = val + '%';
|
|
72002
|
+
div.style.backgroundSize = 'cover';
|
|
72003
|
+
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
72004
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && this.useTarget) {
|
|
72005
|
+
let dataBg = cell.getAttribute('data-bg-md');
|
|
72006
|
+
if (!dataBg) dataBg = '';
|
|
72007
|
+
let div = document.createElement('div');
|
|
72008
|
+
div.style.cssText = dataBg;
|
|
72009
|
+
div.style.backgroundPositionY = val + '%';
|
|
72010
|
+
div.style.backgroundSize = 'cover';
|
|
72011
|
+
cell.setAttribute('data-bg-md', div.style.cssText);
|
|
72012
|
+
} else {
|
|
72013
|
+
cell.style.backgroundPositionY = val + '%';
|
|
72014
|
+
} // Clean unused
|
|
72015
|
+
|
|
71676
72016
|
|
|
71677
|
-
cell.style.
|
|
72017
|
+
cell.style.left = '';
|
|
72018
|
+
cell.style.top = '';
|
|
72019
|
+
cell.style.width = '';
|
|
72020
|
+
cell.style.height = '';
|
|
72021
|
+
cell.removeAttribute('data-x');
|
|
72022
|
+
cell.removeAttribute('data-y');
|
|
72023
|
+
cell.removeAttribute('data-scale');
|
|
71678
72024
|
};
|
|
71679
72025
|
|
|
71680
72026
|
inpImageVertSlider.onchange = () => {
|
|
@@ -71703,14 +72049,23 @@ class ColumnTool {
|
|
|
71703
72049
|
inpImageVertSlider2.onchange = () => {
|
|
71704
72050
|
//Trigger Change event
|
|
71705
72051
|
this.builder.opts.onChange();
|
|
71706
|
-
};
|
|
72052
|
+
}; //Reset
|
|
72053
|
+
|
|
71707
72054
|
|
|
71708
|
-
const btnImageReset =
|
|
72055
|
+
const btnImageReset = imageAdjust.querySelector('.image-reset');
|
|
71709
72056
|
btnImageReset.addEventListener('click', () => {
|
|
71710
72057
|
this.builder.uo.saveForUndo();
|
|
71711
72058
|
let cell = this.builder.elementSelected;
|
|
71712
72059
|
this.resetImage(cell); //Trigger Change event
|
|
71713
72060
|
|
|
72061
|
+
this.builder.opts.onChange();
|
|
72062
|
+
});
|
|
72063
|
+
const btnImageReset2 = imageAdjust2.querySelector('.image-reset');
|
|
72064
|
+
btnImageReset2.addEventListener('click', () => {
|
|
72065
|
+
this.builder.uo.saveForUndo();
|
|
72066
|
+
let cell = this.builder.elementSelected;
|
|
72067
|
+
this.resetImage2(cell); //Trigger Change event
|
|
72068
|
+
|
|
71714
72069
|
this.builder.opts.onChange();
|
|
71715
72070
|
}); // Row Enlarge (Currently not used)
|
|
71716
72071
|
|
|
@@ -72638,8 +72993,9 @@ class ColumnTool {
|
|
|
72638
72993
|
if (btn) btn.setAttribute('data-focus', true);
|
|
72639
72994
|
}
|
|
72640
72995
|
|
|
72641
|
-
openImageAdjust(elm, btn) {
|
|
72642
|
-
//Current value
|
|
72996
|
+
openImageAdjust(elm, btn, useTarget) {
|
|
72997
|
+
if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
|
|
72998
|
+
|
|
72643
72999
|
const imageAdjust = this.imageAdjust;
|
|
72644
73000
|
const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
|
|
72645
73001
|
const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
|
|
@@ -72648,9 +73004,40 @@ class ColumnTool {
|
|
|
72648
73004
|
inpImageHorSlider.value = 0;
|
|
72649
73005
|
inpImageVertSlider.value = 0;
|
|
72650
73006
|
|
|
72651
|
-
if (
|
|
73007
|
+
if (useTarget) {
|
|
73008
|
+
inpImageHorSlider.value = 50;
|
|
73009
|
+
inpImageVertSlider.value = 60;
|
|
73010
|
+
}
|
|
73011
|
+
|
|
73012
|
+
let div = document.createElement('div');
|
|
73013
|
+
|
|
73014
|
+
if (document.querySelector('.page-preview.is-screen-375.active') && useTarget) {
|
|
73015
|
+
let dataBg = elm.getAttribute('data-bg-xs');
|
|
73016
|
+
if (!dataBg) dataBg = '';
|
|
73017
|
+
div.style.cssText = dataBg;
|
|
73018
|
+
inpImageScaleSlider.disabled = true;
|
|
73019
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73020
|
+
} else if (document.querySelector('.page-preview.is-screen-768.active') && useTarget) {
|
|
73021
|
+
let dataBg = elm.getAttribute('data-bg-sm');
|
|
73022
|
+
if (!dataBg) dataBg = '';
|
|
73023
|
+
div.style.cssText = dataBg;
|
|
73024
|
+
inpImageScaleSlider.disabled = true;
|
|
73025
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73026
|
+
} else if (document.querySelector('.page-preview.is-screen-1024.active') && useTarget) {
|
|
73027
|
+
let dataBg = elm.getAttribute('data-bg-md');
|
|
73028
|
+
if (!dataBg) dataBg = '';
|
|
73029
|
+
div.style.cssText = dataBg;
|
|
73030
|
+
inpImageScaleSlider.disabled = true;
|
|
73031
|
+
inpImageScaleSlider.style.opacity = 0.6;
|
|
73032
|
+
} else {
|
|
73033
|
+
div.style.cssText = elm.style.cssText;
|
|
73034
|
+
inpImageScaleSlider.disabled = false;
|
|
73035
|
+
inpImageScaleSlider.style.opacity = '';
|
|
73036
|
+
}
|
|
73037
|
+
|
|
73038
|
+
if (div.style.backgroundSize) {
|
|
72652
73039
|
let val;
|
|
72653
|
-
let bgSize =
|
|
73040
|
+
let bgSize = div.style.backgroundSize;
|
|
72654
73041
|
|
|
72655
73042
|
if (isNaN(parseInt(bgSize))) {
|
|
72656
73043
|
val = 100;
|
|
@@ -72663,9 +73050,9 @@ class ColumnTool {
|
|
|
72663
73050
|
}
|
|
72664
73051
|
}
|
|
72665
73052
|
|
|
72666
|
-
if (
|
|
73053
|
+
if (div.style.backgroundPositionX) {
|
|
72667
73054
|
let val;
|
|
72668
|
-
let bgPosX =
|
|
73055
|
+
let bgPosX = div.style.backgroundPositionX;
|
|
72669
73056
|
|
|
72670
73057
|
if (isNaN(parseInt(bgPosX))) {
|
|
72671
73058
|
val = 0;
|
|
@@ -72678,9 +73065,9 @@ class ColumnTool {
|
|
|
72678
73065
|
}
|
|
72679
73066
|
}
|
|
72680
73067
|
|
|
72681
|
-
if (
|
|
73068
|
+
if (div.style.backgroundPositionY) {
|
|
72682
73069
|
let val;
|
|
72683
|
-
let bgPosY =
|
|
73070
|
+
let bgPosY = div.style.backgroundPositionY;
|
|
72684
73071
|
|
|
72685
73072
|
if (isNaN(parseInt(bgPosY))) {
|
|
72686
73073
|
val = 0;
|
|
@@ -72707,6 +73094,31 @@ class ColumnTool {
|
|
|
72707
73094
|
}
|
|
72708
73095
|
|
|
72709
73096
|
resetImage(elm) {
|
|
73097
|
+
//Current value
|
|
73098
|
+
const imageAdjust = this.imageAdjust;
|
|
73099
|
+
const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
|
|
73100
|
+
const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
|
|
73101
|
+
const inpImageVertSlider = imageAdjust.querySelector('.image-vert-slider');
|
|
73102
|
+
inpImageHorSlider.value = 50;
|
|
73103
|
+
inpImageVertSlider.value = 60;
|
|
73104
|
+
inpImageScaleSlider.value = 0;
|
|
73105
|
+
elm.style.backgroundPositionX = '';
|
|
73106
|
+
elm.style.backgroundPositionY = '';
|
|
73107
|
+
elm.style.backgroundSize = ''; // Clean unused
|
|
73108
|
+
|
|
73109
|
+
elm.style.left = '';
|
|
73110
|
+
elm.style.top = '';
|
|
73111
|
+
elm.style.width = '';
|
|
73112
|
+
elm.style.height = '';
|
|
73113
|
+
elm.removeAttribute('data-x');
|
|
73114
|
+
elm.removeAttribute('data-y');
|
|
73115
|
+
elm.removeAttribute('data-scale');
|
|
73116
|
+
elm.removeAttribute('data-bg-xs');
|
|
73117
|
+
elm.removeAttribute('data-bg-sm');
|
|
73118
|
+
elm.removeAttribute('data-bg-md');
|
|
73119
|
+
}
|
|
73120
|
+
|
|
73121
|
+
resetImage2(elm) {
|
|
72710
73122
|
//Current value
|
|
72711
73123
|
const imageAdjust2 = this.imageAdjust2;
|
|
72712
73124
|
const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
|
|
@@ -85744,7 +86156,7 @@ class Lightbox {
|
|
|
85744
86156
|
const color = block.getAttribute('data-modal-color');
|
|
85745
86157
|
|
|
85746
86158
|
if (url) {
|
|
85747
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
86159
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
85748
86160
|
arrGallery.push({
|
|
85749
86161
|
type: 'image',
|
|
85750
86162
|
url: url,
|
|
@@ -89721,11 +90133,11 @@ class ContentBuilder {
|
|
|
89721
90133
|
this.colTool.openImagePicker(currentUrl, callback, btn);
|
|
89722
90134
|
}
|
|
89723
90135
|
|
|
89724
|
-
openImageAdjust(elm, btn) {
|
|
90136
|
+
openImageAdjust(elm, btn, useTarget) {
|
|
89725
90137
|
if (this.opts.imageAdjust === 2) {
|
|
89726
90138
|
this.colTool.openImageAdjust2(elm, btn);
|
|
89727
90139
|
} else {
|
|
89728
|
-
this.colTool.openImageAdjust(elm, btn);
|
|
90140
|
+
this.colTool.openImageAdjust(elm, btn, useTarget);
|
|
89729
90141
|
}
|
|
89730
90142
|
}
|
|
89731
90143
|
|
|
@@ -89753,13 +90165,13 @@ class ContentBuilder {
|
|
|
89753
90165
|
if (this.targetAssetType === 'all') {
|
|
89754
90166
|
ok = true;
|
|
89755
90167
|
} else if (this.targetAssetType === 'media') {
|
|
89756
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
|
|
90168
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
89757
90169
|
ok = true;
|
|
89758
90170
|
} else {
|
|
89759
90171
|
alert(this.util.out('Please select an image or video file.'));
|
|
89760
90172
|
}
|
|
89761
90173
|
} else if (this.targetAssetType === 'image') {
|
|
89762
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
90174
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
89763
90175
|
ok = true;
|
|
89764
90176
|
} else {
|
|
89765
90177
|
alert(this.util.out('Please select an image file.'));
|
|
@@ -89829,7 +90241,7 @@ class ContentBuilder {
|
|
|
89829
90241
|
if (targetAssetType === 'all') {
|
|
89830
90242
|
ok = true;
|
|
89831
90243
|
} else if (targetAssetType === 'media') {
|
|
89832
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
|
|
90244
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
89833
90245
|
ok = true;
|
|
89834
90246
|
} else {
|
|
89835
90247
|
alert(out('Please select an image or video file.'));
|
|
@@ -89841,7 +90253,7 @@ class ContentBuilder {
|
|
|
89841
90253
|
alert(out('Please select an mp4 file.'));
|
|
89842
90254
|
}
|
|
89843
90255
|
} else if (targetAssetType === 'image') {
|
|
89844
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
90256
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
89845
90257
|
ok = true;
|
|
89846
90258
|
} else {
|
|
89847
90259
|
alert(out('Please select an image file.'));
|
|
@@ -90709,7 +91121,7 @@ class ContentBuilder {
|
|
|
90709
91121
|
url = elm.getAttribute('data-modal-url');
|
|
90710
91122
|
let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
|
|
90711
91123
|
|
|
90712
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
91124
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
90713
91125
|
this.lightbox.openImage(url, theme, color);
|
|
90714
91126
|
} else if (extension === 'mp4') {
|
|
90715
91127
|
this.lightbox.openVideo(url, 'dark', color);
|
|
@@ -90833,7 +91245,7 @@ class ContentBuilder {
|
|
|
90833
91245
|
if (!theme) theme = 'light';
|
|
90834
91246
|
const color = elm.getAttribute('data-modal-color');
|
|
90835
91247
|
|
|
90836
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
91248
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
90837
91249
|
this.lightbox.openImage(url, theme, color);
|
|
90838
91250
|
e.preventDefault();
|
|
90839
91251
|
return false;
|
|
@@ -93689,6 +94101,10 @@ class AnimateScroll {
|
|
|
93689
94101
|
.is-screen-375 .is-modal-bar > span {
|
|
93690
94102
|
display: none;
|
|
93691
94103
|
}
|
|
94104
|
+
|
|
94105
|
+
.page-preview:focus-within {
|
|
94106
|
+
z-index:100021 !important
|
|
94107
|
+
}
|
|
93692
94108
|
</style>
|
|
93693
94109
|
<div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
93694
94110
|
<div class="is-modal-bar is-draggable" draggable="">
|
|
@@ -96016,6 +96432,12 @@ class AnimateScroll {
|
|
|
96016
96432
|
// };
|
|
96017
96433
|
|
|
96018
96434
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
96435
|
+
|
|
96436
|
+
iframe.onload = () => {
|
|
96437
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96438
|
+
iframe.focus();
|
|
96439
|
+
});
|
|
96440
|
+
};
|
|
96019
96441
|
});
|
|
96020
96442
|
const btnModalRefresh = modalPagePreview.querySelector('.is-modal-refresh');
|
|
96021
96443
|
btnModalRefresh.addEventListener('click', () => {
|
|
@@ -96027,6 +96449,12 @@ class AnimateScroll {
|
|
|
96027
96449
|
localStorage.setItem('preview-sectioncss', sectionCss);
|
|
96028
96450
|
const iframe = modalPagePreview.querySelector('iframe');
|
|
96029
96451
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
96452
|
+
|
|
96453
|
+
iframe.onload = () => {
|
|
96454
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96455
|
+
iframe.focus();
|
|
96456
|
+
});
|
|
96457
|
+
};
|
|
96030
96458
|
}); // ---
|
|
96031
96459
|
//Extend onPageContentClick
|
|
96032
96460
|
|
|
@@ -96119,6 +96547,12 @@ class AnimateScroll {
|
|
|
96119
96547
|
modalPagePreview.classList.add(localStorage.getItem('_livepreviewscreen'));
|
|
96120
96548
|
}
|
|
96121
96549
|
|
|
96550
|
+
iframe.onload = () => {
|
|
96551
|
+
iframe.contentWindow.document.addEventListener('click', () => {
|
|
96552
|
+
iframe.focus();
|
|
96553
|
+
});
|
|
96554
|
+
};
|
|
96555
|
+
|
|
96122
96556
|
localStorage.setItem('_livepreview', '1');
|
|
96123
96557
|
}
|
|
96124
96558
|
|
|
@@ -97830,15 +98264,16 @@ class Timeline {
|
|
|
97830
98264
|
let html = `
|
|
97831
98265
|
<style>
|
|
97832
98266
|
.is-modal.page-timeline {
|
|
97833
|
-
width:
|
|
97834
|
-
height:
|
|
98267
|
+
width: 1017px !important;
|
|
98268
|
+
height: 295px !important;
|
|
97835
98269
|
top: auto !important;
|
|
97836
98270
|
bottom: 30px !important;
|
|
97837
98271
|
left: auto !important;
|
|
97838
98272
|
right: 30px !important;
|
|
97839
98273
|
z-index: 10002 !important;
|
|
98274
|
+
font-size: 12px;
|
|
97840
98275
|
}
|
|
97841
|
-
|
|
98276
|
+
/*
|
|
97842
98277
|
@media all and (max-width: 1919px) {
|
|
97843
98278
|
.is-modal.page-timeline {
|
|
97844
98279
|
width: 60vw !important;
|
|
@@ -97865,10 +98300,27 @@ class Timeline {
|
|
|
97865
98300
|
min-width: 576px;
|
|
97866
98301
|
}
|
|
97867
98302
|
}
|
|
97868
|
-
|
|
98303
|
+
*/
|
|
98304
|
+
@media all and (max-width: 1340px) {
|
|
98305
|
+
.is-modal.page-timeline {
|
|
98306
|
+
width: 60vw !important;
|
|
98307
|
+
min-width: 576px;
|
|
98308
|
+
}
|
|
98309
|
+
}
|
|
98310
|
+
.page-timeline .is-modal-bar {
|
|
98311
|
+
font-size: 12px !important;
|
|
98312
|
+
}
|
|
98313
|
+
.page-timeline select {
|
|
98314
|
+
font-size: 12px !important;
|
|
98315
|
+
line-height: 1;
|
|
98316
|
+
}
|
|
98317
|
+
.page-timeline label {
|
|
98318
|
+
font-size: 12px !important;
|
|
98319
|
+
line-height: 1;
|
|
98320
|
+
}
|
|
97869
98321
|
.page-timeline td {
|
|
97870
|
-
font-size:
|
|
97871
|
-
padding: 3px
|
|
98322
|
+
font-size: 12px;
|
|
98323
|
+
padding: 3px 1px;
|
|
97872
98324
|
}
|
|
97873
98325
|
.page-timeline .table-header td {
|
|
97874
98326
|
font-size: 11px;
|
|
@@ -97879,11 +98331,32 @@ class Timeline {
|
|
|
97879
98331
|
font-family: sans-serif !important;
|
|
97880
98332
|
font-weight: 300 !important;
|
|
97881
98333
|
padding: 0 !important;
|
|
97882
|
-
width:
|
|
97883
|
-
height:
|
|
98334
|
+
width: 30px !important;
|
|
98335
|
+
height: 26px !important;
|
|
97884
98336
|
text-align: center !important;
|
|
97885
98337
|
letter-spacing: 0px !important;
|
|
97886
98338
|
}
|
|
98339
|
+
.page-timeline td input.inp-extra2 {
|
|
98340
|
+
background-color: #f5f5f5 !important;
|
|
98341
|
+
}
|
|
98342
|
+
|
|
98343
|
+
.page-timeline:focus-within {
|
|
98344
|
+
z-index:100021 !important
|
|
98345
|
+
}
|
|
98346
|
+
|
|
98347
|
+
.page-timeline .timeline-more {
|
|
98348
|
+
display: none;
|
|
98349
|
+
position: absolute;
|
|
98350
|
+
top: auto !important;
|
|
98351
|
+
left: 283px !important;
|
|
98352
|
+
bottom: 70px;
|
|
98353
|
+
padding: 25px 20px 20px;
|
|
98354
|
+
box-shadow: 3px 4px 10px 0px rgb(0 0 0 / 6%) !important;
|
|
98355
|
+
}
|
|
98356
|
+
.page-timeline .timeline-more.active {
|
|
98357
|
+
display: flex;
|
|
98358
|
+
}
|
|
98359
|
+
|
|
97887
98360
|
</style>
|
|
97888
98361
|
<div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
97889
98362
|
<div class="is-modal-bar is-draggable" draggable="">
|
|
@@ -97894,11 +98367,12 @@ class Timeline {
|
|
|
97894
98367
|
</div>
|
|
97895
98368
|
<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;">
|
|
97896
98369
|
|
|
97897
|
-
<div
|
|
97898
|
-
<table class="table-timeline" style="margin:
|
|
98370
|
+
<div>
|
|
98371
|
+
<table class="table-timeline" style="margin:0px 15px 3px;border-collapse:collapse;">
|
|
97899
98372
|
<tr class="table-header">
|
|
97900
98373
|
<td style="text-align:center"> </td>
|
|
97901
|
-
<td style="text-align:center">0
|
|
98374
|
+
<td style="text-align:center">0%</td>
|
|
98375
|
+
<td style="text-align:center"></td>
|
|
97902
98376
|
<td style="text-align:center"></td>
|
|
97903
98377
|
<td style="text-align:center"></td>
|
|
97904
98378
|
<td style="text-align:center"></td>
|
|
@@ -97912,21 +98386,24 @@ class Timeline {
|
|
|
97912
98386
|
<td style="text-align:center"></td>
|
|
97913
98387
|
<td style="text-align:center"></td>
|
|
97914
98388
|
<td style="text-align:center"></td>
|
|
97915
|
-
<td style="text-align:center">100%</td>
|
|
97916
98389
|
<td style="text-align:center"></td>
|
|
98390
|
+
<td style="text-align:center;padding-right:5px">100%</td>
|
|
97917
98391
|
<td style="text-align:center"></td>
|
|
97918
98392
|
<td style="text-align:center"></td>
|
|
98393
|
+
<td style="text-align:center" colspan="8">${out('Extended (for use with pinned section)')}</td>
|
|
98394
|
+
<!--<td style="text-align:center"></td>
|
|
97919
98395
|
<td style="text-align:center"></td>
|
|
97920
98396
|
<td style="text-align:center"></td>
|
|
97921
98397
|
<td style="text-align:center"></td>
|
|
97922
98398
|
<td style="text-align:center">150%</td>
|
|
97923
98399
|
<td style="text-align:center"></td>
|
|
98400
|
+
<td style="text-align:center"></td>-->
|
|
97924
98401
|
<td style="text-align:center"></td>
|
|
97925
|
-
<td style="text-align:center"
|
|
97926
|
-
|
|
97927
|
-
|
|
97928
|
-
|
|
97929
|
-
|
|
98402
|
+
<td style="text-align:center;padding:0">
|
|
98403
|
+
<!--<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;">
|
|
98404
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98405
|
+
</button>-->
|
|
98406
|
+
</td>
|
|
97930
98407
|
</tr>
|
|
97931
98408
|
<tr>
|
|
97932
98409
|
<td>
|
|
@@ -97985,40 +98462,40 @@ class Timeline {
|
|
|
97985
98462
|
</td>
|
|
97986
98463
|
|
|
97987
98464
|
<td>
|
|
97988
|
-
<input class="inp-x-1700" placeholder="" type="text" />
|
|
98465
|
+
<input class="inp-x-1700 inp-extra" placeholder="" type="text" />
|
|
97989
98466
|
</td>
|
|
97990
98467
|
<td>
|
|
97991
|
-
<input class="inp-x-1800" placeholder="" type="text" />
|
|
98468
|
+
<input class="inp-x-1800 inp-extra" placeholder="" type="text" />
|
|
97992
98469
|
</td>
|
|
97993
98470
|
<td>
|
|
97994
|
-
<input class="inp-x-1900" placeholder="" type="text" />
|
|
98471
|
+
<input class="inp-x-1900 inp-extra" placeholder="" type="text" />
|
|
97995
98472
|
</td>
|
|
97996
98473
|
<td>
|
|
97997
|
-
<input class="inp-x-2000" placeholder="" type="text" />
|
|
98474
|
+
<input class="inp-x-2000 inp-extra" placeholder="" type="text" />
|
|
97998
98475
|
</td>
|
|
97999
98476
|
<td>
|
|
98000
|
-
<input class="inp-x-2100" placeholder="" type="text" />
|
|
98477
|
+
<input class="inp-x-2100 inp-extra" placeholder="" type="text" />
|
|
98001
98478
|
</td>
|
|
98002
98479
|
<td>
|
|
98003
|
-
<input class="inp-x-2200" placeholder="" type="text" />
|
|
98480
|
+
<input class="inp-x-2200 inp-extra" placeholder="" type="text" />
|
|
98004
98481
|
</td>
|
|
98005
98482
|
<td>
|
|
98006
|
-
<input class="inp-x-2300" placeholder="" type="text" />
|
|
98483
|
+
<input class="inp-x-2300 inp-extra" placeholder="" type="text" />
|
|
98007
98484
|
</td>
|
|
98008
98485
|
<td>
|
|
98009
|
-
<input class="inp-x-2400" placeholder="" type="text" />
|
|
98486
|
+
<input class="inp-x-2400 inp-extra" placeholder="" type="text" />
|
|
98010
98487
|
</td>
|
|
98011
98488
|
<td>
|
|
98012
|
-
<input class="inp-x-2500" placeholder="" type="text" />
|
|
98489
|
+
<input class="inp-x-2500 inp-extra" placeholder="" type="text" />
|
|
98013
98490
|
</td>
|
|
98014
98491
|
<td>
|
|
98015
|
-
<input class="inp-x-2600" placeholder="" type="text" />
|
|
98492
|
+
<input class="inp-x-2600 inp-extra" placeholder="" type="text" />
|
|
98016
98493
|
</td>
|
|
98017
98494
|
<td>
|
|
98018
|
-
<input class="inp-x-2700" placeholder="" type="text" />
|
|
98495
|
+
<input class="inp-x-2700 inp-extra" placeholder="" type="text" />
|
|
98019
98496
|
</td>
|
|
98020
98497
|
<td>
|
|
98021
|
-
<input class="inp-x-2800" placeholder="" type="text" />
|
|
98498
|
+
<input class="inp-x-2800 inp-extra" placeholder="" type="text" />
|
|
98022
98499
|
</td>
|
|
98023
98500
|
</tr>
|
|
98024
98501
|
<tr>
|
|
@@ -98078,40 +98555,40 @@ class Timeline {
|
|
|
98078
98555
|
</td>
|
|
98079
98556
|
|
|
98080
98557
|
<td>
|
|
98081
|
-
<input class="inp-y-1700" placeholder="" type="text" />
|
|
98558
|
+
<input class="inp-y-1700 inp-extra" placeholder="" type="text" />
|
|
98082
98559
|
</td>
|
|
98083
98560
|
<td>
|
|
98084
|
-
<input class="inp-y-1800" placeholder="" type="text" />
|
|
98561
|
+
<input class="inp-y-1800 inp-extra" placeholder="" type="text" />
|
|
98085
98562
|
</td>
|
|
98086
98563
|
<td>
|
|
98087
|
-
<input class="inp-y-1900" placeholder="" type="text" />
|
|
98564
|
+
<input class="inp-y-1900 inp-extra" placeholder="" type="text" />
|
|
98088
98565
|
</td>
|
|
98089
98566
|
<td>
|
|
98090
|
-
<input class="inp-y-2000" placeholder="" type="text" />
|
|
98567
|
+
<input class="inp-y-2000 inp-extra" placeholder="" type="text" />
|
|
98091
98568
|
</td>
|
|
98092
98569
|
<td>
|
|
98093
|
-
<input class="inp-y-2100" placeholder="" type="text" />
|
|
98570
|
+
<input class="inp-y-2100 inp-extra" placeholder="" type="text" />
|
|
98094
98571
|
</td>
|
|
98095
98572
|
<td>
|
|
98096
|
-
<input class="inp-y-2200" placeholder="" type="text" />
|
|
98573
|
+
<input class="inp-y-2200 inp-extra" placeholder="" type="text" />
|
|
98097
98574
|
</td>
|
|
98098
98575
|
<td>
|
|
98099
|
-
<input class="inp-y-2300" placeholder="" type="text" />
|
|
98576
|
+
<input class="inp-y-2300 inp-extra" placeholder="" type="text" />
|
|
98100
98577
|
</td>
|
|
98101
98578
|
<td>
|
|
98102
|
-
<input class="inp-y-2400" placeholder="" type="text" />
|
|
98579
|
+
<input class="inp-y-2400 inp-extra" placeholder="" type="text" />
|
|
98103
98580
|
</td>
|
|
98104
98581
|
<td>
|
|
98105
|
-
<input class="inp-y-2500" placeholder="" type="text" />
|
|
98582
|
+
<input class="inp-y-2500 inp-extra" placeholder="" type="text" />
|
|
98106
98583
|
</td>
|
|
98107
98584
|
<td>
|
|
98108
|
-
<input class="inp-y-2600" placeholder="" type="text" />
|
|
98585
|
+
<input class="inp-y-2600 inp-extra" placeholder="" type="text" />
|
|
98109
98586
|
</td>
|
|
98110
98587
|
<td>
|
|
98111
|
-
<input class="inp-y-2700" placeholder="" type="text" />
|
|
98588
|
+
<input class="inp-y-2700 inp-extra" placeholder="" type="text" />
|
|
98112
98589
|
</td>
|
|
98113
98590
|
<td>
|
|
98114
|
-
<input class="inp-y-2800" placeholder="" type="text" />
|
|
98591
|
+
<input class="inp-y-2800 inp-extra" placeholder="" type="text" />
|
|
98115
98592
|
</td>
|
|
98116
98593
|
</tr>
|
|
98117
98594
|
<tr>
|
|
@@ -98171,40 +98648,40 @@ class Timeline {
|
|
|
98171
98648
|
</td>
|
|
98172
98649
|
|
|
98173
98650
|
<td>
|
|
98174
|
-
<input class="inp-sc-1700" placeholder="" type="text" />
|
|
98651
|
+
<input class="inp-sc-1700 inp-extra" placeholder="" type="text" />
|
|
98175
98652
|
</td>
|
|
98176
98653
|
<td>
|
|
98177
|
-
<input class="inp-sc-1800" placeholder="" type="text" />
|
|
98654
|
+
<input class="inp-sc-1800 inp-extra" placeholder="" type="text" />
|
|
98178
98655
|
</td>
|
|
98179
98656
|
<td>
|
|
98180
|
-
<input class="inp-sc-1900" placeholder="" type="text" />
|
|
98657
|
+
<input class="inp-sc-1900 inp-extra" placeholder="" type="text" />
|
|
98181
98658
|
</td>
|
|
98182
98659
|
<td>
|
|
98183
|
-
<input class="inp-sc-2000" placeholder="" type="text" />
|
|
98660
|
+
<input class="inp-sc-2000 inp-extra" placeholder="" type="text" />
|
|
98184
98661
|
</td>
|
|
98185
98662
|
<td>
|
|
98186
|
-
<input class="inp-sc-2100" placeholder="" type="text" />
|
|
98663
|
+
<input class="inp-sc-2100 inp-extra" placeholder="" type="text" />
|
|
98187
98664
|
</td>
|
|
98188
98665
|
<td>
|
|
98189
|
-
<input class="inp-sc-2200" placeholder="" type="text" />
|
|
98666
|
+
<input class="inp-sc-2200 inp-extra" placeholder="" type="text" />
|
|
98190
98667
|
</td>
|
|
98191
98668
|
<td>
|
|
98192
|
-
<input class="inp-sc-2300" placeholder="" type="text" />
|
|
98669
|
+
<input class="inp-sc-2300 inp-extra" placeholder="" type="text" />
|
|
98193
98670
|
</td>
|
|
98194
98671
|
<td>
|
|
98195
|
-
<input class="inp-sc-2400" placeholder="" type="text" />
|
|
98672
|
+
<input class="inp-sc-2400 inp-extra" placeholder="" type="text" />
|
|
98196
98673
|
</td>
|
|
98197
98674
|
<td>
|
|
98198
|
-
<input class="inp-sc-2500" placeholder="" type="text" />
|
|
98675
|
+
<input class="inp-sc-2500 inp-extra" placeholder="" type="text" />
|
|
98199
98676
|
</td>
|
|
98200
98677
|
<td>
|
|
98201
|
-
<input class="inp-sc-2600" placeholder="" type="text" />
|
|
98678
|
+
<input class="inp-sc-2600 inp-extra" placeholder="" type="text" />
|
|
98202
98679
|
</td>
|
|
98203
98680
|
<td>
|
|
98204
|
-
<input class="inp-sc-2700" placeholder="" type="text" />
|
|
98681
|
+
<input class="inp-sc-2700 inp-extra" placeholder="" type="text" />
|
|
98205
98682
|
</td>
|
|
98206
98683
|
<td>
|
|
98207
|
-
<input class="inp-sc-2800" placeholder="" type="text" />
|
|
98684
|
+
<input class="inp-sc-2800 inp-extra" placeholder="" type="text" />
|
|
98208
98685
|
</td>
|
|
98209
98686
|
</tr>
|
|
98210
98687
|
<tr>
|
|
@@ -98264,40 +98741,40 @@ class Timeline {
|
|
|
98264
98741
|
</td>
|
|
98265
98742
|
|
|
98266
98743
|
<td>
|
|
98267
|
-
<input class="inp-rt-1700" placeholder="" type="text" />
|
|
98744
|
+
<input class="inp-rt-1700 inp-extra" placeholder="" type="text" />
|
|
98268
98745
|
</td>
|
|
98269
98746
|
<td>
|
|
98270
|
-
<input class="inp-rt-1800" placeholder="" type="text" />
|
|
98747
|
+
<input class="inp-rt-1800 inp-extra" placeholder="" type="text" />
|
|
98271
98748
|
</td>
|
|
98272
98749
|
<td>
|
|
98273
|
-
<input class="inp-rt-1900" placeholder="" type="text" />
|
|
98750
|
+
<input class="inp-rt-1900 inp-extra" placeholder="" type="text" />
|
|
98274
98751
|
</td>
|
|
98275
98752
|
<td>
|
|
98276
|
-
<input class="inp-rt-2000" placeholder="" type="text" />
|
|
98753
|
+
<input class="inp-rt-2000 inp-extra" placeholder="" type="text" />
|
|
98277
98754
|
</td>
|
|
98278
98755
|
<td>
|
|
98279
|
-
<input class="inp-rt-2100" placeholder="" type="text" />
|
|
98756
|
+
<input class="inp-rt-2100 inp-extra" placeholder="" type="text" />
|
|
98280
98757
|
</td>
|
|
98281
98758
|
<td>
|
|
98282
|
-
<input class="inp-rt-2200" placeholder="" type="text" />
|
|
98759
|
+
<input class="inp-rt-2200 inp-extra" placeholder="" type="text" />
|
|
98283
98760
|
</td>
|
|
98284
98761
|
<td>
|
|
98285
|
-
<input class="inp-rt-2300" placeholder="" type="text" />
|
|
98762
|
+
<input class="inp-rt-2300 inp-extra" placeholder="" type="text" />
|
|
98286
98763
|
</td>
|
|
98287
98764
|
<td>
|
|
98288
|
-
<input class="inp-rt-2400" placeholder="" type="text" />
|
|
98765
|
+
<input class="inp-rt-2400 inp-extra" placeholder="" type="text" />
|
|
98289
98766
|
</td>
|
|
98290
98767
|
<td>
|
|
98291
|
-
<input class="inp-rt-2500" placeholder="" type="text" />
|
|
98768
|
+
<input class="inp-rt-2500 inp-extra" placeholder="" type="text" />
|
|
98292
98769
|
</td>
|
|
98293
98770
|
<td>
|
|
98294
|
-
<input class="inp-rt-2600" placeholder="" type="text" />
|
|
98771
|
+
<input class="inp-rt-2600 inp-extra" placeholder="" type="text" />
|
|
98295
98772
|
</td>
|
|
98296
98773
|
<td>
|
|
98297
|
-
<input class="inp-rt-2700" placeholder="" type="text" />
|
|
98774
|
+
<input class="inp-rt-2700 inp-extra" placeholder="" type="text" />
|
|
98298
98775
|
</td>
|
|
98299
98776
|
<td>
|
|
98300
|
-
<input class="inp-rt-2800" placeholder="" type="text" />
|
|
98777
|
+
<input class="inp-rt-2800 inp-extra" placeholder="" type="text" />
|
|
98301
98778
|
</td>
|
|
98302
98779
|
</tr>
|
|
98303
98780
|
<tr>
|
|
@@ -98357,97 +98834,127 @@ class Timeline {
|
|
|
98357
98834
|
</td>
|
|
98358
98835
|
|
|
98359
98836
|
<td>
|
|
98360
|
-
<input class="inp-op-1700" placeholder="" type="text" />
|
|
98837
|
+
<input class="inp-op-1700 inp-extra" placeholder="" type="text" />
|
|
98361
98838
|
</td>
|
|
98362
98839
|
<td>
|
|
98363
|
-
<input class="inp-op-1800" placeholder="" type="text" />
|
|
98840
|
+
<input class="inp-op-1800 inp-extra" placeholder="" type="text" />
|
|
98364
98841
|
</td>
|
|
98365
98842
|
<td>
|
|
98366
|
-
<input class="inp-op-1900" placeholder="" type="text" />
|
|
98843
|
+
<input class="inp-op-1900 inp-extra" placeholder="" type="text" />
|
|
98367
98844
|
</td>
|
|
98368
98845
|
<td>
|
|
98369
|
-
<input class="inp-op-2000" placeholder="" type="text" />
|
|
98846
|
+
<input class="inp-op-2000 inp-extra" placeholder="" type="text" />
|
|
98370
98847
|
</td>
|
|
98371
98848
|
<td>
|
|
98372
|
-
<input class="inp-op-2100" placeholder="" type="text" />
|
|
98849
|
+
<input class="inp-op-2100 inp-extra" placeholder="" type="text" />
|
|
98373
98850
|
</td>
|
|
98374
98851
|
<td>
|
|
98375
|
-
<input class="inp-op-2200" placeholder="" type="text" />
|
|
98852
|
+
<input class="inp-op-2200 inp-extra" placeholder="" type="text" />
|
|
98376
98853
|
</td>
|
|
98377
98854
|
<td>
|
|
98378
|
-
<input class="inp-op-2300" placeholder="" type="text" />
|
|
98855
|
+
<input class="inp-op-2300 inp-extra" placeholder="" type="text" />
|
|
98379
98856
|
</td>
|
|
98380
98857
|
<td>
|
|
98381
|
-
<input class="inp-op-2400" placeholder="" type="text" />
|
|
98858
|
+
<input class="inp-op-2400 inp-extra" placeholder="" type="text" />
|
|
98382
98859
|
</td>
|
|
98383
98860
|
<td>
|
|
98384
|
-
<input class="inp-op-2500" placeholder="" type="text" />
|
|
98861
|
+
<input class="inp-op-2500 inp-extra" placeholder="" type="text" />
|
|
98385
98862
|
</td>
|
|
98386
98863
|
<td>
|
|
98387
|
-
<input class="inp-op-2600" placeholder="" type="text" />
|
|
98864
|
+
<input class="inp-op-2600 inp-extra" placeholder="" type="text" />
|
|
98388
98865
|
</td>
|
|
98389
98866
|
<td>
|
|
98390
|
-
<input class="inp-op-2700" placeholder="" type="text" />
|
|
98867
|
+
<input class="inp-op-2700 inp-extra" placeholder="" type="text" />
|
|
98391
98868
|
</td>
|
|
98392
98869
|
<td>
|
|
98393
|
-
<input class="inp-op-2800" placeholder="" type="text" />
|
|
98870
|
+
<input class="inp-op-2800 inp-extra" placeholder="" type="text" />
|
|
98394
98871
|
</td>
|
|
98395
98872
|
</tr>
|
|
98396
98873
|
</table>
|
|
98397
|
-
<div class="flex-wrap" style="padding: 3px 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
|
|
98398
|
-
|
|
98399
|
-
<div class="flex-wrap">
|
|
98400
|
-
<div class="flex-wrap" style="margin-right:15px">
|
|
98401
|
-
<select class="input-target">
|
|
98402
|
-
<option value="element">${out('Element')}</option>
|
|
98403
|
-
<option value="column">${out('Column')}</option>
|
|
98404
|
-
<option value="row">${out('Row')}</option>
|
|
98405
|
-
<option value="container">${out('Container')}</option>
|
|
98406
|
-
<option value="overlay">${out('Overlay')}</option>
|
|
98407
|
-
<option value="bg">${out('Background')}</option>
|
|
98408
|
-
<option value="box">${out('Box')}</option>
|
|
98409
|
-
<option value="section">${out('Section')}</option>
|
|
98410
|
-
</select>
|
|
98411
|
-
</div>
|
|
98412
|
-
<div class="flex-wrap" style="margin-right:20px">
|
|
98413
|
-
<button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
|
|
98414
|
-
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
98415
|
-
</button>
|
|
98416
|
-
<!--<button title="${out('Laptop/Tablet')}" class="input-device" data-value="md" style="width:40px;height:34px;">
|
|
98417
|
-
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>
|
|
98418
|
-
</button>-->
|
|
98419
|
-
<button title="${out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:34px;">
|
|
98420
|
-
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
98421
|
-
</button>
|
|
98422
|
-
<button title="${out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:34px;">
|
|
98423
|
-
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
98424
|
-
</button>
|
|
98425
|
-
</div>
|
|
98874
|
+
<div class="flex-wrap" style="padding: 3px 10px 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
|
|
98426
98875
|
|
|
98876
|
+
<div class="flex-wrap" style="margin-top:8px;flex-direction:column;align-items:flex-start">
|
|
98877
|
+
<!--
|
|
98878
|
+
<div style="font-size:10px;margin-top:-20px;margin-bottom:5px"><span>${out('Target')}</span>:</div>
|
|
98879
|
+
-->
|
|
98427
98880
|
<div class="flex-wrap">
|
|
98428
|
-
<
|
|
98429
|
-
<
|
|
98430
|
-
|
|
98431
|
-
|
|
98432
|
-
|
|
98433
|
-
|
|
98881
|
+
<div class="flex-wrap" style="margin-right:15px;width: 120px;">
|
|
98882
|
+
<select class="input-target">
|
|
98883
|
+
<option value="element">${out('Element')}</option>
|
|
98884
|
+
<option value="column">${out('Column')}</option>
|
|
98885
|
+
<option value="row">${out('Row')}</option>
|
|
98886
|
+
<option value="container">${out('Container')}</option>
|
|
98887
|
+
<option value="overlay">${out('Overlay')}</option>
|
|
98888
|
+
<option value="bg">${out('Background')}</option>
|
|
98889
|
+
<option value="box">${out('Box')}</option>
|
|
98890
|
+
<option value="section">${out('Section')}</option>
|
|
98891
|
+
</select>
|
|
98892
|
+
</div>
|
|
98893
|
+
<div class="flex-wrap" style="margin-right:15px">
|
|
98894
|
+
<button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
|
|
98895
|
+
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
98896
|
+
</button>
|
|
98897
|
+
<!--<button title="${out('Laptop/Tablet')}" class="input-device" data-value="md" style="width:40px;height:34px;">
|
|
98898
|
+
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>
|
|
98899
|
+
</button>-->
|
|
98900
|
+
<button title="${out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:34px;">
|
|
98901
|
+
<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
98902
|
+
</button>
|
|
98903
|
+
<button title="${out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:34px;">
|
|
98904
|
+
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
98905
|
+
</button>
|
|
98906
|
+
</div>
|
|
98434
98907
|
<div class="flex-wrap">
|
|
98435
|
-
<button
|
|
98436
|
-
|
|
98437
|
-
|
|
98908
|
+
<button type="button" class="cmd-timeline-more" style="width:40px;height:34px;"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
|
|
98909
|
+
|
|
98910
|
+
<!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:40px;height:34px;">
|
|
98911
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98912
|
+
</button>-->
|
|
98913
|
+
</div>
|
|
98914
|
+
</div>
|
|
98915
|
+
</div>
|
|
98916
|
+
<div class="flex-wrap" style="width:470px">
|
|
98917
|
+
|
|
98918
|
+
<div class="flex-wrap" style="flex-direction:column;align-items: flex-start;">
|
|
98919
|
+
<div class="flex-wrap" style="height:35px;margin-bottom: 2px;">
|
|
98920
|
+
<div class="flex-wrap">
|
|
98921
|
+
<label for="chkPinSection2" style="margin:0;display:flex;">
|
|
98922
|
+
<input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98923
|
+
<span>${out('Pin Section')}</span>.
|
|
98924
|
+
</label>
|
|
98925
|
+
</div>
|
|
98926
|
+
<div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
|
|
98927
|
+
<div class="flex-wrap">
|
|
98928
|
+
<button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:30px;">${out('MD')}</button>
|
|
98929
|
+
<button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:30px;">${out('LG')}</button>
|
|
98930
|
+
<button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:30px;">${out('XL')}</button>
|
|
98931
|
+
</div>
|
|
98932
|
+
<label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
|
|
98933
|
+
<input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98934
|
+
<span>${out('Overlap')}</span>
|
|
98935
|
+
</label>
|
|
98936
|
+
<label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
|
|
98937
|
+
<input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98938
|
+
<span>${out('Widescreen')}</span>
|
|
98939
|
+
</label>
|
|
98940
|
+
</div>
|
|
98941
|
+
</div>
|
|
98942
|
+
|
|
98943
|
+
<div>
|
|
98944
|
+
<label for="chkTimelineDisableOnMobile" style="margin:0;display:flex;">
|
|
98945
|
+
<input id="chkTimelineDisableOnMobile" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98946
|
+
<span>${out('Disable All Section Animations on Mobile')}</span>.
|
|
98947
|
+
</label>
|
|
98438
98948
|
</div>
|
|
98439
|
-
<label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
|
|
98440
|
-
<input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98441
|
-
<span>${out('Overlap')}</span>
|
|
98442
|
-
</label>
|
|
98443
|
-
<label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
|
|
98444
|
-
<input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0">
|
|
98445
|
-
<span>${out('Widescreen')}</span>
|
|
98446
|
-
</label>
|
|
98447
98949
|
</div>
|
|
98448
98950
|
</div>
|
|
98951
|
+
<div class="flex-wrap" style="margin-top:8px;">
|
|
98952
|
+
<button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:30px;height:23px;flex: none;box-shadow: none !important;background: transparent !important;">
|
|
98953
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98954
|
+
</button>
|
|
98955
|
+
</div>
|
|
98449
98956
|
|
|
98450
|
-
<div class="flex-wrap
|
|
98957
|
+
<div class="timeline-more flex-wrap is-pop">
|
|
98451
98958
|
|
|
98452
98959
|
<div class="flex-wrap" style="flex-direction:column;margin-right:15px">
|
|
98453
98960
|
<div style="font-size:10px;margin-top:-10px;margin-bottom:2px"><span>${out('Origin')}</span>:</div>
|
|
@@ -98470,15 +98977,28 @@ class Timeline {
|
|
|
98470
98977
|
</div>
|
|
98471
98978
|
</div>
|
|
98472
98979
|
|
|
98473
|
-
<div class="flex-wrap" style="
|
|
98474
|
-
<
|
|
98475
|
-
|
|
98476
|
-
|
|
98980
|
+
<div class="flex-wrap" style="flex-direction:column;align-items: flex-start;">
|
|
98981
|
+
<div class="flex-wrap">
|
|
98982
|
+
<div class="flex-wrap">
|
|
98983
|
+
<button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="height:34px;padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
|
|
98984
|
+
<button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="height:34px;padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
|
|
98985
|
+
</div>
|
|
98986
|
+
<!--
|
|
98987
|
+
<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;">
|
|
98988
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
98989
|
+
</button>
|
|
98990
|
+
-->
|
|
98991
|
+
</div>
|
|
98477
98992
|
|
|
98478
|
-
|
|
98479
|
-
|
|
98480
|
-
|
|
98993
|
+
<div style="display:none;margin-top:7px">
|
|
98994
|
+
|
|
98995
|
+
|
|
98996
|
+
|
|
98997
|
+
</div>
|
|
98998
|
+
|
|
98999
|
+
</div>
|
|
98481
99000
|
</div>
|
|
99001
|
+
|
|
98482
99002
|
|
|
98483
99003
|
</div>
|
|
98484
99004
|
</div>
|
|
@@ -98654,6 +99174,11 @@ class Timeline {
|
|
|
98654
99174
|
this.read();
|
|
98655
99175
|
});
|
|
98656
99176
|
});
|
|
99177
|
+
const btnTimelineMore = modalTimeline.querySelector('.cmd-timeline-more');
|
|
99178
|
+
btnTimelineMore.addEventListener('click', () => {
|
|
99179
|
+
const more = modalTimeline.querySelector('.timeline-more');
|
|
99180
|
+
this.builder.editor.util.showPop(more, false, btnTimelineMore);
|
|
99181
|
+
});
|
|
98657
99182
|
const chkPinSection = modalTimeline.querySelector('#chkPinSection2');
|
|
98658
99183
|
const divPinSpacing = modalTimeline.querySelector('.div-pin-spacing');
|
|
98659
99184
|
chkPinSection.addEventListener('click', () => {
|
|
@@ -98780,14 +99305,30 @@ class Timeline {
|
|
|
98780
99305
|
activeElement.style.transform = '';
|
|
98781
99306
|
activeElement.style.transition = '';
|
|
98782
99307
|
activeElement.style.opacity = '';
|
|
98783
|
-
|
|
99308
|
+
activeElement.style.transformOrigin = '';
|
|
99309
|
+
this.builder.animateScroll.refreshPage(); // Stable alternative to skrollrr.refresh()
|
|
98784
99310
|
|
|
98785
|
-
if (this.builder.win.skrollrr) {
|
|
98786
|
-
|
|
99311
|
+
this.read(); // if (this.builder.win.skrollrr) {
|
|
99312
|
+
// this.builder.win.skrollrr.refresh();
|
|
99313
|
+
// }
|
|
99314
|
+
//Trigger Change event
|
|
99315
|
+
|
|
99316
|
+
this.builder.settings.onChange();
|
|
99317
|
+
});
|
|
99318
|
+
const chkTimelineDisableOnMobile = modalTimeline.querySelector('#chkTimelineDisableOnMobile');
|
|
99319
|
+
chkTimelineDisableOnMobile.addEventListener('click', () => {
|
|
99320
|
+
const section = this.builder.activeSection;
|
|
99321
|
+
if (!section) return;
|
|
99322
|
+
this.builder.editor.saveForUndo();
|
|
99323
|
+
|
|
99324
|
+
if (chkTimelineDisableOnMobile.checked) {
|
|
99325
|
+
section.classList.add('m-skrollrr-off');
|
|
99326
|
+
} else {
|
|
99327
|
+
section.classList.remove('m-skrollrr-off');
|
|
98787
99328
|
} //Trigger Change event
|
|
98788
99329
|
|
|
98789
99330
|
|
|
98790
|
-
this.builder.
|
|
99331
|
+
this.builder.onChange();
|
|
98791
99332
|
}); //Extend onPageContentClick
|
|
98792
99333
|
|
|
98793
99334
|
let old = this.builder.settings.onPageContentClick;
|
|
@@ -99046,6 +99587,14 @@ class Timeline {
|
|
|
99046
99587
|
let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
|
|
99047
99588
|
btn.classList.add('on');
|
|
99048
99589
|
}
|
|
99590
|
+
|
|
99591
|
+
const chkTimelineDisableOnMobile = this.modalTimeline.querySelector('#chkTimelineDisableOnMobile');
|
|
99592
|
+
|
|
99593
|
+
if (activeSection.classList.contains('m-skrollrr-off')) {
|
|
99594
|
+
chkTimelineDisableOnMobile.checked = true;
|
|
99595
|
+
} else {
|
|
99596
|
+
chkTimelineDisableOnMobile.checked = false;
|
|
99597
|
+
}
|
|
99049
99598
|
}
|
|
99050
99599
|
|
|
99051
99600
|
const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
@@ -99071,6 +99620,7 @@ class Timeline {
|
|
|
99071
99620
|
|
|
99072
99621
|
if (activeElement.style.transformOrigin) {
|
|
99073
99622
|
let origin = activeElement.style.transformOrigin;
|
|
99623
|
+
if (origin === 'center center') origin = 'center';
|
|
99074
99624
|
const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
|
|
99075
99625
|
btnAnimOrigins.forEach(btn => {
|
|
99076
99626
|
if (origin === btn.getAttribute('data-value')) {
|
|
@@ -99702,6 +100252,7 @@ class Timeline {
|
|
|
99702
100252
|
let device = this.getDevice();
|
|
99703
100253
|
|
|
99704
100254
|
if (device === 'xs') {
|
|
100255
|
+
activeElement.removeAttribute('data-xs');
|
|
99705
100256
|
activeElement.removeAttribute('data-xs-t');
|
|
99706
100257
|
activeElement.removeAttribute('data-xs-t-100');
|
|
99707
100258
|
activeElement.removeAttribute('data-xs-t-200');
|
|
@@ -99732,6 +100283,7 @@ class Timeline {
|
|
|
99732
100283
|
activeElement.removeAttribute('data-xs-t-2700');
|
|
99733
100284
|
activeElement.removeAttribute('data-xs-t-2800');
|
|
99734
100285
|
} else if (device === 'sm') {
|
|
100286
|
+
activeElement.removeAttribute('data-sm');
|
|
99735
100287
|
activeElement.removeAttribute('data-sm-t');
|
|
99736
100288
|
activeElement.removeAttribute('data-sm-t-100');
|
|
99737
100289
|
activeElement.removeAttribute('data-sm-t-200');
|
|
@@ -99761,6 +100313,37 @@ class Timeline {
|
|
|
99761
100313
|
activeElement.removeAttribute('data-sm-t-2600');
|
|
99762
100314
|
activeElement.removeAttribute('data-sm-t-2700');
|
|
99763
100315
|
activeElement.removeAttribute('data-sm-t-2800');
|
|
100316
|
+
} else if (device === 'md') {
|
|
100317
|
+
activeElement.removeAttribute('data-md');
|
|
100318
|
+
activeElement.removeAttribute('data-md-t');
|
|
100319
|
+
activeElement.removeAttribute('data-md-t-100');
|
|
100320
|
+
activeElement.removeAttribute('data-md-t-200');
|
|
100321
|
+
activeElement.removeAttribute('data-md-t-300');
|
|
100322
|
+
activeElement.removeAttribute('data-md-t-400');
|
|
100323
|
+
activeElement.removeAttribute('data-md-t-500');
|
|
100324
|
+
activeElement.removeAttribute('data-md-t-600');
|
|
100325
|
+
activeElement.removeAttribute('data-md-t-700');
|
|
100326
|
+
activeElement.removeAttribute('data-md-t-800');
|
|
100327
|
+
activeElement.removeAttribute('data-md-t-900');
|
|
100328
|
+
activeElement.removeAttribute('data-md-t-1000');
|
|
100329
|
+
activeElement.removeAttribute('data-md-t-1100');
|
|
100330
|
+
activeElement.removeAttribute('data-md-t-1200');
|
|
100331
|
+
activeElement.removeAttribute('data-md-t-1300');
|
|
100332
|
+
activeElement.removeAttribute('data-md-t-1400');
|
|
100333
|
+
activeElement.removeAttribute('data-md-t-1500');
|
|
100334
|
+
activeElement.removeAttribute('data-md-t-1600');
|
|
100335
|
+
activeElement.removeAttribute('data-md-t-1700');
|
|
100336
|
+
activeElement.removeAttribute('data-md-t-1800');
|
|
100337
|
+
activeElement.removeAttribute('data-md-t-1900');
|
|
100338
|
+
activeElement.removeAttribute('data-md-t-2000');
|
|
100339
|
+
activeElement.removeAttribute('data-md-t-2100');
|
|
100340
|
+
activeElement.removeAttribute('data-md-t-2200');
|
|
100341
|
+
activeElement.removeAttribute('data-md-t-2300');
|
|
100342
|
+
activeElement.removeAttribute('data-md-t-2400');
|
|
100343
|
+
activeElement.removeAttribute('data-md-t-2500');
|
|
100344
|
+
activeElement.removeAttribute('data-md-t-2600');
|
|
100345
|
+
activeElement.removeAttribute('data-md-t-2700');
|
|
100346
|
+
activeElement.removeAttribute('data-md-t-2800');
|
|
99764
100347
|
} else {
|
|
99765
100348
|
activeElement.removeAttribute('data-t');
|
|
99766
100349
|
activeElement.removeAttribute('data-t-100');
|
|
@@ -99791,7 +100374,12 @@ class Timeline {
|
|
|
99791
100374
|
activeElement.removeAttribute('data-t-2600');
|
|
99792
100375
|
activeElement.removeAttribute('data-t-2700');
|
|
99793
100376
|
activeElement.removeAttribute('data-t-2800');
|
|
99794
|
-
}
|
|
100377
|
+
} // Cleanup from simple timeline panel
|
|
100378
|
+
|
|
100379
|
+
|
|
100380
|
+
this.builder.animateScroll.cleanup(activeElement);
|
|
100381
|
+
this.builder.animateScroll.cleanup_leave(activeElement);
|
|
100382
|
+
this.builder.animateScroll.cleanup_timeline(activeElement);
|
|
99795
100383
|
}
|
|
99796
100384
|
|
|
99797
100385
|
getDevice() {
|
|
@@ -102729,7 +103317,7 @@ class ContentBox {
|
|
|
102729
103317
|
container: '.is-container',
|
|
102730
103318
|
page: '.is-wrapper',
|
|
102731
103319
|
iframe: this.settings.iframe,
|
|
102732
|
-
imageAdjust:
|
|
103320
|
+
imageAdjust: 1,
|
|
102733
103321
|
// ContentBuilder
|
|
102734
103322
|
scriptPath: this.settings.scriptPath,
|
|
102735
103323
|
pluginPath: this.settings.pluginPath,
|
|
@@ -103444,7 +104032,7 @@ class ContentBox {
|
|
|
103444
104032
|
const modalEditBox = this.builderStuff.querySelector('.editbox');
|
|
103445
104033
|
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
103446
104034
|
|
|
103447
|
-
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
104035
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
103448
104036
|
// clear
|
|
103449
104037
|
const prevBox = this.doc.querySelector('.box-select');
|
|
103450
104038
|
if (prevBox) prevBox.classList.remove('box-select');
|
|
@@ -103494,7 +104082,7 @@ class ContentBox {
|
|
|
103494
104082
|
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
103495
104083
|
modalEditSection.style.display = '';
|
|
103496
104084
|
|
|
103497
|
-
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
104085
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
103498
104086
|
this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
|
|
103499
104087
|
|
|
103500
104088
|
const prevBox = this.doc.querySelectorAll('.box-select');
|
|
@@ -103506,6 +104094,8 @@ class ContentBox {
|
|
|
103506
104094
|
elm.classList.remove('section-select');
|
|
103507
104095
|
});
|
|
103508
104096
|
}
|
|
104097
|
+
|
|
104098
|
+
if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
|
|
103509
104099
|
}
|
|
103510
104100
|
} //---
|
|
103511
104101
|
|