@innovastudio/contentbox 1.4.37 → 1.4.38

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 (5) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.css +132 -52
  3. package/public/contentbox/contentbox.esm.js +2087 -202
  4. package/public/contentbox/contentbox.min.js +4 -4
  5. package/public/contentbox/lang/en.js +17 -6
package/public/contentbox/contentbox.esm.js CHANGED
@@ -430,6 +430,34 @@ const prepareSvgIcons$1 = builder => {
430
430
  <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
431
431
  </symbol>
432
432
 
433
+ <symbol id="icon-window-maximize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
434
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
435
+ <rect x="3" y="16" width="5" height="5" rx="1"></rect>
436
+ <path d="M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6"></path>
437
+ <path d="M12 8h4v4"></path>
438
+ <path d="M16 8l-5 5"></path>
439
+ </symbol>
440
+
441
+ <symbol id="icon-app-window" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
442
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
443
+ <rect x="3" y="5" width="18" height="14" rx="2"></rect>
444
+ <path d="M6 8h.01"></path>
445
+ <path d="M9 8h.01"></path>
446
+ </symbol>
447
+
448
+ <symbol id="icon-settings" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
449
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
450
+ <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
451
+ <circle cx="12" cy="12" r="3"></circle>
452
+ </symbol>
453
+
454
+ <symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
455
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
456
+ <rect x="13" y="8" width="8" height="12" rx="1"></rect>
457
+ <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
458
+ <line x1="16" y1="9" x2="18" y2="9"></line>
459
+ </symbol>
460
+
433
461
  </defs>
434
462
  </svg>`;
435
463
  const builderStuff = builder.builderStuff;
@@ -637,7 +665,43 @@ class SideBar {
637
665
  */
638
666
 
639
667
 
668
+ html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10004;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
669
+ <div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">
670
+ <div class="is-label"><span>${out('Zoom')}</span>:</div>
671
+ <div style="padding-top:4px">
672
+ <input type="range" min="50" max="100" value="1" class="page-zoom-slider is-rangeslider" style="margin:0 !important;">
673
+ </div>
674
+
675
+ <div style="padding-top:15px;width:100%;">
676
+ <div class="is-label"><span>${out('Enable Animation')}</span>:</div>
677
+ <div style="padding-top: 5px;">
678
+ <label class="switch"><input class="cmd-live-preview" type="checkbox" checked=""><span class="slider round"></span></label>
679
+ </div>
680
+ </div>
681
+
682
+ <div style="padding-top:20px;width:100%;">
683
+ <button type="button" title="${out('Live Preview')}" class="cmd-open-preview-window" style="width:100%">
684
+ <svg class="is-icon-flex"><use xlink:href="#icon-app-window"></use></svg>
685
+ <span style="margin-left:7px">${out('Live Preview')}</span>
686
+ </button>
687
+ </div>
688
+ </div>
689
+ </div>`;
640
690
  dom$l.appendHtml(builderStuff, html);
691
+ this.pageQuickSettings = builderStuff.querySelector('.page-quick-settings');
692
+ this.pageZoomSlider = this.pageQuickSettings.querySelector('.page-zoom-slider');
693
+
694
+ this.pageZoomSlider.onfocus = () => {
695
+ this.builder.editor.rte.zoomStart();
696
+ };
697
+
698
+ this.pageZoomSlider.oninput = () => {
699
+ this.builder.editor.rte.zoom(this.pageZoomSlider);
700
+ };
701
+
702
+ this.pageZoomSlider.onchange = () => {
703
+ this.builder.editor.rte.zoomEnd(this.pageZoomSlider);
704
+ };
641
705
 
642
706
  if (this.builder.useSidebar) {
643
707
  // jQuery('body').addClass('sidebar-active');
@@ -852,6 +916,25 @@ class SideBar {
852
916
  } //constructor
853
917
 
854
918
 
919
+ openSettings(e) {
920
+ const pop = this.pageQuickSettings;
921
+ let btn;
922
+ if (e) btn = e.target;else btn = document.activeElement;
923
+ this.builder.btnSettings = btn;
924
+ this.builder.editor.util.showPop(pop, false, btn);
925
+ let top, left;
926
+ top = btn.getBoundingClientRect().top;
927
+ left = btn.getBoundingClientRect().left;
928
+ pop.style.top = top + 4 + 'px';
929
+ pop.style.left = left + 68 + 'px';
930
+ this.pageZoomSlider.value = this.builder.editor.zoom * 100;
931
+ }
932
+
933
+ reOpenSettings() {
934
+ const pop = this.pageQuickSettings;
935
+ this.builder.editor.util.showPop(pop, false, this.builder.btnSettings);
936
+ }
937
+
855
938
  closeSidebar() {
856
939
  const builderStuff = this.builderStuff; // Close all opened sidebar
857
940
 
@@ -3835,10 +3918,18 @@ class EditSection {
3835
3918
  <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
3836
3919
  </button>
3837
3920
  </div>
3838
- <div style="padding:0;width:100%;">
3921
+ <div style="padding:0 0 10px;width:100%;">
3839
3922
 
3840
- ` ) + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
3841
- html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
3923
+ ` ) + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '<a id="tabSectionMore" title="' + out('More') + '" href="" data-content="divSectionMore">' + out('More') + '</a>' + '</div>';
3924
+ html += `
3925
+ <div id="divSectionMore" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">
3926
+
3927
+ <label for="inpSectionId" style="padding:20px 0 3px;">${out('Add Section ID')}:</label>
3928
+ <div>
3929
+ <input id="inpSectionId" class="input-section-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">
3930
+ </div>
3931
+ </div>
3932
+ ` + '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
3842
3933
  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>';
3843
3934
  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>' +
3844
3935
  '<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>';
@@ -3889,7 +3980,14 @@ class EditSection {
3889
3980
  // }, 300);
3890
3981
 
3891
3982
  this.builder.activeSection = null;
3892
- this.builder.refreshPage();
3983
+ this.builder.activeBox = null;
3984
+ this.builder.editor.inspectedElement = null;
3985
+ this.builder.editor.activeElement = null;
3986
+ this.builder.editor.activeCol = null;
3987
+ this.builder.wrapperEl.classList.remove('hard-select');
3988
+ this.builder.wrapperEl.classList.remove('is-container-edit');
3989
+ this.builder.wrapperEl.classList.remove('is-clean-edit');
3990
+ this.builder.refreshAnim();
3893
3991
  });
3894
3992
  const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
3895
3993
  btnSectionUp.addEventListener('click', () => {
@@ -3931,7 +4029,7 @@ class EditSection {
3931
4029
 
3932
4030
  this.builder.settings.onChange();
3933
4031
  setTimeout(() => {
3934
- this.builder.refreshPage();
4032
+ this.builder.refreshAnim();
3935
4033
  }, 600);
3936
4034
  });
3937
4035
  const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
@@ -4000,7 +4098,7 @@ class EditSection {
4000
4098
 
4001
4099
  this.builder.settings.onChange();
4002
4100
  setTimeout(() => {
4003
- this.builder.refreshPage();
4101
+ this.builder.refreshAnim();
4004
4102
  }, 300);
4005
4103
  });
4006
4104
  });
@@ -4145,11 +4243,48 @@ class EditSection {
4145
4243
  this.builder.onChange();
4146
4244
  });
4147
4245
  });
4246
+ let inpSectionId = modalEditSection.querySelector('.input-section-id');
4247
+ inpSectionId.addEventListener('change', () => {
4248
+ this.builder.editor.saveForUndo();
4249
+ const section = this.builder.activeSection;
4250
+ const info = section.querySelector('.is-section-info');
4251
+
4252
+ if (inpSectionId.value !== '') {
4253
+ section.setAttribute('id', inpSectionId.value);
4254
+ info.innerHTML = `<div>#${inpSectionId.value}</div>`;
4255
+ } else {
4256
+ section.removeAttribute('id');
4257
+ info.innerHTML = '';
4258
+ } //Trigger Change event
4259
+
4260
+
4261
+ this.builder.onChange();
4262
+ });
4263
+ inpSectionId.addEventListener('keyup', () => {
4264
+ const section = this.builder.activeSection;
4265
+ const info = section.querySelector('.is-section-info');
4266
+
4267
+ if (inpSectionId.value !== '') {
4268
+ section.setAttribute('id', inpSectionId.value);
4269
+ info.innerHTML = `<div>#${inpSectionId.value}</div>`;
4270
+ } else {
4271
+ section.removeAttribute('id');
4272
+ info.innerHTML = '';
4273
+ }
4274
+ });
4148
4275
  }
4149
4276
 
