@innovastudio/contentbox 1.4.36 → 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 +2094 -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
 
@@ -93047,6 +93303,14 @@ class ContentStuff {
93047
93303
  100% {transform:scale(1);}
93048
93304
  }
93049
93305
 
93306
+ .is-wrapper.is-edit {
93307
+ padding-left: 61px;
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
+
93050
93314
 
93051
93315
  /* Navbar Fix */
93052
93316
  .is-wrapper.is-edit .is-section.is-section-navbar,
@@ -93095,19 +93359,69 @@ class ContentStuff {
93095
93359
  }
93096
93360
 
93097
93361
  /* toggle tool */
93098
- .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,
93099
93363
  .is-wrapper.is-clean-edit .box-select .is-box-tool {
93100
93364
  display: none !important;
93101
93365
  }
93102
- .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,
93103
93367
  .is-wrapper.is-clean-edit .section-select .is-section-tool {
93104
93368
  display: none !important;
93105
93369
  }
93106
- .is-wrapper.is-clean-edit .hard-select .box-select,
93370
+ .is-wrapper.is-clean-edit.hard-select .box-select,
93107
93371
  .is-wrapper.is-clean-edit .box-select {
93108
93372
  outline: none !important;
93109
93373
  }
93110
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
+
93111
93425
  `; // .is-wrapper.is-edit > div {
93112
93426
  // overflow-x: unset;
93113
93427
  // overflow-y: unset;
@@ -93132,9 +93446,22 @@ class AnimateScroll {
93132
93446
  this.builderStuff = builderStuff;
93133
93447
  let html = `
93134
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
+ }
93135
93458
  .animatescroll td {
93136
93459
  font-size: 13px;
93137
- padding: 5px 5px;
93460
+ padding: 3px 0px;
93461
+ }
93462
+ .animatescroll .table-header td {
93463
+ font-size: 11px;
93464
+ padding: 3px 0 0;
93138
93465
  }
