@innovastudio/contentbox 1.4.59 → 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.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.esm.js +702 -167
  3. package/public/contentbox/contentbox.min.js +8 -8
  4. package/public/contentbox/lang/en.js +3 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -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>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
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
 
@@ -11815,7 +11847,10 @@ class EditBox {
11815
11847
  overlayBg.style.left = '';
11816
11848
  overlayBg.style.right = '';
11817
11849
  overlayBg.style.width = '';
11818
- overlayBg.style.height = ''; // /Reset
11850
+ overlayBg.style.height = '';
11851
+ overlayBg.removeAttribute('data-bg-xs');
11852
+ overlayBg.removeAttribute('data-bg-sm');
11853
+ overlayBg.removeAttribute('data-bg-md'); // /Reset
11819
11854
  }, btnBoxBgImage);
11820
11855
  }); // Box Background Image Adjust
11821
11856
 
@@ -11823,7 +11858,7 @@ class EditBox {
11823
11858
  if (btnBoxBgImageAdjust) btnBoxBgImageAdjust.addEventListener('click', () => {
11824
11859
  const activeBox = this.builder.activeBox;
11825
11860
  const overlayBg = activeBox.querySelector('.is-overlay-bg');
11826
- this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust);
11861
+ this.builder.editor.openImageAdjust(overlayBg, btnBoxBgImageAdjust, true);
11827
11862
  });
11828
11863
  const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
11829
11864
  chkBoxBgImageGrayscale.addEventListener('click', () => {
@@ -12143,7 +12178,10 @@ class EditBox {
12143
12178
  overlayBg.style.left = '';
12144
12179
  overlayBg.style.right = '';
12145
12180
  overlayBg.style.width = '';
12146
- overlayBg.style.height = ''; // /Reset
12181
+ overlayBg.style.height = '';
12182
+ overlayBg.removeAttribute('data-bg-xs');
12183
+ overlayBg.removeAttribute('data-bg-sm');
12184
+ overlayBg.removeAttribute('data-bg-md'); // /Reset
12147
12185
  });
12148
12186
  }
12149
12187
 
