@innovastudio/contentbox 1.4.30 → 1.4.32

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.
@@ -385,6 +385,37 @@ const prepareSvgIcons$1 = builder => {
385
385
  <path d="M12 9l4.5 -4.5"></path>
386
386
  </symbol>
387
387
 
388
+ <symbol id="icon-box-multiple" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
389
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
390
+ <rect x="7" y="3" width="14" height="14" rx="2"></rect>
391
+ <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
392
+ </symbol>
393
+
394
+ <symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
395
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
396
+ <line x1="4" y1="20" x2="7" y2="20"></line>
397
+ <line x1="14" y1="20" x2="21" y2="20"></line>
398
+ <line x1="6.9" y1="15" x2="13.8" y2="15"></line>
399
+ <line x1="10.2" y1="6.3" x2="16" y2="20"></line>
400
+ <polyline points="5 20 11 4 13 4 20 20"></polyline>
401
+ </symbol>
402
+
403
+ <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
404
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
405
+ <line x1="12" y1="5" x2="12" y2="19"></line>
406
+ <line x1="5" y1="12" x2="19" y2="12"></line>
407
+ </symbol>
408
+
409
+ <symbol id="icon-hand-move" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
410
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
411
+ <path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path>
412
+ <path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5"></path>
413
+ <path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5"></path>
414
+ <path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path>
415
+ <path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427"></path>
416
+ <path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
417
+ </symbol>
418
+
388
419
  </defs>
389
420
  </svg>`;
390
421
  const builderStuff = builder.builderStuff;
@@ -523,12 +554,15 @@ class SideBar {
523
554
  var sideIndex = 0;
524
555
  this.builder.sidebarData.buttons.map(button => {
525
556
  if (button.name == 'section') {
526
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' + '</button>';
557
+ html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' +
558
+ '<svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg>' + '</button>';
527
559
  } else if (button.name == 'snippet') {
528
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' + '</button>';
560
+ html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
561
+ '<svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg>' + '</button>';
529
562
  } else if (button.name == 'typography') {
530
563
  if (this.builder.enableContentStyle) {
531
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + button.title + '" title="' + button.title + '">' + '<span style="">a</span>' + '</button>';
564
+ html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + button.title + '" title="' + button.title + '">' + // '<span style="">a</span>' +
565
+ '<svg class="svg-icon"><use xlink:href="#icon-typography"></use></svg>' + '</button>';
532
566
  }
533
567
  } else if (button.name == 'code') {
534
568
  if (this.builder.htmlSyntaxHighlighting) {
@@ -10154,7 +10188,7 @@ class EditBox {
10154
10188
  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>';
10155
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>';
10156
10190
  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>';
10157
- 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:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
10191
+ 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>';
10158
10192
  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>';
10159
10193
  html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>';
10160
10194
  html += '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:27px;">' + out('Default Text Formatting') + ':</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">' + out('Alignment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div id="divContainerParagraphSize" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div>' + '<div style="display:flex">' + '<button title="' + out('16') + '" class="cmd-box-parasize" data-value="16" style="width:40px">16</button>' + '<button title="' + out('17') + '" class="cmd-box-parasize" data-value="17" style="width:40px">17</button>' + '<button title="' + out('18') + '" class="cmd-box-parasize" data-value="18" style="width:40px">18</button>' + '<button title="' + out('19') + '" class="cmd-box-parasize" data-value="19" style="width:40px">19</button>' + '<button title="' + out('20') + '" class="cmd-box-parasize" data-value="20" style="width:40px">20</button>' + '<button title="' + out('21') + '" class="cmd-box-parasize" data-value="21" style="width:40px">21</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-parasize" data-value="" style="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Auto adjust text size on large screen.') + '</label>' + '</div>' + '<div id="divContainerLineHeight" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div>' + '<div style="display:flex;flex-flow: wrap;width: 290px;">' + '<button title="' + out('1') + '" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button>' + '<button title="' + out('1.1') + '" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button>' + '<button title="' + out('1.2') + '" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button>' + '<button title="' + out('1.3') + '" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button>' + '<button title="' + out('1.4') + '" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button>' + '<button title="' + out('1.5') + '" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button>' + '<button title="' + out('1.6') + '" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button>' + '<button title="' + out('1.7') + '" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button>' + '<button title="' + out('1.8') + '" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button>' + '<button title="' + out('1.9') + '" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button>' + '<button title="' + out('2') + '" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-lineheight" data-value="" style="">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>';
@@ -10162,7 +10196,26 @@ class EditBox {
10162
10196
  '<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
10163
10197
  html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
10164
10198
  html += '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:13px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '</div>';
10165
- html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> ' + out('Zoom on Hover') + '</label>' + '</div>';
10199
+ html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
10200
+ /*
10201
+ '<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
10202
+ '<input type="radio" id="rdoKenBurns" name="boxbganim" value="1" style="margin: 0 10px 0 5px;">' +
10203
+ '<span style="line-height:1">Ken Burns Effect</span>' +
10204
+ '</label>' +
10205
+ '<label for="rdoParallaxScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
10206
+ '<input type="radio" id="rdoParallaxScale" name="boxbganim" value="2" style="margin: 0 10px 0 5px;">' +
10207
+ '<span style="line-height:1">Parallax & Scale</span>' +
10208
+ '</label>' +
10209
+ '<label for="rdoParallax" style="display:flex;align-items:center;margin-bottom:10px;">' +
10210
+ '<input type="radio" id="rdoParallax" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
10211
+ '<span style="line-height:1">Parallax (visible on preview)</span>' +
10212
+ '</label>' +
10213
+ '<label for="rdoScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
10214
+ '<input type="radio" id="rdoScale" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
10215
+ '<span style="line-height:1">Scale</span>' +
10216
+ '</label>' +
10217
+ */
10218
+ '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> ' + out('Zoom on Hover') + '</label>' + '</div>';
10166
10219
  html += '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>';
10167
10220
  html += '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:1000px;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('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
10168
10221
  dom$j.appendHtml(builderStuff, html); // Box Tool
@@ -11491,6 +11544,55 @@ class EditBox {
11491
11544
 
11492
11545
  this.builder.onChange();
11493
11546
  });
11547
+ const chkBoxAddCode = modalEditBox.querySelector('.cmd-box-addcode');
11548
+ chkBoxAddCode.addEventListener('click', () => {
11549
+ const activeBox = this.builder.activeBox;
11550
+ const overlay = activeBox.querySelector('.is-overlay');
11551
+ overlay.insertAdjacentHTML('beforebegin', `
11552
+ <div class="is-overlay-content" data-module="code" data-module-desc="Custom HTML or Javascript " data-html="${encodeURIComponent(`
11553
+ <style>
11554
+
11555
+ </style>
11556
+
11557
+ <script id="script-{id}">
11558
+ var docReady = function(fn) {
11559
+ var stateCheck = setInterval(function() {
11560
+ if (document.readyState !== "complete") return;
11561
+ // if (typeof skrollrr === 'undefined') return; // To check if needed library is loaded (you can change it to other library)
11562
+ // if (typeof skrollrr.lax === 'undefined') return; // To check if certain object is ready (in case needed)
11563
+ clearInterval(stateCheck);
11564
+ try {
11565
+ fn()
11566
+ } catch (e) {}
11567
+ }, 1);
11568
+ };
11569
+ docReady(function() {
11570
+
11571
+ // Your code here
11572
+ let section = document.querySelector('#script-{id}').closest('.is-section'); // Get the current section
11573
+ let box = document.querySelector('#script-{id}').closest('.is-box'); // Get the current box
11574
+ let container = box.querySelector('.is-container'); // Get the current container
11575
+ // console.log(section);
11576
+
11577
+ });
11578
+ </script>
11579
+ `)}" style="z-index: 1;">
11580
+
11581
+ </div>`); //Trigger Change event
11582
+
11583
+ this.builder.onChange();
11584
+ this.edit(); // Update controls
11585
+
11586
+ let boxTool = activeBox.querySelector('.is-box-tool');
11587
+
11588
+ if (boxTool) {
11589
+ activeBox.querySelector('.is-cover-upload').style.display = 'block';
11590
+ activeBox.querySelector('.is-box-edit').style.display = 'inline-block';
11591
+ activeBox.querySelector('.is-module-edit').style.display = 'inline-block';
11592
+ boxTool.style.width = '120px';
11593
+ boxTool.style.left = 'calc(50% - 60px)';
11594
+ }
11595
+ });
11494
11596
  const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
11495
11597
  chkBoxAddText.addEventListener('click', () => {
11496
11598
  const activeBox = this.builder.activeBox;
@@ -11548,6 +11650,27 @@ class EditBox {
11548
11650
  }
11549
11651
  });
11550
11652
  });
11653
+ const chkBoxRemoveCode = modalEditBox.querySelector('.cmd-box-removecode');
11654
+ chkBoxRemoveCode.addEventListener('click', () => {
11655
+ this.builder.editor.util.confirm(out('Are you sure you want to remove custom code in this box?'), ok => {
11656
+ if (ok) {
11657
+ const activeBox = this.builder.activeBox;
11658
+ const overlayCode = activeBox.querySelector('.is-overlay-content[data-module]');
11659
+ overlayCode.parentNode.removeChild(overlayCode);
11660
+ this.edit(); // Update controls
11661
+
11662
+ let boxTool = activeBox.querySelector('.is-box-tool');
11663
+
11664
+ if (boxTool) {
11665
+ activeBox.querySelector('.is-cover-upload').style.display = 'block';
11666
+ activeBox.querySelector('.is-box-edit').style.display = 'inline-block';
11667
+ activeBox.querySelector('.is-module-edit').style.display = 'none';
11668
+ boxTool.style.width = '80px';
11669
+ boxTool.style.left = 'calc(50% - 40px)';
11670
+ }
11671
+ }
11672
+ });
11673
+ });
11551
11674
  const btnBoxBgImageRemove = modalEditBox.querySelector('.input-box-bgremove');
11552
11675
  if (btnBoxBgImageRemove) btnBoxBgImageRemove.addEventListener('click', () => {
11553
11676
  this.boxImage('');
@@ -12369,6 +12492,17 @@ class EditBox {
12369
12492
  } else {
12370
12493
  chkBoxAddText.style.display = 'flex';
12371
12494
  chkBoxRemoveText.style.display = 'none';
12495
+ }
12496
+
12497
+ const chkBoxAddCode = modalEditBox.querySelector('.cmd-box-addcode');
12498
+ const chkBoxRemoveCode = modalEditBox.querySelector('.cmd-box-removecode');
12499
+
12500
+ if (activeBox.querySelector('.is-overlay-content[data-module]')) {
12501
+ chkBoxAddCode.style.display = 'none';
12502
+ chkBoxRemoveCode.style.display = 'flex';
12503
+ } else {
12504
+ chkBoxAddCode.style.display = 'flex';
12505
+ chkBoxRemoveCode.style.display = 'none';
12372
12506
  } // noedit (not used yet)
12373
12507
 
12374
12508
 
@@ -28182,59 +28316,7 @@ class HtmlUtil {
28182
28316
  });
28183
28317
  }
28184
28318
 
28185
- if (this.builder.cleanHtmlFormatting) {
28186
- // this cleanHtmlFormatting flag only use for output, not during editing
28187
- if (this.builder.useCssClasses) {
28188
- // Clean all uneeded normal classes
28189
- let elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontWeight.defaultNormal}`); // Array.prototype.forEach.call(elmNormals, (elm) => {
28190
- // let decor = false;
28191
- // if(elm.closest(`.${this.builder.cssClasses.fontWeight.defaultBold}`)) {
28192
- // decor = true;
28193
- // }
28194
- // if(!decor) {
28195
- // dom.removeClass(elm, this.builder.cssClasses.fontWeight.defaultNormal);
28196
- // }
28197
- // });
28198
- // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontStyle.normal}`);
28199
- // Array.prototype.forEach.call(elmNormals, (elm) => {
28200
- // let decor = false;
28201
- // if(elm.closest(`.${this.builder.cssClasses.fontStyle.italic}`)) {
28202
- // decor = true;
28203
- // }
28204
- // if(!decor) {
28205
- // dom.removeClass(elm, this.builder.cssClasses.fontStyle.normal);
28206
- // }
28207
- // });
28208
- // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
28209
- // Array.prototype.forEach.call(elmNormals, (elm) => {
28210
- // let decor = false;
28211
- // if(elm.closest('a')) return;
28212
- // if(elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
28213
- // decor = true;
28214
- // }
28215
- // if(!decor) {
28216
- // dom.removeClass(elm, this.builder.cssClasses.textDecoration.normal);
28217
- // }
28218
- // });
28219
- // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textTransform.normal}`);
28220
- // Array.prototype.forEach.call(elmNormals, (elm) => {
28221
- // let decor = false;
28222
- // if(elm.closest(`.${this.builder.cssClasses.textTransform.uppercase},.${this.builder.cssClasses.textTransform.lowercase},.${this.builder.cssClasses.textTransform.capitalize}`)) {
28223
- // decor = true;
28224
- // }
28225
- // if(!decor) {
28226
- // dom.removeClass(elm, this.builder.cssClasses.textTransform.normal);
28227
- // }
28228
- // });
28229
-
28230
- elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
28231
- Array.prototype.forEach.call(elmNormals, elm => {
28232
- dom$h.removeClass(elm, this.builder.cssClasses.extend.unset);
28233
- });
28234
- } // Clean unused spans
28235
- // dom.cleanUnusedSpan(content); // REVIEW
28236
-
28237
- }
28319
+ if (this.builder.cleanHtmlFormatting) ;
28238
28320
 
28239
28321
  const util = this.builder.util;
28240
28322
  const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