4150
4277
  read() {
4151
4278
  const activeSection = this.builder.activeSection;
4152
- const modalEditSection = this.modalEditSection; // Clean old unused is-bg-light/dark
4279
+ const modalEditSection = this.modalEditSection;
4280
+ let inpSectionId = modalEditSection.querySelector('.input-section-id');
4281
+ inpSectionId.value = '';
4282
+ const sectionId = activeSection.getAttribute('id');
4283
+
4284
+ if (sectionId) {
4285
+ inpSectionId.value = sectionId;
4286
+ } // Clean old unused is-bg-light/dark
4287
+
4153
4288
 
4154
4289
  let elms = this.builder.activeSection.querySelectorAll('.is-bg-light');
4155
4290
  elms.forEach(elm => {
@@ -4337,8 +4472,8 @@ class EditSection {
4337
4472
 
4338
4473
  edit() {
4339
4474
  this.builder.wrapperEl.classList.add('hard-select');
4340
- this.builder.activeBox.classList.add('box-select');
4341
- this.builder.activeSection.classList.add('section-select');
4475
+ if (this.builder.activeBox) this.builder.activeBox.classList.add('box-select');
4476
+ if (this.builder.activeSection) this.builder.activeSection.classList.add('section-select');
4342
4477
  const modalEditSection = this.modalEditSection;
4343
4478
  modalEditSection.style.display = 'flex'; // const elms = this.builder.doc.querySelectorAll('.section-active');
4344
4479
  // elms.forEach(elm=>{
@@ -12617,8 +12752,8 @@ class EditBox {
12617
12752
 
12618
12753
  edit() {
12619
12754
  this.builder.wrapperEl.classList.add('hard-select');
12620
- this.builder.activeBox.classList.add('box-select');
12621
- this.builder.activeSection.classList.add('section-select');
12755
+ if (this.builder.activeBox) this.builder.activeBox.classList.add('box-select');
12756
+ if (this.builder.activeSection) this.builder.activeSection.classList.add('section-select');
12622
12757
  const modalEditBox = this.modalEditBox;
12623
12758
  this.targetBox = null;
12624
12759
  this.builder.sidebar.closeSidebar();
@@ -18036,19 +18171,18 @@ class Util {
18036
18171
  cols.forEach(col => {
18037
18172
  if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return; // Bootstrap stuff
18038
18173
 
18039
- col.classList.forEach(item => {
18040
- if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
18041
- colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
18042
- } else if (item.indexOf('col-xs-') !== -1) {
18043
- colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
18044
- } else if (item.indexOf('col-lg-') !== -1) {
18045
- colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
18046
- } else if (item.indexOf('col-xl-') !== -1) {
18047
- colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
18048
- } else if (item.indexOf('col-xxl-') !== -1) {
18049
- colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
18050
- }
18051
- });
18174
+ if (col.className.indexOf('col-md-') !== -1) ; else if (col.className.indexOf('col-sm-') !== -1) {
18175
+ colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
18176
+ } else if (col.className.indexOf('col-xs-') !== -1) {
18177
+ colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
18178
+ } else if (col.className.indexOf('col-lg-') !== -1) {
18179
+ colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
18180
+ } else if (col.className.indexOf('col-xl-') !== -1) {
18181
+ colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
18182
+ } else if (col.className.indexOf('col-xxl-') !== -1) {
18183
+ colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
18184
+ }
18185
+
18052
18186
  n++;
18053
18187
 
18054
18188
  for (var i = 0; i <= colClass.length - 1; i++) {
@@ -28694,12 +28828,9 @@ class HtmlUtil {
28694
28828
  elms = tmp.querySelectorAll('[data-scroll]');
28695
28829
  dom$h.removeAttributes(elms, 'data-scroll');
28696
28830
  elms = tmp.querySelectorAll('[data-scroll-once]');
28697
- dom$h.removeAttributes(elms, 'data-scroll-once');
28698
- elms = tmp.querySelectorAll(`[data-top-bottom],[data-top],[data-50-top],[data-100-top],
28699
- [data-center-bottom],[data-center],[data-center-top],[data--400-bottom],[data--300-bottom],
28700
- [data--200-bottom],[data--150-bottom],[data--100-bottom],[data--50-bottom],
28701
- [data-bottom],[data-50-bottom],[data-100-bottom],[data-150-bottom],[data-200-bottom],
28702
- [data-300-bottom],[data-400-bottom],[data-bottom-top]`);
28831
+ dom$h.removeAttributes(elms, 'data-scroll-once'); // cleaning
28832
+
28833
+ elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]');
28703
28834
  Array.prototype.forEach.call(elms, elm => {
28704
28835
  elm.style.transition = '';
28705
28836
  elm.style.transform = '';
@@ -28726,6 +28857,9 @@ class HtmlUtil {
28726
28857
  dom$h.removeClass(elm, 'zoomIn');
28727
28858
  elm.style.animationDelay = '';
28728
28859
  elm.style.transitionDelay = '';
28860
+ elm.style.transitionDuration = '';
28861
+ elm.style.transitionTimingFunction = '';
28862
+ elm.style.transitionProperty = '';
28729
28863
  });
28730
28864
  let emptystyles = tmp.querySelectorAll('[style=""]');
28731
28865
  Array.prototype.forEach.call(emptystyles, emptystyle => {
@@ -28756,6 +28890,8 @@ class HtmlUtil {
28756
28890
  dom$h.removeElements(elms);
28757
28891
  elms = tmp.querySelectorAll('.is-box-tool');
28758
28892
  dom$h.removeElements(elms);
28893
+ elms = tmp.querySelectorAll('.is-section-info');
28894
+ dom$h.removeElements(elms);
28759
28895
  var html_content = '';
28760
28896
  var html_footer = '';
28761
28897
  var html_others = ''; // Apply behavior on each row
@@ -31219,19 +31355,17 @@ class Grid {
31219
31355
 
31220
31356
  if (rowClass !== '' && colClass.length > 0) {
31221
31357
  // Bootstrap stuff
31222
- cell.classList.forEach(item => {
31223
- if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
31224
- colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
31225
- } else if (item.indexOf('col-xs-') !== -1) {
31226
- colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
31227
- } else if (item.indexOf('col-lg-') !== -1) {
31228
- colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
31229
- } else if (item.indexOf('col-xl-') !== -1) {
31230
- colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
31231
- } else if (item.indexOf('col-xxl-') !== -1) {
31232
- colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
31233
- }
31234
- });
31358
+ if (cell.className.indexOf('col-md-') !== -1) ; else if (cell.className.indexOf('col-sm-') !== -1) {
31359
+ colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
31360
+ } else if (cell.className.indexOf('col-xs-') !== -1) {
31361
+ colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
31362
+ } else if (cell.className.indexOf('col-lg-') !== -1) {
31363
+ colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
31364
+ } else if (cell.className.indexOf('col-xl-') !== -1) {
31365
+ colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
31366
+ } else if (cell.className.indexOf('col-xxl-') !== -1) {
31367
+ colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
31368
+ }
31235
31369
 
31236
31370
  if (!dom.hasClass(cell, colClass[11])) {
31237
31371
  //if not column full
@@ -31395,19 +31529,17 @@ class Grid {
31395
31529
 
31396
31530
  if (rowClass !== '' && colClass.length > 0) {
31397
31531
  // Bootstrap stuff
31398
- cell.classList.forEach(item => {
31399
- if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
31400
- colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
31401
- } else if (item.indexOf('col-xs-') !== -1) {
31402
- colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
31403
- } else if (item.indexOf('col-lg-') !== -1) {
31404
- colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
31405
- } else if (item.indexOf('col-xl-') !== -1) {
31406
- colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
31407
- } else if (item.indexOf('col-xxl-') !== -1) {
31408
- colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
31409
- }
31410
- });
31532
+ if (cell.className.indexOf('col-md-') !== -1) ; else if (cell.className.indexOf('col-sm-') !== -1) {
31533
+ colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
31534
+ } else if (cell.className.indexOf('col-xs-') !== -1) {
31535
+ colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
31536
+ } else if (cell.className.indexOf('col-lg-') !== -1) {
31537
+ colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
31538
+ } else if (cell.className.indexOf('col-xl-') !== -1) {
31539
+ colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
31540
+ } else if (cell.className.indexOf('col-xxl-') !== -1) {
31541
+ colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
31542
+ }
31411
31543
 
31412
31544
  if (!dom.hasClass(cell, colClass[11])) {
31413
31545
  //if not column full
@@ -63032,6 +63164,7 @@ class Image$1 {
63032
63164
  });
63033
63165
  document.querySelector('.moveable-control-box').style.display = 'none';
63034
63166
  imageResizer.addEventListener('click', () => {
63167
+ this.builder.activeImage.click();
63035
63168
  this.repositionImageTool();
63036
63169
  this.builder.elmTool.repositionElementTool();
63037
63170
  }); // Browse local image
@@ -70777,9 +70910,13 @@ class ColumnTool {
70777
70910
  <button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
70778
70911
  </div>
70779
70912
 
70780
- <div style="padding-top:20px;">
70913
+ <div style="padding-top:30px;">
70781
70914
  <label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
70782
70915
  </div>
70916
+
70917
+ <div style="padding:20px 0 10px;">
70918
+ <label class="label-cell-hideonmobile label-checkbox" for="chkHideColumnOnMobile"><input id="chkHideColumnOnMobile" class="chk-cell-hideonmobile" type="checkbox" /> ${util.out('Hide Column on Mobile')}</label>
70919
+ </div>
70783
70920
 
70784
70921
  <!--
70785
70922
  <div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
@@ -71853,6 +71990,20 @@ class ColumnTool {
71853
71990
  } //Trigger Change event
71854
71991
 
71855
71992
 
71993
+ this.builder.opts.onChange();
71994
+ });
71995
+ const chkHideColumnOnMobile = cellSettings.querySelector('.chk-cell-hideonmobile');
71996
+ dom.addEventListener(chkHideColumnOnMobile, 'click', () => {
71997
+ this.builder.uo.saveForUndo();
71998
+ let cell = util.cellSelected();
71999
+
72000
+ if (chkHideColumnOnMobile.checked) {
72001
+ cell.classList.add('hideonmobile');
72002
+ } else {
72003
+ cell.classList.remove('hideonmobile');
72004
+ } //Trigger Change event
72005
+
72006
+
71856
72007
  this.builder.opts.onChange();
71857
72008
  });
71858
72009
  elms = cellSettings.querySelectorAll('.input-cell-height');
@@ -72337,6 +72488,13 @@ class ColumnTool {
72337
72488
  }
72338
72489
  }
72339
72490
 
72491
+ const chkHideColumnOnMobile = this.cellSettings.querySelector('.chk-cell-hideonmobile');
72492
+ chkHideColumnOnMobile.checked = false;
72493
+
72494
+ if (cell.classList.contains('hideonmobile')) {
72495
+ chkHideColumnOnMobile.checked = true;
72496
+ }
72497
+
72340
72498
  elms = this.cellSettings.querySelectorAll('.input-cell-height');
72341
72499
  Array.prototype.forEach.call(elms, elm => {
72342
72500
  dom.removeClass(elm, 'on');
@@ -80567,6 +80725,7 @@ class Rte {
80567
80725
  let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
80568
80726
  zoomButton.forEach(btn => {
80569
80727
  dom.addEventListener(btn, 'click', () => {
80728
+ this.rteZoomSlider.value = this.builder.opts.zoom * 100;
80570
80729
  const pop = this.rteZoomOptions;
80571
80730
  const top = btn.getBoundingClientRect().top;
80572
80731
  const left = btn.getBoundingClientRect().left;
@@ -82074,6 +82233,83 @@ class Rte {
82074
82233
  });
82075
82234
  }
82076
82235
 
82236
+ zoomStart() {
82237
+ if (this.builder.onZoomStart) {
82238
+ this.builder.onZoomStart();
82239
+ }
82240
+ }
82241
+
82242
+ zoom(inp) {
82243
+ //scale: 0.5 - 1
82244
+ //val: 50 - 100
82245
+ let val = inp.value;
82246
+ let scale = val / 100;
82247
+ this.builder.opts.zoom = scale;
82248
+ localStorage.setItem('_zoom', scale); // Save
82249
+ // setZoomOnArea
82250
+
82251
+ this.builder.setZoomOnArea(); // hide tools
82252
+
82253
+ let tools = this.builder.doc.querySelectorAll('.is-tool');
82254
+ Array.prototype.forEach.call(tools, tool => {
82255
+ tool.style.display = '';
82256
+ });
82257
+ tools = this.builder.doc.querySelectorAll('.is-row-tool');
82258
+ tools.forEach(tool => {
82259
+ tool.style.display = 'none';
82260
+ });
82261
+ tools = this.builder.doc.querySelectorAll('.is-col-tool');
82262
+ tools.forEach(tool => {
82263
+ tool.style.display = 'none';
82264
+ });
82265
+ tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
82266
+ tools.forEach(tool => {
82267
+ tool.style.opacity = 0;
82268
+ });
82269
+
82270
+ if (this.builder.onZoom) {
82271
+ let val = inp.value;
82272
+ let scale = val / 100;
82273
+ this.builder.onZoom(scale);
82274
+ }
82275
+ }
82276
+
82277
+ zoomEnd(inp) {
82278
+ setTimeout(() => {
82279
+ // setZoomOnControl
82280
+ if (this.builder.opts.page !== '') {
82281
+ const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
82282
+ this.builder.setZoomOnControl(wrapper);
82283
+ } else {
82284
+ const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
82285
+ builders.forEach(builder => {
82286
+ this.builder.setZoomOnControl(builder);
82287
+ });
82288
+ } // show & reposition
82289
+
82290
+
82291
+ this.builder.elmTool.repositionElementTool();
82292
+ let tools = this.builder.doc.querySelectorAll('.is-row-tool');
82293
+ tools.forEach(tool => {
82294
+ tool.style.display = '';
82295
+ });
82296
+ tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
82297
+ tools.forEach(tool => {
82298
+ tool.style.opacity = '';
82299
+ });
82300
+ tools = this.builder.doc.querySelectorAll('.is-col-tool');
82301
+ tools.forEach(tool => {
82302
+ tool.style.display = '';
82303
+ });
82304
+
82305
+ if (this.builder.onZoomEnd) {
82306
+ let val = inp.value;
82307
+ let scale = val / 100;
82308
+ this.builder.onZoomEnd(scale);
82309
+ }
82310
+ }, 300);
82311
+ }
82312
+
82077
82313
  insertImage() {
82078
82314
  const dom = this.dom;
82079
82315
  const modalInsertImage = this.builderStuff.querySelector('.insertimage');
@@ -86195,16 +86431,18 @@ class Resize {
86195
86431
  item.style.width = '100%';
86196
86432
  item.style.flex = '';
86197
86433
  }
86198
- } else {
86434
+ }
86435
+ /*else {
86199
86436
  // if(!item.getAttribute('data-module') && !item.style.width) {
86200
86437
  // item.style.width = '100%';
86201
86438
  // item.style.flex = '';
86202
86439
  // }
86203
- if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
86204
- item.style.width = '100%';
86205
- item.style.flex = '';
86440
+ if(!item.getAttribute('data-module') && item===col.nextElementSibling) {
86441
+ item.style.width = '100%';
86442
+ item.style.flex = '';
86206
86443
  }
86207
- }
86444
+ }*/
86445
+
86208
86446
  });
86209
86447
 
86210
86448
  if (numOfCols === 1) {
@@ -86283,16 +86521,18 @@ class Resize {
86283
86521
  item.style.width = '100%';
86284
86522
  item.style.flex = '';
86285
86523
  }
86286
- } else {
86524
+ }
86525
+ /*else {
86287
86526
  // if(!item.getAttribute('data-module') && !item.style.width) {
86288
86527
  // item.style.width = '100%';
86289
86528
  // item.style.flex = '';
86290
86529
  // }
86291
- if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
86292
- item.style.width = '100%';
86293
- item.style.flex = '';
86530
+ if(!item.getAttribute('data-module') && item===col.nextElementSibling) {
86531
+ item.style.width = '100%';
86532
+ item.style.flex = '';
86294
86533
  }
86295
- }
86534
+ }*/
86535
+
86296
86536
  });
86297
86537
  } // /adjust others
86298
86538
  // New: Final fix (if column resized exceeds its max)
@@ -88344,8 +88584,8 @@ class ContentBuilder {
88344
88584
  // DEFAULT: Built-in simple css grid
88345
88585
  this.opts.row = 'row'; //row clrfx
88346
88586
 
88347
- this.opts.cols = ['column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
88348
- this.opts.colequal = [['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
88587
+ this.opts.cols = ['column twelfth', 'column eleventh', 'column tenth', 'column ninth', 'column eighth', 'column seventh', 'column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
88588
+ this.opts.colequal = [['column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth', 'column twelfth'], ['column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh', 'column eleventh'], ['column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth', 'column tenth'], ['column ninth', 'column ninth', 'column ninth', 'column ninth', 'column ninth', 'column ninth', 'column ninth', 'column ninth', 'column ninth'], ['column eighth', 'column eighth', 'column eighth', 'column eighth', 'column eighth', 'column eighth', 'column eighth', 'column eighth'], ['column seventh', 'column seventh', 'column seventh', 'column seventh', 'column seventh', 'column seventh', 'column seventh'], ['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
88349
88589
  this.opts.colsizes = [//needed for columns in which the size increment is not constant.
88350
88590
  [//increment for 3 columns
88351
88591
  ['column third', 'column third', 'column third'], ['column half', 'column fourth', 'column fourth']], [//increment for 2 columns
@@ -88545,7 +88785,7 @@ class ContentBuilder {
88545
88785
  if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
88546
88786
  if (this.dom.hasClass(element, 'is-builder')) a = true;
88547
88787
  if (this.dom.hasClass(element, 'is-modal')) b = true;
88548
- if (this.dom.hasClass(element, 'is-side')) c = true;
88788
+ if (this.dom.hasClass(element, 'is-side') || this.dom.hasClass(element, 'is-sidebar')) c = true;
88549
88789
  if (this.dom.hasClass(element, 'is-pop')) d = true;
88550
88790
  if (this.dom.hasClass(element, 'is-tool')) f = true;
88551
88791
  if (this.dom.hasClass(element, 'is-rte-tool') || this.dom.hasClass(element, 'is-elementrte-tool')) g = true;
@@ -88613,7 +88853,10 @@ class ContentBuilder {
88613
88853
  if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
88614
88854
  // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
88615
88855
  if (!this.dom.getSelected()) {
88616
- if (!document.querySelector('.is-modal.active')) {
88856
+ // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
88857
+ let openedModal = document.querySelector('.is-modal.active:not(.is-modal-content)');
88858
+
88859
+ if (!openedModal) {
88617
88860
  // Additional (to prevent lost focus)
88618
88861
  util.clearActiveCell();
88619
88862
  util.clearControls();
@@ -91268,8 +91511,21 @@ class ContentBuilder {
91268
91511
  let elms = contentword.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
91269
91512
  Array.prototype.forEach.call(elms, elm => {
91270
91513
  elm.innerHTML = elm.innerHTML + ' '; //add space (&nbsp;)
91271
- });
91272
- sPastedText = contentword.innerText;
91514
+ }); // sPastedText = contentword.innerText;
91515
+
91516
+ sPastedText = contentword.innerHTML;
91517
+ sPastedText = sPastedText.replace(/(<([^>]+)>)/ig, '<br>');
91518
+ sPastedText = sPastedText.replace(/(<br\s*\/?>){3,}/gi, '<br>');
91519
+
91520
+ if (sPastedText.indexOf('<br>') === 0) {
91521
+ sPastedText = sPastedText.substring(4);
91522
+ }
91523
+
91524
+ if (sPastedText.substring(sPastedText.length - 4) === '<br>') {
91525
+ sPastedText = sPastedText.substring(0, sPastedText.length - 4);
91526
+ }
91527
+
91528
+ sPastedText = sPastedText.trim();
91273
91529
  } else {
91274
91530
  sPastedText = contentword.innerHTML;
91275
91531
 
@@ -93050,6 +93306,11 @@ class ContentStuff {
93050
93306
  .is-wrapper.is-edit {
93051
93307
  padding-left: 61px;
93052
93308
  }
93309
+ .is-wrapper.is-container-edit > div.section-select, .is-wrapper.is-clean-edit > div.section-select {
93310
+ overflow-x: unset !important;
93311
+ overflow-y: unset !important;
93312
+ }
93313
+
93053
93314
 
93054
93315
  /* Navbar Fix */
93055
93316
  .is-wrapper.is-edit .is-section.is-section-navbar,
@@ -93098,19 +93359,69 @@ class ContentStuff {
93098
93359
  }
93099
93360
 
93100
93361
  /* toggle tool */
93101
- .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
93362
+ .is-wrapper.is-clean-edit.hard-select .box-select .is-box-tool,
93102
93363
  .is-wrapper.is-clean-edit .box-select .is-box-tool {
93103
93364
  display: none !important;
93104
93365
  }
93105
- .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
93366
+ .is-wrapper.is-clean-edit.hard-select .section-select .is-section-tool,
93106
93367
  .is-wrapper.is-clean-edit .section-select .is-section-tool {
93107
93368
  display: none !important;
93108
93369
  }
93109
- .is-wrapper.is-clean-edit .hard-select .box-select,
93370
+ .is-wrapper.is-clean-edit.hard-select .box-select,
93110
93371
  .is-wrapper.is-clean-edit .box-select {
93111
93372
  outline: none !important;
93112
93373
  }
93113
93374
 
93375
+ /* clean UI for selection only */
93376
+ .selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .box-select .is-box-tool,
93377
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .box-select .is-box-tool {
93378
+ display: none !important;
93379
+ }
93380
+ .selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .section-select .is-section-tool,
93381
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .section-select .is-section-tool {
93382
+ display: none !important;
93383
+ }
93384
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .is-rowadd-tool {
93385
+ display: none !important;
93386
+ }
93387
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .is-tool {
93388
+ display: none !important;
93389
+ }
93390
+ .selection-only:not([data-skrollrr-off]) .is-tool {
93391
+ z-index: -10000 !important;
93392
+ }
93393
+
93394
+ /* section info */
93395
+ .is-wrapper .is-section-info {
93396
+ position: absolute;
93397
+ z-index: 1;
93398
+ top: 3px;
93399
+ left: 3px;
93400
+ display: none;
93401
+ }
93402
+ .is-wrapper .is-section-info > div {
93403
+ width: auto;
93404
+ height: auto;
93405
+ padding: 5px 20px;
93406
+ background-color: rgb(255, 239, 100);
93407
+ color: #111;
93408
+ font-family: sans-serif;
93409
+ letter-spacing: 2px;
93410
+ font-size: 17px;
93411
+ }
93412
+ .is-wrapper .section-select .is-section-info {
93413
+ display: block;
93414
+ }
93415
+
93416
+ /* To make editing possible on wide content */
93417
+ .is-wrapper.is-edit .section-wide-250 .is-box-centered {
93418
+ overflow-x: auto;
93419
+ overflow-y: hidden;
93420
+ }
93421
+ .is-wrapper.is-edit .section-wide-250 .is-container > div > div { /* To make col tool visible */
93422
+ max-height: 90vh;
93423
+ }
93424
+
93114
93425
  `; // .is-wrapper.is-edit > div {
93115
93426
  // overflow-x: unset;
93116
93427
  // overflow-y: unset;
@@ -93135,9 +93446,22 @@ class AnimateScroll {
93135
93446
  this.builderStuff = builderStuff;
93136
93447
  let html = `
93137
93448
  <style>
93449
+ #_cbhtml .is-side.animatescroll,
93450
+ .is-ui .is-side.animatescroll {
93451
+ width: 370px;
93452
+ right: -370px;
93453
+ }
93454
+ #_cbhtml .is-side.animatescroll.active,
93455
+ .is-ui .is-side.animatescroll.active {
93456
+ right: 0;
93457
+ }
93138
93458
  .animatescroll td {
93139
93459
  font-size: 13px;
93140
- padding: 5px 5px;
93460
+ padding: 3px 0px;
93461
+ }
93462
+ .animatescroll .table-header td {
93463
+ font-size: 11px;
93464
+ padding: 3px 0 0;
93141
93465
  }
93142
93466
  .animatescroll.active {
93143
93467
  right: 0;
@@ -93168,10 +93492,10 @@ class AnimateScroll {
93168
93492
  position: absolute;
93169
93493
  top: 0;
93170
93494
  box-sizing: border-box;
93171
- border-top: transparent 240px solid !important;
93495
+ border-top: transparent 245px solid !important;
93172
93496
  }
93173
93497
  #divEnterAnim, #divLeaveAnim, #divAnimSettings {
93174
- border-top: transparent 70px solid !important;
93498
+ border-top: transparent 55px solid !important;
93175
93499
  padding:0 15px 20px 22px !important;
93176
93500
  width: 100%;
93177
93501
  height: 100%;
@@ -93198,7 +93522,7 @@ class AnimateScroll {
93198
93522
  margin-left: 2px !important;
93199
93523
  box-shadow: none !important;
93200
93524
  }
93201
- .bold {
93525
+ .anim-controls .bold {
93202
93526
  font-weight: 600;
93203
93527
  }
93204
93528
  .anim-controls button,
@@ -93213,10 +93537,22 @@ class AnimateScroll {
93213
93537
  font-family: sans-serif !important;
93214
93538
  font-weight: 300 !important;
93215
93539
  padding: 0 !important;
93216
- width: 65px !important;
93540
+ width: 50px !important;
93217
93541
  height: 35px !important;
93218
93542
  text-align: center !important;
93219
93543
  }
93544
+ .anim-controls td input[type=text],
93545
+ .anim-list td input[type=text] {
93546
+ font-size: 13px !important;
93547
+ font-family: sans-serif !important;
93548
+ font-weight: 300 !important;
93549
+ padding: 0 !important;
93550
+ width: 34px !important;
93551
+ height: 30px !important;
93552
+ text-align: center !important;
93553
+ letter-spacing: 0px !important;
93554
+ }
93555
+
93220
93556
  .flex-wrap {
93221
93557
  display: flex;
93222
93558
  flex-flow: wrap;
@@ -93253,7 +93589,66 @@ class AnimateScroll {
93253
93589
  width: 80px !important;
93254
93590
  height: 35px !important;
93255
93591
  }
93592
+
93593
+ .is-modal.page-preview {
93594
+ transition: all 0.1s ease;
93595
+ }
93596
+ .is-modal.page-preview > div > div {
93597
+ transition: all 0.1s ease;
93598
+ }
93599
+ .is-screen-1920 { width: 576px !important; }
93600
+ .is-screen-1440 {
93601
+ width: 431px !important;
93602
+ height: 258px !important;
93603
+ }
93604
+ .is-screen-768 {
93605
+ width: 245px !important;
93606
+ height: 363px !important;
93607
+ }
93608
+ .is-screen-1024 {
93609
+ width: 328px !important;
93610
+ height: 281px !important;
93611
+ }
93612
+ .is-screen-375 { width: 167px !important; }
93613
+
93614
+ .is-screen-1920 .preview-screen {
93615
+ width: 1920px;height: 992px;transform: scale(0.3);
93616
+ }
93617
+ .is-screen-1440 .preview-screen {
93618
+ width: 1440px;height: 744px;transform: scale(0.3);
93619
+ }
93620
+ .is-screen-768 .preview-screen {
93621
+ width: 768px;height: 1024px;transform: scale(0.32);
93622
+ }
93623
+ .is-screen-1024 .preview-screen {
93624
+ width: 1024px;height: 768px;transform: scale(0.32);
93625
+ }
93626
+ .is-screen-375 .preview-screen {
93627
+ width: 375px;height: 667px;transform: scale(0.446);
93628
+ }
93256
93629
  </style>
93630
+
93631
+
93632
+ <div class="is-modal is-modal-content page-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
93633
+ <div class="is-modal-bar is-draggable" draggable="">
93634
+ ${out('Preview')}
93635
+ <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
93636
+ <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
93637
+ </button>
93638
+ </div>
93639
+ <div style="position:relative;position:absolute;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;">
93640
+ <div class="preview-screen" style="padding:0;position: absolute;top: 0;left: 0;box-sizing: border-box;transform-origin: top left;">
93641
+ <iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>
93642
+ </div>
93643
+ </div>
93644
+ <div style="position:absolute;left:0;bottom:0;">
93645
+ <button class="is-modal-size" tabindex="-1" title="${out('Close')}" style="width:30px;height:30px;">
93646
+ <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#icon-devices"></use></svg>
93647
+ </button>
93648
+ </div>
93649
+ </div>
93650
+
93651
+
93257
93652
  <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
93258
93653
 
93259
93654
  <div class="side-title">${out('Animation')}</div>
@@ -93282,7 +93677,7 @@ class AnimateScroll {
93282
93677
  <div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
93283
93678
  <a href="" data-content="divAnimDefault" class="active">${out('On View')}</a>
93284
93679
  <a href="" data-content="divAnimScroll">${out('On Scroll')}</a>
93285
- <a href="" data-content="divAnimScrollSimple">${out('On Scroll (Simple)')}</a>
93680
+ <a href="" data-content="divAnimScrollSimple">${out('Timeline')}</a>
93286
93681
  </div>
93287
93682
  </div>
93288
93683
 
@@ -93290,61 +93685,270 @@ class AnimateScroll {
93290
93685
 
93291
93686
  <div class="anim-controls" style="overflow-y: auto;">
93292
93687
 
93293
- <div style="margin-top: 30px;margin-left: 22px;">
93688
+ <div style="margin-top: 20px;margin-left: 22px;margin-bottom: 20px;">
93294
93689
 
93295
93690
  <table style="margin:12px 0 0 0;">
93691
+
93296
93692
  <tr>
93297
- <td></td>
93298
- <td>${out('Start')}:</td>
93299
- <td>${out('End')}:</td>
93300
- <td></td>
93693
+ <td colspan="4"><span class="bold">${out('Slide Horizontal')}</span>:</td>
93694
+ <td colspan="5" style="text-align:right;font-style:italic;font-size:12px;">${out('(default: px)')}</td>
93695
+ </tr>
93696
+ <tr class="table-header">
93697
+ <td style="text-align:center">0%</td>
93698
+ <td style="text-align:center"></td>
93699
+ <td style="text-align:center"></td>
93700
+ <td style="text-align:center"></td>
93701
+ <td style="text-align:center">50%</td>
93702
+ <td style="text-align:center"></td>
93703
+ <td style="text-align:center"></td>
93704
+ <td style="text-align:center"></td>
93705
+ <td style="text-align:center">100%</td>
93301
93706
  </tr>
93302
93707
  <tr>
93303
- <td>${out('x')}</td>
93304
93708
  <td>
93305
93709
  <input class="inp-simplescroll-x-start" placeholder="-100" type="text" />
93306
93710
  </td>
93711
+ <td>
93712
+ <input class="inp-simplescroll-x-15" placeholder="" type="text" />
93713
+ </td>
93714
+ <td>
93715
+ <input class="inp-simplescroll-x-25" placeholder="" type="text" />
93716
+ </td>
93717
+ <td>
93718
+ <input class="inp-simplescroll-x-35" placeholder="" type="text" />
93719
+ </td>
93720
+ <td>
93721
+ <input class="inp-simplescroll-x-50" placeholder="" type="text" />
93722
+ </td>
93723
+ <td>
93724
+ <input class="inp-simplescroll-x-65" placeholder="" type="text" />
93725
+ </td>
93726
+ <td>
93727
+ <input class="inp-simplescroll-x-75" placeholder="" type="text" />
93728
+ </td>
93729
+ <td>
93730
+ <input class="inp-simplescroll-x-85" placeholder="" type="text" />
93731
+ </td>
93307
93732
  <td>
93308
93733
  <input class="inp-simplescroll-x-end" placeholder="100" type="text" />
93309
93734
  </td>
93310
- <td style="font-size: 12px;">${out('px (default)')}</td>
93311
93735
  </tr>
93312
93736
  <tr>
93313
- <td>${out('y')}</td>
93737
+ <td colspan="4" style="padding-top:20px"><span class="bold">${out('Slide Vertical')}</span>:</td>
93738
+ <td colspan="5" style="padding-top:20px;text-align:right;font-style:italic;font-size:12px;">${out('(default: px)')}</td>
93739
+ </tr>
93740
+ <tr class="table-header">
93741
+ <td style="text-align:center">0%</td>
93742
+ <td style="text-align:center"></td>
93743
+ <td style="text-align:center"></td>
93744
+ <td style="text-align:center"></td>
93745
+ <td style="text-align:center">50%</td>
93746
+ <td style="text-align:center"></td>
93747
+ <td style="text-align:center"></td>
93748
+ <td style="text-align:center"></td>
93749
+ <td style="text-align:center">100%</td>
93750
+ </tr>
93751
+ <tr>
93314
93752
  <td>
93315
93753
  <input class="inp-simplescroll-y-start" placeholder="100%" type="text" />
93316
93754
  </td>
93755
+ <td>
93756
+ <input class="inp-simplescroll-y-15" placeholder="" type="text" />
93757
+ </td>
93758
+ <td>
93759
+ <input class="inp-simplescroll-y-25" placeholder="" type="text" />
93760
+ </td>
93761
+ <td>
93762
+ <input class="inp-simplescroll-y-35" placeholder="" type="text" />
93763
+ </td>
93764
+ <td>
93765
+ <input class="inp-simplescroll-y-50" placeholder="" type="text" />
93766
+ </td>
93767
+ <td>
93768
+ <input class="inp-simplescroll-y-65" placeholder="" type="text" />
93769
+ </td>
93770
+ <td>
93771
+ <input class="inp-simplescroll-y-75" placeholder="" type="text" />
93772
+ </td>
93773
+ <td>
93774
+ <input class="inp-simplescroll-y-85" placeholder="" type="text" />
93775
+ </td>
93317
93776
  <td>
93318
93777
  <input class="inp-simplescroll-y-end" placeholder="-100%" type="text" />
93319
93778
  </td>
93320
- <td style="font-size: 12px;">${out('px (default)')}</td>
93321
93779
  </tr>
93322
93780
  <tr>
93323
- <td>${out('Scale')}</td>
93781
+ <td colspan="9" style="padding-top:20px"><span class="bold">${out('Scale')}</span>:</td>
93782
+ </tr>
93783
+ <tr class="table-header">
93784
+ <td style="text-align:center">0%</td>
93785
+ <td style="text-align:center"></td>
93786
+ <td style="text-align:center"></td>
93787
+ <td style="text-align:center"></td>
93788
+ <td style="text-align:center">50%</td>
93789
+ <td style="text-align:center"></td>
93790
+ <td style="text-align:center"></td>
93791
+ <td style="text-align:center"></td>
93792
+ <td style="text-align:center">100%</td>
93793
+ </tr>
93794
+ <tr>
93324
93795
  <td>
93325
93796
  <input class="inp-simplescroll-scale-start" placeholder="0.8" type="text" />
93326
93797
  </td>
93798
+ <td>
93799
+ <input class="inp-simplescroll-scale-15" placeholder="" type="text" />
93800
+ </td>
93801
+ <td>
93802
+ <input class="inp-simplescroll-scale-25" placeholder="" type="text" />
93803
+ </td>
93804
+ <td>
93805
+ <input class="inp-simplescroll-scale-35" placeholder="" type="text" />
93806
+ </td>
93807
+ <td>
93808
+ <input class="inp-simplescroll-scale-50" placeholder="" type="text" />
93809
+ </td>
93810
+ <td>
93811
+ <input class="inp-simplescroll-scale-65" placeholder="" type="text" />
93812
+ </td>
93813
+ <td>
93814
+ <input class="inp-simplescroll-scale-75" placeholder="" type="text" />
93815
+ </td>
93816
+ <td>
93817
+ <input class="inp-simplescroll-scale-85" placeholder="" type="text" />
93818
+ </td>
93327
93819
  <td>
93328
93820
  <input class="inp-simplescroll-scale-end" placeholder="1.2" type="text" />
93329
93821
  </td>
93330
- <td></td>
93331
93822
  </tr>
93332
- </table>
93333
93823
 
93824
+ <tr>
93825
+ <td colspan="9" style="padding-top:20px"><span class="bold">${out('Rotate')}</span>:</td>
93826
+ </tr>
93827
+ <tr class="table-header">
93828
+ <td style="text-align:center">0%</td>
93829
+ <td style="text-align:center"></td>
93830
+ <td style="text-align:center"></td>
93831
+ <td style="text-align:center"></td>
93832
+ <td style="text-align:center">50%</td>
93833
+ <td style="text-align:center"></td>
93834
+ <td style="text-align:center"></td>
93835
+ <td style="text-align:center"></td>
93836
+ <td style="text-align:center">100%</td>
93837
+ </tr>
93838
+ <tr>
93839
+ <td>
93840
+ <input class="inp-simplescroll-rotate-start" placeholder="-45" type="text" />
93841
+ </td>
93842
+ <td>
93843
+ <input class="inp-simplescroll-rotate-15" placeholder="" type="text" />
93844
+ </td>
93845
+ <td>
93846
+ <input class="inp-simplescroll-rotate-25" placeholder="" type="text" />
93847
+ </td>
93848
+ <td>
93849
+ <input class="inp-simplescroll-rotate-35" placeholder="" type="text" />
93850
+ </td>
93851
+ <td>
93852
+ <input class="inp-simplescroll-rotate-50" placeholder="" type="text" />
93853
+ </td>
93854
+ <td>
93855
+ <input class="inp-simplescroll-rotate-65" placeholder="" type="text" />
93856
+ </td>
93857
+ <td>
93858
+ <input class="inp-simplescroll-rotate-75" placeholder="" type="text" />
93859
+ </td>
93860
+ <td>
93861
+ <input class="inp-simplescroll-rotate-85" placeholder="" type="text" />
93862
+ </td>
93863
+ <td>
93864
+ <input class="inp-simplescroll-rotate-end" placeholder="45" type="text" />
93865
+ </td>
93866
+ </tr>
93867
+
93868
+ <tr>
93869
+ <td colspan="9" style="padding-top:20px"><span class="bold">${out('Opacity')}</span>:</td>
93870
+ </tr>
93871
+ <tr class="table-header">
93872
+ <td style="text-align:center">0%</td>
93873
+ <td style="text-align:center"></td>
93874
+ <td style="text-align:center"></td>
93875
+ <td style="text-align:center"></td>
93876
+ <td style="text-align:center">50%</td>
93877
+ <td style="text-align:center"></td>
93878
+ <td style="text-align:center"></td>
93879
+ <td style="text-align:center"></td>
93880
+ <td style="text-align:center">100%</td>
93881
+ </tr>
93882
+ <tr>
93883
+ <td>
93884
+ <input class="inp-simplescroll-opacity-start" placeholder="" type="text" />
93885
+ </td>
93886
+ <td>
93887
+ <input class="inp-simplescroll-opacity-15" placeholder="" type="text" />
93888
+ </td>
93889
+ <td>
93890
+ <input class="inp-simplescroll-opacity-25" placeholder="" type="text" />
93891
+ </td>
93892
+ <td>
93893
+ <input class="inp-simplescroll-opacity-35" placeholder="" type="text" />
93894
+ </td>
93895
+ <td>
93896
+ <input class="inp-simplescroll-opacity-50" placeholder="" type="text" />
93897
+ </td>
93898
+ <td>
93899
+ <input class="inp-simplescroll-opacity-65" placeholder="" type="text" />
93900
+ </td>
93901
+ <td>
93902
+ <input class="inp-simplescroll-opacity-75" placeholder="" type="text" />
93903
+ </td>
93904
+ <td>
93905
+ <input class="inp-simplescroll-opacity-85" placeholder="" type="text" />
93906
+ </td>
93907
+ <td>
93908
+ <input class="inp-simplescroll-opacity-end" placeholder="" type="text" />
93909
+ </td>
93910
+ </tr>
93911
+ </table>
93912
+
93334
93913
  <div class="flex-wrap" style="margin-top:20px;">
93335
- <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="width:320px">${out('Disable Smooth Animation')}</button>
93914
+ <label for="chkPinSection" style="margin:0;">
93915
+ <input id="chkPinSection" type="checkbox" style="margin-left:0"> ${out('Pin Section (visible on preview)')}
93916
+ </label>
93917
+ </div>
93918
+ <div class="div-pin-spacing" style="display:none">
93919
+ <div style="padding-top:10px;"><span>${out('Pin Spacing')}</span>: </div>
93920
+ <div class="flex-wrap" style="padding:5px 0 10px">
93921
+ <button title="0" class="cmd-pin-space" data-value="0" style="width:50px">0</button>
93922
+ <button title="20" class="cmd-pin-space" data-value="20" style="width:50px">20</button>
93923
+ <button title="40" class="cmd-pin-space" data-value="40" style="width:50px">40</button>
93924
+ <button title="60" class="cmd-pin-space" data-value="60" style="width:50px">60</button>
93925
+ <button title="80" class="cmd-pin-space" data-value="80" style="display:none;width:50px">80</button>
93926
+ <button title="100" class="cmd-pin-space" data-value="100" style="display:none;width:50px">100</button>
93927
+ </div>
93928
+ </div>
93929
+ <div class="flex-wrap" style="margin-top:10px;">
93930
+ <label for="chkDisableSkrollrrOnMobile" style="margin:0;">
93931
+ <input id="chkDisableSkrollrrOnMobile" type="checkbox" style="margin-left:0"> ${out('Disable on Mobile')}
93932
+ </label>
93336
93933
  </div>
93337
93934
 
93338
- <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
93339
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93340
- <span style="margin-left:7px">${out('Clear All')}</span>
93341
- </button>
93935
+ <div class="flex-wrap" style="margin-top:15px;">
93936
+ <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="padding-left:15px;padding-right: 15px;">${out('Disable Smooth Animation')}</button>
93937
+ </div>
93342
93938
 
93343
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93344
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93345
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93346
- </button>
93939
+ <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
93940
+ <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
93941
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93942
+ <span style="margin-left:7px">${out('Clear All')}</span>
93943
+ </button>
93944
+ </div>
93347
93945
 
93946
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
93947
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
93948
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93949
+ <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93950
+ </button>
93951
+ </div>
93348
93952
  </div>
93349
93953
  </div>
93350
93954
  </div>
@@ -93353,7 +93957,7 @@ class AnimateScroll {
93353
93957
 
93354
93958
  <div class="anim-controls" style="overflow-y: auto;">
93355
93959
 
93356
- <div style="padding:15px 0 0 22px;">
93960
+ <div style="padding:10px 0 20px 22px;">
93357
93961
  <div class="anim-label">
93358
93962
  <span>
93359
93963
  <span class="bold">${out('Fade')}</span>:
@@ -93398,7 +94002,7 @@ class AnimateScroll {
93398
94002
  <button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
93399
94003
  <button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
93400
94004
  </div>
93401
-
94005
+
93402
94006
  <div class="anim-label">
93403
94007
  <span>
93404
94008
  <span class="bold">${out('Pulse')}</span>:
@@ -93407,7 +94011,7 @@ class AnimateScroll {
93407
94011
  <div class="flex-wrap">
93408
94012
  <button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
93409
94013
  </div>
93410
-
94014
+
93411
94015
  <div class="anim-label">
93412
94016
  <span>
93413
94017
  <span class="bold">${out('Bounce')}</span>:
@@ -93447,15 +94051,19 @@ class AnimateScroll {
93447
94051
  ${out('Animate Once')}
93448
94052
  </button>
93449
94053
 
93450
- <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
93451
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93452
- <span style="margin-left:7px">${out('Clear All')}</span>
93453
- </button>
94054
+ <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
94055
+ <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94056
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94057
+ <span style="margin-left:7px">${out('Clear All')}</span>
94058
+ </button>
94059
+ </div>
93454
94060
 
93455
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93456
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93457
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93458
- </button>
94061
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
94062
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94063
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94064
+ <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
94065
+ </button>
94066
+ </div>
93459
94067
  </div>
93460
94068
 
93461
94069
  </div>
@@ -93466,7 +94074,7 @@ class AnimateScroll {
93466
94074
 
93467
94075
  <div class="anim-controls">
93468
94076
 
93469
- <div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
94077
+ <div class="is-tabs clearfix" style="padding-top:20px;position:relative;z-index:1;background:none;" data-group="skrollanim">
93470
94078
  <a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
93471
94079
  <a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
93472
94080
  <a href="" data-content="divAnimSettings">${out('Settings')}</a>
@@ -93608,19 +94216,25 @@ class AnimateScroll {
93608
94216
  </div>
93609
94217
  <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade In')}</button>
93610
94218
 
93611
- <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93612
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93613
- <span style="margin-left:7px">${out('Clear All')}</span>
93614
- </button>
94219
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
94220
+ <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94221
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94222
+ <span style="margin-left:7px">${out('Clear All')}</span>
94223
+ </button>
94224
+ </div>
94225
+
94226
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
94227
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94228
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94229
+ <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
94230
+ </button>
94231
+ </div>
93615
94232
 
93616
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93617
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93618
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93619
- </button>
93620
94233
  </div>
93621
94234
 
93622
94235
  <div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93623
94236
 
94237
+
93624
94238
  <div class="anim-label">
93625
94239
  <span>
93626
94240
  <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
@@ -93748,15 +94362,19 @@ class AnimateScroll {
93748
94362
  </div>
93749
94363
  <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade Out')}</button>
93750
94364
 
93751
- <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93752
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93753
- <span style="margin-left:7px">${out('Clear All')}</span>
93754
- </button>
94365
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
94366
+ <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94367
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94368
+ <span style="margin-left:7px">${out('Clear All')}</span>
94369
+ </button>
94370
+ </div>
93755
94371
 
93756
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93757
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93758
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93759
- </button>
94372
+ <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
94373
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
94374
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
94375
+ <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
94376
+ </button>
94377
+ </div>
93760
94378
 
93761
94379
  </div>
93762
94380
 
@@ -93789,8 +94407,8 @@ class AnimateScroll {
93789
94407
  <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
93790
94408
  </div>
93791
94409
 
93792
- <div class="flex-wrap" style="margin-top:30px;">
93793
- <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="width:320px">${out('Disable Smooth Animation')}</button>
94410
+ <div class="flex-wrap" style="margin-top:20px;">
94411
+ <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="padding-left:15px;padding-right: 15px;">${out('Disable Smooth Animation')}</button>
93794
94412
  </div>
93795
94413
  </div>
93796
94414
 
@@ -93884,7 +94502,11 @@ class AnimateScroll {
93884
94502
  this.close();
93885
94503
  });
93886
94504
  this.divAnimScrollSimple = modalAnimateScroll.querySelector('#divAnimScrollSimple');
93887
- this.divAnimSettings = modalAnimateScroll.querySelector('#divAnimSettings'); // Target
94505
+ this.divAnimSettings = modalAnimateScroll.querySelector('#divAnimSettings');
94506
+ const modalPagePreview = this.builderStuff.querySelector('.is-modal.page-preview');
94507
+ this.modalPagePreview = modalPagePreview;
94508
+ const btnOpenPreviewWindow = this.builder.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
94509
+ this.btnOpenPreviewWindow = btnOpenPreviewWindow; // Target
93888
94510
 
93889
94511
  let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
93890
94512
  btns.forEach(btn => {
@@ -93914,8 +94536,9 @@ class AnimateScroll {
93914
94536
  const btnClearAnimAll = modalAnimateScroll.querySelectorAll('.cmd-clear-anim-all');
93915
94537
  btnClearAnimAll.forEach(btn => {
93916
94538
  btn.addEventListener('click', () => {
93917
- this.builder.editor.saveForUndo();
93918
94539
  let section = this.builder.activeSection;
94540
+ if (!section) return;
94541
+ this.builder.editor.saveForUndo();
93919
94542
  let activeCol = this.builder.editor.activeCol;
93920
94543
  if (activeCol) section = activeCol.closest('.is-section');
93921
94544
  let elms;
@@ -93942,6 +94565,15 @@ class AnimateScroll {
93942
94565
  elm.removeAttribute('data-50-top');
93943
94566
  elm.removeAttribute('data-top');
93944
94567
  elm.removeAttribute('data-top-bottom');
94568
+ elm.removeAttribute('data-in');
94569
+ elm.removeAttribute('data-in-150');
94570
+ elm.removeAttribute('data-in-300');
94571
+ elm.removeAttribute('data-cen--150');
94572
+ elm.removeAttribute('data-cen');
94573
+ elm.removeAttribute('data-cen-150');
94574
+ elm.removeAttribute('data-out--300');
94575
+ elm.removeAttribute('data-out--150');
94576
+ elm.removeAttribute('data-out');
93945
94577
  elm.style.transform = '';
93946
94578
  elm.style.transition = '';
93947
94579
  elm.style.opacity = ''; // console.log(elm)
@@ -94002,8 +94634,9 @@ class AnimateScroll {
94002
94634
  });
94003
94635
  const btnClearAnimWizard = modalAnimateScroll.querySelector('.cmd-clear-anim-wizard');
94004
94636
  btnClearAnimWizard.addEventListener('click', () => {
94005
- this.builder.editor.saveForUndo();
94006
94637
  const section = this.builder.activeSection;
94638
+ if (!section) return;
94639
+ this.builder.editor.saveForUndo();
94007
94640
  let elms;
94008
94641
  elms = section.querySelectorAll('.is-animated');
94009
94642
  elms.forEach(elm => {
@@ -94033,8 +94666,31 @@ class AnimateScroll {
94033
94666
  });
94034
94667
 
94035
94668
  const applyPresetBasic = process => {
94036
- this.builder.editor.saveForUndo();
94037
94669
  const section = this.builder.activeSection;
94670
+ if (!section) return;
94671
+ this.builder.editor.saveForUndo(); // clear
94672
+
94673
+ let elms = section.querySelectorAll('.is-animated');
94674
+ elms.forEach(elm => {
94675
+ if (elm.classList.contains('is-overlay-bg')) return;
94676
+ elm.classList.remove('is-animated');
94677
+ elm.classList.remove('once');
94678
+ elm.classList.remove('is-fadeIn');
94679
+ elm.classList.remove('is-fadeInUp');
94680
+ elm.classList.remove('is-fadeInDown');
94681
+ elm.classList.remove('is-fadeInLeft');
94682
+ elm.classList.remove('is-fadeInRight');
94683
+ elm.classList.remove('is-zoomIn');
94684
+ elm.classList.remove('is-zoomOut');
94685
+ elm.classList.remove('is-slideInUp');
94686
+ elm.classList.remove('is-slideInDown');
94687
+ elm.classList.remove('is-slideInLeft');
94688
+ elm.classList.remove('is-slideInRight');
94689
+ elm.classList.remove('is-flipInX');
94690
+ elm.classList.remove('is-flipInY');
94691
+ elm.classList.remove('is-pulse');
94692
+ elm.classList.remove('is-bounceIn');
94693
+ });
94038
94694
  let start = 0;
94039
94695
  let boxes = section.querySelectorAll('.is-box');
94040
94696
  if (boxes.length === 0) boxes = section.querySelectorAll('.is-box-centered');
@@ -94098,8 +94754,9 @@ class AnimateScroll {
94098
94754
  });
94099
94755
  const chkPresetAnimOnce = modalAnimateScroll.querySelector('#chkPresetAnimOnce');
94100
94756
  chkPresetAnimOnce.addEventListener('click', () => {
94101
- this.builder.editor.saveForUndo();
94102
94757
  const section = this.builder.activeSection;
94758
+ if (!section) return;
94759
+ this.builder.editor.saveForUndo();
94103
94760
  let elms = section.querySelectorAll('.is-animated');
94104
94761
  elms.forEach(elm => {
94105
94762
  if (chkPresetAnimOnce.checked) {
@@ -94880,32 +95537,193 @@ class AnimateScroll {
94880
95537
 
94881
95538
  this.builder.settings.onChange();
94882
95539
  }); // ---
94883
- // SIMPLE ON SCROLL
95540
+ // TIMELINE
94884
95541
 
94885
95542
  const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
94886
95543
  inpSimpleScrollX_Start.addEventListener('change', () => {
94887
95544
  this.applySimpleScroll();
94888
95545
  });
95546
+ const inpSimpleScrollX_15 = modalAnimateScroll.querySelector('.inp-simplescroll-x-15');
95547
+ inpSimpleScrollX_15.addEventListener('change', () => {
95548
+ this.applySimpleScroll();
95549
+ });
95550
+ const inpSimpleScrollX_25 = modalAnimateScroll.querySelector('.inp-simplescroll-x-25');
95551
+ inpSimpleScrollX_25.addEventListener('change', () => {
95552
+ this.applySimpleScroll();
95553
+ });
95554
+ const inpSimpleScrollX_35 = modalAnimateScroll.querySelector('.inp-simplescroll-x-35');
95555
+ inpSimpleScrollX_35.addEventListener('change', () => {
95556
+ this.applySimpleScroll();
95557
+ });
95558
+ const inpSimpleScrollX_50 = modalAnimateScroll.querySelector('.inp-simplescroll-x-50');
95559
+ inpSimpleScrollX_50.addEventListener('change', () => {
95560
+ this.applySimpleScroll();
95561
+ });
95562
+ const inpSimpleScrollX_65 = modalAnimateScroll.querySelector('.inp-simplescroll-x-65');
95563
+ inpSimpleScrollX_65.addEventListener('change', () => {
95564
+ this.applySimpleScroll();
95565
+ });
95566
+ const inpSimpleScrollX_75 = modalAnimateScroll.querySelector('.inp-simplescroll-x-75');
95567
+ inpSimpleScrollX_75.addEventListener('change', () => {
95568
+ this.applySimpleScroll();
95569
+ });
95570
+ const inpSimpleScrollX_85 = modalAnimateScroll.querySelector('.inp-simplescroll-x-85');
95571
+ inpSimpleScrollX_85.addEventListener('change', () => {
95572
+ this.applySimpleScroll();
95573
+ });
94889
95574
  const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
94890
95575
  inpSimpleScrollX_End.addEventListener('change', () => {
94891
95576
  this.applySimpleScroll();
94892
- });
95577
+ }); // ---
95578
+
94893
95579
  const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
94894
95580
  inpSimpleScrollY_Start.addEventListener('change', () => {
94895
95581
  this.applySimpleScroll();
94896
95582
  });
95583
+ const inpSimpleScrollY_15 = modalAnimateScroll.querySelector('.inp-simplescroll-y-15');
95584
+ inpSimpleScrollY_15.addEventListener('change', () => {
95585
+ this.applySimpleScroll();
95586
+ });
95587
+ const inpSimpleScrollY_25 = modalAnimateScroll.querySelector('.inp-simplescroll-y-25');
95588
+ inpSimpleScrollY_25.addEventListener('change', () => {
95589
+ this.applySimpleScroll();
95590
+ });
95591
+ const inpSimpleScrollY_35 = modalAnimateScroll.querySelector('.inp-simplescroll-y-35');
95592
+ inpSimpleScrollY_35.addEventListener('change', () => {
95593
+ this.applySimpleScroll();
95594
+ });
95595
+ const inpSimpleScrollY_50 = modalAnimateScroll.querySelector('.inp-simplescroll-y-50');
95596
+ inpSimpleScrollY_50.addEventListener('change', () => {
95597
+ this.applySimpleScroll();
95598
+ });
95599
+ const inpSimpleScrollY_65 = modalAnimateScroll.querySelector('.inp-simplescroll-y-65');
95600
+ inpSimpleScrollY_65.addEventListener('change', () => {
95601
+ this.applySimpleScroll();
95602
+ });
95603
+ const inpSimpleScrollY_75 = modalAnimateScroll.querySelector('.inp-simplescroll-y-75');
95604
+ inpSimpleScrollY_75.addEventListener('change', () => {
95605
+ this.applySimpleScroll();
95606
+ });
95607
+ const inpSimpleScrollY_85 = modalAnimateScroll.querySelector('.inp-simplescroll-y-85');
95608
+ inpSimpleScrollY_85.addEventListener('change', () => {
95609
+ this.applySimpleScroll();
95610
+ });
94897
95611
  const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
94898
95612
  inpSimpleScrollY_End.addEventListener('change', () => {
94899
95613
  this.applySimpleScroll();
94900
- });
95614
+ }); // ---
95615
+
94901
95616
  const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
94902
95617
  inpSimpleScrollScale_Start.addEventListener('change', () => {
94903
95618
  this.applySimpleScroll();
94904
95619
  });
95620
+ const inpSimpleScrollScale_15 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-15');
95621
+ inpSimpleScrollScale_15.addEventListener('change', () => {
95622
+ this.applySimpleScroll();
95623
+ });
95624
+ const inpSimpleScrollScale_25 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-25');
95625
+ inpSimpleScrollScale_25.addEventListener('change', () => {
95626
+ this.applySimpleScroll();
95627
+ });
95628
+ const inpSimpleScrollScale_35 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-35');
95629
+ inpSimpleScrollScale_35.addEventListener('change', () => {
95630
+ this.applySimpleScroll();
95631
+ });
95632
+ const inpSimpleScrollScale_50 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-50');
95633
+ inpSimpleScrollScale_50.addEventListener('change', () => {
95634
+ this.applySimpleScroll();
95635
+ });
95636
+ const inpSimpleScrollScale_65 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-65');
95637
+ inpSimpleScrollScale_65.addEventListener('change', () => {
95638
+ this.applySimpleScroll();
95639
+ });
95640
+ const inpSimpleScrollScale_75 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-75');
95641
+ inpSimpleScrollScale_75.addEventListener('change', () => {
95642
+ this.applySimpleScroll();
95643
+ });
95644
+ const inpSimpleScrollScale_85 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-85');
95645
+ inpSimpleScrollScale_85.addEventListener('change', () => {
95646
+ this.applySimpleScroll();
95647
+ });
94905
95648
  const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
94906
95649
  inpSimpleScrollScale_End.addEventListener('change', () => {
94907
95650
  this.applySimpleScroll();
95651
+ }); // ---
95652
+
95653
+ const inpSimpleScrollRotate_Start = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-start');
95654
+ inpSimpleScrollRotate_Start.addEventListener('change', () => {
95655
+ this.applySimpleScroll();
95656
+ });
95657
+ const inpSimpleScrollRotate_15 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-15');
95658
+ inpSimpleScrollRotate_15.addEventListener('change', () => {
95659
+ this.applySimpleScroll();
95660
+ });
95661
+ const inpSimpleScrollRotate_25 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-25');
95662
+ inpSimpleScrollRotate_25.addEventListener('change', () => {
95663
+ this.applySimpleScroll();
95664
+ });
95665
+ const inpSimpleScrollRotate_35 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-35');
95666
+ inpSimpleScrollRotate_35.addEventListener('change', () => {
95667
+ this.applySimpleScroll();
95668
+ });
95669
+ const inpSimpleScrollRotate_50 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-50');
95670
+ inpSimpleScrollRotate_50.addEventListener('change', () => {
95671
+ this.applySimpleScroll();
95672
+ });
95673
+ const inpSimpleScrollRotate_65 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-65');
95674
+ inpSimpleScrollRotate_65.addEventListener('change', () => {
95675
+ this.applySimpleScroll();
95676
+ });
95677
+ const inpSimpleScrollRotate_75 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-75');
95678
+ inpSimpleScrollRotate_75.addEventListener('change', () => {
95679
+ this.applySimpleScroll();
95680
+ });
95681
+ const inpSimpleScrollRotate_85 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-85');
95682
+ inpSimpleScrollRotate_85.addEventListener('change', () => {
95683
+ this.applySimpleScroll();
95684
+ });
95685
+ const inpSimpleScrollRotate_End = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-end');
95686
+ inpSimpleScrollRotate_End.addEventListener('change', () => {
95687
+ this.applySimpleScroll();
95688
+ }); // ---
95689
+
95690
+ const inpSimpleScrollOpacity_Start = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-start');
95691
+ inpSimpleScrollOpacity_Start.addEventListener('change', () => {
95692
+ this.applySimpleScroll();
95693
+ });
95694
+ const inpSimpleScrollOpacity_15 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-15');
95695
+ inpSimpleScrollOpacity_15.addEventListener('change', () => {
95696
+ this.applySimpleScroll();
95697
+ });
95698
+ const inpSimpleScrollOpacity_25 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-25');
95699
+ inpSimpleScrollOpacity_25.addEventListener('change', () => {
95700
+ this.applySimpleScroll();
95701
+ });
95702
+ const inpSimpleScrollOpacity_35 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-35');
95703
+ inpSimpleScrollOpacity_35.addEventListener('change', () => {
95704
+ this.applySimpleScroll();
95705
+ });
95706
+ const inpSimpleScrollOpacity_50 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-50');
95707
+ inpSimpleScrollOpacity_50.addEventListener('change', () => {
95708
+ this.applySimpleScroll();
95709
+ });
95710
+ const inpSimpleScrollOpacity_65 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-65');
95711
+ inpSimpleScrollOpacity_65.addEventListener('change', () => {
95712
+ this.applySimpleScroll();
95713
+ });
95714
+ const inpSimpleScrollOpacity_75 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-75');
95715
+ inpSimpleScrollOpacity_75.addEventListener('change', () => {
95716
+ this.applySimpleScroll();
94908
95717
  });
95718
+ const inpSimpleScrollOpacity_85 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-85');
95719
+ inpSimpleScrollOpacity_85.addEventListener('change', () => {
95720
+ this.applySimpleScroll();
95721
+ });
95722
+ const inpSimpleScrollOpacity_End = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-end');
95723
+ inpSimpleScrollOpacity_End.addEventListener('change', () => {
95724
+ this.applySimpleScroll();
95725
+ }); // ---
95726
+
94909
95727
  const btnClearSimpleScroll = modalAnimateScroll.querySelector('.cmd-clear-simplescroll');
94910
95728
  btnClearSimpleScroll.addEventListener('click', () => {
94911
95729
  let activeElement;
@@ -94915,6 +95733,7 @@ class AnimateScroll {
94915
95733
  this.builder.editor.saveForUndo();
94916
95734
  this.cleanup(activeElement);
94917
95735
  this.cleanup_leave(activeElement);
95736
+ this.cleanup_timeline(activeElement);
94918
95737
  activeElement.style.transform = '';
94919
95738
  activeElement.style.transition = '';
94920
95739
  activeElement.style.opacity = '';
@@ -94927,6 +95746,72 @@ class AnimateScroll {
94927
95746
 
94928
95747
  this.builder.settings.onChange();
94929
95748
  });
95749
+ const chkDisableSkrollrrOnMobile = modalAnimateScroll.querySelector('#chkDisableSkrollrrOnMobile');
95750
+ chkDisableSkrollrrOnMobile.addEventListener('click', () => {
95751
+ const section = this.builder.activeSection;
95752
+ if (!section) return;
95753
+ this.builder.editor.saveForUndo();
95754
+
95755
+ if (chkDisableSkrollrrOnMobile.checked) {
95756
+ section.classList.add('m-skrollrr-off');
95757
+ } else {
95758
+ section.classList.remove('m-skrollrr-off');
95759
+ } //Trigger Change event
95760
+
95761
+
95762
+ this.builder.onChange();
95763
+ });
95764
+ const chkPinSection = modalAnimateScroll.querySelector('#chkPinSection');
95765
+ const divPinSpacing = modalAnimateScroll.querySelector('.div-pin-spacing');
95766
+ chkPinSection.addEventListener('click', () => {
95767
+ const section = this.builder.activeSection;
95768
+ if (!section) return;
95769
+ this.builder.editor.saveForUndo();
95770
+
95771
+ if (chkPinSection.checked) {
95772
+ section.classList.add('section-pin');
95773
+ section.classList.add('pin-space-20');
95774
+ divPinSpacing.style.display = 'block';
95775
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
95776
+ elms.forEach(elm => {
95777
+ elm.classList.remove('on');
95778
+ });
95779
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="20"]');
95780
+ btn.classList.add('on');
95781
+ } else {
95782
+ section.classList.remove('section-pin');
95783
+ divPinSpacing.style.display = 'none';
95784
+ } //Trigger Change event
95785
+
95786
+
95787
+ this.builder.onChange();
95788
+ });
95789
+ const btnPinSpacing = divPinSpacing.querySelectorAll('.cmd-pin-space');
95790
+ btnPinSpacing.forEach(btn => {
95791
+ btn.addEventListener('click', () => {
95792
+ const section = this.builder.activeSection;
95793
+ if (!section) return;
95794
+ let val = btn.getAttribute('data-value');
95795
+ this.builder.editor.saveForUndo();
95796
+ section.classList.remove('pin-space-20');
95797
+ section.classList.remove('pin-space-40');
95798
+ section.classList.remove('pin-space-60');
95799
+ section.classList.remove('pin-space-80');
95800
+ section.classList.remove('pin-space-100');
95801
+ if (val === '20') section.classList.add('pin-space-20');
95802
+ if (val === '40') section.classList.add('pin-space-40');
95803
+ if (val === '60') section.classList.add('pin-space-60');
95804
+ if (val === '80') section.classList.add('pin-space-80');
95805
+ if (val === '100') section.classList.add('pin-space-100');
95806
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
95807
+ elms.forEach(elm => {
95808
+ elm.classList.remove('on');
95809
+ });
95810
+ btn.classList.add('on'); //Trigger Change event
95811
+
95812
+ this.builder.onChange();
95813
+ });
95814
+ });
94930
95815
  const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
94931
95816
  btnDisableSmoothAnim.addEventListener('click', () => {
94932
95817
  if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -94946,6 +95831,96 @@ class AnimateScroll {
94946
95831
  }
94947
95832
 
94948
95833
  this.applySimpleScroll();
95834
+ });
95835
+ const chkLivePreview = this.builder.sidebar.pageQuickSettings.querySelector('.cmd-live-preview');
95836
+ chkLivePreview.addEventListener(this.builder.isTouchSupport ? 'touchstart' : 'click', () => {
95837
+ if (chkLivePreview.checked) {
95838
+ this.builder.doc.body.removeAttribute('data-skrollrr-off');
95839
+ } else {
95840
+ this.builder.doc.body.setAttribute('data-skrollrr-off', 'true');
95841
+
95842
+ if (this.builder.win.skrollrr) {
95843
+ this.builder.win.skrollrr.refresh(); // remove lax if data-skrollrr-off=true
95844
+ }
95845
+ }
95846
+
95847
+ this.refreshPage();
95848
+
95849
+ if (modalPagePreview.classList.contains('active')) {
95850
+ this.openPreview();
95851
+ }
95852
+ }); // Checkbox touchstart is not triggered, use label:
95853
+
95854
+ if (this.builder.isTouchSupport) {
95855
+ let chkLivePreviewLabel = chkLivePreview.parentNode;
95856
+ chkLivePreviewLabel.addEventListener('touchstart', () => {
95857
+ if (chkLivePreview.checked) {
95858
+ this.builder.doc.body.removeAttribute('data-skrollrr-off');
95859
+ } else {
95860
+ this.builder.doc.body.setAttribute('data-skrollrr-off', 'true');
95861
+
95862
+ if (this.builder.win.skrollrr) {
95863
+ this.builder.win.skrollrr.refresh(); // remove lax if data-skrollrr-off=true
95864
+ }
95865
+ }
95866
+
95867
+ this.refreshPage();
95868
+
95869
+ if (modalPagePreview.classList.contains('active')) {
95870
+ this.openPreview();
95871
+ }
95872
+ });
95873
+ }
95874
+
95875
+ btnOpenPreviewWindow.addEventListener('click', () => {
95876
+ this.openPreview();
95877
+ const pop = this.builder.sidebar.pageQuickSettings;
95878
+ this.builder.editor.util.hidePop(pop);
95879
+ });
95880
+ const btnPreviewClose = modalPagePreview.querySelector('.is-modal-close');
95881
+ btnPreviewClose.addEventListener('click', () => {
95882
+ this.closePreview();
95883
+ });
95884
+ const btnModalSize = modalPagePreview.querySelector('.is-modal-size');
95885
+ btnModalSize.addEventListener('click', () => {
95886
+ if (modalPagePreview.classList.contains('is-screen-1920')) {
95887
+ modalPagePreview.classList.remove('is-screen-1920');
95888
+ modalPagePreview.classList.add('is-screen-1440');
95889
+ localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
95890
+ } else if (modalPagePreview.classList.contains('is-screen-1440')) {
95891
+ modalPagePreview.classList.remove('is-screen-1440');
95892
+ modalPagePreview.classList.add('is-screen-1024');
95893
+ localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
95894
+ } else if (modalPagePreview.classList.contains('is-screen-1024')) {
95895
+ modalPagePreview.classList.remove('is-screen-1024');
95896
+ modalPagePreview.classList.add('is-screen-768');
95897
+ localStorage.setItem('_livepreviewscreen', 'is-screen-768');
95898
+ } else if (modalPagePreview.classList.contains('is-screen-768')) {
95899
+ modalPagePreview.classList.remove('is-screen-768');
95900
+ modalPagePreview.classList.add('is-screen-375');
95901
+ localStorage.setItem('_livepreviewscreen', 'is-screen-375');
95902
+ } else if (modalPagePreview.classList.contains('is-screen-375')) {
95903
+ modalPagePreview.classList.remove('is-screen-375');
95904
+ modalPagePreview.classList.add('is-screen-1920');
95905
+ localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
95906
+ }
95907
+
95908
+ let html = this.builder.html();
95909
+ localStorage.setItem('preview-html', html);
95910
+ let mainCss = this.builder.mainCss();
95911
+ localStorage.setItem('preview-maincss', mainCss);
95912
+ let sectionCss = this.builder.sectionCss();
95913
+ localStorage.setItem('preview-sectioncss', sectionCss); // const div = modalPagePreview.querySelector('.preview-screen');
95914
+ // div.innerHTML = '<iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>';
95915
+
95916
+ const iframe = modalPagePreview.querySelector('iframe'); // iframe.onload = ()=>{
95917
+ // setTimeout(()=>{
95918
+ // // iframe.contentWindow.scrollTo(0,this.builder.win.scrollY);
95919
+ // this.scrollSync(iframe);
95920
+ // },1000);
95921
+ // };
95922
+
95923
+ iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
94949
95924
  }); // ---
94950
95925
  //Extend onPageContentClick
94951
95926
 
@@ -94958,7 +95933,170 @@ class AnimateScroll {
94958
95933
  setTimeout(() => {
94959
95934
  this.clickContent();
94960
95935
  }, 30);
95936
+ }; //Extend onChange
95937
+
95938
+
95939
+ let old2 = this.builder.settings.onChange;
95940
+
95941
+ this.builder.settings.onChange = () => {
95942
+ old2.call(this);
95943
+
95944
+ if (modalPagePreview.classList.contains('active')) {
95945
+ let html = this.builder.html();
95946
+ localStorage.setItem('preview-html', html);
95947
+ let mainCss = this.builder.mainCss();
95948
+ localStorage.setItem('preview-maincss', mainCss);
95949
+ let sectionCss = this.builder.sectionCss();
95950
+ localStorage.setItem('preview-sectioncss', sectionCss); // this.adjustMarginBottom();
95951
+
95952
+ modalPagePreview.querySelector('iframe').src = this.builder.previewURL;
95953
+ }
94961
95954
  };
95955
+
95956
+ const iframe = modalPagePreview.querySelector('iframe');
95957
+
95958
+ iframe.onload = () => {
95959
+ setTimeout(() => {
95960
+ // iframe.contentWindow.scrollTo(0,this.builder.win.scrollY);
95961
+ this.scrollSync(iframe);
95962
+ }, 1000);
95963
+ };
95964
+
95965
+ this.builder.win.addEventListener('scroll', () => {
95966
+ this.scrollSync(iframe);
95967
+ });
95968
+ }
95969
+
95970
+ scrollSync(iframe) {
95971
+ if (!this.modalPagePreview.classList.contains('active')) return;
95972
+ if (this.builder.cancelScrollSync) return;
95973
+
95974
+ try {
95975
+ // let marginTop = parseInt(this.builder.wrapperEl.style.marginTop);
95976
+ let ifrScrollHeight = iframe.contentWindow.document.querySelector('.is-wrapper').offsetHeight;
95977
+ let pgScrollHeight = this.builder.wrapperEl.offsetHeight * this.builder.editor.zoom; // + marginTop;
95978
+
95979
+ let adj = ifrScrollHeight - pgScrollHeight; // let ifrScrollHeight2 = iframe.contentWindow.document.body.scrollHeight;
95980
+ // let pgScrollHeight2 = this.builder.doc.body.scrollHeight;
95981
+ // console.log(ifrScrollHeight2, pgScrollHeight2)
95982
+ // if(pgScrollHeight2<ifrScrollHeight2) {
95983
+ // let adj2 = ifrScrollHeight2-pgScrollHeight2;
95984
+ // this.builder.wrapperEl.style.marginBottom = (adj2)+'px';
95985
+ // console.log(adj2)
95986
+ // }
95987
+
95988
+ this.builder.wrapperEl.style.marginBottom = '100vh';
95989
+ iframe.contentWindow.scrollTo(0, this.builder.win.scrollY + this.builder.win.scrollY / pgScrollHeight * adj);
95990
+ } catch (e) {// Do Nothing
95991
+ }
95992
+ }
95993
+ /*
95994
+ adjustMarginBottom() {
95995
+ let n = 100;
95996
+ let pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-20');
95997
+ n += 20 * pins.length;
95998
+ pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-40');
95999
+ n += 40 * pins.length;
96000
+ pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-60');
96001
+ n += 60 * pins.length;
96002
+ pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-80');
96003
+ n += 80 * pins.length;
96004
+ pins = this.builder.wrapperEl.querySelectorAll('.section-pin.pin-space-100');
96005
+ n += 100 * pins.length;
96006
+ if(this.builder.wrapperEl.querySelector('.section-pin')) {
96007
+ this.builder.wrapperEl.style.marginBottom = n + 'vh';
96008
+ } else {
96009
+ this.builder.wrapperEl.style.marginBottom = '';
96010
+ }
96011
+ }
96012
+ */
96013
+
96014
+
96015
+ openPreview() {
96016
+ const modalPagePreview = this.builderStuff.querySelector('.is-modal.page-preview');
96017
+ const btnOpenPreviewWindow = this.btnOpenPreviewWindow;
96018
+ let html = this.builder.html();
96019
+ localStorage.setItem('preview-html', html);
96020
+ let mainCss = this.builder.mainCss();
96021
+ localStorage.setItem('preview-maincss', mainCss);
96022
+ let sectionCss = this.builder.sectionCss();
96023
+ localStorage.setItem('preview-sectioncss', sectionCss);
96024
+ modalPagePreview.classList.add('active');
96025
+ btnOpenPreviewWindow.classList.add('on');
96026
+ const iframe = modalPagePreview.querySelector('iframe');
96027
+ iframe.src = this.builder.previewURL; // this.adjustMarginBottom();
96028
+
96029
+ if (localStorage.getItem('_livepreviewscreen') != null) {
96030
+ modalPagePreview.classList.remove('is-screen-1920');
96031
+ modalPagePreview.classList.remove('is-screen-1440');
96032
+ modalPagePreview.classList.remove('is-screen-1024');
96033
+ modalPagePreview.classList.remove('is-screen-768');
96034
+ modalPagePreview.classList.remove('is-screen-375');
96035
+ modalPagePreview.classList.add(localStorage.getItem('_livepreviewscreen'));
96036
+ }
96037
+
96038
+ localStorage.setItem('_livepreview', '1');
96039
+ }
96040
+
96041
+ closePreview() {
96042
+ const modalPagePreview = this.builderStuff.querySelector('.is-modal.page-preview');
96043
+ const btnOpenPreviewWindow = this.btnOpenPreviewWindow;
96044
+ modalPagePreview.classList.remove('active');
96045
+ btnOpenPreviewWindow.classList.remove('on');
96046
+ this.builder.wrapperEl.style.marginBottom = '';
96047
+ localStorage.removeItem('_livepreview');
96048
+ }
96049
+
96050
+ refreshPage() {
96051
+ // Save selection
96052
+ let target = this.getTarget();
96053
+ let activeElement = target.element;
96054
+ if (activeElement) activeElement.setAttribute('data-save-target', '1');
96055
+ if (this.builder.editor.activeElement) this.builder.editor.activeElement.setAttribute('data-save-element', '1');
96056
+ if (this.builder.activeBox) this.builder.activeBox.setAttribute('data-save-box', '1');
96057
+ if (this.builder.activeSection) this.builder.activeSection.setAttribute('data-save-section', '1');
96058
+ this.builder.refreshPage(() => {
96059
+ let reOpen = false;
96060
+
96061
+ if (this.builder.sidebar.pageQuickSettings.classList.contains('active')) {
96062
+ reOpen = true;
96063
+ } // Restore selection
96064
+
96065
+
96066
+ activeElement = this.builder.doc.querySelector('[data-save-target]');
96067
+
96068
+ if (activeElement) {
96069
+ activeElement.click();
96070
+ activeElement.removeAttribute('data-save-target');
96071
+ }
96072
+
96073
+ let element = this.builder.doc.querySelector('[data-save-element]');
96074
+
96075
+ if (element) {
96076
+ element.click();
96077
+ element.removeAttribute('data-save-element');
96078
+ }
96079
+
96080
+ let box = this.builder.doc.querySelector('[data-save-box]');
96081
+
96082
+ if (box) {
96083
+ box.classList.add('box-select');
96084
+ box.removeAttribute('data-save-box');
96085
+ }
96086
+
96087
+ let section = this.builder.doc.querySelector('[data-save-section]');
96088
+
96089
+ if (section) {
96090
+ section.classList.add('section-select');
96091
+ section.removeAttribute('data-save-section');
96092
+ }
96093
+
96094
+ if (reOpen) {
96095
+ this.builder.sidebar.reOpenSettings();
96096
+ }
96097
+
96098
+ this.builder.rePositionTool();
96099
+ });
94962
96100
  }
94963
96101
 
94964
96102
  clickContent() {
@@ -95095,22 +96233,149 @@ class AnimateScroll {
95095
96233
  inpRotateCounter_leave.value = '';
95096
96234
  inpRotateClockwise_leave.value = '';
95097
96235
  const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
96236
+ const inpSimpleScrollX_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-15');
96237
+ const inpSimpleScrollX_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-25');
96238
+ const inpSimpleScrollX_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-35');
96239
+ const inpSimpleScrollX_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-50');
96240
+ const inpSimpleScrollX_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-65');
96241
+ const inpSimpleScrollX_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-75');
96242
+ const inpSimpleScrollX_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-85');
95098
96243
  const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95099
96244
  const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
96245
+ const inpSimpleScrollY_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-15');
96246
+ const inpSimpleScrollY_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-25');
96247
+ const inpSimpleScrollY_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-35');
96248
+ const inpSimpleScrollY_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-50');
96249
+ const inpSimpleScrollY_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-65');
96250
+ const inpSimpleScrollY_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-75');
96251
+ const inpSimpleScrollY_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-85');
95100
96252
  const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95101
96253
  const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
96254
+ const inpSimpleScrollScale_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-15');
96255
+ const inpSimpleScrollScale_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-25');
96256
+ const inpSimpleScrollScale_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-35');
96257
+ const inpSimpleScrollScale_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-50');
96258
+ const inpSimpleScrollScale_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-65');
96259
+ const inpSimpleScrollScale_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-75');
96260
+ const inpSimpleScrollScale_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-85');
95102
96261
  const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
96262
+ const inpSimpleScrollRotate_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-start');
96263
+ const inpSimpleScrollRotate_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-15');
96264
+ const inpSimpleScrollRotate_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-25');
96265
+ const inpSimpleScrollRotate_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-35');
96266
+ const inpSimpleScrollRotate_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-50');
96267
+ const inpSimpleScrollRotate_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-65');
96268
+ const inpSimpleScrollRotate_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-75');
96269
+ const inpSimpleScrollRotate_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-85');
96270
+ const inpSimpleScrollRotate_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-end');
96271
+ const inpSimpleScrollOpacity_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-start');
96272
+ const inpSimpleScrollOpacity_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-15');
96273
+ const inpSimpleScrollOpacity_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-25');
96274
+ const inpSimpleScrollOpacity_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-35');
96275
+ const inpSimpleScrollOpacity_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-50');
96276
+ const inpSimpleScrollOpacity_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-65');
96277
+ const inpSimpleScrollOpacity_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-75');
96278
+ const inpSimpleScrollOpacity_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-85');
96279
+ const inpSimpleScrollOpacity_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-end');
95103
96280
  inpSimpleScrollX_Start.value = '';
96281
+ inpSimpleScrollX_15.value = '';
96282
+ inpSimpleScrollX_25.value = '';
96283
+ inpSimpleScrollX_35.value = '';
96284
+ inpSimpleScrollX_50.value = '';
96285
+ inpSimpleScrollX_65.value = '';
96286
+ inpSimpleScrollX_75.value = '';
96287
+ inpSimpleScrollX_85.value = '';
95104
96288
  inpSimpleScrollX_End.value = '';
95105
96289
  inpSimpleScrollY_Start.value = '';
96290
+ inpSimpleScrollY_15.value = '';
96291
+ inpSimpleScrollY_25.value = '';
96292
+ inpSimpleScrollY_35.value = '';
96293
+ inpSimpleScrollY_50.value = '';
96294
+ inpSimpleScrollY_65.value = '';
96295
+ inpSimpleScrollY_75.value = '';
96296
+ inpSimpleScrollY_85.value = '';
95106
96297
  inpSimpleScrollY_End.value = '';
95107
96298
  inpSimpleScrollScale_Start.value = '';
96299
+ inpSimpleScrollScale_15.value = '';
96300
+ inpSimpleScrollScale_25.value = '';
96301
+ inpSimpleScrollScale_35.value = '';
96302
+ inpSimpleScrollScale_50.value = '';
96303
+ inpSimpleScrollScale_65.value = '';
96304
+ inpSimpleScrollScale_75.value = '';
96305
+ inpSimpleScrollScale_85.value = '';
95108
96306
  inpSimpleScrollScale_End.value = '';
96307
+ inpSimpleScrollRotate_Start.value = '';
96308
+ inpSimpleScrollRotate_15.value = '';
96309
+ inpSimpleScrollRotate_25.value = '';
96310
+ inpSimpleScrollRotate_35.value = '';
96311
+ inpSimpleScrollRotate_50.value = '';
96312
+ inpSimpleScrollRotate_65.value = '';
96313
+ inpSimpleScrollRotate_75.value = '';
96314
+ inpSimpleScrollRotate_85.value = '';
96315
+ inpSimpleScrollRotate_End.value = '';
96316
+ inpSimpleScrollOpacity_Start.value = '';
96317
+ inpSimpleScrollOpacity_15.value = '';
96318
+ inpSimpleScrollOpacity_25.value = '';
96319
+ inpSimpleScrollOpacity_35.value = '';
96320
+ inpSimpleScrollOpacity_50.value = '';
96321
+ inpSimpleScrollOpacity_65.value = '';
96322
+ inpSimpleScrollOpacity_75.value = '';
96323
+ inpSimpleScrollOpacity_85.value = '';
96324
+ inpSimpleScrollOpacity_End.value = '';
95109
96325
  }
95110
96326
 
95111
96327
  read() {
95112
96328
  // clear
95113
- this.clearSettings();
96329
+ this.clearSettings(); // Section Pin
96330
+
96331
+ const activeSection = this.builder.activeSection;
96332
+
96333
+ if (activeSection) {
96334
+ const divPinSpacing = this.modalAnimateScroll.querySelector('.div-pin-spacing');
96335
+ const chkPinSection = this.modalAnimateScroll.querySelector('#chkPinSection');
96336
+
96337
+ if (activeSection.classList.contains('section-pin')) {
96338
+ chkPinSection.checked = true;
96339
+ divPinSpacing.style.display = 'block';
96340
+ } else {
96341
+ chkPinSection.checked = false;
96342
+ divPinSpacing.style.display = 'none';
96343
+ }
96344
+
96345
+ const chkDisableSkrollrrOnMobile = this.modalAnimateScroll.querySelector('#chkDisableSkrollrrOnMobile');
96346
+
96347
+ if (activeSection.classList.contains('m-skrollrr-off')) {
96348
+ chkDisableSkrollrrOnMobile.checked = true;
96349
+ } else {
96350
+ chkDisableSkrollrrOnMobile.checked = false;
96351
+ }
96352
+
96353
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
96354
+ elms.forEach(elm => {
96355
+ elm.classList.remove('on');
96356
+ });
96357
+
96358
+ if (activeSection.classList.contains('pin-space-20')) {
96359
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="20"]');
96360
+ btn.classList.add('on');
96361
+ } else if (activeSection.classList.contains('pin-space-40')) {
96362
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="40"]');
96363
+ btn.classList.add('on');
96364
+ } else if (activeSection.classList.contains('pin-space-60')) {
96365
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="60"]');
96366
+ btn.classList.add('on');
96367
+ } else if (activeSection.classList.contains('pin-space-80')) {
96368
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="80"]');
96369
+ btn.classList.add('on');
96370
+ } else if (activeSection.classList.contains('pin-space-100')) {
96371
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="100"]');
96372
+ btn.classList.add('on');
96373
+ } else {
96374
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="0"]');
96375
+ btn.classList.add('on');
96376
+ }
96377
+ }
96378
+
95114
96379
  let activeElement;
95115
96380
  let target = this.getTarget();
95116
96381
  activeElement = target.element;
@@ -95161,19 +96426,100 @@ class AnimateScroll {
95161
96426
  }
95162
96427
  }); // Simple Scroll
95163
96428
 
95164
- if (activeElement.hasAttribute('data-bottom-top') && activeElement.hasAttribute('data-top-bottom') && !(activeElement.hasAttribute('data-center-bottom') || activeElement.hasAttribute('data-100-top') || activeElement.hasAttribute('data-50-top') || activeElement.hasAttribute('data-top'))) {
95165
- const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
95166
- const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95167
- const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
95168
- const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95169
- const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
95170
- const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
95171
- inpSimpleScrollX_End.value = '';
95172
- inpSimpleScrollY_Start.value = '';
95173
- inpSimpleScrollY_End.value = '';
95174
- inpSimpleScrollScale_Start.value = '';
95175
- inpSimpleScrollScale_End.value = '';
95176
- let dummyElm = document.querySelector('.dummy-elm');
96429
+ const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
96430
+ const inpSimpleScrollX_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-15');
96431
+ const inpSimpleScrollX_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-25');
96432
+ const inpSimpleScrollX_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-35');
96433
+ const inpSimpleScrollX_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-50');
96434
+ const inpSimpleScrollX_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-65');
96435
+ const inpSimpleScrollX_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-75');
96436
+ const inpSimpleScrollX_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-85');
96437
+ const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
96438
+ const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
96439
+ const inpSimpleScrollY_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-15');
96440
+ const inpSimpleScrollY_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-25');
96441
+ const inpSimpleScrollY_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-35');
96442
+ const inpSimpleScrollY_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-50');
96443
+ const inpSimpleScrollY_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-65');
96444
+ const inpSimpleScrollY_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-75');
96445
+ const inpSimpleScrollY_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-85');
96446
+ const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
96447
+ const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
96448
+ const inpSimpleScrollScale_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-15');
96449
+ const inpSimpleScrollScale_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-25');
96450
+ const inpSimpleScrollScale_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-35');
96451
+ const inpSimpleScrollScale_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-50');
96452
+ const inpSimpleScrollScale_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-65');
96453
+ const inpSimpleScrollScale_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-75');
96454
+ const inpSimpleScrollScale_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-85');
96455
+ const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
96456
+ const inpSimpleScrollRotate_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-start');
96457
+ const inpSimpleScrollRotate_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-15');
96458
+ const inpSimpleScrollRotate_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-25');
96459
+ const inpSimpleScrollRotate_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-35');
96460
+ const inpSimpleScrollRotate_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-50');
96461
+ const inpSimpleScrollRotate_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-65');
96462
+ const inpSimpleScrollRotate_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-75');
96463
+ const inpSimpleScrollRotate_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-85');
96464
+ const inpSimpleScrollRotate_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-rotate-end');
96465
+ const inpSimpleScrollOpacity_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-start');
96466
+ const inpSimpleScrollOpacity_15 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-15');
96467
+ const inpSimpleScrollOpacity_25 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-25');
96468
+ const inpSimpleScrollOpacity_35 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-35');
96469
+ const inpSimpleScrollOpacity_50 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-50');
96470
+ const inpSimpleScrollOpacity_65 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-65');
96471
+ const inpSimpleScrollOpacity_75 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-75');
96472
+ const inpSimpleScrollOpacity_85 = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-85');
96473
+ const inpSimpleScrollOpacity_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-opacity-end');
96474
+ inpSimpleScrollX_Start.value = '';
96475
+ inpSimpleScrollX_15.value = '';
96476
+ inpSimpleScrollX_25.value = '';
96477
+ inpSimpleScrollX_35.value = '';
96478
+ inpSimpleScrollX_50.value = '';
96479
+ inpSimpleScrollX_65.value = '';
96480
+ inpSimpleScrollX_75.value = '';
96481
+ inpSimpleScrollX_85.value = '';
96482
+ inpSimpleScrollX_End.value = '';
96483
+ inpSimpleScrollY_Start.value = '';
96484
+ inpSimpleScrollY_15.value = '';
96485
+ inpSimpleScrollY_25.value = '';
96486
+ inpSimpleScrollY_35.value = '';
96487
+ inpSimpleScrollY_50.value = '';
96488
+ inpSimpleScrollY_65.value = '';
96489
+ inpSimpleScrollY_75.value = '';
96490
+ inpSimpleScrollY_85.value = '';
96491
+ inpSimpleScrollY_End.value = '';
96492
+ inpSimpleScrollScale_Start.value = '';
96493
+ inpSimpleScrollScale_15.value = '';
96494
+ inpSimpleScrollScale_25.value = '';
96495
+ inpSimpleScrollScale_35.value = '';
96496
+ inpSimpleScrollScale_50.value = '';
96497
+ inpSimpleScrollScale_65.value = '';
96498
+ inpSimpleScrollScale_75.value = '';
96499
+ inpSimpleScrollScale_85.value = '';
96500
+ inpSimpleScrollScale_End.value = '';
96501
+ inpSimpleScrollRotate_Start.value = '';
96502
+ inpSimpleScrollRotate_15.value = '';
96503
+ inpSimpleScrollRotate_25.value = '';
96504
+ inpSimpleScrollRotate_35.value = '';
96505
+ inpSimpleScrollRotate_50.value = '';
96506
+ inpSimpleScrollRotate_65.value = '';
96507
+ inpSimpleScrollRotate_75.value = '';
96508
+ inpSimpleScrollRotate_85.value = '';
96509
+ inpSimpleScrollRotate_End.value = '';
96510
+ inpSimpleScrollOpacity_Start.value = '';
96511
+ inpSimpleScrollOpacity_15.value = '';
96512
+ inpSimpleScrollOpacity_25.value = '';
96513
+ inpSimpleScrollOpacity_35.value = '';
96514
+ inpSimpleScrollOpacity_50.value = '';
96515
+ inpSimpleScrollOpacity_65.value = '';
96516
+ inpSimpleScrollOpacity_75.value = '';
96517
+ inpSimpleScrollOpacity_85.value = '';
96518
+ inpSimpleScrollOpacity_End.value = '';
96519
+
96520
+ if (activeElement.hasAttribute('data-bottom-top') && activeElement.hasAttribute('data-top-bottom') && !(activeElement.hasAttribute('data-center-bottom') || activeElement.hasAttribute('data-100-top') || activeElement.hasAttribute('data-50-top') || activeElement.hasAttribute('data-top')) || activeElement.hasAttribute('data-in') || activeElement.hasAttribute('data-in-150') || activeElement.hasAttribute('data-in-300') || activeElement.hasAttribute('data-cen--150') || activeElement.hasAttribute('data-cen') || activeElement.hasAttribute('data-cen-150') || activeElement.hasAttribute('data-out--300') || activeElement.hasAttribute('data-out--150') || activeElement.hasAttribute('data-out')) {
96521
+ let dummyElm = document.querySelector('.dummy-elm'); // read v1
96522
+
95177
96523
  let css1 = activeElement.getAttribute('data-bottom-top');
95178
96524
  dummyElm.style.cssText = css1;
95179
96525
  let transform = this.getTransform(dummyElm, css1);
@@ -95190,6 +96536,14 @@ class AnimateScroll {
95190
96536
  inpSimpleScrollScale_Start.value = transform.scale;
95191
96537
  }
95192
96538
 
96539
+ if (transform.rotate) {
96540
+ inpSimpleScrollRotate_Start.value = transform.rotate;
96541
+ }
96542
+
96543
+ if (transform.opacity) {
96544
+ inpSimpleScrollOpacity_Start.value = transform.opacity;
96545
+ }
96546
+
95193
96547
  let css2 = activeElement.getAttribute('data-top-bottom');
95194
96548
  dummyElm.style.cssText = css2;
95195
96549
  transform = this.getTransform(dummyElm, css2);
@@ -95206,6 +96560,88 @@ class AnimateScroll {
95206
96560
  inpSimpleScrollScale_End.value = transform.scale;
95207
96561
  }
95208
96562
 
96563
+ if (transform.rotate) {
96564
+ inpSimpleScrollRotate_End.value = transform.rotate;
96565
+ }
96566
+
96567
+ if (transform.opacity) {
96568
+ inpSimpleScrollOpacity_End.value = transform.opacity;
96569
+ } // read v2
96570
+
96571
+
96572
+ let css = activeElement.getAttribute('data-in');
96573
+ dummyElm.style.cssText = css;
96574
+ transform = this.getTransform(dummyElm, css);
96575
+ if (transform.translateX) inpSimpleScrollX_Start.value = transform.translateX.replace('px', '');
96576
+ if (transform.translateY) inpSimpleScrollY_Start.value = transform.translateY.replace('px', '');
96577
+ if (transform.scale) inpSimpleScrollScale_Start.value = transform.scale;
96578
+ if (transform.rotate) inpSimpleScrollRotate_Start.value = transform.rotate;
96579
+ if (transform.opacity) inpSimpleScrollOpacity_Start.value = transform.opacity;
96580
+ css = activeElement.getAttribute('data-in-150');
96581
+ dummyElm.style.cssText = css;
96582
+ transform = this.getTransform(dummyElm, css);
96583
+ if (transform.translateX) inpSimpleScrollX_15.value = transform.translateX.replace('px', '');
96584
+ if (transform.translateY) inpSimpleScrollY_15.value = transform.translateY.replace('px', '');
96585
+ if (transform.scale) inpSimpleScrollScale_15.value = transform.scale;
96586
+ if (transform.rotate) inpSimpleScrollRotate_15.value = transform.rotate;
96587
+ if (transform.opacity) inpSimpleScrollOpacity_15.value = transform.opacity;
96588
+ css = activeElement.getAttribute('data-in-300');
96589
+ dummyElm.style.cssText = css;
96590
+ transform = this.getTransform(dummyElm, css);
96591
+ if (transform.translateX) inpSimpleScrollX_25.value = transform.translateX.replace('px', '');
96592
+ if (transform.translateY) inpSimpleScrollY_25.value = transform.translateY.replace('px', '');
96593
+ if (transform.scale) inpSimpleScrollScale_25.value = transform.scale;
96594
+ if (transform.rotate) inpSimpleScrollRotate_25.value = transform.rotate;
96595
+ if (transform.opacity) inpSimpleScrollOpacity_25.value = transform.opacity;
96596
+ css = activeElement.getAttribute('data-cen--150');
96597
+ dummyElm.style.cssText = css;
96598
+ transform = this.getTransform(dummyElm, css);
96599
+ if (transform.translateX) inpSimpleScrollX_35.value = transform.translateX.replace('px', '');
96600
+ if (transform.translateY) inpSimpleScrollY_35.value = transform.translateY.replace('px', '');
96601
+ if (transform.scale) inpSimpleScrollScale_35.value = transform.scale;
96602
+ if (transform.rotate) inpSimpleScrollRotate_35.value = transform.rotate;
96603
+ if (transform.opacity) inpSimpleScrollOpacity_35.value = transform.opacity;
96604
+ css = activeElement.getAttribute('data-cen');
96605
+ dummyElm.style.cssText = css;
96606
+ transform = this.getTransform(dummyElm, css);
96607
+ if (transform.translateX) inpSimpleScrollX_50.value = transform.translateX.replace('px', '');
96608
+ if (transform.translateY) inpSimpleScrollY_50.value = transform.translateY.replace('px', '');
96609
+ if (transform.scale) inpSimpleScrollScale_50.value = transform.scale;
96610
+ if (transform.rotate) inpSimpleScrollRotate_50.value = transform.rotate;
96611
+ if (transform.opacity) inpSimpleScrollOpacity_50.value = transform.opacity;
96612
+ css = activeElement.getAttribute('data-cen-150');
96613
+ dummyElm.style.cssText = css;
96614
+ transform = this.getTransform(dummyElm, css);
96615
+ if (transform.translateX) inpSimpleScrollX_65.value = transform.translateX.replace('px', '');
96616
+ if (transform.translateY) inpSimpleScrollY_65.value = transform.translateY.replace('px', '');
96617
+ if (transform.scale) inpSimpleScrollScale_65.value = transform.scale;
96618
+ if (transform.rotate) inpSimpleScrollRotate_65.value = transform.rotate;
96619
+ if (transform.opacity) inpSimpleScrollOpacity_65.value = transform.opacity;
96620
+ css = activeElement.getAttribute('data-out--300');
96621
+ dummyElm.style.cssText = css;
96622
+ transform = this.getTransform(dummyElm, css);
96623
+ if (transform.translateX) inpSimpleScrollX_75.value = transform.translateX.replace('px', '');
96624
+ if (transform.translateY) inpSimpleScrollY_75.value = transform.translateY.replace('px', '');
96625
+ if (transform.scale) inpSimpleScrollScale_75.value = transform.scale;
96626
+ if (transform.rotate) inpSimpleScrollRotate_75.value = transform.rotate;
96627
+ if (transform.opacity) inpSimpleScrollOpacity_75.value = transform.opacity;
96628
+ css = activeElement.getAttribute('data-out--150');
96629
+ dummyElm.style.cssText = css;
96630
+ transform = this.getTransform(dummyElm, css);
96631
+ if (transform.translateX) inpSimpleScrollX_85.value = transform.translateX.replace('px', '');
96632
+ if (transform.translateY) inpSimpleScrollY_85.value = transform.translateY.replace('px', '');
96633
+ if (transform.scale) inpSimpleScrollScale_85.value = transform.scale;
96634
+ if (transform.rotate) inpSimpleScrollRotate_85.value = transform.rotate;
96635
+ if (transform.opacity) inpSimpleScrollOpacity_85.value = transform.opacity;
96636
+ css = activeElement.getAttribute('data-out');
96637
+ dummyElm.style.cssText = css;
96638
+ transform = this.getTransform(dummyElm, css);
96639
+ if (transform.translateX) inpSimpleScrollX_End.value = transform.translateX.replace('px', '');
96640
+ if (transform.translateY) inpSimpleScrollY_End.value = transform.translateY.replace('px', '');
96641
+ if (transform.scale) inpSimpleScrollScale_End.value = transform.scale;
96642
+ if (transform.rotate) inpSimpleScrollRotate_End.value = transform.rotate;
96643
+ if (transform.opacity) inpSimpleScrollOpacity_End.value = transform.opacity; // ---/read
96644
+
95209
96645
  if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
95210
96646
  // default
95211
96647
  btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
@@ -95543,17 +96979,17 @@ class AnimateScroll {
95543
96979
  activeElement.classList.remove('once');
95544
96980
  setTimeout(() => {
95545
96981
  activeElement.classList.add(val);
95546
- if (once) activeElement.classList.add('once');
96982
+ if (once) activeElement.classList.add('once');else activeElement.classList.remove('once');
95547
96983
  activeElement.classList.add('is-animated');
95548
96984
  setTimeout(() => {
95549
96985
  activeElement.style.transition = '';
95550
96986
  activeElement.classList.add('is-inview');
96987
+ this.builder.settings.onRender(); //Trigger Change event
96988
+
96989
+ this.builder.settings.onChange();
95551
96990
  }, 10);
95552
96991
  }, 10);
95553
- } //Trigger Change event
95554
-
95555
-
95556
- this.builder.settings.onChange();
96992
+ }
95557
96993
  }
95558
96994
 
95559
96995
  applySimpleScroll() {
@@ -95563,36 +96999,201 @@ class AnimateScroll {
95563
96999
  if (!activeElement) return;
95564
97000
  const modalAnimateScroll = this.modalAnimateScroll;
95565
97001
  const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
97002
+ const inpSimpleScrollX_15 = modalAnimateScroll.querySelector('.inp-simplescroll-x-15');
97003
+ const inpSimpleScrollX_25 = modalAnimateScroll.querySelector('.inp-simplescroll-x-25');
97004
+ const inpSimpleScrollX_35 = modalAnimateScroll.querySelector('.inp-simplescroll-x-35');
97005
+ const inpSimpleScrollX_50 = modalAnimateScroll.querySelector('.inp-simplescroll-x-50');
97006
+ const inpSimpleScrollX_65 = modalAnimateScroll.querySelector('.inp-simplescroll-x-65');
97007
+ const inpSimpleScrollX_75 = modalAnimateScroll.querySelector('.inp-simplescroll-x-75');
97008
+ const inpSimpleScrollX_85 = modalAnimateScroll.querySelector('.inp-simplescroll-x-85');
95566
97009
  const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95567
97010
  const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
97011
+ const inpSimpleScrollY_15 = modalAnimateScroll.querySelector('.inp-simplescroll-y-15');
97012
+ const inpSimpleScrollY_25 = modalAnimateScroll.querySelector('.inp-simplescroll-y-25');
97013
+ const inpSimpleScrollY_35 = modalAnimateScroll.querySelector('.inp-simplescroll-y-35');
97014
+ const inpSimpleScrollY_50 = modalAnimateScroll.querySelector('.inp-simplescroll-y-50');
97015
+ const inpSimpleScrollY_65 = modalAnimateScroll.querySelector('.inp-simplescroll-y-65');
97016
+ const inpSimpleScrollY_75 = modalAnimateScroll.querySelector('.inp-simplescroll-y-75');
97017
+ const inpSimpleScrollY_85 = modalAnimateScroll.querySelector('.inp-simplescroll-y-85');
95568
97018
  const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95569
97019
  const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
97020
+ const inpSimpleScrollScale_15 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-15');
97021
+ const inpSimpleScrollScale_25 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-25');
97022
+ const inpSimpleScrollScale_35 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-35');
97023
+ const inpSimpleScrollScale_50 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-50');
97024
+ const inpSimpleScrollScale_65 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-65');
97025
+ const inpSimpleScrollScale_75 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-75');
97026
+ const inpSimpleScrollScale_85 = modalAnimateScroll.querySelector('.inp-simplescroll-scale-85');
95570
97027
  const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
97028
+ const inpSimpleScrollRotate_Start = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-start');
97029
+ const inpSimpleScrollRotate_15 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-15');
97030
+ const inpSimpleScrollRotate_25 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-25');
97031
+ const inpSimpleScrollRotate_35 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-35');
97032
+ const inpSimpleScrollRotate_50 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-50');
97033
+ const inpSimpleScrollRotate_65 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-65');
97034
+ const inpSimpleScrollRotate_75 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-75');
97035
+ const inpSimpleScrollRotate_85 = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-85');
97036
+ const inpSimpleScrollRotate_End = modalAnimateScroll.querySelector('.inp-simplescroll-rotate-end');
97037
+ const inpSimpleScrollOpacity_Start = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-start');
97038
+ const inpSimpleScrollOpacity_15 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-15');
97039
+ const inpSimpleScrollOpacity_25 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-25');
97040
+ const inpSimpleScrollOpacity_35 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-35');
97041
+ const inpSimpleScrollOpacity_50 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-50');
97042
+ const inpSimpleScrollOpacity_65 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-65');
97043
+ const inpSimpleScrollOpacity_75 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-75');
97044
+ const inpSimpleScrollOpacity_85 = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-85');
97045
+ const inpSimpleScrollOpacity_End = modalAnimateScroll.querySelector('.inp-simplescroll-opacity-end');
95571
97046
  let valXStart;
95572
97047
  if (inpSimpleScrollX_Start.value !== '') valXStart = inpSimpleScrollX_Start.value + (inpSimpleScrollX_Start.value.indexOf('%') !== -1 ? '' : 'px');
97048
+ let valX15;
97049
+ if (inpSimpleScrollX_15.value !== '') valX15 = inpSimpleScrollX_15.value + (inpSimpleScrollX_15.value.indexOf('%') !== -1 ? '' : 'px');
97050
+ let valX25;
97051
+ if (inpSimpleScrollX_25.value !== '') valX25 = inpSimpleScrollX_25.value + (inpSimpleScrollX_25.value.indexOf('%') !== -1 ? '' : 'px');
97052
+ let valX35;
97053
+ if (inpSimpleScrollX_35.value !== '') valX35 = inpSimpleScrollX_35.value + (inpSimpleScrollX_35.value.indexOf('%') !== -1 ? '' : 'px');
97054
+ let valX50;
97055
+ if (inpSimpleScrollX_50.value !== '') valX50 = inpSimpleScrollX_50.value + (inpSimpleScrollX_50.value.indexOf('%') !== -1 ? '' : 'px');
97056
+ let valX65;
97057
+ if (inpSimpleScrollX_65.value !== '') valX65 = inpSimpleScrollX_65.value + (inpSimpleScrollX_65.value.indexOf('%') !== -1 ? '' : 'px');
97058
+ let valX75;
97059
+ if (inpSimpleScrollX_75.value !== '') valX75 = inpSimpleScrollX_75.value + (inpSimpleScrollX_75.value.indexOf('%') !== -1 ? '' : 'px');
97060
+ let valX85;
97061
+ if (inpSimpleScrollX_85.value !== '') valX85 = inpSimpleScrollX_85.value + (inpSimpleScrollX_85.value.indexOf('%') !== -1 ? '' : 'px');
95573
97062
  let valXEnd;
95574
97063
  if (inpSimpleScrollX_End.value !== '') valXEnd = inpSimpleScrollX_End.value + (inpSimpleScrollX_End.value.indexOf('%') !== -1 ? '' : 'px');
95575
97064
  let valYStart;
95576
97065
  if (inpSimpleScrollY_Start.value !== '') valYStart = inpSimpleScrollY_Start.value + (inpSimpleScrollY_Start.value.indexOf('%') !== -1 ? '' : 'px');
97066
+ let valY15;
97067
+ if (inpSimpleScrollY_15.value !== '') valY15 = inpSimpleScrollY_15.value + (inpSimpleScrollY_15.value.indexOf('%') !== -1 ? '' : 'px');
97068
+ let valY25;
97069
+ if (inpSimpleScrollY_25.value !== '') valY25 = inpSimpleScrollY_25.value + (inpSimpleScrollY_25.value.indexOf('%') !== -1 ? '' : 'px');
97070
+ let valY35;
97071
+ if (inpSimpleScrollY_35.value !== '') valY35 = inpSimpleScrollY_35.value + (inpSimpleScrollY_35.value.indexOf('%') !== -1 ? '' : 'px');
97072
+ let valY50;
97073
+ if (inpSimpleScrollY_50.value !== '') valY50 = inpSimpleScrollY_50.value + (inpSimpleScrollY_50.value.indexOf('%') !== -1 ? '' : 'px');
97074
+ let valY65;
97075
+ if (inpSimpleScrollY_65.value !== '') valY65 = inpSimpleScrollY_65.value + (inpSimpleScrollY_65.value.indexOf('%') !== -1 ? '' : 'px');
97076
+ let valY75;
97077
+ if (inpSimpleScrollY_75.value !== '') valY75 = inpSimpleScrollY_75.value + (inpSimpleScrollY_75.value.indexOf('%') !== -1 ? '' : 'px');
97078
+ let valY85;
97079
+ if (inpSimpleScrollY_85.value !== '') valY85 = inpSimpleScrollY_85.value + (inpSimpleScrollY_85.value.indexOf('%') !== -1 ? '' : 'px');
95577
97080
  let valYEnd;
95578
97081
  if (inpSimpleScrollY_End.value !== '') valYEnd = inpSimpleScrollY_End.value + (inpSimpleScrollY_End.value.indexOf('%') !== -1 ? '' : 'px');
95579
97082
  let scaleStart;
95580
97083
  if (inpSimpleScrollScale_Start.value !== '') scaleStart = inpSimpleScrollScale_Start.value;
97084
+ let scale15;
97085
+ if (inpSimpleScrollScale_15.value !== '') scale15 = inpSimpleScrollScale_15.value;
97086
+ let scale25;
97087
+ if (inpSimpleScrollScale_25.value !== '') scale25 = inpSimpleScrollScale_25.value;
97088
+ let scale35;
97089
+ if (inpSimpleScrollScale_35.value !== '') scale35 = inpSimpleScrollScale_35.value;
97090
+ let scale50;
97091
+ if (inpSimpleScrollScale_50.value !== '') scale50 = inpSimpleScrollScale_50.value;
97092
+ let scale65;
97093
+ if (inpSimpleScrollScale_65.value !== '') scale65 = inpSimpleScrollScale_65.value;
97094
+ let scale75;
97095
+ if (inpSimpleScrollScale_75.value !== '') scale75 = inpSimpleScrollScale_75.value;
97096
+ let scale85;
97097
+ if (inpSimpleScrollScale_85.value !== '') scale85 = inpSimpleScrollScale_85.value;
95581
97098
  let scaleEnd;
95582
97099
  if (inpSimpleScrollScale_End.value !== '') scaleEnd = inpSimpleScrollScale_End.value;
95583
- let animStart = (valXStart ? ` translateX(${valXStart})` : '') + (valYStart ? ` translateY(${valYStart})` : '') + (scaleStart ? ` scale(${scaleStart})` : '');
97100
+ let rotateStart;
97101
+ if (inpSimpleScrollRotate_Start.value !== '') rotateStart = inpSimpleScrollRotate_Start.value;
97102
+ let rotate15;
97103
+ if (inpSimpleScrollRotate_15.value !== '') rotate15 = inpSimpleScrollRotate_15.value;
97104
+ let rotate25;
97105
+ if (inpSimpleScrollRotate_25.value !== '') rotate25 = inpSimpleScrollRotate_25.value;
97106
+ let rotate35;
97107
+ if (inpSimpleScrollRotate_35.value !== '') rotate35 = inpSimpleScrollRotate_35.value;
97108
+ let rotate50;
97109
+ if (inpSimpleScrollRotate_50.value !== '') rotate50 = inpSimpleScrollRotate_50.value;
97110
+ let rotate65;
97111
+ if (inpSimpleScrollRotate_65.value !== '') rotate65 = inpSimpleScrollRotate_65.value;
97112
+ let rotate75;
97113
+ if (inpSimpleScrollRotate_75.value !== '') rotate75 = inpSimpleScrollRotate_75.value;
97114
+ let rotate85;
97115
+ if (inpSimpleScrollRotate_85.value !== '') rotate85 = inpSimpleScrollRotate_85.value;
97116
+ let rotateEnd;
97117
+ if (inpSimpleScrollRotate_End.value !== '') rotateEnd = inpSimpleScrollRotate_End.value;
97118
+ let opacityStart;
97119
+ if (inpSimpleScrollOpacity_Start.value !== '') opacityStart = inpSimpleScrollOpacity_Start.value;
97120
+ let opacity15;
97121
+ if (inpSimpleScrollOpacity_15.value !== '') opacity15 = inpSimpleScrollOpacity_15.value;
97122
+ let opacity25;
97123
+ if (inpSimpleScrollOpacity_25.value !== '') opacity25 = inpSimpleScrollOpacity_25.value;
97124
+ let opacity35;
97125
+ if (inpSimpleScrollOpacity_35.value !== '') opacity35 = inpSimpleScrollOpacity_35.value;
97126
+ let opacity50;
97127
+ if (inpSimpleScrollOpacity_50.value !== '') opacity50 = inpSimpleScrollOpacity_50.value;
97128
+ let opacity65;
97129
+ if (inpSimpleScrollOpacity_65.value !== '') opacity65 = inpSimpleScrollOpacity_65.value;
97130
+ let opacity75;
97131
+ if (inpSimpleScrollOpacity_75.value !== '') opacity75 = inpSimpleScrollOpacity_75.value;
97132
+ let opacity85;
97133
+ if (inpSimpleScrollOpacity_85.value !== '') opacity85 = inpSimpleScrollOpacity_85.value;
97134
+ let opacityEnd;
97135
+ if (inpSimpleScrollOpacity_End.value !== '') opacityEnd = inpSimpleScrollOpacity_End.value;
97136
+ let animStart = (valXStart ? ` translateX(${valXStart})` : '') + (valYStart ? ` translateY(${valYStart})` : '') + (scaleStart ? ` scale(${scaleStart})` : '') + (rotateStart ? ` rotate(${rotateStart})` : '');
95584
97137
  animStart = animStart.trim();
95585
- let animEnd = (valXEnd ? ` translateX(${valXEnd})` : '') + (valYEnd ? ` translateY(${valYEnd})` : '') + (scaleEnd ? ` scale(${scaleEnd})` : '');
97138
+ let anim15 = (valX15 ? ` translateX(${valX15})` : '') + (valY15 ? ` translateY(${valY15})` : '') + (scale15 ? ` scale(${scale15})` : '') + (rotate15 ? ` rotate(${rotate15})` : '');
97139
+ anim15 = anim15.trim();
97140
+ let anim25 = (valX25 ? ` translateX(${valX25})` : '') + (valY25 ? ` translateY(${valY25})` : '') + (scale25 ? ` scale(${scale25})` : '') + (rotate25 ? ` rotate(${rotate25})` : '');
97141
+ anim25 = anim25.trim();
97142
+ let anim35 = (valX35 ? ` translateX(${valX35})` : '') + (valY35 ? ` translateY(${valY35})` : '') + (scale35 ? ` scale(${scale35})` : '') + (rotate35 ? ` rotate(${rotate35})` : '');
97143
+ anim35 = anim35.trim();
97144
+ let anim50 = (valX50 ? ` translateX(${valX50})` : '') + (valY50 ? ` translateY(${valY50})` : '') + (scale50 ? ` scale(${scale50})` : '') + (rotate50 ? ` rotate(${rotate50})` : '');
97145
+ anim50 = anim50.trim();
97146
+ let anim65 = (valX65 ? ` translateX(${valX65})` : '') + (valY65 ? ` translateY(${valY65})` : '') + (scale65 ? ` scale(${scale65})` : '') + (rotate65 ? ` rotate(${rotate65})` : '');
97147
+ anim65 = anim65.trim();
97148
+ let anim75 = (valX75 ? ` translateX(${valX75})` : '') + (valY75 ? ` translateY(${valY75})` : '') + (scale75 ? ` scale(${scale75})` : '') + (rotate75 ? ` rotate(${rotate75})` : '');
97149
+ anim75 = anim75.trim();
97150
+ let anim85 = (valX85 ? ` translateX(${valX85})` : '') + (valY85 ? ` translateY(${valY85})` : '') + (scale85 ? ` scale(${scale85})` : '') + (rotate85 ? ` rotate(${rotate85})` : '');
97151
+ anim85 = anim85.trim();
97152
+ let animEnd = (valXEnd ? ` translateX(${valXEnd})` : '') + (valYEnd ? ` translateY(${valYEnd})` : '') + (scaleEnd ? ` scale(${scaleEnd})` : '') + (rotateEnd ? ` rotate(${rotateEnd})` : '');
95586
97153
  animEnd = animEnd.trim();
95587
- let sStart = animStart ? 'transform: ' + animStart + ';' : '';
95588
- let sEnd = animEnd ? 'transform: ' + animEnd + ';' : '';
97154
+ let sStart = (animStart ? 'transform: ' + animStart + ';' : '') + (opacityStart ? `opacity:${opacityStart}` : '');
97155
+ let s15 = (anim15 ? 'transform: ' + anim15 + ';' : '') + (opacity15 ? `opacity:${opacity15}` : '');
97156
+ let s25 = (anim25 ? 'transform: ' + anim25 + ';' : '') + (opacity25 ? `opacity:${opacity25}` : '');
97157
+ let s35 = (anim35 ? 'transform: ' + anim35 + ';' : '') + (opacity35 ? `opacity:${opacity35}` : '');
97158
+ let s50 = (anim50 ? 'transform: ' + anim50 + ';' : '') + (opacity50 ? `opacity:${opacity50}` : '');
97159
+ let s65 = (anim65 ? 'transform: ' + anim65 + ';' : '') + (opacity65 ? `opacity:${opacity65}` : '');
97160
+ let s75 = (anim75 ? 'transform: ' + anim75 + ';' : '') + (opacity75 ? `opacity:${opacity75}` : '');
97161
+ let s85 = (anim85 ? 'transform: ' + anim85 + ';' : '') + (opacity85 ? `opacity:${opacity85}` : '');
97162
+ let sEnd = (animEnd ? 'transform: ' + animEnd + ';' : '') + (opacityEnd ? `opacity:${opacityEnd}` : '');
95589
97163
  sStart = sStart.trim();
97164
+ s15 = s15.trim();
97165
+ s25 = s25.trim();
97166
+ s35 = s35.trim();
97167
+ s50 = s50.trim();
97168
+ s65 = s65.trim();
97169
+ s75 = s75.trim();
97170
+ s85 = s85.trim();
95590
97171
  sEnd = sEnd.trim();
95591
97172
  this.builder.editor.saveForUndo();
95592
97173
  this.cleanup(activeElement);
95593
- let dataStart = 'data-bottom-top';
95594
- let dataEnd = 'data-top-bottom';
97174
+ this.cleanup_leave(activeElement);
97175
+ this.cleanup_timeline(activeElement); // let dataStart='data-bottom-top';
97176
+ // let dataEnd='data-top-bottom';
97177
+
97178
+ activeElement.removeAttribute('data-bottom-top');
97179
+ activeElement.removeAttribute('data-top-bottom');
97180
+ let dataStart = 'data-in';
97181
+ let data15 = 'data-in-150';
97182
+ let data25 = 'data-in-300';
97183
+ let data35 = 'data-cen--150';
97184
+ let data50 = 'data-cen';
97185
+ let data65 = 'data-cen-150';
97186
+ let data75 = 'data-out--300';
97187
+ let data85 = 'data-out--150';
97188
+ let dataEnd = 'data-out';
95595
97189
  if (sStart !== '') activeElement.setAttribute(dataStart, sStart);else activeElement.removeAttribute(dataStart);
97190
+ if (s15 !== '') activeElement.setAttribute(data15, s15);else activeElement.removeAttribute(data15);
97191
+ if (s25 !== '') activeElement.setAttribute(data25, s25);else activeElement.removeAttribute(data25);
97192
+ if (s35 !== '') activeElement.setAttribute(data35, s35);else activeElement.removeAttribute(data35);
97193
+ if (s50 !== '') activeElement.setAttribute(data50, s50);else activeElement.removeAttribute(data50);
97194
+ if (s65 !== '') activeElement.setAttribute(data65, s65);else activeElement.removeAttribute(data65);
97195
+ if (s75 !== '') activeElement.setAttribute(data75, s75);else activeElement.removeAttribute(data75);
97196
+ if (s85 !== '') activeElement.setAttribute(data85, s85);else activeElement.removeAttribute(data85);
95596
97197
  if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);else activeElement.removeAttribute(dataEnd);
95597
97198
  const btnDisableSmoothAnim = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
95598
97199
 
@@ -95605,7 +97206,7 @@ class AnimateScroll {
95605
97206
 
95606
97207
  activeElement.style.transform = '';
95607
97208
  activeElement.style.transition = '';
95608
- activeElement.style.opacity = '';
97209
+ activeElement.style.opacity = ''; // console.log(activeElement);
95609
97210
 
95610
97211
  if (this.builder.win.skrollrr) {
95611
97212
  this.builder.win.skrollrr.refresh();
@@ -95676,6 +97277,7 @@ class AnimateScroll {
95676
97277
  let sStart = (animStart ? 'transform: ' + animStart + ';' : '') + (fade ? 'opacity: 0;' : '');
95677
97278
  let sEnd = (animEnd ? 'transform: ' + animEnd + ';' : '') + (fade ? 'opacity: 1;' : '');
95678
97279
  this.builder.editor.saveForUndo();
97280
+ this.cleanup_timeline(activeElement);
95679
97281
  this.cleanup(activeElement);
95680
97282
  let dataStart;
95681
97283
  let dataEnd;
@@ -95743,7 +97345,7 @@ class AnimateScroll {
95743
97345
  const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
95744
97346
  if (inpSlideUp_leave.value !== '') valY_leave = '-' + inpSlideUp_leave.value + (inpSlideUp_leave.value.indexOf('%') !== -1 ? '' : 'px');
95745
97347
  const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
95746
- if (inpScale_leave.value !== '') scale = inpScale_leave.value;
97348
+ if (inpScale_leave.value !== '') scale_leave = inpScale_leave.value;
95747
97349
  const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
95748
97350
  if (inpRotateClockwise_leave.value !== '') rotate_leave = inpRotateClockwise_leave.value;
95749
97351
  const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
@@ -95883,7 +97485,7 @@ class AnimateScroll {
95883
97485
  return this.readTarget('bg');
95884
97486
  }
95885
97487
 
95886
- let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
97488
+ let css1, css2, css3; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
95887
97489
  // enter start
95888
97490
 
95889
97491
  css1 = activeElement.getAttribute('data-bottom-top');
@@ -95892,7 +97494,17 @@ class AnimateScroll {
95892
97494
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
95893
97495
 
95894
97496
  css2 = activeElement.getAttribute('data-top-bottom'); // }
95895
-
97497
+ // timeline
97498
+
97499
+ css3 = activeElement.getAttribute('data-in');
97500
+ if (!css3) css3 = activeElement.getAttribute('data-in-150');
97501
+ if (!css3) css3 = activeElement.getAttribute('data-in-300');
97502
+ if (!css3) css3 = activeElement.getAttribute('data-cen--150');
97503
+ if (!css3) css3 = activeElement.getAttribute('data-cen');
97504
+ if (!css3) css3 = activeElement.getAttribute('data-cen-150');
97505
+ if (!css3) css3 = activeElement.getAttribute('data-out--300');
97506
+ if (!css3) css3 = activeElement.getAttribute('data-out--150');
97507
+ if (!css3) css3 = activeElement.getAttribute('data-out');
95896
97508
  let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95897
97509
  // basic anim
95898
97510
 
@@ -95901,7 +97513,7 @@ class AnimateScroll {
95901
97513
  } // }
95902
97514
 
95903
97515
 
95904
- if (css1 || css2 || hasBasicAnim) {
97516
+ if (css1 || css2 || css3 || hasBasicAnim) {
95905
97517
  return {
95906
97518
  'element': activeElement,
95907
97519
  'name': 'inspectedElement'
@@ -95963,7 +97575,7 @@ class AnimateScroll {
95963
97575
  if (s === 'section') return false;
95964
97576
  }
95965
97577
 
95966
- let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
97578
+ let css1, css2, css3; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
95967
97579
  // enter start
95968
97580
 
95969
97581
  css1 = activeElement.getAttribute('data-bottom-top');
@@ -95972,7 +97584,17 @@ class AnimateScroll {
95972
97584
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
95973
97585
 
95974
97586
  css2 = activeElement.getAttribute('data-top-bottom'); // }
95975
-
97587
+ // timeline
97588
+
97589
+ css3 = activeElement.getAttribute('data-in');
97590
+ if (!css3) css3 = activeElement.getAttribute('data-in-150');
97591
+ if (!css3) css3 = activeElement.getAttribute('data-in-300');
97592
+ if (!css3) css3 = activeElement.getAttribute('data-cen--150');
97593
+ if (!css3) css3 = activeElement.getAttribute('data-cen');
97594
+ if (!css3) css3 = activeElement.getAttribute('data-cen-150');
97595
+ if (!css3) css3 = activeElement.getAttribute('data-out--300');
97596
+ if (!css3) css3 = activeElement.getAttribute('data-out--150');
97597
+ if (!css3) css3 = activeElement.getAttribute('data-out');
95976
97598
  let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95977
97599
  // basic anim
95978
97600
 
@@ -95981,7 +97603,7 @@ class AnimateScroll {
95981
97603
  } // }
95982
97604
 
95983
97605
 
95984
- if (css1 || css2 || hasBasicAnim) {
97606
+ if (css1 || css2 || css3 || hasBasicAnim) {
95985
97607
  return {
95986
97608
  'element': activeElement,
95987
97609
  'name': s
@@ -96054,18 +97676,40 @@ class AnimateScroll {
96054
97676
  elm.removeAttribute('data-top-bottom');
96055
97677
  }
96056
97678
 
97679
+ cleanup_timeline(elm) {
97680
+ elm.removeAttribute('data-in');
97681
+ elm.removeAttribute('data-in-150');
97682
+ elm.removeAttribute('data-in-300');
97683
+ elm.removeAttribute('data-cen--150');
97684
+ elm.removeAttribute('data-cen');
97685
+ elm.removeAttribute('data-cen-150');
97686
+ elm.removeAttribute('data-out--300');
97687
+ elm.removeAttribute('data-out--150');
97688
+ elm.removeAttribute('data-out');
97689
+ }
97690
+
96057
97691
  edit() {
96058
97692
  this.builder.wrapperEl.classList.add('hard-select');
96059
- this.builder.activeBox.classList.add('box-select');
96060
- this.builder.activeSection.classList.add('section-select'); // Close all opened sidebar
97693
+ if (this.builder.activeBox) this.builder.activeBox.classList.add('box-select');
97694
+ if (this.builder.activeSection) this.builder.activeSection.classList.add('section-select'); // Close all opened sidebar
96061
97695
 
96062
97696
  this.builder.sidebar.closeSidebar();
96063
97697
  this.modalAnimateScroll.classList.add('active');
96064
- this.clickContent();
97698
+ this.clickContent(); // clean UI for selection only
97699
+
97700
+ this.builder.doc.body.classList.add('selection-only');
97701
+ document.body.classList.add('selection-only');
97702
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
97703
+ modalEditBox.style.display = '';
97704
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
97705
+ modalEditSection.style.display = '';
96065
97706
  }
96066
97707
 
96067
97708
  close() {
96068
- this.modalAnimateScroll.classList.remove('active');
97709
+ this.modalAnimateScroll.classList.remove('active'); // clean UI for selection only
97710
+
97711
+ this.builder.doc.body.classList.remove('selection-only');
97712
+ document.body.classList.remove('selection-only');
96069
97713
  }
96070
97714
 
96071
97715
  }
@@ -96223,6 +97867,7 @@ class ContentBox {
96223
97867
  } // { name: 'animation', showInMainToolbar: true, showInElementToolbar: true },
96224
97868
  ],
96225
97869
  disableConfig: false,
97870
+ maxColumns: 6,
96226
97871
  useLightbox: true,
96227
97872
  lightboxArrow: true,
96228
97873
  themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css'], ['#0088dc', 'colored', 'contentbuilder/themes/colored-blue.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue6.css'], ['#0a4d92', 'colored', 'contentbuilder/themes/colored-darkblue.css'], ['#96af16', 'colored', 'contentbuilder/themes/colored-green.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-orange.css'], ['#b92ea6', 'colored', 'contentbuilder/themes/colored-magenta.css'], ['#e73171', 'colored', 'contentbuilder/themes/colored-pink.css'], ['#782ec5', 'colored', 'contentbuilder/themes/colored-purple.css'], ['#ed2828', 'colored', 'contentbuilder/themes/colored-red.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow.css'], ['#13b34b', 'colored', 'contentbuilder/themes/colored-green4.css'], ['#333333', 'colored-dark', 'contentbuilder/themes/colored-dark.css'], ['#dbe5f5', 'light', 'contentbuilder/themes/light-blue.css'], ['#fbe6f2', 'light', 'contentbuilder/themes/light-pink.css'], ['#dcdaf3', 'light', 'contentbuilder/themes/light-purple.css'], ['#ffe9e0', 'light', 'contentbuilder/themes/light-red.css'], ['#fffae5', 'light', 'contentbuilder/themes/light-yellow.css'], ['#ddf3dc', 'light', 'contentbuilder/themes/light-green.css'], ['#c7ebfd', 'light', 'contentbuilder/themes/light-blue2.css'], ['#ffd5f2', 'light', 'contentbuilder/themes/light-pink2.css'], ['#eadafb', 'light', 'contentbuilder/themes/light-purple2.css'], ['#c5d4ff', 'light', 'contentbuilder/themes/light-blue3.css'], ['#ffefb1', 'light', 'contentbuilder/themes/light-yellow2.css'], ['#fefefe', 'light', 'contentbuilder/themes/light-gray3.css'], ['#e5e5e5', 'light', 'contentbuilder/themes/light-gray2.css'], ['#dadada', 'light', 'contentbuilder/themes/light-gray.css'], ['#3f4ec9', 'colored', 'contentbuilder/themes/colored-blue2.css'], ['#6779d9', 'colored', 'contentbuilder/themes/colored-blue4.css'], ['#10b9d7', 'colored', 'contentbuilder/themes/colored-blue3.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue5.css'], ['#e92f94', 'colored', 'contentbuilder/themes/colored-pink3.css'], ['#a761d9', 'colored', 'contentbuilder/themes/colored-purple2.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow2.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-red3.css'], ['#36b741', 'colored', 'contentbuilder/themes/colored-green2.css'], ['#00c17c', 'colored', 'contentbuilder/themes/colored-green3.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink2.css'], ['#ff6d13', 'colored', 'contentbuilder/themes/colored-orange2.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red2.css'], ['#646464', 'colored', 'contentbuilder/themes/colored-gray.css'], ['#3f4ec9', 'dark', 'contentbuilder/themes/dark-blue.css'], ['#0b4d92', 'dark', 'contentbuilder/themes/dark-blue2.css'], ['#006add', 'dark', 'contentbuilder/themes/dark-blue3.css'], ['#5f3ebf', 'dark', 'contentbuilder/themes/dark-purple.css'], ['#e92f69', 'dark', 'contentbuilder/themes/dark-pink.css'], ['#4c4c4c', 'dark', 'contentbuilder/themes/dark-gray.css'], ['#ed2828', 'dark', 'contentbuilder/themes/dark-red.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue8.css'], ['#ff7723', 'colored', 'contentbuilder/themes/colored-orange3.css'], ['#ff5722', 'colored', 'contentbuilder/themes/colored-red5.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red4.css'], ['#00bd79', 'colored', 'contentbuilder/themes/colored-green5.css'], ['#557ae9', 'colored', 'contentbuilder/themes/colored-blue7.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink4.css']],
@@ -98756,7 +100401,7 @@ class ContentBox {
98756
100401
  snippetUrl: this.settings.snippetUrl,
98757
100402
  snippetJSON: window.data_basic,
98758
100403
  snippetPathReplace: this.settings.snippetPathReplace,
98759
- maxColumns: 6,
100404
+ maxColumns: this.settings.maxColumns,
98760
100405
  maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
98761
100406
  onSectionAdd: () => {
98762
100407
  this.pageSetup();
@@ -98895,7 +100540,8 @@ class ContentBox {
98895
100540
  onZoom: scale => {
98896
100541
  // Zoom Adjustment
98897
100542
  // console.log(scale);
98898
- const x = 300 * (1 - scale) / 0.5;
100543
+ const x = 300 * (1 - scale) / 0.5; // const x = -1400 + 1400*(scale);
100544
+
98899
100545
  this.wrapperEl.style.marginTop = `${x}px`;
98900
100546
  },
98901
100547
  onZoomEnd: () => {
@@ -98925,6 +100571,7 @@ class ContentBox {
98925
100571
 
98926
100572
  this.rePositionTool();
98927
100573
  this.wrapperEl.style.transition = '';
100574
+ this.refreshAnim();
98928
100575
  },
98929
100576
  onThemeChange: () => {
98930
100577
  this.refreshUIStyle();
@@ -98936,6 +100583,7 @@ class ContentBox {
98936
100583
  mediaSelect: this.settings.mediaSelect,
98937
100584
  onContentClick: e => {
98938
100585
  if (this.settings.onContentClick) this.settings.onContentClick();
100586
+ this.doc.body.classList.remove('temporary-hide-tools');
98939
100587
  let elm = e.target;
98940
100588
  let editable = elm.closest('[contenteditable="true"]');
98941
100589
 
@@ -98986,6 +100634,7 @@ class ContentBox {
98986
100634
  }
98987
100635
  }
98988
100636
  });
100637
+ this.isTouchSupport = this.editor.isTouchSupport;
98989
100638
  } // editorSetup
98990
100639
 
98991
100640
 
@@ -99007,6 +100656,11 @@ class ContentBox {
99007
100656
  .is-wrapper.is-edit {
99008
100657
  padding-left: 61px;
99009
100658
  }
100659
+ .is-wrapper.is-container-edit > div.section-select, .is-wrapper.is-clean-edit > div.section-select {
100660
+ overflow-x: unset !important;
100661
+ overflow-y: unset !important;
100662
+ }
100663
+
99010
100664
 
99011
100665
  /* Navbar Fix */
99012
100666
  .is-wrapper.is-edit .is-section.is-section-navbar,
@@ -99055,20 +100709,69 @@ class ContentBox {
99055
100709
  }
99056
100710
 
99057
100711
  /* toggle tool */
99058
- .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
100712
+ .is-wrapper.is-clean-edit.hard-select .box-select .is-box-tool,
99059
100713
  .is-wrapper.is-clean-edit .box-select .is-box-tool {
99060
100714
  display: none !important;
99061
100715
  }
99062
- .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
100716
+ .is-wrapper.is-clean-edit.hard-select .section-select .is-section-tool,
99063
100717
  .is-wrapper.is-clean-edit .section-select .is-section-tool {
99064
100718
  display: none !important;
99065
100719
  }
99066
- .is-wrapper.is-clean-edit .hard-select .box-select,
100720
+ .is-wrapper.is-clean-edit.hard-select .box-select,
99067
100721
  .is-wrapper.is-clean-edit .box-select {
99068
100722
  outline: none !important;
99069
100723
  }
99070
100724
 
100725
+ /* clean UI for selection only */
100726
+ .selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .box-select .is-box-tool,
100727
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .box-select .is-box-tool {
100728
+ display: none !important;
100729
+ }
100730
+ .selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .section-select .is-section-tool,
100731
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .section-select .is-section-tool {
100732
+ display: none !important;
100733
+ }
100734
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .is-rowadd-tool {
100735
+ display: none !important;
100736
+ }
100737
+ .selection-only:not([data-skrollrr-off]) .is-wrapper .is-tool {
100738
+ display: none !important;
100739
+ }
100740
+ .selection-only:not([data-skrollrr-off]) .is-tool {
100741
+ z-index: -10000 !important;
100742
+ }
100743
+
100744
+ /* section info */
100745
+ .is-wrapper .is-section-info {
100746
+ position: absolute;
100747
+ z-index: 1;
100748
+ top: 3px;
100749
+ left: 3px;
100750
+ display: none;
100751
+ }
100752
+ .is-wrapper .is-section-info > div {
100753
+ width: auto;
100754
+ height: auto;
100755
+ padding: 5px 20px;
100756
+ background-color: rgb(255, 239, 100);
100757
+ color: #111;
100758
+ font-family: sans-serif;
100759
+ letter-spacing: 2px;
100760
+ font-size: 17px;
100761
+ }
100762
+ .is-wrapper .section-select .is-section-info {
100763
+ display: block;
100764
+ }
99071
100765
 
100766
+ /* To make editing possible on wide content */
100767
+ .is-wrapper.is-edit .section-wide-250 .is-box-centered {
100768
+ overflow-x: auto;
100769
+ overflow-y: hidden;
100770
+ }
100771
+ .is-wrapper.is-edit .section-wide-250 .is-container > div > div { /* To make col tool visible */
100772
+ max-height: 90vh;
100773
+ }
100774
+
99072
100775
  </style>`);
99073
100776
  dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
99074
100777
 
@@ -99091,11 +100794,31 @@ class ContentBox {
99091
100794
  display: none;
99092
100795
  }
99093
100796
 
100797
+ #_cbhtml .is-modal.page-preview.is-modal-content {
100798
+ z-index: 10002;
100799
+ position: fixed;
100800
+ overflow: hidden;
100801
+ width: 576px;
100802
+ height: 332px;
100803
+ top: auto;
100804
+ bottom: 30px;
100805
+ left:90px;
100806
+ box-sizing: content-box;
100807
+ flex-direction: row;
100808
+ align-items: flex-start;
100809
+ }
100810
+ #_cbhtml .is-modal.page-preview.is-modal-content.active {
100811
+ display: flex;
100812
+ }
100813
+ #_cbhtml .is-modal.page-preview.is-modal-content .is-modal-overlay {
100814
+ display: none;
100815
+ }
100816
+
99094
100817
  #_cbhtml .is-modal.editsection.is-modal-content {
99095
100818
  z-index: 10002;
99096
100819
  position: fixed;
99097
100820
  overflow: hidden;
99098
- width: 313px;
100821
+ width: 340px;
99099
100822
  height: auto;
99100
100823
  top: calc(50% - 265px);
99101
100824
  left: calc(50% - 157px);
@@ -99110,6 +100833,81 @@ class ContentBox {
99110
100833
  display: none;
99111
100834
  }
99112
100835
 
100836
+ /* Switch */
100837
+ .is-ui .switch {
100838
+ position: relative;
100839
+ display: inline-block;
100840
+ width: 60px;
100841
+ height: 34px;
100842
+ }
100843
+
100844
+ .is-ui .switch input {
100845
+ opacity: 0;
100846
+ width: 0;
100847
+ height: 0;
100848
+ }
100849
+
100850
+ .is-ui .switch .slider {
100851
+ position: absolute;
100852
+ cursor: pointer;
100853
+ top: 0;
100854
+ left: 0;
100855
+ right: 0;
100856
+ bottom: 0;
100857
+ background-color: #ccc;
100858
+ -webkit-transition: 0.4s;
100859
+ transition: 0.4s;
100860
+ border-radius: 34px;
100861
+ }
100862
+
100863
+ .dark .is-ui .switch .slider {
100864
+ background-color: #7c7c7c;
100865
+ }
100866
+
100867
+ .is-ui .switch .slider:before {
100868
+ position: absolute;
100869
+ content: "";
100870
+ height: 26px;
100871
+ width: 26px;
100872
+ left: 4px;
100873
+ bottom: 4px;
100874
+ background-color: #fff;
100875
+ -webkit-transition: 0.4s;
100876
+ transition: 0.4s;
100877
+ border-radius: 50%;
100878
+ }
100879
+
100880
+ .dark .is-ui .switch .slider:before {
100881
+ background-color: rgba(255, 255, 255, 0.82);
100882
+ }
100883
+
100884
+ .is-ui .switch input:checked + .slider {
100885
+ background-color: #0e75de;
100886
+ border-radius: 34px;
100887
+ }
100888
+
100889
+ .dark .is-ui .switch input:checked + .slider {
100890
+ background-color: #0e75de;
100891
+ }
100892
+
100893
+ .is-ui .switch input:focus + .slider {
100894
+ box-shadow: 0 0 1px #0e75de;
100895
+ }
100896
+
100897
+ .dark .is-ui .switch input:focus + .slider {
100898
+ box-shadow: 0 0 1px #0e75de;
100899
+ }
100900
+
100901
+ .is-ui .switch input:checked + .slider:before {
100902
+ -webkit-transform: translateX(26px);
100903
+ -ms-transform: translateX(26px);
100904
+ transform: translateX(26px);
100905
+ }
100906
+
100907
+ /* temporary hide tools on wide section during scroll */
100908
+ .temporary-hide-tools .is-ui .is-tool {
100909
+ display: none !important;
100910
+ }
99113
100911
  </style>`); // Add page-overlay (to prevent mouseover during page init.
99114
100912
  // Otherwise the mouseover won't be triggered when the page ready)
99115
100913
 
@@ -99127,6 +100925,10 @@ class ContentBox {
99127
100925
  // pageOverlay.parentNode.removeChild(pageOverlay);
99128
100926
  // }, 10);
99129
100927
 
100928
+
100929
+ if (localStorage.getItem('_livepreview') != null) {
100930
+ this.openPreview();
100931
+ }
99130
100932
  }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
99131
100933
 
99132
100934
  let showProgress = false;
@@ -99203,8 +101005,19 @@ class ContentBox {
99203
101005
  startShowing();
99204
101006
  }, 300);
99205
101007
  }
99206
- } // Add document Click event
101008
+ } // Hide tools on section wide scroll (mouse scroll)
101009
+
99207
101010
 
101011
+ this.doc.addEventListener('wheel', () => {
101012
+ if (this.editor.activeElement) {
101013
+ if (this.editor.activeElement.closest('.section-wide-250')) {
101014
+ this.doc.body.classList.add('temporary-hide-tools');
101015
+ if (this.editor.moveable) this.editor.moveable.updateRect();
101016
+ let controlBox = this.doc.querySelector('.moveable-control-box');
101017
+ if (controlBox) controlBox.style.display = 'none';
101018
+ }
101019
+ }
101020
+ }); // Add document Click event
99208
101021
 
99209
101022
  this.doc.addEventListener('click', this.doDocumentClick = e => {
99210
101023
  e = e || window.event;
@@ -99290,23 +101103,24 @@ class ContentBox {
99290
101103
 
99291
101104
  this.wrapperEl.classList.remove('is-container-edit');
99292
101105
  this.wrapperEl.classList.remove('is-clean-edit');
99293
- }
99294
-
99295
- const modalEditBox = this.builderStuff.querySelector('.editbox');
101106
+ } // const modalEditBox = this.builderStuff.querySelector('.editbox');
101107
+ // if(modalEditBox.style.display==='flex') {
101108
+ // this.editbox.read();
101109
+ // }
101110
+ // const modalEditSection = this.builderStuff.querySelector('.editsection');
101111
+ // if(modalEditSection.style.display==='flex') {
101112
+ // this.editsection.read();
101113
+ // }
99296
101114
 
99297
- if (modalEditBox.style.display === 'flex') {
99298
- this.editbox.read();
99299
- }
99300
101115
 
101116
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
101117
+ modalEditBox.style.display = '';
99301
101118
  const modalEditSection = this.builderStuff.querySelector('.editsection');
99302
-
99303
- if (modalEditSection.style.display === 'flex') {
99304
- this.editsection.read();
99305
- }
99306
-
101119
+ modalEditSection.style.display = '';
99307
101120
  if (this.settings.onPageContentClick) this.settings.onPageContentClick(e);
99308
101121
  } else {
99309
101122
  // Outside Wrapper
101123
+ if (document.activeElement) if (document.activeElement.tagName.toLowerCase() === 'input') return;
99310
101124
  this.wrapperEl.classList.remove('is-container-edit');
99311
101125
  this.wrapperEl.classList.remove('is-clean-edit');
99312
101126
  const modalEditBox = this.builderStuff.querySelector('.editbox');
@@ -99456,6 +101270,18 @@ class ContentBox {
99456
101270
  } // init
99457
101271
 
99458
101272
 
101273
+ openPreview() {
101274
+ this.animateScroll.openPreview();
101275
+ }
101276
+
101277
+ closePreview() {
101278
+ this.animateScroll.closePreview();
101279
+ }
101280
+
101281
+ openSettings(e) {
101282
+ this.sidebar.openSettings(e);
101283
+ }
101284
+
99459
101285
  pageSetup() {
99460
101286
  // Page Setup (previously: setup)
99461
101287
  const sections = this.wrapperEl.querySelectorAll('.is-section');
@@ -99564,18 +101390,28 @@ class ContentBox {
99564
101390
  }
99565
101391
 
99566
101392
  scrollTo(element, delay = 0) {
101393
+ this.cancelScrollSync = true;
99567
101394
  setTimeout(() => {
99568
101395
  element.scrollIntoView({
99569
101396
  behavior: 'smooth',
99570
101397
  block: 'center'
99571
101398
  });
101399
+ setTimeout(() => {
101400
+ this.cancelScrollSync = false;
101401
+ const iframe = this.animateScroll.modalPagePreview.querySelector('iframe');
101402
+ this.animateScroll.scrollSync(iframe);
101403
+ }, 1000);
99572
101404
  }, delay);
99573
101405
  }
99574
101406
 
99575
101407
  sectionSetup(section) {
99576
101408
  let tool = section.querySelector('.is-section-tool');
99577
101409
  if (tool) tool.parentNode.removeChild(tool);
99578
- dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>'); // this.editor.setTooltip(section);
101410
+ dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>');
101411
+ let info = section.querySelector('.is-section-info');
101412
+ if (info) info.parentNode.removeChild(info);
101413
+ const sectionId = section.getAttribute('id');
101414
+ dom.appendHtml(section, '<div class="is-section-info">' + (sectionId ? `<div>#${sectionId}</div>` : '') + '</div>'); // this.editor.setTooltip(section);
99579
101415
  // Prepare for tooltip
99580
101416
 
99581
101417
  let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
@@ -99597,7 +101433,21 @@ class ContentBox {
99597
101433
  btnSectionRemove.addEventListener('click', () => {
99598
101434
  const modal = document.querySelector('.is-modal.delsectionconfirm');
99599
101435
  this.editor.util.showModal(modal);
99600
- });
101436
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
101437
+ modalEditBox.style.display = '';
101438
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
101439
+ modalEditSection.style.display = '';
101440
+ }); // Hide tools on section wide scroll
101441
+
101442
+ if (section.classList.contains('section-wide-250')) {
101443
+ let boxCentered = section.querySelector('.is-box-centered');
101444
+ boxCentered.addEventListener('scroll', () => {
101445
+ this.doc.body.classList.add('temporary-hide-tools');
101446
+ if (this.editor.moveable) this.editor.moveable.updateRect();
101447
+ let controlBox = this.doc.querySelector('.moveable-control-box');
101448
+ if (controlBox) controlBox.style.display = 'none';
101449
+ });
101450
+ }
99601
101451
  }
99602
101452
 
99603
101453
  boxSetup(box) {
@@ -99772,6 +101622,10 @@ class ContentBox {
99772
101622
  elm.style.opacity = '';
99773
101623
  });
99774
101624
  */
101625
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
101626
+ modalEditBox.style.display = '';
101627
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
101628
+ modalEditSection.style.display = '';
99775
101629
  this.pageSetup(); // To refresh skrollrr anim
99776
101630
 
99777
101631
  if (this.win.skrollrr) {
@@ -99779,7 +101633,7 @@ class ContentBox {
99779
101633
  }
99780
101634
  }
99781
101635
 
99782
- refreshPage() {
101636
+ refreshAnim() {
99783
101637
  /*
99784
101638
  // Clean
99785
101639
  const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
@@ -99812,6 +101666,32 @@ class ContentBox {
99812
101666
  }
99813
101667
  }
99814
101668
 
101669
+ refreshPage(callback) {
101670
+ // To refresh skrollrr anim
101671
+ if (this.win.skrollrr) {
101672
+ this.win.skrollrr.refresh();
101673
+ } //--- Same as undo/redo process ---
101674
+
101675
+
101676
+ const wrapper = this.wrapperEl;
101677
+ const sections = wrapper.querySelectorAll('.is-section');
101678
+ sections.forEach(section => {
101679
+ const html = section.innerHTML;
101680
+ var range = document.createRange();
101681
+ section.innerHTML = '';
101682
+ section.appendChild(range.createContextualFragment(html));
101683
+ });
101684
+ this.editor.uo.cleaning(wrapper);
101685
+ this.pageSetup(); //---
101686
+ // To refresh skrollrr anim
101687
+
101688
+ if (this.win.skrollrr) {
101689
+ this.win.skrollrr.refresh();
101690
+ }
101691
+
101692
+ if (callback) callback();
101693
+ }
101694
+
99815
101695
  addIdea(newArea) {
99816
101696
  this.editor.saveForUndo();
99817
101697
  const designPath = this.designPath;
@@ -100053,7 +101933,7 @@ class ContentBox {
100053
101933
  this.addSpace();
100054
101934
  this.scrollTo(newSection, 600);
100055
101935
  setTimeout(() => {
100056
- this.refreshPage();
101936
+ this.refreshAnim();
100057
101937
  }, 600);
100058
101938
  } // addIdea
100059
101939
 
@@ -100110,6 +101990,7 @@ class ContentBox {
100110
101990
  rePositionTool() {
100111
101991
  let rowActive = this.wrapperEl.querySelector('.row-active'); // when zooming, there should be a focused row/col
100112
101992
 
101993
+ if (!rowActive) return;
100113
101994
  let box;
100114
101995
 
100115
101996
  if (rowActive) {
@@ -100305,7 +102186,7 @@ class ContentBox {
100305
102186
  const sidebar = builderStuff.querySelector('.is-sidebar');
100306
102187
  sidebar.children[btn.pos].insertAdjacentHTML('afterEnd', btnHtml);
100307
102188
  const btnNew = builderStuff.querySelector('#' + btnId);
100308
- btnNew.addEventListener('click', () => {
102189
+ btnNew.addEventListener('click', e => {
100309
102190
  if (btn.src) {
100310
102191
  if (!dom.hasClass(btnNew, 'active')) {
100311
102192
  // Close all opened sidebar
@@ -100358,7 +102239,7 @@ class ContentBox {
100358
102239
  this.sidebar.closeSidebar();
100359
102240
  }
100360
102241
  } else {
100361
- btn.onClick();
102242
+ btn.onClick(e);
100362
102243
  }
100363
102244
  });
100364
102245
  }
@@ -100504,6 +102385,10 @@ class ContentBox {
100504
102385
  return false;
100505
102386
  });
100506
102387
  });
102388
+
102389
+ if (localStorage.getItem('_livepreview') != null) {
102390
+ this.openPreview();
102391
+ }
100507
102392
  }
100508
102393
 
100509
102394
  boxImage(url, err) {