93139
93466
  .animatescroll.active {
93140
93467
  right: 0;
@@ -93165,10 +93492,10 @@ class AnimateScroll {
93165
93492
  position: absolute;
93166
93493
  top: 0;
93167
93494
  box-sizing: border-box;
93168
- border-top: transparent 240px solid !important;
93495
+ border-top: transparent 245px solid !important;
93169
93496
  }
93170
93497
  #divEnterAnim, #divLeaveAnim, #divAnimSettings {
93171
- border-top: transparent 70px solid !important;
93498
+ border-top: transparent 55px solid !important;
93172
93499
  padding:0 15px 20px 22px !important;
93173
93500
  width: 100%;
93174
93501
  height: 100%;
@@ -93195,7 +93522,7 @@ class AnimateScroll {
93195
93522
  margin-left: 2px !important;
93196
93523
  box-shadow: none !important;
93197
93524
  }
93198
- .bold {
93525
+ .anim-controls .bold {
93199
93526
  font-weight: 600;
93200
93527
  }
93201
93528
  .anim-controls button,
@@ -93210,10 +93537,22 @@ class AnimateScroll {
93210
93537
  font-family: sans-serif !important;
93211
93538
  font-weight: 300 !important;
93212
93539
  padding: 0 !important;
93213
- width: 65px !important;
93540
+ width: 50px !important;
93214
93541
  height: 35px !important;
93215
93542
  text-align: center !important;
93216
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
+
93217
93556
  .flex-wrap {
93218
93557
  display: flex;
93219
93558
  flex-flow: wrap;
@@ -93250,7 +93589,66 @@ class AnimateScroll {
93250
93589
  width: 80px !important;
93251
93590
  height: 35px !important;
93252
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
+ }
93253
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
+
93254
93652
  <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
93255
93653
 
93256
93654
  <div class="side-title">${out('Animation')}</div>
@@ -93279,7 +93677,7 @@ class AnimateScroll {
93279
93677
  <div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
93280
93678
  <a href="" data-content="divAnimDefault" class="active">${out('On View')}</a>
93281
93679
  <a href="" data-content="divAnimScroll">${out('On Scroll')}</a>
93282
- <a href="" data-content="divAnimScrollSimple">${out('On Scroll (Simple)')}</a>
93680
+ <a href="" data-content="divAnimScrollSimple">${out('Timeline')}</a>
93283
93681
  </div>
93284
93682
  </div>
93285
93683
 
@@ -93287,61 +93685,270 @@ class AnimateScroll {
93287
93685
 
93288
93686
  <div class="anim-controls" style="overflow-y: auto;">
93289
93687
 
93290
- <div style="margin-top: 30px;margin-left: 22px;">
93688
+ <div style="margin-top: 20px;margin-left: 22px;margin-bottom: 20px;">
93291
93689
 
93292
93690
  <table style="margin:12px 0 0 0;">
93691
+
93293
93692
  <tr>
93294
- <td></td>
93295
- <td>${out('Start')}:</td>
93296
- <td>${out('End')}:</td>
93297
- <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>
93298
93706
  </tr>
93299
93707
  <tr>
93300
- <td>${out('x')}</td>
93301
93708
  <td>
93302
93709
  <input class="inp-simplescroll-x-start" placeholder="-100" type="text" />
93303
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>
93304
93732
  <td>
93305
93733
  <input class="inp-simplescroll-x-end" placeholder="100" type="text" />
93306
93734
  </td>
93307
- <td style="font-size: 12px;">${out('px (default)')}</td>
93308
93735
  </tr>
93309
93736
  <tr>
93310
- <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>
93311
93752
  <td>
93312
93753
  <input class="inp-simplescroll-y-start" placeholder="100%" type="text" />
93313
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>
93314
93776
  <td>
93315
93777
  <input class="inp-simplescroll-y-end" placeholder="-100%" type="text" />
93316
93778
  </td>
93317
- <td style="font-size: 12px;">${out('px (default)')}</td>
93318
93779
  </tr>
93319
93780
  <tr>
93320
- <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>
93321
93795
  <td>
93322
93796
  <input class="inp-simplescroll-scale-start" placeholder="0.8" type="text" />
93323
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>
93324
93819
  <td>
93325
93820
  <input class="inp-simplescroll-scale-end" placeholder="1.2" type="text" />
93326
93821
  </td>
93327
- <td></td>
93328
93822
  </tr>
93329
- </table>
93330
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
+
93331
93913
  <div class="flex-wrap" style="margin-top:20px;">
93332
- <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>
93333
93933
  </div>
93334
93934
 
93335
- <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
93336
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93337
- <span style="margin-left:7px">${out('Clear All')}</span>
93338
- </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>
93339
93938
 
93340
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93341
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93342
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93343
- </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>
93344
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>
93345
93952
  </div>
93346
93953
  </div>
93347
93954
  </div>
@@ -93350,7 +93957,7 @@ class AnimateScroll {
93350
93957
 
93351
93958
  <div class="anim-controls" style="overflow-y: auto;">
93352
93959
 
93353
- <div style="padding:15px 0 0 22px;">
93960
+ <div style="padding:10px 0 20px 22px;">
93354
93961
  <div class="anim-label">
93355
93962
  <span>
93356
93963
  <span class="bold">${out('Fade')}</span>:
@@ -93395,7 +94002,7 @@ class AnimateScroll {
93395
94002
  <button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
93396
94003
  <button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
93397
94004
  </div>
93398
-
94005
+
93399
94006
  <div class="anim-label">
93400
94007
  <span>
93401
94008
  <span class="bold">${out('Pulse')}</span>:
@@ -93404,7 +94011,7 @@ class AnimateScroll {
93404
94011
  <div class="flex-wrap">
93405
94012
  <button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
93406
94013
  </div>
93407
-
94014
+
93408
94015
  <div class="anim-label">
93409
94016
  <span>
93410
94017
  <span class="bold">${out('Bounce')}</span>:
@@ -93444,15 +94051,19 @@ class AnimateScroll {
93444
94051
  ${out('Animate Once')}
93445
94052
  </button>
93446
94053
 
93447
- <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
93448
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93449
- <span style="margin-left:7px">${out('Clear All')}</span>
93450
- </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>
93451
94060
 
93452
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93453
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93454
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93455
- </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>
93456
94067
  </div>
93457
94068
 
93458
94069
  </div>
@@ -93463,7 +94074,7 @@ class AnimateScroll {
93463
94074
 
93464
94075
  <div class="anim-controls">
93465
94076
 
93466
- <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">
93467
94078
  <a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
93468
94079
  <a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
93469
94080
  <a href="" data-content="divAnimSettings">${out('Settings')}</a>
@@ -93605,19 +94216,25 @@ class AnimateScroll {
93605
94216
  </div>
93606
94217
  <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade In')}</button>
93607
94218
 
93608
- <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93609
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93610
- <span style="margin-left:7px">${out('Clear All')}</span>
93611
- </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>
93612
94232
 
93613
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93614
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93615
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93616
- </button>
93617
94233
  </div>
93618
94234
 
93619
94235
  <div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93620
94236
 
94237
+
93621
94238
  <div class="anim-label">
93622
94239
  <span>
93623
94240
  <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
@@ -93745,15 +94362,19 @@ class AnimateScroll {
93745
94362
  </div>
93746
94363
  <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade Out')}</button>
93747
94364
 
93748
- <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93749
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93750
- <span style="margin-left:7px">${out('Clear All')}</span>
93751
- </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>
93752
94371
 
93753
- <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93754
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93755
- <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
93756
- </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>
93757
94378
 
93758
94379
  </div>
93759
94380
 
@@ -93786,8 +94407,8 @@ class AnimateScroll {
93786
94407
  <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
93787
94408
  </div>
93788
94409
 
93789
- <div class="flex-wrap" style="margin-top:30px;">
93790
- <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>
93791
94412
  </div>
93792
94413
  </div>
93793
94414
 
@@ -93881,7 +94502,11 @@ class AnimateScroll {
93881
94502
  this.close();
93882
94503
  });
93883
94504
  this.divAnimScrollSimple = modalAnimateScroll.querySelector('#divAnimScrollSimple');
93884
- 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
93885
94510
 
93886
94511
  let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
93887
94512
  btns.forEach(btn => {
@@ -93911,8 +94536,9 @@ class AnimateScroll {
93911
94536
  const btnClearAnimAll = modalAnimateScroll.querySelectorAll('.cmd-clear-anim-all');
93912
94537
  btnClearAnimAll.forEach(btn => {
93913
94538
  btn.addEventListener('click', () => {
93914
- this.builder.editor.saveForUndo();
93915
94539
  let section = this.builder.activeSection;
94540
+ if (!section) return;
94541
+ this.builder.editor.saveForUndo();
93916
94542
  let activeCol = this.builder.editor.activeCol;
93917
94543
  if (activeCol) section = activeCol.closest('.is-section');
93918
94544
  let elms;
@@ -93939,6 +94565,15 @@ class AnimateScroll {
93939
94565
  elm.removeAttribute('data-50-top');
93940
94566
  elm.removeAttribute('data-top');
93941
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');
93942
94577
  elm.style.transform = '';
93943
94578
  elm.style.transition = '';
93944
94579
  elm.style.opacity = ''; // console.log(elm)
@@ -93999,8 +94634,9 @@ class AnimateScroll {
93999
94634
  });
94000
94635
  const btnClearAnimWizard = modalAnimateScroll.querySelector('.cmd-clear-anim-wizard');
94001
94636
  btnClearAnimWizard.addEventListener('click', () => {
94002
- this.builder.editor.saveForUndo();
94003
94637
  const section = this.builder.activeSection;
94638
+ if (!section) return;
94639
+ this.builder.editor.saveForUndo();
94004
94640
  let elms;
94005
94641
  elms = section.querySelectorAll('.is-animated');
94006
94642
  elms.forEach(elm => {
@@ -94030,8 +94666,31 @@ class AnimateScroll {
94030
94666
  });
94031
94667
 
94032
94668
  const applyPresetBasic = process => {
94033
- this.builder.editor.saveForUndo();
94034
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
+ });
94035
94694
  let start = 0;
94036
94695
  let boxes = section.querySelectorAll('.is-box');
94037
94696
  if (boxes.length === 0) boxes = section.querySelectorAll('.is-box-centered');
@@ -94095,8 +94754,9 @@ class AnimateScroll {
94095
94754
  });
94096
94755
  const chkPresetAnimOnce = modalAnimateScroll.querySelector('#chkPresetAnimOnce');
94097
94756
  chkPresetAnimOnce.addEventListener('click', () => {
94098
- this.builder.editor.saveForUndo();
94099
94757
  const section = this.builder.activeSection;
94758
+ if (!section) return;
94759
+ this.builder.editor.saveForUndo();
94100
94760
  let elms = section.querySelectorAll('.is-animated');
94101
94761
  elms.forEach(elm => {
94102
94762
  if (chkPresetAnimOnce.checked) {
@@ -94877,32 +95537,193 @@ class AnimateScroll {
94877
95537
 
94878
95538
  this.builder.settings.onChange();
94879
95539
  }); // ---
94880
- // SIMPLE ON SCROLL
95540
+ // TIMELINE
94881
95541
 
94882
95542
  const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
94883
95543
  inpSimpleScrollX_Start.addEventListener('change', () => {
94884
95544
  this.applySimpleScroll();
94885
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
+ });
94886
95574
  const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
94887
95575
  inpSimpleScrollX_End.addEventListener('change', () => {
94888
95576
  this.applySimpleScroll();
94889
- });
95577
+ }); // ---
95578
+
94890
95579
  const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
94891
95580
  inpSimpleScrollY_Start.addEventListener('change', () => {
94892
95581
  this.applySimpleScroll();
94893
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
+ });
94894
95611
  const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
94895
95612
  inpSimpleScrollY_End.addEventListener('change', () => {
94896
95613
  this.applySimpleScroll();
94897
- });
95614
+ }); // ---
95615
+
94898
95616
  const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
94899
95617
  inpSimpleScrollScale_Start.addEventListener('change', () => {
94900
95618
  this.applySimpleScroll();
94901
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
+ });
94902
95648
  const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
94903
95649
  inpSimpleScrollScale_End.addEventListener('change', () => {
94904
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();
94905
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
+
94906
95727
  const btnClearSimpleScroll = modalAnimateScroll.querySelector('.cmd-clear-simplescroll');
94907
95728
  btnClearSimpleScroll.addEventListener('click', () => {
94908
95729
  let activeElement;
@@ -94912,6 +95733,7 @@ class AnimateScroll {
94912
95733
  this.builder.editor.saveForUndo();
94913
95734
  this.cleanup(activeElement);
94914
95735
  this.cleanup_leave(activeElement);
95736
+ this.cleanup_timeline(activeElement);
94915
95737
  activeElement.style.transform = '';
94916
95738
  activeElement.style.transition = '';
94917
95739
  activeElement.style.opacity = '';
@@ -94924,6 +95746,72 @@ class AnimateScroll {
94924
95746
 
94925
95747
  this.builder.settings.onChange();
94926
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
+ });
94927
95815
  const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
94928
95816
  btnDisableSmoothAnim.addEventListener('click', () => {
94929
95817
  if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -94943,6 +95831,96 @@ class AnimateScroll {
94943
95831
  }
94944
95832
 
94945
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);
94946
95924
  }); // ---
94947
95925
  //Extend onPageContentClick
94948
95926
 
@@ -94955,7 +95933,170 @@ class AnimateScroll {
94955
95933
  setTimeout(() => {
94956
95934
  this.clickContent();
94957
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
+ }
94958
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
+ });
94959
96100
  }
94960
96101
 
94961
96102
  clickContent() {
@@ -95092,22 +96233,149 @@ class AnimateScroll {
95092
96233
  inpRotateCounter_leave.value = '';
95093
96234
  inpRotateClockwise_leave.value = '';
95094
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');
95095
96243
  const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95096
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');
95097
96252
  const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95098
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');
95099
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');
95100
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 = '';
95101
96288
  inpSimpleScrollX_End.value = '';
95102
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 = '';
95103
96297
  inpSimpleScrollY_End.value = '';
95104
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 = '';
95105
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 = '';
95106
96325
  }
95107
96326
 
95108
96327
  read() {
95109
96328
  // clear
95110
- 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
+
95111
96379
  let activeElement;
95112
96380
  let target = this.getTarget();
95113
96381
  activeElement = target.element;
@@ -95158,19 +96426,100 @@ class AnimateScroll {
95158
96426
  }
95159
96427
  }); // Simple Scroll
95160
96428
 
95161
- 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'))) {
95162
- const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
95163
- const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95164
- const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
95165
- const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95166
- const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
95167
- const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
95168
- inpSimpleScrollX_End.value = '';
95169
- inpSimpleScrollY_Start.value = '';
95170
- inpSimpleScrollY_End.value = '';
95171
- inpSimpleScrollScale_Start.value = '';
95172
- inpSimpleScrollScale_End.value = '';
95173
- 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
+
95174
96523
  let css1 = activeElement.getAttribute('data-bottom-top');
95175
96524
  dummyElm.style.cssText = css1;
95176
96525
  let transform = this.getTransform(dummyElm, css1);
@@ -95187,6 +96536,14 @@ class AnimateScroll {
95187
96536
  inpSimpleScrollScale_Start.value = transform.scale;
95188
96537
  }
95189
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
+
95190
96547
  let css2 = activeElement.getAttribute('data-top-bottom');
95191
96548
  dummyElm.style.cssText = css2;
95192
96549
  transform = this.getTransform(dummyElm, css2);
@@ -95203,6 +96560,88 @@ class AnimateScroll {
95203
96560
  inpSimpleScrollScale_End.value = transform.scale;
95204
96561
  }
95205
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
+
95206
96645
  if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
95207
96646
  // default
95208
96647
  btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
@@ -95540,17 +96979,17 @@ class AnimateScroll {
95540
96979
  activeElement.classList.remove('once');
95541
96980
  setTimeout(() => {
95542
96981
  activeElement.classList.add(val);
95543
- if (once) activeElement.classList.add('once');
96982
+ if (once) activeElement.classList.add('once');else activeElement.classList.remove('once');
95544
96983
  activeElement.classList.add('is-animated');
95545
96984
  setTimeout(() => {
95546
96985
  activeElement.style.transition = '';
95547
96986
  activeElement.classList.add('is-inview');
96987
+ this.builder.settings.onRender(); //Trigger Change event
96988
+
96989
+ this.builder.settings.onChange();
95548
96990
  }, 10);
95549
96991
  }, 10);
95550
- } //Trigger Change event
95551
-
95552
-
95553
- this.builder.settings.onChange();
96992
+ }
95554
96993
  }
95555
96994
 
95556
96995
  applySimpleScroll() {
@@ -95560,36 +96999,201 @@ class AnimateScroll {
95560
96999
  if (!activeElement) return;
95561
97000
  const modalAnimateScroll = this.modalAnimateScroll;
95562
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');
95563
97009
  const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95564
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');
95565
97018
  const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95566
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');
95567
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');
95568
97046
  let valXStart;
95569
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');
95570
97062
  let valXEnd;
95571
97063
  if (inpSimpleScrollX_End.value !== '') valXEnd = inpSimpleScrollX_End.value + (inpSimpleScrollX_End.value.indexOf('%') !== -1 ? '' : 'px');
95572
97064
  let valYStart;
95573
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');
95574
97080
  let valYEnd;
95575
97081
  if (inpSimpleScrollY_End.value !== '') valYEnd = inpSimpleScrollY_End.value + (inpSimpleScrollY_End.value.indexOf('%') !== -1 ? '' : 'px');
95576
97082
  let scaleStart;
95577
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;
95578
97098
  let scaleEnd;
95579
97099
  if (inpSimpleScrollScale_End.value !== '') scaleEnd = inpSimpleScrollScale_End.value;
95580
- 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})` : '');
95581
97137
  animStart = animStart.trim();
95582
- 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})` : '');
95583
97153
  animEnd = animEnd.trim();
95584
- let sStart = animStart ? 'transform: ' + animStart + ';' : '';
95585
- 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}` : '');
95586
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();
95587
97171
  sEnd = sEnd.trim();
95588
97172
  this.builder.editor.saveForUndo();
95589
97173
  this.cleanup(activeElement);
95590
- let dataStart = 'data-bottom-top';
95591
- 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';
95592
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);
95593
97197
  if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);else activeElement.removeAttribute(dataEnd);
95594
97198
  const btnDisableSmoothAnim = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
95595
97199
 
@@ -95602,7 +97206,7 @@ class AnimateScroll {
95602
97206
 
95603
97207
  activeElement.style.transform = '';
95604
97208
  activeElement.style.transition = '';
95605
- activeElement.style.opacity = '';
97209
+ activeElement.style.opacity = ''; // console.log(activeElement);
95606
97210
 
95607
97211
  if (this.builder.win.skrollrr) {
95608
97212
  this.builder.win.skrollrr.refresh();
@@ -95673,6 +97277,7 @@ class AnimateScroll {
95673
97277
  let sStart = (animStart ? 'transform: ' + animStart + ';' : '') + (fade ? 'opacity: 0;' : '');
95674
97278
  let sEnd = (animEnd ? 'transform: ' + animEnd + ';' : '') + (fade ? 'opacity: 1;' : '');
95675
97279
  this.builder.editor.saveForUndo();
97280
+ this.cleanup_timeline(activeElement);
95676
97281
  this.cleanup(activeElement);
95677
97282
  let dataStart;
95678
97283
  let dataEnd;
@@ -95740,7 +97345,7 @@ class AnimateScroll {
95740
97345
  const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
95741
97346
  if (inpSlideUp_leave.value !== '') valY_leave = '-' + inpSlideUp_leave.value + (inpSlideUp_leave.value.indexOf('%') !== -1 ? '' : 'px');
95742
97347
  const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
95743
- if (inpScale_leave.value !== '') scale = inpScale_leave.value;
97348
+ if (inpScale_leave.value !== '') scale_leave = inpScale_leave.value;
95744
97349
  const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
95745
97350
  if (inpRotateClockwise_leave.value !== '') rotate_leave = inpRotateClockwise_leave.value;
95746
97351
  const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
@@ -95880,7 +97485,7 @@ class AnimateScroll {
95880
97485
  return this.readTarget('bg');
95881
97486
  }
95882
97487
 
95883
- 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') {
95884
97489
  // enter start
95885
97490
 
95886
97491
  css1 = activeElement.getAttribute('data-bottom-top');
@@ -95889,7 +97494,17 @@ class AnimateScroll {
95889
97494
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
95890
97495
 
95891
97496
  css2 = activeElement.getAttribute('data-top-bottom'); // }
95892
-
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');
95893
97508
  let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95894
97509
  // basic anim
95895
97510
 
@@ -95898,7 +97513,7 @@ class AnimateScroll {
95898
97513
  } // }
95899
97514
 
95900
97515
 
95901
- if (css1 || css2 || hasBasicAnim) {
97516
+ if (css1 || css2 || css3 || hasBasicAnim) {
95902
97517
  return {
95903
97518
  'element': activeElement,
95904
97519
  'name': 'inspectedElement'
@@ -95960,7 +97575,7 @@ class AnimateScroll {
95960
97575
  if (s === 'section') return false;
95961
97576
  }
95962
97577
 
95963
- 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') {
95964
97579
  // enter start
95965
97580
 
95966
97581
  css1 = activeElement.getAttribute('data-bottom-top');
@@ -95969,7 +97584,17 @@ class AnimateScroll {
95969
97584
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
95970
97585
 
95971
97586
  css2 = activeElement.getAttribute('data-top-bottom'); // }
95972
-
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');
95973
97598
  let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95974
97599
  // basic anim
95975
97600
 
@@ -95978,7 +97603,7 @@ class AnimateScroll {
95978
97603
  } // }
95979
97604
 
95980
97605
 
95981
- if (css1 || css2 || hasBasicAnim) {
97606
+ if (css1 || css2 || css3 || hasBasicAnim) {
95982
97607
  return {
95983
97608
  'element': activeElement,
95984
97609
  'name': s
@@ -96051,18 +97676,40 @@ class AnimateScroll {
96051
97676
  elm.removeAttribute('data-top-bottom');
96052
97677
  }
96053
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
+
96054
97691
  edit() {
96055
97692
  this.builder.wrapperEl.classList.add('hard-select');
96056
- this.builder.activeBox.classList.add('box-select');
96057
- 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
96058
97695
 
96059
97696
  this.builder.sidebar.closeSidebar();
96060
97697
  this.modalAnimateScroll.classList.add('active');
96061
- 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 = '';
96062
97706
  }
96063
97707
 
96064
97708
  close() {
96065
- 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');
96066
97713
  }
96067
97714
 
96068
97715
  }
@@ -96220,6 +97867,7 @@ class ContentBox {
96220
97867
  } // { name: 'animation', showInMainToolbar: true, showInElementToolbar: true },
96221
97868
  ],
96222
97869
  disableConfig: false,
97870
+ maxColumns: 6,
96223
97871
  useLightbox: true,
96224
97872
  lightboxArrow: true,
96225
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']],
@@ -98753,7 +100401,7 @@ class ContentBox {
98753
100401
  snippetUrl: this.settings.snippetUrl,
98754
100402
  snippetJSON: window.data_basic,
98755
100403
  snippetPathReplace: this.settings.snippetPathReplace,
98756
- maxColumns: 6,
100404
+ maxColumns: this.settings.maxColumns,
98757
100405
  maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
98758
100406
  onSectionAdd: () => {
98759
100407
  this.pageSetup();
@@ -98892,7 +100540,8 @@ class ContentBox {
98892
100540
  onZoom: scale => {
98893
100541
  // Zoom Adjustment
98894
100542
  // console.log(scale);
98895
- const x = 300 * (1 - scale) / 0.5;
100543
+ const x = 300 * (1 - scale) / 0.5; // const x = -1400 + 1400*(scale);
100544
+
98896
100545
  this.wrapperEl.style.marginTop = `${x}px`;
98897
100546
  },
98898
100547
  onZoomEnd: () => {
@@ -98922,6 +100571,7 @@ class ContentBox {
98922
100571
 
98923
100572
  this.rePositionTool();
98924
100573
  this.wrapperEl.style.transition = '';
100574
+ this.refreshAnim();
98925
100575
  },
98926
100576
  onThemeChange: () => {
98927
100577
  this.refreshUIStyle();
@@ -98933,6 +100583,7 @@ class ContentBox {
98933
100583
  mediaSelect: this.settings.mediaSelect,
98934
100584
  onContentClick: e => {
98935
100585
  if (this.settings.onContentClick) this.settings.onContentClick();
100586
+ this.doc.body.classList.remove('temporary-hide-tools');
98936
100587
  let elm = e.target;
98937
100588
  let editable = elm.closest('[contenteditable="true"]');
98938
100589
 
@@ -98983,6 +100634,7 @@ class ContentBox {
98983
100634
  }
98984
100635
  }
98985
100636
  });
100637
+ this.isTouchSupport = this.editor.isTouchSupport;
98986
100638
  } // editorSetup
98987
100639
 
98988
100640
 
@@ -99001,6 +100653,15 @@ class ContentBox {
99001
100653
  user-select: unset;
99002
100654
  }
99003
100655
 
100656
+ .is-wrapper.is-edit {
100657
+ padding-left: 61px;
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
+
100664
+
99004
100665
  /* Navbar Fix */
99005
100666
  .is-wrapper.is-edit .is-section.is-section-navbar,
99006
100667
  .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
@@ -99048,20 +100709,69 @@ class ContentBox {
99048
100709
  }
99049
100710
 
99050
100711
  /* toggle tool */
99051
- .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,
99052
100713
  .is-wrapper.is-clean-edit .box-select .is-box-tool {
99053
100714
  display: none !important;
99054
100715
  }
99055
- .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,
99056
100717
  .is-wrapper.is-clean-edit .section-select .is-section-tool {
99057
100718
  display: none !important;
99058
100719
  }
99059
- .is-wrapper.is-clean-edit .hard-select .box-select,
100720
+ .is-wrapper.is-clean-edit.hard-select .box-select,
99060
100721
  .is-wrapper.is-clean-edit .box-select {
99061
100722
  outline: none !important;
99062
100723
  }
99063
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
+ }
99064
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
+
99065
100775
  </style>`);
99066
100776
  dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
99067
100777
 
@@ -99084,11 +100794,31 @@ class ContentBox {
99084
100794
  display: none;
99085
100795
  }
99086
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
+
99087
100817
  #_cbhtml .is-modal.editsection.is-modal-content {
99088
100818
  z-index: 10002;
99089
100819
  position: fixed;
99090
100820
  overflow: hidden;
99091
- width: 313px;
100821
+ width: 340px;
99092
100822
  height: auto;
99093
100823
  top: calc(50% - 265px);
99094
100824
  left: calc(50% - 157px);
@@ -99103,6 +100833,81 @@ class ContentBox {
99103
100833
  display: none;
99104
100834
  }
99105
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
+ }
99106
100911
  </style>`); // Add page-overlay (to prevent mouseover during page init.
99107
100912
  // Otherwise the mouseover won't be triggered when the page ready)
99108
100913
 
@@ -99120,6 +100925,10 @@ class ContentBox {
99120
100925
  // pageOverlay.parentNode.removeChild(pageOverlay);
99121
100926
  // }, 10);
99122
100927
 
100928
+
100929
+ if (localStorage.getItem('_livepreview') != null) {
100930
+ this.openPreview();
100931
+ }
99123
100932
  }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
99124
100933
 
99125
100934
  let showProgress = false;
@@ -99196,9 +101005,20 @@ class ContentBox {
99196
101005
  startShowing();
99197
101006
  }, 300);
99198
101007
  }
99199
- } // Add document Click event
101008
+ } // Hide tools on section wide scroll (mouse scroll)
99200
101009
 
99201
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
101021
+
99202
101022
  this.doc.addEventListener('click', this.doDocumentClick = e => {
99203
101023
  e = e || window.event;
99204
101024
  var target = e.target || e.srcElement; //--- New UX ---
@@ -99283,23 +101103,24 @@ class ContentBox {
99283
101103
 
99284
101104
  this.wrapperEl.classList.remove('is-container-edit');
99285
101105
  this.wrapperEl.classList.remove('is-clean-edit');
99286
- }
99287
-
99288
- 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
+ // }
99289
101114
 
99290
- if (modalEditBox.style.display === 'flex') {
99291
- this.editbox.read();
99292
- }
99293
101115
 
101116
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
101117
+ modalEditBox.style.display = '';
99294
101118
  const modalEditSection = this.builderStuff.querySelector('.editsection');
99295
-
99296
- if (modalEditSection.style.display === 'flex') {
99297
- this.editsection.read();
99298
- }
99299
-
101119
+ modalEditSection.style.display = '';
99300
101120
  if (this.settings.onPageContentClick) this.settings.onPageContentClick(e);
99301
101121
  } else {
99302
101122
  // Outside Wrapper
101123
+ if (document.activeElement) if (document.activeElement.tagName.toLowerCase() === 'input') return;
99303
101124
  this.wrapperEl.classList.remove('is-container-edit');
99304
101125
  this.wrapperEl.classList.remove('is-clean-edit');
99305
101126
  const modalEditBox = this.builderStuff.querySelector('.editbox');
@@ -99449,6 +101270,18 @@ class ContentBox {
99449
101270
  } // init
99450
101271
 
99451
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
+
99452
101285
  pageSetup() {
99453
101286
  // Page Setup (previously: setup)
99454
101287
  const sections = this.wrapperEl.querySelectorAll('.is-section');
@@ -99557,18 +101390,28 @@ class ContentBox {
99557
101390
  }
99558
101391
 
99559
101392
  scrollTo(element, delay = 0) {
101393
+ this.cancelScrollSync = true;
99560
101394
  setTimeout(() => {
99561
101395
  element.scrollIntoView({
99562
101396
  behavior: 'smooth',
99563
101397
  block: 'center'
99564
101398
  });
101399
+ setTimeout(() => {
101400
+ this.cancelScrollSync = false;
101401
+ const iframe = this.animateScroll.modalPagePreview.querySelector('iframe');
101402
+ this.animateScroll.scrollSync(iframe);
101403
+ }, 1000);
99565
101404
  }, delay);
99566
101405
  }
99567
101406
 
99568
101407
  sectionSetup(section) {
99569
101408
  let tool = section.querySelector('.is-section-tool');
99570
101409
  if (tool) tool.parentNode.removeChild(tool);
99571
- 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);
99572
101415
  // Prepare for tooltip
99573
101416
 
99574
101417
  let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
@@ -99590,7 +101433,21 @@ class ContentBox {
99590
101433
  btnSectionRemove.addEventListener('click', () => {
99591
101434
  const modal = document.querySelector('.is-modal.delsectionconfirm');
99592
101435
  this.editor.util.showModal(modal);
99593
- });
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
+ }
99594
101451
  }
99595
101452
 
99596
101453
  boxSetup(box) {
@@ -99765,6 +101622,10 @@ class ContentBox {
99765
101622
  elm.style.opacity = '';
99766
101623
  });
99767
101624
  */
101625
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
101626
+ modalEditBox.style.display = '';
101627
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
101628
+ modalEditSection.style.display = '';
99768
101629
  this.pageSetup(); // To refresh skrollrr anim
99769
101630
 
99770
101631
  if (this.win.skrollrr) {
@@ -99772,7 +101633,7 @@ class ContentBox {
99772
101633
  }
99773
101634
  }
99774
101635
 
99775
- refreshPage() {
101636
+ refreshAnim() {
99776
101637
  /*
99777
101638
  // Clean
99778
101639
  const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
@@ -99805,6 +101666,32 @@ class ContentBox {
99805
101666
  }
99806
101667
  }
99807
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
+
99808
101695
  addIdea(newArea) {
99809
101696
  this.editor.saveForUndo();
99810
101697
  const designPath = this.designPath;
@@ -100046,7 +101933,7 @@ class ContentBox {
100046
101933
  this.addSpace();
100047
101934
  this.scrollTo(newSection, 600);
100048
101935
  setTimeout(() => {
100049
- this.refreshPage();
101936
+ this.refreshAnim();
100050
101937
  }, 600);
100051
101938
  } // addIdea
100052
101939
 
@@ -100103,6 +101990,7 @@ class ContentBox {
100103
101990
  rePositionTool() {
100104
101991
  let rowActive = this.wrapperEl.querySelector('.row-active'); // when zooming, there should be a focused row/col
100105
101992
 
101993
+ if (!rowActive) return;
100106
101994
  let box;
100107
101995
 
100108
101996
  if (rowActive) {
@@ -100298,7 +102186,7 @@ class ContentBox {
100298
102186
  const sidebar = builderStuff.querySelector('.is-sidebar');
100299
102187
  sidebar.children[btn.pos].insertAdjacentHTML('afterEnd', btnHtml);
100300
102188
  const btnNew = builderStuff.querySelector('#' + btnId);
100301
- btnNew.addEventListener('click', () => {
102189
+ btnNew.addEventListener('click', e => {
100302
102190
  if (btn.src) {
100303
102191
  if (!dom.hasClass(btnNew, 'active')) {
100304
102192
  // Close all opened sidebar
@@ -100351,7 +102239,7 @@ class ContentBox {
100351
102239
  this.sidebar.closeSidebar();
100352
102240
  }
100353
102241
  } else {
100354
- btn.onClick();
102242
+ btn.onClick(e);
100355
102243
  }
100356
102244
  });
100357
102245
  }
@@ -100497,6 +102385,10 @@ class ContentBox {
100497
102385
  return false;
100498
102386
  });
100499
102387
  });
102388
+
102389
+ if (localStorage.getItem('_livepreview') != null) {
102390
+ this.openPreview();
102391
+ }
100500
102392
  }
100501
102393
 
100502
102394
  boxImage(url, err) {