@@ -28490,10 +28572,6 @@ class HtmlUtil {
28490
28572
  Array.prototype.forEach.call(emptyclasses, emptyclass => {
28491
28573
  emptyclass.removeAttribute('class');
28492
28574
  });
28493
- let emptystyles = tmp.querySelectorAll('[style=""]');
28494
- Array.prototype.forEach.call(emptystyles, emptystyle => {
28495
- emptystyle.removeAttribute('style');
28496
- });
28497
28575
  dom$h.removeEmptyStyle(tmp);
28498
28576
  elms = tmp.querySelectorAll('[data-keep]');
28499
28577
  dom$h.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
@@ -28513,6 +28591,20 @@ class HtmlUtil {
28513
28591
  // Remove dummy DIV after last section
28514
28592
  let elms = tmp.querySelectorAll('.is-dummy');
28515
28593
  dom$h.removeElements(elms);
28594
+ elms = tmp.querySelectorAll('[data-scroll]');
28595
+ dom$h.removeAttributes(elms, 'data-scroll');
28596
+ elms = tmp.querySelectorAll('[data-scroll-once]');
28597
+ dom$h.removeAttributes(elms, 'data-scroll-once');
28598
+ elms = tmp.querySelectorAll(`[data-top-bottom],[data-top],[data-50-top],[data-100-top],
28599
+ [data-center-bottom],[data-center],[data-center-top],[data--400-bottom],[data--300-bottom],
28600
+ [data--200-bottom],[data--150-bottom],[data--100-bottom],[data--50-bottom],
28601
+ [data-bottom],[data-50-bottom],[data-100-bottom],[data-150-bottom],[data-200-bottom],
28602
+ [data-300-bottom],[data-400-bottom],[data-bottom-top]`);
28603
+ Array.prototype.forEach.call(elms, elm => {
28604
+ elm.style.transition = '';
28605
+ elm.style.transform = '';
28606
+ elm.style.opacity = '';
28607
+ });
28516
28608
  elms = tmp.querySelectorAll('.is-animated');
28517
28609
  Array.prototype.forEach.call(elms, elm => {
28518
28610
  dom$h.removeClass(elm, 'animated');
@@ -28533,6 +28625,11 @@ class HtmlUtil {
28533
28625
  dom$h.removeClass(elm, 'slideInRight');
28534
28626
  dom$h.removeClass(elm, 'zoomIn');
28535
28627
  elm.style.animationDelay = '';
28628
+ elm.style.transitionDelay = '';
28629
+ });
28630
+ let emptystyles = tmp.querySelectorAll('[style=""]');
28631
+ Array.prototype.forEach.call(emptystyles, emptystyle => {
28632
+ emptystyle.removeAttribute('style');
28536
28633
  }); //Cleanup utils
28537
28634
 
28538
28635
  elms = tmp.querySelectorAll('.is-appeared');
@@ -28594,6 +28691,10 @@ class HtmlUtil {
28594
28691
  html = html_content + html_footer + html_others;
28595
28692
  }
28596
28693
  } else {
28694
+ let emptystyles = tmp.querySelectorAll('[style=""]');
28695
+ Array.prototype.forEach.call(emptystyles, emptystyle => {
28696
+ emptystyle.removeAttribute('style');
28697
+ });
28597
28698
  html = tmp.innerHTML.trim();
28598
28699
  html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
28599
28700
  }
@@ -30473,7 +30574,7 @@ const renderQuickAdd = builder => {
30473
30574
  elm = quickadd.querySelector('.add-button');
30474
30575
  if (elm) dom.addEventListener(elm, 'click', () => {
30475
30576
  const mode = quickadd.getAttribute('data-mode');
30476
- let html = `<div>
30577
+ let html = `<div style="white-space: nowrap;">
30477
30578
  <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
30478
30579
  </div>`;
30479
30580
 
@@ -30486,7 +30587,7 @@ const renderQuickAdd = builder => {
30486
30587
  elm = quickadd.querySelector('.add-twobutton');
30487
30588
  if (elm) dom.addEventListener(elm, 'click', () => {
30488
30589
  const mode = quickadd.getAttribute('data-mode');
30489
- let html = `<div>
30590
+ let html = `<div style="white-space: nowrap;">
30490
30591
  <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
30491
30592
  <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 mt-2 mb-2 rounded tracking-50 uppercase py-2 size-14 px-6 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500 leading-relaxed">Get Started</a>
30492
30593
  </div>`;
@@ -62663,6 +62764,12 @@ class Image$1 {
62663
62764
  </div>
62664
62765
  </div>
62665
62766
 
62767
+ <div class="is-modal mediaselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
62768
+ <div style="max-width:800px;height:80%;padding:0;">
62769
+ <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
62770
+ </div>
62771
+ </div>
62772
+
62666
62773
  <div id="divImageResizerOverlay" class="is-tool">
62667
62774
  </div>
62668
62775
  <div id="divImageResizer" data-x=0 data-y=0 class="is-tool moveable resizable">
@@ -71855,7 +71962,7 @@ class ColumnTool {
71855
71962
  } // Select image (opens Asset Manager plugin or custom dialog)
71856
71963
 
71857
71964
 
71858
- if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
71965
+ if (this.builder.opts.onMediaSelectClick || this.builder.opts.mediaSelect || this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
71859
71966
  const inpSrc = this.cellSettings.querySelector('.input-src');
71860
71967
  elm = this.divCellClick.querySelector('.input-select');
71861
71968
  if (elm) dom.addEventListener(elm, 'click', () => {
@@ -71868,36 +71975,34 @@ class ColumnTool {
71868
71975
 
71869
71976
  this.builder.targetAssetType = 'media'; //---/default
71870
71977
 
71871
- if (this.builder.opts.onFileSelectClick) {
71872
- this.builder.opts.onFileSelectClick({
71978
+ if (this.builder.opts.onMediaSelectClick) {
71979
+ this.builder.opts.onMediaSelectClick({
71873
71980
  targetInput: inpSrc,
71874
71981
  theTrigger: elm
71875
- });
71876
- dom.observeElement(inpSrc, 'value', () => {
71877
- this.applyClick();
71878
- });
71982
+ }); // dom.observeElement(inpSrc, 'value', () => {
71983
+ // this.applyClick();
71984
+ // });
71879
71985
  } else if (this.builder.opts.onImageSelectClick) {
71880
71986
  this.builder.opts.onImageSelectClick({
71881
71987
  targetInput: inpSrc,
71882
71988
  theTrigger: elm
71883
- });
71884
- dom.observeElement(inpSrc, 'value', () => {
71885
- this.applyClick();
71886
- });
71887
- } else if (this.builder.opts.fileselect) {
71888
- let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
71889
- let iframe = modalFileSelect.querySelector('iframe');
71989
+ }); // dom.observeElement(inpSrc, 'value', () => {
71990
+ // this.applyClick();
71991
+ // });
71992
+ } else if (this.builder.opts.mediaSelect) {
71993
+ let modalMediaSelect = builderStuff.querySelector('.is-modal.mediaselect');
71994
+ let iframe = modalMediaSelect.querySelector('iframe');
71890
71995
 
71891
71996
  if (this.builder.opts.assetRefresh) {
71892
- iframe.src = this.builder.opts.fileselect;
71997
+ iframe.src = this.builder.opts.mediaSelect;
71893
71998
  this.builder.opts.assetRefresh = false;
71894
71999
  }
71895
72000
 
71896
72001
  if (iframe.src === 'about:blank') {
71897
- iframe.src = this.builder.opts.fileselect;
72002
+ iframe.src = this.builder.opts.mediaSelect;
71898
72003
  }
71899
72004
 
71900
- util.showModal(modalFileSelect, false, () => {
72005
+ util.showModal(modalMediaSelect, false, () => {
71901
72006
  elm.removeAttribute('data-focus');
71902
72007
  elm.focus();
71903
72008
  });
@@ -71954,7 +72059,9 @@ class ColumnTool {
71954
72059
  dom.addClass(frmUpload, 'please-wait');
71955
72060
  this.cellSettings.querySelector('#hidRefId4').value = this.builder.opts.customval;
71956
72061
 
71957
- if (this.builder.opts.onLargerImageUpload) {
72062
+ if (this.builder.opts.onMediaUpload) {
72063
+ this.builder.opts.onMediaUpload(e);
72064
+ } else if (this.builder.opts.onLargerImageUpload) {
71958
72065
  this.builder.opts.onLargerImageUpload(e);
71959
72066
  } else {
71960
72067
  frmUpload.submit();
@@ -78104,6 +78211,7 @@ class ElementTool {
78104
78211
  pos() {
78105
78212
  let elementTool = this.elementTool;
78106
78213
  let elm = this.builder.activeElement;
78214
+ if (elm.closest('.is-dock')) return;
78107
78215
  let top, left;
78108
78216
 
78109
78217
  if (!this.builder.iframe) {
@@ -87375,6 +87483,12 @@ class ContentBuilder {
87375
87483
  // onAdd: function(){},
87376
87484
  largerImageHandler: '',
87377
87485
  // onLargerImageUpload: function(){},
87486
+ imageHandler: '',
87487
+ // NEW: for image
87488
+ // onImageUpload: function(){}, // NEW: for image
87489
+ fileHandler: '',
87490
+ // NEW: for file/document
87491
+ // onFileUpload: function(){}, // NEW: for file/document
87378
87492
  mediaHandler: '',
87379
87493
  // onMediaUpload: function(){},
87380
87494
  videoHandler: '',
@@ -87404,6 +87518,7 @@ class ContentBuilder {
87404
87518
  // onFileSelectClick: function () { },
87405
87519
  // onVideoSelectClick: function () { },
87406
87520
  // onAudioSelectClick: function () { },
87521
+ // onMediaSelectClick: function () { }, // NEW: for image & video
87407
87522
  // onPluginsLoaded: function () { },
87408
87523
  // onImageBrowseClick: function () { },
87409
87524
  // onImageSettingClick: function () { },
@@ -87432,6 +87547,8 @@ class ContentBuilder {
87432
87547
  fileSelect: '',
87433
87548
  videoSelect: '',
87434
87549
  audioSelect: '',
87550
+ mediaSelect: '',
87551
+ // NEW: for image & video
87435
87552
  assetRefresh: false,
87436
87553
  // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
87437
87554
  customTags: [],
@@ -87893,18 +88010,34 @@ class ContentBuilder {
87893
88010
  this.opts.videoselect = this.opts.videoSelect;
87894
88011
  } else if (this.opts.videoselect !== '') {
87895
88012
  this.opts.videoSelect = this.opts.videoselect;
88013
+ } // if(this.opts.largerImageHandler!=='') {
88014
+ // this.opts.mediaHandler = this.opts.largerImageHandler;
88015
+ // } else if(this.opts.mediaHandler!=='') {
88016
+ // this.opts.largerImageHandler = this.opts.mediaHandler;
88017
+ // }
88018
+ // if(this.opts.onLargerImageUpload) {
88019
+ // this.opts.onMediaUpload = this.opts.onLargerImageUpload;
88020
+ // } else if(this.opts.onMediaUpload) {
88021
+ // this.opts.onLargerImageUpload = this.opts.onMediaUpload;
88022
+ // }
88023
+ // Just in case
88024
+
88025
+
88026
+ if (!this.opts.onImageUpload && !this.opts.onLargerImageUpload) {
88027
+ this.opts.onImageUpload = this.opts.onMediaUpload;
87896
88028
  }
87897
88029
 
87898
- if (this.opts.largerImageHandler !== '') {
87899
- this.opts.mediaHandler = this.opts.largerImageHandler;
87900
- } else if (this.opts.mediaHandler !== '') {
87901
- this.opts.largerImageHandler = this.opts.mediaHandler;
88030
+ if (!this.opts.imageHandler && !this.opts.largerImageHandler) {
88031
+ this.opts.imageHandler = this.opts.mediaHandler;
88032
+ } // Currently used: largerImageHandler & onLargerImageUpload (as in elementimage.js)
88033
+
88034
+
88035
+ if (this.opts.imageHandler !== '') {
88036
+ this.opts.largerImageHandler = this.opts.imageHandler;
87902
88037
  }
87903
88038
 
87904
- if (this.opts.onLargerImageUpload) {
87905
- this.opts.onMediaUpload = this.opts.onLargerImageUpload;
87906
- } else if (this.opts.onMediaUpload) {
87907
- this.opts.onLargerImageUpload = this.opts.onMediaUpload;
88039
+ if (this.opts.onImageUpload) {
88040
+ this.opts.onLargerImageUpload = this.opts.onImageUpload;
87908
88041
  } // useButtonPlugin
87909
88042
 
87910
88043
 
@@ -89115,6 +89248,8 @@ class ContentBuilder {
89115
89248
  if (modal) this.hideModal(modal);
89116
89249
  modal = document.querySelector('.is-modal.audioselect.active');
89117
89250
  if (modal) this.hideModal(modal);
89251
+ modal = document.querySelector('.is-modal.mediaselect.active');
89252
+ if (modal) this.hideModal(modal);
89118
89253
  }
89119
89254
  }
89120
89255
 
@@ -89183,9 +89318,9 @@ class ContentBuilder {
89183
89318
  }
89184
89319
 
89185
89320
  openAsset(targetInput, targetAssetType, theTrigger) {
89186
- if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
89187
- if (this.opts.onFileSelectClick) {
89188
- this.opts.onFileSelectClick({
89321
+ if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
89322
+ if (this.opts.onMediaSelectClick) {
89323
+ this.opts.onMediaSelectClick({
89189
89324
  targetInput: targetInput,
89190
89325
  theTrigger: theTrigger
89191
89326
  });
@@ -89205,6 +89340,11 @@ class ContentBuilder {
89205
89340
  targetInput: targetInput,
89206
89341
  theTrigger: theTrigger
89207
89342
  });
89343
+ } else if (targetAssetType === 'audio' && this.opts.onAudioSelectClick) {
89344
+ this.opts.onAudioSelectClick({
89345
+ targetInput: targetInput,
89346
+ theTrigger: theTrigger
89347
+ });
89208
89348
  } else if (targetAssetType === 'all' && this.opts.onFileSelectClick) {
89209
89349
  this.opts.onFileSelectClick({
89210
89350
  targetInput: targetInput,
@@ -89215,9 +89355,12 @@ class ContentBuilder {
89215
89355
  let modal;
89216
89356
 
89217
89357
  if (targetAssetType === 'media') {
89218
- modal = this.builderStuff.querySelector('.is-modal.fileselect');
89358
+ modal = this.builderStuff.querySelector('.is-modal.mediaselect');
89219
89359
  iframe = modal.querySelector('iframe');
89220
- if (iframe.src === 'about:blank') iframe.src = this.opts.fileSelect;
89360
+
89361
+ if (iframe.src === 'about:blank') {
89362
+ if (this.opts.mediaSelect) iframe.src = this.opts.mediaSelect;else if (this.opts.imageSelect) iframe.src = this.opts.imageSelect;
89363
+ }
89221
89364
  } else if (targetAssetType === 'video') {
89222
89365
  modal = this.builderStuff.querySelector('.is-modal.videoselect');
89223
89366
  iframe = modal.querySelector('iframe');
@@ -89226,6 +89369,10 @@ class ContentBuilder {
89226
89369
  modal = this.builderStuff.querySelector('.is-modal.imageselect');
89227
89370
  iframe = modal.querySelector('iframe');
89228
89371
  if (iframe.src === 'about:blank') iframe.src = this.opts.imageSelect;
89372
+ } else if (targetAssetType === 'audio') {
89373
+ modal = this.builderStuff.querySelector('.is-modal.audioselect');
89374
+ iframe = modal.querySelector('iframe');
89375
+ if (iframe.src === 'about:blank') iframe.src = this.opts.audioSelect;
89229
89376
  } else if (targetAssetType === 'all') {
89230
89377
  modal = this.builderStuff.querySelector('.is-modal.fileselect');
89231
89378
  iframe = modal.querySelector('iframe');
@@ -92506,22 +92653,33 @@ class AnimateScroll {
92506
92653
  }
92507
92654
  .animatescroll .side-title {
92508
92655
  font-weight: 400;
92509
- padding: 18px !important;
92510
92656
  font-size: 15px;
92511
92657
  opacity: 0.8;
92658
+ padding: 10px 0 0 18px !important;
92659
+ }
92660
+ .animatescroll .is-tabs a.active {
92661
+ background: none !important;
92662
+ }
92663
+ .animatescroll .is-tabs a {
92664
+ text-transform: none!important;
92665
+ font-size: 13px!important;
92666
+ margin-right: 30px!important;
92667
+ margin-left: 3px!important;
92512
92668
  }
92513
92669
  .anim-controls {
92514
92670
  padding: 0 !important;
92515
92671
  z-index: 1;
92672
+ width: 100%;
92516
92673
  height: 100%;
92517
92674
  position: absolute;
92518
92675
  top: 0;
92519
92676
  box-sizing: border-box;
92520
- border-top: transparent 60px solid !important;
92677
+ border-top: transparent 200px solid !important;
92521
92678
  }
92522
- #divAnimAdjust, #divAnimSettings {
92523
- border-top: transparent 65px solid !important;
92679
+ #divEnterAnim, #divLeaveAnim, #divAnimSettings {
92680
+ border-top: transparent 70px solid !important;
92524
92681
  padding: 0 10px 20px 18px !important;
92682
+ width: 100%;
92525
92683
  height: 100%;
92526
92684
  box-sizing: border-box;
92527
92685
  overflow-y: auto;
@@ -92535,6 +92693,16 @@ class AnimateScroll {
92535
92693
  flex:none;
92536
92694
  display: flex;
92537
92695
  justify-content: space-between;
92696
+ align-items: center;
92697
+ }
92698
+ .anim-label span {
92699
+ display: flex;
92700
+ align-items: center;
92701
+ }
92702
+ .anim-label button {
92703
+ width: 40px !important;
92704
+ margin-left: 2px !important;
92705
+ box-shadow: none !important;
92538
92706
  }
92539
92707
  .bold {
92540
92708
  font-weight: 600;
@@ -92555,8 +92723,12 @@ class AnimateScroll {
92555
92723
  .flex-wrap {
92556
92724
  display: flex;
92557
92725
  flex-flow: wrap;
92726
+ align-items: center;
92727
+ }
92728
+ .flex-nowrap {
92729
+ display: flex;
92730
+ align-items: center;
92558
92731
  }
92559
-
92560
92732
  .inp-slide-left,
92561
92733
  .inp-slide-right,
92562
92734
  .inp-slide-up,
@@ -92573,140 +92745,460 @@ class AnimateScroll {
92573
92745
  font-weight: 300 !important;
92574
92746
  padding: 0 !important;
92575
92747
  }
92748
+
92576
92749
  </style>
92577
92750
  <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
92578
92751
 
92579
- <div class="side-title">${out('Scroll Animation')}</div>
92752
+ <div class="side-title">${out('Animation')}</div>
92580
92753
 
92581
92754
  <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>
92582
-
92583
- <div class="anim-controls">
92584
92755
 
92585
- <div class="is-tabs clearfix" style="padding-top:18px;position:relative;z-index:1;" data-group="skrollanim">
92586
- <a id="tabBoxGeneral" href="" data-content="divAnimAdjust" class="active">Animation</a>
92587
- <a id="tabBoxContentContainer" href="" data-content="divAnimSettings">Settings</a>
92756
+ <div style="padding:10px 10px 25px 18px;z-index:2;position:relative;">
92757
+ <div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
92758
+ <div class="flex-wrap">
92759
+ <button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
92760
+ <button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
92761
+ <button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
92762
+ <button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
92763
+ </div>
92764
+ </div>
92765
+
92766
+ <div>
92767
+ <div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
92768
+ <a href="" data-content="divAnimScroll" class="active">${out('On Scroll')}</a>
92769
+ <a href="" data-content="divAnimDefault">${out('On View')}</a>
92588
92770
  </div>
92771
+ </div>
92589
92772
 
92590
- <div id="divAnimAdjust" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
92591
-
92592
- <div class="anim-label">${out('Target')}:</div>
92593
- <div class="flex-wrap">
92594
- <button title="" class="cmd-target on" data-command="target" data-value="element" style="width:80px">Element</button>
92595
- <button title="" class="cmd-target" data-command="target" data-value="column" style="width:80px">Column</button>
92596
- <button title="" class="cmd-target" data-command="target" data-value="row" style="width:80px">Row</button>
92597
- <button title="" class="cmd-target" data-command="target" data-value="container" style="width:80px">Container</button>
92598
- </div>
92773
+ <div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
92599
92774
 
92600
- <div class="anim-label">
92601
- <span><span class="bold">Slide Left</span>: <input class="inp-slide-left" type="text" /></span>
92602
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>
92603
- </div>
92604
- <div class="flex-wrap">
92605
- <button title="" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
92606
- <button title="" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
92607
- <button title="" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
92608
- <button title="" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
92609
- <button title="" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
92610
- </div>
92611
- <div class="anim-label">
92612
- <span><span class="bold">Slide Right</span>: <input class="inp-slide-right" type="text" /></span>
92613
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>
92614
- </div>
92615
- <div class="flex-wrap">
92616
- <button title="" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
92617
- <button title="" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
92618
- <button title="" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
92619
- <button title="" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
92620
- <button title="" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
92621
- </div>
92775
+ <div class="anim-controls">
92622
92776
 
92623
- <div class="anim-label">
92624
- <span><span class="bold">Slide Up</span>: <input class="inp-slide-up" type="text" /></span>
92625
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>
92626
- </div>
92627
- <div class="flex-wrap">
92628
- <button title="" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
92629
- <button title="" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
92630
- <button title="" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
92631
- <button title="" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
92632
- <button title="" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
92633
- </div>
92634
- <div class="anim-label">
92635
- <span><span class="bold">Slide Down</span>: <input class="inp-slide-down" type="text" /></span>
92636
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>
92637
- </div>
92638
- <div class="flex-wrap">
92639
- <button title="" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
92640
- <button title="" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
92641
- <button title="" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
92642
- <button title="" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
92643
- <button title="" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
92644
- </div>
92777
+ <div style="padding:20px 0 0 18px;">
92778
+ <div class="anim-label">
92779
+ <span>
92780
+ <span class="bold">${out('Fade')}</span>:
92781
+ </span>
92782
+ </div>
92783
+ <div class="flex-wrap">
92784
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
92785
+ <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
92786
+ <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
92787
+ <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
92788
+ <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
92789
+ </div>
92645
92790
 
92646
- <div class="anim-label">
92647
- <span><span class="bold">Scale</span>: <input class="inp-scale" type="text" /></span>
92648
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>
92649
- </div>
92650
- <div class="flex-wrap">
92651
- <button title="" class="cmd-scale" data-command="scale" data-value="0.8" style="width:60px">0.8</button>
92652
- <button title="" class="cmd-scale" data-command="scale" data-value="0.9" style="width:60px">0.9</button>
92653
- <button title="" class="cmd-scale" data-command="scale" data-value="1.1" style="width:60px">1.1</button>
92654
- <button title="" class="cmd-scale" data-command="scale" data-value="1.2" style="width:60px">1.2</button>
92655
- <button title="" class="cmd-scale" data-command="scale" data-value="2" style="width:60px">2</button>
92656
- </div>
92791
+ <div class="anim-label">
92792
+ <span>
92793
+ <span class="bold">${out('Slide')}</span>:
92794
+ </span>
92795
+ </div>
92796
+ <div class="flex-wrap">
92797
+ <button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
92798
+ <button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
92799
+ <button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
92800
+ <button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
92801
+ </div>
92802
+
92803
+ <div class="anim-label">
92804
+ <span>
92805
+ <span class="bold">${out('Flip')}</span>:
92806
+ </span>
92807
+ </div>
92808
+ <div class="flex-wrap">
92809
+ <button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
92810
+ <button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
92811
+ </div>
92812
+
92813
+ <div class="anim-label">
92814
+ <span>
92815
+ <span class="bold">${out('Zoom')}</span>:
92816
+ </span>
92817
+ </div>
92818
+ <div class="flex-wrap">
92819
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
92820
+ <button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
92821
+ </div>
92822
+
92823
+ <div class="anim-label">
92824
+ <span>
92825
+ <span class="bold">${out('Pulse')}</span>:
92826
+ </span>
92827
+ </div>
92828
+ <div class="flex-wrap">
92829
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
92830
+ </div>
92831
+
92832
+ <div class="anim-label">
92833
+ <span>
92834
+ <span class="bold">${out('Bounce')}</span>:
92835
+ </span>
92836
+ </div>
92837
+ <div class="flex-wrap">
92838
+ <button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
92839
+ </div>
92657
92840
 
92658
- <div class="anim-label">
92659
- <span><span class="bold">Rotate Clockwise</span>: <input class="inp-rotate-clockwise" type="text" /></span> </span>
92660
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>
92661
- </div>
92662
- <div class="flex-wrap">
92663
- <button title="" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
92664
- <button title="" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
92665
- <button title="" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
92666
- <button title="" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
92667
- <button title="" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
92668
- </div>
92669
- <div class="anim-label">
92670
- <span><span class="bold">Rotate Counterclockwise</span>: <input class="inp-rotate-counter" type="text" /></span> </span>
92671
- <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>
92672
- </div>
92673
- <div class="flex-wrap">
92674
- <button title="" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
92675
- <button title="" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
92676
- <button title="" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
92677
- <button title="" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
92678
- <button title="" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
92841
+ <div class="anim-label">
92842
+ <span>
92843
+ <span class="bold">${out('Animation Delay')}</span>:
92844
+ </span>
92845
+ </div>
92846
+ <div class="flex-wrap">
92847
+ <button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:60px">0s</button>
92848
+ <button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:60px">0.1s</button>
92849
+ <button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:60px">0.2s</button>
92850
+ <button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:60px">0.3s</button>
92851
+ <button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:60px">0.4s</button>
92852
+ <button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:60px">0.5s</button>
92853
+ <button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:60px">0.6s</button>
92854
+ <button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:60px">0.7s</button>
92855
+ <button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:60px">0.8s</button>
92856
+ <button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:60px">0.9s</button>
92857
+ <button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:60px">1s</button>
92858
+ <button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:60px">1.1s</button>
92859
+ <button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:60px">1.2s</button>
92860
+ <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:60px">1.3s</button>
92861
+ <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:60px">1.4s</button>
92862
+ <button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
92863
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92864
+ </button>
92865
+ </div>
92866
+
92867
+ <br>
92868
+ <button title="${out('Animate Once')}" class="cmd-basic-once" style="width:165px;">
92869
+ ${out('Animate Once')}
92870
+ </button>
92871
+
92872
+ <br>
92873
+ <button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
92874
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92875
+ <span style="margin-left:7px">${out('Clear Animation')}</span></button>
92679
92876
  </div>
92680
- <div class="anim-label"><span class="bold">Fade</span> <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg></div>
92681
- <button title="" class="cmd-fade" data-command="fade" data-value="in" style="width:125px">Fade In</button>
92682
- <br>
92683
- <button title="" class="cmd-clear-scrollanim" style="width:195px">
92684
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92685
- <span style="margin-left:7px">Clear Animation</span></button>
92877
+
92686
92878
  </div>
92687
92879
 
92688
- <div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
92689
-
92690
- <div class="anim-label">${out('Start')}:</div>
92691
- <div class="flex-wrap">
92692
- <button title="" class="cmd-start on" data-command="start" data-value="data-bottom-top" style="width:80px">Normal</button>
92693
- <button title="" class="cmd-start" data-command="start" data-value="data-400-bottom" style="width:80px">Delayed</button>
92694
- <button title="" class="cmd-start" data-command="start" data-value="data-200-bottom" style="width:80px">Late</button>
92695
- <button title="" class="cmd-start" data-command="start" data-value="data--50-bottom" style="width:95px">Very Late</button>
92880
+ </div>
92881
+
92882
+ <div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="display:flex;padding-top:0">
92883
+
92884
+ <div class="anim-controls">
92885
+
92886
+ <div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
92887
+ <a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
92888
+ <a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
92889
+ <a href="" data-content="divAnimSettings">${out('Settings')}</a>
92696
92890
  </div>
92697
-
92698
- <div class="anim-label">${out('End')}:</div>
92699
- <div class="flex-wrap">
92700
- <button title="" class="cmd-end" data-command="end" data-value="data-bottom" style="width:95px">Very Soon</button>
92701
- <button title="" class="cmd-end" data-command="end" data-value="data-center-top" style="width:80px">Soon</button>
92702
- <button title="" class="cmd-end on" data-command="end" data-value="data-center" style="width:80px">Normal</button>
92703
- <!--<button title="" class="cmd-end" data-command="end" data-value="data-top-bottom" style="width:80px">Late</button>-->
92891
+
92892
+ <div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
92893
+
92894
+ <div class="anim-label">
92895
+ <span>
92896
+ <span class="bold">${out('Slide Left')}</span>:
92897
+ <input class="inp-slide-left" type="text" />
92898
+ </span>
92899
+ <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
92900
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92901
+ </button>
92902
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
92903
+ </div>
92904
+ <div class="flex-wrap">
92905
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
92906
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
92907
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
92908
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
92909
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
92910
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92911
+ </div>
92912
+ <div class="anim-label">
92913
+ <span>
92914
+ <span class="bold">${out('Slide Right')}</span>:
92915
+ <input class="inp-slide-right" type="text" />
92916
+ </span>
92917
+ <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
92918
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92919
+ </button>
92920
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
92921
+ </div>
92922
+ <div class="flex-wrap">
92923
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
92924
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
92925
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
92926
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
92927
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
92928
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92929
+ </div>
92930
+
92931
+ <div class="anim-label">
92932
+ <span>
92933
+ <span class="bold">${out('Slide Up')}</span>:
92934
+ <input class="inp-slide-up" type="text" />
92935
+ </span>
92936
+ <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
92937
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92938
+ </button>
92939
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
92940
+ </div>
92941
+ <div class="flex-wrap">
92942
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
92943
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
92944
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
92945
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
92946
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
92947
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92948
+ </div>
92949
+ <div class="anim-label">
92950
+ <span>
92951
+ <span class="bold">${out('Slide Down')}</span>:
92952
+ <input class="inp-slide-down" type="text" />
92953
+ </span>
92954
+ <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
92955
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92956
+ </button>
92957
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
92958
+ </div>
92959
+ <div class="flex-wrap">
92960
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
92961
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
92962
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
92963
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
92964
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
92965
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
92966
+ </div>
92967
+
92968
+ <div class="anim-label">
92969
+ <span>
92970
+ <span class="bold">${out('Scale')}</span>:
92971
+ <input class="inp-scale" type="text" />
92972
+ </span>
92973
+ <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
92974
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92975
+ </button>
92976
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
92977
+ </div>
92978
+ <div class="flex-nowrap">
92979
+ <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
92980
+ <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
92981
+ <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
92982
+ <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
92983
+ <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
92984
+ <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
92985
+ </div>
92986
+
92987
+ <div class="anim-label">
92988
+ <span>
92989
+ <span class="bold">${out('Rotate Clockwise')}</span>:
92990
+ <input class="inp-rotate-clockwise" type="text" />
92991
+ </span>
92992
+ <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
92993
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
92994
+ </button>
92995
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
92996
+ </div>
92997
+ <div class="flex-wrap">
92998
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
92999
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93000
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93001
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93002
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93003
+ </div>
93004
+ <div class="anim-label">
93005
+ <span>
93006
+ <span class="bold">${out('Rotate Counterclockwise')}</span>:
93007
+ <input class="inp-rotate-counter" type="text" />
93008
+ </span>
93009
+ <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93010
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93011
+ </button>
93012
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93013
+ </div>
93014
+ <div class="flex-wrap">
93015
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93016
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93017
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93018
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93019
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93020
+ </div>
93021
+
93022
+ <div class="anim-label">
93023
+ <span class="bold">${out('Fade')}</span>:
93024
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
93025
+ </div>
93026
+ <button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
93027
+
93028
+ <br>
93029
+ <button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
93030
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93031
+ <span style="margin-left:7px">${out('Clear Animation')}</span></button>
93032
+ </div>
93033
+
93034
+ <div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93035
+
93036
+ <div class="anim-label">
93037
+ <span>
93038
+ <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
93039
+ </span>
93040
+ <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
93041
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93042
+ </button>
93043
+ </div>
93044
+ <div class="flex-wrap">
93045
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
93046
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
93047
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
93048
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
93049
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
93050
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93051
+ </div>
93052
+ <div class="anim-label">
93053
+ <span>
93054
+ <span class="bold">${out('Slide Right')}</span>:
93055
+ <input class="inp-slide-right" type="text" />
93056
+ </span>
93057
+ <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
93058
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93059
+ </button>
93060
+ </div>
93061
+ <div class="flex-wrap">
93062
+ <button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
93063
+ <button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
93064
+ <button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
93065
+ <button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
93066
+ <button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
93067
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93068
+ </div>
93069
+
93070
+ <div class="anim-label">
93071
+ <span>
93072
+ <span class="bold">${out('Slide Up')}</span>:
93073
+ <input class="inp-slide-up" type="text" />
93074
+ </span>
93075
+ <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
93076
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93077
+ </button>
93078
+ </div>
93079
+ <div class="flex-wrap">
93080
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
93081
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
93082
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
93083
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
93084
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
93085
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93086
+ </div>
93087
+ <div class="anim-label">
93088
+ <span>
93089
+ <span class="bold">${out('Slide Down')}</span>:
93090
+ <input class="inp-slide-down" type="text" />
93091
+ </span>
93092
+ <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
93093
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93094
+ </button>
93095
+ </div>
93096
+ <div class="flex-wrap">
93097
+ <button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
93098
+ <button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
93099
+ <button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
93100
+ <button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
93101
+ <button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
93102
+ <span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
93103
+ </div>
93104
+
93105
+ <div class="anim-label">
93106
+ <span>
93107
+ <span class="bold">${out('Scale')}</span>:
93108
+ <input class="inp-scale" type="text" />
93109
+ </span>
93110
+ <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
93111
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93112
+ </button>
93113
+ </div>
93114
+ <div class="flex-nowrap">
93115
+ <button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
93116
+ <button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
93117
+ <button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
93118
+ <button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
93119
+ <button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
93120
+ <button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
93121
+ </div>
93122
+
93123
+ <div class="anim-label">
93124
+ <span>
93125
+ <span class="bold">${out('Rotate Clockwise')}</span>:
93126
+ <input class="inp-rotate-clockwise" type="text" />
93127
+ </span>
93128
+ <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
93129
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93130
+ </button>
93131
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
93132
+ </div>
93133
+ <div class="flex-wrap">
93134
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
93135
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
93136
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
93137
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
93138
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
93139
+ </div>
93140
+ <div class="anim-label">
93141
+ <span>
93142
+ <span class="bold">${out('Rotate Counterclockwise')}</span>:
93143
+ <input class="inp-rotate-counter" type="text" />
93144
+ </span>
93145
+ <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
93146
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93147
+ </button>
93148
+ <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
93149
+ </div>
93150
+ <div class="flex-wrap">
93151
+ <button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
93152
+ <button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
93153
+ <button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
93154
+ <button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
93155
+ <button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
93156
+ </div>
93157
+
93158
+ <div class="anim-label">
93159
+ <span class="bold">${out('Fade')}</span>:
93160
+ </div>
93161
+ <button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
93162
+
93163
+ <br>
93164
+ <button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
93165
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
93166
+ <span style="margin-left:7px">${out('Clear Animation')}</span></button>
92704
93167
  </div>
92705
93168
 
93169
+ <div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
93170
+
93171
+ <div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
93172
+
93173
+ <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93174
+ <div class="flex-wrap">
93175
+ <button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:80px">${out('Normal')}</button>
93176
+ <button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:80px">${out('Delayed')}</button>
93177
+ <button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:80px">${out('Late')}</button>
93178
+ <button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
93179
+ </div>
93180
+
93181
+ <div class="anim-label">${out('End')}:</div>
93182
+ <div class="flex-wrap">
93183
+ <button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
93184
+ <button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:80px">${out('Soon')}</button>
93185
+ <button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:80px">${out('Normal')}</button>
93186
+ </div>
93187
+
93188
+ <div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
92706
93189
 
93190
+ <div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
93191
+ <div class="flex-wrap">
93192
+ <button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:80px">${out('Normal')}</button>
93193
+ <button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:80px">${out('Delayed')}</button>
93194
+ <button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:80px">${out('Late')}</button>
93195
+ <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
93196
+ </div>
93197
+ </div>
93198
+
93199
+
92707
93200
  </div>
92708
93201
 
92709
-
92710
93202
  </div>
92711
93203
 
92712
93204
  <div class="dummy-elm"></div>
@@ -92714,8 +93206,12 @@ class AnimateScroll {
92714
93206
  </div>
92715
93207
  `;
92716
93208
  dom$1.appendHtml(builderStuff, html);
92717
- let modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
93209
+ const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
92718
93210
  this.modalAnimateScroll = modalAnimateScroll;
93211
+ const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
93212
+ this.divEnterAnim = divEnterAnim;
93213
+ const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
93214
+ this.divLeaveAnim = divLeaveAnim;
92719
93215
  const btnClose = modalAnimateScroll.querySelector('.is-side-close');
92720
93216
  btnClose.addEventListener('click', () => {
92721
93217
  this.close();
@@ -92731,6 +93227,75 @@ class AnimateScroll {
92731
93227
  btn.classList.add('on');
92732
93228
  this.read();
92733
93229
  });
93230
+ }); // Default
93231
+
93232
+ const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
93233
+ btns = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
93234
+ btns.forEach(btn => {
93235
+ btn.addEventListener('click', () => {
93236
+ if (btn.classList.contains('on')) {
93237
+ btn.classList.remove('on');
93238
+ btnAnimateOnce.classList.remove('on');
93239
+ this.applyBasic();
93240
+ return;
93241
+ }
93242
+
93243
+ let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
93244
+ elms.forEach(elm => {
93245
+ elm.classList.remove('on');
93246
+ });
93247
+ btn.classList.add('on');
93248
+ this.applyBasic();
93249
+ });
93250
+ });
93251
+ btns = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
93252
+ btns.forEach(btn => {
93253
+ btn.addEventListener('click', () => {
93254
+ if (btn.classList.contains('on')) {
93255
+ btn.classList.remove('on');
93256
+ this.applyDelay();
93257
+ return;
93258
+ }
93259
+
93260
+ let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
93261
+ elms.forEach(elm => {
93262
+ elm.classList.remove('on');
93263
+ });
93264
+ btn.classList.add('on');
93265
+ this.applyDelay();
93266
+ });
93267
+ });
93268
+ let btnClearDelay = modalAnimateScroll.querySelector('.cmd-clear-delay');
93269
+ btnClearDelay.addEventListener('click', () => {
93270
+ let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
93271
+ elms.forEach(elm => {
93272
+ elm.classList.remove('on');
93273
+ });
93274
+ this.applyDelay();
93275
+ });
93276
+ btnAnimateOnce.addEventListener('click', () => {
93277
+ if (btnAnimateOnce.classList.contains('on')) {
93278
+ btnAnimateOnce.classList.remove('on');
93279
+ } else {
93280
+ btnAnimateOnce.classList.add('on');
93281
+ }
93282
+
93283
+ this.applyBasic();
93284
+ });
93285
+ let btnClearBasicAnim = modalAnimateScroll.querySelector('.cmd-clear-basicanim');
93286
+ btnClearBasicAnim.addEventListener('click', () => {
93287
+ let activeElement;
93288
+ let target = this.getTarget();
93289
+ activeElement = target.element;
93290
+ if (!activeElement) return;
93291
+ this.builder.editor.saveForUndo();
93292
+ this.cleanupBasic(activeElement);
93293
+ this.cleanupDelay(activeElement);
93294
+ activeElement.classList.remove('is-inview');
93295
+ activeElement.removeAttribute('data-scroll');
93296
+ this.read(); //Trigger Change event
93297
+
93298
+ this.builder.settings.onChange();
92734
93299
  }); // Start
92735
93300
 
92736
93301
  btns = modalAnimateScroll.querySelectorAll('.cmd-start');
@@ -92755,13 +93320,25 @@ class AnimateScroll {
92755
93320
  btn.classList.add('on');
92756
93321
  this.apply();
92757
93322
  });
93323
+ }); // Leave Start
93324
+
93325
+ btns = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
93326
+ btns.forEach(btn => {
93327
+ btn.addEventListener('click', () => {
93328
+ let elms = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
93329
+ elms.forEach(elm => {
93330
+ elm.classList.remove('on');
93331
+ });
93332
+ btn.classList.add('on');
93333
+ this.apply();
93334
+ });
92758
93335
  }); // Slide X
92759
93336
 
92760
- btns = modalAnimateScroll.querySelectorAll('.cmd-slidex');
93337
+ btns = divEnterAnim.querySelectorAll('.cmd-slidex');
92761
93338
  btns.forEach(btn => {
92762
93339
  btn.addEventListener('click', () => {
92763
- const inpSlideLeft = modalAnimateScroll.querySelector('.inp-slide-right');
92764
- const inpSlideRight = modalAnimateScroll.querySelector('.inp-slide-left');
93340
+ const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
93341
+ const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
92765
93342
 
92766
93343
  if (btn.classList.contains('on')) {
92767
93344
  btn.classList.remove('on');
@@ -92771,51 +93348,51 @@ class AnimateScroll {
92771
93348
  return;
92772
93349
  }
92773
93350
 
92774
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
93351
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
92775
93352
  elms.forEach(elm => {
92776
93353
  elm.classList.remove('on');
92777
93354
  });
92778
93355
  btn.classList.add('on');
92779
93356
 
92780
93357
  if (btn.getAttribute('data-value').indexOf('-') !== -1) {
92781
- inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '');
93358
+ inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
92782
93359
  inpSlideRight.value = '';
92783
93360
  } else {
92784
- inpSlideRight.value = btn.getAttribute('data-value');
93361
+ inpSlideRight.value = btn.getAttribute('data-value').replace('px', '');
92785
93362
  inpSlideLeft.value = '';
92786
93363
  }
92787
93364
 
92788
93365
  this.apply();
92789
93366
  });
92790
93367
  });
92791
- const inpSlideLeft = modalAnimateScroll.querySelector('.inp-slide-right');
92792
- const inpSlideRight = modalAnimateScroll.querySelector('.inp-slide-left');
93368
+ const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
93369
+ const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
92793
93370
  inpSlideLeft.addEventListener('change', () => {
92794
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
93371
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
92795
93372
  elms.forEach(elm => {
92796
93373
  elm.classList.remove('on');
92797
93374
  });
92798
93375
  inpSlideRight.value = '';
92799
93376
  this.apply();
92800
- let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft.value}"]`);
93377
+ let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft.value}px"]`);
92801
93378
  if (btn) btn.classList.add('on');
92802
93379
  });
92803
93380
  inpSlideRight.addEventListener('change', () => {
92804
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
93381
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
92805
93382
  elms.forEach(elm => {
92806
93383
  elm.classList.remove('on');
92807
93384
  });
92808
93385
  inpSlideLeft.value = '';
92809
93386
  this.apply();
92810
- let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="${inpSlideRight.value}"]`);
93387
+ let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight.value}px"]`);
92811
93388
  if (btn) btn.classList.add('on');
92812
93389
  }); // Slide Y
92813
93390
 
92814
- btns = modalAnimateScroll.querySelectorAll('.cmd-slidey');
93391
+ btns = divEnterAnim.querySelectorAll('.cmd-slidey');
92815
93392
  btns.forEach(btn => {
92816
93393
  btn.addEventListener('click', () => {
92817
- const inpSlideUp = modalAnimateScroll.querySelector('.inp-slide-up');
92818
- const inpSlideDown = modalAnimateScroll.querySelector('.inp-slide-down');
93394
+ const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
93395
+ const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
92819
93396
 
92820
93397
  if (btn.classList.contains('on')) {
92821
93398
  btn.classList.remove('on');
@@ -92825,50 +93402,50 @@ class AnimateScroll {
92825
93402
  return;
92826
93403
  }
92827
93404
 
92828
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
93405
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
92829
93406
  elms.forEach(elm => {
92830
93407
  elm.classList.remove('on');
92831
93408
  });
92832
93409
  btn.classList.add('on');
92833
93410
 
92834
93411
  if (btn.getAttribute('data-value').indexOf('-') !== -1) {
92835
- inpSlideDown.value = btn.getAttribute('data-value').replace('-', '');
93412
+ inpSlideDown.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
92836
93413
  inpSlideUp.value = '';
92837
93414
  } else {
92838
- inpSlideUp.value = btn.getAttribute('data-value');
93415
+ inpSlideUp.value = btn.getAttribute('data-value').replace('px', '');
92839
93416
  inpSlideDown.value = '';
92840
93417
  }
92841
93418
 
92842
93419
  this.apply();
92843
93420
  });
92844
93421
  });
92845
- const inpSlideUp = modalAnimateScroll.querySelector('.inp-slide-up');
92846
- const inpSlideDown = modalAnimateScroll.querySelector('.inp-slide-down');
93422
+ const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
93423
+ const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
92847
93424
  inpSlideDown.addEventListener('change', () => {
92848
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
93425
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
92849
93426
  elms.forEach(elm => {
92850
93427
  elm.classList.remove('on');
92851
93428
  });
92852
93429
  inpSlideUp.value = '';
92853
93430
  this.apply();
92854
- let btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="-${inpSlideDown.value}"]`);
93431
+ let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideDown.value}px"]`);
92855
93432
  if (btn) btn.classList.add('on');
92856
93433
  });
92857
93434
  inpSlideUp.addEventListener('change', () => {
92858
- let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
93435
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
92859
93436
  elms.forEach(elm => {
92860
93437
  elm.classList.remove('on');
92861
93438
  });
92862
93439
  inpSlideDown.value = '';
92863
93440
  this.apply();
92864
- let btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="${inpSlideUp.value}"]`);
93441
+ let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${inpSlideUp.value}px"]`);
92865
93442
  if (btn) btn.classList.add('on');
92866
93443
  }); // Scale
92867
93444
 
92868
- btns = modalAnimateScroll.querySelectorAll('.cmd-scale');
93445
+ btns = divEnterAnim.querySelectorAll('.cmd-scale');
92869
93446
  btns.forEach(btn => {
92870
93447
  btn.addEventListener('click', () => {
92871
- const inpScale = modalAnimateScroll.querySelector('.inp-scale');
93448
+ const inpScale = divEnterAnim.querySelector('.inp-scale');
92872
93449
 
92873
93450
  if (btn.classList.contains('on')) {
92874
93451
  btn.classList.remove('on');
@@ -92877,7 +93454,7 @@ class AnimateScroll {
92877
93454
  return;
92878
93455
  }
92879
93456
 
92880
- let elms = modalAnimateScroll.querySelectorAll('.cmd-scale');
93457
+ let elms = divEnterAnim.querySelectorAll('.cmd-scale');
92881
93458
  elms.forEach(elm => {
92882
93459
  elm.classList.remove('on');
92883
93460
  });
@@ -92886,22 +93463,22 @@ class AnimateScroll {
92886
93463
  this.apply();
92887
93464
  });
92888
93465
  });
92889
- const inpScale = modalAnimateScroll.querySelector('.inp-scale');
93466
+ const inpScale = divEnterAnim.querySelector('.inp-scale');
92890
93467
  inpScale.addEventListener('change', () => {
92891
- let elms = modalAnimateScroll.querySelectorAll('.cmd-scale');
93468
+ let elms = divEnterAnim.querySelectorAll('.cmd-scale');
92892
93469
  elms.forEach(elm => {
92893
93470
  elm.classList.remove('on');
92894
93471
  });
92895
93472
  this.apply();
92896
- let btn = this.modalAnimateScroll.querySelector(`.cmd-scale[data-value="${inpScale.value}"]`);
93473
+ let btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${inpScale.value}"]`);
92897
93474
  if (btn) btn.classList.add('on');
92898
93475
  }); // Rotate
92899
93476
 
92900
- btns = modalAnimateScroll.querySelectorAll('.cmd-rotate');
93477
+ btns = divEnterAnim.querySelectorAll('.cmd-rotate');
92901
93478
  btns.forEach(btn => {
92902
93479
  btn.addEventListener('click', () => {
92903
- const inpRotateClockwise = modalAnimateScroll.querySelector('.inp-rotate-clockwise');
92904
- const inpRotateCounter = modalAnimateScroll.querySelector('.inp-rotate-counter');
93480
+ const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
93481
+ const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
92905
93482
 
92906
93483
  if (btn.classList.contains('on')) {
92907
93484
  btn.classList.remove('on');
@@ -92911,7 +93488,7 @@ class AnimateScroll {
92911
93488
  return;
92912
93489
  }
92913
93490
 
92914
- let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
93491
+ let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
92915
93492
  elms.forEach(elm => {
92916
93493
  elm.classList.remove('on');
92917
93494
  });
@@ -92928,30 +93505,30 @@ class AnimateScroll {
92928
93505
  this.apply();
92929
93506
  });
92930
93507
  });
92931
- const inpRotateClockwise = modalAnimateScroll.querySelector('.inp-rotate-clockwise');
92932
- const inpRotateCounter = modalAnimateScroll.querySelector('.inp-rotate-counter');
93508
+ const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
93509
+ const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
92933
93510
  inpRotateClockwise.addEventListener('change', () => {
92934
- let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
93511
+ let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
92935
93512
  elms.forEach(elm => {
92936
93513
  elm.classList.remove('on');
92937
93514
  });
92938
93515
  inpRotateCounter.value = '';
92939
93516
  this.apply();
92940
- let btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="-${inpRotateClockwise.value}"]`);
93517
+ let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateClockwise.value}"]`);
92941
93518
  if (btn) btn.classList.add('on');
92942
93519
  });
92943
93520
  inpRotateCounter.addEventListener('change', () => {
92944
- let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
93521
+ let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
92945
93522
  elms.forEach(elm => {
92946
93523
  elm.classList.remove('on');
92947
93524
  });
92948
93525
  inpRotateClockwise.value = '';
92949
93526
  this.apply();
92950
- let btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="${inpRotateCounter.value}"]`);
93527
+ let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${inpRotateCounter.value}"]`);
92951
93528
  if (btn) btn.classList.add('on');
92952
93529
  }); // Fade
92953
93530
 
92954
- let btnFade = modalAnimateScroll.querySelector('.cmd-fade');
93531
+ let btnFade = divEnterAnim.querySelector('.cmd-fade');
92955
93532
  btnFade.addEventListener('click', () => {
92956
93533
  if (btnFade.classList.contains('on')) {
92957
93534
  btnFade.classList.remove('on');
@@ -92962,17 +93539,115 @@ class AnimateScroll {
92962
93539
  this.apply();
92963
93540
  }); // Clear
92964
93541
 
92965
- let btnClear = modalAnimateScroll.querySelector('.cmd-clear-scrollanim');
93542
+ let btnClearSlideLeft = divEnterAnim.querySelector('.cmd-clear-slide-left');
93543
+ btnClearSlideLeft.addEventListener('click', () => {
93544
+ const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-left');
93545
+ if (inpSlideLeft.value === '') return;
93546
+ this.builder.editor.saveForUndo();
93547
+ inpSlideLeft.value = '';
93548
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
93549
+ elms.forEach(elm => {
93550
+ elm.classList.remove('on');
93551
+ });
93552
+ this.apply(); //Trigger Change event
93553
+
93554
+ this.builder.settings.onChange();
93555
+ });
93556
+ let btnClearSlideRight = divEnterAnim.querySelector('.cmd-clear-slide-right');
93557
+ btnClearSlideRight.addEventListener('click', () => {
93558
+ const inpSlideRight = divEnterAnim.querySelector('.inp-slide-right');
93559
+ if (inpSlideRight.value === '') return;
93560
+ this.builder.editor.saveForUndo();
93561
+ inpSlideRight.value = '';
93562
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
93563
+ elms.forEach(elm => {
93564
+ elm.classList.remove('on');
93565
+ });
93566
+ this.apply(); //Trigger Change event
93567
+
93568
+ this.builder.settings.onChange();
93569
+ });
93570
+ let btnClearSlideUp = divEnterAnim.querySelector('.cmd-clear-slide-up');
93571
+ btnClearSlideUp.addEventListener('click', () => {
93572
+ const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
93573
+ if (inpSlideUp.value === '') return;
93574
+ this.builder.editor.saveForUndo();
93575
+ inpSlideUp.value = '';
93576
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
93577
+ elms.forEach(elm => {
93578
+ elm.classList.remove('on');
93579
+ });
93580
+ this.apply(); //Trigger Change event
93581
+
93582
+ this.builder.settings.onChange();
93583
+ });
93584
+ let btnClearSlideDown = divEnterAnim.querySelector('.cmd-clear-slide-down');
93585
+ btnClearSlideDown.addEventListener('click', () => {
93586
+ const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
93587
+ if (inpSlideDown.value === '') return;
93588
+ this.builder.editor.saveForUndo();
93589
+ inpSlideDown.value = '';
93590
+ let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
93591
+ elms.forEach(elm => {
93592
+ elm.classList.remove('on');
93593
+ });
93594
+ this.apply(); //Trigger Change event
93595
+
93596
+ this.builder.settings.onChange();
93597
+ });
93598
+ let btnClearScale = divEnterAnim.querySelector('.cmd-clear-scale');
93599
+ btnClearScale.addEventListener('click', () => {
93600
+ this.builder.editor.saveForUndo();
93601
+ const inpScale = divEnterAnim.querySelector('.inp-scale');
93602
+ inpScale.value = '';
93603
+ let elms = divEnterAnim.querySelectorAll('.cmd-scale');
93604
+ elms.forEach(elm => {
93605
+ elm.classList.remove('on');
93606
+ });
93607
+ this.apply(); //Trigger Change event
93608
+
93609
+ this.builder.settings.onChange();
93610
+ });
93611
+ let btnClearRotateClockwise = divEnterAnim.querySelector('.cmd-clear-rotate-clockwise');
93612
+ btnClearRotateClockwise.addEventListener('click', () => {
93613
+ const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
93614
+ if (inpRotateCounter.value === '') return;
93615
+ this.builder.editor.saveForUndo();
93616
+ inpRotateCounter.value = '';
93617
+ let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
93618
+ elms.forEach(elm => {
93619
+ elm.classList.remove('on');
93620
+ });
93621
+ this.apply(); //Trigger Change event
93622
+
93623
+ this.builder.settings.onChange();
93624
+ });
93625
+ let btnClearRotateCounter = divEnterAnim.querySelector('.cmd-clear-rotate-counter');
93626
+ btnClearRotateCounter.addEventListener('click', () => {
93627
+ const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-counter');
93628
+ if (inpRotateClockwise.value === '') return;
93629
+ this.builder.editor.saveForUndo();
93630
+ inpRotateClockwise.value = '';
93631
+ let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
93632
+ elms.forEach(elm => {
93633
+ elm.classList.remove('on');
93634
+ });
93635
+ this.apply(); //Trigger Change event
93636
+
93637
+ this.builder.settings.onChange();
93638
+ });
93639
+ let btnClear = divEnterAnim.querySelector('.cmd-clear-scrollanim');
92966
93640
  btnClear.addEventListener('click', () => {
92967
93641
  let activeElement;
92968
93642
  let target = this.getTarget();
92969
93643
  activeElement = target.element;
92970
93644
  if (!activeElement) return;
92971
93645
  this.builder.editor.saveForUndo();
92972
- this.unselectSettings();
92973
93646
  this.cleanup(activeElement);
92974
93647
  activeElement.style.transform = '';
93648
+ activeElement.style.transition = '';
92975
93649
  activeElement.style.opacity = '';
93650
+ this.read();
92976
93651
 
92977
93652
  if (this.builder.win.skrollrr) {
92978
93653
  this.builder.win.skrollrr.refresh();
@@ -92980,111 +93655,618 @@ class AnimateScroll {
92980
93655
 
92981
93656
 
92982
93657
  this.builder.settings.onChange();
92983
- }); //Extend onContentClick
93658
+ }); // ------------- LEAVE --------------
93659
+ // Slide X
93660
+
93661
+ btns = divLeaveAnim.querySelectorAll('.cmd-slidex');
93662
+ btns.forEach(btn => {
93663
+ btn.addEventListener('click', () => {
93664
+ const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
93665
+ const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
93666
+
93667
+ if (btn.classList.contains('on')) {
93668
+ btn.classList.remove('on');
93669
+ inpSlideLeft_leave.value = '';
93670
+ inpSlideRight_leave.value = '';
93671
+ this.apply();
93672
+ return;
93673
+ }
93674
+
93675
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
93676
+ elms.forEach(elm => {
93677
+ elm.classList.remove('on');
93678
+ });
93679
+ btn.classList.add('on');
93680
+
93681
+ if (btn.getAttribute('data-value').indexOf('-') !== -1) {
93682
+ inpSlideLeft_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
93683
+ inpSlideRight_leave.value = '';
93684
+ } else {
93685
+ inpSlideRight_leave.value = btn.getAttribute('data-value').replace('px', '');
93686
+ inpSlideLeft_leave.value = '';
93687
+ }
93688
+
93689
+ this.apply();
93690
+ });
93691
+ });
93692
+ const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
93693
+ const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
93694
+ inpSlideLeft_leave.addEventListener('change', () => {
93695
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
93696
+ elms.forEach(elm => {
93697
+ elm.classList.remove('on');
93698
+ });
93699
+ inpSlideRight_leave.value = '';
93700
+ this.apply();
93701
+ let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft_leave.value}px"]`);
93702
+ if (btn) btn.classList.add('on');
93703
+ });
93704
+ inpSlideRight_leave.addEventListener('change', () => {
93705
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
93706
+ elms.forEach(elm => {
93707
+ elm.classList.remove('on');
93708
+ });
93709
+ inpSlideLeft_leave.value = '';
93710
+ this.apply();
93711
+ let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight_leave.value}px"]`);
93712
+ if (btn) btn.classList.add('on');
93713
+ }); // Slide Y
93714
+
93715
+ btns = divLeaveAnim.querySelectorAll('.cmd-slidey');
93716
+ btns.forEach(btn => {
93717
+ btn.addEventListener('click', () => {
93718
+ const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
93719
+ const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
93720
+
93721
+ if (btn.classList.contains('on')) {
93722
+ btn.classList.remove('on');
93723
+ inpSlideUp_leave.value = '';
93724
+ inpSlideDown_leave.value = '';
93725
+ this.apply();
93726
+ return;
93727
+ }
93728
+
93729
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
93730
+ elms.forEach(elm => {
93731
+ elm.classList.remove('on');
93732
+ });
93733
+ btn.classList.add('on');
93734
+
93735
+ if (btn.getAttribute('data-value').indexOf('-') !== -1) {
93736
+ inpSlideUp_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
93737
+ inpSlideDown_leave.value = '';
93738
+ } else {
93739
+ inpSlideDown_leave.value = btn.getAttribute('data-value').replace('px', '');
93740
+ inpSlideUp_leave.value = '';
93741
+ }
93742
+
93743
+ this.apply();
93744
+ });
93745
+ });
93746
+ const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
93747
+ const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
93748
+ inpSlideDown_leave.addEventListener('change', () => {
93749
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
93750
+ elms.forEach(elm => {
93751
+ elm.classList.remove('on');
93752
+ });
93753
+ inpSlideUp_leave.value = '';
93754
+ this.apply();
93755
+ let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${inpSlideDown_leave.value}px"]`);
93756
+ if (btn) btn.classList.add('on');
93757
+ });
93758
+ inpSlideUp_leave.addEventListener('change', () => {
93759
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
93760
+ elms.forEach(elm => {
93761
+ elm.classList.remove('on');
93762
+ });
93763
+ inpSlideDown_leave.value = '';
93764
+ this.apply();
93765
+ let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideUp_leave.value}px"]`);
93766
+ if (btn) btn.classList.add('on');
93767
+ }); // Scale
93768
+
93769
+ btns = divLeaveAnim.querySelectorAll('.cmd-scale');
93770
+ btns.forEach(btn => {
93771
+ btn.addEventListener('click', () => {
93772
+ const inpScale = divLeaveAnim.querySelector('.inp-scale');
93773
+
93774
+ if (btn.classList.contains('on')) {
93775
+ btn.classList.remove('on');
93776
+ inpScale.value = '';
93777
+ this.apply();
93778
+ return;
93779
+ }
93780
+
93781
+ let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
93782
+ elms.forEach(elm => {
93783
+ elm.classList.remove('on');
93784
+ });
93785
+ btn.classList.add('on');
93786
+ inpScale.value = btn.getAttribute('data-value');
93787
+ this.apply();
93788
+ });
93789
+ });
93790
+ const inpScale_leave = divLeaveAnim.querySelector('.inp-scale');
93791
+ inpScale_leave.addEventListener('change', () => {
93792
+ let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
93793
+ elms.forEach(elm => {
93794
+ elm.classList.remove('on');
93795
+ });
93796
+ this.apply();
93797
+ let btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${inpScale_leave.value}"]`);
93798
+ if (btn) btn.classList.add('on');
93799
+ }); // Rotate
93800
+
93801
+ btns = divLeaveAnim.querySelectorAll('.cmd-rotate');
93802
+ btns.forEach(btn => {
93803
+ btn.addEventListener('click', () => {
93804
+ const inpRotateClockwise = divLeaveAnim.querySelector('.inp-rotate-clockwise');
93805
+ const inpRotateCounter = divLeaveAnim.querySelector('.inp-rotate-counter');
93806
+
93807
+ if (btn.classList.contains('on')) {
93808
+ btn.classList.remove('on');
93809
+ inpRotateClockwise.value = '';
93810
+ inpRotateCounter.value = '';
93811
+ this.apply();
93812
+ return;
93813
+ }
93814
+
93815
+ let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
93816
+ elms.forEach(elm => {
93817
+ elm.classList.remove('on');
93818
+ });
93819
+ btn.classList.add('on');
93820
+
93821
+ if (btn.getAttribute('data-value').indexOf('-') !== -1) {
93822
+ inpRotateCounter.value = btn.getAttribute('data-value').replace('-', '');
93823
+ inpRotateClockwise.value = '';
93824
+ } else {
93825
+ inpRotateClockwise.value = btn.getAttribute('data-value');
93826
+ inpRotateCounter.value = '';
93827
+ }
93828
+
93829
+ this.apply();
93830
+ });
93831
+ });
93832
+ const inpRotateClockwise_leave = divLeaveAnim.querySelector('.inp-rotate-clockwise');
93833
+ const inpRotateCounter_leave = divLeaveAnim.querySelector('.inp-rotate-counter');
93834
+ inpRotateClockwise_leave.addEventListener('change', () => {
93835
+ let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
93836
+ elms.forEach(elm => {
93837
+ elm.classList.remove('on');
93838
+ });
93839
+ inpRotateCounter_leave.value = '';
93840
+ this.apply();
93841
+ let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${inpRotateClockwise_leave.value}"]`);
93842
+ if (btn) btn.classList.add('on');
93843
+ });
93844
+ inpRotateCounter_leave.addEventListener('change', () => {
93845
+ let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
93846
+ elms.forEach(elm => {
93847
+ elm.classList.remove('on');
93848
+ });
93849
+ inpRotateClockwise_leave.value = '';
93850
+ this.apply();
93851
+ let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateCounter_leave.value}"]`);
93852
+ if (btn) btn.classList.add('on');
93853
+ }); // Fade
93854
+
93855
+ let btnFade_leave = divLeaveAnim.querySelector('.cmd-fade');
93856
+ btnFade_leave.addEventListener('click', () => {
93857
+ if (btnFade_leave.classList.contains('on')) {
93858
+ btnFade_leave.classList.remove('on');
93859
+ } else {
93860
+ btnFade_leave.classList.add('on');
93861
+ }
93862
+
93863
+ this.apply();
93864
+ }); // Clear
93865
+
93866
+ let btnClearSlideLeft_leave = divLeaveAnim.querySelector('.cmd-clear-slide-left');
93867
+ btnClearSlideLeft_leave.addEventListener('click', () => {
93868
+ const inpSlideLeft = divLeaveAnim.querySelector('.inp-slide-left');
93869
+ if (inpSlideLeft.value === '') return;
93870
+ this.builder.editor.saveForUndo();
93871
+ inpSlideLeft.value = '';
93872
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
93873
+ elms.forEach(elm => {
93874
+ elm.classList.remove('on');
93875
+ });
93876
+ this.apply(); //Trigger Change event
93877
+
93878
+ this.builder.settings.onChange();
93879
+ });
93880
+ let btnClearSlideRight_leave = divLeaveAnim.querySelector('.cmd-clear-slide-right');
93881
+ btnClearSlideRight_leave.addEventListener('click', () => {
93882
+ const inpSlideRight = divLeaveAnim.querySelector('.inp-slide-right');
93883
+ if (inpSlideRight.value === '') return;
93884
+ this.builder.editor.saveForUndo();
93885
+ inpSlideRight.value = '';
93886
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
93887
+ elms.forEach(elm => {
93888
+ elm.classList.remove('on');
93889
+ });
93890
+ this.apply(); //Trigger Change event
93891
+
93892
+ this.builder.settings.onChange();
93893
+ });
93894
+ let btnClearSlideUp_leave = divLeaveAnim.querySelector('.cmd-clear-slide-up');
93895
+ btnClearSlideUp_leave.addEventListener('click', () => {
93896
+ const inpSlideUp = divLeaveAnim.querySelector('.inp-slide-up');
93897
+ if (inpSlideUp.value === '') return;
93898
+ this.builder.editor.saveForUndo();
93899
+ inpSlideUp.value = '';
93900
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
93901
+ elms.forEach(elm => {
93902
+ elm.classList.remove('on');
93903
+ });
93904
+ this.apply(); //Trigger Change event
93905
+
93906
+ this.builder.settings.onChange();
93907
+ });
93908
+ let btnClearSlideDown_leave = divLeaveAnim.querySelector('.cmd-clear-slide-down');
93909
+ btnClearSlideDown_leave.addEventListener('click', () => {
93910
+ const inpSlideDown = divLeaveAnim.querySelector('.inp-slide-down');
93911
+ if (inpSlideDown.value === '') return;
93912
+ this.builder.editor.saveForUndo();
93913
+ inpSlideDown.value = '';
93914
+ let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
93915
+ elms.forEach(elm => {
93916
+ elm.classList.remove('on');
93917
+ });
93918
+ this.apply(); //Trigger Change event
93919
+
93920
+ this.builder.settings.onChange();
93921
+ });
93922
+ let btnClearScale_leave = divLeaveAnim.querySelector('.cmd-clear-scale');
93923
+ btnClearScale_leave.addEventListener('click', () => {
93924
+ this.builder.editor.saveForUndo();
93925
+ const inpScale = divLeaveAnim.querySelector('.inp-scale');
93926
+ inpScale.value = '';
93927
+ let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
93928
+ elms.forEach(elm => {
93929
+ elm.classList.remove('on');
93930
+ });
93931
+ this.apply(); //Trigger Change event
93932
+
93933
+ this.builder.settings.onChange();
93934
+ });
93935
+ let btnClearRotateClockwise_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-clockwise');
93936
+ btnClearRotateClockwise_leave.addEventListener('click', () => {
93937
+ const inpRotateCounter = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
93938
+ if (inpRotateCounter.value === '') return;
93939
+ this.builder.editor.saveForUndo();
93940
+ inpRotateCounter.value = '';
93941
+ let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
93942
+ elms.forEach(elm => {
93943
+ elm.classList.remove('on');
93944
+ });
93945
+ this.apply(); //Trigger Change event
93946
+
93947
+ this.builder.settings.onChange();
93948
+ });
93949
+ let btnClearRotateCounter_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-counter');
93950
+ btnClearRotateCounter_leave.addEventListener('click', () => {
93951
+ const inpRotateClockwise = this.divLeaveAnim.querySelector('.inp-rotate-counter');
93952
+ if (inpRotateClockwise.value === '') return;
93953
+ this.builder.editor.saveForUndo();
93954
+ inpRotateClockwise.value = '';
93955
+ let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
93956
+ elms.forEach(elm => {
93957
+ elm.classList.remove('on');
93958
+ });
93959
+ this.apply(); //Trigger Change event
93960
+
93961
+ this.builder.settings.onChange();
93962
+ });
93963
+ let btnClear_leave = divLeaveAnim.querySelector('.cmd-clear-scrollanim');
93964
+ btnClear_leave.addEventListener('click', () => {
93965
+ let activeElement;
93966
+ let target = this.getTarget();
93967
+ activeElement = target.element;
93968
+ if (!activeElement) return;
93969
+ this.builder.editor.saveForUndo();
93970
+ this.cleanup_leave(activeElement);
93971
+ activeElement.style.transform = '';
93972
+ activeElement.style.transition = '';
93973
+ activeElement.style.opacity = '';
93974
+ this.read();
93975
+
93976
+ if (this.builder.win.skrollrr) {
93977
+ this.builder.win.skrollrr.refresh();
93978
+ } //Trigger Change event
93979
+
93980
+
93981
+ this.builder.settings.onChange();
93982
+ }); // ---
93983
+ //Extend onContentClick
92984
93984
 
92985
93985
  let old = this.builder.settings.onContentClick;
92986
93986
 
92987
93987
  this.builder.settings.onContentClick = () => {
92988
93988
  if (old) old.call(this); // call user's defined onRender
92989
93989
 
93990
+ if (!this.modalAnimateScroll.classList.contains('active')) return;
92990
93991
  setTimeout(() => {
92991
- this.read();
93992
+ this.clickContent();
92992
93993
  }, 30);
92993
93994
  };
92994
93995
  }
92995
93996
 
92996
- unselectSettings() {
92997
- let elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidex');
93997
+ clickContent() {
93998
+ let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
93999
+ elms.forEach(elm => {
94000
+ elm.classList.remove('on');
94001
+ }); // Dynamically choose target based on selected element
94002
+
94003
+ let currentTarget = this.readTarget();
94004
+
94005
+ if (currentTarget) {
94006
+ if (currentTarget.name === 'element' || currentTarget.name === 'inspectedElement') {
94007
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
94008
+ btn.classList.add('on');
94009
+ } else if (currentTarget.name === 'column') {
94010
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=column]');
94011
+ btn.classList.add('on');
94012
+ } else if (currentTarget.name === 'row') {
94013
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=row]');
94014
+ btn.classList.add('on');
94015
+ } else if (currentTarget.name === 'container') {
94016
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=container]');
94017
+ btn.classList.add('on');
94018
+ }
94019
+ } else {
94020
+ // no animation on the selected element
94021
+ const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
94022
+ btn.classList.add('on');
94023
+ }
94024
+
94025
+ this.read();
94026
+ }
94027
+
94028
+ clearSettings() {
94029
+ let elms;
94030
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
94031
+ elms.forEach(elm => {
94032
+ elm.classList.remove('on');
94033
+ });
94034
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
94035
+ elms.forEach(elm => {
94036
+ elm.classList.remove('on');
94037
+ });
94038
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-start');
92998
94039
  elms.forEach(elm => {
92999
94040
  elm.classList.remove('on');
93000
94041
  });
93001
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidey');
94042
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-end');
93002
94043
  elms.forEach(elm => {
93003
94044
  elm.classList.remove('on');
93004
94045
  });
93005
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-scale');
94046
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
94047
+ elms.forEach(elm => {
94048
+ elm.classList.remove('on');
94049
+ }); // ---
94050
+
94051
+ elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
93006
94052
  elms.forEach(elm => {
93007
94053
  elm.classList.remove('on');
93008
94054
  });
93009
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-rotate');
94055
+ elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
93010
94056
  elms.forEach(elm => {
93011
94057
  elm.classList.remove('on');
93012
94058
  });
93013
- let btn = this.modalAnimateScroll.querySelector('.cmd-fade');
93014
- btn.classList.remove('on');
94059
+ elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
94060
+ elms.forEach(elm => {
94061
+ elm.classList.remove('on');
94062
+ });
94063
+ elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
94064
+ elms.forEach(elm => {
94065
+ elm.classList.remove('on');
94066
+ });
94067
+ let btn = this.divEnterAnim.querySelector('.cmd-fade');
94068
+ btn.classList.remove('on'); // --- LEAVE ---
94069
+
94070
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
94071
+ elms.forEach(elm => {
94072
+ elm.classList.remove('on');
94073
+ });
94074
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
94075
+ elms.forEach(elm => {
94076
+ elm.classList.remove('on');
94077
+ });
94078
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
94079
+ elms.forEach(elm => {
94080
+ elm.classList.remove('on');
94081
+ });
94082
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
94083
+ elms.forEach(elm => {
94084
+ elm.classList.remove('on');
94085
+ });
94086
+ btn = this.divLeaveAnim.querySelector('.cmd-fade');
94087
+ btn.classList.remove('on'); // ---
94088
+
94089
+ const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
94090
+ const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
94091
+ const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
94092
+ const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
94093
+ inpSlideLeft.value = '';
94094
+ inpSlideRight.value = '';
94095
+ inpSlideUp.value = '';
94096
+ inpSlideDown.value = '';
94097
+ const inpScale = this.divEnterAnim.querySelector('.inp-scale');
94098
+ inpScale.value = '';
94099
+ const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
94100
+ const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
94101
+ inpRotateCounter.value = '';
94102
+ inpRotateClockwise.value = '';
94103
+ const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
94104
+ const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
94105
+ const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
94106
+ const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
94107
+ inpSlideLeft_leave.value = '';
94108
+ inpSlideRight_leave.value = '';
94109
+ inpSlideUp_leave.value = '';
94110
+ inpSlideDown_leave.value = '';
94111
+ const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
94112
+ inpScale_leave.value = '';
94113
+ const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
94114
+ const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
94115
+ inpRotateCounter_leave.value = '';
94116
+ inpRotateClockwise_leave.value = '';
93015
94117
  }
93016
94118
 
93017
94119
  read() {
93018
94120
  // clear
93019
- this.unselectSettings();
94121
+ this.clearSettings();
93020
94122
  let activeElement;
93021
94123
  let target = this.getTarget();
93022
94124
  activeElement = target.element;
93023
- if (!activeElement) return; // console.log(activeElement)
93024
- // start
94125
+ if (!activeElement) return; // Default
94126
+
94127
+ let btnBasic;
94128
+ if (activeElement.classList.contains('is-fadeIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeIn"]');
94129
+ if (activeElement.classList.contains('is-fadeInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInUp"]');
94130
+ if (activeElement.classList.contains('is-fadeInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInDown"]');
94131
+ if (activeElement.classList.contains('is-fadeInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInLeft"]');
94132
+ if (activeElement.classList.contains('is-fadeInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInRight"]');
94133
+ if (activeElement.classList.contains('is-zoomIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomIn"]');
94134
+ if (activeElement.classList.contains('is-zoomOut')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomOut"]');
94135
+ if (activeElement.classList.contains('is-slideInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInUp"]');
94136
+ if (activeElement.classList.contains('is-slideInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInDown"]');
94137
+ if (activeElement.classList.contains('is-slideInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInLeft"]');
94138
+ if (activeElement.classList.contains('is-slideInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInRight"]');
94139
+ if (activeElement.classList.contains('is-flipInX')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInX"]');
94140
+ if (activeElement.classList.contains('is-flipInY')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInY"]');
94141
+ if (activeElement.classList.contains('is-pulse')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-pulse"]');
94142
+ if (activeElement.classList.contains('is-bounceIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-bounceIn"]');
94143
+ if (btnBasic) btnBasic.classList.add('on');
94144
+ let btnDelay;
94145
+ if (activeElement.classList.contains('delay-0ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-0ms"]');
94146
+ if (activeElement.classList.contains('delay-100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-100ms"]');
94147
+ if (activeElement.classList.contains('delay-200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-200ms"]');
94148
+ if (activeElement.classList.contains('delay-300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-300ms"]');
94149
+ if (activeElement.classList.contains('delay-400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-400ms"]');
94150
+ if (activeElement.classList.contains('delay-500ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-500ms"]');
94151
+ if (activeElement.classList.contains('delay-600ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-600ms"]');
94152
+ if (activeElement.classList.contains('delay-700ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-700ms"]');
94153
+ if (activeElement.classList.contains('delay-800ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-800ms"]');
94154
+ if (activeElement.classList.contains('delay-900ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-900ms"]');
94155
+ if (activeElement.classList.contains('delay-1000ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1000ms"]');
94156
+ if (activeElement.classList.contains('delay-1100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1100ms"]');
94157
+ if (activeElement.classList.contains('delay-1200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1200ms"]');
94158
+ if (activeElement.classList.contains('delay-1300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1300ms"]');
94159
+ if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
94160
+ if (btnDelay) btnDelay.classList.add('on');
94161
+ const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
94162
+ if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // enter start
93025
94163
 
93026
94164
  let css1 = activeElement.getAttribute('data-bottom-top');
93027
94165
  if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
93028
94166
  if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
93029
- if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // end
94167
+ if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
94168
+
94169
+ let css2 = activeElement.getAttribute('data-top-bottom');
94170
+ let btn;
94171
+
94172
+ if (activeElement.hasAttribute('data-bottom-top')) {
94173
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
94174
+ if (btn) btn.classList.add('on');
94175
+ }
94176
+
94177
+ if (activeElement.hasAttribute('data-400-bottom')) {
94178
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-400-bottom"]');
94179
+ if (btn) btn.classList.add('on');
94180
+ }
94181
+
94182
+ if (activeElement.hasAttribute('data-200-bottom')) {
94183
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-200-bottom"]');
94184
+ if (btn) btn.classList.add('on');
94185
+ }
94186
+
94187
+ if (activeElement.hasAttribute('data--50-bottom')) {
94188
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data--50-bottom"]');
94189
+ if (btn) btn.classList.add('on');
94190
+ }
94191
+
94192
+ if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
94193
+ // default
94194
+ btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
94195
+ if (btn) btn.classList.add('on');
94196
+ }
94197
+
94198
+ if (activeElement.hasAttribute('data-bottom')) {
94199
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-bottom"]');
94200
+ if (btn) btn.classList.add('on');
94201
+ }
94202
+
94203
+ if (activeElement.hasAttribute('data-center-top')) {
94204
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center-top"]');
94205
+ if (btn) btn.classList.add('on');
94206
+ }
94207
+
94208
+ if (activeElement.hasAttribute('data-center')) {
94209
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
94210
+ if (btn) btn.classList.add('on');
94211
+ }
94212
+
94213
+ if (activeElement.hasAttribute('data-top-bottom')) {
94214
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-top-bottom"]');
94215
+ if (btn) btn.classList.add('on');
94216
+ }
93030
94217
 
93031
- let css2 = activeElement.getAttribute('data-bottom');
93032
- if (!css2) css2 = activeElement.getAttribute('data-center-top');
93033
- if (!css2) css2 = activeElement.getAttribute('data-center'); // if(!css2) css2 = activeElement.getAttribute('data-top-bottom');
94218
+ if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
94219
+ // default
94220
+ btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
94221
+ if (btn) btn.classList.add('on');
94222
+ }
93034
94223
 
93035
94224
  let dummyElm = document.querySelector('.dummy-elm');
93036
94225
  dummyElm.style.cssText = css1;
93037
94226
  let transform = this.getTransform(dummyElm, css1); // console.log(transform);
93038
94227
 
93039
- let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
94228
+ btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
93040
94229
  if (btn) btn.classList.add('on');
93041
- btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
94230
+ btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
93042
94231
  if (btn) btn.classList.add('on');
93043
- btn = this.modalAnimateScroll.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
94232
+ btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
93044
94233
  if (btn) btn.classList.add('on');
93045
94234
 
93046
94235
  if (transform.rotate) {
93047
- btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
94236
+ btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
93048
94237
  if (btn) btn.classList.add('on');
93049
94238
  }
93050
94239
 
93051
- const inpSlideLeft = this.modalAnimateScroll.querySelector('.inp-slide-right');
93052
- const inpSlideRight = this.modalAnimateScroll.querySelector('.inp-slide-left');
93053
- inpSlideLeft.value = '';
93054
- inpSlideRight.value = '';
94240
+ const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
94241
+ const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
93055
94242
 
93056
94243
  if (transform.translateX) {
93057
94244
  if (transform.translateX.indexOf('-') !== -1) {
93058
- inpSlideLeft.value = transform.translateX.replace('-', '');
94245
+ inpSlideRight.value = transform.translateX.replace('-', '').replace('px', '');
93059
94246
  } else {
93060
- inpSlideRight.value = transform.translateX;
94247
+ inpSlideLeft.value = transform.translateX.replace('px', '');
93061
94248
  }
93062
94249
  }
93063
94250
 
93064
- const inpSlideUp = this.modalAnimateScroll.querySelector('.inp-slide-up');
93065
- const inpSlideDown = this.modalAnimateScroll.querySelector('.inp-slide-down');
93066
- inpSlideUp.value = '';
93067
- inpSlideDown.value = '';
94251
+ const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
94252
+ const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
93068
94253
 
93069
94254
  if (transform.translateY) {
93070
94255
  if (transform.translateY.indexOf('-') !== -1) {
93071
- inpSlideDown.value = transform.translateY.replace('-', '');
94256
+ inpSlideDown.value = transform.translateY.replace('-', '').replace('px', '');
93072
94257
  } else {
93073
- inpSlideUp.value = transform.translateY;
94258
+ inpSlideUp.value = transform.translateY.replace('px', '');
93074
94259
  }
93075
94260
  }
93076
94261
 
93077
- const inpScale = this.modalAnimateScroll.querySelector('.inp-scale');
93078
- inpScale.value = '';
94262
+ const inpScale = this.divEnterAnim.querySelector('.inp-scale');
93079
94263
 
93080
94264
  if (transform.scale) {
93081
94265
  inpScale.value = transform.scale;
93082
94266
  }
93083
94267
 
93084
- const inpRotateCounter = this.modalAnimateScroll.querySelector('.inp-rotate-counter');
93085
- const inpRotateClockwise = this.modalAnimateScroll.querySelector('.inp-rotate-clockwise');
93086
- inpRotateCounter.value = '';
93087
- inpRotateClockwise.value = '';
94268
+ const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
94269
+ const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
93088
94270
 
93089
94271
  if (transform.rotate) {
93090
94272
  if (transform.rotate.indexOf('-') !== -1) {
@@ -93095,9 +94277,214 @@ class AnimateScroll {
93095
94277
  }
93096
94278
 
93097
94279
  if (transform.opacity) {
93098
- btn = this.modalAnimateScroll.querySelector('.cmd-fade');
94280
+ btn = this.divEnterAnim.querySelector('.cmd-fade');
94281
+ if (btn) btn.classList.add('on');
94282
+ } // --- LEAVE ---
94283
+
94284
+
94285
+ if (activeElement.hasAttribute('data-center-bottom')) {
94286
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
93099
94287
  if (btn) btn.classList.add('on');
93100
94288
  }
94289
+
94290
+ if (activeElement.hasAttribute('data-100-top')) {
94291
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-100-top"]');
94292
+ if (btn) btn.classList.add('on');
94293
+ }
94294
+
94295
+ if (activeElement.hasAttribute('data-50-top')) {
94296
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-50-top"]');
94297
+ if (btn) btn.classList.add('on');
94298
+ }
94299
+
94300
+ if (activeElement.hasAttribute('data-top')) {
94301
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-top"]');
94302
+ if (btn) btn.classList.add('on');
94303
+ }
94304
+
94305
+ if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
94306
+ // default
94307
+ btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
94308
+ if (btn) btn.classList.add('on');
94309
+ }
94310
+
94311
+ dummyElm.style.cssText = css2;
94312
+ transform = this.getTransform(dummyElm, css2); // console.log(transform);
94313
+
94314
+ btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
94315
+ if (btn) btn.classList.add('on');
94316
+ btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
94317
+ if (btn) btn.classList.add('on');
94318
+ btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
94319
+ if (btn) btn.classList.add('on');
94320
+
94321
+ if (transform.rotate) {
94322
+ btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
94323
+ if (btn) btn.classList.add('on');
94324
+ }
94325
+
94326
+ const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
94327
+ const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
94328
+
94329
+ if (transform.translateX) {
94330
+ if (transform.translateX.indexOf('-') !== -1) {
94331
+ inpSlideLeft_leave.value = transform.translateX.replace('-', '').replace('px', '');
94332
+ } else {
94333
+ inpSlideRight_leave.value = transform.translateX.replace('px', '');
94334
+ }
94335
+ }
94336
+
94337
+ const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
94338
+ const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
94339
+
94340
+ if (transform.translateY) {
94341
+ if (transform.translateY.indexOf('-') !== -1) {
94342
+ inpSlideUp_leave.value = transform.translateY.replace('-', '').replace('px', '');
94343
+ } else {
94344
+ inpSlideDown_leave.value = transform.translateY.replace('px', '');
94345
+ }
94346
+ }
94347
+
94348
+ const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
94349
+
94350
+ if (transform.scale) {
94351
+ inpScale_leave.value = transform.scale;
94352
+ }
94353
+
94354
+ const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
94355
+ const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
94356
+
94357
+ if (transform.rotate) {
94358
+ if (transform.rotate.indexOf('-') !== -1) {
94359
+ inpRotateCounter_leave.value = transform.rotate.replace('-', '');
94360
+ } else {
94361
+ inpRotateClockwise_leave.value = transform.rotate;
94362
+ }
94363
+ }
94364
+
94365
+ if (transform.opacity) {
94366
+ btn = this.divLeaveAnim.querySelector('.cmd-fade');
94367
+ if (btn) btn.classList.add('on');
94368
+ }
94369
+
94370
+ return true;
94371
+ }
94372
+
94373
+ cleanupBasic(activeElement) {
94374
+ activeElement.classList.remove('is-animated');
94375
+ activeElement.classList.remove('once');
94376
+ activeElement.classList.remove('is-fadeIn');
94377
+ activeElement.classList.remove('is-fadeInUp');
94378
+ activeElement.classList.remove('is-fadeInDown');
94379
+ activeElement.classList.remove('is-fadeInLeft');
94380
+ activeElement.classList.remove('is-fadeInRight');
94381
+ activeElement.classList.remove('is-zoomIn');
94382
+ activeElement.classList.remove('is-zoomOut');
94383
+ activeElement.classList.remove('is-slideInUp');
94384
+ activeElement.classList.remove('is-slideInDown');
94385
+ activeElement.classList.remove('is-slideInLeft');
94386
+ activeElement.classList.remove('is-slideInRight');
94387
+ activeElement.classList.remove('is-flipInX');
94388
+ activeElement.classList.remove('is-flipInY');
94389
+ activeElement.classList.remove('is-pulse');
94390
+ activeElement.classList.remove('is-bounceIn');
94391
+ }
94392
+
94393
+ cleanupDelay(activeElement) {
94394
+ activeElement.classList.remove('delay-0ms');
94395
+ activeElement.classList.remove('delay-100ms');
94396
+ activeElement.classList.remove('delay-200ms');
94397
+ activeElement.classList.remove('delay-300ms');
94398
+ activeElement.classList.remove('delay-400ms');
94399
+ activeElement.classList.remove('delay-500ms');
94400
+ activeElement.classList.remove('delay-600ms');
94401
+ activeElement.classList.remove('delay-700ms');
94402
+ activeElement.classList.remove('delay-800ms');
94403
+ activeElement.classList.remove('delay-900ms');
94404
+ activeElement.classList.remove('delay-1000ms');
94405
+ activeElement.classList.remove('delay-1100ms');
94406
+ activeElement.classList.remove('delay-1200ms');
94407
+ activeElement.classList.remove('delay-1300ms');
94408
+ activeElement.classList.remove('delay-1400ms');
94409
+ activeElement.classList.remove('delay-1500ms');
94410
+ activeElement.classList.remove('delay-1600ms');
94411
+ activeElement.classList.remove('delay-1700ms');
94412
+ activeElement.classList.remove('delay-1800ms');
94413
+ activeElement.classList.remove('delay-1900ms');
94414
+ activeElement.classList.remove('delay-2000ms');
94415
+ activeElement.classList.remove('delay-2100ms');
94416
+ activeElement.classList.remove('delay-2200ms');
94417
+ activeElement.classList.remove('delay-2300ms');
94418
+ activeElement.classList.remove('delay-2400ms');
94419
+ activeElement.classList.remove('delay-2500ms');
94420
+ activeElement.classList.remove('delay-2600ms');
94421
+ activeElement.classList.remove('delay-2700ms');
94422
+ activeElement.classList.remove('delay-2800ms');
94423
+ activeElement.classList.remove('delay-2900ms');
94424
+ activeElement.classList.remove('delay-3000ms');
94425
+ activeElement.style.transitionDelay = '';
94426
+ activeElement.style.animationDelay = '';
94427
+ }
94428
+
94429
+ applyDelay() {
94430
+ let activeElement;
94431
+ let target = this.getTarget();
94432
+ activeElement = target.element;
94433
+ if (!activeElement) return;
94434
+ let valDelay;
94435
+ let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
94436
+ elms.forEach(elm => {
94437
+ if (elm.classList.contains('on')) {
94438
+ valDelay = elm.getAttribute('data-value');
94439
+ }
94440
+ });
94441
+ this.builder.editor.saveForUndo();
94442
+ this.cleanupDelay(activeElement);
94443
+ activeElement.classList.remove('is-inview');
94444
+ setTimeout(() => {
94445
+ if (valDelay) activeElement.classList.add(valDelay);
94446
+ setTimeout(() => {
94447
+ activeElement.classList.add('is-inview');
94448
+ }, 10);
94449
+ }, 10); //Trigger Change event
94450
+
94451
+ this.builder.settings.onChange();
94452
+ }
94453
+
94454
+ applyBasic() {
94455
+ let activeElement;
94456
+ let target = this.getTarget();
94457
+ activeElement = target.element;
94458
+ if (!activeElement) return;
94459
+ let val;
94460
+ let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
94461
+ elms.forEach(elm => {
94462
+ if (elm.classList.contains('on')) {
94463
+ val = elm.getAttribute('data-value');
94464
+ }
94465
+ });
94466
+ let once = false;
94467
+ const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
94468
+ if (btnAnimateOnce.classList.contains('on')) once = true;
94469
+ this.builder.editor.saveForUndo();
94470
+ this.cleanupBasic(activeElement);
94471
+
94472
+ if (val) {
94473
+ activeElement.classList.remove('is-inview');
94474
+ activeElement.classList.remove('once');
94475
+ setTimeout(() => {
94476
+ activeElement.classList.add(val);
94477
+ if (once) activeElement.classList.add('once');
94478
+ activeElement.classList.add('is-animated'); // activeElement.classList.add('is-inview');
94479
+
94480
+ setTimeout(() => {
94481
+ activeElement.classList.add('is-inview');
94482
+ }, 10);
94483
+ }, 10);
94484
+ } //Trigger Change event
94485
+
94486
+
94487
+ this.builder.settings.onChange();
93101
94488
  }
93102
94489
 
93103
94490
  apply() {
@@ -93106,53 +94493,53 @@ class AnimateScroll {
93106
94493
  activeElement = target.element;
93107
94494
  if (!activeElement) return;
93108
94495
  let valX;
93109
- let elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidex');
94496
+ let elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
93110
94497
  elms.forEach(elm => {
93111
94498
  if (elm.classList.contains('on')) {
93112
94499
  valX = elm.getAttribute('data-value');
93113
94500
  }
93114
94501
  });
93115
94502
  let valY;
93116
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidey');
94503
+ elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
93117
94504
  elms.forEach(elm => {
93118
94505
  if (elm.classList.contains('on')) {
93119
94506
  valY = elm.getAttribute('data-value');
93120
94507
  }
93121
94508
  });
93122
94509
  let scale;
93123
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-scale');
94510
+ elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
93124
94511
  elms.forEach(elm => {
93125
94512
  if (elm.classList.contains('on')) {
93126
94513
  scale = elm.getAttribute('data-value');
93127
94514
  }
93128
94515
  });
93129
94516
  let rotate;
93130
- elms = this.modalAnimateScroll.querySelectorAll('.cmd-rotate');
94517
+ elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
93131
94518
  elms.forEach(elm => {
93132
94519
  if (elm.classList.contains('on')) {
93133
94520
  rotate = elm.getAttribute('data-value');
93134
94521
  }
93135
94522
  });
93136
94523
  let fade = false;
93137
- let elm = this.modalAnimateScroll.querySelector('.cmd-fade');
94524
+ let elm = this.divEnterAnim.querySelector('.cmd-fade');
93138
94525
 
93139
94526
  if (elm.classList.contains('on')) {
93140
94527
  fade = true;
93141
94528
  }
93142
94529
 
93143
- const inpSlideLeft = this.modalAnimateScroll.querySelector('.inp-slide-right');
93144
- if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value;
93145
- const inpSlideRight = this.modalAnimateScroll.querySelector('.inp-slide-left');
93146
- if (inpSlideRight.value !== '') valX = inpSlideRight.value;
93147
- const inpSlideDown = this.modalAnimateScroll.querySelector('.inp-slide-down');
93148
- if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value;
93149
- const inpSlideUp = this.modalAnimateScroll.querySelector('.inp-slide-up');
93150
- if (inpSlideUp.value !== '') valY = inpSlideUp.value;
93151
- const inpScale = this.modalAnimateScroll.querySelector('.inp-scale');
94530
+ const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-right');
94531
+ if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value + (inpSlideLeft.value.indexOf('%') !== -1 ? '' : 'px');
94532
+ const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-left');
94533
+ if (inpSlideRight.value !== '') valX = inpSlideRight.value + (inpSlideRight.value.indexOf('%') !== -1 ? '' : 'px');
94534
+ const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
94535
+ if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value + (inpSlideDown.value.indexOf('%') !== -1 ? '' : 'px');
94536
+ const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
94537
+ if (inpSlideUp.value !== '') valY = inpSlideUp.value + (inpSlideUp.value.indexOf('%') !== -1 ? '' : 'px');
94538
+ const inpScale = this.divEnterAnim.querySelector('.inp-scale');
93152
94539
  if (inpScale.value !== '') scale = inpScale.value;
93153
- const inpRotateClockwise = this.modalAnimateScroll.querySelector('.inp-rotate-clockwise');
94540
+ const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
93154
94541
  if (inpRotateClockwise.value !== '') rotate = '-' + inpRotateClockwise.value;
93155
- const inpRotateCounter = this.modalAnimateScroll.querySelector('.inp-rotate-counter');
94542
+ const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
93156
94543
  if (inpRotateCounter.value !== '') rotate = inpRotateCounter.value;
93157
94544
  let animStart = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (rotate ? ` rotate(${rotate}deg)` : '') + (scale ? ` scale(${scale})` : '');
93158
94545
  animStart = animStart.trim();
@@ -93176,8 +94563,90 @@ class AnimateScroll {
93176
94563
  dataEnd = elm.getAttribute('data-value');
93177
94564
  }
93178
94565
  });
94566
+ sStart = sStart.trim();
94567
+ sEnd = sEnd.trim();
93179
94568
  if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
93180
- if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);
94569
+ if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd); // --- LEAVE ---
94570
+
94571
+ let valX_leave;
94572
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
94573
+ elms.forEach(elm => {
94574
+ if (elm.classList.contains('on')) {
94575
+ valX_leave = elm.getAttribute('data-value');
94576
+ }
94577
+ });
94578
+ let valY_leave;
94579
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
94580
+ elms.forEach(elm => {
94581
+ if (elm.classList.contains('on')) {
94582
+ valY_leave = elm.getAttribute('data-value');
94583
+ }
94584
+ });
94585
+ let scale_leave;
94586
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
94587
+ elms.forEach(elm => {
94588
+ if (elm.classList.contains('on')) {
94589
+ scale_leave = elm.getAttribute('data-value');
94590
+ }
94591
+ });
94592
+ let rotate_leave;
94593
+ elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
94594
+ elms.forEach(elm => {
94595
+ if (elm.classList.contains('on')) {
94596
+ rotate_leave = elm.getAttribute('data-value');
94597
+ }
94598
+ });
94599
+ let fade_leave = false;
94600
+ elm = this.divLeaveAnim.querySelector('.cmd-fade');
94601
+
94602
+ if (elm.classList.contains('on')) {
94603
+ fade_leave = true;
94604
+ }
94605
+
94606
+ const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
94607
+ if (inpSlideLeft_leave.value !== '') valX_leave = '-' + inpSlideLeft_leave.value + (inpSlideLeft_leave.value.indexOf('%') !== -1 ? '' : 'px');
94608
+ const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
94609
+ if (inpSlideRight_leave.value !== '') valX_leave = inpSlideRight_leave.value + (inpSlideRight_leave.value.indexOf('%') !== -1 ? '' : 'px');
94610
+ const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
94611
+ if (inpSlideDown_leave.value !== '') valY_leave = inpSlideDown_leave.value + (inpSlideDown_leave.value.indexOf('%') !== -1 ? '' : 'px');
94612
+ const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
94613
+ if (inpSlideUp_leave.value !== '') valY_leave = '-' + inpSlideUp_leave.value + (inpSlideUp_leave.value.indexOf('%') !== -1 ? '' : 'px');
94614
+ const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
94615
+ if (inpScale_leave.value !== '') scale = inpScale_leave.value;
94616
+ const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
94617
+ if (inpRotateClockwise_leave.value !== '') rotate_leave = inpRotateClockwise_leave.value;
94618
+ const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
94619
+ if (inpRotateCounter_leave.value !== '') rotate_leave = '-' + inpRotateCounter_leave.value;
94620
+ let animLeaveStart = (valX_leave ? ' translateX(0px)' : '') + (valY_leave ? ' translateY(0px)' : '') + (rotate_leave ? ' rotate(0deg)' : '') + (scale_leave ? ' scale(1)' : '');
94621
+ animLeaveStart = animLeaveStart.trim();
94622
+ let animLeaveEnd = (valX_leave ? ` translateX(${valX_leave})` : '') + (valY_leave ? ` translateY(${valY_leave})` : '') + (rotate_leave ? ` rotate(${rotate_leave}deg)` : '') + (scale_leave ? ` scale(${scale_leave})` : '');
94623
+ animLeaveEnd = animLeaveEnd.trim();
94624
+ let sLeaveStart = (animLeaveStart ? 'transform: ' + animLeaveStart + ';' : '') + (fade_leave ? 'opacity: 1;' : '');
94625
+ let sLeaveEnd = (animLeaveEnd ? 'transform: ' + animLeaveEnd + ';' : '') + (fade_leave ? 'opacity: 0;' : '');
94626
+ this.cleanup_leave(activeElement);
94627
+ let dataLeaveStart;
94628
+ let dataLeaveEnd;
94629
+ elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
94630
+ elms.forEach(elm => {
94631
+ if (elm.classList.contains('on')) {
94632
+ dataLeaveStart = elm.getAttribute('data-value');
94633
+ }
94634
+ });
94635
+ dataLeaveEnd = 'data-top-bottom';
94636
+ sLeaveStart = sLeaveStart.trim();
94637
+ sLeaveEnd = sLeaveEnd.trim();
94638
+ if (sLeaveStart !== '') activeElement.setAttribute(dataLeaveStart, sLeaveStart);
94639
+ if (sLeaveEnd !== '') activeElement.setAttribute(dataLeaveEnd, sLeaveEnd); // ----
94640
+
94641
+ if (sStart === '' && sEnd === '' && sLeaveStart === '' && sLeaveEnd === '') {
94642
+ activeElement.style.transform = '';
94643
+ activeElement.style.transition = '';
94644
+ activeElement.style.opacity = '';
94645
+ }
94646
+
94647
+ if (fade || fade_leave) {
94648
+ activeElement.style.opacity = '';
94649
+ }
93181
94650
 
93182
94651
  if (this.builder.win.skrollrr) {
93183
94652
  this.builder.win.skrollrr.refresh();
@@ -93198,7 +94667,14 @@ class AnimateScroll {
93198
94667
  let activeElement;
93199
94668
 
93200
94669
  if (target === 'element') {
93201
- activeElement = this.builder.editor.activeElement;
94670
+ let reCheck = this.readTarget();
94671
+
94672
+ if (reCheck) {
94673
+ if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
94674
+ if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;
94675
+ } else {
94676
+ activeElement = this.builder.editor.activeElement;
94677
+ }
93202
94678
  }
93203
94679
 
93204
94680
  if (target === 'column') {
@@ -93221,6 +94697,81 @@ class AnimateScroll {
93221
94697
  };
93222
94698
  }
93223
94699
 
94700
+ readTarget(s) {
94701
+ if (!s) {
94702
+ // element (inspectedElement first)
94703
+ let activeElement = this.builder.editor.inspectedElement;
94704
+ if (!activeElement) return false; // enter start
94705
+
94706
+ let css1 = activeElement.getAttribute('data-bottom-top');
94707
+ if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
94708
+ if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
94709
+ if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
94710
+
94711
+ let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
94712
+
94713
+ let hasBasicAnim = false;
94714
+
94715
+ 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')) {
94716
+ hasBasicAnim = true;
94717
+ }
94718
+
94719
+ if (css1 || css2 || hasBasicAnim) {
94720
+ return {
94721
+ 'element': activeElement,
94722
+ 'name': 'inspectedElement'
94723
+ };
94724
+ } else {
94725
+ return this.readTarget('element');
94726
+ }
94727
+ } else {
94728
+ let activeElement;
94729
+
94730
+ if (s === 'element') {
94731
+ activeElement = this.builder.editor.activeElement;
94732
+ }
94733
+
94734
+ if (s === 'column') {
94735
+ activeElement = this.builder.editor.activeCol;
94736
+ }
94737
+
94738
+ if (s === 'row') {
94739
+ activeElement = this.builder.editor.activeCol.parentNode;
94740
+ }
94741
+
94742
+ if (s === 'container') {
94743
+ activeElement = this.builder.editor.activeCol.parentNode.parentNode;
94744
+ }
94745
+
94746
+ if (!activeElement) return false; // enter start
94747
+
94748
+ let css1 = activeElement.getAttribute('data-bottom-top');
94749
+ if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
94750
+ if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
94751
+ if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
94752
+
94753
+ let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
94754
+
94755
+ let hasBasicAnim = false;
94756
+
94757
+ 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')) {
94758
+ hasBasicAnim = true;
94759
+ }
94760
+
94761
+ if (css1 || css2 || hasBasicAnim) {
94762
+ return {
94763
+ 'element': activeElement,
94764
+ 'name': s
94765
+ };
94766
+ } else {
94767
+ if (s === 'element') return this.readTarget('column');
94768
+ if (s === 'column') return this.readTarget('row');
94769
+ if (s === 'row') return this.readTarget('container');
94770
+ if (s === 'container') return false;
94771
+ }
94772
+ }
94773
+ }
94774
+
93224
94775
  getTransform(element, css) {
93225
94776
  let tX, tY, sc, rt;
93226
94777
  let arrTransform = this.parseComplexStyleProperty(css);
@@ -93243,7 +94794,8 @@ class AnimateScroll {
93243
94794
  transform = {},
93244
94795
  match;
93245
94796
 
93246
- while (match === regex.exec(str)) transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
94797
+ while (match = regex.exec(str)) // eslint-disable-line
94798
+ transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
93247
94799
 
93248
94800
  return transform;
93249
94801
  }
@@ -93251,8 +94803,6 @@ class AnimateScroll {
93251
94803
  cleanup(elm) {
93252
94804
  elm.removeAttribute('data-center');
93253
94805
  elm.removeAttribute('data-center-top');
93254
- elm.removeAttribute('data-top');
93255
- elm.removeAttribute('data-top-bottom');
93256
94806
  elm.removeAttribute('data--50-bottom');
93257
94807
  elm.removeAttribute('data--100-bottom');
93258
94808
  elm.removeAttribute('data--150-bottom');
@@ -93269,8 +94819,17 @@ class AnimateScroll {
93269
94819
  elm.removeAttribute('data-bottom');
93270
94820
  }
93271
94821
 
94822
+ cleanup_leave(elm) {
94823
+ elm.removeAttribute('data-center-bottom');
94824
+ elm.removeAttribute('data-100-top');
94825
+ elm.removeAttribute('data-50-top');
94826
+ elm.removeAttribute('data-top');
94827
+ elm.removeAttribute('data-top-bottom');
94828
+ }
94829
+
93272
94830
  edit() {
93273
94831
  this.modalAnimateScroll.classList.add('active');
94832
+ this.clickContent();
93274
94833
  }
93275
94834
 
93276
94835
  close() {
@@ -93430,7 +94989,8 @@ class ContentBox {
93430
94989
  name: 'symbols',
93431
94990
  showInMainToolbar: true,
93432
94991
  showInElementToolbar: false
93433
- }],
94992
+ } // { name: 'animation', showInMainToolbar: true, showInElementToolbar: true },
94993
+ ],
93434
94994
  disableConfig: false,
93435
94995
  useLightbox: true,
93436
94996
  lightboxArrow: true,
@@ -93443,6 +95003,7 @@ class ContentBox {
93443
95003
  videoselect: '',
93444
95004
  videoSelect: '',
93445
95005
  audioSelect: '',
95006
+ mediaSelect: '',
93446
95007
  slider: '',
93447
95008
  navbar: false,
93448
95009
  onRender: function () {},
@@ -93454,6 +95015,7 @@ class ContentBox {
93454
95015
  // onFileSelectClick: function () { },
93455
95016
  // onVideoSelectClick: function () { },
93456
95017
  // onAudioSelectClick: function () { },
95018
+ // onMediaSelectClick: function () { },
93457
95019
  // onPluginsLoaded: function () { },
93458
95020
  coverImageHandler: '',
93459
95021
  // onUploadCoverImage: function () { },
@@ -93465,6 +95027,8 @@ class ContentBox {
93465
95027
  moduleConfig: [],
93466
95028
  largerImageHandler: '',
93467
95029
  // onLargerImageUpload: function(){},
95030
+ imageHandler: '',
95031
+ // onImageUpload: function(){},
93468
95032
  mediaHandler: '',
93469
95033
  // onMediaUpload: function(){},
93470
95034
  videoHandler: '',
@@ -95808,19 +97372,17 @@ class ContentBox {
95808
97372
  this.settings.videoselect = this.settings.videoSelect;
95809
97373
  } else if (this.settings.videoselect != '') {
95810
97374
  this.settings.videoSelect = this.settings.videoselect;
95811
- }
95812
-
95813
- if (this.settings.largerImageHandler !== '') {
95814
- this.settings.mediaHandler = this.settings.largerImageHandler;
95815
- } else if (this.settings.mediaHandler != '') {
95816
- this.settings.largerImageHandler = this.settings.mediaHandler;
95817
- }
97375
+ } // if(this.settings.largerImageHandler!=='') {
97376
+ // this.settings.mediaHandler = this.settings.largerImageHandler;
97377
+ // } else if(this.settings.mediaHandler!='') {
97378
+ // this.settings.largerImageHandler = this.settings.mediaHandler;
97379
+ // }
97380
+ // if(this.settings.onLargerImageUpload) {
97381
+ // this.settings.onMediaUpload = this.settings.onLargerImageUpload;
97382
+ // } else if(this.settings.onMediaUpload) {
97383
+ // this.settings.onLargerImageUpload = this.settings.onMediaUpload;
97384
+ // }
95818
97385
 
95819
- if (this.settings.onLargerImageUpload) {
95820
- this.settings.onMediaUpload = this.settings.onLargerImageUpload;
95821
- } else if (this.settings.onMediaUpload) {
95822
- this.settings.onLargerImageUpload = this.settings.onMediaUpload;
95823
- }
95824
97386
 
95825
97387
  if (this.settings.snippetPathReplace.length > 0 && this.settings.designPathReplace.length === 0) {
95826
97388
  this.settings.designPathReplace = this.settings.snippetPathReplace;
@@ -95979,12 +97541,13 @@ class ContentBox {
95979
97541
  lightboxArrow: this.settings.lightboxArrow,
95980
97542
  themes: this.settings.themes,
95981
97543
  moduleConfig: this.settings.moduleConfig,
97544
+ onImageBrowseClick: this.settings.onImageBrowseClick,
97545
+ onImageSettingClick: this.settings.onImageSettingClick,
95982
97546
  onImageSelectClick: this.settings.onImageSelectClick,
95983
97547
  onFileSelectClick: this.settings.onFileSelectClick,
95984
97548
  onVideoSelectClick: this.settings.onVideoSelectClick,
95985
- onImageBrowseClick: this.settings.onImageBrowseClick,
95986
- onImageSettingClick: this.settings.onImageSettingClick,
95987
97549
  onAudioSelectClick: this.settings.onAudioSelectClick,
97550
+ onMediaSelectClick: this.settings.onMediaSelectClick,
95988
97551
  onImageEditClick: this.settings.onImageEditClick,
95989
97552
  setCropperConfig: this.settings.setCropperConfig,
95990
97553
  onPluginsLoaded: this.settings.onPluginsLoaded,
@@ -96004,10 +97567,14 @@ class ContentBox {
96004
97567
  customTags: this.settings.customTags,
96005
97568
  largerImageHandler: this.settings.largerImageHandler,
96006
97569
  onLargerImageUpload: this.settings.onLargerImageUpload,
97570
+ imageHandler: this.settings.imageHandler,
97571
+ mediaHandler: this.settings.mediaHandler,
96007
97572
  videoHandler: this.settings.videoHandler,
96008
97573
  audioHandler: this.settings.audioHandler,
96009
97574
  onVideoUpload: this.settings.onVideoUpload,
96010
97575
  onAudioUpload: this.settings.onAudioUpload,
97576
+ onImageUpload: this.settings.onImageUpload,
97577
+ onMediaUpload: this.settings.onMediaUpload,
96011
97578
  framework: this.settings.framework,
96012
97579
  cellFormat: this.settings.cellFormat,
96013
97580
  rowFormat: this.settings.rowFormat,
@@ -96128,6 +97695,7 @@ class ContentBox {
96128
97695
  imageSelect: this.settings.imageSelect,
96129
97696
  videoSelect: this.settings.videoSelect,
96130
97697
  audioSelect: this.settings.audioSelect,
97698
+ mediaSelect: this.settings.mediaSelect,
96131
97699
  onContentClick: e => {
96132
97700
  if (this.settings.onContentClick) this.settings.onContentClick();
96133
97701
  let elm = e.target;
@@ -96595,7 +98163,7 @@ class ContentBox {
96595
98163
  this.editbox.editModule();
96596
98164
  });
96597
98165
  let btnCover = box.querySelector('.is-cover-upload');
96598
- if (btnCover) btnCover.addEventListener('mouseenter', () => {
98166
+ if (btnCover) if (btnCover.style.display !== 'none') btnCover.addEventListener('mouseenter', () => {
96599
98167
  let btnCoverCentral;
96600
98168
 
96601
98169
  if (!this.iframe) {
@@ -97192,11 +98760,11 @@ class ContentBox {
97192
98760
  boxTool.style.width = '40px';
97193
98761
  boxTool.style.left = 'calc(50% - 20px)';
97194
98762
  } else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
97195
- box.querySelector('.is-cover-upload').style.display = 'none';
98763
+ box.querySelector('.is-cover-upload').style.display = 'block';
97196
98764
  box.querySelector('.is-box-edit').style.display = 'inline-block';
97197
98765
  box.querySelector('.is-module-edit').style.display = 'inline-block';
97198
- boxTool.style.width = '80px';
97199
- boxTool.style.left = 'calc(50% - 40px)';
98766
+ boxTool.style.width = '120px';
98767
+ boxTool.style.left = 'calc(50% - 60px)';
97200
98768
  } else {
97201
98769
  box.querySelector('.is-cover-upload').style.display = 'block';
97202
98770
  box.querySelector('.is-box-edit').style.display = 'inline-block';
@@ -97385,7 +98953,30 @@ class ContentBox {
97385
98953
  let range = document.createRange();
97386
98954
  wrapper.innerHTML = '';
97387
98955
  wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
98956
+ // Load fonts
98957
+
98958
+ let contentStylePath = this.settings.contentStylePath;
98959
+ const sections = wrapper.querySelectorAll('.is-section');
98960
+ sections.forEach(section => {
98961
+ section.classList.forEach(item => {
98962
+ if (item.indexOf('type-') !== -1) {
98963
+ const contentClass = item;
98964
+ const contentCss = item + '.css'; //Add css
97388
98965
 
98966
+ let exist = false;
98967
+ let links = this.doc.getElementsByTagName('link');
98968
+
98969
+ for (let i = 0; i < links.length; i++) {
98970
+ let src = links[i].href.toLowerCase();
98971
+ if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
98972
+ }
98973
+
98974
+ if (!exist) {
98975
+ this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
98976
+ }
98977
+ }
98978
+ });
98979
+ });
97389
98980
  this.pageSetup();
97390
98981
  this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
97391
98982
  // Re-apply
@@ -97483,7 +99074,7 @@ class ContentBox {
97483
99074
  this.editor.viewZoom();
97484
99075
  }
97485
99076
 
97486
- openAnimateScroll() {
99077
+ openAnimationPanel() {
97487
99078
  this.animateScroll.edit();
97488
99079
  }
97489
99080