@innovastudio/contentbox 1.4.34 → 1.4.36

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 (6) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.css +40 -43
  3. package/public/contentbox/contentbox.esm.js +2029 -587
  4. package/public/contentbox/contentbox.min.js +4 -4
  5. package/public/contentbox/lang/en.js +20 -2
  6. package/readme.txt +1 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -415,6 +415,20 @@ const prepareSvgIcons$1 = builder => {
415
415
  <path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427"></path>
416
416
  <path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
417
417
  </symbol>
418
+
419
+ <symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
420
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
421
+ <polyline points="6 21 21 6 18 3 3 18 6 21"></polyline>
422
+ <line x1="15" y1="6" x2="18" y2="9"></line>
423
+ <path d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
424
+ <path d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
425
+ </symbol>
426
+
427
+ <symbol id="icon-pencil" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
428
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
429
+ <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
430
+ <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
431
+ </symbol>
418
432
 
419
433
  </defs>
420
434
  </svg>`;
@@ -637,7 +651,12 @@ class SideBar {
637
651
  } // Close all opened sidebar
638
652
 
639
653
 
640
- this.closeSidebar();
654
+ this.closeSidebar(); // Close all modeless dialogs
655
+
656
+ this.builder.editbox.close();
657
+ this.builder.editsection.close();
658
+ this.builder.animateScroll.close(); // Close anim side panel
659
+
641
660
  if (toggle) return;
642
661
  let panelId = btn.getAttribute('data-content');
643
662
 
@@ -855,7 +874,7 @@ class SideBar {
855
874
  setTimeout(() => {
856
875
  elm.style.display = ''; //hide
857
876
  }, 300);
858
- });
877
+ }); // this.builder.animateScroll.close();
859
878
  }
860
879
 
861
880
  viewIdeas() {
@@ -3808,7 +3827,17 @@ class EditSection {
3808
3827
  this.builder = builder;
3809
3828
  const builderStuff = this.builder.builderStuff;
3810
3829
  this.builderStuff = builderStuff;
3811
- let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<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>';
3830
+ let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + (`
3831
+ <div class="is-modal is-modal-content editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
3832
+ <div class="is-modal-bar is-draggable" draggable="">
3833
+ ${out('Section Settings')}
3834
+ <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
3835
+ <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
3836
+ </button>
3837
+ </div>
3838
+ <div style="padding:0;width:100%;">
3839
+
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>';
3812
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>';
3813
3842
  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>';
3814
3843
  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>' +
@@ -3818,6 +3847,10 @@ class EditSection {
3818
3847
  dom$k.appendHtml(builderStuff, html);
3819
3848
  let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
3820
3849
  this.modalEditSection = modalEditSection;
3850
+ const btnClose = modalEditSection.querySelector('.is-modal-close');
3851
+ if (btnClose) btnClose.addEventListener('click', () => {
3852
+ this.close();
3853
+ });
3821
3854
  new Tabs$1(modalEditSection);
3822
3855
  const tabs = modalEditSection.querySelectorAll('.is-tabs a');
3823
3856
  tabs.forEach(tab => {
@@ -3856,6 +3889,7 @@ class EditSection {
3856
3889
  // }, 300);
3857
3890
 
3858
3891
  this.builder.activeSection = null;
3892
+ this.builder.refreshPage();
3859
3893
  });
3860
3894
  const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
3861
3895
  btnSectionUp.addEventListener('click', () => {
@@ -3896,6 +3930,9 @@ class EditSection {
3896
3930
  this.builder.sectionStack(); //Trigger Change event
3897
3931
 
3898
3932
  this.builder.settings.onChange();
3933
+ setTimeout(() => {
3934
+ this.builder.refreshPage();
3935
+ }, 600);
3899
3936
  });
3900
3937
  const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
3901
3938
  btnSectionAnimStart.forEach(btn => {
@@ -3962,6 +3999,9 @@ class EditSection {
3962
3999
  dom$k.addClass(btn, 'on'); //Trigger Change event
3963
4000
 
3964
4001
  this.builder.settings.onChange();
4002
+ setTimeout(() => {
4003
+ this.builder.refreshPage();
4004
+ }, 300);
3965
4005
  });
3966
4006
  });
3967
4007
  const btnBoxSpacing = modalEditSection.querySelectorAll('.cmd-box-spacing');
@@ -4107,21 +4147,9 @@ class EditSection {
4107
4147
  });
4108
4148
  }
4109
4149
 
4110
- edit() {
4111
- this.builder.hideTools();
4112
- this.builder.sidebar.closeSidebar();
4150
+ read() {
4113
4151
  const activeSection = this.builder.activeSection;
4114
- const modalEditSection = this.modalEditSection; // const elms = this.builder.doc.querySelectorAll('.section-active');
4115
- // elms.forEach(elm=>{
4116
- // dom.removeClass(elm, 'section-active');
4117
- // });
4118
-
4119
- dom$k.addClass(activeSection, 'section-active');
4120
- this.builder.showModal(modalEditSection, false, () => {
4121
- dom$k.removeClass(activeSection, 'section-active');
4122
- this.builder.showTools();
4123
- });
4124
- modalEditSection.focus(); // Clean old unused is-bg-light/dark
4152
+ const modalEditSection = this.modalEditSection; // Clean old unused is-bg-light/dark
4125
4153
 
4126
4154
  let elms = this.builder.activeSection.querySelectorAll('.is-bg-light');
4127
4155
  elms.forEach(elm => {
@@ -4299,8 +4327,32 @@ class EditSection {
4299
4327
  btnSectionBgColor.style.backgroundColor = bgcolor; //preview
4300
4328
  } else {
4301
4329
  btnSectionBgColor.style.backgroundColor = '';
4302
- } // this.builder.scrollTo(activeSection);
4330
+ }
4331
+ }
4332
+
4333
+ close() {
4334
+ const modalEditSection = this.modalEditSection;
4335
+ modalEditSection.style.display = '';
4336
+ }
4337
+
4338
+ edit() {
4339
+ this.builder.wrapperEl.classList.add('hard-select');
4340
+ this.builder.activeBox.classList.add('box-select');
4341
+ this.builder.activeSection.classList.add('section-select');
4342
+ const modalEditSection = this.modalEditSection;
4343
+ modalEditSection.style.display = 'flex'; // const elms = this.builder.doc.querySelectorAll('.section-active');
4344
+ // elms.forEach(elm=>{
4345
+ // dom.removeClass(elm, 'section-active');
4346
+ // });
4347
+
4348
+ modalEditSection.focus();
4349
+ this.read(); // Animate
4303
4350
 
4351
+ const activeSection = this.builder.activeSection;
4352
+ activeSection.classList.add('section-active');
4353
+ setTimeout(() => {
4354
+ activeSection.classList.remove('section-active');
4355
+ }, 1000); // this.builder.scrollTo(activeSection);
4304
4356
  }
4305
4357
 
4306
4358
  sectionUp() {
@@ -4416,7 +4468,19 @@ class EditSection {
4416
4468
 
4417
4469
  this.builder.settings.onRender();
4418
4470
  this.builder.hideModal(this.modalEditSection);
4419
- this.builder.scrollTo(section, 600);
4471
+ this.builder.scrollTo(section, 600); // Change
4472
+
4473
+ activeSection.classList.remove('section-select');
4474
+ activeSection.classList.remove('box-select');
4475
+ const prevBox = activeSection.querySelector('.box-select');
4476
+ if (prevBox) prevBox.classList.remove('box-select');
4477
+ this.builder.activeSection = section;
4478
+
4479
+ if (section.classList.contains('box-select')) {
4480
+ this.builder.activeBox = section;
4481
+ } else {
4482
+ this.builder.activeBox = section.querySelector('.box-select');
4483
+ }
4420
4484
  }
4421
4485
 
4422
4486
  sectionAnimStart(s) {
@@ -4521,7 +4585,7 @@ class EditSection {
4521
4585
  } //Trigger Render event
4522
4586
 
4523
4587
 
4524
- this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 600);
4588
+ this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 100);
4525
4589
  }
4526
4590
 
4527
4591
  boxSpacing(s) {
@@ -10186,7 +10250,17 @@ class EditBox {
10186
10250
  </form>
10187
10251
  `;
10188
10252
  html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
10189
- html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
10253
+ html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + (`
10254
+ <div class="is-modal is-modal-content editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
10255
+ <div class="is-modal-bar is-draggable" draggable="">
10256
+ ${out('Box Settings')}
10257
+ <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
10258
+ <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
10259
+ </button>
10260
+ </div>
10261
+ <div style="padding:0;width:100%;">
10262
+
10263
+ ` ) + '<div style="padding:0;width:100%;">' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
10190
10264
  html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
10191
10265
  html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
10192
10266
  html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
@@ -10274,7 +10348,11 @@ class EditBox {
10274
10348
  const divBoxClick = modalEditBox.querySelector('#divBoxClick');
10275
10349
  this.divBoxClick = divBoxClick;
10276
10350
  const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
10277
- this.divBoxGeneral = divBoxGeneral; // ------ Box Cover Upload -------
10351
+ this.divBoxGeneral = divBoxGeneral;
10352
+ const btnClose = modalEditBox.querySelector('.is-modal-close');
10353
+ if (btnClose) btnClose.addEventListener('click', () => {
10354
+ this.close();
10355
+ }); // ------ Box Cover Upload -------
10278
10356
 
10279
10357
  let fileCover = builderStuff.querySelector('.input-file-cover-central');
10280
10358
 
@@ -10282,6 +10360,10 @@ class EditBox {
10282
10360
  fileCover = this.builder.contentStuff.querySelector('.input-file-cover-central');
10283
10361
  }
10284
10362
 
10363
+ let btnCoverCentral = builderStuff.querySelector('.is-cover-upload-central');
10364
+ if (btnCoverCentral) btnCoverCentral.addEventListener('mouseleave', () => {
10365
+ btnCoverCentral.style.left = 0;
10366
+ });
10285
10367
  if (fileCover) fileCover.addEventListener('click', () => {
10286
10368
  this.targetBox = this.builder.activeBox;
10287
10369
  });
@@ -11944,10 +12026,7 @@ class EditBox {
11944
12026
  });
11945
12027
  }
11946
12028
 
11947
- edit() {
11948
- this.builder.hideTools();
11949
- this.targetBox = null;
11950
- this.builder.sidebar.closeSidebar();
12029
+ read() {
11951
12030
  const builderStuff = this.builderStuff;
11952
12031
  const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
11953
12032
  const activeBox = this.builder.activeBox;
@@ -12244,33 +12323,6 @@ class EditBox {
12244
12323
  // });
12245
12324
 
12246
12325
 
12247
- dom$j.addClass(activeBox, 'box-active');
12248
- this.builder.showModal(modalEditBox, false, () => {
12249
- dom$j.removeClass(activeBox, 'box-active');
12250
- this.builder.showTools();
12251
- });
12252
- /*
12253
- // Experimental
12254
- modalEditBox.style.display = 'flex';
12255
- document.body.classList.add('side-open');
12256
- let panel = modalEditBox.querySelector('.is-modal-content');
12257
- setTimeout(()=>{
12258
- this.builder.showModal(modalEditBox, false, ()=>{
12259
- dom.removeClass(activeBox, 'box-active');
12260
-
12261
- this.builder.showTools();
12262
- document.body.classList.remove('side-open');
12263
- this.builder.wrapperEl.style.transition = 'none';
12264
- setTimeout(()=>{
12265
- modalEditBox.style.display = '';
12266
- this.builder.wrapperEl.style.transition = '';
12267
- }, 200);
12268
- });
12269
- }, 10);
12270
- */
12271
-
12272
- modalEditBox.focus();
12273
-
12274
12326
  if (container) {
12275
12327
  modalEditBox.querySelector('.val-box-size').innerHTML = '';
12276
12328
  container.classList.forEach(item => {
@@ -12556,6 +12608,49 @@ class EditBox {
12556
12608
  if (modalEditBox.querySelector('#divBoxContentContainer').style.display === 'flex' && modalEditBox.querySelector('#tabBoxContentContainer').style.display === 'none') {
12557
12609
  modalEditBox.querySelector('#tabBoxGeneral').click();
12558
12610
  }
12611
+ }
12612
+
12613
+ close() {
12614
+ const modalEditBox = this.modalEditBox;
12615
+ modalEditBox.style.display = '';
12616
+ }
12617
+
12618
+ edit() {
12619
+ this.builder.wrapperEl.classList.add('hard-select');
12620
+ this.builder.activeBox.classList.add('box-select');
12621
+ this.builder.activeSection.classList.add('section-select');
12622
+ const modalEditBox = this.modalEditBox;
12623
+ this.targetBox = null;
12624
+ this.builder.sidebar.closeSidebar();
12625
+ this.read(); // Animate
12626
+
12627
+ const activeBox = this.builder.activeBox;
12628
+ activeBox.classList.add('box-active');
12629
+ setTimeout(() => {
12630
+ activeBox.classList.remove('box-active');
12631
+ }, 1000);
12632
+ modalEditBox.style.display = 'flex';
12633
+ /*
12634
+ // Experimental
12635
+ modalEditBox.style.display = 'flex';
12636
+ document.body.classList.add('side-open');
12637
+ let panel = modalEditBox.querySelector('.is-modal-content');
12638
+ setTimeout(()=>{
12639
+ this.builder.showModal(modalEditBox, false, ()=>{
12640
+ dom.removeClass(activeBox, 'box-active');
12641
+
12642
+ this.builder.showTools();
12643
+ document.body.classList.remove('side-open');
12644
+ this.builder.wrapperEl.style.transition = 'none';
12645
+ setTimeout(()=>{
12646
+ modalEditBox.style.display = '';
12647
+ this.builder.wrapperEl.style.transition = '';
12648
+ }, 200);
12649
+ });
12650
+ }, 10);
12651
+ */
12652
+
12653
+ modalEditBox.focus();
12559
12654
  } //edit
12560
12655
 
12561
12656
 
@@ -12653,6 +12748,12 @@ class EditBox {
12653
12748
  h = '80vh';
12654
12749
  }
12655
12750
 
12751
+ if (moduleName === 'navbar-builder') {
12752
+ // div.style.width = '1600px';
12753
+ w = '700px';
12754
+ h = '780px';
12755
+ }
12756
+
12656
12757
  div.style.maxWidth = w;
12657
12758
  div.style.height = h;
12658
12759
  }
@@ -28643,6 +28744,14 @@ class HtmlUtil {
28643
28744
  Array.prototype.forEach.call(elms, elm => {
28644
28745
  dom$h.removeClass(elm, 'section-active');
28645
28746
  });
28747
+ elms = tmp.querySelectorAll('.section-select');
28748
+ Array.prototype.forEach.call(elms, elm => {
28749
+ dom$h.removeClass(elm, 'section-select');
28750
+ });
28751
+ elms = tmp.querySelectorAll('.box-select');
28752
+ Array.prototype.forEach.call(elms, elm => {
28753
+ dom$h.removeClass(elm, 'box-select');
28754
+ });
28646
28755
  elms = tmp.querySelectorAll('.is-section-tool');
28647
28756
  dom$h.removeElements(elms);
28648
28757
  elms = tmp.querySelectorAll('.is-box-tool');
@@ -35356,12 +35465,17 @@ const renderSnippetPanel = builder => {
35356
35465
  if (oldCss) oldCss.parentNode.removeChild(oldCss);
35357
35466
  builder.builderStuff.insertAdjacentHTML('afterbegin', newCss);
35358
35467
  }
35468
+
35469
+ builder.sectionDropSetup();
35359
35470
  },
35360
- onMove: () => {
35471
+ onMove: evt => {
35361
35472
  let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
35362
35473
  // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
35363
35474
 
35364
35475
  if (emptyinfo) emptyinfo.style.display = 'none';
35476
+ if (builder.sortableOnPage) if (evt.related.getBoundingClientRect().top < 0 || evt.related.getBoundingClientRect().top > window.innerHeight) {
35477
+ return false;
35478
+ }
35365
35479
  },
35366
35480
  onStart: () => {
35367
35481
  // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
@@ -35390,6 +35504,8 @@ const renderSnippetPanel = builder => {
35390
35504
  if (activeBuilderArea) {
35391
35505
  dom.addClass(activeBuilderArea, 'builder-active');
35392
35506
  }
35507
+
35508
+ if (builder.sortableOnPage) builder.sortableOnPage.destroy();
35393
35509
  }
35394
35510
  });
35395
35511
 
@@ -87297,7 +87413,7 @@ class MediaPicker {
87297
87413
  <input id="inpMediaSource" class="input-src" type="text">
87298
87414
  <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
87299
87415
  <div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
87300
- <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.onLargerImageUpload}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
87416
+ <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
87301
87417
  <input name="hidRefId" class="input-ref-id" type="hidden" value="">
87302
87418
  <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
87303
87419
  <input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
@@ -87330,61 +87446,128 @@ class MediaPicker {
87330
87446
  const inpSrc = modalMediaSelect.querySelector('.input-src');
87331
87447
  const elm = modalMediaSelect.querySelector('.input-select');
87332
87448
  if (elm) dom.addEventListener(elm, 'click', () => {
87333
- if (this.builder.opts.onFileSelectClick) {
87334
- this.builder.opts.onFileSelectClick({
87335
- targetInput: inpSrc,
87336
- theTrigger: elm
87449
+ let targetAssetType = this.builder.targetAssetType;
87450
+ let targetInput = inpSrc;
87451
+ let theTrigger = elm; //--- Same ass openAsset() in contentbuilder.js 2098
87452
+
87453
+ if (targetAssetType === 'media' && (this.builder.opts.onMediaSelectClick || this.builder.opts.onImageSelectClick)) {
87454
+ if (this.builder.opts.onMediaSelectClick) {
87455
+ this.builder.opts.onMediaSelectClick({
87456
+ targetInput: targetInput,
87457
+ theTrigger: theTrigger
87458
+ });
87459
+ } else {
87460
+ this.builder.opts.onImageSelectClick({
87461
+ targetInput: targetInput,
87462
+ theTrigger: theTrigger
87463
+ });
87464
+ }
87465
+ } else if (targetAssetType === 'video' && this.builder.opts.onVideoSelectClick) {
87466
+ this.builder.opts.onVideoSelectClick({
87467
+ targetInput: targetInput,
87468
+ theTrigger: theTrigger
87337
87469
  });
87338
- } else if (this.builder.opts.onImageSelectClick) {
87470
+ } else if (targetAssetType === 'image' && this.builder.opts.onImageSelectClick) {
87339
87471
  this.builder.opts.onImageSelectClick({
87340
- targetInput: inpSrc,
87341
- theTrigger: elm
87472
+ targetInput: targetInput,
87473
+ theTrigger: theTrigger
87342
87474
  });
87343
- } else if (this.builder.opts.fileselect) {
87344
- let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
87345
- let iframe = modalFileSelect.querySelector('iframe');
87346
-
87347
- if (this.builder.opts.assetRefresh) {
87348
- iframe.src = this.builder.opts.fileselect;
87349
- this.builder.opts.assetRefresh = false;
87350
- }
87475
+ } else if (targetAssetType === 'audio' && this.builder.opts.onAudioSelectClick) {
87476
+ this.builder.opts.onAudioSelectClick({
87477
+ targetInput: targetInput,
87478
+ theTrigger: theTrigger
87479
+ });
87480
+ } else if (targetAssetType === 'all' && this.builder.opts.onFileSelectClick) {
87481
+ this.builder.opts.onFileSelectClick({
87482
+ targetInput: targetInput,
87483
+ theTrigger: theTrigger
87484
+ });
87485
+ } else {
87486
+ let iframe;
87487
+ let modal;
87351
87488
 
87352
- if (iframe.src === 'about:blank') {
87353
- iframe.src = this.builder.opts.fileselect;
87354
- }
87489
+ if (targetAssetType === 'media') {
87490
+ modal = this.builder.builderStuff.querySelector('.is-modal.mediaselect');
87491
+ iframe = modal.querySelector('iframe');
87355
87492
 
87356
- util.showModal(modalFileSelect, false, () => {
87493
+ if (iframe.src === 'about:blank') {
87494
+ if (this.builder.opts.mediaSelect) iframe.src = this.builder.opts.mediaSelect;else if (this.builder.opts.imageSelect) iframe.src = this.builder.opts.imageSelect;
87495
+ }
87496
+ } else if (targetAssetType === 'video') {
87497
+ modal = this.builder.builderStuff.querySelector('.is-modal.videoselect');
87498
+ iframe = modal.querySelector('iframe');
87499
+ if (iframe.src === 'about:blank') iframe.src = this.builder.opts.videoSelect;
87500
+ } else if (targetAssetType === 'image') {
87501
+ modal = this.builder.builderStuff.querySelector('.is-modal.imageselect');
87502
+ iframe = modal.querySelector('iframe');
87503
+ if (iframe.src === 'about:blank') iframe.src = this.builder.opts.imageSelect;
87504
+ } else if (targetAssetType === 'audio') {
87505
+ modal = this.builder.builderStuff.querySelector('.is-modal.audioselect');
87506
+ iframe = modal.querySelector('iframe');
87507
+ if (iframe.src === 'about:blank') iframe.src = this.builder.opts.audioSelect;
87508
+ } else if (targetAssetType === 'all') {
87509
+ modal = this.builder.builderStuff.querySelector('.is-modal.fileselect');
87510
+ iframe = modal.querySelector('iframe');
87511
+ if (iframe.src === 'about:blank') iframe.src = this.builder.opts.fileSelect;
87512
+ } // this.builder.util.showModal(modal);
87513
+
87514
+
87515
+ this.builder.util.showModal(modal, false, () => {
87357
87516
  elm.removeAttribute('data-focus');
87358
87517
  elm.focus();
87359
87518
  });
87360
87519
  elm.setAttribute('data-focus', true);
87361
- this.builder.targetInput = inpSrc;
87362
- this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
87363
- } else if (this.builder.opts.imageselect) {
87364
- let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
87365
- let iframe = modalImageSelect.querySelector('iframe');
87366
-
87367
- if (this.builder.opts.assetRefresh) {
87368
- iframe.src = this.builder.opts.imageselect;
87369
- this.builder.opts.assetRefresh = false;
87370
- }
87520
+ this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
87371
87521
 
87372
- if (iframe.src === 'about:blank') {
87373
- iframe.src = this.builder.opts.imageselect;
87374
- }
87522
+ this.builder.targetCallback = null; // this.targetAssetType = targetAssetType;
87523
+ } //---
87524
+ // if(this.builder.opts.onFileSelectClick) {
87525
+ // this.builder.opts.onFileSelectClick({targetInput: inpSrc, theTrigger: elm});
87526
+ // } else if (this.builder.opts.onImageSelectClick) {
87527
+ // this.builder.opts.onImageSelectClick({targetInput: inpSrc, theTrigger: elm});
87528
+ // } else if(this.builder.opts.fileselect) {
87529
+ // let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
87530
+ // let iframe = modalFileSelect.querySelector('iframe');
87531
+ // if(this.builder.opts.assetRefresh) {
87532
+ // iframe.src = this.builder.opts.fileselect;
87533
+ // this.builder.opts.assetRefresh = false;
87534
+ // }
87535
+ // if(iframe.src === 'about:blank') {
87536
+ // iframe.src = this.builder.opts.fileselect;
87537
+ // }
87538
+ // util.showModal(modalFileSelect, false, ()=>{
87539
+ // elm.removeAttribute('data-focus');
87540
+ // elm.focus();
87541
+ // });
87542
+ // elm.setAttribute('data-focus', true);
87543
+ // this.builder.targetInput = inpSrc;
87544
+ // this.builder.targetCallback = null;
87545
+ // // this.builder.targetAssetType = 'media';
87546
+ // } else if(this.builder.opts.imageselect) {
87547
+ // let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
87548
+ // let iframe = modalImageSelect.querySelector('iframe');
87549
+ // if(this.builder.opts.assetRefresh) {
87550
+ // iframe.src = this.builder.opts.imageselect;
87551
+ // this.builder.opts.assetRefresh = false;
87552
+ // }
87553
+ // if(iframe.src === 'about:blank'){
87554
+ // iframe.src = this.builder.opts.imageselect;
87555
+ // }
87556
+ // util.showModal(modalImageSelect, false, ()=>{
87557
+ // elm.removeAttribute('data-focus');
87558
+ // elm.focus();
87559
+ // });
87560
+ // elm.setAttribute('data-focus', true);
87561
+ // this.builder.targetInput = inpSrc;
87562
+ // this.builder.targetCallback = null;
87563
+ // // this.builder.targetAssetType = 'media';
87564
+ // }
87375
87565
 
87376
- util.showModal(modalImageSelect, false, () => {
87377
- elm.removeAttribute('data-focus');
87378
- elm.focus();
87379
- });
87380
- elm.setAttribute('data-focus', true);
87381
- this.builder.targetInput = inpSrc;
87382
- this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
87383
- }
87384
87566
  });
87385
87567
  }
87386
87568
 
87387
87569
  let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
87570
+ let frm = modalMediaSelect.querySelector('.form-upload-larger');
87388
87571
  dom.addEventListener(inputFileSelect, 'change', e => {
87389
87572
  let element = inputFileSelect;
87390
87573
 
@@ -87395,12 +87578,42 @@ class MediaPicker {
87395
87578
  let frmUpload = element;
87396
87579
  dom.addClass(frmUpload, 'please-wait');
87397
87580
  modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
87581
+ let targetAssetType = this.builder.targetAssetType;
87398
87582
 
87399
- if (this.builder.opts.onLargerImageUpload) {
87583
+ if (targetAssetType === 'media' && this.builder.opts.onMediaUpload) {
87584
+ this.builder.opts.onMediaUpload(e);
87585
+ } else if (targetAssetType === 'video' && this.builder.opts.onVideoUpload) {
87586
+ this.builder.opts.onVideoUpload(e);
87587
+ } else if (targetAssetType === 'image' && this.builder.opts.onLargerImageUpload) {
87588
+ this.builder.opts.onLargerImageUpload(e);
87589
+ } else if (targetAssetType === 'audio' && this.builder.opts.onAudioUpload) {
87590
+ this.builder.opts.onAudioUpload(e);
87591
+ } else if (targetAssetType === 'all' && this.builder.opts.onFileUpload) {
87592
+ this.builder.opts.onFileUpload(e);
87593
+ } else if (this.builder.opts.onLargerImageUpload) {
87594
+ // backward
87400
87595
  this.builder.opts.onLargerImageUpload(e);
87401
87596
  } else {
87597
+ if (targetAssetType === 'media') {
87598
+ frm.setAttribute('action', this.builder.opts.mediaHandler);
87599
+ } else if (targetAssetType === 'video') {
87600
+ frm.setAttribute('action', this.builder.opts.videoHandler);
87601
+ } else if (targetAssetType === 'image') {
87602
+ frm.setAttribute('action', this.builder.opts.largerImageHandler);
87603
+ } else if (targetAssetType === 'audio') {
87604
+ frm.setAttribute('action', this.builder.opts.audioHandler);
87605
+ } else if (targetAssetType === 'all') {
87606
+ frm.setAttribute('action', this.builder.opts.fileHandler);
87607
+ if (!this.builder.opts.fileHandler) frm.setAttribute('action', this.builder.opts.mediaHandler); //backward
87608
+ }
87609
+
87402
87610
  frmUpload.submit();
87403
- }
87611
+ } // if(this.builder.opts.onLargerImageUpload) {
87612
+ // this.builder.opts.onLargerImageUpload(e);
87613
+ // } else {
87614
+ // frmUpload.submit();
87615
+ // }
87616
+
87404
87617
 
87405
87618
  inputFileSelect.value = ''; // Clear Input
87406
87619
  });
@@ -87422,7 +87635,9 @@ class MediaPicker {
87422
87635
  const modalMediaSelect = this.modalMediaSelect;
87423
87636
  let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
87424
87637
 
87425
- if (assetType === 'media') {
87638
+ if (assetType === 'all') {
87639
+ inputFileSelect.setAttribute('accept', '*');
87640
+ } else if (assetType === 'media') {
87426
87641
  inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
87427
87642
  } else if (assetType === 'video') {
87428
87643
  inputFileSelect.setAttribute('accept', 'video/mp4');
@@ -88620,6 +88835,7 @@ class ContentBuilder {
88620
88835
  .is-col-tool svg {
88621
88836
  display: initial !important;
88622
88837
  }
88838
+
88623
88839
  `;
88624
88840
 
88625
88841
  if (!this.builderStuff.querySelector('style[data-rel="css-new"]')) {
@@ -91332,6 +91548,199 @@ class ContentBuilder {
91332
91548
  // return currentScript.replace(currentScriptFile, '');
91333
91549
  }
91334
91550
 
91551
+ sectionDropSetup() {
91552
+ if (this.page) {
91553
+ if (this.page !== '.is-wrapper') return; // only for ContentBox
91554
+
91555
+ const wrapper = this.doc.querySelector(this.page);
91556
+ this.sortableOnPage = new Sortable(wrapper, {
91557
+ scroll: true,
91558
+ group: 'shared',
91559
+ direction: 'vertical',
91560
+ animation: 150,
91561
+ sort: true,
91562
+ // draggable: '.dummy',
91563
+ swapThreshold: 0.1,
91564
+ invertSwap: true,
91565
+ onAdd: evt => {
91566
+ var itemEl = evt.item;
91567
+
91568
+ if (itemEl.querySelector('.is-col-tool')) {
91569
+ let rowTool = itemEl.querySelector('.is-row-tool');
91570
+ let colTool = itemEl.querySelector('.is-col-tool');
91571
+ let rowAddTool = itemEl.querySelector('.is-rowadd-tool');
91572
+ itemEl.removeChild(rowTool);
91573
+ itemEl.removeChild(colTool);
91574
+ itemEl.removeChild(rowAddTool);
91575
+ let elms = itemEl.querySelectorAll('[data-click]');
91576
+ elms.forEach(elm => {
91577
+ elm.removeAttribute('data-click');
91578
+ });
91579
+ itemEl.removeAttribute('draggable');
91580
+ itemEl.classList.remove('row-active');
91581
+ itemEl.classList.remove('row-outline');
91582
+ elms = itemEl.querySelectorAll('.cell-active');
91583
+ elms.forEach(elm => {
91584
+ elm.classList.remove('cell-active');
91585
+ });
91586
+ elms = itemEl.querySelectorAll('*');
91587
+ elms.forEach(elm => {
91588
+ elm.style.cursor = '';
91589
+ });
91590
+ itemEl.outerHTML = `
91591
+ <div class="is-section is-box is-section-100 type-poppins">
91592
+ <div class="is-overlay"></div>
91593
+ <div class="is-boxes">
91594
+ <div class="is-box-centered">
91595
+ <div class="is-container is-content-900 v2 size-18 leading-14">
91596
+ ${itemEl.outerHTML}
91597
+ </div>
91598
+ </div>
91599
+ </div>
91600
+ </div>
91601
+ `;
91602
+ if (this.opts.onSectionAdd) this.opts.onSectionAdd(); // //Trigger Change event
91603
+ // this.opts.onChange();
91604
+ // //Trigger Render event
91605
+ // this.opts.onRender();
91606
+
91607
+ return;
91608
+ }
91609
+
91610
+ if (itemEl.getAttribute('data-id')) {
91611
+ // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
91612
+ let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
91613
+
91614
+ const result = this.opts.snippetJSON.snippets.filter(item => {
91615
+ if (item.id + '' === snippetid) return item;else return false;
91616
+ });
91617
+ var html = result[0].html;
91618
+ var noedit = result[0].noedit;
91619
+ var bSnippet;
91620
+
91621
+ if (html.indexOf('"row') === -1) {
91622
+ bSnippet = true; // Just snippet (without row/column grid)
91623
+ } else {
91624
+ bSnippet = false; // Snippet is wrapped in row/colum
91625
+ }
91626
+
91627
+ if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid
91628
+
91629
+ var rowClass = this.opts.row; //row
91630
+
91631
+ var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
91632
+
91633
+ if (rowClass !== '' && colClass.length === 12) {
91634
+ // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
91635
+ html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
91636
+
91637
+ html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
91638
+ html = html.replace(new RegExp('column full', 'g'), colClass[11]);
91639
+ html = html.replace(new RegExp('column half', 'g'), colClass[5]);
91640
+ html = html.replace(new RegExp('column third', 'g'), colClass[3]);
91641
+ html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
91642
+ html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
91643
+ html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
91644
+ html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
91645
+ html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
91646
+ html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
91647
+ html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
91648
+ }
91649
+
91650
+ html = html.replace(/{id}/g, this.util.makeId());
91651
+
91652
+ if (this.opts.onAdd) {
91653
+ html = this.opts.onAdd(html);
91654
+ }
91655
+
91656
+ if (this.opts.snippetPathReplace.length > 0) {
91657
+ // try {
91658
+ if (this.opts.snippetPathReplace[0] !== '') {
91659
+ var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
91660
+ html = html.replace(regex, this.opts.snippetPathReplace[1]);
91661
+ var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
91662
+ var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
91663
+ var regex2 = new RegExp(string1, 'g');
91664
+ html = html.replace(regex2, string2);
91665
+ } // } catch (e) { 1; }
91666
+
91667
+ }
91668
+
91669
+ if (bSnippet) {
91670
+ // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
91671
+ // Can be inserted after current row, column (cell), element, or last row.
91672
+ html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
91673
+
91674
+ itemEl.removeAttribute('draggable');
91675
+ this.dom.removeClass(itemEl, 'snippet-item'); // itemEl.outerHTML = html;
91676
+
91677
+ itemEl.outerHTML = `
91678
+ <div class="is-section is-box is-section-100 type-poppins">
91679
+ <div class="is-overlay"></div>
91680
+ <div class="is-boxes">
91681
+ <div class="is-box-centered">
91682
+ <div class="is-container is-content-900 v2 size-18 leading-14">${html}</div>
91683
+ </div>
91684
+ </div>
91685
+ </div>
91686
+ `;
91687
+ } else {
91688
+ // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
91689
+ // Can only be inserted after current row or last row (not on column or element).
91690
+ let snippet = this.dom.createElement('div');
91691
+ snippet.innerHTML = html;
91692
+ let blocks = snippet.querySelectorAll('[data-html]');
91693
+ Array.prototype.forEach.call(blocks, block => {
91694
+ // Render custom code block
91695
+ html = decodeURIComponent(block.getAttribute('data-html'));
91696
+ html = html.replace(/{id}/g, this.util.makeId());
91697
+
91698
+ for (var i = 1; i <= 20; i++) {
91699
+ html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
91700
+ }
91701
+
91702
+ block.innerHTML = html;
91703
+ });
91704
+ html = snippet.innerHTML; // Clean snippet from sortable related code
91705
+
91706
+ itemEl.removeAttribute('draggable');
91707
+ this.dom.removeClass(itemEl, 'snippet-item');
91708
+ itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
91709
+ // https://ghinda.net/article/script-tags/
91710
+
91711
+ var range = document.createRange();
91712
+ range.setStart(itemEl, 0);
91713
+ itemEl.appendChild(range.createContextualFragment(html)); // itemEl.outerHTML = itemEl.innerHTML;
91714
+
91715
+ itemEl.outerHTML = `
91716
+ <div class="is-section is-box is-section-100 type-poppins">
91717
+ <div class="is-overlay"></div>
91718
+ <div class="is-boxes">
91719
+ <div class="is-box-centered">
91720
+ <div class="is-container is-content-900 v2 size-18 leading-14">${itemEl.innerHTML}</div>
91721
+ </div>
91722
+ </div>
91723
+ </div>
91724
+ `;
91725
+ } // // After snippet has been added, re-apply behavior on builder areas
91726
+ // this.applyBehaviorOn(builder);
91727
+
91728
+
91729
+ if (this.opts.onSectionAdd) this.opts.onSectionAdd(); //Trigger Change event
91730
+
91731
+ this.opts.onChange(); //Trigger Render event
91732
+
91733
+ this.opts.onRender(); // // Hide element tool
91734
+ // this.elmTool.hide();
91735
+ } // this.sortableOnPage.option('draggable', '.dummy');
91736
+
91737
+
91738
+ this.sortableOnPage.destroy();
91739
+ }
91740
+ });
91741
+ }
91742
+ }
91743
+
91335
91744
  }
91336
91745
 
91337
91746
  var pace = {exports: {}};
@@ -92637,59 +93046,73 @@ class ContentStuff {
92637
93046
  50% {transform:scale(0.95);}
92638
93047
  100% {transform:scale(1);}
92639
93048
  }
93049
+
92640
93050
 
92641
- .box-hover {
92642
- outline: 1px solid #00da89;
92643
- outline-offset: -1px;
93051
+ /* Navbar Fix */
93052
+ .is-wrapper.is-edit .is-section.is-section-navbar,
93053
+ .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
93054
+ left: 0;
93055
+ margin-left: 60px;
93056
+ width: calc(100% - 60px);
92644
93057
  }
92645
- .is-section:not(.box-space) .box-hover .is-overlay,
92646
- .is-section:not(.box-space).box-hover .is-overlay {
92647
- top: 1px;
92648
- bottom: 1px;
92649
- left: 1px;
92650
- right: 1px;
93058
+ .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
93059
+ width: 100%;
93060
+ margin-left: unset;
92651
93061
  }
92652
-
92653
- .box-active .is-container {
92654
- border: rgba(0,0,0,0.1) 1px solid;
93062
+
93063
+ /* protected section */
93064
+ .is-section.protected .is-box-tool {
93065
+ display: none !important;
92655
93066
  }
92656
93067
 
92657
- .box-active {
92658
- outline: 1px solid #00da89;
93068
+ /* manual selection during animation edit */
93069
+ .hard-select .is-box-tool {
93070
+ display: none !important;
93071
+ }
93072
+ .hard-select .is-section-tool {
93073
+ display: none !important;
93074
+ }
93075
+ .hard-select .box-select {
93076
+ outline: #00da89 1px solid;
92659
93077
  outline-offset: -1px;
93078
+ z-index: 1;
92660
93079
  }
92661
- .is-section:not(.box-space) .box-active .is-overlay,
92662
- .is-section:not(.box-space).box-active .is-overlay {
92663
- top: 1px;
92664
- bottom: 1px;
92665
- left: 1px;
92666
- right: 1px;
93080
+ .hard-select .box-select .is-box-tool {
93081
+ display: flex !important;
92667
93082
  }
92668
- .section-active {
92669
- outline: 1px solid #00da89;
92670
- outline-offset: -1px;
93083
+ .hard-select .box-select .is-overlay {
93084
+ z-index: -1;
92671
93085
  }
92672
- .is-section:not(.box-space).section-active .is-overlay {
92673
- top: 1px;
92674
- bottom: 1px;
92675
- left: 1px;
92676
- right: 1px;
93086
+ .hard-select .section-select .is-section-tool {
93087
+ display: block !important;
92677
93088
  }
92678
- /*
92679
- .content-edit .is-section-tool,
92680
- .content-edit .is-box-tool {
93089
+
93090
+ /* drop block as section */
93091
+ .is-wrapper > .sortable-ghost {
93092
+ height: 40px !important;
93093
+ min-height: unset !important;
93094
+ background: rgba(204, 204, 204, 0.15) !important;
93095
+ }
93096
+
93097
+ /* toggle tool */
93098
+ .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
93099
+ .is-wrapper.is-clean-edit .box-select .is-box-tool {
92681
93100
  display: none !important;
92682
93101
  }
92683
- */
92684
- .content-edit .box-hover {
93102
+ .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
93103
+ .is-wrapper.is-clean-edit .section-select .is-section-tool {
93104
+ display: none !important;
93105
+ }
93106
+ .is-wrapper.is-clean-edit .hard-select .box-select,
93107
+ .is-wrapper.is-clean-edit .box-select {
92685
93108
  outline: none !important;
92686
93109
  }
93110
+
93111
+ `; // .is-wrapper.is-edit > div {
93112
+ // overflow-x: unset;
93113
+ // overflow-y: unset;
93114
+ // }
92687
93115
 
92688
- .is-wrapper.is-edit > div {
92689
- overflow-x: unset;
92690
- overflow-y: unset;
92691
- }
92692
- `;
92693
93116
  builder.contentStuff.insertAdjacentHTML('afterbegin', `
92694
93117
  <style>
92695
93118
  ${css}
@@ -92709,6 +93132,10 @@ class AnimateScroll {
92709
93132
  this.builderStuff = builderStuff;
92710
93133
  let html = `
92711
93134
  <style>
93135
+ .animatescroll td {
93136
+ font-size: 13px;
93137
+ padding: 5px 5px;
93138
+ }
92712
93139
  .animatescroll.active {
92713
93140
  right: 0;
92714
93141
  }
@@ -92724,9 +93151,12 @@ class AnimateScroll {
92724
93151
  .animatescroll .is-tabs a {
92725
93152
  text-transform: none!important;
92726
93153
  font-size: 13px!important;
92727
- margin-right: 30px!important;
93154
+ margin-right: 25px!important;
92728
93155
  margin-left: 3px!important;
92729
93156
  }
93157
+ .animatescroll .is-tabs a:last-child {
93158
+ margin-right: 0!important;
93159
+ }
92730
93160
  .anim-controls {
92731
93161
  padding: 0 !important;
92732
93162
  z-index: 1;
@@ -92735,11 +93165,11 @@ class AnimateScroll {
92735
93165
  position: absolute;
92736
93166
  top: 0;
92737
93167
  box-sizing: border-box;
92738
- border-top: transparent 200px solid !important;
93168
+ border-top: transparent 240px solid !important;
92739
93169
  }
92740
93170
  #divEnterAnim, #divLeaveAnim, #divAnimSettings {
92741
93171
  border-top: transparent 70px solid !important;
92742
- padding: 0 10px 20px 18px !important;
93172
+ padding:0 15px 20px 22px !important;
92743
93173
  width: 100%;
92744
93174
  height: 100%;
92745
93175
  box-sizing: border-box;
@@ -92780,6 +93210,9 @@ class AnimateScroll {
92780
93210
  font-family: sans-serif !important;
92781
93211
  font-weight: 300 !important;
92782
93212
  padding: 0 !important;
93213
+ width: 65px !important;
93214
+ height: 35px !important;
93215
+ text-align: center !important;
92783
93216
  }
92784
93217
  .flex-wrap {
92785
93218
  display: flex;
@@ -92806,463 +93239,633 @@ class AnimateScroll {
92806
93239
  font-weight: 300 !important;
92807
93240
  padding: 0 !important;
92808
93241
  }
92809
-
93242
+
93243
+ .div-anim-settings,.div-wizard-settings{
93244
+ height: calc(100vh - 34px)
93245
+ }
93246
+ .div-wizard-settings{
93247
+ padding: 10px 15px 0 18px !important;
93248
+ }
93249
+ .div-anim-apply-to button {
93250
+ width: 80px !important;
93251
+ height: 35px !important;
93252
+ }
92810
93253
  </style>
92811
93254
  <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
92812
93255
 
92813
93256
  <div class="side-title">${out('Animation')}</div>
92814
93257
 
92815
- <button tabindex="-1" title="Close" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
93258
+ <button tabindex="-1" title="${out('Close')}" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
92816
93259
 
92817
- <div style="padding:10px 10px 25px 18px;z-index:2;position:relative;">
92818
- <div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
92819
- <div class="flex-wrap">
92820
- <button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
92821
- <button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
92822
- <button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
92823
- <button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
92824
- </div>
92825
- </div>
93260
+ <button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:64px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
93261
+
93262
+ <div class="div-anim-settings" style="display:none">
92826
93263
 
92827
- <div>
92828
- <div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
92829
- <a href="" data-content="divAnimScroll" class="active">${out('On Scroll')}</a>
92830
- <a href="" data-content="divAnimDefault">${out('On View')}</a>
93264
+ <div class="div-anim-apply-to" style="padding:18px 10px 22px 18px;z-index:2;position:relative;">
93265
+ <div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
93266
+ <div class="flex-wrap">
93267
+ <button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element">${out('Element')}</button>
93268
+ <button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column">${out('Column')}</button>
93269
+ <button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row">${out('Row')}</button>
93270
+ <button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container">${out('Container')}</button>
93271
+ <button title="${out('Overlay')}" class="cmd-target" data-command="target" data-value="overlay">${out('Overlay')}</button>
93272
+ <button title="${out('Background')}" class="cmd-target" data-command="target" data-value="bg">${out('Bg')}</button>
93273
+ <button title="${out('Box')}" class="cmd-target" data-command="target" data-value="box">${out('Box')}</button>
93274
+ <button title="${out('Section')}" class="cmd-target" data-command="target" data-value="section">${out('Section')}</button>
93275
+ </div>
93276
+ </div>
93277
+
93278
+ <div class="div-anim-type">
93279
+ <div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
93280
+ <a href="" data-content="divAnimDefault" class="active">${out('On View')}</a>
93281
+ <a href="" data-content="divAnimScroll">${out('On Scroll')}</a>
93282
+ <a href="" data-content="divAnimScrollSimple">${out('On Scroll (Simple)')}</a>
93283
+ </div>
92831
93284
  </div>
92832
- </div>
92833
-
92834
- <div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
92835
-
92836
- <div class="anim-controls">
92837
-
92838
- <div style="padding:20px 0 0 18px;">
92839
- <div class="anim-label">
92840
- <span>
92841
- <span class="bold">${out('Fade')}</span>:
92842
- </span>
92843
- </div>
92844
- <div class="flex-wrap">
92845
- <button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
92846
- <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
92847
- <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
92848
- <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
92849
- <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
92850
- </div>
92851
93285
 
92852
- <div class="anim-label">
92853
- <span>
92854
- <span class="bold">${out('Slide')}</span>:
92855
- </span>
92856
- </div>
92857
- <div class="flex-wrap">
92858
- <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
92859
- <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
92860
- <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
92861
- <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
92862
- </div>
92863
-
92864
- <div class="anim-label">
92865
- <span>
92866
- <span class="bold">${out('Flip')}</span>:
92867
- </span>
92868
- </div>
92869
- <div class="flex-wrap">
92870
- <button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
92871
- <button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
92872
- </div>
92873
-
92874
- <div class="anim-label">
92875
- <span>
92876
- <span class="bold">${out('Zoom')}</span>:
92877
- </span>
92878
- </div>
92879
- <div class="flex-wrap">
92880
- <button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
92881
- <button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
92882
- </div>
92883
-
92884
- <div class="anim-label">
92885
- <span>
92886
- <span class="bold">${out('Pulse')}</span>:
92887
- </span>
92888
- </div>
92889
- <div class="flex-wrap">
92890
- <button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
92891
- </div>
92892
-
92893
- <div class="anim-label">
92894
- <span>
92895
- <span class="bold">${out('Bounce')}</span>:
92896
- </span>
92897
- </div>
92898
- <div class="flex-wrap">
92899
- <button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
92900
- </div>
93286
+ <div id="divAnimScrollSimple" class="is-tab-content active" data-group="animtype" style="padding:0">
93287
+
93288
+ <div class="anim-controls" style="overflow-y: auto;">
93289
+
93290
+ <div style="margin-top: 30px;margin-left: 22px;">
93291
+
93292
+ <table style="margin:12px 0 0 0;">
93293
+ <tr>
93294
+ <td></td>
93295
+ <td>${out('Start')}:</td>
93296
+ <td>${out('End')}:</td>
93297
+ <td></td>
93298
+ </tr>
93299
+ <tr>
93300
+ <td>${out('x')}</td>
93301
+ <td>
93302
+ <input class="inp-simplescroll-x-start" placeholder="-100" type="text" />
93303
+ </td>
93304
+ <td>
93305
+ <input class="inp-simplescroll-x-end" placeholder="100" type="text" />
93306
+ </td>
93307
+ <td style="font-size: 12px;">${out('px (default)')}</td>
93308
+ </tr>
93309
+ <tr>
93310
+ <td>${out('y')}</td>
93311
+ <td>
93312
+ <input class="inp-simplescroll-y-start" placeholder="100%" type="text" />
93313
+ </td>
93314
+ <td>
93315
+ <input class="inp-simplescroll-y-end" placeholder="-100%" type="text" />
93316
+ </td>
93317
+ <td style="font-size: 12px;">${out('px (default)')}</td>
93318
+ </tr>
93319
+ <tr>
93320
+ <td>${out('Scale')}</td>
93321
+ <td>
93322
+ <input class="inp-simplescroll-scale-start" placeholder="0.8" type="text" />
93323
+ </td>
93324
+ <td>
93325
+ <input class="inp-simplescroll-scale-end" placeholder="1.2" type="text" />
93326
+ </td>
93327
+ <td></td>
93328
+ </tr>
93329
+ </table>
93330
+
93331
+ <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>
93333
+ </div>
92901
93334
 
92902
- <div class="anim-label">
92903
- <span>
92904
- <span class="bold">${out('Animation Delay')}</span>:
92905
- </span>
92906
- </div>
92907
- <div class="flex-wrap">
92908
- <button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:60px">0s</button>
92909
- <button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:60px">0.1s</button>
92910
- <button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:60px">0.2s</button>
92911
- <button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:60px">0.3s</button>
92912
- <button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:60px">0.4s</button>
92913
- <button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:60px">0.5s</button>
92914
- <button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:60px">0.6s</button>
92915
- <button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:60px">0.7s</button>
92916
- <button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:60px">0.8s</button>
92917
- <button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:60px">0.9s</button>
92918
- <button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:60px">1s</button>
92919
- <button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:60px">1.1s</button>
92920
- <button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:60px">1.2s</button>
92921
- <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:60px">1.3s</button>
92922
- <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:60px">1.4s</button>
92923
- <button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
93335
+ <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
92924
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>
92925
93338
  </button>
92926
- </div>
92927
93339
 
92928
- <br>
92929
- <button title="${out('Animate Once')}" class="cmd-basic-once" style="width:165px;">
92930
- ${out('Animate Once')}
92931
- </button>
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>
92932
93344
 
92933
- <br>
92934
- <button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
92935
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92936
- <span style="margin-left:7px">${out('Clear Animation')}</span></button>
93345
+ </div>
92937
93346
  </div>
92938
-
92939
93347
  </div>
92940
93348
 
92941
- </div>
93349
+ <div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="display:flex;padding:0">
92942
93350
 
92943
- <div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="display:flex;padding-top:0">
93351
+ <div class="anim-controls" style="overflow-y: auto;">
92944
93352
 
92945
- <div class="anim-controls">
93353
+ <div style="padding:15px 0 0 22px;">
93354
+ <div class="anim-label">
93355
+ <span>
93356
+ <span class="bold">${out('Fade')}</span>:
93357
+ </span>
93358
+ </div>
93359
+ <div class="flex-wrap">
93360
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
93361
+ <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
93362
+ <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
93363
+ <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
93364
+ <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
93365
+ </div>
92946
93366
 
92947
- <div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
92948
- <a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
92949
- <a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
92950
- <a href="" data-content="divAnimSettings">${out('Settings')}</a>
92951
- </div>
93367
+ <div class="anim-label">
93368
+ <span>
93369
+ <span class="bold">${out('Slide')}</span>:
93370
+ </span>
93371
+ </div>
93372
+ <div class="flex-wrap">
93373
+ <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
93374
+ <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
93375
+ <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
93376
+ <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
93377
+ </div>
93378
+
93379
+ <div class="anim-label">
93380
+ <span>
93381
+ <span class="bold">${out('Flip')}</span>:
93382
+ </span>
93383
+ </div>
93384
+ <div class="flex-wrap">
93385
+ <button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Horizontal')}</button>
93386
+ <button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Vertical')}</button>
93387
+ </div>
93388
+
93389
+ <div class="anim-label">
93390
+ <span>
93391
+ <span class="bold">${out('Zoom')}</span>:
93392
+ </span>
93393
+ </div>
93394
+ <div class="flex-wrap">
93395
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
93396
+ <button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
93397
+ </div>
93398
+
93399
+ <div class="anim-label">
93400
+ <span>
93401
+ <span class="bold">${out('Pulse')}</span>:
93402
+ </span>
93403
+ </div>
93404
+ <div class="flex-wrap">
93405
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
93406
+ </div>
93407
+
93408
+ <div class="anim-label">
93409
+ <span>
93410
+ <span class="bold">${out('Bounce')}</span>:
93411
+ </span>
93412
+ </div>
93413
+ <div class="flex-wrap">
93414
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
93415
+ </div>
92952
93416
 
92953
- <div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
92954
-
92955
- <div class="anim-label">
92956
- <span>
92957
- <span class="bold">${out('Slide Left')}</span>:
92958
- <input class="inp-slide-left" type="text" />
92959
- </span>
92960
- <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
92961
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92962
- </button>
92963
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
92964
- </div>
92965
- <div class="flex-wrap">
92966
- <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
92967
- <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
92968
- <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
92969
- <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
92970
- <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
92971
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92972
- </div>
92973
- <div class="anim-label">
92974
- <span>
92975
- <span class="bold">${out('Slide Right')}</span>:
92976
- <input class="inp-slide-right" type="text" />
92977
- </span>
92978
- <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
92979
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92980
- </button>
92981
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
92982
- </div>
92983
- <div class="flex-wrap">
92984
- <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
92985
- <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
92986
- <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
92987
- <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
92988
- <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
92989
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92990
- </div>
93417
+ <div class="anim-label">
93418
+ <span>
93419
+ <span class="bold">${out('Animation Delay')}</span>:
93420
+ </span>
93421
+ </div>
93422
+ <div class="flex-wrap">
93423
+ <button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:55px">0s</button>
93424
+ <button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:55px">0.1s</button>
93425
+ <button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:55px">0.2s</button>
93426
+ <button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:55px">0.3s</button>
93427
+ <button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:55px">0.4s</button>
93428
+ <button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:55px">0.5s</button>
93429
+ <button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:55px">0.6s</button>
93430
+ <button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:55px">0.7s</button>
93431
+ <button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:55px">0.8s</button>
93432
+ <button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:55px">0.9s</button>
93433
+ <button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:55px">1s</button>
93434
+ <button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:55px">1.1s</button>
93435
+ <button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:55px">1.2s</button>
93436
+ <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:55px">1.3s</button>
93437
+ <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:55px">1.4s</button>
93438
+ <button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
93439
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93440
+ </button>
93441
+ </div>
92991
93442
 
92992
- <div class="anim-label">
92993
- <span>
92994
- <span class="bold">${out('Slide Up')}</span>:
92995
- <input class="inp-slide-up" type="text" />
92996
- </span>
92997
- <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
92998
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92999
- </button>
93000
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
93001
- </div>
93002
- <div class="flex-wrap">
93003
- <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
93004
- <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
93005
- <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
93006
- <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
93007
- <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
93008
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93009
- </div>
93010
- <div class="anim-label">
93011
- <span>
93012
- <span class="bold">${out('Slide Down')}</span>:
93013
- <input class="inp-slide-down" type="text" />
93014
- </span>
93015
- <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
93016
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93443
+ <button title="${out('Animate Once')}" class="cmd-basic-once" style="flex: none;margin-top:15px;width:165px;">
93444
+ ${out('Animate Once')}
93017
93445
  </button>
93018
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
93019
- </div>
93020
- <div class="flex-wrap">
93021
- <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
93022
- <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
93023
- <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
93024
- <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
93025
- <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
93026
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93027
- </div>
93028
93446
 
93029
- <div class="anim-label">
93030
- <span>
93031
- <span class="bold">${out('Scale')}</span>:
93032
- <input class="inp-scale" type="text" />
93033
- </span>
93034
- <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
93447
+ <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
93035
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>
93036
93450
  </button>
93037
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
93038
- </div>
93039
- <div class="flex-nowrap">
93040
- <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
93041
- <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
93042
- <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
93043
- <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
93044
- <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
93045
- <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
93046
- </div>
93047
93451
 
93048
- <div class="anim-label">
93049
- <span>
93050
- <span class="bold">${out('Rotate Clockwise')}</span>:
93051
- <input class="inp-rotate-clockwise" type="text" />
93052
- </span>
93053
- <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
93054
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93055
- </button>
93056
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
93057
- </div>
93058
- <div class="flex-wrap">
93059
- <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
93060
- <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93061
- <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93062
- <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93063
- <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93064
- </div>
93065
- <div class="anim-label">
93066
- <span>
93067
- <span class="bold">${out('Rotate Counterclockwise')}</span>:
93068
- <input class="inp-rotate-counter" type="text" />
93069
- </span>
93070
- <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93452
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93071
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>
93072
93455
  </button>
93073
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93074
- </div>
93075
- <div class="flex-wrap">
93076
- <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93077
- <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93078
- <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93079
- <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93080
- <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93081
- </div>
93082
-
93083
- <div class="anim-label">
93084
- <span class="bold">${out('Fade')}</span>:
93085
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
93086
93456
  </div>
93087
- <button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
93088
93457
 
93089
- <br>
93090
- <button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
93091
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93092
- <span style="margin-left:7px">${out('Clear Animation')}</span></button>
93093
93458
  </div>
93094
93459
 
93095
- <div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93460
+ </div>
93096
93461
 
93097
- <div class="anim-label">
93098
- <span>
93099
- <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
93100
- </span>
93101
- <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
93102
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93103
- </button>
93104
- </div>
93105
- <div class="flex-wrap">
93106
- <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
93107
- <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
93108
- <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
93109
- <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
93110
- <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
93111
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93112
- </div>
93113
- <div class="anim-label">
93114
- <span>
93115
- <span class="bold">${out('Slide Right')}</span>:
93116
- <input class="inp-slide-right" type="text" />
93117
- </span>
93118
- <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
93119
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93120
- </button>
93121
- </div>
93122
- <div class="flex-wrap">
93123
- <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
93124
- <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
93125
- <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
93126
- <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
93127
- <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
93128
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93129
- </div>
93462
+ <div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="padding:0">
93130
93463
 
93131
- <div class="anim-label">
93132
- <span>
93133
- <span class="bold">${out('Slide Up')}</span>:
93134
- <input class="inp-slide-up" type="text" />
93135
- </span>
93136
- <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
93137
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93138
- </button>
93139
- </div>
93140
- <div class="flex-wrap">
93141
- <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
93142
- <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
93143
- <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
93144
- <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
93145
- <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
93146
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93464
+ <div class="anim-controls">
93465
+
93466
+ <div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
93467
+ <a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
93468
+ <a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
93469
+ <a href="" data-content="divAnimSettings">${out('Settings')}</a>
93147
93470
  </div>
93148
- <div class="anim-label">
93149
- <span>
93150
- <span class="bold">${out('Slide Down')}</span>:
93151
- <input class="inp-slide-down" type="text" />
93152
- </span>
93153
- <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
93471
+
93472
+ <div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
93473
+
93474
+ <div class="anim-label">
93475
+ <span>
93476
+ <span class="bold">${out('Slide Left')}</span>:
93477
+ <input class="inp-slide-left" type="text" />
93478
+ </span>
93479
+ <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
93480
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93481
+ </button>
93482
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
93483
+ </div>
93484
+ <div class="flex-wrap">
93485
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
93486
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
93487
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
93488
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
93489
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
93490
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93491
+ </div>
93492
+ <div class="anim-label">
93493
+ <span>
93494
+ <span class="bold">${out('Slide Right')}</span>:
93495
+ <input class="inp-slide-right" type="text" />
93496
+ </span>
93497
+ <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
93498
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93499
+ </button>
93500
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
93501
+ </div>
93502
+ <div class="flex-wrap">
93503
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
93504
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
93505
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
93506
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
93507
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
93508
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93509
+ </div>
93510
+
93511
+ <div class="anim-label">
93512
+ <span>
93513
+ <span class="bold">${out('Slide Up')}</span>:
93514
+ <input class="inp-slide-up" type="text" />
93515
+ </span>
93516
+ <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
93517
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93518
+ </button>
93519
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
93520
+ </div>
93521
+ <div class="flex-wrap">
93522
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
93523
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
93524
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
93525
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
93526
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
93527
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93528
+ </div>
93529
+ <div class="anim-label">
93530
+ <span>
93531
+ <span class="bold">${out('Slide Down')}</span>:
93532
+ <input class="inp-slide-down" type="text" />
93533
+ </span>
93534
+ <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
93535
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93536
+ </button>
93537
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
93538
+ </div>
93539
+ <div class="flex-wrap">
93540
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
93541
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
93542
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
93543
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
93544
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
93545
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93546
+ </div>
93547
+
93548
+ <div class="anim-label">
93549
+ <span>
93550
+ <span class="bold">${out('Scale')}</span>:
93551
+ <input class="inp-scale" type="text" />
93552
+ </span>
93553
+ <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
93554
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93555
+ </button>
93556
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
93557
+ </div>
93558
+ <div class="flex-nowrap">
93559
+ <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
93560
+ <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
93561
+ <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
93562
+ <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
93563
+ <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
93564
+ <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
93565
+ </div>
93566
+
93567
+ <div class="anim-label">
93568
+ <span>
93569
+ <span class="bold">${out('Rotate Clockwise')}</span>:
93570
+ <input class="inp-rotate-clockwise" type="text" />
93571
+ </span>
93572
+ <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
93573
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93574
+ </button>
93575
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
93576
+ </div>
93577
+ <div class="flex-wrap">
93578
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
93579
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93580
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93581
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93582
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93583
+ </div>
93584
+ <div class="anim-label">
93585
+ <span>
93586
+ <span class="bold">${out('Rotate Counterclockwise')}</span>:
93587
+ <input class="inp-rotate-counter" type="text" />
93588
+ </span>
93589
+ <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93590
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93591
+ </button>
93592
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93593
+ </div>
93594
+ <div class="flex-wrap">
93595
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93596
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93597
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93598
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93599
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93600
+ </div>
93601
+
93602
+ <div class="anim-label">
93603
+ <span class="bold">${out('Fade')}</span>:
93604
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
93605
+ </div>
93606
+ <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade In')}</button>
93607
+
93608
+ <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93154
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>
93155
93611
  </button>
93156
- </div>
93157
- <div class="flex-wrap">
93158
- <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
93159
- <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
93160
- <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
93161
- <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
93162
- <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
93163
- <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93164
- </div>
93165
93612
 
93166
- <div class="anim-label">
93167
- <span>
93168
- <span class="bold">${out('Scale')}</span>:
93169
- <input class="inp-scale" type="text" />
93170
- </span>
93171
- <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
93613
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93172
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>
93173
93616
  </button>
93174
93617
  </div>
93175
- <div class="flex-nowrap">
93176
- <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
93177
- <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
93178
- <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
93179
- <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
93180
- <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
93181
- <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
93182
- </div>
93183
93618
 
93184
- <div class="anim-label">
93185
- <span>
93186
- <span class="bold">${out('Rotate Clockwise')}</span>:
93187
- <input class="inp-rotate-clockwise" type="text" />
93188
- </span>
93189
- <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
93619
+ <div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93620
+
93621
+ <div class="anim-label">
93622
+ <span>
93623
+ <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
93624
+ </span>
93625
+ <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
93626
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93627
+ </button>
93628
+ </div>
93629
+ <div class="flex-wrap">
93630
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
93631
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
93632
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
93633
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
93634
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
93635
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93636
+ </div>
93637
+ <div class="anim-label">
93638
+ <span>
93639
+ <span class="bold">${out('Slide Right')}</span>:
93640
+ <input class="inp-slide-right" type="text" />
93641
+ </span>
93642
+ <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
93643
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93644
+ </button>
93645
+ </div>
93646
+ <div class="flex-wrap">
93647
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
93648
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
93649
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
93650
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
93651
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
93652
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93653
+ </div>
93654
+
93655
+ <div class="anim-label">
93656
+ <span>
93657
+ <span class="bold">${out('Slide Up')}</span>:
93658
+ <input class="inp-slide-up" type="text" />
93659
+ </span>
93660
+ <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
93661
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93662
+ </button>
93663
+ </div>
93664
+ <div class="flex-wrap">
93665
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
93666
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
93667
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
93668
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
93669
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
93670
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93671
+ </div>
93672
+ <div class="anim-label">
93673
+ <span>
93674
+ <span class="bold">${out('Slide Down')}</span>:
93675
+ <input class="inp-slide-down" type="text" />
93676
+ </span>
93677
+ <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
93678
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93679
+ </button>
93680
+ </div>
93681
+ <div class="flex-wrap">
93682
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
93683
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
93684
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
93685
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
93686
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
93687
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93688
+ </div>
93689
+
93690
+ <div class="anim-label">
93691
+ <span>
93692
+ <span class="bold">${out('Scale')}</span>:
93693
+ <input class="inp-scale" type="text" />
93694
+ </span>
93695
+ <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
93696
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93697
+ </button>
93698
+ </div>
93699
+ <div class="flex-nowrap">
93700
+ <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
93701
+ <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
93702
+ <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
93703
+ <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
93704
+ <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
93705
+ <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
93706
+ </div>
93707
+
93708
+ <div class="anim-label">
93709
+ <span>
93710
+ <span class="bold">${out('Rotate Clockwise')}</span>:
93711
+ <input class="inp-rotate-clockwise" type="text" />
93712
+ </span>
93713
+ <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
93714
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93715
+ </button>
93716
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
93717
+ </div>
93718
+ <div class="flex-wrap">
93719
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93720
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93721
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93722
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93723
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93724
+ </div>
93725
+ <div class="anim-label">
93726
+ <span>
93727
+ <span class="bold">${out('Rotate Counterclockwise')}</span>:
93728
+ <input class="inp-rotate-counter" type="text" />
93729
+ </span>
93730
+ <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93731
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93732
+ </button>
93733
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93734
+ </div>
93735
+ <div class="flex-wrap">
93736
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
93737
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93738
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93739
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93740
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93741
+ </div>
93742
+
93743
+ <div class="anim-label">
93744
+ <span class="bold">${out('Fade')}</span>:
93745
+ </div>
93746
+ <button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade Out')}</button>
93747
+
93748
+ <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
93190
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>
93191
93751
  </button>
93192
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
93193
- </div>
93194
- <div class="flex-wrap">
93195
- <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93196
- <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93197
- <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93198
- <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93199
- <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93200
- </div>
93201
- <div class="anim-label">
93202
- <span>
93203
- <span class="bold">${out('Rotate Counterclockwise')}</span>:
93204
- <input class="inp-rotate-counter" type="text" />
93205
- </span>
93206
- <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93752
+
93753
+ <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
93207
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>
93208
93756
  </button>
93209
- <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93210
- </div>
93211
- <div class="flex-wrap">
93212
- <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
93213
- <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93214
- <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93215
- <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93216
- <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93217
- </div>
93218
93757
 
93219
- <div class="anim-label">
93220
- <span class="bold">${out('Fade')}</span>:
93221
93758
  </div>
93222
- <button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
93223
93759
 
93224
- <br>
93225
- <button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
93226
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93227
- <span style="margin-left:7px">${out('Clear Animation')}</span></button>
93228
- </div>
93760
+ <div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93761
+
93762
+ <div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
93763
+
93764
+ <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93765
+ <div class="flex-wrap">
93766
+ <button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:74px">${out('Normal')}</button>
93767
+ <button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:74px">${out('Delayed')}</button>
93768
+ <button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:74px">${out('Late')}</button>
93769
+ <button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
93770
+ </div>
93771
+
93772
+ <div class="anim-label">${out('End')}:</div>
93773
+ <div class="flex-wrap">
93774
+ <button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
93775
+ <button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:74px">${out('Soon')}</button>
93776
+ <button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:74px">${out('Normal')}</button>
93777
+ </div>
93229
93778
 
93230
- <div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93231
-
93232
- <div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
93233
-
93234
- <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93235
- <div class="flex-wrap">
93236
- <button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:80px">${out('Normal')}</button>
93237
- <button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:80px">${out('Delayed')}</button>
93238
- <button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:80px">${out('Late')}</button>
93239
- <button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
93240
- </div>
93241
-
93242
- <div class="anim-label">${out('End')}:</div>
93243
- <div class="flex-wrap">
93244
- <button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
93245
- <button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:80px">${out('Soon')}</button>
93246
- <button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:80px">${out('Normal')}</button>
93247
- </div>
93779
+ <div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
93248
93780
 
93249
- <div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
93781
+ <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93782
+ <div class="flex-wrap">
93783
+ <button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:74px">${out('Normal')}</button>
93784
+ <button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:74px">${out('Delayed')}</button>
93785
+ <button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:74px">${out('Late')}</button>
93786
+ <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
93787
+ </div>
93250
93788
 
93251
- <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93252
- <div class="flex-wrap">
93253
- <button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:80px">${out('Normal')}</button>
93254
- <button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:80px">${out('Delayed')}</button>
93255
- <button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:80px">${out('Late')}</button>
93256
- <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
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>
93791
+ </div>
93257
93792
  </div>
93793
+
93794
+
93258
93795
  </div>
93259
93796
 
93260
-
93261
93797
  </div>
93262
93798
 
93799
+ <div class="dummy-elm"></div>
93800
+
93263
93801
  </div>
93264
93802
 
93265
- <div class="dummy-elm"></div>
93803
+ <div class="div-wizard-settings" style="display:block">
93804
+ <!--<div class="anim-label" style="margin-bottom:15px">${out('Apply To')}: ${out('Section')}</div>-->
93805
+
93806
+ <div class="flex-wrap" style="margin-top: 10px;">
93807
+ <label class="label-checkbox" for="chkPresetAnimOnce" style="margin:0;margin-right:15px;">
93808
+ <input id="chkPresetAnimOnce" type="checkbox" />
93809
+ ${out('Animate Once')}
93810
+ </label>
93811
+
93812
+ <button title="${out('Clear')}" class="cmd-clear-anim-wizard" style="width:100px">
93813
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93814
+ <span style="margin-left:7px">${out('Clear')}</span>
93815
+ </button>
93816
+ </div>
93817
+
93818
+ <div class="anim-preset-list" style="height: calc(100vh - 97px);
93819
+ overflow: auto;
93820
+ width: 347px;">
93821
+ <div style="display:flex;
93822
+ flex-direction: column;
93823
+ align-items: flex-start;
93824
+ padding: 0 20px 20px 0;
93825
+ ">
93826
+ <div style="margin: 20px 0 5px;">${out('Fade In')}</div>
93827
+ <button title="${out('Fade In')}" class="cmd-preset-onview" data-value="is-fadeIn" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
93828
+ <img src="${this.builder.assetPath + 'images/fade-in.gif'}" />
93829
+ </button>
93830
+
93831
+ <div style="margin: 20px 0 5px;">${out('Fade In - Slow')}</div>
93832
+ <button title="${out('Fade In - Slow')}" class="cmd-preset-onview" data-value="is-fadeIn" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
93833
+ <img src="${this.builder.assetPath + 'images/fade-in-slow.gif'}" />
93834
+ </button>
93835
+
93836
+ <div style="margin: 20px 0 5px;">${out('Fade In Up')}</div>
93837
+ <button title="${out('Fade In Up')}" class="cmd-preset-onview" data-value="is-fadeInUp" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
93838
+ <img src="${this.builder.assetPath + 'images/fade-in-up.gif'}" />
93839
+ </button>
93840
+
93841
+ <div style="margin: 20px 0 5px;">${out('Fade In Up - Slow')}</div>
93842
+ <button title="${out('Fade In Up - Slow')}" class="cmd-preset-onview" data-value="is-fadeInUp" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
93843
+ <img src="${this.builder.assetPath + 'images/fade-in-up-slow.gif'}" />
93844
+ </button>
93845
+
93846
+ <div style="margin: 20px 0 5px;">${out('Slide Up')}</div>
93847
+ <button title="${out('Slide Up')}" class="cmd-preset-onview" data-value="is-slideInUp" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
93848
+ <img src="${this.builder.assetPath + 'images/slide-up.gif'}" />
93849
+ </button>
93850
+
93851
+ <div style="margin: 20px 0 5px;">${out('Slide Up - Slow')}</div>
93852
+ <button title="${out('Slide Up - Slow')}" class="cmd-preset-onview" data-value="is-slideInUp" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
93853
+ <img src="${this.builder.assetPath + 'images/slide-up-slow.gif'}" />
93854
+ </button>
93855
+
93856
+ <div style="margin: 20px 0 5px;">${out('Zoom In')}</div>
93857
+ <button title="${out('Zoom In')}" class="cmd-preset-onview" data-value="is-zoomIn" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
93858
+ <img src="${this.builder.assetPath + 'images/zoom-in.gif'}" />
93859
+ </button>
93860
+
93861
+ <div style="margin: 20px 0 5px;">${out('Zoom Out')}</div>
93862
+ <button title="${out('Zoom Out')}" class="cmd-preset-onview" data-value="is-zoomOut" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
93863
+ <img src="${this.builder.assetPath + 'images/zoom-out.gif'}" />
93864
+ </button>
93865
+ </div>
93866
+ </div>
93867
+
93868
+ </div>
93266
93869
 
93267
93870
  </div>
93268
93871
  `;
@@ -93276,7 +93879,9 @@ class AnimateScroll {
93276
93879
  const btnClose = modalAnimateScroll.querySelector('.is-side-close');
93277
93880
  btnClose.addEventListener('click', () => {
93278
93881
  this.close();
93279
- }); // Target
93882
+ });
93883
+ this.divAnimScrollSimple = modalAnimateScroll.querySelector('#divAnimScrollSimple');
93884
+ this.divAnimSettings = modalAnimateScroll.querySelector('#divAnimSettings'); // Target
93280
93885
 
93281
93886
  let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
93282
93887
  btns.forEach(btn => {
@@ -93288,6 +93893,237 @@ class AnimateScroll {
93288
93893
  btn.classList.add('on');
93289
93894
  this.read();
93290
93895
  });
93896
+ });
93897
+ const divAnimSettings = modalAnimateScroll.querySelector('.div-anim-settings');
93898
+ const divWizardSettings = modalAnimateScroll.querySelector('.div-wizard-settings');
93899
+ const btnAnimWizard = modalAnimateScroll.querySelector('.cmd-anim-edit');
93900
+ btnAnimWizard.addEventListener('click', () => {
93901
+ if (btnAnimWizard.classList.contains('on')) {
93902
+ btnAnimWizard.classList.remove('on');
93903
+ divAnimSettings.style.display = 'none';
93904
+ divWizardSettings.style.display = 'block';
93905
+ } else {
93906
+ btnAnimWizard.classList.add('on');
93907
+ divWizardSettings.style.display = 'none';
93908
+ divAnimSettings.style.display = 'block';
93909
+ }
93910
+ });
93911
+ const btnClearAnimAll = modalAnimateScroll.querySelectorAll('.cmd-clear-anim-all');
93912
+ btnClearAnimAll.forEach(btn => {
93913
+ btn.addEventListener('click', () => {
93914
+ this.builder.editor.saveForUndo();
93915
+ let section = this.builder.activeSection;
93916
+ let activeCol = this.builder.editor.activeCol;
93917
+ if (activeCol) section = activeCol.closest('.is-section');
93918
+ let elms;
93919
+ elms = section.querySelectorAll('*');
93920
+ elms.forEach(elm => {
93921
+ elm.removeAttribute('data-center');
93922
+ elm.removeAttribute('data-center-top');
93923
+ elm.removeAttribute('data--50-bottom');
93924
+ elm.removeAttribute('data--100-bottom');
93925
+ elm.removeAttribute('data--150-bottom');
93926
+ elm.removeAttribute('data--200-bottom');
93927
+ elm.removeAttribute('data--300-bottom');
93928
+ elm.removeAttribute('data--400-bottom');
93929
+ elm.removeAttribute('data-bottom-top');
93930
+ elm.removeAttribute('data-400-bottom');
93931
+ elm.removeAttribute('data-300-bottom');
93932
+ elm.removeAttribute('data-200-bottom');
93933
+ elm.removeAttribute('data-150-bottom');
93934
+ elm.removeAttribute('data-100-bottom');
93935
+ elm.removeAttribute('data-50-bottom');
93936
+ elm.removeAttribute('data-bottom');
93937
+ elm.removeAttribute('data-center-bottom');
93938
+ elm.removeAttribute('data-100-top');
93939
+ elm.removeAttribute('data-50-top');
93940
+ elm.removeAttribute('data-top');
93941
+ elm.removeAttribute('data-top-bottom');
93942
+ elm.style.transform = '';
93943
+ elm.style.transition = '';
93944
+ elm.style.opacity = ''; // console.log(elm)
93945
+ });
93946
+ elms = section.querySelectorAll('.is-animated');
93947
+ elms.forEach(elm => {
93948
+ if (elm.classList.contains('is-overlay-bg')) return;
93949
+ elm.classList.remove('is-animated');
93950
+ elm.classList.remove('once');
93951
+ elm.classList.remove('is-fadeIn');
93952
+ elm.classList.remove('is-fadeInUp');
93953
+ elm.classList.remove('is-fadeInDown');
93954
+ elm.classList.remove('is-fadeInLeft');
93955
+ elm.classList.remove('is-fadeInRight');
93956
+ elm.classList.remove('is-zoomIn');
93957
+ elm.classList.remove('is-zoomOut');
93958
+ elm.classList.remove('is-slideInUp');
93959
+ elm.classList.remove('is-slideInDown');
93960
+ elm.classList.remove('is-slideInLeft');
93961
+ elm.classList.remove('is-slideInRight');
93962
+ elm.classList.remove('is-flipInX');
93963
+ elm.classList.remove('is-flipInY');
93964
+ elm.classList.remove('is-pulse');
93965
+ elm.classList.remove('is-bounceIn');
93966
+ }); // clear
93967
+
93968
+ this.clearSettings(); // set default
93969
+
93970
+ if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
93971
+ // default
93972
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
93973
+ if (btn) btn.classList.add('on');
93974
+ }
93975
+
93976
+ if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
93977
+ // default
93978
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
93979
+ if (btn) btn.classList.add('on');
93980
+ }
93981
+
93982
+ if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
93983
+ // default
93984
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
93985
+ if (btn) btn.classList.add('on');
93986
+ }
93987
+
93988
+ if (this.builder.win.skrollrr) {
93989
+ setTimeout(() => {
93990
+ this.builder.win.skrollrr.refresh();
93991
+ }, 30);
93992
+ } // Refresh
93993
+
93994
+
93995
+ this.builder.settings.onRender(); //Trigger Change event
93996
+
93997
+ this.builder.settings.onChange();
93998
+ });
93999
+ });
94000
+ const btnClearAnimWizard = modalAnimateScroll.querySelector('.cmd-clear-anim-wizard');
94001
+ btnClearAnimWizard.addEventListener('click', () => {
94002
+ this.builder.editor.saveForUndo();
94003
+ const section = this.builder.activeSection;
94004
+ let elms;
94005
+ elms = section.querySelectorAll('.is-animated');
94006
+ elms.forEach(elm => {
94007
+ if (elm.classList.contains('is-overlay-bg')) return;
94008
+ elm.classList.remove('is-animated');
94009
+ elm.classList.remove('once');
94010
+ elm.classList.remove('is-fadeIn');
94011
+ elm.classList.remove('is-fadeInUp');
94012
+ elm.classList.remove('is-fadeInDown');
94013
+ elm.classList.remove('is-fadeInLeft');
94014
+ elm.classList.remove('is-fadeInRight');
94015
+ elm.classList.remove('is-zoomIn');
94016
+ elm.classList.remove('is-zoomOut');
94017
+ elm.classList.remove('is-slideInUp');
94018
+ elm.classList.remove('is-slideInDown');
94019
+ elm.classList.remove('is-slideInLeft');
94020
+ elm.classList.remove('is-slideInRight');
94021
+ elm.classList.remove('is-flipInX');
94022
+ elm.classList.remove('is-flipInY');
94023
+ elm.classList.remove('is-pulse');
94024
+ elm.classList.remove('is-bounceIn');
94025
+ }); // Refresh
94026
+
94027
+ this.builder.settings.onRender(); //Trigger Change event
94028
+
94029
+ this.builder.settings.onChange();
94030
+ });
94031
+
94032
+ const applyPresetBasic = process => {
94033
+ this.builder.editor.saveForUndo();
94034
+ const section = this.builder.activeSection;
94035
+ let start = 0;
94036
+ let boxes = section.querySelectorAll('.is-box');
94037
+ if (boxes.length === 0) boxes = section.querySelectorAll('.is-box-centered');
94038
+ boxes.forEach(box => {
94039
+ let index = start;
94040
+ const rows = box.querySelectorAll('.is-container > div');
94041
+ rows.forEach(row => {
94042
+ const cols = this.builder.editor.dom.elementChildren(row);
94043
+ cols.forEach(col => {
94044
+ if (col.innerText.trim() === '' && !col.querySelector('img') && !col.querySelector('iframe') && !col.querySelector('video') && !col.querySelector('audio') && !col.querySelector('i')) return;
94045
+ col.style.transition = 'none';
94046
+ this.cleanupBasic(col);
94047
+ this.cleanupDelay(col);
94048
+ col.classList.add('is-animated');
94049
+
94050
+ if (chkPresetAnimOnce.checked) {
94051
+ col.classList.add('once');
94052
+ } else {
94053
+ col.classList.remove('once');
94054
+ } // col.classList.add('is-fadeInUp');
94055
+
94056
+
94057
+ process(col, index);
94058
+ col.classList.remove('is-inview');
94059
+ index++;
94060
+ }); // row.setAttribute('data-bottom-top', 'transform: translateY(125px)');
94061
+ // row.setAttribute('data-center', 'transform: translateY(0px)');
94062
+ });
94063
+ start++;
94064
+ }); // Refresh
94065
+
94066
+ this.builder.settings.onRender(); // Play
94067
+
94068
+ setTimeout(() => {
94069
+ let elms = section.querySelectorAll('.is-animated');
94070
+ elms.forEach(elm => {
94071
+ elm.style.transition = 'none';
94072
+ elm.classList.remove('is-inview');
94073
+ });
94074
+ setTimeout(() => {
94075
+ elms = section.querySelectorAll('.is-animated');
94076
+ elms.forEach(elm => {
94077
+ elm.style.transition = '';
94078
+ elm.classList.add('is-inview');
94079
+ });
94080
+ }, 30);
94081
+ }, 100); //Trigger Change event
94082
+
94083
+ this.builder.settings.onChange();
94084
+ };
94085
+
94086
+ const btnPresetOnviews = modalAnimateScroll.querySelectorAll('.cmd-preset-onview');
94087
+ btnPresetOnviews.forEach(btn => {
94088
+ btn.addEventListener('click', () => {
94089
+ applyPresetBasic((col, index) => {
94090
+ col.classList.add(btn.getAttribute('data-value'));
94091
+ let delay = btn.getAttribute('data-delay');
94092
+ if (index !== 0) col.classList.add(`delay-${index * delay}ms`);
94093
+ });
94094
+ });
94095
+ });
94096
+ const chkPresetAnimOnce = modalAnimateScroll.querySelector('#chkPresetAnimOnce');
94097
+ chkPresetAnimOnce.addEventListener('click', () => {
94098
+ this.builder.editor.saveForUndo();
94099
+ const section = this.builder.activeSection;
94100
+ let elms = section.querySelectorAll('.is-animated');
94101
+ elms.forEach(elm => {
94102
+ if (chkPresetAnimOnce.checked) {
94103
+ elm.classList.add('once');
94104
+ } else {
94105
+ elm.classList.remove('once');
94106
+ }
94107
+ }); // Refresh
94108
+
94109
+ this.builder.settings.onRender(); // Play
94110
+
94111
+ setTimeout(() => {
94112
+ elms = section.querySelectorAll('.is-animated');
94113
+ elms.forEach(elm => {
94114
+ elm.style.transition = 'none';
94115
+ elm.classList.remove('is-inview');
94116
+ });
94117
+ setTimeout(() => {
94118
+ elms = section.querySelectorAll('.is-animated');
94119
+ elms.forEach(elm => {
94120
+ elm.style.transition = '';
94121
+ elm.classList.add('is-inview');
94122
+ });
94123
+ }, 30);
94124
+ }, 100); //Trigger Change event
94125
+
94126
+ this.builder.settings.onChange();
93291
94127
  }); // Default
93292
94128
 
93293
94129
  const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
@@ -94041,11 +94877,78 @@ class AnimateScroll {
94041
94877
 
94042
94878
  this.builder.settings.onChange();
94043
94879
  }); // ---
94044
- //Extend onContentClick
94880
+ // SIMPLE ON SCROLL
94045
94881
 
94046
- let old = this.builder.settings.onContentClick;
94882
+ const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
94883
+ inpSimpleScrollX_Start.addEventListener('change', () => {
94884
+ this.applySimpleScroll();
94885
+ });
94886
+ const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
94887
+ inpSimpleScrollX_End.addEventListener('change', () => {
94888
+ this.applySimpleScroll();
94889
+ });
94890
+ const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
94891
+ inpSimpleScrollY_Start.addEventListener('change', () => {
94892
+ this.applySimpleScroll();
94893
+ });
94894
+ const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
94895
+ inpSimpleScrollY_End.addEventListener('change', () => {
94896
+ this.applySimpleScroll();
94897
+ });
94898
+ const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
94899
+ inpSimpleScrollScale_Start.addEventListener('change', () => {
94900
+ this.applySimpleScroll();
94901
+ });
94902
+ const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
94903
+ inpSimpleScrollScale_End.addEventListener('change', () => {
94904
+ this.applySimpleScroll();
94905
+ });
94906
+ const btnClearSimpleScroll = modalAnimateScroll.querySelector('.cmd-clear-simplescroll');
94907
+ btnClearSimpleScroll.addEventListener('click', () => {
94908
+ let activeElement;
94909
+ let target = this.getTarget();
94910
+ activeElement = target.element;
94911
+ if (!activeElement) return;
94912
+ this.builder.editor.saveForUndo();
94913
+ this.cleanup(activeElement);
94914
+ this.cleanup_leave(activeElement);
94915
+ activeElement.style.transform = '';
94916
+ activeElement.style.transition = '';
94917
+ activeElement.style.opacity = '';
94918
+ this.read();
94919
+
94920
+ if (this.builder.win.skrollrr) {
94921
+ this.builder.win.skrollrr.refresh();
94922
+ } //Trigger Change event
94923
+
94924
+
94925
+ this.builder.settings.onChange();
94926
+ });
94927
+ const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
94928
+ btnDisableSmoothAnim.addEventListener('click', () => {
94929
+ if (btnDisableSmoothAnim.classList.contains('on')) {
94930
+ btnDisableSmoothAnim.classList.remove('on');
94931
+ } else {
94932
+ btnDisableSmoothAnim.classList.add('on');
94933
+ }
94934
+
94935
+ this.apply();
94936
+ });
94937
+ const btnDisableSmoothAnim2 = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
94938
+ btnDisableSmoothAnim2.addEventListener('click', () => {
94939
+ if (btnDisableSmoothAnim2.classList.contains('on')) {
94940
+ btnDisableSmoothAnim2.classList.remove('on');
94941
+ } else {
94942
+ btnDisableSmoothAnim2.classList.add('on');
94943
+ }
94944
+
94945
+ this.applySimpleScroll();
94946
+ }); // ---
94947
+ //Extend onPageContentClick
94948
+
94949
+ let old = this.builder.settings.onPageContentClick;
94047
94950
 
94048
- this.builder.settings.onContentClick = () => {
94951
+ this.builder.settings.onPageContentClick = () => {
94049
94952
  if (old) old.call(this); // call user's defined onRender
94050
94953
 
94051
94954
  if (!this.modalAnimateScroll.classList.contains('active')) return;
@@ -94076,6 +94979,18 @@ class AnimateScroll {
94076
94979
  } else if (currentTarget.name === 'container') {
94077
94980
  const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=container]');
94078
94981
  btn.classList.add('on');
94982
+ } else if (currentTarget.name === 'bg') {
94983
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=bg]');
94984
+ btn.classList.add('on');
94985
+ } else if (currentTarget.name === 'overlay') {
94986
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=overlay]');
94987
+ btn.classList.add('on');
94988
+ } else if (currentTarget.name === 'box') {
94989
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=box]');
94990
+ btn.classList.add('on');
94991
+ } else if (currentTarget.name === 'section') {
94992
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=section]');
94993
+ btn.classList.add('on');
94079
94994
  }
94080
94995
  } else {
94081
94996
  // no animation on the selected element
@@ -94084,6 +94999,7 @@ class AnimateScroll {
94084
94999
  }
94085
95000
 
94086
95001
  this.read();
95002
+ this.readAnimOnce();
94087
95003
  }
94088
95004
 
94089
95005
  clearSettings() {
@@ -94175,6 +95091,18 @@ class AnimateScroll {
94175
95091
  const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
94176
95092
  inpRotateCounter_leave.value = '';
94177
95093
  inpRotateClockwise_leave.value = '';
95094
+ const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
95095
+ const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95096
+ const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
95097
+ const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95098
+ const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
95099
+ const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
95100
+ inpSimpleScrollX_Start.value = '';
95101
+ inpSimpleScrollX_End.value = '';
95102
+ inpSimpleScrollY_Start.value = '';
95103
+ inpSimpleScrollY_End.value = '';
95104
+ inpSimpleScrollScale_Start.value = '';
95105
+ inpSimpleScrollScale_End.value = '';
94178
95106
  }
94179
95107
 
94180
95108
  read() {
@@ -94220,7 +95148,83 @@ class AnimateScroll {
94220
95148
  if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
94221
95149
  if (btnDelay) btnDelay.classList.add('on');
94222
95150
  const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
94223
- if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // enter start
95151
+ if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on');
95152
+ const btnDisableSmoothAnim = this.modalAnimateScroll.querySelectorAll('.cmd-disable-smoothanim');
95153
+ btnDisableSmoothAnim.forEach(btn => {
95154
+ if (activeElement.hasAttribute('data-smooth-scrolling')) {
95155
+ btn.classList.add('on');
95156
+ } else {
95157
+ btn.classList.remove('on');
95158
+ }
95159
+ }); // Simple Scroll
95160
+
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');
95174
+ let css1 = activeElement.getAttribute('data-bottom-top');
95175
+ dummyElm.style.cssText = css1;
95176
+ let transform = this.getTransform(dummyElm, css1);
95177
+
95178
+ if (transform.translateX) {
95179
+ inpSimpleScrollX_Start.value = transform.translateX.replace('px', '');
95180
+ }
95181
+
95182
+ if (transform.translateY) {
95183
+ inpSimpleScrollY_Start.value = transform.translateY.replace('px', '');
95184
+ }
95185
+
95186
+ if (transform.scale) {
95187
+ inpSimpleScrollScale_Start.value = transform.scale;
95188
+ }
95189
+
95190
+ let css2 = activeElement.getAttribute('data-top-bottom');
95191
+ dummyElm.style.cssText = css2;
95192
+ transform = this.getTransform(dummyElm, css2);
95193
+
95194
+ if (transform.translateX) {
95195
+ inpSimpleScrollX_End.value = transform.translateX.replace('px', '');
95196
+ }
95197
+
95198
+ if (transform.translateY) {
95199
+ inpSimpleScrollY_End.value = transform.translateY.replace('px', '');
95200
+ }
95201
+
95202
+ if (transform.scale) {
95203
+ inpSimpleScrollScale_End.value = transform.scale;
95204
+ }
95205
+
95206
+ if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
95207
+ // default
95208
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
95209
+ if (btn) btn.classList.add('on');
95210
+ }
95211
+
95212
+ if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
95213
+ // default
95214
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
95215
+ if (btn) btn.classList.add('on');
95216
+ }
95217
+
95218
+ if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
95219
+ // default
95220
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
95221
+ if (btn) btn.classList.add('on');
95222
+ }
95223
+
95224
+ return true;
95225
+ } // Scroll
95226
+ // enter start
95227
+
94224
95228
 
94225
95229
  let css1 = activeElement.getAttribute('data-bottom-top');
94226
95230
  if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
@@ -94529,6 +95533,7 @@ class AnimateScroll {
94529
95533
  if (btnAnimateOnce.classList.contains('on')) once = true;
94530
95534
  this.builder.editor.saveForUndo();
94531
95535
  this.cleanupBasic(activeElement);
95536
+ activeElement.style.transition = 'none';
94532
95537
 
94533
95538
  if (val) {
94534
95539
  activeElement.classList.remove('is-inview');
@@ -94536,9 +95541,9 @@ class AnimateScroll {
94536
95541
  setTimeout(() => {
94537
95542
  activeElement.classList.add(val);
94538
95543
  if (once) activeElement.classList.add('once');
94539
- activeElement.classList.add('is-animated'); // activeElement.classList.add('is-inview');
94540
-
95544
+ activeElement.classList.add('is-animated');
94541
95545
  setTimeout(() => {
95546
+ activeElement.style.transition = '';
94542
95547
  activeElement.classList.add('is-inview');
94543
95548
  }, 10);
94544
95549
  }, 10);
@@ -94548,6 +95553,65 @@ class AnimateScroll {
94548
95553
  this.builder.settings.onChange();
94549
95554
  }
94550
95555
 
95556
+ applySimpleScroll() {
95557
+ let activeElement;
95558
+ let target = this.getTarget();
95559
+ activeElement = target.element;
95560
+ if (!activeElement) return;
95561
+ const modalAnimateScroll = this.modalAnimateScroll;
95562
+ const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
95563
+ const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
95564
+ const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
95565
+ const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
95566
+ const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
95567
+ const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
95568
+ let valXStart;
95569
+ if (inpSimpleScrollX_Start.value !== '') valXStart = inpSimpleScrollX_Start.value + (inpSimpleScrollX_Start.value.indexOf('%') !== -1 ? '' : 'px');
95570
+ let valXEnd;
95571
+ if (inpSimpleScrollX_End.value !== '') valXEnd = inpSimpleScrollX_End.value + (inpSimpleScrollX_End.value.indexOf('%') !== -1 ? '' : 'px');
95572
+ let valYStart;
95573
+ if (inpSimpleScrollY_Start.value !== '') valYStart = inpSimpleScrollY_Start.value + (inpSimpleScrollY_Start.value.indexOf('%') !== -1 ? '' : 'px');
95574
+ let valYEnd;
95575
+ if (inpSimpleScrollY_End.value !== '') valYEnd = inpSimpleScrollY_End.value + (inpSimpleScrollY_End.value.indexOf('%') !== -1 ? '' : 'px');
95576
+ let scaleStart;
95577
+ if (inpSimpleScrollScale_Start.value !== '') scaleStart = inpSimpleScrollScale_Start.value;
95578
+ let scaleEnd;
95579
+ if (inpSimpleScrollScale_End.value !== '') scaleEnd = inpSimpleScrollScale_End.value;
95580
+ let animStart = (valXStart ? ` translateX(${valXStart})` : '') + (valYStart ? ` translateY(${valYStart})` : '') + (scaleStart ? ` scale(${scaleStart})` : '');
95581
+ animStart = animStart.trim();
95582
+ let animEnd = (valXEnd ? ` translateX(${valXEnd})` : '') + (valYEnd ? ` translateY(${valYEnd})` : '') + (scaleEnd ? ` scale(${scaleEnd})` : '');
95583
+ animEnd = animEnd.trim();
95584
+ let sStart = animStart ? 'transform: ' + animStart + ';' : '';
95585
+ let sEnd = animEnd ? 'transform: ' + animEnd + ';' : '';
95586
+ sStart = sStart.trim();
95587
+ sEnd = sEnd.trim();
95588
+ this.builder.editor.saveForUndo();
95589
+ this.cleanup(activeElement);
95590
+ let dataStart = 'data-bottom-top';
95591
+ let dataEnd = 'data-top-bottom';
95592
+ if (sStart !== '') activeElement.setAttribute(dataStart, sStart);else activeElement.removeAttribute(dataStart);
95593
+ if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);else activeElement.removeAttribute(dataEnd);
95594
+ const btnDisableSmoothAnim = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
95595
+
95596
+ if (btnDisableSmoothAnim.classList.contains('on')) {
95597
+ activeElement.setAttribute('data-smooth-scrolling', 'off');
95598
+ activeElement.style.transition = '';
95599
+ } else {
95600
+ activeElement.removeAttribute('data-smooth-scrolling');
95601
+ }
95602
+
95603
+ activeElement.style.transform = '';
95604
+ activeElement.style.transition = '';
95605
+ activeElement.style.opacity = '';
95606
+
95607
+ if (this.builder.win.skrollrr) {
95608
+ this.builder.win.skrollrr.refresh();
95609
+ } //Trigger Change event
95610
+
95611
+
95612
+ this.builder.settings.onChange();
95613
+ }
95614
+
94551
95615
  apply() {
94552
95616
  let activeElement;
94553
95617
  let target = this.getTarget();
@@ -94623,7 +95687,10 @@ class AnimateScroll {
94623
95687
  if (elm.classList.contains('on')) {
94624
95688
  dataEnd = elm.getAttribute('data-value');
94625
95689
  }
94626
- });
95690
+ }); // Protection:
95691
+
95692
+ if (!dataStart) dataStart = 'data-bottom-top';
95693
+ if (!dataEnd) dataEnd = 'data-center';
94627
95694
  sStart = sStart.trim();
94628
95695
  sEnd = sEnd.trim();
94629
95696
  if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
@@ -94692,7 +95759,9 @@ class AnimateScroll {
94692
95759
  if (elm.classList.contains('on')) {
94693
95760
  dataLeaveStart = elm.getAttribute('data-value');
94694
95761
  }
94695
- });
95762
+ }); // Protection:
95763
+
95764
+ if (!dataLeaveStart) dataLeaveStart = 'data-center-bottom';
94696
95765
  dataLeaveEnd = 'data-top-bottom';
94697
95766
  sLeaveStart = sLeaveStart.trim();
94698
95767
  sLeaveEnd = sLeaveEnd.trim();
@@ -94709,6 +95778,15 @@ class AnimateScroll {
94709
95778
  activeElement.style.opacity = '';
94710
95779
  }
94711
95780
 
95781
+ const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
95782
+
95783
+ if (btnDisableSmoothAnim.classList.contains('on')) {
95784
+ activeElement.setAttribute('data-smooth-scrolling', 'off');
95785
+ activeElement.style.transition = '';
95786
+ } else {
95787
+ activeElement.removeAttribute('data-smooth-scrolling');
95788
+ }
95789
+
94712
95790
  if (this.builder.win.skrollrr) {
94713
95791
  this.builder.win.skrollrr.refresh();
94714
95792
  } //Trigger Change event
@@ -94717,6 +95795,17 @@ class AnimateScroll {
94717
95795
  this.builder.settings.onChange();
94718
95796
  }
94719
95797
 
95798
+ readAnimOnce() {
95799
+ let activeSection = this.builder.activeSection;
95800
+ if (!activeSection) return;
95801
+
95802
+ if (activeSection.querySelector('.is-animated.once')) {
95803
+ this.modalAnimateScroll.querySelector('#chkPresetAnimOnce').checked = true;
95804
+ } else {
95805
+ this.modalAnimateScroll.querySelector('#chkPresetAnimOnce').checked = false;
95806
+ }
95807
+ }
95808
+
94720
95809
  getTarget() {
94721
95810
  let target;
94722
95811
  let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
@@ -94732,7 +95821,7 @@ class AnimateScroll {
94732
95821
 
94733
95822
  if (reCheck) {
94734
95823
  if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
94735
- if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;
95824
+ if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;else activeElement = this.builder.editor.activeElement;
94736
95825
  } else {
94737
95826
  activeElement = this.builder.editor.activeElement;
94738
95827
  }
@@ -94752,6 +95841,30 @@ class AnimateScroll {
94752
95841
  if (activeCol) activeElement = activeCol.parentNode.parentNode;
94753
95842
  }
94754
95843
 
95844
+ if (target === 'overlay') {
95845
+ let overlay;
95846
+ const box = this.builder.doc.querySelector('.box-select');
95847
+ if (box) overlay = box.querySelector('.is-overlay');
95848
+ if (overlay) activeElement = overlay;
95849
+ }
95850
+
95851
+ if (target === 'bg') {
95852
+ let overlayBg;
95853
+ const box = this.builder.doc.querySelector('.box-select');
95854
+ if (box) overlayBg = box.querySelector('.is-overlay-bg');
95855
+ if (overlayBg) activeElement = overlayBg;
95856
+ }
95857
+
95858
+ if (target === 'box') {
95859
+ const box = this.builder.doc.querySelector('.box-select');
95860
+ if (box) activeElement = box;
95861
+ }
95862
+
95863
+ if (target === 'section') {
95864
+ const section = this.builder.doc.querySelector('.section-select');
95865
+ if (section) activeElement = section;
95866
+ }
95867
+
94755
95868
  return {
94756
95869
  'element': activeElement ? activeElement : false,
94757
95870
  'name': target ? target : false
@@ -94761,21 +95874,29 @@ class AnimateScroll {
94761
95874
  readTarget(s) {
94762
95875
  if (!s) {
94763
95876
  // element (inspectedElement first)
94764
- let activeElement = this.builder.editor.inspectedElement;
94765
- if (!activeElement) return false; // enter start
95877
+ let activeElement = this.builder.editor.inspectedElement; // if(!activeElement) return false;
94766
95878
 
94767
- let css1 = activeElement.getAttribute('data-bottom-top');
95879
+ if (!activeElement) {
95880
+ return this.readTarget('bg');
95881
+ }
95882
+
95883
+ let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
95884
+ // enter start
95885
+
95886
+ css1 = activeElement.getAttribute('data-bottom-top');
94768
95887
  if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
94769
95888
  if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
94770
95889
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
94771
95890
 
94772
- let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
95891
+ css2 = activeElement.getAttribute('data-top-bottom'); // }
94773
95892
 
94774
- let hasBasicAnim = false;
95893
+ let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95894
+ // basic anim
94775
95895
 
94776
95896
  if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
94777
95897
  hasBasicAnim = true;
94778
- }
95898
+ } // }
95899
+
94779
95900
 
94780
95901
  if (css1 || css2 || hasBasicAnim) {
94781
95902
  return {
@@ -94797,27 +95918,65 @@ class AnimateScroll {
94797
95918
  }
94798
95919
 
94799
95920
  if (s === 'row') {
94800
- activeElement = this.builder.editor.activeCol.parentNode;
95921
+ if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode;
94801
95922
  }
94802
95923
 
94803
95924
  if (s === 'container') {
94804
- activeElement = this.builder.editor.activeCol.parentNode.parentNode;
95925
+ if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode.parentNode;
94805
95926
  }
94806
95927
 
94807
- if (!activeElement) return false; // enter start
95928
+ if (s === 'bg') {
95929
+ let overlayBg;
95930
+ const box = this.builder.doc.querySelector('.box-select');
95931
+ if (box) overlayBg = box.querySelector('.is-overlay-bg');
95932
+ if (overlayBg) activeElement = overlayBg;
95933
+ }
94808
95934
 
94809
- let css1 = activeElement.getAttribute('data-bottom-top');
95935
+ if (s === 'overlay') {
95936
+ let overlay;
95937
+ const box = this.builder.doc.querySelector('.box-select');
95938
+ if (box) overlay = box.querySelector('.is-overlay');
95939
+ if (overlay) activeElement = overlay;
95940
+ }
95941
+
95942
+ if (s === 'box') {
95943
+ const box = this.builder.doc.querySelector('.box-select');
95944
+ if (box) activeElement = box;
95945
+ }
95946
+
95947
+ if (s === 'section') {
95948
+ const section = this.builder.doc.querySelector('.section-select');
95949
+ if (section) activeElement = section;
95950
+ }
95951
+
95952
+ if (!activeElement) {
95953
+ if (s === 'element') return this.readTarget('column');
95954
+ if (s === 'column') return this.readTarget('row');
95955
+ if (s === 'row') return this.readTarget('container');
95956
+ if (s === 'container') return this.readTarget('bg');
95957
+ if (s === 'bg') return this.readTarget('overlay');
95958
+ if (s === 'overlay') return this.readTarget('box');
95959
+ if (s === 'box') return this.readTarget('section');
95960
+ if (s === 'section') return false;
95961
+ }
95962
+
95963
+ let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
95964
+ // enter start
95965
+
95966
+ css1 = activeElement.getAttribute('data-bottom-top');
94810
95967
  if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
94811
95968
  if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
94812
95969
  if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
94813
95970
 
94814
- let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
95971
+ css2 = activeElement.getAttribute('data-top-bottom'); // }
94815
95972
 
94816
- let hasBasicAnim = false;
95973
+ let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
95974
+ // basic anim
94817
95975
 
94818
95976
  if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
94819
95977
  hasBasicAnim = true;
94820
- }
95978
+ } // }
95979
+
94821
95980
 
94822
95981
  if (css1 || css2 || hasBasicAnim) {
94823
95982
  return {
@@ -94828,7 +95987,11 @@ class AnimateScroll {
94828
95987
  if (s === 'element') return this.readTarget('column');
94829
95988
  if (s === 'column') return this.readTarget('row');
94830
95989
  if (s === 'row') return this.readTarget('container');
94831
- if (s === 'container') return false;
95990
+ if (s === 'container') return this.readTarget('bg');
95991
+ if (s === 'bg') return this.readTarget('overlay');
95992
+ if (s === 'overlay') return this.readTarget('box');
95993
+ if (s === 'box') return this.readTarget('section');
95994
+ if (s === 'section') return false;
94832
95995
  }
94833
95996
  }
94834
95997
  }
@@ -94889,6 +96052,11 @@ class AnimateScroll {
94889
96052
  }
94890
96053
 
94891
96054
  edit() {
96055
+ 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
96058
+
96059
+ this.builder.sidebar.closeSidebar();
94892
96060
  this.modalAnimateScroll.classList.add('active');
94893
96061
  this.clickContent();
94894
96062
  }
@@ -94906,7 +96074,6 @@ class ContentBox {
94906
96074
  const defaults = {
94907
96075
  wrapper: '.is-wrapper',
94908
96076
  previewURL: 'preview.html',
94909
- sectionHoverOutline: false,
94910
96077
  useSidebar: true,
94911
96078
  disableLoadingStatus: false,
94912
96079
  sidebarData: {
@@ -95115,7 +96282,7 @@ class ContentBox {
95115
96282
  iconButtonsMore: ['|', 'preferences'],
95116
96283
  customTags: [],
95117
96284
  animateModal: false,
95118
- elementAnimate: true,
96285
+ elementAnimate: false,
95119
96286
  elementEditor: true,
95120
96287
  // onAdd: function () { },
95121
96288
  imageQuality: 0.92,
@@ -97588,6 +98755,9 @@ class ContentBox {
97588
98755
  snippetPathReplace: this.settings.snippetPathReplace,
97589
98756
  maxColumns: 6,
97590
98757
  maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
98758
+ onSectionAdd: () => {
98759
+ this.pageSetup();
98760
+ },
97591
98761
  slider: this.settings.slider,
97592
98762
  onRender: () => {
97593
98763
  this.settings.onRender();
@@ -97682,10 +98852,10 @@ class ContentBox {
97682
98852
  defaultSnippetCategory: this.settings.defaultSnippetCategory,
97683
98853
  undoRedoStyles: this.settings.undoRedoStyles,
97684
98854
  onUndo: () => {
97685
- this.pageSetup();
98855
+ this.doUndoRedo();
97686
98856
  },
97687
98857
  onRedo: () => {
97688
- this.pageSetup();
98858
+ this.doUndoRedo();
97689
98859
  },
97690
98860
  undoContainerOnly: this.settings.undoContainerOnly,
97691
98861
  absolutePath: this.settings.absolutePath,
@@ -97818,7 +98988,8 @@ class ContentBox {
97818
98988
 
97819
98989
  init() {
97820
98990
  // Add special css (remove on destroy)
97821
- dom.appendHtml(this.doc.head, `<style id="_contentbox_lightbox">
98991
+ // This is also for backward compatible if using npm but still using old local assets/css
98992
+ dom.appendHtml(this.doc.head, `<style id="_contentbox_css">
97822
98993
  body {
97823
98994
  background: ${this.settings.backgroundColor};
97824
98995
  }
@@ -97829,6 +99000,109 @@ class ContentBox {
97829
99000
  pointer-events: unset;
97830
99001
  user-select: unset;
97831
99002
  }
99003
+
99004
+ /* Navbar Fix */
99005
+ .is-wrapper.is-edit .is-section.is-section-navbar,
99006
+ .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
99007
+ left: 0;
99008
+ margin-left: 60px;
99009
+ width: calc(100% - 60px);
99010
+ }
99011
+ .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
99012
+ width: 100%;
99013
+ margin-left: unset;
99014
+ }
99015
+
99016
+ /* protected section */
99017
+ .is-section.protected .is-box-tool {
99018
+ display: none !important;
99019
+ }
99020
+
99021
+ /* manual selection during animation edit */
99022
+ .hard-select .is-box-tool {
99023
+ display: none !important;
99024
+ }
99025
+ .hard-select .is-section-tool {
99026
+ display: none !important;
99027
+ }
99028
+ .hard-select .box-select {
99029
+ outline: #00da89 1px solid;
99030
+ outline-offset: -1px;
99031
+ z-index: 1;
99032
+ }
99033
+ .hard-select .box-select .is-box-tool {
99034
+ display: flex !important;
99035
+ }
99036
+ .hard-select .box-select .is-overlay {
99037
+ z-index: -1;
99038
+ }
99039
+ .hard-select .section-select .is-section-tool {
99040
+ display: block !important;
99041
+ }
99042
+
99043
+ /* drop block as section */
99044
+ .is-wrapper > .sortable-ghost {
99045
+ height: 40px !important;
99046
+ min-height: unset !important;
99047
+ background: rgba(204, 204, 204, 0.15) !important;
99048
+ }
99049
+
99050
+ /* toggle tool */
99051
+ .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
99052
+ .is-wrapper.is-clean-edit .box-select .is-box-tool {
99053
+ display: none !important;
99054
+ }
99055
+ .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
99056
+ .is-wrapper.is-clean-edit .section-select .is-section-tool {
99057
+ display: none !important;
99058
+ }
99059
+ .is-wrapper.is-clean-edit .hard-select .box-select,
99060
+ .is-wrapper.is-clean-edit .box-select {
99061
+ outline: none !important;
99062
+ }
99063
+
99064
+
99065
+ </style>`);
99066
+ dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
99067
+
99068
+ #_cbhtml .is-modal.editbox.is-modal-content {
99069
+ z-index: 10002;
99070
+ position: fixed;
99071
+ overflow: hidden;
99072
+ width: 380px;
99073
+ height: auto;
99074
+ top: calc(50% - 250px);
99075
+ left: calc(50% - 175px);
99076
+ box-sizing: content-box;
99077
+ flex-direction: row;
99078
+ align-items: flex-start;
99079
+ }
99080
+ #_cbhtml .is-modal.editbox.is-modal-content.active {
99081
+ display: flex;
99082
+ }
99083
+ #_cbhtml .is-modal.editbox.is-modal-content .is-modal-overlay {
99084
+ display: none;
99085
+ }
99086
+
99087
+ #_cbhtml .is-modal.editsection.is-modal-content {
99088
+ z-index: 10002;
99089
+ position: fixed;
99090
+ overflow: hidden;
99091
+ width: 313px;
99092
+ height: auto;
99093
+ top: calc(50% - 265px);
99094
+ left: calc(50% - 157px);
99095
+ box-sizing: content-box;
99096
+ flex-direction: row;
99097
+ align-items: flex-start;
99098
+ }
99099
+ #_cbhtml .is-modal.editbox.is-modal-content.active {
99100
+ display: flex;
99101
+ }
99102
+ #_cbhtml .is-modal.editbox.is-modal-content .is-modal-overlay {
99103
+ display: none;
99104
+ }
99105
+
97832
99106
  </style>`); // Add page-overlay (to prevent mouseover during page init.
97833
99107
  // Otherwise the mouseover won't be triggered when the page ready)
97834
99108
 
@@ -97927,7 +99201,128 @@ class ContentBox {
97927
99201
 
97928
99202
  this.doc.addEventListener('click', this.doDocumentClick = e => {
97929
99203
  e = e || window.event;
97930
- var target = e.target || e.srcElement;
99204
+ var target = e.target || e.srcElement; //--- New UX ---
99205
+
99206
+ if (!target.closest('#_cbhtml') && !target.closest('.is-box-tool') && !target.closest('.is-section-tool') && !target.closest('.is-side') && !target.closest('.is-modal') && !target.closest('.is-sidebar')) {
99207
+ if (target.closest('.is-wrapper') && !target.classList.contains('is-wrapper')) {
99208
+ // Inside Wrapper
99209
+ if (target.closest('.is-container')) {
99210
+ // Inside Container
99211
+ const box = target.closest('.is-box');
99212
+
99213
+ if (!target.closest('.is-tool') && !target.closest('.is-rowadd-tool')) {
99214
+ if (box.classList.contains('box-select')) {
99215
+ if (this.wrapperEl.classList.contains('is-container-edit')) {
99216
+ this.wrapperEl.classList.remove('is-container-edit');
99217
+ this.wrapperEl.classList.add('is-clean-edit');
99218
+ } else {
99219
+ this.wrapperEl.classList.add('is-container-edit');
99220
+ this.wrapperEl.classList.remove('is-clean-edit');
99221
+ }
99222
+ } else {
99223
+ this.wrapperEl.classList.add('is-container-edit');
99224
+ this.wrapperEl.classList.remove('is-clean-edit');
99225
+ }
99226
+ }
99227
+
99228
+ if (box) {
99229
+ // clear
99230
+ const prevBox = this.doc.querySelector('.box-select');
99231
+ if (prevBox) prevBox.classList.remove('box-select'); // select
99232
+
99233
+ box.classList.add('box-select');
99234
+ this.activeBox = box;
99235
+ this.wrapperEl.classList.add('hard-select');
99236
+ }
99237
+
99238
+ const section = target.closest('.is-section');
99239
+
99240
+ if (section) {
99241
+ // clear
99242
+ const prevSection = this.doc.querySelector('.section-select');
99243
+ if (prevSection) prevSection.classList.remove('section-select'); // select
99244
+
99245
+ section.classList.add('section-select');
99246
+ this.activeSection = section;
99247
+ }
99248
+ } else {
99249
+ // Outside Container
99250
+ this.editor.inspectedElement = null;
99251
+ this.editor.activeElement = null;
99252
+ this.editor.activeCol = null;
99253
+ const box = target.closest('.is-box');
99254
+
99255
+ if (box) {
99256
+ if (box.classList.contains('box-select') && !this.wrapperEl.classList.contains('is-clean-edit')) {
99257
+ // toggle
99258
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
99259
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
99260
+
99261
+ if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
99262
+ // clear
99263
+ const prevBox = this.doc.querySelector('.box-select');
99264
+ if (prevBox) prevBox.classList.remove('box-select');
99265
+ const prevSection = this.doc.querySelector('.section-select');
99266
+ if (prevSection) prevSection.classList.remove('section-select');
99267
+ this.wrapperEl.classList.remove('hard-select');
99268
+ }
99269
+ } else {
99270
+ // clear
99271
+ const prevBox = this.doc.querySelector('.box-select');
99272
+ if (prevBox) prevBox.classList.remove('box-select');
99273
+ const prevSection = this.doc.querySelector('.section-select');
99274
+ if (prevSection) prevSection.classList.remove('section-select');
99275
+ box.classList.add('box-select');
99276
+ this.activeBox = box;
99277
+ const section = box.closest('.is-section');
99278
+ section.classList.add('section-select');
99279
+ this.activeSection = section;
99280
+ this.wrapperEl.classList.add('hard-select');
99281
+ }
99282
+ }
99283
+
99284
+ this.wrapperEl.classList.remove('is-container-edit');
99285
+ this.wrapperEl.classList.remove('is-clean-edit');
99286
+ }
99287
+
99288
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
99289
+
99290
+ if (modalEditBox.style.display === 'flex') {
99291
+ this.editbox.read();
99292
+ }
99293
+
99294
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
99295
+
99296
+ if (modalEditSection.style.display === 'flex') {
99297
+ this.editsection.read();
99298
+ }
99299
+
99300
+ if (this.settings.onPageContentClick) this.settings.onPageContentClick(e);
99301
+ } else {
99302
+ // Outside Wrapper
99303
+ this.wrapperEl.classList.remove('is-container-edit');
99304
+ this.wrapperEl.classList.remove('is-clean-edit');
99305
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
99306
+ modalEditBox.style.display = '';
99307
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
99308
+ modalEditSection.style.display = '';
99309
+
99310
+ if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
99311
+ this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
99312
+
99313
+ const prevBox = this.doc.querySelectorAll('.box-select');
99314
+ prevBox.forEach(elm => {
99315
+ elm.classList.remove('box-select');
99316
+ });
99317
+ const prevSection = this.doc.querySelectorAll('.section-select');
99318
+ prevSection.forEach(elm => {
99319
+ elm.classList.remove('section-select');
99320
+ });
99321
+ }
99322
+ }
99323
+ } //---
99324
+
99325
+
97931
99326
  let a = false,
97932
99327
  b = false,
97933
99328
  c = false,
@@ -97959,8 +99354,6 @@ class ContentBox {
97959
99354
  }
97960
99355
 
97961
99356
  if (!(a || b || f || g || h || i || j)) {
97962
- const boxHover = this.doc.querySelector('.box-hover');
97963
- if (boxHover) dom.removeClass(boxHover, 'box-hover');
97964
99357
  const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
97965
99358
  boxTools.forEach(tool => {
97966
99359
  tool.style.display = 'none';
@@ -98007,8 +99400,6 @@ class ContentBox {
98007
99400
  }
98008
99401
 
98009
99402
  if (!(a || b || f || g || h || i || j)) {
98010
- const boxHover = this.doc.querySelector('.box-hover');
98011
- if (boxHover) dom.removeClass(boxHover, 'box-hover');
98012
99403
  const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
98013
99404
  boxTools.forEach(tool => {
98014
99405
  tool.style.display = 'none';
@@ -98175,6 +99566,8 @@ class ContentBox {
98175
99566
  }
98176
99567
 
98177
99568
  sectionSetup(section) {
99569
+ let tool = section.querySelector('.is-section-tool');
99570
+ if (tool) tool.parentNode.removeChild(tool);
98178
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);
98179
99572
  // Prepare for tooltip
98180
99573
 
@@ -98190,6 +99583,7 @@ class ContentBox {
98190
99583
  });
98191
99584
  const btnSectionEdit = section.querySelector('.is-section-edit');
98192
99585
  btnSectionEdit.addEventListener('click', () => {
99586
+ this.editbox.close();
98193
99587
  this.editsection.edit();
98194
99588
  });
98195
99589
  const btnSectionRemove = section.querySelector('.is-section-remove');
@@ -98197,8 +99591,7 @@ class ContentBox {
98197
99591
  const modal = document.querySelector('.is-modal.delsectionconfirm');
98198
99592
  this.editor.util.showModal(modal);
98199
99593
  });
98200
- } // sectionSetup
98201
-
99594
+ }
98202
99595
 
98203
99596
  boxSetup(box) {
98204
99597
  let tool = box.querySelector('.is-box-tool');
@@ -98221,6 +99614,7 @@ class ContentBox {
98221
99614
 
98222
99615
  const btnBoxEdit = box.querySelector('.is-box-edit');
98223
99616
  if (btnBoxEdit) btnBoxEdit.addEventListener('click', () => {
99617
+ this.editsection.close();
98224
99618
  this.editbox.edit();
98225
99619
  });
98226
99620
  const btnModuleEdit = box.querySelector('.is-module-edit');
@@ -98289,21 +99683,10 @@ class ContentBox {
98289
99683
 
98290
99684
  box.addEventListener('mouseenter', () => {
98291
99685
  this.positionTool(box);
98292
- let activeSection;
98293
-
98294
- if (dom.hasClass(box, 'is-section')) {
98295
- activeSection = box;
98296
- } else {
98297
- activeSection = dom.parentsHasClass(box, 'is-section');
98298
- }
99686
+ if (this.wrapperEl.classList.contains('hard-select')) return; // New UX
98299
99687
 
98300
99688
  this.activeBox = box;
98301
- this.activeSection = activeSection;
98302
- const elms = this.doc.querySelectorAll('.box-hover');
98303
- elms.forEach(elm => {
98304
- dom.removeClass(elm, 'box-hover');
98305
- });
98306
- if (this.sectionHoverOutline) dom.addClass(this.activeBox, 'box-hover');
99689
+ this.activeSection = box.closest('.is-section');
98307
99690
  });
98308
99691
  } // boxSetup
98309
99692
 
@@ -98368,6 +99751,60 @@ class ContentBox {
98368
99751
  });
98369
99752
  }
98370
99753
 
99754
+ doUndoRedo() {
99755
+ /*
99756
+ // Clean
99757
+ const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
99758
+ [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
99759
+ [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
99760
+ [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
99761
+ [data-50-top],[data-top],[data-top-bottom]`);
99762
+ elms.forEach(elm=>{
99763
+ elm.style.transform = '';
99764
+ elm.style.transition = '';
99765
+ elm.style.opacity = '';
99766
+ });
99767
+ */
99768
+ this.pageSetup(); // To refresh skrollrr anim
99769
+
99770
+ if (this.win.skrollrr) {
99771
+ this.win.skrollrr.refresh();
99772
+ }
99773
+ }
99774
+
99775
+ refreshPage() {
99776
+ /*
99777
+ // Clean
99778
+ const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
99779
+ [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
99780
+ [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
99781
+ [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
99782
+ [data-50-top],[data-top],[data-top-bottom]`);
99783
+ elms.forEach(elm=>{
99784
+ elm.style.transform = '';
99785
+ elm.style.transition = '';
99786
+ elm.style.opacity = '';
99787
+ });
99788
+ //--- Same as undo/redo process ---
99789
+ const wrapper = this.wrapperEl;
99790
+ const sections = wrapper.querySelectorAll('.is-section');
99791
+ sections.forEach((section)=>{
99792
+ const html = section.innerHTML;
99793
+ var range = document.createRange();
99794
+ section.innerHTML = '';
99795
+ section.appendChild(range.createContextualFragment(html));
99796
+ });
99797
+
99798
+ this.editor.uo.cleaning(wrapper);
99799
+ this.pageSetup();
99800
+ //---
99801
+ */
99802
+ // To refresh skrollrr anim
99803
+ if (this.win.skrollrr) {
99804
+ this.win.skrollrr.refresh();
99805
+ }
99806
+ }
99807
+
98371
99808
  addIdea(newArea) {
98372
99809
  this.editor.saveForUndo();
98373
99810
  const designPath = this.designPath;
@@ -98608,6 +100045,9 @@ class ContentBox {
98608
100045
  document.body.style.overflowY = '';
98609
100046
  this.addSpace();
98610
100047
  this.scrollTo(newSection, 600);
100048
+ setTimeout(() => {
100049
+ this.refreshPage();
100050
+ }, 600);
98611
100051
  } // addIdea
98612
100052
 
98613
100053
 
@@ -99152,8 +100592,10 @@ class ContentBox {
99152
100592
  this.builderStuff.innerHTML = '';
99153
100593
  dom.removeClass(document.body, 'sidebar-active'); // Remove special css
99154
100594
 
99155
- const cblightboxStyle = document.querySelector('#_contentbox_lightbox');
99156
- if (cblightboxStyle) cblightboxStyle.parentNode.removeChild(cblightboxStyle); // Render html content
100595
+ const cbContentStyle = this.doc.querySelector('#_contentbox_css');
100596
+ if (cbContentStyle) cbContentStyle.parentNode.removeChild(cbContentStyle);
100597
+ const cbStuffStyle = document.querySelector('#_contentboxstuff_css');
100598
+ if (cbStuffStyle) cbStuffStyle.parentNode.removeChild(cbStuffStyle); // Render html content
99157
100599
 
99158
100600
  let range = document.createRange();
99159
100601
  const wrapper = this.wrapperEl;