@innovastudio/contentbox 1.4.34 → 1.4.35
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.
|
@@ -415,6 +415,20 @@ const prepareSvgIcons$1 = builder => {
|
|
|
415
415
|
<path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427"></path>
|
|
416
416
|
<path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
|
|
417
417
|
</symbol>
|
|
418
|
+
|
|
419
|
+
<symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
420
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
421
|
+
<polyline points="6 21 21 6 18 3 3 18 6 21"></polyline>
|
|
422
|
+
<line x1="15" y1="6" x2="18" y2="9"></line>
|
|
423
|
+
<path d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
|
|
424
|
+
<path d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
|
|
425
|
+
</symbol>
|
|
426
|
+
|
|
427
|
+
<symbol id="icon-pencil" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
428
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
429
|
+
<path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
|
|
430
|
+
<line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
|
|
431
|
+
</symbol>
|
|
418
432
|
|
|
419
433
|
</defs>
|
|
420
434
|
</svg>`;
|
|
@@ -638,6 +652,8 @@ class SideBar {
|
|
|
638
652
|
|
|
639
653
|
|
|
640
654
|
this.closeSidebar();
|
|
655
|
+
this.builder.animateScroll.close(); // Close anim side panel
|
|
656
|
+
|
|
641
657
|
if (toggle) return;
|
|
642
658
|
let panelId = btn.getAttribute('data-content');
|
|
643
659
|
|
|
@@ -855,7 +871,7 @@ class SideBar {
|
|
|
855
871
|
setTimeout(() => {
|
|
856
872
|
elm.style.display = ''; //hide
|
|
857
873
|
}, 300);
|
|
858
|
-
});
|
|
874
|
+
}); // this.builder.animateScroll.close();
|
|
859
875
|
}
|
|
860
876
|
|
|
861
877
|
viewIdeas() {
|
|
@@ -3856,6 +3872,7 @@ class EditSection {
|
|
|
3856
3872
|
// }, 300);
|
|
3857
3873
|
|
|
3858
3874
|
this.builder.activeSection = null;
|
|
3875
|
+
this.builder.refreshPage();
|
|
3859
3876
|
});
|
|
3860
3877
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
|
3861
3878
|
btnSectionUp.addEventListener('click', () => {
|
|
@@ -3896,6 +3913,9 @@ class EditSection {
|
|
|
3896
3913
|
this.builder.sectionStack(); //Trigger Change event
|
|
3897
3914
|
|
|
3898
3915
|
this.builder.settings.onChange();
|
|
3916
|
+
setTimeout(() => {
|
|
3917
|
+
this.builder.refreshPage();
|
|
3918
|
+
}, 600);
|
|
3899
3919
|
});
|
|
3900
3920
|
const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
|
|
3901
3921
|
btnSectionAnimStart.forEach(btn => {
|
|
@@ -3962,6 +3982,9 @@ class EditSection {
|
|
|
3962
3982
|
dom$k.addClass(btn, 'on'); //Trigger Change event
|
|
3963
3983
|
|
|
3964
3984
|
this.builder.settings.onChange();
|
|
3985
|
+
setTimeout(() => {
|
|
3986
|
+
this.builder.refreshPage();
|
|
3987
|
+
}, 300);
|
|
3965
3988
|
});
|
|
3966
3989
|
});
|
|
3967
3990
|
const btnBoxSpacing = modalEditSection.querySelectorAll('.cmd-box-spacing');
|
|
@@ -4521,7 +4544,7 @@ class EditSection {
|
|
|
4521
4544
|
} //Trigger Render event
|
|
4522
4545
|
|
|
4523
4546
|
|
|
4524
|
-
this.builder.settings.onRender(); // this.builder.scrollTo(activeSection,
|
|
4547
|
+
this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 100);
|
|
4525
4548
|
}
|
|
4526
4549
|
|
|
4527
4550
|
boxSpacing(s) {
|
|
@@ -12653,6 +12676,12 @@ class EditBox {
|
|
|
12653
12676
|
h = '80vh';
|
|
12654
12677
|
}
|
|
12655
12678
|
|
|
12679
|
+
if (moduleName === 'navbar-builder') {
|
|
12680
|
+
// div.style.width = '1600px';
|
|
12681
|
+
w = '700px';
|
|
12682
|
+
h = '780px';
|
|
12683
|
+
}
|
|
12684
|
+
|
|
12656
12685
|
div.style.maxWidth = w;
|
|
12657
12686
|
div.style.height = h;
|
|
12658
12687
|
}
|
|
@@ -87297,7 +87326,7 @@ class MediaPicker {
|
|
|
87297
87326
|
<input id="inpMediaSource" class="input-src" type="text">
|
|
87298
87327
|
<button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
87299
87328
|
<div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
87300
|
-
<form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.
|
|
87329
|
+
<form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
|
87301
87330
|
<input name="hidRefId" class="input-ref-id" type="hidden" value="">
|
|
87302
87331
|
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
87303
87332
|
<input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
@@ -87330,61 +87359,128 @@ class MediaPicker {
|
|
|
87330
87359
|
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87331
87360
|
const elm = modalMediaSelect.querySelector('.input-select');
|
|
87332
87361
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
87333
|
-
|
|
87334
|
-
|
|
87335
|
-
|
|
87336
|
-
|
|
87362
|
+
let targetAssetType = this.builder.targetAssetType;
|
|
87363
|
+
let targetInput = inpSrc;
|
|
87364
|
+
let theTrigger = elm; //--- Same ass openAsset() in contentbuilder.js 2098
|
|
87365
|
+
|
|
87366
|
+
if (targetAssetType === 'media' && (this.builder.opts.onMediaSelectClick || this.builder.opts.onImageSelectClick)) {
|
|
87367
|
+
if (this.builder.opts.onMediaSelectClick) {
|
|
87368
|
+
this.builder.opts.onMediaSelectClick({
|
|
87369
|
+
targetInput: targetInput,
|
|
87370
|
+
theTrigger: theTrigger
|
|
87371
|
+
});
|
|
87372
|
+
} else {
|
|
87373
|
+
this.builder.opts.onImageSelectClick({
|
|
87374
|
+
targetInput: targetInput,
|
|
87375
|
+
theTrigger: theTrigger
|
|
87376
|
+
});
|
|
87377
|
+
}
|
|
87378
|
+
} else if (targetAssetType === 'video' && this.builder.opts.onVideoSelectClick) {
|
|
87379
|
+
this.builder.opts.onVideoSelectClick({
|
|
87380
|
+
targetInput: targetInput,
|
|
87381
|
+
theTrigger: theTrigger
|
|
87337
87382
|
});
|
|
87338
|
-
} else if (this.builder.opts.onImageSelectClick) {
|
|
87383
|
+
} else if (targetAssetType === 'image' && this.builder.opts.onImageSelectClick) {
|
|
87339
87384
|
this.builder.opts.onImageSelectClick({
|
|
87340
|
-
targetInput:
|
|
87341
|
-
theTrigger:
|
|
87385
|
+
targetInput: targetInput,
|
|
87386
|
+
theTrigger: theTrigger
|
|
87342
87387
|
});
|
|
87343
|
-
} else if (this.builder.opts.
|
|
87344
|
-
|
|
87345
|
-
|
|
87346
|
-
|
|
87347
|
-
|
|
87348
|
-
|
|
87349
|
-
|
|
87350
|
-
|
|
87388
|
+
} else if (targetAssetType === 'audio' && this.builder.opts.onAudioSelectClick) {
|
|
87389
|
+
this.builder.opts.onAudioSelectClick({
|
|
87390
|
+
targetInput: targetInput,
|
|
87391
|
+
theTrigger: theTrigger
|
|
87392
|
+
});
|
|
87393
|
+
} else if (targetAssetType === 'all' && this.builder.opts.onFileSelectClick) {
|
|
87394
|
+
this.builder.opts.onFileSelectClick({
|
|
87395
|
+
targetInput: targetInput,
|
|
87396
|
+
theTrigger: theTrigger
|
|
87397
|
+
});
|
|
87398
|
+
} else {
|
|
87399
|
+
let iframe;
|
|
87400
|
+
let modal;
|
|
87351
87401
|
|
|
87352
|
-
if (
|
|
87353
|
-
|
|
87354
|
-
|
|
87402
|
+
if (targetAssetType === 'media') {
|
|
87403
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.mediaselect');
|
|
87404
|
+
iframe = modal.querySelector('iframe');
|
|
87355
87405
|
|
|
87356
|
-
|
|
87406
|
+
if (iframe.src === 'about:blank') {
|
|
87407
|
+
if (this.builder.opts.mediaSelect) iframe.src = this.builder.opts.mediaSelect;else if (this.builder.opts.imageSelect) iframe.src = this.builder.opts.imageSelect;
|
|
87408
|
+
}
|
|
87409
|
+
} else if (targetAssetType === 'video') {
|
|
87410
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.videoselect');
|
|
87411
|
+
iframe = modal.querySelector('iframe');
|
|
87412
|
+
if (iframe.src === 'about:blank') iframe.src = this.builder.opts.videoSelect;
|
|
87413
|
+
} else if (targetAssetType === 'image') {
|
|
87414
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.imageselect');
|
|
87415
|
+
iframe = modal.querySelector('iframe');
|
|
87416
|
+
if (iframe.src === 'about:blank') iframe.src = this.builder.opts.imageSelect;
|
|
87417
|
+
} else if (targetAssetType === 'audio') {
|
|
87418
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.audioselect');
|
|
87419
|
+
iframe = modal.querySelector('iframe');
|
|
87420
|
+
if (iframe.src === 'about:blank') iframe.src = this.builder.opts.audioSelect;
|
|
87421
|
+
} else if (targetAssetType === 'all') {
|
|
87422
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.fileselect');
|
|
87423
|
+
iframe = modal.querySelector('iframe');
|
|
87424
|
+
if (iframe.src === 'about:blank') iframe.src = this.builder.opts.fileSelect;
|
|
87425
|
+
} // this.builder.util.showModal(modal);
|
|
87426
|
+
|
|
87427
|
+
|
|
87428
|
+
this.builder.util.showModal(modal, false, () => {
|
|
87357
87429
|
elm.removeAttribute('data-focus');
|
|
87358
87430
|
elm.focus();
|
|
87359
87431
|
});
|
|
87360
87432
|
elm.setAttribute('data-focus', true);
|
|
87361
|
-
this.builder.targetInput = inpSrc;
|
|
87362
|
-
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87363
|
-
} else if (this.builder.opts.imageselect) {
|
|
87364
|
-
let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
|
|
87365
|
-
let iframe = modalImageSelect.querySelector('iframe');
|
|
87366
|
-
|
|
87367
|
-
if (this.builder.opts.assetRefresh) {
|
|
87368
|
-
iframe.src = this.builder.opts.imageselect;
|
|
87369
|
-
this.builder.opts.assetRefresh = false;
|
|
87370
|
-
}
|
|
87433
|
+
this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
|
|
87371
87434
|
|
|
87372
|
-
|
|
87373
|
-
|
|
87374
|
-
|
|
87435
|
+
this.builder.targetCallback = null; // this.targetAssetType = targetAssetType;
|
|
87436
|
+
} //---
|
|
87437
|
+
// if(this.builder.opts.onFileSelectClick) {
|
|
87438
|
+
// this.builder.opts.onFileSelectClick({targetInput: inpSrc, theTrigger: elm});
|
|
87439
|
+
// } else if (this.builder.opts.onImageSelectClick) {
|
|
87440
|
+
// this.builder.opts.onImageSelectClick({targetInput: inpSrc, theTrigger: elm});
|
|
87441
|
+
// } else if(this.builder.opts.fileselect) {
|
|
87442
|
+
// let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
|
|
87443
|
+
// let iframe = modalFileSelect.querySelector('iframe');
|
|
87444
|
+
// if(this.builder.opts.assetRefresh) {
|
|
87445
|
+
// iframe.src = this.builder.opts.fileselect;
|
|
87446
|
+
// this.builder.opts.assetRefresh = false;
|
|
87447
|
+
// }
|
|
87448
|
+
// if(iframe.src === 'about:blank') {
|
|
87449
|
+
// iframe.src = this.builder.opts.fileselect;
|
|
87450
|
+
// }
|
|
87451
|
+
// util.showModal(modalFileSelect, false, ()=>{
|
|
87452
|
+
// elm.removeAttribute('data-focus');
|
|
87453
|
+
// elm.focus();
|
|
87454
|
+
// });
|
|
87455
|
+
// elm.setAttribute('data-focus', true);
|
|
87456
|
+
// this.builder.targetInput = inpSrc;
|
|
87457
|
+
// this.builder.targetCallback = null;
|
|
87458
|
+
// // this.builder.targetAssetType = 'media';
|
|
87459
|
+
// } else if(this.builder.opts.imageselect) {
|
|
87460
|
+
// let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
|
|
87461
|
+
// let iframe = modalImageSelect.querySelector('iframe');
|
|
87462
|
+
// if(this.builder.opts.assetRefresh) {
|
|
87463
|
+
// iframe.src = this.builder.opts.imageselect;
|
|
87464
|
+
// this.builder.opts.assetRefresh = false;
|
|
87465
|
+
// }
|
|
87466
|
+
// if(iframe.src === 'about:blank'){
|
|
87467
|
+
// iframe.src = this.builder.opts.imageselect;
|
|
87468
|
+
// }
|
|
87469
|
+
// util.showModal(modalImageSelect, false, ()=>{
|
|
87470
|
+
// elm.removeAttribute('data-focus');
|
|
87471
|
+
// elm.focus();
|
|
87472
|
+
// });
|
|
87473
|
+
// elm.setAttribute('data-focus', true);
|
|
87474
|
+
// this.builder.targetInput = inpSrc;
|
|
87475
|
+
// this.builder.targetCallback = null;
|
|
87476
|
+
// // this.builder.targetAssetType = 'media';
|
|
87477
|
+
// }
|
|
87375
87478
|
|
|
87376
|
-
util.showModal(modalImageSelect, false, () => {
|
|
87377
|
-
elm.removeAttribute('data-focus');
|
|
87378
|
-
elm.focus();
|
|
87379
|
-
});
|
|
87380
|
-
elm.setAttribute('data-focus', true);
|
|
87381
|
-
this.builder.targetInput = inpSrc;
|
|
87382
|
-
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87383
|
-
}
|
|
87384
87479
|
});
|
|
87385
87480
|
}
|
|
87386
87481
|
|
|
87387
87482
|
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87483
|
+
let frm = modalMediaSelect.querySelector('.form-upload-larger');
|
|
87388
87484
|
dom.addEventListener(inputFileSelect, 'change', e => {
|
|
87389
87485
|
let element = inputFileSelect;
|
|
87390
87486
|
|
|
@@ -87395,12 +87491,42 @@ class MediaPicker {
|
|
|
87395
87491
|
let frmUpload = element;
|
|
87396
87492
|
dom.addClass(frmUpload, 'please-wait');
|
|
87397
87493
|
modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
|
|
87494
|
+
let targetAssetType = this.builder.targetAssetType;
|
|
87398
87495
|
|
|
87399
|
-
if (this.builder.opts.
|
|
87496
|
+
if (targetAssetType === 'media' && this.builder.opts.onMediaUpload) {
|
|
87497
|
+
this.builder.opts.onMediaUpload(e);
|
|
87498
|
+
} else if (targetAssetType === 'video' && this.builder.opts.onVideoUpload) {
|
|
87499
|
+
this.builder.opts.onVideoUpload(e);
|
|
87500
|
+
} else if (targetAssetType === 'image' && this.builder.opts.onLargerImageUpload) {
|
|
87501
|
+
this.builder.opts.onLargerImageUpload(e);
|
|
87502
|
+
} else if (targetAssetType === 'audio' && this.builder.opts.onAudioUpload) {
|
|
87503
|
+
this.builder.opts.onAudioUpload(e);
|
|
87504
|
+
} else if (targetAssetType === 'all' && this.builder.opts.onFileUpload) {
|
|
87505
|
+
this.builder.opts.onFileUpload(e);
|
|
87506
|
+
} else if (this.builder.opts.onLargerImageUpload) {
|
|
87507
|
+
// backward
|
|
87400
87508
|
this.builder.opts.onLargerImageUpload(e);
|
|
87401
87509
|
} else {
|
|
87510
|
+
if (targetAssetType === 'media') {
|
|
87511
|
+
frm.setAttribute('action', this.builder.opts.mediaHandler);
|
|
87512
|
+
} else if (targetAssetType === 'video') {
|
|
87513
|
+
frm.setAttribute('action', this.builder.opts.videoHandler);
|
|
87514
|
+
} else if (targetAssetType === 'image') {
|
|
87515
|
+
frm.setAttribute('action', this.builder.opts.largerImageHandler);
|
|
87516
|
+
} else if (targetAssetType === 'audio') {
|
|
87517
|
+
frm.setAttribute('action', this.builder.opts.audioHandler);
|
|
87518
|
+
} else if (targetAssetType === 'all') {
|
|
87519
|
+
frm.setAttribute('action', this.builder.opts.fileHandler);
|
|
87520
|
+
if (!this.builder.opts.fileHandler) frm.setAttribute('action', this.builder.opts.mediaHandler); //backward
|
|
87521
|
+
}
|
|
87522
|
+
|
|
87402
87523
|
frmUpload.submit();
|
|
87403
|
-
}
|
|
87524
|
+
} // if(this.builder.opts.onLargerImageUpload) {
|
|
87525
|
+
// this.builder.opts.onLargerImageUpload(e);
|
|
87526
|
+
// } else {
|
|
87527
|
+
// frmUpload.submit();
|
|
87528
|
+
// }
|
|
87529
|
+
|
|
87404
87530
|
|
|
87405
87531
|
inputFileSelect.value = ''; // Clear Input
|
|
87406
87532
|
});
|
|
@@ -87422,7 +87548,9 @@ class MediaPicker {
|
|
|
87422
87548
|
const modalMediaSelect = this.modalMediaSelect;
|
|
87423
87549
|
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87424
87550
|
|
|
87425
|
-
if (assetType === '
|
|
87551
|
+
if (assetType === 'all') {
|
|
87552
|
+
inputFileSelect.setAttribute('accept', '*');
|
|
87553
|
+
} else if (assetType === 'media') {
|
|
87426
87554
|
inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
|
|
87427
87555
|
} else if (assetType === 'video') {
|
|
87428
87556
|
inputFileSelect.setAttribute('accept', 'video/mp4');
|
|
@@ -88620,6 +88748,7 @@ class ContentBuilder {
|
|
|
88620
88748
|
.is-col-tool svg {
|
|
88621
88749
|
display: initial !important;
|
|
88622
88750
|
}
|
|
88751
|
+
|
|
88623
88752
|
`;
|
|
88624
88753
|
|
|
88625
88754
|
if (!this.builderStuff.querySelector('style[data-rel="css-new"]')) {
|
|
@@ -92684,12 +92813,11 @@ class ContentStuff {
|
|
|
92684
92813
|
.content-edit .box-hover {
|
|
92685
92814
|
outline: none !important;
|
|
92686
92815
|
}
|
|
92816
|
+
`; // .is-wrapper.is-edit > div {
|
|
92817
|
+
// overflow-x: unset;
|
|
92818
|
+
// overflow-y: unset;
|
|
92819
|
+
// }
|
|
92687
92820
|
|
|
92688
|
-
.is-wrapper.is-edit > div {
|
|
92689
|
-
overflow-x: unset;
|
|
92690
|
-
overflow-y: unset;
|
|
92691
|
-
}
|
|
92692
|
-
`;
|
|
92693
92821
|
builder.contentStuff.insertAdjacentHTML('afterbegin', `
|
|
92694
92822
|
<style>
|
|
92695
92823
|
${css}
|
|
@@ -92709,6 +92837,10 @@ class AnimateScroll {
|
|
|
92709
92837
|
this.builderStuff = builderStuff;
|
|
92710
92838
|
let html = `
|
|
92711
92839
|
<style>
|
|
92840
|
+
.animatescroll td {
|
|
92841
|
+
font-size: 13px;
|
|
92842
|
+
padding: 5px 5px;
|
|
92843
|
+
}
|
|
92712
92844
|
.animatescroll.active {
|
|
92713
92845
|
right: 0;
|
|
92714
92846
|
}
|
|
@@ -92724,9 +92856,12 @@ class AnimateScroll {
|
|
|
92724
92856
|
.animatescroll .is-tabs a {
|
|
92725
92857
|
text-transform: none!important;
|
|
92726
92858
|
font-size: 13px!important;
|
|
92727
|
-
margin-right:
|
|
92859
|
+
margin-right: 25px!important;
|
|
92728
92860
|
margin-left: 3px!important;
|
|
92729
92861
|
}
|
|
92862
|
+
.animatescroll .is-tabs a:last-child {
|
|
92863
|
+
margin-right: 0!important;
|
|
92864
|
+
}
|
|
92730
92865
|
.anim-controls {
|
|
92731
92866
|
padding: 0 !important;
|
|
92732
92867
|
z-index: 1;
|
|
@@ -92735,11 +92870,11 @@ class AnimateScroll {
|
|
|
92735
92870
|
position: absolute;
|
|
92736
92871
|
top: 0;
|
|
92737
92872
|
box-sizing: border-box;
|
|
92738
|
-
border-top: transparent
|
|
92873
|
+
border-top: transparent 240px solid !important;
|
|
92739
92874
|
}
|
|
92740
92875
|
#divEnterAnim, #divLeaveAnim, #divAnimSettings {
|
|
92741
92876
|
border-top: transparent 70px solid !important;
|
|
92742
|
-
padding:
|
|
92877
|
+
padding:0 15px 20px 22px !important;
|
|
92743
92878
|
width: 100%;
|
|
92744
92879
|
height: 100%;
|
|
92745
92880
|
box-sizing: border-box;
|
|
@@ -92780,6 +92915,9 @@ class AnimateScroll {
|
|
|
92780
92915
|
font-family: sans-serif !important;
|
|
92781
92916
|
font-weight: 300 !important;
|
|
92782
92917
|
padding: 0 !important;
|
|
92918
|
+
width: 65px !important;
|
|
92919
|
+
height: 35px !important;
|
|
92920
|
+
text-align: center !important;
|
|
92783
92921
|
}
|
|
92784
92922
|
.flex-wrap {
|
|
92785
92923
|
display: flex;
|
|
@@ -92806,463 +92944,625 @@ class AnimateScroll {
|
|
|
92806
92944
|
font-weight: 300 !important;
|
|
92807
92945
|
padding: 0 !important;
|
|
92808
92946
|
}
|
|
92809
|
-
|
|
92947
|
+
|
|
92948
|
+
.div-anim-settings,.div-wizard-settings{
|
|
92949
|
+
height: calc(100vh - 34px)
|
|
92950
|
+
}
|
|
92951
|
+
.div-wizard-settings{
|
|
92952
|
+
padding: 10px 15px 0 18px !important;
|
|
92953
|
+
}
|
|
92954
|
+
.div-anim-apply-to button {
|
|
92955
|
+
width: 80px !important;
|
|
92956
|
+
height: 35px !important;
|
|
92957
|
+
}
|
|
92810
92958
|
</style>
|
|
92811
92959
|
<div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
92812
92960
|
|
|
92813
92961
|
<div class="side-title">${out('Animation')}</div>
|
|
92814
92962
|
|
|
92815
|
-
<button tabindex="-1" title="Close" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
92963
|
+
<button tabindex="-1" title="${out('Close')}" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
92816
92964
|
|
|
92817
|
-
<
|
|
92818
|
-
|
|
92819
|
-
|
|
92820
|
-
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
|
|
92821
|
-
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
|
|
92822
|
-
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
|
|
92823
|
-
<button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
|
|
92824
|
-
</div>
|
|
92825
|
-
</div>
|
|
92965
|
+
<button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:64px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
|
|
92966
|
+
|
|
92967
|
+
<div class="div-anim-settings" style="display:none">
|
|
92826
92968
|
|
|
92827
|
-
|
|
92828
|
-
|
|
92829
|
-
<
|
|
92830
|
-
|
|
92969
|
+
<div class="div-anim-apply-to" style="padding:18px 10px 22px 18px;z-index:2;position:relative;">
|
|
92970
|
+
<div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
|
|
92971
|
+
<div class="flex-wrap">
|
|
92972
|
+
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element">${out('Element')}</button>
|
|
92973
|
+
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column">${out('Column')}</button>
|
|
92974
|
+
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row">${out('Row')}</button>
|
|
92975
|
+
<button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container">${out('Container')}</button>
|
|
92976
|
+
<button title="${out('Overlay')}" class="cmd-target" data-command="target" data-value="overlay">${out('Overlay')}</button>
|
|
92977
|
+
<button title="${out('Background')}" class="cmd-target" data-command="target" data-value="bg">${out('Bg')}</button>
|
|
92978
|
+
<button title="${out('Box')}" class="cmd-target" data-command="target" data-value="box">${out('Box')}</button>
|
|
92979
|
+
<button title="${out('Section')}" class="cmd-target" data-command="target" data-value="section">${out('Section')}</button>
|
|
92980
|
+
</div>
|
|
92981
|
+
</div>
|
|
92982
|
+
|
|
92983
|
+
<div class="div-anim-type">
|
|
92984
|
+
<div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
|
|
92985
|
+
<a href="" data-content="divAnimDefault" class="active">${out('On View')}</a>
|
|
92986
|
+
<a href="" data-content="divAnimScroll">${out('On Scroll')}</a>
|
|
92987
|
+
<a href="" data-content="divAnimScrollSimple">${out('On Scroll (Simple)')}</a>
|
|
92988
|
+
</div>
|
|
92831
92989
|
</div>
|
|
92832
|
-
</div>
|
|
92833
|
-
|
|
92834
|
-
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
|
|
92835
|
-
|
|
92836
|
-
<div class="anim-controls">
|
|
92837
|
-
|
|
92838
|
-
<div style="padding:20px 0 0 18px;">
|
|
92839
|
-
<div class="anim-label">
|
|
92840
|
-
<span>
|
|
92841
|
-
<span class="bold">${out('Fade')}</span>:
|
|
92842
|
-
</span>
|
|
92843
|
-
</div>
|
|
92844
|
-
<div class="flex-wrap">
|
|
92845
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
|
|
92846
|
-
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
|
|
92847
|
-
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
|
|
92848
|
-
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
|
|
92849
|
-
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
|
|
92850
|
-
</div>
|
|
92851
|
-
|
|
92852
|
-
<div class="anim-label">
|
|
92853
|
-
<span>
|
|
92854
|
-
<span class="bold">${out('Slide')}</span>:
|
|
92855
|
-
</span>
|
|
92856
|
-
</div>
|
|
92857
|
-
<div class="flex-wrap">
|
|
92858
|
-
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
|
|
92859
|
-
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
|
|
92860
|
-
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
|
|
92861
|
-
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
|
|
92862
|
-
</div>
|
|
92863
|
-
|
|
92864
|
-
<div class="anim-label">
|
|
92865
|
-
<span>
|
|
92866
|
-
<span class="bold">${out('Flip')}</span>:
|
|
92867
|
-
</span>
|
|
92868
|
-
</div>
|
|
92869
|
-
<div class="flex-wrap">
|
|
92870
|
-
<button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
|
|
92871
|
-
<button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
|
|
92872
|
-
</div>
|
|
92873
|
-
|
|
92874
|
-
<div class="anim-label">
|
|
92875
|
-
<span>
|
|
92876
|
-
<span class="bold">${out('Zoom')}</span>:
|
|
92877
|
-
</span>
|
|
92878
|
-
</div>
|
|
92879
|
-
<div class="flex-wrap">
|
|
92880
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
|
|
92881
|
-
<button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
|
|
92882
|
-
</div>
|
|
92883
|
-
|
|
92884
|
-
<div class="anim-label">
|
|
92885
|
-
<span>
|
|
92886
|
-
<span class="bold">${out('Pulse')}</span>:
|
|
92887
|
-
</span>
|
|
92888
|
-
</div>
|
|
92889
|
-
<div class="flex-wrap">
|
|
92890
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
|
|
92891
|
-
</div>
|
|
92892
|
-
|
|
92893
|
-
<div class="anim-label">
|
|
92894
|
-
<span>
|
|
92895
|
-
<span class="bold">${out('Bounce')}</span>:
|
|
92896
|
-
</span>
|
|
92897
|
-
</div>
|
|
92898
|
-
<div class="flex-wrap">
|
|
92899
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
|
|
92900
|
-
</div>
|
|
92901
92990
|
|
|
92902
|
-
|
|
92903
|
-
|
|
92904
|
-
|
|
92905
|
-
|
|
92906
|
-
|
|
92907
|
-
|
|
92908
|
-
<
|
|
92909
|
-
|
|
92910
|
-
|
|
92911
|
-
|
|
92912
|
-
|
|
92913
|
-
|
|
92914
|
-
|
|
92915
|
-
|
|
92916
|
-
|
|
92917
|
-
|
|
92918
|
-
|
|
92919
|
-
|
|
92920
|
-
|
|
92921
|
-
|
|
92922
|
-
|
|
92923
|
-
|
|
92991
|
+
<div id="divAnimScrollSimple" class="is-tab-content active" data-group="animtype" style="padding:0">
|
|
92992
|
+
|
|
92993
|
+
<div class="anim-controls" style="overflow-y: auto;">
|
|
92994
|
+
|
|
92995
|
+
<div style="margin-top: 30px;margin-left: 22px;">
|
|
92996
|
+
|
|
92997
|
+
<table style="margin:12px 0 0 0;">
|
|
92998
|
+
<tr>
|
|
92999
|
+
<td></td>
|
|
93000
|
+
<td>${out('Start')}:</td>
|
|
93001
|
+
<td>${out('End')}:</td>
|
|
93002
|
+
<td></td>
|
|
93003
|
+
</tr>
|
|
93004
|
+
<tr>
|
|
93005
|
+
<td>${out('x')}</td>
|
|
93006
|
+
<td>
|
|
93007
|
+
<input class="inp-simplescroll-x-start" placeholder="-100" type="text" />
|
|
93008
|
+
</td>
|
|
93009
|
+
<td>
|
|
93010
|
+
<input class="inp-simplescroll-x-end" placeholder="100" type="text" />
|
|
93011
|
+
</td>
|
|
93012
|
+
<td style="font-size: 12px;">${out('px (default)')}</td>
|
|
93013
|
+
</tr>
|
|
93014
|
+
<tr>
|
|
93015
|
+
<td>${out('y')}</td>
|
|
93016
|
+
<td>
|
|
93017
|
+
<input class="inp-simplescroll-y-start" placeholder="100%" type="text" />
|
|
93018
|
+
</td>
|
|
93019
|
+
<td>
|
|
93020
|
+
<input class="inp-simplescroll-y-end" placeholder="-100%" type="text" />
|
|
93021
|
+
</td>
|
|
93022
|
+
<td style="font-size: 12px;">${out('px (default)')}</td>
|
|
93023
|
+
</tr>
|
|
93024
|
+
<tr>
|
|
93025
|
+
<td>${out('Scale')}</td>
|
|
93026
|
+
<td>
|
|
93027
|
+
<input class="inp-simplescroll-scale-start" placeholder="0.8" type="text" />
|
|
93028
|
+
</td>
|
|
93029
|
+
<td>
|
|
93030
|
+
<input class="inp-simplescroll-scale-end" placeholder="1.2" type="text" />
|
|
93031
|
+
</td>
|
|
93032
|
+
<td></td>
|
|
93033
|
+
</tr>
|
|
93034
|
+
</table>
|
|
93035
|
+
|
|
93036
|
+
<button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
|
|
92924
93037
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93038
|
+
<span style="margin-left:7px">${out('Clear All')}</span>
|
|
92925
93039
|
</button>
|
|
92926
|
-
</div>
|
|
92927
93040
|
|
|
92928
|
-
|
|
92929
|
-
|
|
92930
|
-
|
|
92931
|
-
|
|
93041
|
+
<button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
|
|
93042
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93043
|
+
<span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
|
|
93044
|
+
</button>
|
|
92932
93045
|
|
|
92933
|
-
|
|
92934
|
-
<button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
|
|
92935
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92936
|
-
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93046
|
+
</div>
|
|
92937
93047
|
</div>
|
|
92938
|
-
|
|
92939
93048
|
</div>
|
|
92940
93049
|
|
|
92941
|
-
|
|
93050
|
+
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="display:flex;padding:0">
|
|
92942
93051
|
|
|
92943
|
-
|
|
93052
|
+
<div class="anim-controls" style="overflow-y: auto;">
|
|
92944
93053
|
|
|
92945
|
-
|
|
93054
|
+
<div style="padding:15px 0 0 22px;">
|
|
93055
|
+
<div class="anim-label">
|
|
93056
|
+
<span>
|
|
93057
|
+
<span class="bold">${out('Fade')}</span>:
|
|
93058
|
+
</span>
|
|
93059
|
+
</div>
|
|
93060
|
+
<div class="flex-wrap">
|
|
93061
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
|
|
93062
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
|
|
93063
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
|
|
93064
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
|
|
93065
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
|
|
93066
|
+
</div>
|
|
92946
93067
|
|
|
92947
|
-
|
|
92948
|
-
|
|
92949
|
-
|
|
92950
|
-
|
|
92951
|
-
|
|
93068
|
+
<div class="anim-label">
|
|
93069
|
+
<span>
|
|
93070
|
+
<span class="bold">${out('Slide')}</span>:
|
|
93071
|
+
</span>
|
|
93072
|
+
</div>
|
|
93073
|
+
<div class="flex-wrap">
|
|
93074
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
|
|
93075
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
|
|
93076
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
|
|
93077
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
|
|
93078
|
+
</div>
|
|
93079
|
+
|
|
93080
|
+
<div class="anim-label">
|
|
93081
|
+
<span>
|
|
93082
|
+
<span class="bold">${out('Flip')}</span>:
|
|
93083
|
+
</span>
|
|
93084
|
+
</div>
|
|
93085
|
+
<div class="flex-wrap">
|
|
93086
|
+
<button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Horizontal')}</button>
|
|
93087
|
+
<button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Vertical')}</button>
|
|
93088
|
+
</div>
|
|
93089
|
+
|
|
93090
|
+
<div class="anim-label">
|
|
93091
|
+
<span>
|
|
93092
|
+
<span class="bold">${out('Zoom')}</span>:
|
|
93093
|
+
</span>
|
|
93094
|
+
</div>
|
|
93095
|
+
<div class="flex-wrap">
|
|
93096
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
|
|
93097
|
+
<button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
|
|
93098
|
+
</div>
|
|
93099
|
+
|
|
93100
|
+
<div class="anim-label">
|
|
93101
|
+
<span>
|
|
93102
|
+
<span class="bold">${out('Pulse')}</span>:
|
|
93103
|
+
</span>
|
|
93104
|
+
</div>
|
|
93105
|
+
<div class="flex-wrap">
|
|
93106
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
|
|
93107
|
+
</div>
|
|
93108
|
+
|
|
93109
|
+
<div class="anim-label">
|
|
93110
|
+
<span>
|
|
93111
|
+
<span class="bold">${out('Bounce')}</span>:
|
|
93112
|
+
</span>
|
|
93113
|
+
</div>
|
|
93114
|
+
<div class="flex-wrap">
|
|
93115
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
|
|
93116
|
+
</div>
|
|
92952
93117
|
|
|
92953
|
-
|
|
92954
|
-
|
|
92955
|
-
|
|
92956
|
-
|
|
92957
|
-
|
|
92958
|
-
|
|
92959
|
-
|
|
92960
|
-
|
|
92961
|
-
<
|
|
92962
|
-
|
|
92963
|
-
|
|
92964
|
-
|
|
92965
|
-
|
|
92966
|
-
|
|
92967
|
-
|
|
92968
|
-
|
|
92969
|
-
|
|
92970
|
-
|
|
92971
|
-
|
|
92972
|
-
|
|
92973
|
-
|
|
92974
|
-
|
|
92975
|
-
|
|
92976
|
-
|
|
92977
|
-
</
|
|
92978
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
92979
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92980
|
-
</button>
|
|
92981
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
|
|
92982
|
-
</div>
|
|
92983
|
-
<div class="flex-wrap">
|
|
92984
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
92985
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
92986
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
92987
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
92988
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
92989
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92990
|
-
</div>
|
|
93118
|
+
<div class="anim-label">
|
|
93119
|
+
<span>
|
|
93120
|
+
<span class="bold">${out('Animation Delay')}</span>:
|
|
93121
|
+
</span>
|
|
93122
|
+
</div>
|
|
93123
|
+
<div class="flex-wrap">
|
|
93124
|
+
<button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:55px">0s</button>
|
|
93125
|
+
<button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:55px">0.1s</button>
|
|
93126
|
+
<button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:55px">0.2s</button>
|
|
93127
|
+
<button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:55px">0.3s</button>
|
|
93128
|
+
<button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:55px">0.4s</button>
|
|
93129
|
+
<button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:55px">0.5s</button>
|
|
93130
|
+
<button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:55px">0.6s</button>
|
|
93131
|
+
<button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:55px">0.7s</button>
|
|
93132
|
+
<button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:55px">0.8s</button>
|
|
93133
|
+
<button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:55px">0.9s</button>
|
|
93134
|
+
<button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:55px">1s</button>
|
|
93135
|
+
<button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:55px">1.1s</button>
|
|
93136
|
+
<button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:55px">1.2s</button>
|
|
93137
|
+
<button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:55px">1.3s</button>
|
|
93138
|
+
<button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:55px">1.4s</button>
|
|
93139
|
+
<button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
|
|
93140
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93141
|
+
</button>
|
|
93142
|
+
</div>
|
|
92991
93143
|
|
|
92992
|
-
|
|
92993
|
-
|
|
92994
|
-
<span class="bold">${out('Slide Up')}</span>:
|
|
92995
|
-
<input class="inp-slide-up" type="text" />
|
|
92996
|
-
</span>
|
|
92997
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
92998
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93144
|
+
<button title="${out('Animate Once')}" class="cmd-basic-once" style="flex: none;margin-top:15px;width:165px;">
|
|
93145
|
+
${out('Animate Once')}
|
|
92999
93146
|
</button>
|
|
93000
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
|
|
93001
|
-
</div>
|
|
93002
|
-
<div class="flex-wrap">
|
|
93003
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93004
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93005
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93006
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93007
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93008
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93009
|
-
</div>
|
|
93010
|
-
<div class="anim-label">
|
|
93011
|
-
<span>
|
|
93012
|
-
<span class="bold">${out('Slide Down')}</span>:
|
|
93013
|
-
<input class="inp-slide-down" type="text" />
|
|
93014
|
-
</span>
|
|
93015
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
93016
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93017
|
-
</button>
|
|
93018
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
|
|
93019
|
-
</div>
|
|
93020
|
-
<div class="flex-wrap">
|
|
93021
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93022
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93023
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93024
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93025
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93026
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93027
|
-
</div>
|
|
93028
93147
|
|
|
93029
|
-
|
|
93030
|
-
<span>
|
|
93031
|
-
<span class="bold">${out('Scale')}</span>:
|
|
93032
|
-
<input class="inp-scale" type="text" />
|
|
93033
|
-
</span>
|
|
93034
|
-
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93148
|
+
<button title="${out('Clear All')}" class="cmd-clear-basicanim" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
|
|
93035
93149
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93150
|
+
<span style="margin-left:7px">${out('Clear All')}</span>
|
|
93036
93151
|
</button>
|
|
93037
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
|
|
93038
|
-
</div>
|
|
93039
|
-
<div class="flex-nowrap">
|
|
93040
|
-
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93041
|
-
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93042
|
-
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93043
|
-
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93044
|
-
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93045
|
-
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93046
|
-
</div>
|
|
93047
93152
|
|
|
93048
|
-
|
|
93049
|
-
<span>
|
|
93050
|
-
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
93051
|
-
<input class="inp-rotate-clockwise" type="text" />
|
|
93052
|
-
</span>
|
|
93053
|
-
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
93153
|
+
<button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
|
|
93054
93154
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93155
|
+
<span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
|
|
93055
93156
|
</button>
|
|
93056
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
93057
|
-
</div>
|
|
93058
|
-
<div class="flex-wrap">
|
|
93059
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93060
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93061
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93062
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93063
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93064
|
-
</div>
|
|
93065
|
-
<div class="anim-label">
|
|
93066
|
-
<span>
|
|
93067
|
-
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93068
|
-
<input class="inp-rotate-counter" type="text" />
|
|
93069
|
-
</span>
|
|
93070
|
-
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93071
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93072
|
-
</button>
|
|
93073
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93074
|
-
</div>
|
|
93075
|
-
<div class="flex-wrap">
|
|
93076
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93077
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93078
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93079
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93080
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93081
|
-
</div>
|
|
93082
|
-
|
|
93083
|
-
<div class="anim-label">
|
|
93084
|
-
<span class="bold">${out('Fade')}</span>:
|
|
93085
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
|
|
93086
93157
|
</div>
|
|
93087
|
-
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
|
|
93088
93158
|
|
|
93089
|
-
<br>
|
|
93090
|
-
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
93091
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93092
|
-
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93093
93159
|
</div>
|
|
93094
93160
|
|
|
93095
|
-
|
|
93161
|
+
</div>
|
|
93096
93162
|
|
|
93097
|
-
|
|
93098
|
-
<span>
|
|
93099
|
-
<span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
|
|
93100
|
-
</span>
|
|
93101
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
93102
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93103
|
-
</button>
|
|
93104
|
-
</div>
|
|
93105
|
-
<div class="flex-wrap">
|
|
93106
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93107
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93108
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93109
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93110
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93111
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93112
|
-
</div>
|
|
93113
|
-
<div class="anim-label">
|
|
93114
|
-
<span>
|
|
93115
|
-
<span class="bold">${out('Slide Right')}</span>:
|
|
93116
|
-
<input class="inp-slide-right" type="text" />
|
|
93117
|
-
</span>
|
|
93118
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93119
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93120
|
-
</button>
|
|
93121
|
-
</div>
|
|
93122
|
-
<div class="flex-wrap">
|
|
93123
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93124
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93125
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93126
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93127
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93128
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93129
|
-
</div>
|
|
93163
|
+
<div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="padding:0">
|
|
93130
93164
|
|
|
93131
|
-
|
|
93132
|
-
|
|
93133
|
-
|
|
93134
|
-
|
|
93135
|
-
</
|
|
93136
|
-
<
|
|
93137
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93138
|
-
</button>
|
|
93139
|
-
</div>
|
|
93140
|
-
<div class="flex-wrap">
|
|
93141
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93142
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93143
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93144
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93145
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93146
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93165
|
+
<div class="anim-controls">
|
|
93166
|
+
|
|
93167
|
+
<div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
|
|
93168
|
+
<a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
|
|
93169
|
+
<a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
|
|
93170
|
+
<a href="" data-content="divAnimSettings">${out('Settings')}</a>
|
|
93147
93171
|
</div>
|
|
93148
|
-
|
|
93149
|
-
|
|
93150
|
-
|
|
93151
|
-
|
|
93152
|
-
|
|
93153
|
-
|
|
93172
|
+
|
|
93173
|
+
<div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
|
|
93174
|
+
|
|
93175
|
+
<div class="anim-label">
|
|
93176
|
+
<span>
|
|
93177
|
+
<span class="bold">${out('Slide Left')}</span>:
|
|
93178
|
+
<input class="inp-slide-left" type="text" />
|
|
93179
|
+
</span>
|
|
93180
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
93181
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93182
|
+
</button>
|
|
93183
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
|
|
93184
|
+
</div>
|
|
93185
|
+
<div class="flex-wrap">
|
|
93186
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93187
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93188
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93189
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93190
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93191
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93192
|
+
</div>
|
|
93193
|
+
<div class="anim-label">
|
|
93194
|
+
<span>
|
|
93195
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
93196
|
+
<input class="inp-slide-right" type="text" />
|
|
93197
|
+
</span>
|
|
93198
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93199
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93200
|
+
</button>
|
|
93201
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
|
|
93202
|
+
</div>
|
|
93203
|
+
<div class="flex-wrap">
|
|
93204
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93205
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93206
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93207
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93208
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93209
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93210
|
+
</div>
|
|
93211
|
+
|
|
93212
|
+
<div class="anim-label">
|
|
93213
|
+
<span>
|
|
93214
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
93215
|
+
<input class="inp-slide-up" type="text" />
|
|
93216
|
+
</span>
|
|
93217
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
93218
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93219
|
+
</button>
|
|
93220
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
|
|
93221
|
+
</div>
|
|
93222
|
+
<div class="flex-wrap">
|
|
93223
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93224
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93225
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93226
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93227
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93228
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93229
|
+
</div>
|
|
93230
|
+
<div class="anim-label">
|
|
93231
|
+
<span>
|
|
93232
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
93233
|
+
<input class="inp-slide-down" type="text" />
|
|
93234
|
+
</span>
|
|
93235
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
93236
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93237
|
+
</button>
|
|
93238
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
|
|
93239
|
+
</div>
|
|
93240
|
+
<div class="flex-wrap">
|
|
93241
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93242
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93243
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93244
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93245
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93246
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93247
|
+
</div>
|
|
93248
|
+
|
|
93249
|
+
<div class="anim-label">
|
|
93250
|
+
<span>
|
|
93251
|
+
<span class="bold">${out('Scale')}</span>:
|
|
93252
|
+
<input class="inp-scale" type="text" />
|
|
93253
|
+
</span>
|
|
93254
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93255
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93256
|
+
</button>
|
|
93257
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
|
|
93258
|
+
</div>
|
|
93259
|
+
<div class="flex-nowrap">
|
|
93260
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93261
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93262
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93263
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93264
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93265
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93266
|
+
</div>
|
|
93267
|
+
|
|
93268
|
+
<div class="anim-label">
|
|
93269
|
+
<span>
|
|
93270
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
93271
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
93272
|
+
</span>
|
|
93273
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
93274
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93275
|
+
</button>
|
|
93276
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
93277
|
+
</div>
|
|
93278
|
+
<div class="flex-wrap">
|
|
93279
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93280
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93281
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93282
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93283
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93284
|
+
</div>
|
|
93285
|
+
<div class="anim-label">
|
|
93286
|
+
<span>
|
|
93287
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93288
|
+
<input class="inp-rotate-counter" type="text" />
|
|
93289
|
+
</span>
|
|
93290
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93291
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93292
|
+
</button>
|
|
93293
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93294
|
+
</div>
|
|
93295
|
+
<div class="flex-wrap">
|
|
93296
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93297
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93298
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93299
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93300
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93301
|
+
</div>
|
|
93302
|
+
|
|
93303
|
+
<div class="anim-label">
|
|
93304
|
+
<span class="bold">${out('Fade')}</span>:
|
|
93305
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
|
|
93306
|
+
</div>
|
|
93307
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade In')}</button>
|
|
93308
|
+
|
|
93309
|
+
<button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
|
|
93154
93310
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93311
|
+
<span style="margin-left:7px">${out('Clear All')}</span>
|
|
93155
93312
|
</button>
|
|
93156
|
-
</div>
|
|
93157
|
-
<div class="flex-wrap">
|
|
93158
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93159
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93160
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93161
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93162
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93163
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93164
|
-
</div>
|
|
93165
93313
|
|
|
93166
|
-
|
|
93167
|
-
<span>
|
|
93168
|
-
<span class="bold">${out('Scale')}</span>:
|
|
93169
|
-
<input class="inp-scale" type="text" />
|
|
93170
|
-
</span>
|
|
93171
|
-
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93314
|
+
<button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
|
|
93172
93315
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93316
|
+
<span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
|
|
93173
93317
|
</button>
|
|
93174
93318
|
</div>
|
|
93175
|
-
<div class="flex-nowrap">
|
|
93176
|
-
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93177
|
-
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93178
|
-
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93179
|
-
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93180
|
-
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93181
|
-
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93182
|
-
</div>
|
|
93183
93319
|
|
|
93184
|
-
<div class="
|
|
93185
|
-
|
|
93186
|
-
|
|
93187
|
-
<
|
|
93188
|
-
|
|
93189
|
-
|
|
93320
|
+
<div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
93321
|
+
|
|
93322
|
+
<div class="anim-label">
|
|
93323
|
+
<span>
|
|
93324
|
+
<span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
|
|
93325
|
+
</span>
|
|
93326
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
93327
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93328
|
+
</button>
|
|
93329
|
+
</div>
|
|
93330
|
+
<div class="flex-wrap">
|
|
93331
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93332
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93333
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93334
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93335
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93336
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93337
|
+
</div>
|
|
93338
|
+
<div class="anim-label">
|
|
93339
|
+
<span>
|
|
93340
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
93341
|
+
<input class="inp-slide-right" type="text" />
|
|
93342
|
+
</span>
|
|
93343
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93344
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93345
|
+
</button>
|
|
93346
|
+
</div>
|
|
93347
|
+
<div class="flex-wrap">
|
|
93348
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93349
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93350
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93351
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93352
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93353
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93354
|
+
</div>
|
|
93355
|
+
|
|
93356
|
+
<div class="anim-label">
|
|
93357
|
+
<span>
|
|
93358
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
93359
|
+
<input class="inp-slide-up" type="text" />
|
|
93360
|
+
</span>
|
|
93361
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
93362
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93363
|
+
</button>
|
|
93364
|
+
</div>
|
|
93365
|
+
<div class="flex-wrap">
|
|
93366
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93367
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93368
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93369
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93370
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93371
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93372
|
+
</div>
|
|
93373
|
+
<div class="anim-label">
|
|
93374
|
+
<span>
|
|
93375
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
93376
|
+
<input class="inp-slide-down" type="text" />
|
|
93377
|
+
</span>
|
|
93378
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
93379
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93380
|
+
</button>
|
|
93381
|
+
</div>
|
|
93382
|
+
<div class="flex-wrap">
|
|
93383
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93384
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93385
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93386
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93387
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93388
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93389
|
+
</div>
|
|
93390
|
+
|
|
93391
|
+
<div class="anim-label">
|
|
93392
|
+
<span>
|
|
93393
|
+
<span class="bold">${out('Scale')}</span>:
|
|
93394
|
+
<input class="inp-scale" type="text" />
|
|
93395
|
+
</span>
|
|
93396
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93397
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93398
|
+
</button>
|
|
93399
|
+
</div>
|
|
93400
|
+
<div class="flex-nowrap">
|
|
93401
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93402
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93403
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93404
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93405
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93406
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93407
|
+
</div>
|
|
93408
|
+
|
|
93409
|
+
<div class="anim-label">
|
|
93410
|
+
<span>
|
|
93411
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
93412
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
93413
|
+
</span>
|
|
93414
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
93415
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93416
|
+
</button>
|
|
93417
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
93418
|
+
</div>
|
|
93419
|
+
<div class="flex-wrap">
|
|
93420
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93421
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93422
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93423
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93424
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93425
|
+
</div>
|
|
93426
|
+
<div class="anim-label">
|
|
93427
|
+
<span>
|
|
93428
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93429
|
+
<input class="inp-rotate-counter" type="text" />
|
|
93430
|
+
</span>
|
|
93431
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93432
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93433
|
+
</button>
|
|
93434
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93435
|
+
</div>
|
|
93436
|
+
<div class="flex-wrap">
|
|
93437
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93438
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93439
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93440
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93441
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93442
|
+
</div>
|
|
93443
|
+
|
|
93444
|
+
<div class="anim-label">
|
|
93445
|
+
<span class="bold">${out('Fade')}</span>:
|
|
93446
|
+
</div>
|
|
93447
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="flex: none;width:125px">${out('Fade Out')}</button>
|
|
93448
|
+
|
|
93449
|
+
<button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="flex: none;margin-top:30px;width:320px">
|
|
93190
93450
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93451
|
+
<span style="margin-left:7px">${out('Clear All')}</span>
|
|
93191
93452
|
</button>
|
|
93192
|
-
|
|
93193
|
-
|
|
93194
|
-
<div class="flex-wrap">
|
|
93195
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93196
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93197
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93198
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93199
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93200
|
-
</div>
|
|
93201
|
-
<div class="anim-label">
|
|
93202
|
-
<span>
|
|
93203
|
-
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93204
|
-
<input class="inp-rotate-counter" type="text" />
|
|
93205
|
-
</span>
|
|
93206
|
-
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93453
|
+
|
|
93454
|
+
<button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="flex: none;margin-top:15px;width:320px">
|
|
93207
93455
|
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93456
|
+
<span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
|
|
93208
93457
|
</button>
|
|
93209
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93210
|
-
</div>
|
|
93211
|
-
<div class="flex-wrap">
|
|
93212
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93213
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93214
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93215
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93216
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93217
|
-
</div>
|
|
93218
93458
|
|
|
93219
|
-
<div class="anim-label">
|
|
93220
|
-
<span class="bold">${out('Fade')}</span>:
|
|
93221
93459
|
</div>
|
|
93222
|
-
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
|
|
93223
93460
|
|
|
93224
|
-
<
|
|
93225
|
-
|
|
93226
|
-
|
|
93227
|
-
|
|
93228
|
-
|
|
93229
|
-
|
|
93230
|
-
|
|
93231
|
-
|
|
93232
|
-
|
|
93233
|
-
|
|
93234
|
-
|
|
93235
|
-
|
|
93236
|
-
<
|
|
93237
|
-
<
|
|
93238
|
-
|
|
93239
|
-
|
|
93240
|
-
|
|
93241
|
-
|
|
93242
|
-
<div class="anim-label">${out('End')}:</div>
|
|
93243
|
-
<div class="flex-wrap">
|
|
93244
|
-
<button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
|
|
93245
|
-
<button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:80px">${out('Soon')}</button>
|
|
93246
|
-
<button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:80px">${out('Normal')}</button>
|
|
93247
|
-
</div>
|
|
93461
|
+
<div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
93462
|
+
|
|
93463
|
+
<div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
|
|
93464
|
+
|
|
93465
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93466
|
+
<div class="flex-wrap">
|
|
93467
|
+
<button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:74px">${out('Normal')}</button>
|
|
93468
|
+
<button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:74px">${out('Delayed')}</button>
|
|
93469
|
+
<button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:74px">${out('Late')}</button>
|
|
93470
|
+
<button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
|
|
93471
|
+
</div>
|
|
93472
|
+
|
|
93473
|
+
<div class="anim-label">${out('End')}:</div>
|
|
93474
|
+
<div class="flex-wrap">
|
|
93475
|
+
<button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
|
|
93476
|
+
<button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:74px">${out('Soon')}</button>
|
|
93477
|
+
<button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:74px">${out('Normal')}</button>
|
|
93478
|
+
</div>
|
|
93248
93479
|
|
|
93249
|
-
|
|
93480
|
+
<div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
|
|
93250
93481
|
|
|
93251
|
-
|
|
93252
|
-
|
|
93253
|
-
|
|
93254
|
-
|
|
93255
|
-
|
|
93256
|
-
|
|
93482
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93483
|
+
<div class="flex-wrap">
|
|
93484
|
+
<button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:74px">${out('Normal')}</button>
|
|
93485
|
+
<button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:74px">${out('Delayed')}</button>
|
|
93486
|
+
<button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:74px">${out('Late')}</button>
|
|
93487
|
+
<button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
|
|
93488
|
+
</div>
|
|
93257
93489
|
</div>
|
|
93490
|
+
|
|
93491
|
+
|
|
93258
93492
|
</div>
|
|
93259
93493
|
|
|
93260
|
-
|
|
93261
93494
|
</div>
|
|
93262
93495
|
|
|
93496
|
+
<div class="dummy-elm"></div>
|
|
93497
|
+
|
|
93263
93498
|
</div>
|
|
93264
93499
|
|
|
93265
|
-
<div class="
|
|
93500
|
+
<div class="div-wizard-settings" style="display:block">
|
|
93501
|
+
<!--<div class="anim-label" style="margin-bottom:15px">${out('Apply To')}: ${out('Section')}</div>-->
|
|
93502
|
+
|
|
93503
|
+
<div class="flex-wrap" style="margin-top: 10px;">
|
|
93504
|
+
<label class="label-checkbox" for="chkPresetAnimOnce" style="margin:0;margin-right:15px;">
|
|
93505
|
+
<input id="chkPresetAnimOnce" type="checkbox" />
|
|
93506
|
+
${out('Animate Once')}
|
|
93507
|
+
</label>
|
|
93508
|
+
|
|
93509
|
+
<button title="${out('Clear')}" class="cmd-clear-anim-wizard" style="width:100px">
|
|
93510
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93511
|
+
<span style="margin-left:7px">${out('Clear')}</span>
|
|
93512
|
+
</button>
|
|
93513
|
+
</div>
|
|
93514
|
+
|
|
93515
|
+
<div class="anim-preset-list" style="height: calc(100vh - 97px);
|
|
93516
|
+
overflow: auto;
|
|
93517
|
+
width: 347px;">
|
|
93518
|
+
<div style="display:flex;
|
|
93519
|
+
flex-direction: column;
|
|
93520
|
+
align-items: flex-start;
|
|
93521
|
+
padding: 0 20px 20px 0;
|
|
93522
|
+
">
|
|
93523
|
+
<div style="margin: 20px 0 5px;">${out('Fade In')}</div>
|
|
93524
|
+
<button title="${out('Fade In')}" class="cmd-preset-onview" data-value="is-fadeIn" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
|
|
93525
|
+
<img src="${this.builder.assetPath + 'images/fade-in.gif'}" />
|
|
93526
|
+
</button>
|
|
93527
|
+
|
|
93528
|
+
<div style="margin: 20px 0 5px;">${out('Fade In - Slow')}</div>
|
|
93529
|
+
<button title="${out('Fade In - Slow')}" class="cmd-preset-onview" data-value="is-fadeIn" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
|
|
93530
|
+
<img src="${this.builder.assetPath + 'images/fade-in-slow.gif'}" />
|
|
93531
|
+
</button>
|
|
93532
|
+
|
|
93533
|
+
<div style="margin: 20px 0 5px;">${out('Fade In Up')}</div>
|
|
93534
|
+
<button title="${out('Fade In Up')}" class="cmd-preset-onview" data-value="is-fadeInUp" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
|
|
93535
|
+
<img src="${this.builder.assetPath + 'images/fade-in-up.gif'}" />
|
|
93536
|
+
</button>
|
|
93537
|
+
|
|
93538
|
+
<div style="margin: 20px 0 5px;">${out('Fade In Up - Slow')}</div>
|
|
93539
|
+
<button title="${out('Fade In Up - Slow')}" class="cmd-preset-onview" data-value="is-fadeInUp" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
|
|
93540
|
+
<img src="${this.builder.assetPath + 'images/fade-in-up-slow.gif'}" />
|
|
93541
|
+
</button>
|
|
93542
|
+
|
|
93543
|
+
<div style="margin: 20px 0 5px;">${out('Slide Up')}</div>
|
|
93544
|
+
<button title="${out('Slide Up')}" class="cmd-preset-onview" data-value="is-slideInUp" data-delay="100" style="width:100%;height:90px;overflow:hidden;">
|
|
93545
|
+
<img src="${this.builder.assetPath + 'images/slide-up.gif'}" />
|
|
93546
|
+
</button>
|
|
93547
|
+
|
|
93548
|
+
<div style="margin: 20px 0 5px;">${out('Slide Up - Slow')}</div>
|
|
93549
|
+
<button title="${out('Slide Up - Slow')}" class="cmd-preset-onview" data-value="is-slideInUp" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
|
|
93550
|
+
<img src="${this.builder.assetPath + 'images/slide-up-slow.gif'}" />
|
|
93551
|
+
</button>
|
|
93552
|
+
|
|
93553
|
+
<div style="margin: 20px 0 5px;">${out('Zoom In')}</div>
|
|
93554
|
+
<button title="${out('Zoom In')}" class="cmd-preset-onview" data-value="is-zoomIn" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
|
|
93555
|
+
<img src="${this.builder.assetPath + 'images/zoom-in.gif'}" />
|
|
93556
|
+
</button>
|
|
93557
|
+
|
|
93558
|
+
<div style="margin: 20px 0 5px;">${out('Zoom Out')}</div>
|
|
93559
|
+
<button title="${out('Zoom Out')}" class="cmd-preset-onview" data-value="is-zoomOut" data-delay="300" style="width:100%;height:90px;overflow:hidden;">
|
|
93560
|
+
<img src="${this.builder.assetPath + 'images/zoom-out.gif'}" />
|
|
93561
|
+
</button>
|
|
93562
|
+
</div>
|
|
93563
|
+
</div>
|
|
93564
|
+
|
|
93565
|
+
</div>
|
|
93266
93566
|
|
|
93267
93567
|
</div>
|
|
93268
93568
|
`;
|
|
@@ -93288,6 +93588,237 @@ class AnimateScroll {
|
|
|
93288
93588
|
btn.classList.add('on');
|
|
93289
93589
|
this.read();
|
|
93290
93590
|
});
|
|
93591
|
+
});
|
|
93592
|
+
const divAnimSettings = modalAnimateScroll.querySelector('.div-anim-settings');
|
|
93593
|
+
const divWizardSettings = modalAnimateScroll.querySelector('.div-wizard-settings');
|
|
93594
|
+
const btnAnimWizard = modalAnimateScroll.querySelector('.cmd-anim-edit');
|
|
93595
|
+
btnAnimWizard.addEventListener('click', () => {
|
|
93596
|
+
if (btnAnimWizard.classList.contains('on')) {
|
|
93597
|
+
btnAnimWizard.classList.remove('on');
|
|
93598
|
+
divAnimSettings.style.display = 'none';
|
|
93599
|
+
divWizardSettings.style.display = 'block';
|
|
93600
|
+
} else {
|
|
93601
|
+
btnAnimWizard.classList.add('on');
|
|
93602
|
+
divWizardSettings.style.display = 'none';
|
|
93603
|
+
divAnimSettings.style.display = 'block';
|
|
93604
|
+
}
|
|
93605
|
+
});
|
|
93606
|
+
const btnClearAnimAll = modalAnimateScroll.querySelectorAll('.cmd-clear-anim-all');
|
|
93607
|
+
btnClearAnimAll.forEach(btn => {
|
|
93608
|
+
btn.addEventListener('click', () => {
|
|
93609
|
+
this.builder.editor.saveForUndo();
|
|
93610
|
+
let section = this.builder.activeSection;
|
|
93611
|
+
let activeCol = this.builder.editor.activeCol;
|
|
93612
|
+
if (activeCol) section = activeCol.closest('.is-section');
|
|
93613
|
+
let elms;
|
|
93614
|
+
elms = section.querySelectorAll('*');
|
|
93615
|
+
elms.forEach(elm => {
|
|
93616
|
+
elm.removeAttribute('data-center');
|
|
93617
|
+
elm.removeAttribute('data-center-top');
|
|
93618
|
+
elm.removeAttribute('data--50-bottom');
|
|
93619
|
+
elm.removeAttribute('data--100-bottom');
|
|
93620
|
+
elm.removeAttribute('data--150-bottom');
|
|
93621
|
+
elm.removeAttribute('data--200-bottom');
|
|
93622
|
+
elm.removeAttribute('data--300-bottom');
|
|
93623
|
+
elm.removeAttribute('data--400-bottom');
|
|
93624
|
+
elm.removeAttribute('data-bottom-top');
|
|
93625
|
+
elm.removeAttribute('data-400-bottom');
|
|
93626
|
+
elm.removeAttribute('data-300-bottom');
|
|
93627
|
+
elm.removeAttribute('data-200-bottom');
|
|
93628
|
+
elm.removeAttribute('data-150-bottom');
|
|
93629
|
+
elm.removeAttribute('data-100-bottom');
|
|
93630
|
+
elm.removeAttribute('data-50-bottom');
|
|
93631
|
+
elm.removeAttribute('data-bottom');
|
|
93632
|
+
elm.removeAttribute('data-center-bottom');
|
|
93633
|
+
elm.removeAttribute('data-100-top');
|
|
93634
|
+
elm.removeAttribute('data-50-top');
|
|
93635
|
+
elm.removeAttribute('data-top');
|
|
93636
|
+
elm.removeAttribute('data-top-bottom');
|
|
93637
|
+
elm.style.transform = '';
|
|
93638
|
+
elm.style.transition = '';
|
|
93639
|
+
elm.style.opacity = ''; // console.log(elm)
|
|
93640
|
+
});
|
|
93641
|
+
elms = section.querySelectorAll('.is-animated');
|
|
93642
|
+
elms.forEach(elm => {
|
|
93643
|
+
if (elm.classList.contains('is-overlay-bg')) return;
|
|
93644
|
+
elm.classList.remove('is-animated');
|
|
93645
|
+
elm.classList.remove('once');
|
|
93646
|
+
elm.classList.remove('is-fadeIn');
|
|
93647
|
+
elm.classList.remove('is-fadeInUp');
|
|
93648
|
+
elm.classList.remove('is-fadeInDown');
|
|
93649
|
+
elm.classList.remove('is-fadeInLeft');
|
|
93650
|
+
elm.classList.remove('is-fadeInRight');
|
|
93651
|
+
elm.classList.remove('is-zoomIn');
|
|
93652
|
+
elm.classList.remove('is-zoomOut');
|
|
93653
|
+
elm.classList.remove('is-slideInUp');
|
|
93654
|
+
elm.classList.remove('is-slideInDown');
|
|
93655
|
+
elm.classList.remove('is-slideInLeft');
|
|
93656
|
+
elm.classList.remove('is-slideInRight');
|
|
93657
|
+
elm.classList.remove('is-flipInX');
|
|
93658
|
+
elm.classList.remove('is-flipInY');
|
|
93659
|
+
elm.classList.remove('is-pulse');
|
|
93660
|
+
elm.classList.remove('is-bounceIn');
|
|
93661
|
+
}); // clear
|
|
93662
|
+
|
|
93663
|
+
this.clearSettings(); // set default
|
|
93664
|
+
|
|
93665
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
|
|
93666
|
+
// default
|
|
93667
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
93668
|
+
if (btn) btn.classList.add('on');
|
|
93669
|
+
}
|
|
93670
|
+
|
|
93671
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
|
|
93672
|
+
// default
|
|
93673
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
93674
|
+
if (btn) btn.classList.add('on');
|
|
93675
|
+
}
|
|
93676
|
+
|
|
93677
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
|
|
93678
|
+
// default
|
|
93679
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
93680
|
+
if (btn) btn.classList.add('on');
|
|
93681
|
+
}
|
|
93682
|
+
|
|
93683
|
+
if (this.builder.win.skrollrr) {
|
|
93684
|
+
setTimeout(() => {
|
|
93685
|
+
this.builder.win.skrollrr.refresh();
|
|
93686
|
+
}, 30);
|
|
93687
|
+
} // Refresh
|
|
93688
|
+
|
|
93689
|
+
|
|
93690
|
+
this.builder.settings.onRender(); //Trigger Change event
|
|
93691
|
+
|
|
93692
|
+
this.builder.settings.onChange();
|
|
93693
|
+
});
|
|
93694
|
+
});
|
|
93695
|
+
const btnClearAnimWizard = modalAnimateScroll.querySelector('.cmd-clear-anim-wizard');
|
|
93696
|
+
btnClearAnimWizard.addEventListener('click', () => {
|
|
93697
|
+
this.builder.editor.saveForUndo();
|
|
93698
|
+
const section = this.builder.activeSection;
|
|
93699
|
+
let elms;
|
|
93700
|
+
elms = section.querySelectorAll('.is-animated');
|
|
93701
|
+
elms.forEach(elm => {
|
|
93702
|
+
if (elm.classList.contains('is-overlay-bg')) return;
|
|
93703
|
+
elm.classList.remove('is-animated');
|
|
93704
|
+
elm.classList.remove('once');
|
|
93705
|
+
elm.classList.remove('is-fadeIn');
|
|
93706
|
+
elm.classList.remove('is-fadeInUp');
|
|
93707
|
+
elm.classList.remove('is-fadeInDown');
|
|
93708
|
+
elm.classList.remove('is-fadeInLeft');
|
|
93709
|
+
elm.classList.remove('is-fadeInRight');
|
|
93710
|
+
elm.classList.remove('is-zoomIn');
|
|
93711
|
+
elm.classList.remove('is-zoomOut');
|
|
93712
|
+
elm.classList.remove('is-slideInUp');
|
|
93713
|
+
elm.classList.remove('is-slideInDown');
|
|
93714
|
+
elm.classList.remove('is-slideInLeft');
|
|
93715
|
+
elm.classList.remove('is-slideInRight');
|
|
93716
|
+
elm.classList.remove('is-flipInX');
|
|
93717
|
+
elm.classList.remove('is-flipInY');
|
|
93718
|
+
elm.classList.remove('is-pulse');
|
|
93719
|
+
elm.classList.remove('is-bounceIn');
|
|
93720
|
+
}); // Refresh
|
|
93721
|
+
|
|
93722
|
+
this.builder.settings.onRender(); //Trigger Change event
|
|
93723
|
+
|
|
93724
|
+
this.builder.settings.onChange();
|
|
93725
|
+
});
|
|
93726
|
+
|
|
93727
|
+
const applyPresetBasic = process => {
|
|
93728
|
+
this.builder.editor.saveForUndo();
|
|
93729
|
+
const section = this.builder.activeSection;
|
|
93730
|
+
let start = 0;
|
|
93731
|
+
let boxes = section.querySelectorAll('.is-box');
|
|
93732
|
+
if (boxes.length === 0) boxes = section.querySelectorAll('.is-box-centered');
|
|
93733
|
+
boxes.forEach(box => {
|
|
93734
|
+
let index = start;
|
|
93735
|
+
const rows = box.querySelectorAll('.is-container > div');
|
|
93736
|
+
rows.forEach(row => {
|
|
93737
|
+
const cols = this.builder.editor.dom.elementChildren(row);
|
|
93738
|
+
cols.forEach(col => {
|
|
93739
|
+
if (col.innerText.trim() === '' && !col.querySelector('img') && !col.querySelector('iframe') && !col.querySelector('video') && !col.querySelector('audio') && !col.querySelector('i')) return;
|
|
93740
|
+
col.style.transition = 'none';
|
|
93741
|
+
this.cleanupBasic(col);
|
|
93742
|
+
this.cleanupDelay(col);
|
|
93743
|
+
col.classList.add('is-animated');
|
|
93744
|
+
|
|
93745
|
+
if (chkPresetAnimOnce.checked) {
|
|
93746
|
+
col.classList.add('once');
|
|
93747
|
+
} else {
|
|
93748
|
+
col.classList.remove('once');
|
|
93749
|
+
} // col.classList.add('is-fadeInUp');
|
|
93750
|
+
|
|
93751
|
+
|
|
93752
|
+
process(col, index);
|
|
93753
|
+
col.classList.remove('is-inview');
|
|
93754
|
+
index++;
|
|
93755
|
+
}); // row.setAttribute('data-bottom-top', 'transform: translateY(125px)');
|
|
93756
|
+
// row.setAttribute('data-center', 'transform: translateY(0px)');
|
|
93757
|
+
});
|
|
93758
|
+
start++;
|
|
93759
|
+
}); // Refresh
|
|
93760
|
+
|
|
93761
|
+
this.builder.settings.onRender(); // Play
|
|
93762
|
+
|
|
93763
|
+
setTimeout(() => {
|
|
93764
|
+
let elms = section.querySelectorAll('.is-animated');
|
|
93765
|
+
elms.forEach(elm => {
|
|
93766
|
+
elm.style.transition = 'none';
|
|
93767
|
+
elm.classList.remove('is-inview');
|
|
93768
|
+
});
|
|
93769
|
+
setTimeout(() => {
|
|
93770
|
+
elms = section.querySelectorAll('.is-animated');
|
|
93771
|
+
elms.forEach(elm => {
|
|
93772
|
+
elm.style.transition = '';
|
|
93773
|
+
elm.classList.add('is-inview');
|
|
93774
|
+
});
|
|
93775
|
+
}, 30);
|
|
93776
|
+
}, 100); //Trigger Change event
|
|
93777
|
+
|
|
93778
|
+
this.builder.settings.onChange();
|
|
93779
|
+
};
|
|
93780
|
+
|
|
93781
|
+
const btnPresetOnviews = modalAnimateScroll.querySelectorAll('.cmd-preset-onview');
|
|
93782
|
+
btnPresetOnviews.forEach(btn => {
|
|
93783
|
+
btn.addEventListener('click', () => {
|
|
93784
|
+
applyPresetBasic((col, index) => {
|
|
93785
|
+
col.classList.add(btn.getAttribute('data-value'));
|
|
93786
|
+
let delay = btn.getAttribute('data-delay');
|
|
93787
|
+
if (index !== 0) col.classList.add(`delay-${index * delay}ms`);
|
|
93788
|
+
});
|
|
93789
|
+
});
|
|
93790
|
+
});
|
|
93791
|
+
const chkPresetAnimOnce = modalAnimateScroll.querySelector('#chkPresetAnimOnce');
|
|
93792
|
+
chkPresetAnimOnce.addEventListener('click', () => {
|
|
93793
|
+
this.builder.editor.saveForUndo();
|
|
93794
|
+
const section = this.builder.activeSection;
|
|
93795
|
+
let elms = section.querySelectorAll('.is-animated');
|
|
93796
|
+
elms.forEach(elm => {
|
|
93797
|
+
if (chkPresetAnimOnce.checked) {
|
|
93798
|
+
elm.classList.add('once');
|
|
93799
|
+
} else {
|
|
93800
|
+
elm.classList.remove('once');
|
|
93801
|
+
}
|
|
93802
|
+
}); // Refresh
|
|
93803
|
+
|
|
93804
|
+
this.builder.settings.onRender(); // Play
|
|
93805
|
+
|
|
93806
|
+
setTimeout(() => {
|
|
93807
|
+
elms = section.querySelectorAll('.is-animated');
|
|
93808
|
+
elms.forEach(elm => {
|
|
93809
|
+
elm.style.transition = 'none';
|
|
93810
|
+
elm.classList.remove('is-inview');
|
|
93811
|
+
});
|
|
93812
|
+
setTimeout(() => {
|
|
93813
|
+
elms = section.querySelectorAll('.is-animated');
|
|
93814
|
+
elms.forEach(elm => {
|
|
93815
|
+
elm.style.transition = '';
|
|
93816
|
+
elm.classList.add('is-inview');
|
|
93817
|
+
});
|
|
93818
|
+
}, 30);
|
|
93819
|
+
}, 100); //Trigger Change event
|
|
93820
|
+
|
|
93821
|
+
this.builder.settings.onChange();
|
|
93291
93822
|
}); // Default
|
|
93292
93823
|
|
|
93293
93824
|
const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
@@ -94039,6 +94570,53 @@ class AnimateScroll {
|
|
|
94039
94570
|
} //Trigger Change event
|
|
94040
94571
|
|
|
94041
94572
|
|
|
94573
|
+
this.builder.settings.onChange();
|
|
94574
|
+
}); // ---
|
|
94575
|
+
// SIMPLE ON SCROLL
|
|
94576
|
+
|
|
94577
|
+
const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
|
|
94578
|
+
inpSimpleScrollX_Start.addEventListener('change', () => {
|
|
94579
|
+
this.applySimpleScroll();
|
|
94580
|
+
});
|
|
94581
|
+
const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
|
|
94582
|
+
inpSimpleScrollX_End.addEventListener('change', () => {
|
|
94583
|
+
this.applySimpleScroll();
|
|
94584
|
+
});
|
|
94585
|
+
const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
|
|
94586
|
+
inpSimpleScrollY_Start.addEventListener('change', () => {
|
|
94587
|
+
this.applySimpleScroll();
|
|
94588
|
+
});
|
|
94589
|
+
const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
|
|
94590
|
+
inpSimpleScrollY_End.addEventListener('change', () => {
|
|
94591
|
+
this.applySimpleScroll();
|
|
94592
|
+
});
|
|
94593
|
+
const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
|
|
94594
|
+
inpSimpleScrollScale_Start.addEventListener('change', () => {
|
|
94595
|
+
this.applySimpleScroll();
|
|
94596
|
+
});
|
|
94597
|
+
const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
|
|
94598
|
+
inpSimpleScrollScale_End.addEventListener('change', () => {
|
|
94599
|
+
this.applySimpleScroll();
|
|
94600
|
+
});
|
|
94601
|
+
const btnClearSimpleScroll = modalAnimateScroll.querySelector('.cmd-clear-simplescroll');
|
|
94602
|
+
btnClearSimpleScroll.addEventListener('click', () => {
|
|
94603
|
+
let activeElement;
|
|
94604
|
+
let target = this.getTarget();
|
|
94605
|
+
activeElement = target.element;
|
|
94606
|
+
if (!activeElement) return;
|
|
94607
|
+
this.builder.editor.saveForUndo();
|
|
94608
|
+
this.cleanup(activeElement);
|
|
94609
|
+
this.cleanup_leave(activeElement);
|
|
94610
|
+
activeElement.style.transform = '';
|
|
94611
|
+
activeElement.style.transition = '';
|
|
94612
|
+
activeElement.style.opacity = '';
|
|
94613
|
+
this.read();
|
|
94614
|
+
|
|
94615
|
+
if (this.builder.win.skrollrr) {
|
|
94616
|
+
this.builder.win.skrollrr.refresh();
|
|
94617
|
+
} //Trigger Change event
|
|
94618
|
+
|
|
94619
|
+
|
|
94042
94620
|
this.builder.settings.onChange();
|
|
94043
94621
|
}); // ---
|
|
94044
94622
|
//Extend onContentClick
|
|
@@ -94052,6 +94630,18 @@ class AnimateScroll {
|
|
|
94052
94630
|
setTimeout(() => {
|
|
94053
94631
|
this.clickContent();
|
|
94054
94632
|
}, 30);
|
|
94633
|
+
}; //Extend onSectionChange
|
|
94634
|
+
|
|
94635
|
+
|
|
94636
|
+
let old2 = this.builder.settings.onSectionChange;
|
|
94637
|
+
|
|
94638
|
+
this.builder.settings.onSectionChange = () => {
|
|
94639
|
+
if (old2) old2.call(this); // call user's defined onRender
|
|
94640
|
+
|
|
94641
|
+
if (!this.modalAnimateScroll.classList.contains('active')) return;
|
|
94642
|
+
setTimeout(() => {
|
|
94643
|
+
this.readAnimOnce();
|
|
94644
|
+
}, 30);
|
|
94055
94645
|
};
|
|
94056
94646
|
}
|
|
94057
94647
|
|
|
@@ -94175,6 +94765,18 @@ class AnimateScroll {
|
|
|
94175
94765
|
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94176
94766
|
inpRotateCounter_leave.value = '';
|
|
94177
94767
|
inpRotateClockwise_leave.value = '';
|
|
94768
|
+
const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
|
|
94769
|
+
const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
|
|
94770
|
+
const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
|
|
94771
|
+
const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
|
|
94772
|
+
const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
|
|
94773
|
+
const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
|
|
94774
|
+
inpSimpleScrollX_Start.value = '';
|
|
94775
|
+
inpSimpleScrollX_End.value = '';
|
|
94776
|
+
inpSimpleScrollY_Start.value = '';
|
|
94777
|
+
inpSimpleScrollY_End.value = '';
|
|
94778
|
+
inpSimpleScrollScale_Start.value = '';
|
|
94779
|
+
inpSimpleScrollScale_End.value = '';
|
|
94178
94780
|
}
|
|
94179
94781
|
|
|
94180
94782
|
read() {
|
|
@@ -94220,7 +94822,75 @@ class AnimateScroll {
|
|
|
94220
94822
|
if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
|
|
94221
94823
|
if (btnDelay) btnDelay.classList.add('on');
|
|
94222
94824
|
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94223
|
-
if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); //
|
|
94825
|
+
if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // Simple Scroll
|
|
94826
|
+
|
|
94827
|
+
if (activeElement.hasAttribute('data-bottom-top') && activeElement.hasAttribute('data-top-bottom') && !(activeElement.hasAttribute('data-center-bottom') || activeElement.hasAttribute('data-100-top') || activeElement.hasAttribute('data-50-top') || activeElement.hasAttribute('data-top'))) {
|
|
94828
|
+
const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
|
|
94829
|
+
const inpSimpleScrollX_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
|
|
94830
|
+
const inpSimpleScrollY_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
|
|
94831
|
+
const inpSimpleScrollY_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
|
|
94832
|
+
const inpSimpleScrollScale_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
|
|
94833
|
+
const inpSimpleScrollScale_End = this.modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
|
|
94834
|
+
inpSimpleScrollX_End.value = '';
|
|
94835
|
+
inpSimpleScrollY_Start.value = '';
|
|
94836
|
+
inpSimpleScrollY_End.value = '';
|
|
94837
|
+
inpSimpleScrollScale_Start.value = '';
|
|
94838
|
+
inpSimpleScrollScale_End.value = '';
|
|
94839
|
+
let dummyElm = document.querySelector('.dummy-elm');
|
|
94840
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94841
|
+
dummyElm.style.cssText = css1;
|
|
94842
|
+
let transform = this.getTransform(dummyElm, css1);
|
|
94843
|
+
|
|
94844
|
+
if (transform.translateX) {
|
|
94845
|
+
inpSimpleScrollX_Start.value = transform.translateX.replace('px', '');
|
|
94846
|
+
}
|
|
94847
|
+
|
|
94848
|
+
if (transform.translateY) {
|
|
94849
|
+
inpSimpleScrollY_Start.value = transform.translateY.replace('px', '');
|
|
94850
|
+
}
|
|
94851
|
+
|
|
94852
|
+
if (transform.scale) {
|
|
94853
|
+
inpSimpleScrollScale_Start.value = transform.scale;
|
|
94854
|
+
}
|
|
94855
|
+
|
|
94856
|
+
let css2 = activeElement.getAttribute('data-top-bottom');
|
|
94857
|
+
dummyElm.style.cssText = css2;
|
|
94858
|
+
transform = this.getTransform(dummyElm, css2);
|
|
94859
|
+
|
|
94860
|
+
if (transform.translateX) {
|
|
94861
|
+
inpSimpleScrollX_End.value = transform.translateX.replace('px', '');
|
|
94862
|
+
}
|
|
94863
|
+
|
|
94864
|
+
if (transform.translateY) {
|
|
94865
|
+
inpSimpleScrollY_End.value = transform.translateY.replace('px', '');
|
|
94866
|
+
}
|
|
94867
|
+
|
|
94868
|
+
if (transform.scale) {
|
|
94869
|
+
inpSimpleScrollScale_End.value = transform.scale;
|
|
94870
|
+
}
|
|
94871
|
+
|
|
94872
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
|
|
94873
|
+
// default
|
|
94874
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
94875
|
+
if (btn) btn.classList.add('on');
|
|
94876
|
+
}
|
|
94877
|
+
|
|
94878
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
|
|
94879
|
+
// default
|
|
94880
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
94881
|
+
if (btn) btn.classList.add('on');
|
|
94882
|
+
}
|
|
94883
|
+
|
|
94884
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
|
|
94885
|
+
// default
|
|
94886
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
94887
|
+
if (btn) btn.classList.add('on');
|
|
94888
|
+
}
|
|
94889
|
+
|
|
94890
|
+
return true;
|
|
94891
|
+
} // Scroll
|
|
94892
|
+
// enter start
|
|
94893
|
+
|
|
94224
94894
|
|
|
94225
94895
|
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94226
94896
|
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
@@ -94529,6 +95199,7 @@ class AnimateScroll {
|
|
|
94529
95199
|
if (btnAnimateOnce.classList.contains('on')) once = true;
|
|
94530
95200
|
this.builder.editor.saveForUndo();
|
|
94531
95201
|
this.cleanupBasic(activeElement);
|
|
95202
|
+
activeElement.style.transition = 'none';
|
|
94532
95203
|
|
|
94533
95204
|
if (val) {
|
|
94534
95205
|
activeElement.classList.remove('is-inview');
|
|
@@ -94536,9 +95207,9 @@ class AnimateScroll {
|
|
|
94536
95207
|
setTimeout(() => {
|
|
94537
95208
|
activeElement.classList.add(val);
|
|
94538
95209
|
if (once) activeElement.classList.add('once');
|
|
94539
|
-
activeElement.classList.add('is-animated');
|
|
94540
|
-
|
|
95210
|
+
activeElement.classList.add('is-animated');
|
|
94541
95211
|
setTimeout(() => {
|
|
95212
|
+
activeElement.style.transition = '';
|
|
94542
95213
|
activeElement.classList.add('is-inview');
|
|
94543
95214
|
}, 10);
|
|
94544
95215
|
}, 10);
|
|
@@ -94548,6 +95219,56 @@ class AnimateScroll {
|
|
|
94548
95219
|
this.builder.settings.onChange();
|
|
94549
95220
|
}
|
|
94550
95221
|
|
|
95222
|
+
applySimpleScroll() {
|
|
95223
|
+
let activeElement;
|
|
95224
|
+
let target = this.getTarget();
|
|
95225
|
+
activeElement = target.element;
|
|
95226
|
+
if (!activeElement) return;
|
|
95227
|
+
const modalAnimateScroll = this.modalAnimateScroll;
|
|
95228
|
+
const inpSimpleScrollX_Start = modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
|
|
95229
|
+
const inpSimpleScrollX_End = modalAnimateScroll.querySelector('.inp-simplescroll-x-end');
|
|
95230
|
+
const inpSimpleScrollY_Start = modalAnimateScroll.querySelector('.inp-simplescroll-y-start');
|
|
95231
|
+
const inpSimpleScrollY_End = modalAnimateScroll.querySelector('.inp-simplescroll-y-end');
|
|
95232
|
+
const inpSimpleScrollScale_Start = modalAnimateScroll.querySelector('.inp-simplescroll-scale-start');
|
|
95233
|
+
const inpSimpleScrollScale_End = modalAnimateScroll.querySelector('.inp-simplescroll-scale-end');
|
|
95234
|
+
let valXStart;
|
|
95235
|
+
if (inpSimpleScrollX_Start.value !== '') valXStart = inpSimpleScrollX_Start.value + (inpSimpleScrollX_Start.value.indexOf('%') !== -1 ? '' : 'px');
|
|
95236
|
+
let valXEnd;
|
|
95237
|
+
if (inpSimpleScrollX_End.value !== '') valXEnd = inpSimpleScrollX_End.value + (inpSimpleScrollX_End.value.indexOf('%') !== -1 ? '' : 'px');
|
|
95238
|
+
let valYStart;
|
|
95239
|
+
if (inpSimpleScrollY_Start.value !== '') valYStart = inpSimpleScrollY_Start.value + (inpSimpleScrollY_Start.value.indexOf('%') !== -1 ? '' : 'px');
|
|
95240
|
+
let valYEnd;
|
|
95241
|
+
if (inpSimpleScrollY_End.value !== '') valYEnd = inpSimpleScrollY_End.value + (inpSimpleScrollY_End.value.indexOf('%') !== -1 ? '' : 'px');
|
|
95242
|
+
let scaleStart;
|
|
95243
|
+
if (inpSimpleScrollScale_Start.value !== '') scaleStart = inpSimpleScrollScale_Start.value;
|
|
95244
|
+
let scaleEnd;
|
|
95245
|
+
if (inpSimpleScrollScale_End.value !== '') scaleEnd = inpSimpleScrollScale_End.value;
|
|
95246
|
+
let animStart = (valXStart ? ` translateX(${valXStart})` : '') + (valYStart ? ` translateY(${valYStart})` : '') + (scaleStart ? ` scale(${scaleStart})` : '');
|
|
95247
|
+
animStart = animStart.trim();
|
|
95248
|
+
let animEnd = (valXEnd ? ` translateX(${valXEnd})` : '') + (valYEnd ? ` translateY(${valYEnd})` : '') + (scaleEnd ? ` scale(${scaleEnd})` : '');
|
|
95249
|
+
animEnd = animEnd.trim();
|
|
95250
|
+
let sStart = animStart ? 'transform: ' + animStart + ';' : '';
|
|
95251
|
+
let sEnd = animEnd ? 'transform: ' + animEnd + ';' : '';
|
|
95252
|
+
sStart = sStart.trim();
|
|
95253
|
+
sEnd = sEnd.trim();
|
|
95254
|
+
this.builder.editor.saveForUndo();
|
|
95255
|
+
this.cleanup(activeElement);
|
|
95256
|
+
let dataStart = 'data-bottom-top';
|
|
95257
|
+
let dataEnd = 'data-top-bottom';
|
|
95258
|
+
if (sStart !== '') activeElement.setAttribute(dataStart, sStart);else activeElement.removeAttribute(dataStart);
|
|
95259
|
+
if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);else activeElement.removeAttribute(dataEnd);
|
|
95260
|
+
activeElement.style.transform = '';
|
|
95261
|
+
activeElement.style.transition = '';
|
|
95262
|
+
activeElement.style.opacity = '';
|
|
95263
|
+
|
|
95264
|
+
if (this.builder.win.skrollrr) {
|
|
95265
|
+
this.builder.win.skrollrr.refresh();
|
|
95266
|
+
} //Trigger Change event
|
|
95267
|
+
|
|
95268
|
+
|
|
95269
|
+
this.builder.settings.onChange();
|
|
95270
|
+
}
|
|
95271
|
+
|
|
94551
95272
|
apply() {
|
|
94552
95273
|
let activeElement;
|
|
94553
95274
|
let target = this.getTarget();
|
|
@@ -94623,7 +95344,10 @@ class AnimateScroll {
|
|
|
94623
95344
|
if (elm.classList.contains('on')) {
|
|
94624
95345
|
dataEnd = elm.getAttribute('data-value');
|
|
94625
95346
|
}
|
|
94626
|
-
});
|
|
95347
|
+
}); // Protection:
|
|
95348
|
+
|
|
95349
|
+
if (!dataStart) dataStart = 'data-bottom-top';
|
|
95350
|
+
if (!dataEnd) dataEnd = 'data-center';
|
|
94627
95351
|
sStart = sStart.trim();
|
|
94628
95352
|
sEnd = sEnd.trim();
|
|
94629
95353
|
if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
|
|
@@ -94692,7 +95416,9 @@ class AnimateScroll {
|
|
|
94692
95416
|
if (elm.classList.contains('on')) {
|
|
94693
95417
|
dataLeaveStart = elm.getAttribute('data-value');
|
|
94694
95418
|
}
|
|
94695
|
-
});
|
|
95419
|
+
}); // Protection:
|
|
95420
|
+
|
|
95421
|
+
if (!dataLeaveStart) dataLeaveStart = 'data-center-bottom';
|
|
94696
95422
|
dataLeaveEnd = 'data-top-bottom';
|
|
94697
95423
|
sLeaveStart = sLeaveStart.trim();
|
|
94698
95424
|
sLeaveEnd = sLeaveEnd.trim();
|
|
@@ -94717,6 +95443,17 @@ class AnimateScroll {
|
|
|
94717
95443
|
this.builder.settings.onChange();
|
|
94718
95444
|
}
|
|
94719
95445
|
|
|
95446
|
+
readAnimOnce() {
|
|
95447
|
+
let activeSection = this.builder.activeSection;
|
|
95448
|
+
if (!activeSection) return;
|
|
95449
|
+
|
|
95450
|
+
if (activeSection.querySelector('.is-animated.once')) {
|
|
95451
|
+
this.modalAnimateScroll.querySelector('#chkPresetAnimOnce').checked = true;
|
|
95452
|
+
} else {
|
|
95453
|
+
this.modalAnimateScroll.querySelector('#chkPresetAnimOnce').checked = false;
|
|
95454
|
+
}
|
|
95455
|
+
}
|
|
95456
|
+
|
|
94720
95457
|
getTarget() {
|
|
94721
95458
|
let target;
|
|
94722
95459
|
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
@@ -94752,6 +95489,34 @@ class AnimateScroll {
|
|
|
94752
95489
|
if (activeCol) activeElement = activeCol.parentNode.parentNode;
|
|
94753
95490
|
}
|
|
94754
95491
|
|
|
95492
|
+
if (target === 'overlay') {
|
|
95493
|
+
let activeBox = this.builder.activeBox;
|
|
95494
|
+
let activeCol = this.builder.editor.activeCol;
|
|
95495
|
+
if (activeCol) activeBox = activeCol.closest('.is-box');
|
|
95496
|
+
if (activeBox) activeElement = activeBox.querySelector('.is-overlay');
|
|
95497
|
+
}
|
|
95498
|
+
|
|
95499
|
+
if (target === 'bg') {
|
|
95500
|
+
let activeBox = this.builder.activeBox;
|
|
95501
|
+
let activeCol = this.builder.editor.activeCol;
|
|
95502
|
+
if (activeCol) activeBox = activeCol.closest('.is-box');
|
|
95503
|
+
if (activeBox) activeElement = activeBox.querySelector('.is-overlay-bg');
|
|
95504
|
+
}
|
|
95505
|
+
|
|
95506
|
+
if (target === 'box') {
|
|
95507
|
+
let activeBox = this.builder.activeBox;
|
|
95508
|
+
let activeCol = this.builder.editor.activeCol;
|
|
95509
|
+
if (activeCol) activeBox = activeCol.closest('.is-box');
|
|
95510
|
+
if (activeBox) activeElement = activeBox;
|
|
95511
|
+
}
|
|
95512
|
+
|
|
95513
|
+
if (target === 'section') {
|
|
95514
|
+
let activeSection = this.builder.activeSection;
|
|
95515
|
+
let activeCol = this.builder.editor.activeCol;
|
|
95516
|
+
if (activeCol) activeSection = activeCol.closest('.is-section');
|
|
95517
|
+
if (activeSection) activeElement = activeSection;
|
|
95518
|
+
}
|
|
95519
|
+
|
|
94755
95520
|
return {
|
|
94756
95521
|
'element': activeElement ? activeElement : false,
|
|
94757
95522
|
'name': target ? target : false
|
|
@@ -94762,19 +95527,29 @@ class AnimateScroll {
|
|
|
94762
95527
|
if (!s) {
|
|
94763
95528
|
// element (inspectedElement first)
|
|
94764
95529
|
let activeElement = this.builder.editor.inspectedElement;
|
|
94765
|
-
if (!activeElement) return false;
|
|
95530
|
+
if (!activeElement) return false;
|
|
95531
|
+
const divAnimDefault = this.modalAnimateScroll.querySelector('#divAnimDefault');
|
|
95532
|
+
const divAnimScroll = this.modalAnimateScroll.querySelector('#divAnimScroll');
|
|
95533
|
+
const divAnimScrollSimple = this.modalAnimateScroll.querySelector('#divAnimScrollSimple');
|
|
95534
|
+
let css1, css2;
|
|
94766
95535
|
|
|
94767
|
-
|
|
94768
|
-
|
|
94769
|
-
|
|
94770
|
-
|
|
95536
|
+
if (divAnimScroll.style.display === 'flex' || divAnimScrollSimple.style.display === 'flex') {
|
|
95537
|
+
// enter start
|
|
95538
|
+
css1 = activeElement.getAttribute('data-bottom-top');
|
|
95539
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
95540
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
95541
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94771
95542
|
|
|
94772
|
-
|
|
95543
|
+
css2 = activeElement.getAttribute('data-top-bottom');
|
|
95544
|
+
}
|
|
94773
95545
|
|
|
94774
95546
|
let hasBasicAnim = false;
|
|
94775
95547
|
|
|
94776
|
-
if (
|
|
94777
|
-
|
|
95548
|
+
if (divAnimDefault.style.display === 'flex') {
|
|
95549
|
+
// basic anim
|
|
95550
|
+
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')) {
|
|
95551
|
+
hasBasicAnim = true;
|
|
95552
|
+
}
|
|
94778
95553
|
}
|
|
94779
95554
|
|
|
94780
95555
|
if (css1 || css2 || hasBasicAnim) {
|
|
@@ -94804,19 +95579,29 @@ class AnimateScroll {
|
|
|
94804
95579
|
activeElement = this.builder.editor.activeCol.parentNode.parentNode;
|
|
94805
95580
|
}
|
|
94806
95581
|
|
|
94807
|
-
if (!activeElement) return false;
|
|
95582
|
+
if (!activeElement) return false;
|
|
95583
|
+
const divAnimDefault = this.modalAnimateScroll.querySelector('#divAnimDefault');
|
|
95584
|
+
const divAnimScroll = this.modalAnimateScroll.querySelector('#divAnimScroll');
|
|
95585
|
+
const divAnimScrollSimple = this.modalAnimateScroll.querySelector('#divAnimScrollSimple');
|
|
95586
|
+
let css1, css2;
|
|
94808
95587
|
|
|
94809
|
-
|
|
94810
|
-
|
|
94811
|
-
|
|
94812
|
-
|
|
95588
|
+
if (divAnimScroll.style.display === 'flex' || divAnimScrollSimple.style.display === 'flex') {
|
|
95589
|
+
// enter start
|
|
95590
|
+
css1 = activeElement.getAttribute('data-bottom-top');
|
|
95591
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
95592
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
95593
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94813
95594
|
|
|
94814
|
-
|
|
95595
|
+
css2 = activeElement.getAttribute('data-top-bottom');
|
|
95596
|
+
}
|
|
94815
95597
|
|
|
94816
95598
|
let hasBasicAnim = false;
|
|
94817
95599
|
|
|
94818
|
-
if (
|
|
94819
|
-
|
|
95600
|
+
if (divAnimDefault.style.display === 'flex') {
|
|
95601
|
+
// basic anim
|
|
95602
|
+
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')) {
|
|
95603
|
+
hasBasicAnim = true;
|
|
95604
|
+
}
|
|
94820
95605
|
}
|
|
94821
95606
|
|
|
94822
95607
|
if (css1 || css2 || hasBasicAnim) {
|
|
@@ -94889,6 +95674,8 @@ class AnimateScroll {
|
|
|
94889
95674
|
}
|
|
94890
95675
|
|
|
94891
95676
|
edit() {
|
|
95677
|
+
// Close all opened sidebar
|
|
95678
|
+
this.builder.sidebar.closeSidebar();
|
|
94892
95679
|
this.modalAnimateScroll.classList.add('active');
|
|
94893
95680
|
this.clickContent();
|
|
94894
95681
|
}
|
|
@@ -95115,7 +95902,7 @@ class ContentBox {
|
|
|
95115
95902
|
iconButtonsMore: ['|', 'preferences'],
|
|
95116
95903
|
customTags: [],
|
|
95117
95904
|
animateModal: false,
|
|
95118
|
-
elementAnimate:
|
|
95905
|
+
elementAnimate: false,
|
|
95119
95906
|
elementEditor: true,
|
|
95120
95907
|
// onAdd: function () { },
|
|
95121
95908
|
imageQuality: 0.92,
|
|
@@ -97682,10 +98469,10 @@ class ContentBox {
|
|
|
97682
98469
|
defaultSnippetCategory: this.settings.defaultSnippetCategory,
|
|
97683
98470
|
undoRedoStyles: this.settings.undoRedoStyles,
|
|
97684
98471
|
onUndo: () => {
|
|
97685
|
-
this.
|
|
98472
|
+
this.doUndoRedo();
|
|
97686
98473
|
},
|
|
97687
98474
|
onRedo: () => {
|
|
97688
|
-
this.
|
|
98475
|
+
this.doUndoRedo();
|
|
97689
98476
|
},
|
|
97690
98477
|
undoContainerOnly: this.settings.undoContainerOnly,
|
|
97691
98478
|
absolutePath: this.settings.absolutePath,
|
|
@@ -98304,6 +99091,11 @@ class ContentBox {
|
|
|
98304
99091
|
dom.removeClass(elm, 'box-hover');
|
|
98305
99092
|
});
|
|
98306
99093
|
if (this.sectionHoverOutline) dom.addClass(this.activeBox, 'box-hover');
|
|
99094
|
+
|
|
99095
|
+
if (this.activeSection !== this.prevSection) {
|
|
99096
|
+
this.prevSection = this.activeSection;
|
|
99097
|
+
if (this.settings.onSectionChange) this.settings.onSectionChange();
|
|
99098
|
+
}
|
|
98307
99099
|
});
|
|
98308
99100
|
} // boxSetup
|
|
98309
99101
|
|
|
@@ -98368,6 +99160,55 @@ class ContentBox {
|
|
|
98368
99160
|
});
|
|
98369
99161
|
}
|
|
98370
99162
|
|
|
99163
|
+
doUndoRedo() {
|
|
99164
|
+
// Clean
|
|
99165
|
+
const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
|
|
99166
|
+
[data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
|
|
99167
|
+
[data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
|
|
99168
|
+
[data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
|
|
99169
|
+
[data-50-top],[data-top],[data-top-bottom]`);
|
|
99170
|
+
elms.forEach(elm => {
|
|
99171
|
+
elm.style.transform = '';
|
|
99172
|
+
elm.style.transition = '';
|
|
99173
|
+
elm.style.opacity = '';
|
|
99174
|
+
});
|
|
99175
|
+
this.pageSetup(); // To refresh skrollrr anim
|
|
99176
|
+
|
|
99177
|
+
if (this.win.skrollrr) {
|
|
99178
|
+
this.win.skrollrr.refresh();
|
|
99179
|
+
}
|
|
99180
|
+
}
|
|
99181
|
+
|
|
99182
|
+
refreshPage() {
|
|
99183
|
+
// Clean
|
|
99184
|
+
const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
|
|
99185
|
+
[data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
|
|
99186
|
+
[data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
|
|
99187
|
+
[data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
|
|
99188
|
+
[data-50-top],[data-top],[data-top-bottom]`);
|
|
99189
|
+
elms.forEach(elm => {
|
|
99190
|
+
elm.style.transform = '';
|
|
99191
|
+
elm.style.transition = '';
|
|
99192
|
+
elm.style.opacity = '';
|
|
99193
|
+
}); //--- Same as undo/redo process ---
|
|
99194
|
+
|
|
99195
|
+
const wrapper = this.wrapperEl;
|
|
99196
|
+
const sections = wrapper.querySelectorAll('.is-section');
|
|
99197
|
+
sections.forEach(section => {
|
|
99198
|
+
const html = section.innerHTML;
|
|
99199
|
+
var range = document.createRange();
|
|
99200
|
+
section.innerHTML = '';
|
|
99201
|
+
section.appendChild(range.createContextualFragment(html));
|
|
99202
|
+
});
|
|
99203
|
+
this.editor.uo.cleaning(wrapper);
|
|
99204
|
+
this.pageSetup(); //---
|
|
99205
|
+
// To refresh skrollrr anim
|
|
99206
|
+
|
|
99207
|
+
if (this.win.skrollrr) {
|
|
99208
|
+
this.win.skrollrr.refresh();
|
|
99209
|
+
}
|
|
99210
|
+
}
|
|
99211
|
+
|
|
98371
99212
|
addIdea(newArea) {
|
|
98372
99213
|
this.editor.saveForUndo();
|
|
98373
99214
|
const designPath = this.designPath;
|
|
@@ -98608,6 +99449,9 @@ class ContentBox {
|
|
|
98608
99449
|
document.body.style.overflowY = '';
|
|
98609
99450
|
this.addSpace();
|
|
98610
99451
|
this.scrollTo(newSection, 600);
|
|
99452
|
+
setTimeout(() => {
|
|
99453
|
+
this.refreshPage();
|
|
99454
|
+
}, 600);
|
|
98611
99455
|
} // addIdea
|
|
98612
99456
|
|
|
98613
99457
|
|