@@ -13632,7 +13670,10 @@ class EditBox {
13632
13670
  overlayBg.style.left = '';
13633
13671
  overlayBg.style.right = '';
13634
13672
  overlayBg.style.width = '';
13635
- overlayBg.style.height = ''; // /Reset
13673
+ overlayBg.style.height = '';
13674
+ overlayBg.removeAttribute('data-bg-xs');
13675
+ overlayBg.removeAttribute('data-bg-sm');
13676
+ overlayBg.removeAttribute('data-bg-md'); // /Reset
13636
13677
  //Show image tab
13637
13678
 
13638
13679
  modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
@@ -63718,9 +63759,11 @@ class Image$1 {
63718
63759
  img.setAttribute('data-filename', newname + '.' + extension);
63719
63760
  }
63720
63761
 
63721
- if (extension === 'jpg') {
63762
+ if (extension === 'jpg' || extension === 'jpeg') {
63722
63763
  img.src = this.cropper.getCroppedCanvas({
63723
- fillColor: '#fff'
63764
+ fillColor: '#fff',
63765
+ imageSmoothingEnabled: true,
63766
+ imageSmoothingQuality: 'high'
63724
63767
  }).toDataURL('image/jpeg');
63725
63768
  } else {
63726
63769
  img.src = this.cropper.getCroppedCanvas({}).toDataURL();
@@ -64309,6 +64352,15 @@ class ButtonEditor {
64309
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>
64310
64353
  </div>
64311
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>
64312
64364
  </div>
64313
64365
 
64314
64366
  <div class="flex flex-row" style="margin:15px 0 0">
@@ -64337,7 +64389,7 @@ class ButtonEditor {
64337
64389
  <div class="flex flex-row" style="margin:15px 0 0">
64338
64390
  <div class="flex flex-col" style="margin-right: 20px;">
64339
64391
  <div>
64340
- <label>${util.out('Padding X')}</label>:
64392
+ <label>${util.out('Padding Left/Right')}</label>:
64341
64393
  </div>
64342
64394
  <div class="flex flex-row" style="margin-top:5px">
64343
64395
  <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
@@ -64351,7 +64403,7 @@ class ButtonEditor {
64351
64403
  </div>
64352
64404
  </div>
64353
64405
 
64354
- <div class="flex flex-col">
64406
+ <div class="flex flex-col" style="display:none">
64355
64407
  <div>
64356
64408
  <label>${util.out('Padding Y')}</label>:
64357
64409
  </div>
@@ -64366,6 +64418,36 @@ class ButtonEditor {
64366
64418
  </div>
64367
64419
  </div>
64368
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
+
64369
64451
  <div class="flex flex-col" style="margin:15px 0 0">
64370
64452
  <div>
64371
64453
  <label>${util.out('Border Radius')}</label>:
@@ -64444,16 +64526,6 @@ class ButtonEditor {
64444
64526
 
64445
64527
  </div>
64446
64528
 
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
64529
  </div>
64458
64530
  <div id="divButtonHover" class="is-tab-content" tabindex="-1" data-group="button">
64459
64531
 
@@ -64887,6 +64959,120 @@ class ButtonEditor {
64887
64959
  dom.addClass(btn, 'on');
64888
64960
  this.builder.opts.onChange();
64889
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
+ });
64890
65076
  }); //Font size
64891
65077
 
64892
65078
  btns = buttonModal.querySelectorAll('.font-size-command');
@@ -65285,6 +65471,10 @@ class ButtonEditor {
65285
65471
  dom.removeClass(btn, 'on');
65286
65472
  btn = this.buttonModal.querySelector('.paddingy-command.on');
65287
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');
65288
65478
  btn = this.buttonModal.querySelector('.border-radius-command.on');
65289
65479
  dom.removeClass(btn, 'on');
65290
65480
  btn = this.buttonModal.querySelector('.letter-spacing-command.on');
@@ -65342,6 +65532,28 @@ class ButtonEditor {
65342
65532
  let val = item.replace('py-', '');
65343
65533
  let btn = this.buttonModal.querySelector(`.paddingy-command[data-command="${val}"]`);
65344
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');
65345
65557
  }
65346
65558
 
65347
65559
  if (item.indexOf('rounded-') === 0) {
@@ -71110,6 +71322,10 @@ class ColumnTool {
71110
71322
  <input type="range" min="0" max="100" value="0" class="image-vert-slider is-rangeslider">
71111
71323
  </div>
71112
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
+
71113
71329
  </div>
71114
71330
 
71115
71331
  </div>
@@ -71574,12 +71790,56 @@ class ColumnTool {
71574
71790
  //val: 100 - 500
71575
71791
  let val = inpImageScaleSlider.value;
71576
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
71577
71822
 
71578
- cell.style.backgroundSize = val + '%';
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');
71579
71831
  };
71580
71832
 
71581
71833
  inpImageScaleSlider.onchange = () => {
71582
- //Trigger Change event
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
+
71583
71843
  this.builder.opts.onChange();
71584
71844
  }; // Scale 2
71585
71845
 
@@ -71628,8 +71888,44 @@ class ColumnTool {
71628
71888
  //val: 0 - 100
71629
71889
  let val = inpImageHorSlider.value;
71630
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
+
71631
71921
 
71632
- cell.style.backgroundPositionX = val + '%';
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');
71633
71929
  };
71634
71930
 
71635
71931
  inpImageHorSlider.onchange = () => {
@@ -71673,8 +71969,44 @@ class ColumnTool {
71673
71969
  //val: 0 - 100
71674
71970
  let val = inpImageVertSlider.value;
71675
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
71676
72001
 
71677
- cell.style.backgroundPositionY = val + '%';
72002
+
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');
71678
72010
  };
71679
72011
 
71680
72012
  inpImageVertSlider.onchange = () => {
@@ -71703,14 +72035,23 @@ class ColumnTool {
71703
72035
  inpImageVertSlider2.onchange = () => {
71704
72036
  //Trigger Change event
71705
72037
  this.builder.opts.onChange();
71706
- };
72038
+ }; //Reset
71707
72039
 
71708
- const btnImageReset = imageAdjust2.querySelector('.image-reset');
72040
+
72041
+ const btnImageReset = imageAdjust.querySelector('.image-reset');
71709
72042
  btnImageReset.addEventListener('click', () => {
71710
72043
  this.builder.uo.saveForUndo();
71711
72044
  let cell = this.builder.elementSelected;
71712
72045
  this.resetImage(cell); //Trigger Change event
71713
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
+
71714
72055
  this.builder.opts.onChange();
71715
72056
  }); // Row Enlarge (Currently not used)
71716
72057
 
@@ -72638,8 +72979,9 @@ class ColumnTool {
72638
72979
  if (btn) btn.setAttribute('data-focus', true);
72639
72980
  }
72640
72981
 
72641
- openImageAdjust(elm, btn) {
72642
- //Current value
72982
+ openImageAdjust(elm, btn, useTarget) {
72983
+ if (useTarget) this.useTarget = true;else this.useTarget = false; //Current value
72984
+
72643
72985
  const imageAdjust = this.imageAdjust;
72644
72986
  const inpImageScaleSlider = imageAdjust.querySelector('.image-scale-slider');
72645
72987
  const inpImageHorSlider = imageAdjust.querySelector('.image-hor-slider');
@@ -72648,9 +72990,40 @@ class ColumnTool {
72648
72990
  inpImageHorSlider.value = 0;
72649
72991
  inpImageVertSlider.value = 0;
72650
72992
 
72651
- if (elm.style.backgroundSize) {
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) {
72652
73025
  let val;
72653
- let bgSize = elm.style.backgroundSize;
73026
+ let bgSize = div.style.backgroundSize;
72654
73027
 
72655
73028
  if (isNaN(parseInt(bgSize))) {
72656
73029
  val = 100;
@@ -72663,9 +73036,9 @@ class ColumnTool {
72663
73036
  }
72664
73037
  }
72665
73038
 
72666
- if (elm.style.backgroundPositionX) {
73039
+ if (div.style.backgroundPositionX) {
72667
73040
  let val;
72668
- let bgPosX = elm.style.backgroundPositionX;
73041
+ let bgPosX = div.style.backgroundPositionX;
72669
73042
 
72670
73043
  if (isNaN(parseInt(bgPosX))) {
72671
73044
  val = 0;
@@ -72678,9 +73051,9 @@ class ColumnTool {
72678
73051
  }
72679
73052
  }
72680
73053
 
72681
- if (elm.style.backgroundPositionY) {
73054
+ if (div.style.backgroundPositionY) {
72682
73055
  let val;
72683
- let bgPosY = elm.style.backgroundPositionY;
73056
+ let bgPosY = div.style.backgroundPositionY;
72684
73057
 
72685
73058
  if (isNaN(parseInt(bgPosY))) {
72686
73059
  val = 0;
@@ -72707,6 +73080,31 @@ class ColumnTool {
72707
73080
  }
72708
73081
 
72709
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) {
72710
73108
  //Current value
72711
73109
  const imageAdjust2 = this.imageAdjust2;
72712
73110
  const inpImageScaleSlider = imageAdjust2.querySelector('.image-scale-slider');
@@ -89721,11 +90119,11 @@ class ContentBuilder {
89721
90119
  this.colTool.openImagePicker(currentUrl, callback, btn);
89722
90120
  }
89723
90121
 
89724
- openImageAdjust(elm, btn) {
90122
+ openImageAdjust(elm, btn, useTarget) {
89725
90123
  if (this.opts.imageAdjust === 2) {
89726
90124
  this.colTool.openImageAdjust2(elm, btn);
89727
90125
  } else {
89728
- this.colTool.openImageAdjust(elm, btn);
90126
+ this.colTool.openImageAdjust(elm, btn, useTarget);
89729
90127
  }
89730
90128
  }
89731
90129
 
@@ -93689,6 +94087,10 @@ class AnimateScroll {
93689
94087
  .is-screen-375 .is-modal-bar > span {
93690
94088
  display: none;
93691
94089
  }
94090
+
94091
+ .page-preview:focus-within {
94092
+ z-index:100021 !important
94093
+ }
93692
94094
  </style>
93693
94095
  <div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
93694
94096
  <div class="is-modal-bar is-draggable" draggable="">
@@ -96016,6 +96418,12 @@ class AnimateScroll {
96016
96418
  // };
96017
96419
 
96018
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
+ };
96019
96427
  });
96020
96428
  const btnModalRefresh = modalPagePreview.querySelector('.is-modal-refresh');
96021
96429
  btnModalRefresh.addEventListener('click', () => {
@@ -96027,6 +96435,12 @@ class AnimateScroll {
96027
96435
  localStorage.setItem('preview-sectioncss', sectionCss);
96028
96436
  const iframe = modalPagePreview.querySelector('iframe');
96029
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
+ };
96030
96444
  }); // ---
96031
96445
  //Extend onPageContentClick
96032
96446
 
@@ -96119,6 +96533,12 @@ class AnimateScroll {
96119
96533
  modalPagePreview.classList.add(localStorage.getItem('_livepreviewscreen'));
96120
96534
  }
96121
96535
 
96536
+ iframe.onload = () => {
96537
+ iframe.contentWindow.document.addEventListener('click', () => {
96538
+ iframe.focus();
96539
+ });
96540
+ };
96541
+
96122
96542
  localStorage.setItem('_livepreview', '1');
96123
96543
  }
96124
96544
 
@@ -97838,7 +98258,7 @@ class Timeline {
97838
98258
  right: 30px !important;
97839
98259
  z-index: 10002 !important;
97840
98260
  }
97841
-
98261
+ /*
97842
98262
  @media all and (max-width: 1919px) {
97843
98263
  .is-modal.page-timeline {
97844
98264
  width: 60vw !important;
@@ -97865,10 +98285,17 @@ class Timeline {
97865
98285
  min-width: 576px;
97866
98286
  }
97867
98287
  }
98288
+ */
98289
+ @media all and (max-width: 1340px) {
98290
+ .is-modal.page-timeline {
98291
+ width: 60vw !important;
98292
+ min-width: 576px;
98293
+ }
98294
+ }
97868
98295
 
97869
98296
  .page-timeline td {
97870
98297
  font-size: 13px;
97871
- padding: 3px 0px;
98298
+ padding: 3px 1px;
97872
98299
  }
97873
98300
  .page-timeline .table-header td {
97874
98301
  font-size: 11px;
@@ -97884,6 +98311,13 @@ class Timeline {
97884
98311
  text-align: center !important;
97885
98312
  letter-spacing: 0px !important;
97886
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
+ }
97887
98321
  </style>
97888
98322
  <div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
97889
98323
  <div class="is-modal-bar is-draggable" draggable="">
@@ -97895,38 +98329,43 @@ class Timeline {
97895
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;">
97896
98330
 
97897
98331
  <div style="width:1180px;">
97898
- <table class="table-timeline" style="margin:0 15px 10px;border-collapse:initial;">
98332
+ <table class="table-timeline" style="margin:0px 15px 12px;border-collapse:collapse;">
97899
98333
  <tr class="table-header">
97900
98334
  <td style="text-align:center"> </td>
97901
- <td style="text-align:center">0</td>
97902
- <td style="text-align:center"></td>
98335
+ <td style="text-align:center">0%</td>
97903
98336
  <td style="text-align:center"></td>
97904
98337
  <td style="text-align:center"></td>
97905
98338
  <td style="text-align:center"></td>
97906
98339
  <td style="text-align:center"></td>
97907
98340
  <td style="text-align:center"></td>
97908
- <td style="text-align:center">50%</td>
97909
- <td style="text-align:center"></td>
97910
98341
  <td style="text-align:center"></td>
97911
98342
  <td style="text-align:center"></td>
98343
+ <td style="text-align:center">50%</td>
97912
98344
  <td style="text-align:center"></td>
97913
98345
  <td style="text-align:center"></td>
97914
98346
  <td style="text-align:center"></td>
97915
- <td style="text-align:center">100%</td>
97916
98347
  <td style="text-align:center"></td>
97917
98348
  <td style="text-align:center"></td>
97918
98349
  <td style="text-align:center"></td>
97919
98350
  <td style="text-align:center"></td>
98351
+ <td style="text-align:center;padding-right:9px">100%</td>
97920
98352
  <td style="text-align:center"></td>
97921
98353
  <td style="text-align:center"></td>
97922
- <td style="text-align:center">150%</td>
97923
98354
  <td style="text-align:center"></td>
98355
+ <td style="text-align:center" colspan="6">${out('Extended (for use with pinned section)')}</td>
98356
+ <!--<td style="text-align:center"></td>
97924
98357
  <td style="text-align:center"></td>
97925
98358
  <td style="text-align:center"></td>
97926
98359
  <td style="text-align:center"></td>
98360
+ <td style="text-align:center">150%</td>
98361
+ <td style="text-align:center"></td>-->
97927
98362
  <td style="text-align:center"></td>
97928
98363
  <td style="text-align:center"></td>
97929
- <td style="text-align:center">200%</td>
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>
97930
98369
  </tr>
97931
98370
  <tr>
97932
98371
  <td>
@@ -97985,40 +98424,40 @@ class Timeline {
97985
98424
  </td>
97986
98425
 
97987
98426
  <td>
97988
- <input class="inp-x-1700" placeholder="" type="text" />
98427
+ <input class="inp-x-1700 inp-extra" placeholder="" type="text" />
97989
98428
  </td>
97990
98429
  <td>
97991
- <input class="inp-x-1800" placeholder="" type="text" />
98430
+ <input class="inp-x-1800 inp-extra" placeholder="" type="text" />
97992
98431
  </td>
97993
98432
  <td>
97994
- <input class="inp-x-1900" placeholder="" type="text" />
98433
+ <input class="inp-x-1900 inp-extra" placeholder="" type="text" />
97995
98434
  </td>
97996
98435
  <td>
97997
- <input class="inp-x-2000" placeholder="" type="text" />
98436
+ <input class="inp-x-2000 inp-extra" placeholder="" type="text" />
97998
98437
  </td>
97999
98438
  <td>
98000
- <input class="inp-x-2100" placeholder="" type="text" />
98439
+ <input class="inp-x-2100 inp-extra" placeholder="" type="text" />
98001
98440
  </td>
98002
98441
  <td>
98003
- <input class="inp-x-2200" placeholder="" type="text" />
98442
+ <input class="inp-x-2200 inp-extra" placeholder="" type="text" />
98004
98443
  </td>
98005
98444
  <td>
98006
- <input class="inp-x-2300" placeholder="" type="text" />
98445
+ <input class="inp-x-2300 inp-extra" placeholder="" type="text" />
98007
98446
  </td>
98008
98447
  <td>
98009
- <input class="inp-x-2400" placeholder="" type="text" />
98448
+ <input class="inp-x-2400 inp-extra" placeholder="" type="text" />
98010
98449
  </td>
98011
98450
  <td>
98012
- <input class="inp-x-2500" placeholder="" type="text" />
98451
+ <input class="inp-x-2500 inp-extra" placeholder="" type="text" />
98013
98452
  </td>
98014
98453
  <td>
98015
- <input class="inp-x-2600" placeholder="" type="text" />
98454
+ <input class="inp-x-2600 inp-extra" placeholder="" type="text" />
98016
98455
  </td>
98017
98456
  <td>
98018
- <input class="inp-x-2700" placeholder="" type="text" />
98457
+ <input class="inp-x-2700 inp-extra" placeholder="" type="text" />
98019
98458
  </td>
98020
98459
  <td>
98021
- <input class="inp-x-2800" placeholder="" type="text" />
98460
+ <input class="inp-x-2800 inp-extra" placeholder="" type="text" />
98022
98461
  </td>
98023
98462
  </tr>
98024
98463
  <tr>
@@ -98078,40 +98517,40 @@ class Timeline {
98078
98517
  </td>
98079
98518
 
98080
98519
  <td>
98081
- <input class="inp-y-1700" placeholder="" type="text" />
98520
+ <input class="inp-y-1700 inp-extra" placeholder="" type="text" />
98082
98521
  </td>
98083
98522
  <td>
98084
- <input class="inp-y-1800" placeholder="" type="text" />
98523
+ <input class="inp-y-1800 inp-extra" placeholder="" type="text" />
98085
98524
  </td>
98086
98525
  <td>
98087
- <input class="inp-y-1900" placeholder="" type="text" />
98526
+ <input class="inp-y-1900 inp-extra" placeholder="" type="text" />
98088
98527
  </td>
98089
98528
  <td>
98090
- <input class="inp-y-2000" placeholder="" type="text" />
98529
+ <input class="inp-y-2000 inp-extra" placeholder="" type="text" />
98091
98530
  </td>
98092
98531
  <td>
98093
- <input class="inp-y-2100" placeholder="" type="text" />
98532
+ <input class="inp-y-2100 inp-extra" placeholder="" type="text" />
98094
98533
  </td>
98095
98534
  <td>
98096
- <input class="inp-y-2200" placeholder="" type="text" />
98535
+ <input class="inp-y-2200 inp-extra" placeholder="" type="text" />
98097
98536
  </td>
98098
98537
  <td>
98099
- <input class="inp-y-2300" placeholder="" type="text" />
98538
+ <input class="inp-y-2300 inp-extra" placeholder="" type="text" />
98100
98539
  </td>
98101
98540
  <td>
98102
- <input class="inp-y-2400" placeholder="" type="text" />
98541
+ <input class="inp-y-2400 inp-extra" placeholder="" type="text" />
98103
98542
  </td>
98104
98543
  <td>
98105
- <input class="inp-y-2500" placeholder="" type="text" />
98544
+ <input class="inp-y-2500 inp-extra" placeholder="" type="text" />
98106
98545
  </td>
98107
98546
  <td>
98108
- <input class="inp-y-2600" placeholder="" type="text" />
98547
+ <input class="inp-y-2600 inp-extra" placeholder="" type="text" />
98109
98548
  </td>
98110
98549
  <td>
98111
- <input class="inp-y-2700" placeholder="" type="text" />
98550
+ <input class="inp-y-2700 inp-extra" placeholder="" type="text" />
98112
98551
  </td>
98113
98552
  <td>
98114
- <input class="inp-y-2800" placeholder="" type="text" />
98553
+ <input class="inp-y-2800 inp-extra" placeholder="" type="text" />
98115
98554
  </td>
98116
98555
  </tr>
98117
98556
  <tr>
@@ -98171,40 +98610,40 @@ class Timeline {
98171
98610
  </td>
98172
98611
 
98173
98612
  <td>
98174
- <input class="inp-sc-1700" placeholder="" type="text" />
98613
+ <input class="inp-sc-1700 inp-extra" placeholder="" type="text" />
98175
98614
  </td>
98176
98615
  <td>
98177
- <input class="inp-sc-1800" placeholder="" type="text" />
98616
+ <input class="inp-sc-1800 inp-extra" placeholder="" type="text" />
98178
98617
  </td>
98179
98618
  <td>
98180
- <input class="inp-sc-1900" placeholder="" type="text" />
98619
+ <input class="inp-sc-1900 inp-extra" placeholder="" type="text" />
98181
98620
  </td>
98182
98621
  <td>
98183
- <input class="inp-sc-2000" placeholder="" type="text" />
98622
+ <input class="inp-sc-2000 inp-extra" placeholder="" type="text" />
98184
98623
  </td>
98185
98624
  <td>
98186
- <input class="inp-sc-2100" placeholder="" type="text" />
98625
+ <input class="inp-sc-2100 inp-extra" placeholder="" type="text" />
98187
98626
  </td>
98188
98627
  <td>
98189
- <input class="inp-sc-2200" placeholder="" type="text" />
98628
+ <input class="inp-sc-2200 inp-extra" placeholder="" type="text" />
98190
98629
  </td>
98191
98630
  <td>
98192
- <input class="inp-sc-2300" placeholder="" type="text" />
98631
+ <input class="inp-sc-2300 inp-extra" placeholder="" type="text" />
98193
98632
  </td>
98194
98633
  <td>
98195
- <input class="inp-sc-2400" placeholder="" type="text" />
98634
+ <input class="inp-sc-2400 inp-extra" placeholder="" type="text" />
98196
98635
  </td>
98197
98636
  <td>
98198
- <input class="inp-sc-2500" placeholder="" type="text" />
98637
+ <input class="inp-sc-2500 inp-extra" placeholder="" type="text" />
98199
98638
  </td>
98200
98639
  <td>
98201
- <input class="inp-sc-2600" placeholder="" type="text" />
98640
+ <input class="inp-sc-2600 inp-extra" placeholder="" type="text" />
98202
98641
  </td>
98203
98642
  <td>
98204
- <input class="inp-sc-2700" placeholder="" type="text" />
98643
+ <input class="inp-sc-2700 inp-extra" placeholder="" type="text" />
98205
98644
  </td>
98206
98645
  <td>
98207
- <input class="inp-sc-2800" placeholder="" type="text" />
98646
+ <input class="inp-sc-2800 inp-extra" placeholder="" type="text" />
98208
98647
  </td>
98209
98648
  </tr>
98210
98649
  <tr>
@@ -98264,40 +98703,40 @@ class Timeline {
98264
98703
  </td>
98265
98704
 
98266
98705
  <td>
98267
- <input class="inp-rt-1700" placeholder="" type="text" />
98706
+ <input class="inp-rt-1700 inp-extra" placeholder="" type="text" />
98268
98707
  </td>
98269
98708
  <td>
98270
- <input class="inp-rt-1800" placeholder="" type="text" />
98709
+ <input class="inp-rt-1800 inp-extra" placeholder="" type="text" />
98271
98710
  </td>
98272
98711
  <td>
98273
- <input class="inp-rt-1900" placeholder="" type="text" />
98712
+ <input class="inp-rt-1900 inp-extra" placeholder="" type="text" />
98274
98713
  </td>
98275
98714
  <td>
98276
- <input class="inp-rt-2000" placeholder="" type="text" />
98715
+ <input class="inp-rt-2000 inp-extra" placeholder="" type="text" />
98277
98716
  </td>
98278
98717
  <td>
98279
- <input class="inp-rt-2100" placeholder="" type="text" />
98718
+ <input class="inp-rt-2100 inp-extra" placeholder="" type="text" />
98280
98719
  </td>
98281
98720
  <td>
98282
- <input class="inp-rt-2200" placeholder="" type="text" />
98721
+ <input class="inp-rt-2200 inp-extra" placeholder="" type="text" />
98283
98722
  </td>
98284
98723
  <td>
98285
- <input class="inp-rt-2300" placeholder="" type="text" />
98724
+ <input class="inp-rt-2300 inp-extra" placeholder="" type="text" />
98286
98725
  </td>
98287
98726
  <td>
98288
- <input class="inp-rt-2400" placeholder="" type="text" />
98727
+ <input class="inp-rt-2400 inp-extra" placeholder="" type="text" />
98289
98728
  </td>
98290
98729
  <td>
98291
- <input class="inp-rt-2500" placeholder="" type="text" />
98730
+ <input class="inp-rt-2500 inp-extra" placeholder="" type="text" />
98292
98731
  </td>
98293
98732
  <td>
98294
- <input class="inp-rt-2600" placeholder="" type="text" />
98733
+ <input class="inp-rt-2600 inp-extra" placeholder="" type="text" />
98295
98734
  </td>
98296
98735
  <td>
98297
- <input class="inp-rt-2700" placeholder="" type="text" />
98736
+ <input class="inp-rt-2700 inp-extra" placeholder="" type="text" />
98298
98737
  </td>
98299
98738
  <td>
98300
- <input class="inp-rt-2800" placeholder="" type="text" />
98739
+ <input class="inp-rt-2800 inp-extra" placeholder="" type="text" />
98301
98740
  </td>
98302
98741
  </tr>
98303
98742
  <tr>
@@ -98357,93 +98796,78 @@ class Timeline {
98357
98796
  </td>
98358
98797
 
98359
98798
  <td>
98360
- <input class="inp-op-1700" placeholder="" type="text" />
98799
+ <input class="inp-op-1700 inp-extra" placeholder="" type="text" />
98361
98800
  </td>
98362
98801
  <td>
98363
- <input class="inp-op-1800" placeholder="" type="text" />
98802
+ <input class="inp-op-1800 inp-extra" placeholder="" type="text" />
98364
98803
  </td>
98365
98804
  <td>
98366
- <input class="inp-op-1900" placeholder="" type="text" />
98805
+ <input class="inp-op-1900 inp-extra" placeholder="" type="text" />
98367
98806
  </td>
98368
98807
  <td>
98369
- <input class="inp-op-2000" placeholder="" type="text" />
98808
+ <input class="inp-op-2000 inp-extra" placeholder="" type="text" />
98370
98809
  </td>
98371
98810
  <td>
98372
- <input class="inp-op-2100" placeholder="" type="text" />
98811
+ <input class="inp-op-2100 inp-extra" placeholder="" type="text" />
98373
98812
  </td>
98374
98813
  <td>
98375
- <input class="inp-op-2200" placeholder="" type="text" />
98814
+ <input class="inp-op-2200 inp-extra" placeholder="" type="text" />
98376
98815
  </td>
98377
98816
  <td>
98378
- <input class="inp-op-2300" placeholder="" type="text" />
98817
+ <input class="inp-op-2300 inp-extra" placeholder="" type="text" />
98379
98818
  </td>
98380
98819
  <td>
98381
- <input class="inp-op-2400" placeholder="" type="text" />
98820
+ <input class="inp-op-2400 inp-extra" placeholder="" type="text" />
98382
98821
  </td>
98383
98822
  <td>
98384
- <input class="inp-op-2500" placeholder="" type="text" />
98823
+ <input class="inp-op-2500 inp-extra" placeholder="" type="text" />
98385
98824
  </td>
98386
98825
  <td>
98387
- <input class="inp-op-2600" placeholder="" type="text" />
98826
+ <input class="inp-op-2600 inp-extra" placeholder="" type="text" />
98388
98827
  </td>
98389
98828
  <td>
98390
- <input class="inp-op-2700" placeholder="" type="text" />
98829
+ <input class="inp-op-2700 inp-extra" placeholder="" type="text" />
98391
98830
  </td>
98392
98831
  <td>
98393
- <input class="inp-op-2800" placeholder="" type="text" />
98832
+ <input class="inp-op-2800 inp-extra" placeholder="" type="text" />
98394
98833
  </td>
98395
98834
  </tr>
98396
98835
  </table>
98397
- <div class="flex-wrap" style="padding: 3px 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
98836
+ <div class="flex-wrap" style="padding: 3px 5px 15px 18px;box-sizing: border-box;width: 100%;justify-content: space-between;">
98398
98837
 
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>
98838
+ <div class="flex-wrap" style="width:470px">
98426
98839
 
98427
- <div class="flex-wrap">
98428
- <label for="chkPinSection2" style="margin:0;display:flex;">
98429
- <input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0">
98430
- <span>${out('Pin Section')}</span>.
98431
- </label>
98432
- </div>
98433
- <div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
98434
- <div class="flex-wrap">
98435
- <button title="0" class="cmd-pin-space" data-value="md" style="padding-left:15px;padding-right:15px;height:34px;">${out('MD')}</button>
98436
- <button title="20" class="cmd-pin-space" data-value="lg" style="padding-left:15px;padding-right:15px;height:34px;">${out('LG')}</button>
98437
- <button title="20" class="cmd-pin-space" data-value="xl" style="padding-left:15px;padding-right:15px;height:34px;">${out('XL')}</button>
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>
98438
98870
  </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
98871
  </div>
98448
98872
  </div>
98449
98873
 
@@ -98470,14 +98894,60 @@ class Timeline {
98470
98894
  </div>
98471
98895
  </div>
98472
98896
 
98473
- <div class="flex-wrap" style="margin-right:10px">
98474
- <button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
98475
- <button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
98476
- </div>
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>
98477
98909
 
98478
- <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;">
98479
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
98480
- </button>
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">
98924
+ <div class="flex-wrap" style="margin-right:15px">
98925
+ <select class="input-target">
98926
+ <option value="element">${out('Element')}</option>
98927
+ <option value="column">${out('Column')}</option>
98928
+ <option value="row">${out('Row')}</option>
98929
+ <option value="container">${out('Container')}</option>
98930
+ <option value="overlay">${out('Overlay')}</option>
98931
+ <option value="bg">${out('Background')}</option>
98932
+ <option value="box">${out('Box')}</option>
98933
+ <option value="section">${out('Section')}</option>
98934
+ </select>
98935
+ </div>
98936
+ <div class="flex-wrap">
98937
+ <button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
98938
+ <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
98939
+ </button>
98940
+ <!--<button title="${out('Laptop/Tablet')}" class="input-device" data-value="md" style="width:40px;height:34px;">
98941
+ <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>
98942
+ </button>-->
98943
+ <button title="${out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:34px;">
98944
+ <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-tablet"></use></svg>
98945
+ </button>
98946
+ <button title="${out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:34px;">
98947
+ <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
98948
+ </button>
98949
+ </div>
98950
+ </div>
98481
98951
  </div>
98482
98952
 
98483
98953
  </div>
@@ -98780,14 +99250,30 @@ class Timeline {
98780
99250
  activeElement.style.transform = '';
98781
99251
  activeElement.style.transition = '';
98782
99252
  activeElement.style.opacity = '';
98783
- this.read();
99253
+ activeElement.style.transformOrigin = '';
99254
+ this.builder.animateScroll.refreshPage(); // Stable alternative to skrollrr.refresh()
98784
99255
 
98785
- if (this.builder.win.skrollrr) {
98786
- this.builder.win.skrollrr.refresh();
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');
98787
99273
  } //Trigger Change event
98788
99274
 
98789
99275
 
98790
- this.builder.settings.onChange();
99276
+ this.builder.onChange();
98791
99277
  }); //Extend onPageContentClick
98792
99278
 
98793
99279
  let old = this.builder.settings.onPageContentClick;
@@ -99046,6 +99532,14 @@ class Timeline {
99046
99532
  let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="md"]');
99047
99533
  btn.classList.add('on');
99048
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
+ }
99049
99543
  }
99050
99544
 
99051
99545
  const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
@@ -99071,6 +99565,7 @@ class Timeline {
99071
99565
 
99072
99566
  if (activeElement.style.transformOrigin) {
99073
99567
  let origin = activeElement.style.transformOrigin;
99568
+ if (origin === 'center center') origin = 'center';
99074
99569
  const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
99075
99570
  btnAnimOrigins.forEach(btn => {
99076
99571
  if (origin === btn.getAttribute('data-value')) {
@@ -99702,6 +100197,7 @@ class Timeline {
99702
100197
  let device = this.getDevice();
99703
100198
 
99704
100199
  if (device === 'xs') {
100200
+ activeElement.removeAttribute('data-xs');
99705
100201
  activeElement.removeAttribute('data-xs-t');
99706
100202
  activeElement.removeAttribute('data-xs-t-100');
99707
100203
  activeElement.removeAttribute('data-xs-t-200');
@@ -99732,6 +100228,7 @@ class Timeline {
99732
100228
  activeElement.removeAttribute('data-xs-t-2700');
99733
100229
  activeElement.removeAttribute('data-xs-t-2800');
99734
100230
  } else if (device === 'sm') {
100231
+ activeElement.removeAttribute('data-sm');
99735
100232
  activeElement.removeAttribute('data-sm-t');
99736
100233
  activeElement.removeAttribute('data-sm-t-100');
99737
100234
  activeElement.removeAttribute('data-sm-t-200');
@@ -99761,6 +100258,37 @@ class Timeline {
99761
100258
  activeElement.removeAttribute('data-sm-t-2600');
99762
100259
  activeElement.removeAttribute('data-sm-t-2700');
99763
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');
99764
100292
  } else {
99765
100293
  activeElement.removeAttribute('data-t');
99766
100294
  activeElement.removeAttribute('data-t-100');
@@ -99791,7 +100319,12 @@ class Timeline {
99791
100319
  activeElement.removeAttribute('data-t-2600');
99792
100320
  activeElement.removeAttribute('data-t-2700');
99793
100321
  activeElement.removeAttribute('data-t-2800');
99794
- }
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);
99795
100328
  }
99796
100329
 
99797
100330
  getDevice() {
@@ -102729,7 +103262,7 @@ class ContentBox {
102729
103262
  container: '.is-container',
102730
103263
  page: '.is-wrapper',
102731
103264
  iframe: this.settings.iframe,
102732
- imageAdjust: 2,
103265
+ imageAdjust: 1,
102733
103266
  // ContentBuilder
102734
103267
  scriptPath: this.settings.scriptPath,
102735
103268
  pluginPath: this.settings.pluginPath,
@@ -103444,7 +103977,7 @@ class ContentBox {
103444
103977
  const modalEditBox = this.builderStuff.querySelector('.editbox');
103445
103978
  const modalEditSection = this.builderStuff.querySelector('.editsection');
103446
103979
 
103447
- 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')) {
103448
103981
  // clear
103449
103982
  const prevBox = this.doc.querySelector('.box-select');
103450
103983
  if (prevBox) prevBox.classList.remove('box-select');
@@ -103494,7 +104027,7 @@ class ContentBox {
103494
104027
  const modalEditSection = this.builderStuff.querySelector('.editsection');
103495
104028
  modalEditSection.style.display = '';
103496
104029
 
103497
- 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')) {
103498
104031
  this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
103499
104032
 
103500
104033
  const prevBox = this.doc.querySelectorAll('.box-select');
@@ -103506,6 +104039,8 @@ class ContentBox {
103506
104039
  elm.classList.remove('section-select');
103507
104040
  });
103508
104041
  }
104042
+
104043
+ if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
103509
104044
  }
103510
104045
  } //---
103511
104046