@innovastudio/contentbox 1.4.30 → 1.4.31
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>' +
|
|
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>' +
|
|
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>' +
|
|
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') + ': <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('
|
|
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;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</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;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</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;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</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>') +
|
|
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>`;
|
|
@@ -78104,6 +78205,7 @@ class ElementTool {
|
|
|
78104
78205
|
pos() {
|
|
78105
78206
|
let elementTool = this.elementTool;
|
|
78106
78207
|
let elm = this.builder.activeElement;
|
|
78208
|
+
if (elm.closest('.is-dock')) return;
|
|
78107
78209
|
let top, left;
|
|
78108
78210
|
|
|
78109
78211
|
if (!this.builder.iframe) {
|
|
@@ -92506,22 +92608,33 @@ class AnimateScroll {
|
|
|
92506
92608
|
}
|
|
92507
92609
|
.animatescroll .side-title {
|
|
92508
92610
|
font-weight: 400;
|
|
92509
|
-
padding: 18px !important;
|
|
92510
92611
|
font-size: 15px;
|
|
92511
92612
|
opacity: 0.8;
|
|
92613
|
+
padding: 10px 0 0 18px !important;
|
|
92614
|
+
}
|
|
92615
|
+
.animatescroll .is-tabs a.active {
|
|
92616
|
+
background: none !important;
|
|
92617
|
+
}
|
|
92618
|
+
.animatescroll .is-tabs a {
|
|
92619
|
+
text-transform: none!important;
|
|
92620
|
+
font-size: 13px!important;
|
|
92621
|
+
margin-right: 30px!important;
|
|
92622
|
+
margin-left: 3px!important;
|
|
92512
92623
|
}
|
|
92513
92624
|
.anim-controls {
|
|
92514
92625
|
padding: 0 !important;
|
|
92515
92626
|
z-index: 1;
|
|
92627
|
+
width: 100%;
|
|
92516
92628
|
height: 100%;
|
|
92517
92629
|
position: absolute;
|
|
92518
92630
|
top: 0;
|
|
92519
92631
|
box-sizing: border-box;
|
|
92520
|
-
border-top: transparent
|
|
92632
|
+
border-top: transparent 200px solid !important;
|
|
92521
92633
|
}
|
|
92522
|
-
#
|
|
92523
|
-
border-top: transparent
|
|
92634
|
+
#divEnterAnim, #divLeaveAnim, #divAnimSettings {
|
|
92635
|
+
border-top: transparent 70px solid !important;
|
|
92524
92636
|
padding: 0 10px 20px 18px !important;
|
|
92637
|
+
width: 100%;
|
|
92525
92638
|
height: 100%;
|
|
92526
92639
|
box-sizing: border-box;
|
|
92527
92640
|
overflow-y: auto;
|
|
@@ -92535,6 +92648,16 @@ class AnimateScroll {
|
|
|
92535
92648
|
flex:none;
|
|
92536
92649
|
display: flex;
|
|
92537
92650
|
justify-content: space-between;
|
|
92651
|
+
align-items: center;
|
|
92652
|
+
}
|
|
92653
|
+
.anim-label span {
|
|
92654
|
+
display: flex;
|
|
92655
|
+
align-items: center;
|
|
92656
|
+
}
|
|
92657
|
+
.anim-label button {
|
|
92658
|
+
width: 40px !important;
|
|
92659
|
+
margin-left: 2px !important;
|
|
92660
|
+
box-shadow: none !important;
|
|
92538
92661
|
}
|
|
92539
92662
|
.bold {
|
|
92540
92663
|
font-weight: 600;
|
|
@@ -92555,8 +92678,12 @@ class AnimateScroll {
|
|
|
92555
92678
|
.flex-wrap {
|
|
92556
92679
|
display: flex;
|
|
92557
92680
|
flex-flow: wrap;
|
|
92681
|
+
align-items: center;
|
|
92682
|
+
}
|
|
92683
|
+
.flex-nowrap {
|
|
92684
|
+
display: flex;
|
|
92685
|
+
align-items: center;
|
|
92558
92686
|
}
|
|
92559
|
-
|
|
92560
92687
|
.inp-slide-left,
|
|
92561
92688
|
.inp-slide-right,
|
|
92562
92689
|
.inp-slide-up,
|
|
@@ -92573,140 +92700,460 @@ class AnimateScroll {
|
|
|
92573
92700
|
font-weight: 300 !important;
|
|
92574
92701
|
padding: 0 !important;
|
|
92575
92702
|
}
|
|
92703
|
+
|
|
92576
92704
|
</style>
|
|
92577
92705
|
<div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
92578
92706
|
|
|
92579
|
-
<div class="side-title">${out('
|
|
92707
|
+
<div class="side-title">${out('Animation')}</div>
|
|
92580
92708
|
|
|
92581
92709
|
<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
92710
|
|
|
92585
|
-
|
|
92586
|
-
|
|
92587
|
-
|
|
92711
|
+
<div style="padding:10px 10px 25px 18px;z-index:2;position:relative;">
|
|
92712
|
+
<div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
|
|
92713
|
+
<div class="flex-wrap">
|
|
92714
|
+
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
|
|
92715
|
+
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
|
|
92716
|
+
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
|
|
92717
|
+
<button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
|
|
92588
92718
|
</div>
|
|
92719
|
+
</div>
|
|
92720
|
+
|
|
92721
|
+
<div>
|
|
92722
|
+
<div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
|
|
92723
|
+
<a href="" data-content="divAnimScroll" class="active">${out('On Scroll')}</a>
|
|
92724
|
+
<a href="" data-content="divAnimDefault">${out('On View')}</a>
|
|
92725
|
+
</div>
|
|
92726
|
+
</div>
|
|
92589
92727
|
|
|
92590
|
-
|
|
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>
|
|
92728
|
+
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
|
|
92599
92729
|
|
|
92600
|
-
|
|
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>
|
|
92730
|
+
<div class="anim-controls">
|
|
92622
92731
|
|
|
92623
|
-
<div
|
|
92624
|
-
<
|
|
92625
|
-
|
|
92626
|
-
|
|
92627
|
-
|
|
92628
|
-
|
|
92629
|
-
<
|
|
92630
|
-
|
|
92631
|
-
|
|
92632
|
-
|
|
92633
|
-
|
|
92634
|
-
|
|
92635
|
-
|
|
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>
|
|
92732
|
+
<div style="padding:20px 0 0 18px;">
|
|
92733
|
+
<div class="anim-label">
|
|
92734
|
+
<span>
|
|
92735
|
+
<span class="bold">${out('Fade')}</span>:
|
|
92736
|
+
</span>
|
|
92737
|
+
</div>
|
|
92738
|
+
<div class="flex-wrap">
|
|
92739
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
|
|
92740
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
|
|
92741
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
|
|
92742
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
|
|
92743
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
|
|
92744
|
+
</div>
|
|
92645
92745
|
|
|
92646
|
-
|
|
92647
|
-
|
|
92648
|
-
|
|
92649
|
-
|
|
92650
|
-
|
|
92651
|
-
<
|
|
92652
|
-
|
|
92653
|
-
|
|
92654
|
-
|
|
92655
|
-
|
|
92656
|
-
|
|
92746
|
+
<div class="anim-label">
|
|
92747
|
+
<span>
|
|
92748
|
+
<span class="bold">${out('Slide')}</span>:
|
|
92749
|
+
</span>
|
|
92750
|
+
</div>
|
|
92751
|
+
<div class="flex-wrap">
|
|
92752
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
|
|
92753
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
|
|
92754
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
|
|
92755
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
|
|
92756
|
+
</div>
|
|
92757
|
+
|
|
92758
|
+
<div class="anim-label">
|
|
92759
|
+
<span>
|
|
92760
|
+
<span class="bold">${out('Flip')}</span>:
|
|
92761
|
+
</span>
|
|
92762
|
+
</div>
|
|
92763
|
+
<div class="flex-wrap">
|
|
92764
|
+
<button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
|
|
92765
|
+
<button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
|
|
92766
|
+
</div>
|
|
92767
|
+
|
|
92768
|
+
<div class="anim-label">
|
|
92769
|
+
<span>
|
|
92770
|
+
<span class="bold">${out('Zoom')}</span>:
|
|
92771
|
+
</span>
|
|
92772
|
+
</div>
|
|
92773
|
+
<div class="flex-wrap">
|
|
92774
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
|
|
92775
|
+
<button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
|
|
92776
|
+
</div>
|
|
92777
|
+
|
|
92778
|
+
<div class="anim-label">
|
|
92779
|
+
<span>
|
|
92780
|
+
<span class="bold">${out('Pulse')}</span>:
|
|
92781
|
+
</span>
|
|
92782
|
+
</div>
|
|
92783
|
+
<div class="flex-wrap">
|
|
92784
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
|
|
92785
|
+
</div>
|
|
92786
|
+
|
|
92787
|
+
<div class="anim-label">
|
|
92788
|
+
<span>
|
|
92789
|
+
<span class="bold">${out('Bounce')}</span>:
|
|
92790
|
+
</span>
|
|
92791
|
+
</div>
|
|
92792
|
+
<div class="flex-wrap">
|
|
92793
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
|
|
92794
|
+
</div>
|
|
92657
92795
|
|
|
92658
|
-
|
|
92659
|
-
|
|
92660
|
-
|
|
92661
|
-
|
|
92662
|
-
|
|
92663
|
-
<
|
|
92664
|
-
|
|
92665
|
-
|
|
92666
|
-
|
|
92667
|
-
|
|
92668
|
-
|
|
92669
|
-
|
|
92670
|
-
|
|
92671
|
-
|
|
92672
|
-
|
|
92673
|
-
|
|
92674
|
-
|
|
92675
|
-
|
|
92676
|
-
|
|
92677
|
-
|
|
92678
|
-
|
|
92796
|
+
<div class="anim-label">
|
|
92797
|
+
<span>
|
|
92798
|
+
<span class="bold">${out('Animation Delay')}</span>:
|
|
92799
|
+
</span>
|
|
92800
|
+
</div>
|
|
92801
|
+
<div class="flex-wrap">
|
|
92802
|
+
<button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:60px">0s</button>
|
|
92803
|
+
<button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:60px">0.1s</button>
|
|
92804
|
+
<button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:60px">0.2s</button>
|
|
92805
|
+
<button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:60px">0.3s</button>
|
|
92806
|
+
<button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:60px">0.4s</button>
|
|
92807
|
+
<button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:60px">0.5s</button>
|
|
92808
|
+
<button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:60px">0.6s</button>
|
|
92809
|
+
<button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:60px">0.7s</button>
|
|
92810
|
+
<button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:60px">0.8s</button>
|
|
92811
|
+
<button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:60px">0.9s</button>
|
|
92812
|
+
<button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:60px">1s</button>
|
|
92813
|
+
<button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:60px">1.1s</button>
|
|
92814
|
+
<button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:60px">1.2s</button>
|
|
92815
|
+
<button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:60px">1.3s</button>
|
|
92816
|
+
<button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:60px">1.4s</button>
|
|
92817
|
+
<button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
|
|
92818
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92819
|
+
</button>
|
|
92820
|
+
</div>
|
|
92821
|
+
|
|
92822
|
+
<br>
|
|
92823
|
+
<button title="${out('Animate Once')}" class="cmd-basic-once" style="width:165px;">
|
|
92824
|
+
${out('Animate Once')}
|
|
92825
|
+
</button>
|
|
92826
|
+
|
|
92827
|
+
<br>
|
|
92828
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
|
|
92829
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92830
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
92679
92831
|
</div>
|
|
92680
|
-
|
|
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>
|
|
92832
|
+
|
|
92686
92833
|
</div>
|
|
92687
92834
|
|
|
92688
|
-
|
|
92689
|
-
|
|
92690
|
-
|
|
92691
|
-
|
|
92692
|
-
|
|
92693
|
-
|
|
92694
|
-
|
|
92695
|
-
<
|
|
92835
|
+
</div>
|
|
92836
|
+
|
|
92837
|
+
<div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="display:flex;padding-top:0">
|
|
92838
|
+
|
|
92839
|
+
<div class="anim-controls">
|
|
92840
|
+
|
|
92841
|
+
<div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
|
|
92842
|
+
<a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
|
|
92843
|
+
<a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
|
|
92844
|
+
<a href="" data-content="divAnimSettings">${out('Settings')}</a>
|
|
92696
92845
|
</div>
|
|
92697
|
-
|
|
92698
|
-
<div class="
|
|
92699
|
-
|
|
92700
|
-
<
|
|
92701
|
-
|
|
92702
|
-
|
|
92703
|
-
|
|
92846
|
+
|
|
92847
|
+
<div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
|
|
92848
|
+
|
|
92849
|
+
<div class="anim-label">
|
|
92850
|
+
<span>
|
|
92851
|
+
<span class="bold">${out('Slide Left')}</span>:
|
|
92852
|
+
<input class="inp-slide-left" type="text" />
|
|
92853
|
+
</span>
|
|
92854
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
92855
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92856
|
+
</button>
|
|
92857
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
|
|
92858
|
+
</div>
|
|
92859
|
+
<div class="flex-wrap">
|
|
92860
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
92861
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
92862
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
92863
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
92864
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
92865
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92866
|
+
</div>
|
|
92867
|
+
<div class="anim-label">
|
|
92868
|
+
<span>
|
|
92869
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
92870
|
+
<input class="inp-slide-right" type="text" />
|
|
92871
|
+
</span>
|
|
92872
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
92873
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92874
|
+
</button>
|
|
92875
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
|
|
92876
|
+
</div>
|
|
92877
|
+
<div class="flex-wrap">
|
|
92878
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
92879
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
92880
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
92881
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
92882
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
92883
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92884
|
+
</div>
|
|
92885
|
+
|
|
92886
|
+
<div class="anim-label">
|
|
92887
|
+
<span>
|
|
92888
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
92889
|
+
<input class="inp-slide-up" type="text" />
|
|
92890
|
+
</span>
|
|
92891
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
92892
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92893
|
+
</button>
|
|
92894
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
|
|
92895
|
+
</div>
|
|
92896
|
+
<div class="flex-wrap">
|
|
92897
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
92898
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
92899
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
92900
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
92901
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
92902
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92903
|
+
</div>
|
|
92904
|
+
<div class="anim-label">
|
|
92905
|
+
<span>
|
|
92906
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
92907
|
+
<input class="inp-slide-down" type="text" />
|
|
92908
|
+
</span>
|
|
92909
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
92910
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92911
|
+
</button>
|
|
92912
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
|
|
92913
|
+
</div>
|
|
92914
|
+
<div class="flex-wrap">
|
|
92915
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
92916
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
92917
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
92918
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
92919
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
92920
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92921
|
+
</div>
|
|
92922
|
+
|
|
92923
|
+
<div class="anim-label">
|
|
92924
|
+
<span>
|
|
92925
|
+
<span class="bold">${out('Scale')}</span>:
|
|
92926
|
+
<input class="inp-scale" type="text" />
|
|
92927
|
+
</span>
|
|
92928
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
92929
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92930
|
+
</button>
|
|
92931
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
|
|
92932
|
+
</div>
|
|
92933
|
+
<div class="flex-nowrap">
|
|
92934
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
92935
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
92936
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
92937
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
92938
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
92939
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
92940
|
+
</div>
|
|
92941
|
+
|
|
92942
|
+
<div class="anim-label">
|
|
92943
|
+
<span>
|
|
92944
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
92945
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
92946
|
+
</span>
|
|
92947
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
92948
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92949
|
+
</button>
|
|
92950
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
92951
|
+
</div>
|
|
92952
|
+
<div class="flex-wrap">
|
|
92953
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
92954
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
92955
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
92956
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
92957
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
92958
|
+
</div>
|
|
92959
|
+
<div class="anim-label">
|
|
92960
|
+
<span>
|
|
92961
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
92962
|
+
<input class="inp-rotate-counter" type="text" />
|
|
92963
|
+
</span>
|
|
92964
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
92965
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92966
|
+
</button>
|
|
92967
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
92968
|
+
</div>
|
|
92969
|
+
<div class="flex-wrap">
|
|
92970
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
92971
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
92972
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
92973
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
92974
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
92975
|
+
</div>
|
|
92976
|
+
|
|
92977
|
+
<div class="anim-label">
|
|
92978
|
+
<span class="bold">${out('Fade')}</span>:
|
|
92979
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
|
|
92980
|
+
</div>
|
|
92981
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
|
|
92982
|
+
|
|
92983
|
+
<br>
|
|
92984
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
92985
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92986
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
92987
|
+
</div>
|
|
92988
|
+
|
|
92989
|
+
<div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
92990
|
+
|
|
92991
|
+
<div class="anim-label">
|
|
92992
|
+
<span>
|
|
92993
|
+
<span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
|
|
92994
|
+
</span>
|
|
92995
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
92996
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92997
|
+
</button>
|
|
92998
|
+
</div>
|
|
92999
|
+
<div class="flex-wrap">
|
|
93000
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93001
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93002
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93003
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93004
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93005
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93006
|
+
</div>
|
|
93007
|
+
<div class="anim-label">
|
|
93008
|
+
<span>
|
|
93009
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
93010
|
+
<input class="inp-slide-right" type="text" />
|
|
93011
|
+
</span>
|
|
93012
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93013
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93014
|
+
</button>
|
|
93015
|
+
</div>
|
|
93016
|
+
<div class="flex-wrap">
|
|
93017
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93018
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93019
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93020
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93021
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93022
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93023
|
+
</div>
|
|
93024
|
+
|
|
93025
|
+
<div class="anim-label">
|
|
93026
|
+
<span>
|
|
93027
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
93028
|
+
<input class="inp-slide-up" type="text" />
|
|
93029
|
+
</span>
|
|
93030
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
93031
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93032
|
+
</button>
|
|
93033
|
+
</div>
|
|
93034
|
+
<div class="flex-wrap">
|
|
93035
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93036
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93037
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93038
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93039
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93040
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93041
|
+
</div>
|
|
93042
|
+
<div class="anim-label">
|
|
93043
|
+
<span>
|
|
93044
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
93045
|
+
<input class="inp-slide-down" type="text" />
|
|
93046
|
+
</span>
|
|
93047
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
93048
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93049
|
+
</button>
|
|
93050
|
+
</div>
|
|
93051
|
+
<div class="flex-wrap">
|
|
93052
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93053
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93054
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93055
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93056
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93057
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93058
|
+
</div>
|
|
93059
|
+
|
|
93060
|
+
<div class="anim-label">
|
|
93061
|
+
<span>
|
|
93062
|
+
<span class="bold">${out('Scale')}</span>:
|
|
93063
|
+
<input class="inp-scale" type="text" />
|
|
93064
|
+
</span>
|
|
93065
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93066
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93067
|
+
</button>
|
|
93068
|
+
</div>
|
|
93069
|
+
<div class="flex-nowrap">
|
|
93070
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93071
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93072
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93073
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93074
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93075
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93076
|
+
</div>
|
|
93077
|
+
|
|
93078
|
+
<div class="anim-label">
|
|
93079
|
+
<span>
|
|
93080
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
93081
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
93082
|
+
</span>
|
|
93083
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
93084
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93085
|
+
</button>
|
|
93086
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
93087
|
+
</div>
|
|
93088
|
+
<div class="flex-wrap">
|
|
93089
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93090
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93091
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93092
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93093
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93094
|
+
</div>
|
|
93095
|
+
<div class="anim-label">
|
|
93096
|
+
<span>
|
|
93097
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93098
|
+
<input class="inp-rotate-counter" type="text" />
|
|
93099
|
+
</span>
|
|
93100
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93101
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93102
|
+
</button>
|
|
93103
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93104
|
+
</div>
|
|
93105
|
+
<div class="flex-wrap">
|
|
93106
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93107
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93108
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93109
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93110
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93111
|
+
</div>
|
|
93112
|
+
|
|
93113
|
+
<div class="anim-label">
|
|
93114
|
+
<span class="bold">${out('Fade')}</span>:
|
|
93115
|
+
</div>
|
|
93116
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
|
|
93117
|
+
|
|
93118
|
+
<br>
|
|
93119
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
93120
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93121
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
92704
93122
|
</div>
|
|
92705
93123
|
|
|
93124
|
+
<div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
93125
|
+
|
|
93126
|
+
<div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
|
|
93127
|
+
|
|
93128
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93129
|
+
<div class="flex-wrap">
|
|
93130
|
+
<button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:80px">${out('Normal')}</button>
|
|
93131
|
+
<button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:80px">${out('Delayed')}</button>
|
|
93132
|
+
<button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:80px">${out('Late')}</button>
|
|
93133
|
+
<button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
|
|
93134
|
+
</div>
|
|
93135
|
+
|
|
93136
|
+
<div class="anim-label">${out('End')}:</div>
|
|
93137
|
+
<div class="flex-wrap">
|
|
93138
|
+
<button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
|
|
93139
|
+
<button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:80px">${out('Soon')}</button>
|
|
93140
|
+
<button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:80px">${out('Normal')}</button>
|
|
93141
|
+
</div>
|
|
92706
93142
|
|
|
93143
|
+
<div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
|
|
93144
|
+
|
|
93145
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93146
|
+
<div class="flex-wrap">
|
|
93147
|
+
<button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:80px">${out('Normal')}</button>
|
|
93148
|
+
<button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:80px">${out('Delayed')}</button>
|
|
93149
|
+
<button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:80px">${out('Late')}</button>
|
|
93150
|
+
<button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
|
|
93151
|
+
</div>
|
|
93152
|
+
</div>
|
|
93153
|
+
|
|
93154
|
+
|
|
92707
93155
|
</div>
|
|
92708
93156
|
|
|
92709
|
-
|
|
92710
93157
|
</div>
|
|
92711
93158
|
|
|
92712
93159
|
<div class="dummy-elm"></div>
|
|
@@ -92714,8 +93161,12 @@ class AnimateScroll {
|
|
|
92714
93161
|
</div>
|
|
92715
93162
|
`;
|
|
92716
93163
|
dom$1.appendHtml(builderStuff, html);
|
|
92717
|
-
|
|
93164
|
+
const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
|
|
92718
93165
|
this.modalAnimateScroll = modalAnimateScroll;
|
|
93166
|
+
const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
|
|
93167
|
+
this.divEnterAnim = divEnterAnim;
|
|
93168
|
+
const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
|
|
93169
|
+
this.divLeaveAnim = divLeaveAnim;
|
|
92719
93170
|
const btnClose = modalAnimateScroll.querySelector('.is-side-close');
|
|
92720
93171
|
btnClose.addEventListener('click', () => {
|
|
92721
93172
|
this.close();
|
|
@@ -92731,6 +93182,75 @@ class AnimateScroll {
|
|
|
92731
93182
|
btn.classList.add('on');
|
|
92732
93183
|
this.read();
|
|
92733
93184
|
});
|
|
93185
|
+
}); // Default
|
|
93186
|
+
|
|
93187
|
+
const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
93188
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
93189
|
+
btns.forEach(btn => {
|
|
93190
|
+
btn.addEventListener('click', () => {
|
|
93191
|
+
if (btn.classList.contains('on')) {
|
|
93192
|
+
btn.classList.remove('on');
|
|
93193
|
+
btnAnimateOnce.classList.remove('on');
|
|
93194
|
+
this.applyBasic();
|
|
93195
|
+
return;
|
|
93196
|
+
}
|
|
93197
|
+
|
|
93198
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
93199
|
+
elms.forEach(elm => {
|
|
93200
|
+
elm.classList.remove('on');
|
|
93201
|
+
});
|
|
93202
|
+
btn.classList.add('on');
|
|
93203
|
+
this.applyBasic();
|
|
93204
|
+
});
|
|
93205
|
+
});
|
|
93206
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93207
|
+
btns.forEach(btn => {
|
|
93208
|
+
btn.addEventListener('click', () => {
|
|
93209
|
+
if (btn.classList.contains('on')) {
|
|
93210
|
+
btn.classList.remove('on');
|
|
93211
|
+
this.applyDelay();
|
|
93212
|
+
return;
|
|
93213
|
+
}
|
|
93214
|
+
|
|
93215
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93216
|
+
elms.forEach(elm => {
|
|
93217
|
+
elm.classList.remove('on');
|
|
93218
|
+
});
|
|
93219
|
+
btn.classList.add('on');
|
|
93220
|
+
this.applyDelay();
|
|
93221
|
+
});
|
|
93222
|
+
});
|
|
93223
|
+
let btnClearDelay = modalAnimateScroll.querySelector('.cmd-clear-delay');
|
|
93224
|
+
btnClearDelay.addEventListener('click', () => {
|
|
93225
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93226
|
+
elms.forEach(elm => {
|
|
93227
|
+
elm.classList.remove('on');
|
|
93228
|
+
});
|
|
93229
|
+
this.applyDelay();
|
|
93230
|
+
});
|
|
93231
|
+
btnAnimateOnce.addEventListener('click', () => {
|
|
93232
|
+
if (btnAnimateOnce.classList.contains('on')) {
|
|
93233
|
+
btnAnimateOnce.classList.remove('on');
|
|
93234
|
+
} else {
|
|
93235
|
+
btnAnimateOnce.classList.add('on');
|
|
93236
|
+
}
|
|
93237
|
+
|
|
93238
|
+
this.applyBasic();
|
|
93239
|
+
});
|
|
93240
|
+
let btnClearBasicAnim = modalAnimateScroll.querySelector('.cmd-clear-basicanim');
|
|
93241
|
+
btnClearBasicAnim.addEventListener('click', () => {
|
|
93242
|
+
let activeElement;
|
|
93243
|
+
let target = this.getTarget();
|
|
93244
|
+
activeElement = target.element;
|
|
93245
|
+
if (!activeElement) return;
|
|
93246
|
+
this.builder.editor.saveForUndo();
|
|
93247
|
+
this.cleanupBasic(activeElement);
|
|
93248
|
+
this.cleanupDelay(activeElement);
|
|
93249
|
+
activeElement.classList.remove('is-inview');
|
|
93250
|
+
activeElement.removeAttribute('data-scroll');
|
|
93251
|
+
this.read(); //Trigger Change event
|
|
93252
|
+
|
|
93253
|
+
this.builder.settings.onChange();
|
|
92734
93254
|
}); // Start
|
|
92735
93255
|
|
|
92736
93256
|
btns = modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
@@ -92755,13 +93275,25 @@ class AnimateScroll {
|
|
|
92755
93275
|
btn.classList.add('on');
|
|
92756
93276
|
this.apply();
|
|
92757
93277
|
});
|
|
93278
|
+
}); // Leave Start
|
|
93279
|
+
|
|
93280
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
93281
|
+
btns.forEach(btn => {
|
|
93282
|
+
btn.addEventListener('click', () => {
|
|
93283
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
93284
|
+
elms.forEach(elm => {
|
|
93285
|
+
elm.classList.remove('on');
|
|
93286
|
+
});
|
|
93287
|
+
btn.classList.add('on');
|
|
93288
|
+
this.apply();
|
|
93289
|
+
});
|
|
92758
93290
|
}); // Slide X
|
|
92759
93291
|
|
|
92760
|
-
btns =
|
|
93292
|
+
btns = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
92761
93293
|
btns.forEach(btn => {
|
|
92762
93294
|
btn.addEventListener('click', () => {
|
|
92763
|
-
const inpSlideLeft =
|
|
92764
|
-
const inpSlideRight =
|
|
93295
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
|
|
93296
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
|
|
92765
93297
|
|
|
92766
93298
|
if (btn.classList.contains('on')) {
|
|
92767
93299
|
btn.classList.remove('on');
|
|
@@ -92771,51 +93303,51 @@ class AnimateScroll {
|
|
|
92771
93303
|
return;
|
|
92772
93304
|
}
|
|
92773
93305
|
|
|
92774
|
-
let elms =
|
|
93306
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
92775
93307
|
elms.forEach(elm => {
|
|
92776
93308
|
elm.classList.remove('on');
|
|
92777
93309
|
});
|
|
92778
93310
|
btn.classList.add('on');
|
|
92779
93311
|
|
|
92780
93312
|
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
92781
|
-
inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '');
|
|
93313
|
+
inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
92782
93314
|
inpSlideRight.value = '';
|
|
92783
93315
|
} else {
|
|
92784
|
-
inpSlideRight.value = btn.getAttribute('data-value');
|
|
93316
|
+
inpSlideRight.value = btn.getAttribute('data-value').replace('px', '');
|
|
92785
93317
|
inpSlideLeft.value = '';
|
|
92786
93318
|
}
|
|
92787
93319
|
|
|
92788
93320
|
this.apply();
|
|
92789
93321
|
});
|
|
92790
93322
|
});
|
|
92791
|
-
const inpSlideLeft =
|
|
92792
|
-
const inpSlideRight =
|
|
93323
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
|
|
93324
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
|
|
92793
93325
|
inpSlideLeft.addEventListener('change', () => {
|
|
92794
|
-
let elms =
|
|
93326
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
92795
93327
|
elms.forEach(elm => {
|
|
92796
93328
|
elm.classList.remove('on');
|
|
92797
93329
|
});
|
|
92798
93330
|
inpSlideRight.value = '';
|
|
92799
93331
|
this.apply();
|
|
92800
|
-
let btn = this.
|
|
93332
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft.value}px"]`);
|
|
92801
93333
|
if (btn) btn.classList.add('on');
|
|
92802
93334
|
});
|
|
92803
93335
|
inpSlideRight.addEventListener('change', () => {
|
|
92804
|
-
let elms =
|
|
93336
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
92805
93337
|
elms.forEach(elm => {
|
|
92806
93338
|
elm.classList.remove('on');
|
|
92807
93339
|
});
|
|
92808
93340
|
inpSlideLeft.value = '';
|
|
92809
93341
|
this.apply();
|
|
92810
|
-
let btn = this.
|
|
93342
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight.value}px"]`);
|
|
92811
93343
|
if (btn) btn.classList.add('on');
|
|
92812
93344
|
}); // Slide Y
|
|
92813
93345
|
|
|
92814
|
-
btns =
|
|
93346
|
+
btns = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
92815
93347
|
btns.forEach(btn => {
|
|
92816
93348
|
btn.addEventListener('click', () => {
|
|
92817
|
-
const inpSlideUp =
|
|
92818
|
-
const inpSlideDown =
|
|
93349
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93350
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
92819
93351
|
|
|
92820
93352
|
if (btn.classList.contains('on')) {
|
|
92821
93353
|
btn.classList.remove('on');
|
|
@@ -92825,50 +93357,50 @@ class AnimateScroll {
|
|
|
92825
93357
|
return;
|
|
92826
93358
|
}
|
|
92827
93359
|
|
|
92828
|
-
let elms =
|
|
93360
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
92829
93361
|
elms.forEach(elm => {
|
|
92830
93362
|
elm.classList.remove('on');
|
|
92831
93363
|
});
|
|
92832
93364
|
btn.classList.add('on');
|
|
92833
93365
|
|
|
92834
93366
|
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
92835
|
-
inpSlideDown.value = btn.getAttribute('data-value').replace('-', '');
|
|
93367
|
+
inpSlideDown.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
92836
93368
|
inpSlideUp.value = '';
|
|
92837
93369
|
} else {
|
|
92838
|
-
inpSlideUp.value = btn.getAttribute('data-value');
|
|
93370
|
+
inpSlideUp.value = btn.getAttribute('data-value').replace('px', '');
|
|
92839
93371
|
inpSlideDown.value = '';
|
|
92840
93372
|
}
|
|
92841
93373
|
|
|
92842
93374
|
this.apply();
|
|
92843
93375
|
});
|
|
92844
93376
|
});
|
|
92845
|
-
const inpSlideUp =
|
|
92846
|
-
const inpSlideDown =
|
|
93377
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93378
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
92847
93379
|
inpSlideDown.addEventListener('change', () => {
|
|
92848
|
-
let elms =
|
|
93380
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
92849
93381
|
elms.forEach(elm => {
|
|
92850
93382
|
elm.classList.remove('on');
|
|
92851
93383
|
});
|
|
92852
93384
|
inpSlideUp.value = '';
|
|
92853
93385
|
this.apply();
|
|
92854
|
-
let btn = this.
|
|
93386
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideDown.value}px"]`);
|
|
92855
93387
|
if (btn) btn.classList.add('on');
|
|
92856
93388
|
});
|
|
92857
93389
|
inpSlideUp.addEventListener('change', () => {
|
|
92858
|
-
let elms =
|
|
93390
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
92859
93391
|
elms.forEach(elm => {
|
|
92860
93392
|
elm.classList.remove('on');
|
|
92861
93393
|
});
|
|
92862
93394
|
inpSlideDown.value = '';
|
|
92863
93395
|
this.apply();
|
|
92864
|
-
let btn = this.
|
|
93396
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${inpSlideUp.value}px"]`);
|
|
92865
93397
|
if (btn) btn.classList.add('on');
|
|
92866
93398
|
}); // Scale
|
|
92867
93399
|
|
|
92868
|
-
btns =
|
|
93400
|
+
btns = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
92869
93401
|
btns.forEach(btn => {
|
|
92870
93402
|
btn.addEventListener('click', () => {
|
|
92871
|
-
const inpScale =
|
|
93403
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
92872
93404
|
|
|
92873
93405
|
if (btn.classList.contains('on')) {
|
|
92874
93406
|
btn.classList.remove('on');
|
|
@@ -92877,7 +93409,7 @@ class AnimateScroll {
|
|
|
92877
93409
|
return;
|
|
92878
93410
|
}
|
|
92879
93411
|
|
|
92880
|
-
let elms =
|
|
93412
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
92881
93413
|
elms.forEach(elm => {
|
|
92882
93414
|
elm.classList.remove('on');
|
|
92883
93415
|
});
|
|
@@ -92886,22 +93418,346 @@ class AnimateScroll {
|
|
|
92886
93418
|
this.apply();
|
|
92887
93419
|
});
|
|
92888
93420
|
});
|
|
92889
|
-
const inpScale =
|
|
93421
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
92890
93422
|
inpScale.addEventListener('change', () => {
|
|
92891
|
-
let elms =
|
|
93423
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93424
|
+
elms.forEach(elm => {
|
|
93425
|
+
elm.classList.remove('on');
|
|
93426
|
+
});
|
|
93427
|
+
this.apply();
|
|
93428
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${inpScale.value}"]`);
|
|
93429
|
+
if (btn) btn.classList.add('on');
|
|
93430
|
+
}); // Rotate
|
|
93431
|
+
|
|
93432
|
+
btns = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93433
|
+
btns.forEach(btn => {
|
|
93434
|
+
btn.addEventListener('click', () => {
|
|
93435
|
+
const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93436
|
+
const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93437
|
+
|
|
93438
|
+
if (btn.classList.contains('on')) {
|
|
93439
|
+
btn.classList.remove('on');
|
|
93440
|
+
inpRotateClockwise.value = '';
|
|
93441
|
+
inpRotateCounter.value = '';
|
|
93442
|
+
this.apply();
|
|
93443
|
+
return;
|
|
93444
|
+
}
|
|
93445
|
+
|
|
93446
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93447
|
+
elms.forEach(elm => {
|
|
93448
|
+
elm.classList.remove('on');
|
|
93449
|
+
});
|
|
93450
|
+
btn.classList.add('on');
|
|
93451
|
+
|
|
93452
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93453
|
+
inpRotateClockwise.value = btn.getAttribute('data-value').replace('-', '');
|
|
93454
|
+
inpRotateCounter.value = '';
|
|
93455
|
+
} else {
|
|
93456
|
+
inpRotateCounter.value = btn.getAttribute('data-value');
|
|
93457
|
+
inpRotateClockwise.value = '';
|
|
93458
|
+
}
|
|
93459
|
+
|
|
93460
|
+
this.apply();
|
|
93461
|
+
});
|
|
93462
|
+
});
|
|
93463
|
+
const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93464
|
+
const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93465
|
+
inpRotateClockwise.addEventListener('change', () => {
|
|
93466
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93467
|
+
elms.forEach(elm => {
|
|
93468
|
+
elm.classList.remove('on');
|
|
93469
|
+
});
|
|
93470
|
+
inpRotateCounter.value = '';
|
|
93471
|
+
this.apply();
|
|
93472
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateClockwise.value}"]`);
|
|
93473
|
+
if (btn) btn.classList.add('on');
|
|
93474
|
+
});
|
|
93475
|
+
inpRotateCounter.addEventListener('change', () => {
|
|
93476
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93477
|
+
elms.forEach(elm => {
|
|
93478
|
+
elm.classList.remove('on');
|
|
93479
|
+
});
|
|
93480
|
+
inpRotateClockwise.value = '';
|
|
93481
|
+
this.apply();
|
|
93482
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${inpRotateCounter.value}"]`);
|
|
93483
|
+
if (btn) btn.classList.add('on');
|
|
93484
|
+
}); // Fade
|
|
93485
|
+
|
|
93486
|
+
let btnFade = divEnterAnim.querySelector('.cmd-fade');
|
|
93487
|
+
btnFade.addEventListener('click', () => {
|
|
93488
|
+
if (btnFade.classList.contains('on')) {
|
|
93489
|
+
btnFade.classList.remove('on');
|
|
93490
|
+
} else {
|
|
93491
|
+
btnFade.classList.add('on');
|
|
93492
|
+
}
|
|
93493
|
+
|
|
93494
|
+
this.apply();
|
|
93495
|
+
}); // Clear
|
|
93496
|
+
|
|
93497
|
+
let btnClearSlideLeft = divEnterAnim.querySelector('.cmd-clear-slide-left');
|
|
93498
|
+
btnClearSlideLeft.addEventListener('click', () => {
|
|
93499
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-left');
|
|
93500
|
+
if (inpSlideLeft.value === '') return;
|
|
93501
|
+
this.builder.editor.saveForUndo();
|
|
93502
|
+
inpSlideLeft.value = '';
|
|
93503
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93504
|
+
elms.forEach(elm => {
|
|
93505
|
+
elm.classList.remove('on');
|
|
93506
|
+
});
|
|
93507
|
+
this.apply(); //Trigger Change event
|
|
93508
|
+
|
|
93509
|
+
this.builder.settings.onChange();
|
|
93510
|
+
});
|
|
93511
|
+
let btnClearSlideRight = divEnterAnim.querySelector('.cmd-clear-slide-right');
|
|
93512
|
+
btnClearSlideRight.addEventListener('click', () => {
|
|
93513
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-right');
|
|
93514
|
+
if (inpSlideRight.value === '') return;
|
|
93515
|
+
this.builder.editor.saveForUndo();
|
|
93516
|
+
inpSlideRight.value = '';
|
|
93517
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93518
|
+
elms.forEach(elm => {
|
|
93519
|
+
elm.classList.remove('on');
|
|
93520
|
+
});
|
|
93521
|
+
this.apply(); //Trigger Change event
|
|
93522
|
+
|
|
93523
|
+
this.builder.settings.onChange();
|
|
93524
|
+
});
|
|
93525
|
+
let btnClearSlideUp = divEnterAnim.querySelector('.cmd-clear-slide-up');
|
|
93526
|
+
btnClearSlideUp.addEventListener('click', () => {
|
|
93527
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93528
|
+
if (inpSlideUp.value === '') return;
|
|
93529
|
+
this.builder.editor.saveForUndo();
|
|
93530
|
+
inpSlideUp.value = '';
|
|
93531
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93532
|
+
elms.forEach(elm => {
|
|
93533
|
+
elm.classList.remove('on');
|
|
93534
|
+
});
|
|
93535
|
+
this.apply(); //Trigger Change event
|
|
93536
|
+
|
|
93537
|
+
this.builder.settings.onChange();
|
|
93538
|
+
});
|
|
93539
|
+
let btnClearSlideDown = divEnterAnim.querySelector('.cmd-clear-slide-down');
|
|
93540
|
+
btnClearSlideDown.addEventListener('click', () => {
|
|
93541
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
93542
|
+
if (inpSlideDown.value === '') return;
|
|
93543
|
+
this.builder.editor.saveForUndo();
|
|
93544
|
+
inpSlideDown.value = '';
|
|
93545
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93546
|
+
elms.forEach(elm => {
|
|
93547
|
+
elm.classList.remove('on');
|
|
93548
|
+
});
|
|
93549
|
+
this.apply(); //Trigger Change event
|
|
93550
|
+
|
|
93551
|
+
this.builder.settings.onChange();
|
|
93552
|
+
});
|
|
93553
|
+
let btnClearScale = divEnterAnim.querySelector('.cmd-clear-scale');
|
|
93554
|
+
btnClearScale.addEventListener('click', () => {
|
|
93555
|
+
this.builder.editor.saveForUndo();
|
|
93556
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
93557
|
+
inpScale.value = '';
|
|
93558
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93559
|
+
elms.forEach(elm => {
|
|
93560
|
+
elm.classList.remove('on');
|
|
93561
|
+
});
|
|
93562
|
+
this.apply(); //Trigger Change event
|
|
93563
|
+
|
|
93564
|
+
this.builder.settings.onChange();
|
|
93565
|
+
});
|
|
93566
|
+
let btnClearRotateClockwise = divEnterAnim.querySelector('.cmd-clear-rotate-clockwise');
|
|
93567
|
+
btnClearRotateClockwise.addEventListener('click', () => {
|
|
93568
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93569
|
+
if (inpRotateCounter.value === '') return;
|
|
93570
|
+
this.builder.editor.saveForUndo();
|
|
93571
|
+
inpRotateCounter.value = '';
|
|
93572
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93573
|
+
elms.forEach(elm => {
|
|
93574
|
+
elm.classList.remove('on');
|
|
93575
|
+
});
|
|
93576
|
+
this.apply(); //Trigger Change event
|
|
93577
|
+
|
|
93578
|
+
this.builder.settings.onChange();
|
|
93579
|
+
});
|
|
93580
|
+
let btnClearRotateCounter = divEnterAnim.querySelector('.cmd-clear-rotate-counter');
|
|
93581
|
+
btnClearRotateCounter.addEventListener('click', () => {
|
|
93582
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93583
|
+
if (inpRotateClockwise.value === '') return;
|
|
93584
|
+
this.builder.editor.saveForUndo();
|
|
93585
|
+
inpRotateClockwise.value = '';
|
|
93586
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93587
|
+
elms.forEach(elm => {
|
|
93588
|
+
elm.classList.remove('on');
|
|
93589
|
+
});
|
|
93590
|
+
this.apply(); //Trigger Change event
|
|
93591
|
+
|
|
93592
|
+
this.builder.settings.onChange();
|
|
93593
|
+
});
|
|
93594
|
+
let btnClear = divEnterAnim.querySelector('.cmd-clear-scrollanim');
|
|
93595
|
+
btnClear.addEventListener('click', () => {
|
|
93596
|
+
let activeElement;
|
|
93597
|
+
let target = this.getTarget();
|
|
93598
|
+
activeElement = target.element;
|
|
93599
|
+
if (!activeElement) return;
|
|
93600
|
+
this.builder.editor.saveForUndo();
|
|
93601
|
+
this.cleanup(activeElement);
|
|
93602
|
+
this.read();
|
|
93603
|
+
activeElement.style.transform = '';
|
|
93604
|
+
activeElement.style.transition = '';
|
|
93605
|
+
activeElement.style.opacity = '';
|
|
93606
|
+
|
|
93607
|
+
if (this.builder.win.skrollrr) {
|
|
93608
|
+
this.builder.win.skrollrr.refresh();
|
|
93609
|
+
} //Trigger Change event
|
|
93610
|
+
|
|
93611
|
+
|
|
93612
|
+
this.builder.settings.onChange();
|
|
93613
|
+
}); // ------------- LEAVE --------------
|
|
93614
|
+
// Slide X
|
|
93615
|
+
|
|
93616
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93617
|
+
btns.forEach(btn => {
|
|
93618
|
+
btn.addEventListener('click', () => {
|
|
93619
|
+
const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93620
|
+
const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93621
|
+
|
|
93622
|
+
if (btn.classList.contains('on')) {
|
|
93623
|
+
btn.classList.remove('on');
|
|
93624
|
+
inpSlideLeft_leave.value = '';
|
|
93625
|
+
inpSlideRight_leave.value = '';
|
|
93626
|
+
this.apply();
|
|
93627
|
+
return;
|
|
93628
|
+
}
|
|
93629
|
+
|
|
93630
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93631
|
+
elms.forEach(elm => {
|
|
93632
|
+
elm.classList.remove('on');
|
|
93633
|
+
});
|
|
93634
|
+
btn.classList.add('on');
|
|
93635
|
+
|
|
93636
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93637
|
+
inpSlideLeft_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93638
|
+
inpSlideRight_leave.value = '';
|
|
93639
|
+
} else {
|
|
93640
|
+
inpSlideRight_leave.value = btn.getAttribute('data-value').replace('px', '');
|
|
93641
|
+
inpSlideLeft_leave.value = '';
|
|
93642
|
+
}
|
|
93643
|
+
|
|
93644
|
+
this.apply();
|
|
93645
|
+
});
|
|
93646
|
+
});
|
|
93647
|
+
const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93648
|
+
const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93649
|
+
inpSlideLeft_leave.addEventListener('change', () => {
|
|
93650
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93651
|
+
elms.forEach(elm => {
|
|
93652
|
+
elm.classList.remove('on');
|
|
93653
|
+
});
|
|
93654
|
+
inpSlideRight_leave.value = '';
|
|
93655
|
+
this.apply();
|
|
93656
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft_leave.value}px"]`);
|
|
93657
|
+
if (btn) btn.classList.add('on');
|
|
93658
|
+
});
|
|
93659
|
+
inpSlideRight_leave.addEventListener('change', () => {
|
|
93660
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93661
|
+
elms.forEach(elm => {
|
|
93662
|
+
elm.classList.remove('on');
|
|
93663
|
+
});
|
|
93664
|
+
inpSlideLeft_leave.value = '';
|
|
93665
|
+
this.apply();
|
|
93666
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight_leave.value}px"]`);
|
|
93667
|
+
if (btn) btn.classList.add('on');
|
|
93668
|
+
}); // Slide Y
|
|
93669
|
+
|
|
93670
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93671
|
+
btns.forEach(btn => {
|
|
93672
|
+
btn.addEventListener('click', () => {
|
|
93673
|
+
const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93674
|
+
const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93675
|
+
|
|
93676
|
+
if (btn.classList.contains('on')) {
|
|
93677
|
+
btn.classList.remove('on');
|
|
93678
|
+
inpSlideUp_leave.value = '';
|
|
93679
|
+
inpSlideDown_leave.value = '';
|
|
93680
|
+
this.apply();
|
|
93681
|
+
return;
|
|
93682
|
+
}
|
|
93683
|
+
|
|
93684
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93685
|
+
elms.forEach(elm => {
|
|
93686
|
+
elm.classList.remove('on');
|
|
93687
|
+
});
|
|
93688
|
+
btn.classList.add('on');
|
|
93689
|
+
|
|
93690
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93691
|
+
inpSlideUp_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93692
|
+
inpSlideDown_leave.value = '';
|
|
93693
|
+
} else {
|
|
93694
|
+
inpSlideDown_leave.value = btn.getAttribute('data-value').replace('px', '');
|
|
93695
|
+
inpSlideUp_leave.value = '';
|
|
93696
|
+
}
|
|
93697
|
+
|
|
93698
|
+
this.apply();
|
|
93699
|
+
});
|
|
93700
|
+
});
|
|
93701
|
+
const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93702
|
+
const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93703
|
+
inpSlideDown_leave.addEventListener('change', () => {
|
|
93704
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93705
|
+
elms.forEach(elm => {
|
|
93706
|
+
elm.classList.remove('on');
|
|
93707
|
+
});
|
|
93708
|
+
inpSlideUp_leave.value = '';
|
|
93709
|
+
this.apply();
|
|
93710
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${inpSlideDown_leave.value}px"]`);
|
|
93711
|
+
if (btn) btn.classList.add('on');
|
|
93712
|
+
});
|
|
93713
|
+
inpSlideUp_leave.addEventListener('change', () => {
|
|
93714
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93715
|
+
elms.forEach(elm => {
|
|
93716
|
+
elm.classList.remove('on');
|
|
93717
|
+
});
|
|
93718
|
+
inpSlideDown_leave.value = '';
|
|
93719
|
+
this.apply();
|
|
93720
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideUp_leave.value}px"]`);
|
|
93721
|
+
if (btn) btn.classList.add('on');
|
|
93722
|
+
}); // Scale
|
|
93723
|
+
|
|
93724
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93725
|
+
btns.forEach(btn => {
|
|
93726
|
+
btn.addEventListener('click', () => {
|
|
93727
|
+
const inpScale = divLeaveAnim.querySelector('.inp-scale');
|
|
93728
|
+
|
|
93729
|
+
if (btn.classList.contains('on')) {
|
|
93730
|
+
btn.classList.remove('on');
|
|
93731
|
+
inpScale.value = '';
|
|
93732
|
+
this.apply();
|
|
93733
|
+
return;
|
|
93734
|
+
}
|
|
93735
|
+
|
|
93736
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93737
|
+
elms.forEach(elm => {
|
|
93738
|
+
elm.classList.remove('on');
|
|
93739
|
+
});
|
|
93740
|
+
btn.classList.add('on');
|
|
93741
|
+
inpScale.value = btn.getAttribute('data-value');
|
|
93742
|
+
this.apply();
|
|
93743
|
+
});
|
|
93744
|
+
});
|
|
93745
|
+
const inpScale_leave = divLeaveAnim.querySelector('.inp-scale');
|
|
93746
|
+
inpScale_leave.addEventListener('change', () => {
|
|
93747
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
92892
93748
|
elms.forEach(elm => {
|
|
92893
93749
|
elm.classList.remove('on');
|
|
92894
93750
|
});
|
|
92895
93751
|
this.apply();
|
|
92896
|
-
let btn = this.
|
|
93752
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${inpScale_leave.value}"]`);
|
|
92897
93753
|
if (btn) btn.classList.add('on');
|
|
92898
93754
|
}); // Rotate
|
|
92899
93755
|
|
|
92900
|
-
btns =
|
|
93756
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
92901
93757
|
btns.forEach(btn => {
|
|
92902
93758
|
btn.addEventListener('click', () => {
|
|
92903
|
-
const inpRotateClockwise =
|
|
92904
|
-
const inpRotateCounter =
|
|
93759
|
+
const inpRotateClockwise = divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93760
|
+
const inpRotateCounter = divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
92905
93761
|
|
|
92906
93762
|
if (btn.classList.contains('on')) {
|
|
92907
93763
|
btn.classList.remove('on');
|
|
@@ -92911,67 +93767,165 @@ class AnimateScroll {
|
|
|
92911
93767
|
return;
|
|
92912
93768
|
}
|
|
92913
93769
|
|
|
92914
|
-
let elms =
|
|
93770
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
92915
93771
|
elms.forEach(elm => {
|
|
92916
93772
|
elm.classList.remove('on');
|
|
92917
93773
|
});
|
|
92918
93774
|
btn.classList.add('on');
|
|
92919
93775
|
|
|
92920
93776
|
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
92921
|
-
|
|
92922
|
-
inpRotateCounter.value = '';
|
|
92923
|
-
} else {
|
|
92924
|
-
inpRotateCounter.value = btn.getAttribute('data-value');
|
|
93777
|
+
inpRotateCounter.value = btn.getAttribute('data-value').replace('-', '');
|
|
92925
93778
|
inpRotateClockwise.value = '';
|
|
93779
|
+
} else {
|
|
93780
|
+
inpRotateClockwise.value = btn.getAttribute('data-value');
|
|
93781
|
+
inpRotateCounter.value = '';
|
|
92926
93782
|
}
|
|
92927
93783
|
|
|
92928
93784
|
this.apply();
|
|
92929
93785
|
});
|
|
92930
93786
|
});
|
|
92931
|
-
const
|
|
92932
|
-
const
|
|
92933
|
-
|
|
92934
|
-
let elms =
|
|
93787
|
+
const inpRotateClockwise_leave = divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93788
|
+
const inpRotateCounter_leave = divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
93789
|
+
inpRotateClockwise_leave.addEventListener('change', () => {
|
|
93790
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
92935
93791
|
elms.forEach(elm => {
|
|
92936
93792
|
elm.classList.remove('on');
|
|
92937
93793
|
});
|
|
92938
|
-
|
|
93794
|
+
inpRotateCounter_leave.value = '';
|
|
92939
93795
|
this.apply();
|
|
92940
|
-
let btn = this.
|
|
93796
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${inpRotateClockwise_leave.value}"]`);
|
|
92941
93797
|
if (btn) btn.classList.add('on');
|
|
92942
93798
|
});
|
|
92943
|
-
|
|
92944
|
-
let elms =
|
|
93799
|
+
inpRotateCounter_leave.addEventListener('change', () => {
|
|
93800
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
92945
93801
|
elms.forEach(elm => {
|
|
92946
93802
|
elm.classList.remove('on');
|
|
92947
93803
|
});
|
|
92948
|
-
|
|
93804
|
+
inpRotateClockwise_leave.value = '';
|
|
92949
93805
|
this.apply();
|
|
92950
|
-
let btn = this.
|
|
93806
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateCounter_leave.value}"]`);
|
|
92951
93807
|
if (btn) btn.classList.add('on');
|
|
92952
93808
|
}); // Fade
|
|
92953
93809
|
|
|
92954
|
-
let
|
|
92955
|
-
|
|
92956
|
-
if (
|
|
92957
|
-
|
|
93810
|
+
let btnFade_leave = divLeaveAnim.querySelector('.cmd-fade');
|
|
93811
|
+
btnFade_leave.addEventListener('click', () => {
|
|
93812
|
+
if (btnFade_leave.classList.contains('on')) {
|
|
93813
|
+
btnFade_leave.classList.remove('on');
|
|
92958
93814
|
} else {
|
|
92959
|
-
|
|
93815
|
+
btnFade_leave.classList.add('on');
|
|
92960
93816
|
}
|
|
92961
93817
|
|
|
92962
93818
|
this.apply();
|
|
92963
93819
|
}); // Clear
|
|
92964
93820
|
|
|
92965
|
-
let
|
|
92966
|
-
|
|
93821
|
+
let btnClearSlideLeft_leave = divLeaveAnim.querySelector('.cmd-clear-slide-left');
|
|
93822
|
+
btnClearSlideLeft_leave.addEventListener('click', () => {
|
|
93823
|
+
const inpSlideLeft = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93824
|
+
if (inpSlideLeft.value === '') return;
|
|
93825
|
+
this.builder.editor.saveForUndo();
|
|
93826
|
+
inpSlideLeft.value = '';
|
|
93827
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93828
|
+
elms.forEach(elm => {
|
|
93829
|
+
elm.classList.remove('on');
|
|
93830
|
+
});
|
|
93831
|
+
this.apply(); //Trigger Change event
|
|
93832
|
+
|
|
93833
|
+
this.builder.settings.onChange();
|
|
93834
|
+
});
|
|
93835
|
+
let btnClearSlideRight_leave = divLeaveAnim.querySelector('.cmd-clear-slide-right');
|
|
93836
|
+
btnClearSlideRight_leave.addEventListener('click', () => {
|
|
93837
|
+
const inpSlideRight = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93838
|
+
if (inpSlideRight.value === '') return;
|
|
93839
|
+
this.builder.editor.saveForUndo();
|
|
93840
|
+
inpSlideRight.value = '';
|
|
93841
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93842
|
+
elms.forEach(elm => {
|
|
93843
|
+
elm.classList.remove('on');
|
|
93844
|
+
});
|
|
93845
|
+
this.apply(); //Trigger Change event
|
|
93846
|
+
|
|
93847
|
+
this.builder.settings.onChange();
|
|
93848
|
+
});
|
|
93849
|
+
let btnClearSlideUp_leave = divLeaveAnim.querySelector('.cmd-clear-slide-up');
|
|
93850
|
+
btnClearSlideUp_leave.addEventListener('click', () => {
|
|
93851
|
+
const inpSlideUp = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93852
|
+
if (inpSlideUp.value === '') return;
|
|
93853
|
+
this.builder.editor.saveForUndo();
|
|
93854
|
+
inpSlideUp.value = '';
|
|
93855
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93856
|
+
elms.forEach(elm => {
|
|
93857
|
+
elm.classList.remove('on');
|
|
93858
|
+
});
|
|
93859
|
+
this.apply(); //Trigger Change event
|
|
93860
|
+
|
|
93861
|
+
this.builder.settings.onChange();
|
|
93862
|
+
});
|
|
93863
|
+
let btnClearSlideDown_leave = divLeaveAnim.querySelector('.cmd-clear-slide-down');
|
|
93864
|
+
btnClearSlideDown_leave.addEventListener('click', () => {
|
|
93865
|
+
const inpSlideDown = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93866
|
+
if (inpSlideDown.value === '') return;
|
|
93867
|
+
this.builder.editor.saveForUndo();
|
|
93868
|
+
inpSlideDown.value = '';
|
|
93869
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93870
|
+
elms.forEach(elm => {
|
|
93871
|
+
elm.classList.remove('on');
|
|
93872
|
+
});
|
|
93873
|
+
this.apply(); //Trigger Change event
|
|
93874
|
+
|
|
93875
|
+
this.builder.settings.onChange();
|
|
93876
|
+
});
|
|
93877
|
+
let btnClearScale_leave = divLeaveAnim.querySelector('.cmd-clear-scale');
|
|
93878
|
+
btnClearScale_leave.addEventListener('click', () => {
|
|
93879
|
+
this.builder.editor.saveForUndo();
|
|
93880
|
+
const inpScale = divLeaveAnim.querySelector('.inp-scale');
|
|
93881
|
+
inpScale.value = '';
|
|
93882
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93883
|
+
elms.forEach(elm => {
|
|
93884
|
+
elm.classList.remove('on');
|
|
93885
|
+
});
|
|
93886
|
+
this.apply(); //Trigger Change event
|
|
93887
|
+
|
|
93888
|
+
this.builder.settings.onChange();
|
|
93889
|
+
});
|
|
93890
|
+
let btnClearRotateClockwise_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-clockwise');
|
|
93891
|
+
btnClearRotateClockwise_leave.addEventListener('click', () => {
|
|
93892
|
+
const inpRotateCounter = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93893
|
+
if (inpRotateCounter.value === '') return;
|
|
93894
|
+
this.builder.editor.saveForUndo();
|
|
93895
|
+
inpRotateCounter.value = '';
|
|
93896
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93897
|
+
elms.forEach(elm => {
|
|
93898
|
+
elm.classList.remove('on');
|
|
93899
|
+
});
|
|
93900
|
+
this.apply(); //Trigger Change event
|
|
93901
|
+
|
|
93902
|
+
this.builder.settings.onChange();
|
|
93903
|
+
});
|
|
93904
|
+
let btnClearRotateCounter_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-counter');
|
|
93905
|
+
btnClearRotateCounter_leave.addEventListener('click', () => {
|
|
93906
|
+
const inpRotateClockwise = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
93907
|
+
if (inpRotateClockwise.value === '') return;
|
|
93908
|
+
this.builder.editor.saveForUndo();
|
|
93909
|
+
inpRotateClockwise.value = '';
|
|
93910
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93911
|
+
elms.forEach(elm => {
|
|
93912
|
+
elm.classList.remove('on');
|
|
93913
|
+
});
|
|
93914
|
+
this.apply(); //Trigger Change event
|
|
93915
|
+
|
|
93916
|
+
this.builder.settings.onChange();
|
|
93917
|
+
});
|
|
93918
|
+
let btnClear_leave = divLeaveAnim.querySelector('.cmd-clear-scrollanim');
|
|
93919
|
+
btnClear_leave.addEventListener('click', () => {
|
|
92967
93920
|
let activeElement;
|
|
92968
93921
|
let target = this.getTarget();
|
|
92969
93922
|
activeElement = target.element;
|
|
92970
93923
|
if (!activeElement) return;
|
|
92971
93924
|
this.builder.editor.saveForUndo();
|
|
92972
|
-
this.
|
|
92973
|
-
this.
|
|
93925
|
+
this.cleanup_leave(activeElement);
|
|
93926
|
+
this.read();
|
|
92974
93927
|
activeElement.style.transform = '';
|
|
93928
|
+
activeElement.style.transition = '';
|
|
92975
93929
|
activeElement.style.opacity = '';
|
|
92976
93930
|
|
|
92977
93931
|
if (this.builder.win.skrollrr) {
|
|
@@ -92980,111 +93934,294 @@ class AnimateScroll {
|
|
|
92980
93934
|
|
|
92981
93935
|
|
|
92982
93936
|
this.builder.settings.onChange();
|
|
92983
|
-
}); //
|
|
93937
|
+
}); // ---
|
|
93938
|
+
//Extend onContentClick
|
|
92984
93939
|
|
|
92985
93940
|
let old = this.builder.settings.onContentClick;
|
|
92986
93941
|
|
|
92987
93942
|
this.builder.settings.onContentClick = () => {
|
|
92988
93943
|
if (old) old.call(this); // call user's defined onRender
|
|
92989
93944
|
|
|
93945
|
+
if (!this.modalAnimateScroll.classList.contains('active')) return;
|
|
92990
93946
|
setTimeout(() => {
|
|
92991
|
-
this.
|
|
93947
|
+
this.clickContent();
|
|
92992
93948
|
}, 30);
|
|
92993
93949
|
};
|
|
92994
93950
|
}
|
|
92995
93951
|
|
|
92996
|
-
|
|
92997
|
-
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-
|
|
93952
|
+
clickContent() {
|
|
93953
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
93954
|
+
elms.forEach(elm => {
|
|
93955
|
+
elm.classList.remove('on');
|
|
93956
|
+
}); // Dynamically choose target based on selected element
|
|
93957
|
+
|
|
93958
|
+
let currentTarget = this.readTarget();
|
|
93959
|
+
|
|
93960
|
+
if (currentTarget) {
|
|
93961
|
+
if (currentTarget.name === 'element' || currentTarget.name === 'inspectedElement') {
|
|
93962
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
|
|
93963
|
+
btn.classList.add('on');
|
|
93964
|
+
} else if (currentTarget.name === 'column') {
|
|
93965
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=column]');
|
|
93966
|
+
btn.classList.add('on');
|
|
93967
|
+
} else if (currentTarget.name === 'row') {
|
|
93968
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=row]');
|
|
93969
|
+
btn.classList.add('on');
|
|
93970
|
+
} else if (currentTarget.name === 'container') {
|
|
93971
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=container]');
|
|
93972
|
+
btn.classList.add('on');
|
|
93973
|
+
}
|
|
93974
|
+
} else {
|
|
93975
|
+
// no animation on the selected element
|
|
93976
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
|
|
93977
|
+
btn.classList.add('on');
|
|
93978
|
+
}
|
|
93979
|
+
|
|
93980
|
+
this.read();
|
|
93981
|
+
}
|
|
93982
|
+
|
|
93983
|
+
clearSettings() {
|
|
93984
|
+
let elms;
|
|
93985
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
92998
93986
|
elms.forEach(elm => {
|
|
92999
93987
|
elm.classList.remove('on');
|
|
93000
93988
|
});
|
|
93001
|
-
elms = this.modalAnimateScroll.querySelectorAll('.cmd-
|
|
93989
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93002
93990
|
elms.forEach(elm => {
|
|
93003
93991
|
elm.classList.remove('on');
|
|
93004
93992
|
});
|
|
93005
|
-
elms = this.modalAnimateScroll.querySelectorAll('.cmd-
|
|
93993
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
93006
93994
|
elms.forEach(elm => {
|
|
93007
93995
|
elm.classList.remove('on');
|
|
93008
93996
|
});
|
|
93009
|
-
elms = this.modalAnimateScroll.querySelectorAll('.cmd-
|
|
93997
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-end');
|
|
93998
|
+
elms.forEach(elm => {
|
|
93999
|
+
elm.classList.remove('on');
|
|
94000
|
+
});
|
|
94001
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
94002
|
+
elms.forEach(elm => {
|
|
94003
|
+
elm.classList.remove('on');
|
|
94004
|
+
}); // ---
|
|
94005
|
+
|
|
94006
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
94007
|
+
elms.forEach(elm => {
|
|
94008
|
+
elm.classList.remove('on');
|
|
94009
|
+
});
|
|
94010
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
94011
|
+
elms.forEach(elm => {
|
|
94012
|
+
elm.classList.remove('on');
|
|
94013
|
+
});
|
|
94014
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
|
|
94015
|
+
elms.forEach(elm => {
|
|
94016
|
+
elm.classList.remove('on');
|
|
94017
|
+
});
|
|
94018
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
94019
|
+
elms.forEach(elm => {
|
|
94020
|
+
elm.classList.remove('on');
|
|
94021
|
+
});
|
|
94022
|
+
let btn = this.divEnterAnim.querySelector('.cmd-fade');
|
|
94023
|
+
btn.classList.remove('on'); // --- LEAVE ---
|
|
94024
|
+
|
|
94025
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
94026
|
+
elms.forEach(elm => {
|
|
94027
|
+
elm.classList.remove('on');
|
|
94028
|
+
});
|
|
94029
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
94030
|
+
elms.forEach(elm => {
|
|
94031
|
+
elm.classList.remove('on');
|
|
94032
|
+
});
|
|
94033
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93010
94034
|
elms.forEach(elm => {
|
|
93011
94035
|
elm.classList.remove('on');
|
|
93012
94036
|
});
|
|
93013
|
-
|
|
93014
|
-
|
|
94037
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
94038
|
+
elms.forEach(elm => {
|
|
94039
|
+
elm.classList.remove('on');
|
|
94040
|
+
});
|
|
94041
|
+
btn = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94042
|
+
btn.classList.remove('on'); // ---
|
|
94043
|
+
|
|
94044
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94045
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
94046
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94047
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
94048
|
+
inpSlideLeft.value = '';
|
|
94049
|
+
inpSlideRight.value = '';
|
|
94050
|
+
inpSlideUp.value = '';
|
|
94051
|
+
inpSlideDown.value = '';
|
|
94052
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
94053
|
+
inpScale.value = '';
|
|
94054
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
94055
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
94056
|
+
inpRotateCounter.value = '';
|
|
94057
|
+
inpRotateClockwise.value = '';
|
|
94058
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94059
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94060
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94061
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94062
|
+
inpSlideLeft_leave.value = '';
|
|
94063
|
+
inpSlideRight_leave.value = '';
|
|
94064
|
+
inpSlideUp_leave.value = '';
|
|
94065
|
+
inpSlideDown_leave.value = '';
|
|
94066
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94067
|
+
inpScale_leave.value = '';
|
|
94068
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94069
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94070
|
+
inpRotateCounter_leave.value = '';
|
|
94071
|
+
inpRotateClockwise_leave.value = '';
|
|
93015
94072
|
}
|
|
93016
94073
|
|
|
93017
94074
|
read() {
|
|
93018
94075
|
// clear
|
|
93019
|
-
this.
|
|
94076
|
+
this.clearSettings();
|
|
93020
94077
|
let activeElement;
|
|
93021
94078
|
let target = this.getTarget();
|
|
93022
94079
|
activeElement = target.element;
|
|
93023
|
-
if (!activeElement) return; //
|
|
93024
|
-
|
|
94080
|
+
if (!activeElement) return; // Default
|
|
94081
|
+
|
|
94082
|
+
let btnBasic;
|
|
94083
|
+
if (activeElement.classList.contains('is-fadeIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeIn"]');
|
|
94084
|
+
if (activeElement.classList.contains('is-fadeInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInUp"]');
|
|
94085
|
+
if (activeElement.classList.contains('is-fadeInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInDown"]');
|
|
94086
|
+
if (activeElement.classList.contains('is-fadeInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInLeft"]');
|
|
94087
|
+
if (activeElement.classList.contains('is-fadeInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInRight"]');
|
|
94088
|
+
if (activeElement.classList.contains('is-zoomIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomIn"]');
|
|
94089
|
+
if (activeElement.classList.contains('is-zoomOut')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomOut"]');
|
|
94090
|
+
if (activeElement.classList.contains('is-slideInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInUp"]');
|
|
94091
|
+
if (activeElement.classList.contains('is-slideInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInDown"]');
|
|
94092
|
+
if (activeElement.classList.contains('is-slideInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInLeft"]');
|
|
94093
|
+
if (activeElement.classList.contains('is-slideInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInRight"]');
|
|
94094
|
+
if (activeElement.classList.contains('is-flipInX')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInX"]');
|
|
94095
|
+
if (activeElement.classList.contains('is-flipInY')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInY"]');
|
|
94096
|
+
if (activeElement.classList.contains('is-pulse')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-pulse"]');
|
|
94097
|
+
if (activeElement.classList.contains('is-bounceIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-bounceIn"]');
|
|
94098
|
+
if (btnBasic) btnBasic.classList.add('on');
|
|
94099
|
+
let btnDelay;
|
|
94100
|
+
if (activeElement.classList.contains('delay-0ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-0ms"]');
|
|
94101
|
+
if (activeElement.classList.contains('delay-100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-100ms"]');
|
|
94102
|
+
if (activeElement.classList.contains('delay-200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-200ms"]');
|
|
94103
|
+
if (activeElement.classList.contains('delay-300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-300ms"]');
|
|
94104
|
+
if (activeElement.classList.contains('delay-400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-400ms"]');
|
|
94105
|
+
if (activeElement.classList.contains('delay-500ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-500ms"]');
|
|
94106
|
+
if (activeElement.classList.contains('delay-600ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-600ms"]');
|
|
94107
|
+
if (activeElement.classList.contains('delay-700ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-700ms"]');
|
|
94108
|
+
if (activeElement.classList.contains('delay-800ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-800ms"]');
|
|
94109
|
+
if (activeElement.classList.contains('delay-900ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-900ms"]');
|
|
94110
|
+
if (activeElement.classList.contains('delay-1000ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1000ms"]');
|
|
94111
|
+
if (activeElement.classList.contains('delay-1100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1100ms"]');
|
|
94112
|
+
if (activeElement.classList.contains('delay-1200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1200ms"]');
|
|
94113
|
+
if (activeElement.classList.contains('delay-1300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1300ms"]');
|
|
94114
|
+
if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
|
|
94115
|
+
if (btnDelay) btnDelay.classList.add('on');
|
|
94116
|
+
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94117
|
+
if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // enter start
|
|
93025
94118
|
|
|
93026
94119
|
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
93027
94120
|
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
93028
94121
|
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
93029
|
-
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); //
|
|
94122
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94123
|
+
|
|
94124
|
+
let css2 = activeElement.getAttribute('data-top-bottom');
|
|
94125
|
+
let btn;
|
|
93030
94126
|
|
|
93031
|
-
|
|
93032
|
-
|
|
93033
|
-
|
|
94127
|
+
if (activeElement.hasAttribute('data-bottom-top')) {
|
|
94128
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
94129
|
+
if (btn) btn.classList.add('on');
|
|
94130
|
+
}
|
|
94131
|
+
|
|
94132
|
+
if (activeElement.hasAttribute('data-400-bottom')) {
|
|
94133
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-400-bottom"]');
|
|
94134
|
+
if (btn) btn.classList.add('on');
|
|
94135
|
+
}
|
|
94136
|
+
|
|
94137
|
+
if (activeElement.hasAttribute('data-200-bottom')) {
|
|
94138
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-200-bottom"]');
|
|
94139
|
+
if (btn) btn.classList.add('on');
|
|
94140
|
+
}
|
|
94141
|
+
|
|
94142
|
+
if (activeElement.hasAttribute('data--50-bottom')) {
|
|
94143
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data--50-bottom"]');
|
|
94144
|
+
if (btn) btn.classList.add('on');
|
|
94145
|
+
}
|
|
94146
|
+
|
|
94147
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
|
|
94148
|
+
// default
|
|
94149
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
94150
|
+
if (btn) btn.classList.add('on');
|
|
94151
|
+
}
|
|
94152
|
+
|
|
94153
|
+
if (activeElement.hasAttribute('data-bottom')) {
|
|
94154
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-bottom"]');
|
|
94155
|
+
if (btn) btn.classList.add('on');
|
|
94156
|
+
}
|
|
94157
|
+
|
|
94158
|
+
if (activeElement.hasAttribute('data-center-top')) {
|
|
94159
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center-top"]');
|
|
94160
|
+
if (btn) btn.classList.add('on');
|
|
94161
|
+
}
|
|
94162
|
+
|
|
94163
|
+
if (activeElement.hasAttribute('data-center')) {
|
|
94164
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
94165
|
+
if (btn) btn.classList.add('on');
|
|
94166
|
+
}
|
|
94167
|
+
|
|
94168
|
+
if (activeElement.hasAttribute('data-top-bottom')) {
|
|
94169
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-top-bottom"]');
|
|
94170
|
+
if (btn) btn.classList.add('on');
|
|
94171
|
+
}
|
|
94172
|
+
|
|
94173
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
|
|
94174
|
+
// default
|
|
94175
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
94176
|
+
if (btn) btn.classList.add('on');
|
|
94177
|
+
}
|
|
93034
94178
|
|
|
93035
94179
|
let dummyElm = document.querySelector('.dummy-elm');
|
|
93036
94180
|
dummyElm.style.cssText = css1;
|
|
93037
94181
|
let transform = this.getTransform(dummyElm, css1); // console.log(transform);
|
|
93038
94182
|
|
|
93039
|
-
|
|
94183
|
+
btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
|
|
93040
94184
|
if (btn) btn.classList.add('on');
|
|
93041
|
-
btn = this.
|
|
94185
|
+
btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
|
|
93042
94186
|
if (btn) btn.classList.add('on');
|
|
93043
|
-
btn = this.
|
|
94187
|
+
btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
|
|
93044
94188
|
if (btn) btn.classList.add('on');
|
|
93045
94189
|
|
|
93046
94190
|
if (transform.rotate) {
|
|
93047
|
-
btn = this.
|
|
94191
|
+
btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
|
|
93048
94192
|
if (btn) btn.classList.add('on');
|
|
93049
94193
|
}
|
|
93050
94194
|
|
|
93051
|
-
const inpSlideLeft = this.
|
|
93052
|
-
const inpSlideRight = this.
|
|
93053
|
-
inpSlideLeft.value = '';
|
|
93054
|
-
inpSlideRight.value = '';
|
|
94195
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94196
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
93055
94197
|
|
|
93056
94198
|
if (transform.translateX) {
|
|
93057
94199
|
if (transform.translateX.indexOf('-') !== -1) {
|
|
93058
|
-
|
|
94200
|
+
inpSlideRight.value = transform.translateX.replace('-', '').replace('px', '');
|
|
93059
94201
|
} else {
|
|
93060
|
-
|
|
94202
|
+
inpSlideLeft.value = transform.translateX.replace('px', '');
|
|
93061
94203
|
}
|
|
93062
94204
|
}
|
|
93063
94205
|
|
|
93064
|
-
const inpSlideUp = this.
|
|
93065
|
-
const inpSlideDown = this.
|
|
93066
|
-
inpSlideUp.value = '';
|
|
93067
|
-
inpSlideDown.value = '';
|
|
94206
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94207
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
93068
94208
|
|
|
93069
94209
|
if (transform.translateY) {
|
|
93070
94210
|
if (transform.translateY.indexOf('-') !== -1) {
|
|
93071
|
-
inpSlideDown.value = transform.translateY.replace('-', '');
|
|
94211
|
+
inpSlideDown.value = transform.translateY.replace('-', '').replace('px', '');
|
|
93072
94212
|
} else {
|
|
93073
|
-
inpSlideUp.value = transform.translateY;
|
|
94213
|
+
inpSlideUp.value = transform.translateY.replace('px', '');
|
|
93074
94214
|
}
|
|
93075
94215
|
}
|
|
93076
94216
|
|
|
93077
|
-
const inpScale = this.
|
|
93078
|
-
inpScale.value = '';
|
|
94217
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
93079
94218
|
|
|
93080
94219
|
if (transform.scale) {
|
|
93081
94220
|
inpScale.value = transform.scale;
|
|
93082
94221
|
}
|
|
93083
94222
|
|
|
93084
|
-
const inpRotateCounter = this.
|
|
93085
|
-
const inpRotateClockwise = this.
|
|
93086
|
-
inpRotateCounter.value = '';
|
|
93087
|
-
inpRotateClockwise.value = '';
|
|
94223
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
94224
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93088
94225
|
|
|
93089
94226
|
if (transform.rotate) {
|
|
93090
94227
|
if (transform.rotate.indexOf('-') !== -1) {
|
|
@@ -93095,9 +94232,214 @@ class AnimateScroll {
|
|
|
93095
94232
|
}
|
|
93096
94233
|
|
|
93097
94234
|
if (transform.opacity) {
|
|
93098
|
-
btn = this.
|
|
94235
|
+
btn = this.divEnterAnim.querySelector('.cmd-fade');
|
|
94236
|
+
if (btn) btn.classList.add('on');
|
|
94237
|
+
} // --- LEAVE ---
|
|
94238
|
+
|
|
94239
|
+
|
|
94240
|
+
if (activeElement.hasAttribute('data-center-bottom')) {
|
|
94241
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
94242
|
+
if (btn) btn.classList.add('on');
|
|
94243
|
+
}
|
|
94244
|
+
|
|
94245
|
+
if (activeElement.hasAttribute('data-100-top')) {
|
|
94246
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-100-top"]');
|
|
94247
|
+
if (btn) btn.classList.add('on');
|
|
94248
|
+
}
|
|
94249
|
+
|
|
94250
|
+
if (activeElement.hasAttribute('data-50-top')) {
|
|
94251
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-50-top"]');
|
|
94252
|
+
if (btn) btn.classList.add('on');
|
|
94253
|
+
}
|
|
94254
|
+
|
|
94255
|
+
if (activeElement.hasAttribute('data-top')) {
|
|
94256
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-top"]');
|
|
93099
94257
|
if (btn) btn.classList.add('on');
|
|
93100
94258
|
}
|
|
94259
|
+
|
|
94260
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
|
|
94261
|
+
// default
|
|
94262
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
94263
|
+
if (btn) btn.classList.add('on');
|
|
94264
|
+
}
|
|
94265
|
+
|
|
94266
|
+
dummyElm.style.cssText = css2;
|
|
94267
|
+
transform = this.getTransform(dummyElm, css2); // console.log(transform);
|
|
94268
|
+
|
|
94269
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
|
|
94270
|
+
if (btn) btn.classList.add('on');
|
|
94271
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
|
|
94272
|
+
if (btn) btn.classList.add('on');
|
|
94273
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
|
|
94274
|
+
if (btn) btn.classList.add('on');
|
|
94275
|
+
|
|
94276
|
+
if (transform.rotate) {
|
|
94277
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
|
|
94278
|
+
if (btn) btn.classList.add('on');
|
|
94279
|
+
}
|
|
94280
|
+
|
|
94281
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94282
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94283
|
+
|
|
94284
|
+
if (transform.translateX) {
|
|
94285
|
+
if (transform.translateX.indexOf('-') !== -1) {
|
|
94286
|
+
inpSlideLeft_leave.value = transform.translateX.replace('-', '').replace('px', '');
|
|
94287
|
+
} else {
|
|
94288
|
+
inpSlideRight_leave.value = transform.translateX.replace('px', '');
|
|
94289
|
+
}
|
|
94290
|
+
}
|
|
94291
|
+
|
|
94292
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94293
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94294
|
+
|
|
94295
|
+
if (transform.translateY) {
|
|
94296
|
+
if (transform.translateY.indexOf('-') !== -1) {
|
|
94297
|
+
inpSlideUp_leave.value = transform.translateY.replace('-', '').replace('px', '');
|
|
94298
|
+
} else {
|
|
94299
|
+
inpSlideDown_leave.value = transform.translateY.replace('px', '');
|
|
94300
|
+
}
|
|
94301
|
+
}
|
|
94302
|
+
|
|
94303
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94304
|
+
|
|
94305
|
+
if (transform.scale) {
|
|
94306
|
+
inpScale_leave.value = transform.scale;
|
|
94307
|
+
}
|
|
94308
|
+
|
|
94309
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94310
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94311
|
+
|
|
94312
|
+
if (transform.rotate) {
|
|
94313
|
+
if (transform.rotate.indexOf('-') !== -1) {
|
|
94314
|
+
inpRotateCounter_leave.value = transform.rotate.replace('-', '');
|
|
94315
|
+
} else {
|
|
94316
|
+
inpRotateClockwise_leave.value = transform.rotate;
|
|
94317
|
+
}
|
|
94318
|
+
}
|
|
94319
|
+
|
|
94320
|
+
if (transform.opacity) {
|
|
94321
|
+
btn = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94322
|
+
if (btn) btn.classList.add('on');
|
|
94323
|
+
}
|
|
94324
|
+
|
|
94325
|
+
return true;
|
|
94326
|
+
}
|
|
94327
|
+
|
|
94328
|
+
cleanupBasic(activeElement) {
|
|
94329
|
+
activeElement.classList.remove('is-animated');
|
|
94330
|
+
activeElement.classList.remove('once');
|
|
94331
|
+
activeElement.classList.remove('is-fadeIn');
|
|
94332
|
+
activeElement.classList.remove('is-fadeInUp');
|
|
94333
|
+
activeElement.classList.remove('is-fadeInDown');
|
|
94334
|
+
activeElement.classList.remove('is-fadeInLeft');
|
|
94335
|
+
activeElement.classList.remove('is-fadeInRight');
|
|
94336
|
+
activeElement.classList.remove('is-zoomIn');
|
|
94337
|
+
activeElement.classList.remove('is-zoomOut');
|
|
94338
|
+
activeElement.classList.remove('is-slideInUp');
|
|
94339
|
+
activeElement.classList.remove('is-slideInDown');
|
|
94340
|
+
activeElement.classList.remove('is-slideInLeft');
|
|
94341
|
+
activeElement.classList.remove('is-slideInRight');
|
|
94342
|
+
activeElement.classList.remove('is-flipInX');
|
|
94343
|
+
activeElement.classList.remove('is-flipInY');
|
|
94344
|
+
activeElement.classList.remove('is-pulse');
|
|
94345
|
+
activeElement.classList.remove('is-bounceIn');
|
|
94346
|
+
}
|
|
94347
|
+
|
|
94348
|
+
cleanupDelay(activeElement) {
|
|
94349
|
+
activeElement.classList.remove('delay-0ms');
|
|
94350
|
+
activeElement.classList.remove('delay-100ms');
|
|
94351
|
+
activeElement.classList.remove('delay-200ms');
|
|
94352
|
+
activeElement.classList.remove('delay-300ms');
|
|
94353
|
+
activeElement.classList.remove('delay-400ms');
|
|
94354
|
+
activeElement.classList.remove('delay-500ms');
|
|
94355
|
+
activeElement.classList.remove('delay-600ms');
|
|
94356
|
+
activeElement.classList.remove('delay-700ms');
|
|
94357
|
+
activeElement.classList.remove('delay-800ms');
|
|
94358
|
+
activeElement.classList.remove('delay-900ms');
|
|
94359
|
+
activeElement.classList.remove('delay-1000ms');
|
|
94360
|
+
activeElement.classList.remove('delay-1100ms');
|
|
94361
|
+
activeElement.classList.remove('delay-1200ms');
|
|
94362
|
+
activeElement.classList.remove('delay-1300ms');
|
|
94363
|
+
activeElement.classList.remove('delay-1400ms');
|
|
94364
|
+
activeElement.classList.remove('delay-1500ms');
|
|
94365
|
+
activeElement.classList.remove('delay-1600ms');
|
|
94366
|
+
activeElement.classList.remove('delay-1700ms');
|
|
94367
|
+
activeElement.classList.remove('delay-1800ms');
|
|
94368
|
+
activeElement.classList.remove('delay-1900ms');
|
|
94369
|
+
activeElement.classList.remove('delay-2000ms');
|
|
94370
|
+
activeElement.classList.remove('delay-2100ms');
|
|
94371
|
+
activeElement.classList.remove('delay-2200ms');
|
|
94372
|
+
activeElement.classList.remove('delay-2300ms');
|
|
94373
|
+
activeElement.classList.remove('delay-2400ms');
|
|
94374
|
+
activeElement.classList.remove('delay-2500ms');
|
|
94375
|
+
activeElement.classList.remove('delay-2600ms');
|
|
94376
|
+
activeElement.classList.remove('delay-2700ms');
|
|
94377
|
+
activeElement.classList.remove('delay-2800ms');
|
|
94378
|
+
activeElement.classList.remove('delay-2900ms');
|
|
94379
|
+
activeElement.classList.remove('delay-3000ms');
|
|
94380
|
+
activeElement.style.transitionDelay = '';
|
|
94381
|
+
activeElement.style.animationDelay = '';
|
|
94382
|
+
}
|
|
94383
|
+
|
|
94384
|
+
applyDelay() {
|
|
94385
|
+
let activeElement;
|
|
94386
|
+
let target = this.getTarget();
|
|
94387
|
+
activeElement = target.element;
|
|
94388
|
+
if (!activeElement) return;
|
|
94389
|
+
let valDelay;
|
|
94390
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
94391
|
+
elms.forEach(elm => {
|
|
94392
|
+
if (elm.classList.contains('on')) {
|
|
94393
|
+
valDelay = elm.getAttribute('data-value');
|
|
94394
|
+
}
|
|
94395
|
+
});
|
|
94396
|
+
this.builder.editor.saveForUndo();
|
|
94397
|
+
this.cleanupDelay(activeElement);
|
|
94398
|
+
activeElement.classList.remove('is-inview');
|
|
94399
|
+
setTimeout(() => {
|
|
94400
|
+
if (valDelay) activeElement.classList.add(valDelay);
|
|
94401
|
+
setTimeout(() => {
|
|
94402
|
+
activeElement.classList.add('is-inview');
|
|
94403
|
+
}, 10);
|
|
94404
|
+
}, 10); //Trigger Change event
|
|
94405
|
+
|
|
94406
|
+
this.builder.settings.onChange();
|
|
94407
|
+
}
|
|
94408
|
+
|
|
94409
|
+
applyBasic() {
|
|
94410
|
+
let activeElement;
|
|
94411
|
+
let target = this.getTarget();
|
|
94412
|
+
activeElement = target.element;
|
|
94413
|
+
if (!activeElement) return;
|
|
94414
|
+
let val;
|
|
94415
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
94416
|
+
elms.forEach(elm => {
|
|
94417
|
+
if (elm.classList.contains('on')) {
|
|
94418
|
+
val = elm.getAttribute('data-value');
|
|
94419
|
+
}
|
|
94420
|
+
});
|
|
94421
|
+
let once = false;
|
|
94422
|
+
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94423
|
+
if (btnAnimateOnce.classList.contains('on')) once = true;
|
|
94424
|
+
this.builder.editor.saveForUndo();
|
|
94425
|
+
this.cleanupBasic(activeElement);
|
|
94426
|
+
|
|
94427
|
+
if (val) {
|
|
94428
|
+
activeElement.classList.remove('is-inview');
|
|
94429
|
+
activeElement.classList.remove('once');
|
|
94430
|
+
setTimeout(() => {
|
|
94431
|
+
activeElement.classList.add(val);
|
|
94432
|
+
if (once) activeElement.classList.add('once');
|
|
94433
|
+
activeElement.classList.add('is-animated'); // activeElement.classList.add('is-inview');
|
|
94434
|
+
|
|
94435
|
+
setTimeout(() => {
|
|
94436
|
+
activeElement.classList.add('is-inview');
|
|
94437
|
+
}, 10);
|
|
94438
|
+
}, 10);
|
|
94439
|
+
} //Trigger Change event
|
|
94440
|
+
|
|
94441
|
+
|
|
94442
|
+
this.builder.settings.onChange();
|
|
93101
94443
|
}
|
|
93102
94444
|
|
|
93103
94445
|
apply() {
|
|
@@ -93106,53 +94448,53 @@ class AnimateScroll {
|
|
|
93106
94448
|
activeElement = target.element;
|
|
93107
94449
|
if (!activeElement) return;
|
|
93108
94450
|
let valX;
|
|
93109
|
-
let elms = this.
|
|
94451
|
+
let elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93110
94452
|
elms.forEach(elm => {
|
|
93111
94453
|
if (elm.classList.contains('on')) {
|
|
93112
94454
|
valX = elm.getAttribute('data-value');
|
|
93113
94455
|
}
|
|
93114
94456
|
});
|
|
93115
94457
|
let valY;
|
|
93116
|
-
elms = this.
|
|
94458
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93117
94459
|
elms.forEach(elm => {
|
|
93118
94460
|
if (elm.classList.contains('on')) {
|
|
93119
94461
|
valY = elm.getAttribute('data-value');
|
|
93120
94462
|
}
|
|
93121
94463
|
});
|
|
93122
94464
|
let scale;
|
|
93123
|
-
elms = this.
|
|
94465
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93124
94466
|
elms.forEach(elm => {
|
|
93125
94467
|
if (elm.classList.contains('on')) {
|
|
93126
94468
|
scale = elm.getAttribute('data-value');
|
|
93127
94469
|
}
|
|
93128
94470
|
});
|
|
93129
94471
|
let rotate;
|
|
93130
|
-
elms = this.
|
|
94472
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93131
94473
|
elms.forEach(elm => {
|
|
93132
94474
|
if (elm.classList.contains('on')) {
|
|
93133
94475
|
rotate = elm.getAttribute('data-value');
|
|
93134
94476
|
}
|
|
93135
94477
|
});
|
|
93136
94478
|
let fade = false;
|
|
93137
|
-
let elm = this.
|
|
94479
|
+
let elm = this.divEnterAnim.querySelector('.cmd-fade');
|
|
93138
94480
|
|
|
93139
94481
|
if (elm.classList.contains('on')) {
|
|
93140
94482
|
fade = true;
|
|
93141
94483
|
}
|
|
93142
94484
|
|
|
93143
|
-
const inpSlideLeft = this.
|
|
93144
|
-
if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value;
|
|
93145
|
-
const inpSlideRight = this.
|
|
93146
|
-
if (inpSlideRight.value !== '') valX = inpSlideRight.value;
|
|
93147
|
-
const inpSlideDown = this.
|
|
93148
|
-
if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value;
|
|
93149
|
-
const inpSlideUp = this.
|
|
93150
|
-
if (inpSlideUp.value !== '') valY = inpSlideUp.value;
|
|
93151
|
-
const inpScale = this.
|
|
94485
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
94486
|
+
if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value + (inpSlideLeft.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94487
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94488
|
+
if (inpSlideRight.value !== '') valX = inpSlideRight.value + (inpSlideRight.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94489
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
94490
|
+
if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value + (inpSlideDown.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94491
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94492
|
+
if (inpSlideUp.value !== '') valY = inpSlideUp.value + (inpSlideUp.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94493
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
93152
94494
|
if (inpScale.value !== '') scale = inpScale.value;
|
|
93153
|
-
const inpRotateClockwise = this.
|
|
94495
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93154
94496
|
if (inpRotateClockwise.value !== '') rotate = '-' + inpRotateClockwise.value;
|
|
93155
|
-
const inpRotateCounter = this.
|
|
94497
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93156
94498
|
if (inpRotateCounter.value !== '') rotate = inpRotateCounter.value;
|
|
93157
94499
|
let animStart = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (rotate ? ` rotate(${rotate}deg)` : '') + (scale ? ` scale(${scale})` : '');
|
|
93158
94500
|
animStart = animStart.trim();
|
|
@@ -93176,8 +94518,90 @@ class AnimateScroll {
|
|
|
93176
94518
|
dataEnd = elm.getAttribute('data-value');
|
|
93177
94519
|
}
|
|
93178
94520
|
});
|
|
94521
|
+
sStart = sStart.trim();
|
|
94522
|
+
sEnd = sEnd.trim();
|
|
93179
94523
|
if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
|
|
93180
|
-
if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);
|
|
94524
|
+
if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd); // --- LEAVE ---
|
|
94525
|
+
|
|
94526
|
+
let valX_leave;
|
|
94527
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
94528
|
+
elms.forEach(elm => {
|
|
94529
|
+
if (elm.classList.contains('on')) {
|
|
94530
|
+
valX_leave = elm.getAttribute('data-value');
|
|
94531
|
+
}
|
|
94532
|
+
});
|
|
94533
|
+
let valY_leave;
|
|
94534
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
94535
|
+
elms.forEach(elm => {
|
|
94536
|
+
if (elm.classList.contains('on')) {
|
|
94537
|
+
valY_leave = elm.getAttribute('data-value');
|
|
94538
|
+
}
|
|
94539
|
+
});
|
|
94540
|
+
let scale_leave;
|
|
94541
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
94542
|
+
elms.forEach(elm => {
|
|
94543
|
+
if (elm.classList.contains('on')) {
|
|
94544
|
+
scale_leave = elm.getAttribute('data-value');
|
|
94545
|
+
}
|
|
94546
|
+
});
|
|
94547
|
+
let rotate_leave;
|
|
94548
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
94549
|
+
elms.forEach(elm => {
|
|
94550
|
+
if (elm.classList.contains('on')) {
|
|
94551
|
+
rotate_leave = elm.getAttribute('data-value');
|
|
94552
|
+
}
|
|
94553
|
+
});
|
|
94554
|
+
let fade_leave = false;
|
|
94555
|
+
elm = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94556
|
+
|
|
94557
|
+
if (elm.classList.contains('on')) {
|
|
94558
|
+
fade_leave = true;
|
|
94559
|
+
}
|
|
94560
|
+
|
|
94561
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94562
|
+
if (inpSlideLeft_leave.value !== '') valX_leave = '-' + inpSlideLeft_leave.value + (inpSlideLeft_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94563
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94564
|
+
if (inpSlideRight_leave.value !== '') valX_leave = inpSlideRight_leave.value + (inpSlideRight_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94565
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94566
|
+
if (inpSlideDown_leave.value !== '') valY_leave = inpSlideDown_leave.value + (inpSlideDown_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94567
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94568
|
+
if (inpSlideUp_leave.value !== '') valY_leave = '-' + inpSlideUp_leave.value + (inpSlideUp_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94569
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94570
|
+
if (inpScale_leave.value !== '') scale = inpScale_leave.value;
|
|
94571
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94572
|
+
if (inpRotateClockwise_leave.value !== '') rotate_leave = inpRotateClockwise_leave.value;
|
|
94573
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94574
|
+
if (inpRotateCounter_leave.value !== '') rotate_leave = '-' + inpRotateCounter_leave.value;
|
|
94575
|
+
let animLeaveStart = (valX_leave ? ' translateX(0px)' : '') + (valY_leave ? ' translateY(0px)' : '') + (rotate_leave ? ' rotate(0deg)' : '') + (scale_leave ? ' scale(1)' : '');
|
|
94576
|
+
animLeaveStart = animLeaveStart.trim();
|
|
94577
|
+
let animLeaveEnd = (valX_leave ? ` translateX(${valX_leave})` : '') + (valY_leave ? ` translateY(${valY_leave})` : '') + (rotate_leave ? ` rotate(${rotate_leave}deg)` : '') + (scale_leave ? ` scale(${scale_leave})` : '');
|
|
94578
|
+
animLeaveEnd = animLeaveEnd.trim();
|
|
94579
|
+
let sLeaveStart = (animLeaveStart ? 'transform: ' + animLeaveStart + ';' : '') + (fade_leave ? 'opacity: 1;' : '');
|
|
94580
|
+
let sLeaveEnd = (animLeaveEnd ? 'transform: ' + animLeaveEnd + ';' : '') + (fade_leave ? 'opacity: 0;' : '');
|
|
94581
|
+
this.cleanup_leave(activeElement);
|
|
94582
|
+
let dataLeaveStart;
|
|
94583
|
+
let dataLeaveEnd;
|
|
94584
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
94585
|
+
elms.forEach(elm => {
|
|
94586
|
+
if (elm.classList.contains('on')) {
|
|
94587
|
+
dataLeaveStart = elm.getAttribute('data-value');
|
|
94588
|
+
}
|
|
94589
|
+
});
|
|
94590
|
+
dataLeaveEnd = 'data-top-bottom';
|
|
94591
|
+
sLeaveStart = sLeaveStart.trim();
|
|
94592
|
+
sLeaveEnd = sLeaveEnd.trim();
|
|
94593
|
+
if (sLeaveStart !== '') activeElement.setAttribute(dataLeaveStart, sLeaveStart);
|
|
94594
|
+
if (sLeaveEnd !== '') activeElement.setAttribute(dataLeaveEnd, sLeaveEnd); // ----
|
|
94595
|
+
|
|
94596
|
+
if (sStart === '' && sEnd === '' && sLeaveStart === '' && sLeaveEnd === '') {
|
|
94597
|
+
activeElement.style.transform = '';
|
|
94598
|
+
activeElement.style.transition = '';
|
|
94599
|
+
activeElement.style.opacity = '';
|
|
94600
|
+
}
|
|
94601
|
+
|
|
94602
|
+
if (fade || fade_leave) {
|
|
94603
|
+
activeElement.style.opacity = '';
|
|
94604
|
+
}
|
|
93181
94605
|
|
|
93182
94606
|
if (this.builder.win.skrollrr) {
|
|
93183
94607
|
this.builder.win.skrollrr.refresh();
|
|
@@ -93198,7 +94622,14 @@ class AnimateScroll {
|
|
|
93198
94622
|
let activeElement;
|
|
93199
94623
|
|
|
93200
94624
|
if (target === 'element') {
|
|
93201
|
-
|
|
94625
|
+
let reCheck = this.readTarget();
|
|
94626
|
+
|
|
94627
|
+
if (reCheck) {
|
|
94628
|
+
if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
|
|
94629
|
+
if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;
|
|
94630
|
+
} else {
|
|
94631
|
+
activeElement = this.builder.editor.activeElement;
|
|
94632
|
+
}
|
|
93202
94633
|
}
|
|
93203
94634
|
|
|
93204
94635
|
if (target === 'column') {
|
|
@@ -93221,6 +94652,80 @@ class AnimateScroll {
|
|
|
93221
94652
|
};
|
|
93222
94653
|
}
|
|
93223
94654
|
|
|
94655
|
+
readTarget(s) {
|
|
94656
|
+
if (!s) {
|
|
94657
|
+
// element
|
|
94658
|
+
let activeElement = this.builder.editor.inspectedElement;
|
|
94659
|
+
if (!activeElement) return false; // enter start
|
|
94660
|
+
|
|
94661
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94662
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
94663
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
94664
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94665
|
+
|
|
94666
|
+
let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
|
|
94667
|
+
|
|
94668
|
+
let hasBasicAnim = false;
|
|
94669
|
+
|
|
94670
|
+
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')) {
|
|
94671
|
+
hasBasicAnim = true;
|
|
94672
|
+
}
|
|
94673
|
+
|
|
94674
|
+
if (css1 || css2 || hasBasicAnim) {
|
|
94675
|
+
return {
|
|
94676
|
+
'element': activeElement,
|
|
94677
|
+
'name': 'inspectedElement'
|
|
94678
|
+
};
|
|
94679
|
+
} else {
|
|
94680
|
+
return this.readTarget('element');
|
|
94681
|
+
}
|
|
94682
|
+
} else {
|
|
94683
|
+
let activeElement;
|
|
94684
|
+
|
|
94685
|
+
if (s === 'element') {
|
|
94686
|
+
activeElement = this.builder.editor.activeElement;
|
|
94687
|
+
}
|
|
94688
|
+
|
|
94689
|
+
if (s === 'column') {
|
|
94690
|
+
activeElement = this.builder.editor.activeCol;
|
|
94691
|
+
}
|
|
94692
|
+
|
|
94693
|
+
if (s === 'row') {
|
|
94694
|
+
activeElement = this.builder.editor.activeCol.parentNode;
|
|
94695
|
+
}
|
|
94696
|
+
|
|
94697
|
+
if (s === 'container') {
|
|
94698
|
+
activeElement = this.builder.editor.activeCol.parentNode.parentNode;
|
|
94699
|
+
}
|
|
94700
|
+
|
|
94701
|
+
if (!activeElement) return false; // enter start
|
|
94702
|
+
|
|
94703
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94704
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
94705
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
94706
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94707
|
+
|
|
94708
|
+
let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
|
|
94709
|
+
|
|
94710
|
+
let hasBasicAnim = false;
|
|
94711
|
+
|
|
94712
|
+
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')) {
|
|
94713
|
+
hasBasicAnim = true;
|
|
94714
|
+
}
|
|
94715
|
+
|
|
94716
|
+
if (css1 || css2 || hasBasicAnim) {
|
|
94717
|
+
return {
|
|
94718
|
+
'element': activeElement,
|
|
94719
|
+
'name': s
|
|
94720
|
+
};
|
|
94721
|
+
} else {
|
|
94722
|
+
if (s === 'column') return this.readTarget('row');
|
|
94723
|
+
if (s === 'row') return this.readTarget('container');
|
|
94724
|
+
if (s === 'container') return false;
|
|
94725
|
+
}
|
|
94726
|
+
}
|
|
94727
|
+
}
|
|
94728
|
+
|
|
93224
94729
|
getTransform(element, css) {
|
|
93225
94730
|
let tX, tY, sc, rt;
|
|
93226
94731
|
let arrTransform = this.parseComplexStyleProperty(css);
|
|
@@ -93243,7 +94748,8 @@ class AnimateScroll {
|
|
|
93243
94748
|
transform = {},
|
|
93244
94749
|
match;
|
|
93245
94750
|
|
|
93246
|
-
while (match
|
|
94751
|
+
while (match = regex.exec(str)) // eslint-disable-line
|
|
94752
|
+
transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
|
|
93247
94753
|
|
|
93248
94754
|
return transform;
|
|
93249
94755
|
}
|
|
@@ -93251,8 +94757,6 @@ class AnimateScroll {
|
|
|
93251
94757
|
cleanup(elm) {
|
|
93252
94758
|
elm.removeAttribute('data-center');
|
|
93253
94759
|
elm.removeAttribute('data-center-top');
|
|
93254
|
-
elm.removeAttribute('data-top');
|
|
93255
|
-
elm.removeAttribute('data-top-bottom');
|
|
93256
94760
|
elm.removeAttribute('data--50-bottom');
|
|
93257
94761
|
elm.removeAttribute('data--100-bottom');
|
|
93258
94762
|
elm.removeAttribute('data--150-bottom');
|
|
@@ -93269,8 +94773,17 @@ class AnimateScroll {
|
|
|
93269
94773
|
elm.removeAttribute('data-bottom');
|
|
93270
94774
|
}
|
|
93271
94775
|
|
|
94776
|
+
cleanup_leave(elm) {
|
|
94777
|
+
elm.removeAttribute('data-center-bottom');
|
|
94778
|
+
elm.removeAttribute('data-100-top');
|
|
94779
|
+
elm.removeAttribute('data-50-top');
|
|
94780
|
+
elm.removeAttribute('data-top');
|
|
94781
|
+
elm.removeAttribute('data-top-bottom');
|
|
94782
|
+
}
|
|
94783
|
+
|
|
93272
94784
|
edit() {
|
|
93273
94785
|
this.modalAnimateScroll.classList.add('active');
|
|
94786
|
+
this.clickContent();
|
|
93274
94787
|
}
|
|
93275
94788
|
|
|
93276
94789
|
close() {
|
|
@@ -93430,7 +94943,8 @@ class ContentBox {
|
|
|
93430
94943
|
name: 'symbols',
|
|
93431
94944
|
showInMainToolbar: true,
|
|
93432
94945
|
showInElementToolbar: false
|
|
93433
|
-
}
|
|
94946
|
+
} // { name: 'animation', showInMainToolbar: true, showInElementToolbar: true },
|
|
94947
|
+
],
|
|
93434
94948
|
disableConfig: false,
|
|
93435
94949
|
useLightbox: true,
|
|
93436
94950
|
lightboxArrow: true,
|
|
@@ -96595,7 +98109,7 @@ class ContentBox {
|
|
|
96595
98109
|
this.editbox.editModule();
|
|
96596
98110
|
});
|
|
96597
98111
|
let btnCover = box.querySelector('.is-cover-upload');
|
|
96598
|
-
if (btnCover) btnCover.addEventListener('mouseenter', () => {
|
|
98112
|
+
if (btnCover) if (btnCover.style.display !== 'none') btnCover.addEventListener('mouseenter', () => {
|
|
96599
98113
|
let btnCoverCentral;
|
|
96600
98114
|
|
|
96601
98115
|
if (!this.iframe) {
|
|
@@ -97192,11 +98706,11 @@ class ContentBox {
|
|
|
97192
98706
|
boxTool.style.width = '40px';
|
|
97193
98707
|
boxTool.style.left = 'calc(50% - 20px)';
|
|
97194
98708
|
} else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
|
|
97195
|
-
box.querySelector('.is-cover-upload').style.display = '
|
|
98709
|
+
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
97196
98710
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
97197
98711
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
97198
|
-
boxTool.style.width = '
|
|
97199
|
-
boxTool.style.left = 'calc(50% -
|
|
98712
|
+
boxTool.style.width = '120px';
|
|
98713
|
+
boxTool.style.left = 'calc(50% - 60px)';
|
|
97200
98714
|
} else {
|
|
97201
98715
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
97202
98716
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
@@ -97385,7 +98899,30 @@ class ContentBox {
|
|
|
97385
98899
|
let range = document.createRange();
|
|
97386
98900
|
wrapper.innerHTML = '';
|
|
97387
98901
|
wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
98902
|
+
// Load fonts
|
|
98903
|
+
|
|
98904
|
+
let contentStylePath = this.settings.contentStylePath;
|
|
98905
|
+
const sections = wrapper.querySelectorAll('.is-section');
|
|
98906
|
+
sections.forEach(section => {
|
|
98907
|
+
section.classList.forEach(item => {
|
|
98908
|
+
if (item.indexOf('type-') !== -1) {
|
|
98909
|
+
const contentClass = item;
|
|
98910
|
+
const contentCss = item + '.css'; //Add css
|
|
98911
|
+
|
|
98912
|
+
let exist = false;
|
|
98913
|
+
let links = this.doc.getElementsByTagName('link');
|
|
97388
98914
|
|
|
98915
|
+
for (let i = 0; i < links.length; i++) {
|
|
98916
|
+
let src = links[i].href.toLowerCase();
|
|
98917
|
+
if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
|
|
98918
|
+
}
|
|
98919
|
+
|
|
98920
|
+
if (!exist) {
|
|
98921
|
+
this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
|
|
98922
|
+
}
|
|
98923
|
+
}
|
|
98924
|
+
});
|
|
98925
|
+
});
|
|
97389
98926
|
this.pageSetup();
|
|
97390
98927
|
this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
|
|
97391
98928
|
// Re-apply
|
|
@@ -97483,7 +99020,7 @@ class ContentBox {
|
|
|
97483
99020
|
this.editor.viewZoom();
|
|
97484
99021
|
}
|
|
97485
99022
|
|
|
97486
|
-
|
|
99023
|
+
openAnimationPanel() {
|
|
97487
99024
|
this.animateScroll.edit();
|
|
97488
99025
|
}
|
|
97489
99026
|
|