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