@innovastudio/contentbox 1.4.33 → 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
|
}
|
|
@@ -19868,7 +19897,6 @@ class Util {
|
|
|
19868
19897
|
<span style="z-index:1;position: relative;pointer-events: none;">${this.out('None')}</span>
|
|
19869
19898
|
</li>
|
|
19870
19899
|
<li role="option" tabindex="0" data-provider="" data-font-family="Arial, sans-serif"><div></div><img src="${path}arial.png"></li>
|
|
19871
|
-
|
|
19872
19900
|
<li role="option" tabindex="0" data-provider="" data-font-family="courier"><div></div><img src="${path}courier.png"></li>
|
|
19873
19901
|
<li role="option" tabindex="0" data-provider="" data-font-family="Georgia, serif"><div></div><img src="${path}georgia.png"></li>
|
|
19874
19902
|
<li role="option" tabindex="0" data-provider="" data-font-family="monospace"><div></div><img src="${path}monospace.png"></li>
|
|
@@ -19876,67 +19904,67 @@ class Util {
|
|
|
19876
19904
|
<li role="option" tabindex="0" data-provider="" data-font-family="serif"><div></div><img src="${path}serif.png"></li>
|
|
19877
19905
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Abel, sans-serif"><div></div><img src="${path}abel.png"></li>
|
|
19878
19906
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Abril Fatface"><div></div><img src="${path}abril_fatface.png"></li>
|
|
19879
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Advent Pro, sans-serif" data-font-style="300"><div></div><img src="${path}advent_pro.png"></li>
|
|
19907
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Advent Pro, sans-serif" data-font-style="wght@100;200;300;400;500;600;700"><div></div><img src="${path}advent_pro.png"></li>
|
|
19880
19908
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Aladin, cursive"><div></div><img src="${path}aladin.png"></li>
|
|
19881
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya, serif" data-font-style="400,
|
|
19882
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya Sans SC, sans-serif" data-font-style="300,700"><div></div><img src="${path}alegreya_sans_sc.png"></li>
|
|
19883
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya SC, serif" data-font-style="400,
|
|
19909
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya, serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}alegreya.png"></li>
|
|
19910
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya Sans SC, sans-serif" data-font-style="ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900"><div></div><img src="${path}alegreya_sans_sc.png"></li>
|
|
19911
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Alegreya SC, serif" data-font-style="ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900"><div></div><img src="${path}alegreya_sc.png"></li>
|
|
19884
19912
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Alice, serif"><div></div><img src="${path}alice.png"></li>
|
|
19885
19913
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Allerta Stencil, sans-serif"><div></div><img src="${path}allerta_stencil.png"></li>
|
|
19886
19914
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Allura, cursive"><div></div><img src="${path}allura.png"></li>
|
|
19887
19915
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Almendra Display, cursive"><div></div><img src="${path}almendra_display.png"></li>
|
|
19888
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Amatic SC, cursive" data-font-style="400
|
|
19889
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Andika, sans-serif"><div></div><img src="${path}andika.png"></li>
|
|
19890
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Anonymous Pro, monospace" data-font-style="400,
|
|
19916
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Amatic SC, cursive" data-font-style="wght@400;700"><div></div><img src="${path}amatic_sc.png"></li>
|
|
19917
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Andika, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}andika.png"></li>
|
|
19918
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Anonymous Pro, monospace" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}anonymous_pro.png"></li>
|
|
19891
19919
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Architects Daughter, cursive"><div></div><img style="transform:scale(1.1);" src="${path}architects_daughter.png"></li>
|
|
19892
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Arimo, sans-serif" data-font-style="400,
|
|
19893
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Arsenal, sans-serif" data-font-style="400,
|
|
19894
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Assistant" data-font-style="300
|
|
19920
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Arimo, sans-serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700"><div></div><img src="${path}arimo.png"></li>
|
|
19921
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Arsenal, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}arsenal.png"></li>
|
|
19922
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Assistant" data-font-style="wght@200;300;400;500;600;700;800"><div></div><img src="${path}assistant.png"></li>
|
|
19895
19923
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Aubrey, cursive"><div></div><img src="${path}aubrey.png"></li>
|
|
19896
19924
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Anton, sans-serif"><div></div><img src="${path}anton.png"></li>
|
|
19897
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Archivo Narrow, sans-serif"><div></div><img src="${path}archivo_narrow.png"></li>
|
|
19925
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Archivo Narrow, sans-serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700"><div></div><img src="${path}archivo_narrow.png"></li>
|
|
19898
19926
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bad Script, cursive"><div></div><img src="${path}bad_script.png"></li>
|
|
19899
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="BenchNine, sans-serif"><div></div><img src="${path}benchNine.png"></li>
|
|
19927
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="BenchNine, sans-serif" data-font-style="wght@300;400;700"><div></div><img src="${path}benchNine.png"></li>
|
|
19900
19928
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bevan, cursive"><div></div><img src="${path}bevan.png"></li>
|
|
19901
19929
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bigelow Rules, cursive"><div></div><img src="${path}bigelow_rules.png"></li>
|
|
19902
19930
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bilbo, cursive"><div></div><img src="${path}bilbo.png"></li>
|
|
19903
19931
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bonbon, cursive"><div></div><img src="${path}bonbon.png"></li>
|
|
19904
19932
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Bowlby One SC, cursive"><div></div><img src="${path}bowlby_one_sc.png"></li>
|
|
19905
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cabin Condensed, sans-serif"><div></div><img src="${path}cabin_condensed.png"></li>
|
|
19933
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cabin Condensed, sans-serif" data-font-style="wght@400;500;600;700"><div></div><img src="${path}cabin_condensed.png"></li>
|
|
19906
19934
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Carrois Gothic SC, sans-serif"><div></div><img src="${path}carrois_gothic_sc.png"></li>
|
|
19907
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Caveat, cursive" data-font-style="400
|
|
19935
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Caveat, cursive" data-font-style="wght@400;500;600;700"><div></div><img src="${path}caveat.png"></li>
|
|
19908
19936
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Chewy, cursive"><div></div><img src="${path}chewy.png"></li>
|
|
19909
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cinzel, serif"><div></div><img src="${path}cinzel.png"></li>
|
|
19910
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Comfortaa, cursive" data-font-style="300"><div></div><img src="${path}comfortaa.png"></li>
|
|
19937
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cinzel, serif" data-font-style="wght@400;500;600;700;800;900"><div></div><img src="${path}cinzel.png"></li>
|
|
19938
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Comfortaa, cursive" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}comfortaa.png"></li>
|
|
19911
19939
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Concert One, cursive"><div></div><img src="${path}concert_one.png"></li>
|
|
19912
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant, serif" data-font-style="300,
|
|
19913
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Garamond, serif" data-font-style="300,
|
|
19914
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Infant, serif" data-font-style="300,
|
|
19915
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant SC, serif" data-font-style="300
|
|
19916
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Unicase, serif" data-font-style="300
|
|
19917
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cousine" data-font-style="400,700"><div></div><img src="${path}cousine.png"></li>
|
|
19940
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant, serif" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}cormorant.png"></li>
|
|
19941
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Garamond, serif" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}cormorant_garamond.png"></li>
|
|
19942
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Infant, serif" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}cormorant_infant.png"></li>
|
|
19943
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant SC, serif" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}cormorant_sc.png"></li>
|
|
19944
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cormorant Unicase, serif" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}cormorant_unicase.png"></li>
|
|
19945
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cousine" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}cousine.png"></li>
|
|
19918
19946
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Crafty Girls, cursive"><div></div><img src="${path}crafty_girls.png"></li>
|
|
19919
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Cuprum, sans-serif" data-font-style="400,
|
|
19947
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Cuprum, sans-serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700"><div></div><img src="${path}cuprum.png"></li>
|
|
19920
19948
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Cutive Mono, monospace"><div></div><img src="${path}cutive_mono.png"></li>
|
|
19921
19949
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Devonshire, cursive"><div></div><img src="${path}devonshire.png"></li>
|
|
19922
19950
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Didact Gothic, sans-serif"><div></div><img src="${path}didact_gothic.png"></li>
|
|
19923
19951
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Diplomata SC, cursive"><div></div><img src="${path}diplomata_sc.png"></li>
|
|
19924
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Dosis, sans-serif" data-font-style="200"><div></div><img src="${path}dosis.png"></li>
|
|
19925
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="EB Garamond, serif" data-font-style="400,
|
|
19926
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="El Messiri, sans-serif" data-font-style="400
|
|
19927
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Elsie, cursive" data-font-style="400
|
|
19928
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Encode Sans, sans-serif" data-font-style="300
|
|
19929
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Exo, sans-serif" data-font-style="100"><div></div><img src="${path}exo.png"></li>
|
|
19930
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="'Exo 2', sans-serif" data-font-style="200,
|
|
19952
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Dosis, sans-serif" data-font-style="wght@200;300;400;500;600;700;800"><div></div><img src="${path}dosis.png"></li>
|
|
19953
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="EB Garamond, serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800"><div></div><img src="${path}eb_garamond.png"></li>
|
|
19954
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="El Messiri, sans-serif" data-font-style="wght@400;500;600;700"><div></div><img src="${path}el_messiri.png"></li>
|
|
19955
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Elsie, cursive" data-font-style="wght@400;900"><div></div><img src="${path}elsie.png"></li>
|
|
19956
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Encode Sans, sans-serif" data-font-style="wght@100;200;300;400;500;600;700;800;900"><div></div><img src="${path}encode_sans.png"></li>
|
|
19957
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Exo, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}exo.png"></li>
|
|
19958
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="'Exo 2', sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900" data-font-display="swap"><div></div><img src="${path}exo_2.png"></li>
|
|
19931
19959
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Felipa, cursive"><div></div><img src="${path}felipa.png"></li>
|
|
19932
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Code, monospace" data-font-style="300
|
|
19933
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Mono, monospace" data-font-style="400
|
|
19934
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans, sans-serif" data-font-style="200,
|
|
19935
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans Condensed, sans-serif" data-font-style="200,
|
|
19936
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans Extra Condensed, sans-serif" data-font-style="200,
|
|
19960
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Code, monospace" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}fira_code.png"></li>
|
|
19961
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Mono, monospace" data-font-style="wght@400;500;700"><div></div><img src="${path}fira_mono.png"></li>
|
|
19962
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}fira_sans.png"></li>
|
|
19963
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans Condensed, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}fira_sans_condensed.png"></li>
|
|
19964
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Fira Sans Extra Condensed, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}fira_sans_extra_condensed.png"></li>
|
|
19937
19965
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Fjalla One, sans-serif"><div></div><img src="${path}fjalla_one.png"></li>
|
|
19938
19966
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Forum, cursive"><div></div><img src="${path}forum.png"></li>
|
|
19939
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Frank Ruhl Libre" data-font-style="300
|
|
19967
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Frank Ruhl Libre" data-font-style="wght@300;400;500;700;900"><div></div><img src="${path}frank_ruhl_libre.png"></li>
|
|
19940
19968
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Fredericka the Great, cursive"><div></div><img src="${path}fredericka_the_great.png"></li>
|
|
19941
19969
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Gabriela, serif"><div></div><img src="${path}gabriela.png"></li>
|
|
19942
19970
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Gilda Display, serif"><div></div><img src="${path}gilda_display.png"></li>
|
|
@@ -19944,18 +19972,18 @@ class Util {
|
|
|
19944
19972
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Gruppo, cursive"><div></div><img src="${path}gruppo.png"></li>
|
|
19945
19973
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Handlee, cursive"><div></div><img src="${path}handlee.png"></li>
|
|
19946
19974
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Happy Monkey, cursive"><div></div><img src="${path}happy_monkey.png"></li>
|
|
19947
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Hind" data-font-style="300
|
|
19948
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Mono, monospace" data-font-style="300,
|
|
19949
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Sans, sans-serif" data-font-style="300,
|
|
19950
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Serif, serif" data-font-style="300,
|
|
19975
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Hind" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}hind.png"></li>
|
|
19976
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Mono, monospace" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}ibm_plex_mono.png"></li>
|
|
19977
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Sans, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}ibm_plex_sans.png"></li>
|
|
19978
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="IBM Plex Serif, serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}ibm_plex_serif.png"></li>
|
|
19951
19979
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Iceland, cursive"><div></div><img src="${path}iceland.png"></li>
|
|
19952
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Inconsolata, monospace" data-font-style="400
|
|
19953
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Josefin Sans, sans-serif" data-font-style="300,700"><div></div><img src="${path}josefin_sans.png"></li>
|
|
19954
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Istok Web, sans-serif" data-font-style="400,
|
|
19980
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Inconsolata, monospace" data-font-style="wght@200;300;400;500;600;700;800;900"><div></div><img src="${path}inconsolata.png"></li>
|
|
19981
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Josefin Sans, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}josefin_sans.png"></li>
|
|
19982
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Istok Web, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}istok_web.png"></li>
|
|
19955
19983
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Julee, cursive"><div></div><img src="${path}julee.png"></li>
|
|
19956
19984
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Julius Sans One, sans-serif"><div></div><img src="${path}julius_sans_one.png"></li>
|
|
19957
19985
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Junge, serif"><div></div><img src="${path}junge.png"></li>
|
|
19958
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Jura, sans-serif" data-font-style="300
|
|
19986
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Jura, sans-serif" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}jura.png"></li>
|
|
19959
19987
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Just Me Again Down Here, cursive"><div></div><img style="transform:scale(1.1);" src="${path}just_me_again_down_here.png"></li>
|
|
19960
19988
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Kaushan Script, cursive"><div></div><img src="${path}kaushan_script.png"></li>
|
|
19961
19989
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Kelly Slab, cursive"><div></div><img src="${path}kelly_slab.png"></li>
|
|
@@ -19963,122 +19991,122 @@ class Util {
|
|
|
19963
19991
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Kosugi, sans-serif"><div></div><img src="${path}kosugi.png"></li>
|
|
19964
19992
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Kosugi Maru, sans-serif"><div></div><img src="${path}kosugi_maru.png"></li>
|
|
19965
19993
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Kurale, serif"><div></div><img src="${path}kurale.png"></li>
|
|
19966
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Lato, sans-serif" data-font-style="300,700"><div></div><img src="${path}lato.png"></li>
|
|
19967
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Ledger, serif" data-font-
|
|
19968
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Lekton, sans-serif" data-font-style="400,700"><div></div><img src="${path}lekton.png"></li>
|
|
19969
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Life Savers, cursive"><div></div><img src="${path}life_savers.png"></li>
|
|
19970
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Literata, serif" data-font-style="400,
|
|
19994
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Lato, sans-serif" data-font-style="ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900"><div></div><img src="${path}lato.png"></li>
|
|
19995
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Ledger, serif" data-font-display="swap"><div></div><img src="${path}ledger.png"></li>
|
|
19996
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Lekton, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400"><div></div><img src="${path}lekton.png"></li>
|
|
19997
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Life Savers, cursive" data-font-style="wght@400;700;800"><div></div><img src="${path}life_savers.png"></li>
|
|
19998
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Literata, serif" data-font-style="ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}literata.png"></li>
|
|
19971
19999
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Lobster, cursive"><div></div><img src="${path}lobster.png"></li>
|
|
19972
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Lobster Two, cursive"><div></div><img src="${path}lobster_two.png"></li>
|
|
20000
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Lobster Two, cursive" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}lobster_two.png"></li>
|
|
19973
20001
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Londrina Shadow, cursive"><div></div><img src="${path}londrina_shadow.png"></li>
|
|
19974
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Lora, serif" data-font-style="400,700"><div></div><img src="${path}lora.png"></li>
|
|
20002
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Lora, serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700"><div></div><img src="${path}lora.png"></li>
|
|
19975
20003
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Lovers Quarrel, cursive"><div></div><img style="transform:scale(1.1);" src="${path}lovers_quarrel.png"></li>
|
|
19976
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="'M PLUS 1p', sans-serif" data-font-style="300
|
|
19977
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="'M PLUS Rounded 1c', sans-serif" data-font-style="300
|
|
20004
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="'M PLUS 1p', sans-serif" data-font-style="wght@100;300;400;500;700;800;900" data-font-display="swap"><div></div><img src="${path}m_plus_1p.png"></li>
|
|
20005
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="'M PLUS Rounded 1c', sans-serif" data-font-style="wght@100;300;400;500;700;800;900" data-font-display="swap"><div></div><img src="${path}m_plus_rounded_1c.png"></li>
|
|
19978
20006
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Macondo, cursive"><div></div><img src="${path}macondo.png"></li>
|
|
19979
20007
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Marcellus SC, serif"><div></div><img src="${path}marcellus_sc.png"></li>
|
|
19980
20008
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Marck Script, cursive"><div></div><img src="${path}marck_script.png"></li>
|
|
19981
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Martel, serif" data-font-style="300
|
|
20009
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Martel, serif" data-font-style="wght@200;300;400;600;700;800;900"><div></div><img src="${path}martel.png"></li>
|
|
19982
20010
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Maven Pro, sans-serif"><div></div><img src="${path}maven_pro.png"></li>
|
|
19983
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Merriweather, serif" data-font-style="300,700"><div></div><img src="${path}merriweather.png"></li>
|
|
19984
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Merriweather Sans" data-font-style="300,700"><div></div><img src="${path}merriweather_sans.png"></li>
|
|
20011
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Merriweather, serif" data-font-style="ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900"><div></div><img src="${path}merriweather.png"></li>
|
|
20012
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Merriweather Sans" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800"><div></div><img src="${path}merriweather_sans.png"></li>
|
|
19985
20013
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Mogra, cursive"><div></div><img src="${path}mogra.png"></li>
|
|
19986
20014
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Monoton, cursive"><div></div><img src="${path}monoton.png"></li>
|
|
19987
20015
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Montez, cursive"><div></div><img src="${path}montez.png"></li>
|
|
19988
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat, sans-serif" data-font-style="300,400,700"><div></div><img src="${path}montserrat.png"></li>
|
|
19989
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat Alternates, sans-serif" data-font-style="300,
|
|
19990
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat Subrayada, sans-serif"><div></div><img src="${path}montserrat_subrayada.png"></li>
|
|
20016
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}montserrat.png"></li>
|
|
20017
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat Alternates, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}montserrat_alternates.png"></li>
|
|
20018
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Montserrat Subrayada, sans-serif" data-font-style="wght@400;700"><div></div><img src="${path}montserrat_subrayada.png"></li>
|
|
19991
20019
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Neucha, cursive"><div></div><img src="${path}neucha.png"></li>
|
|
19992
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Neuton, serif" data-font-style="200,700"><div></div><img src="${path}neuton.png"></li>
|
|
20020
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Neuton, serif" data-font-style="ital,wght@0,200;0,300;0,400;0,700;0,800;1,400"><div></div><img src="${path}neuton.png"></li>
|
|
19993
20021
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Nixie One, cursive"><div></div><img src="${path}nixie_one.png"></li>
|
|
19994
20022
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Nothing You Could Do, cursive"><div></div><img style="transform:scale(1.1);" src="${path}nothing_you_could_do.png"></li>
|
|
19995
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Sans, sans-serif" data-font-style="400,
|
|
19996
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Sans SC, sans-serif" data-font-style="300
|
|
19997
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Serif, serif" data-font-style="400,
|
|
19998
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Serif TC, serif" data-font-style="300
|
|
19999
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,
|
|
20000
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,
|
|
20001
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${path}open_sans.png"></li>
|
|
20023
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Sans, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}noto_sans.png"></li>
|
|
20024
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Sans SC, sans-serif" data-font-style="wght@100;300;400;500;700;900"><div></div><img src="${path}noto_sans_sc.png"></li>
|
|
20025
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Serif, serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}noto_serif.png"></li>
|
|
20026
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Noto Serif TC, serif" data-font-style="wght@200;300;400;500;600;700;900"><div></div><img src="${path}noto_serif_tc.png"></li>
|
|
20027
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000"><div></div><img src="${path}nunito.png"></li>
|
|
20028
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="ital,wght@0,400;0,700;1,400"><div></div><img src="${path}old_standard_tt.png"></li>
|
|
20029
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800"><div></div><img src="${path}open_sans.png"></li>
|
|
20002
20030
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${path}oranienbaum.png"></li>
|
|
20003
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300
|
|
20004
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300
|
|
20031
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="wght@200;300;400;500;600;700"><div></div><img src="${path}oswald.png"></li>
|
|
20032
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="wght@300;400;700"><div></div><img src="${path}oxygen.png"></li>
|
|
20005
20033
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Pacifico, cursive"><div></div><img src="${path}pacifico.png"></li>
|
|
20006
20034
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Pangolin, cursive"><div></div><img src="${path}pangolin.png"></li>
|
|
20007
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Passion One, cursive"><div></div><img src="${path}passion_one.png"></li>
|
|
20035
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Passion One, cursive" data-font-style="wght@400;700;900"><div></div><img src="${path}passion_one.png"></li>
|
|
20008
20036
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Pathway Gothic One, sans-serif"><div></div><img src="${path}pathway_gothic_one.png"></li>
|
|
20009
20037
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Pattaya, sans-serif"><div></div><img src="${path}pattaya.png"></li>
|
|
20010
20038
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Petit Formal Script, cursive"><div></div><img style="transform:scale(1.1);" src="${path}petit_formal_script.png"></li>
|
|
20011
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Philosopher, sans-serif"><div></div><img src="${path}philosopher.png"></li>
|
|
20012
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Play, sans-serif" data-font-style="400
|
|
20013
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Playfair Display, serif" data-font-style="400,
|
|
20014
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Playfair Display SC, serif" data-font-style="400,
|
|
20015
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Podkova, serif" data-font-style="400
|
|
20039
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Philosopher, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}philosopher.png"></li>
|
|
20040
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Play, sans-serif" data-font-style="wght@400;700"><div></div><img src="${path}play.png"></li>
|
|
20041
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Playfair Display, serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}playfair_display.png"></li>
|
|
20042
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Playfair Display SC, serif" data-font-style="ital,wght@0,400;0,700;0,900;1,400;1,700;1,900"><div></div><img src="${path}playfair_display_sc.png"></li>
|
|
20043
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Podkova, serif" data-font-style="wght@400;500;600;700;800"><div></div><img src="${path}podkova.png"></li>
|
|
20016
20044
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Poiret One, cursive"><div></div><img src="${path}poiret_one.png"></li>
|
|
20017
20045
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Pompiere, cursive"><div></div><img style="transform:scale(1.1);" src="${path}pompiere.png"></li>
|
|
20018
20046
|
`;
|
|
20019
|
-
html += `<li role="option" tabindex="0" data-provider="google" data-font-family="Poppins, sans-serif" data-font-style="400,600"><div></div><img src="${path}poppins.png"></li>
|
|
20047
|
+
html += `<li role="option" tabindex="0" data-provider="google" data-font-family="Poppins, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}poppins.png"></li>
|
|
20020
20048
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Prata, serif"><div></div><img src="${path}prata.png"></li>
|
|
20021
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="'Press Start 2P', cursive"
|
|
20049
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="'Press Start 2P', cursive"><div></div><img src="${path}press_start_2p.png"></li>
|
|
20022
20050
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Prosto One, cursive"><div></div><img src="${path}prosto_one.png"></li>
|
|
20023
20051
|
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Mono, monospace"><div></div><img src="${path}pt_mono.png"></li>
|
|
20024
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans, sans-serif" data-font-style="400,
|
|
20025
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans Caption, sans-serif" data-font-style="400
|
|
20026
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans Narrow, sans-serif" data-font-style="400
|
|
20027
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Serif, serif" data-font-style="400,700"><div></div><img src="${path}pt_serif.png"></li>
|
|
20028
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Serif Caption, serif" data-font-style="
|
|
20029
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Quattrocento Sans, sans-serif"><div></div><img src="${path}quattrocento_sans.png"></li>
|
|
20030
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Quattrocento, serif"><div></div><img src="${path}quattrocento.png"></li>
|
|
20031
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Quicksand, sans-serif"><div></div><img src="${path}quicksand.png"></li>
|
|
20052
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}pt_sans.png"></li>
|
|
20053
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans Caption, sans-serif" data-font-style="wght@400;700"><div></div><img src="${path}pt_sans_caption.png"></li>
|
|
20054
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Sans Narrow, sans-serif" data-font-style="wght@400;700"><div></div><img src="${path}pt_sans_narrow.png"></li>
|
|
20055
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Serif, serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}pt_serif.png"></li>
|
|
20056
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="PT Serif Caption, serif" data-font-style="ital@0;1"><div></div><img src="${path}pt_serif_caption.png"></li>
|
|
20057
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Quattrocento Sans, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}quattrocento_sans.png"></li>
|
|
20058
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Quattrocento, serif" data-font-style="wght@400;700"><div></div><img src="${path}quattrocento.png"></li>
|
|
20059
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Quicksand, sans-serif" data-font-style="wght@300;400;500;600;700"><div></div><img src="${path}quicksand.png"></li>
|
|
20032
20060
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Qwigley, cursive"><div></div><img src="${path}qwigley.png"></li>
|
|
20033
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Raleway, sans-serif" data-font-style="100"><div></div><img src="${path}raleway.png"></li>
|
|
20061
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Raleway, sans-serif" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}raleway.png"></li>
|
|
20034
20062
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Raleway Dots, sans-serif"><div></div><img src="${path}raleway_dots.png"></li>
|
|
20035
20063
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Redressed, cursive"><div></div><img src="${path}redressed.png"></li>
|
|
20036
20064
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Ribeye Marrow, cursive"><div></div><img src="${path}ribeye_marrow.png"></li>
|
|
20037
20065
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Righteous, cursive"><div></div><img src="${path}righteous.png"></li>
|
|
20038
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto, sans-serif" data-font-style="300"><div></div><img src="${path}roboto.png"></li>
|
|
20039
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Condensed, sans-serif" data-font-style="300,
|
|
20040
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Mono, monospace" data-font-style="300,700"><div></div><img src="${path}roboto_mono.png"></li>
|
|
20041
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Slab, serif" data-font-style="200
|
|
20066
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto, sans-serif" data-font-style="ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900"><div></div><img src="${path}roboto.png"></li>
|
|
20067
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Condensed, sans-serif" data-font-style="ital,wght@0,300;0,400;0,700;1,300;1,400;1,700"><div></div><img src="${path}roboto_condensed.png"></li>
|
|
20068
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Mono, monospace" data-font-style="ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"><div></div><img src="${path}roboto_mono.png"></li>
|
|
20069
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Roboto Slab, serif" data-font-style="wght@100;200;300;400;500;600;700;800;900"><div></div><img src="${path}roboto_slab.png"></li>
|
|
20042
20070
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Rochester, cursive"><div></div><img src="${path}rochester.png"></li>
|
|
20043
20071
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Rouge Script, cursive"><div></div><img src="${path}rouge_script.png"></li>
|
|
20044
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Rubik, sans-serif" data-font-style="300,
|
|
20072
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Rubik, sans-serif" data-font-style="ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}rubik.png"></li>
|
|
20045
20073
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Rubik Mono One, sans-serif"><div></div><img src="${path}rubik_mono_one.png"></li>
|
|
20046
20074
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Ruslan Display, cursive"><div></div><img src="${path}ruslan_display.png"></li>
|
|
20047
20075
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Russo One, sans-serif"><div></div><img src="${path}russo_one.png"></li>
|
|
20048
20076
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Sacramento, cursive"><div></div><img src="${path}sacramento.png"></li>
|
|
20049
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Sanchez, serif"><div></div><img src="${path}sanchez.png"></li>
|
|
20077
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Sanchez, serif" data-font-style="ital@0;1"><div></div><img src="${path}sanchez.png"></li>
|
|
20050
20078
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Satisfy, cursive"><div></div><img src="${path}satisfy.png"></li>
|
|
20051
20079
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Sawarabi Gothic, sans-serif"><div></div><img src="${path}sawarabi_gothic.png"></li>
|
|
20052
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Scada, sans-serif" data-font-style="400,
|
|
20080
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Scada, sans-serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}scada.png"></li>
|
|
20053
20081
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Seaweed Script, cursive"><div></div><img src="${path}seaweed_script.png"></li>
|
|
20054
20082
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Seymour One, sans-serif"><div></div><img src="${path}seymour_one.png"></li>
|
|
20055
20083
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Shadows Into Light Two, cursive"><div></div><img src="${path}shadows_into_light_two.png"></li>
|
|
20056
20084
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Six Caps, sans-serif"><div></div><img src="${path}six_caps.png"></li>
|
|
20057
20085
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Snowburst One, cursive"><div></div><img src="${path}snowburst_one.png"></li>
|
|
20058
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Source Code Pro, monospace" data-font-style="300,700"><div></div><img src="${path}source_code_pro.png"></li>
|
|
20059
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Source Sans Pro, sans-serif" data-font-style="200"><div></div><img src="${path}source_sans_pro.png"></li>
|
|
20086
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Source Code Pro, monospace" data-font-style="ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}source_code_pro.png"></li>
|
|
20087
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Source Sans Pro, sans-serif" data-font-style="ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900"><div></div><img src="${path}source_sans_pro.png"></li>
|
|
20060
20088
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Special Elite, cursive"><div></div><img src="${path}special_elite.png"></li>
|
|
20061
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Spectral, serif" data-font-style="200,
|
|
20062
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Spectral SC, serif" data-font-style="300,
|
|
20089
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Spectral, serif" data-font-style="ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800"><div></div><img src="${path}spectral.png"></li>
|
|
20090
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Spectral SC, serif" data-font-style="ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800"><div></div><img src="${path}spectral_sc.png"></li>
|
|
20063
20091
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Squada One, cursive"><div></div><img src="${path}squada_one.png"></li>
|
|
20064
20092
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Stalinist One, cursive"><div></div><img src="${path}stalinist_one.png"></li>
|
|
20065
20093
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Stint Ultra Expanded, cursive"><div></div><img src="${path}stint_ultra_expanded.png"></li>
|
|
20066
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Syncopate, sans-serif"><div></div><img src="${path}syncopate.png"></li>
|
|
20067
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Tangerine, cursive"><div></div><img src="${path}tangerine.png"></li>
|
|
20094
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Syncopate, sans-serif" data-font-style="wght@400;700"><div></div><img src="${path}syncopate.png"></li>
|
|
20095
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Tangerine, cursive" data-font-style="wght@400;700"><div></div><img src="${path}tangerine.png"></li>
|
|
20068
20096
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Tenor Sans, sans-serif"><div></div><img src="${path}tenor_sans.png"></li>
|
|
20069
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Tinos, serif" data-font-style="400,
|
|
20070
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Ubuntu, sans-serif" data-font-style="300,
|
|
20097
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Tinos, serif" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}tinos.png"></li>
|
|
20098
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Ubuntu, sans-serif" data-font-style="ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700"><div></div><img src="${path}ubuntu.png"></li>
|
|
20071
20099
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Ubuntu Condensed, sans-serif"><div></div><img src="${path}ubuntu_condensed.png"></li>
|
|
20072
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Ubuntu Mono, monospace" data-font-style="400,700"><div></div><img src="${path}ubuntu_mono.png"></li>
|
|
20100
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Ubuntu Mono, monospace" data-font-style="ital,wght@0,400;0,700;1,400;1,700"><div></div><img src="${path}ubuntu_mono.png"></li>
|
|
20073
20101
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Underdog, cursive"><div></div><img src="${path}underdog.png"></li>
|
|
20074
20102
|
<li role="option" tabindex="0" data-provider="google" data-font-family="UnifrakturMaguntia, cursive"><div></div><img src="${path}unifrakturmaguntia.png"></li>
|
|
20075
20103
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Vast Shadow, cursive"><div></div><img src="${path}vast_shadow.png"></li>
|
|
20076
20104
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Viga, sans-serif"><div></div><img src="${path}viga.png"></li>
|
|
20077
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Vollkorn, serif" data-font-style="400,
|
|
20078
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Vollkorn SC, serif" data-font-style="400
|
|
20105
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Vollkorn, serif" data-font-style="ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900"><div></div><img src="${path}vollkorn.png"></li>
|
|
20106
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Vollkorn SC, serif" data-font-style="wght@400;600;700;900"><div></div><img src="${path}vollkorn_sc.png"></li>
|
|
20079
20107
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Voltaire, sans-serif"><div></div><img src="${path}voltaire.png"></li>
|
|
20080
20108
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Wire One, sans-serif"><div></div><img src="${path}wire_one.png"></li>
|
|
20081
|
-
<li role="option" tabindex="0" data-provider="google" data-font-family="Yanone Kaffeesatz, sans-serif" data-font-style="300
|
|
20109
|
+
<li role="option" tabindex="0" data-provider="google" data-font-family="Yanone Kaffeesatz, sans-serif" data-font-style="wght@200;300;400;500;600;700"><div></div><img src="${path}yanone_kaffeesatz.png"></li>
|
|
20082
20110
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Yeseva One, cursive"><div></div><img src="${path}yeseva_one.png"></li>
|
|
20083
20111
|
`;
|
|
20084
20112
|
return html;
|
|
@@ -62739,7 +62767,7 @@ class Image$1 {
|
|
|
62739
62767
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
62740
62768
|
<input id="hidRefId2" name="hidRefId" type="hidden" value="" />
|
|
62741
62769
|
<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
62742
|
-
<input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="
|
|
62770
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62743
62771
|
</form>
|
|
62744
62772
|
</div>
|
|
62745
62773
|
</div>
|
|
@@ -65481,6 +65509,15 @@ class Hyperlink {
|
|
|
65481
65509
|
<div class="link-src">
|
|
65482
65510
|
<input id="inpCreateLinkUrl" class="input-url" type="text"/>
|
|
65483
65511
|
<button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
65512
|
+
|
|
65513
|
+
<div class="div-anyfile-upload" style="position: relative; flex: 0 0 auto; width: 43px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
65514
|
+
<form class="form-upload-larger" target="frameTargetAnyfileUpload" method="post" action="${this.builder.opts.fileHandler}" enctype="multipart/form-data" style="overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
|
|
65515
|
+
<input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
|
|
65516
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
65517
|
+
<input type="file" onclick="blur()" tabindex="0" class="input-anyfile-upload" name="fileImage" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
65518
|
+
</form>
|
|
65519
|
+
<iframe tabindex="-1" id="frameTargetAnyfileUpload" name="frameTargetAnyfileUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
65520
|
+
</div>
|
|
65484
65521
|
</div>
|
|
65485
65522
|
<label style="display:block;margin-top:14px;">
|
|
65486
65523
|
<input class="input-newwindow" type="checkbox" /> ${util.out('Open new window')}
|
|
@@ -65510,6 +65547,30 @@ class Hyperlink {
|
|
|
65510
65547
|
`;
|
|
65511
65548
|
dom.appendHtml(builderStuff, html);
|
|
65512
65549
|
|
|
65550
|
+
if (this.builder.opts.fileHandler === '' && !this.builder.opts.onFileUpload) {
|
|
65551
|
+
builderStuff.querySelector('.div-anyfile-upload').style.display = 'none';
|
|
65552
|
+
}
|
|
65553
|
+
|
|
65554
|
+
let inputFile = builderStuff.querySelector('.input-anyfile-upload');
|
|
65555
|
+
dom.addEventListener(inputFile, 'change', e => {
|
|
65556
|
+
let element = inputFile;
|
|
65557
|
+
|
|
65558
|
+
while (element.nodeName.toLowerCase() !== 'form') {
|
|
65559
|
+
element = element.parentNode;
|
|
65560
|
+
}
|
|
65561
|
+
|
|
65562
|
+
let frmUpload = element;
|
|
65563
|
+
dom.addClass(frmUpload, 'please-wait');
|
|
65564
|
+
|
|
65565
|
+
if (this.builder.opts.onFileUpload) {
|
|
65566
|
+
this.builder.opts.onFileUpload(e);
|
|
65567
|
+
} else {
|
|
65568
|
+
frmUpload.submit();
|
|
65569
|
+
}
|
|
65570
|
+
|
|
65571
|
+
inputFile.value = ''; // Clear Input
|
|
65572
|
+
});
|
|
65573
|
+
|
|
65513
65574
|
if (!this.builder.iframe) {
|
|
65514
65575
|
linkTool = builderStuff.querySelector('#divLinkTool');
|
|
65515
65576
|
} else {
|
|
@@ -66778,8 +66839,8 @@ class Code {
|
|
|
66778
66839
|
codeblock.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
|
|
66779
66840
|
index++;
|
|
66780
66841
|
});
|
|
66781
|
-
let html = decodeURIComponent(codeblock.getAttribute('data-html'));
|
|
66782
|
-
|
|
66842
|
+
let html = decodeURIComponent(codeblock.getAttribute('data-html')); //html = html.replace(/{id}/g, this.util.makeId());
|
|
66843
|
+
|
|
66783
66844
|
tmpbuilder.parentNode.removeChild(tmpbuilder); // Use existing modal
|
|
66784
66845
|
|
|
66785
66846
|
let viewhtml;
|
|
@@ -83903,7 +83964,7 @@ class Rte {
|
|
|
83903
83964
|
element = element.parentNode;
|
|
83904
83965
|
}
|
|
83905
83966
|
|
|
83906
|
-
dom.appendHtml(element, '<link href="//fonts.googleapis.com/
|
|
83967
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
|
|
83907
83968
|
}
|
|
83908
83969
|
}
|
|
83909
83970
|
|
|
@@ -84099,7 +84160,7 @@ class Rte {
|
|
|
84099
84160
|
cssUrl = this.builder.fontPath + cssFileName;
|
|
84100
84161
|
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
|
|
84101
84162
|
} else {
|
|
84102
|
-
dom.appendHtml(element, '<link href="//fonts.googleapis.com/
|
|
84163
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css2?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
|
|
84103
84164
|
}
|
|
84104
84165
|
}
|
|
84105
84166
|
}
|
|
@@ -84188,9 +84249,16 @@ class Rte {
|
|
|
84188
84249
|
|
|
84189
84250
|
let used = false;
|
|
84190
84251
|
fonts.forEach(item => {
|
|
84191
|
-
|
|
84252
|
+
let currentContentFont = item.split(',')[0].replace(/"/g, '').replace(/'/g, '').toLowerCase();
|
|
84253
|
+
|
|
84254
|
+
if (linkFontName === currentContentFont) {
|
|
84192
84255
|
used = true;
|
|
84193
|
-
}
|
|
84256
|
+
} // if(item.toLowerCase().indexOf(linkFontName.toLowerCase())===-1) {
|
|
84257
|
+
// // Do Nothing
|
|
84258
|
+
// } else {
|
|
84259
|
+
// used=true;
|
|
84260
|
+
// }
|
|
84261
|
+
|
|
84194
84262
|
});
|
|
84195
84263
|
|
|
84196
84264
|
if (!used) {
|
|
@@ -87258,7 +87326,7 @@ class MediaPicker {
|
|
|
87258
87326
|
<input id="inpMediaSource" class="input-src" type="text">
|
|
87259
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>
|
|
87260
87328
|
<div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
87261
|
-
<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%;">
|
|
87262
87330
|
<input name="hidRefId" class="input-ref-id" type="hidden" value="">
|
|
87263
87331
|
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
87264
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;">
|
|
@@ -87291,61 +87359,128 @@ class MediaPicker {
|
|
|
87291
87359
|
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87292
87360
|
const elm = modalMediaSelect.querySelector('.input-select');
|
|
87293
87361
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
87294
|
-
|
|
87295
|
-
|
|
87296
|
-
|
|
87297
|
-
|
|
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
|
|
87298
87382
|
});
|
|
87299
|
-
} else if (this.builder.opts.onImageSelectClick) {
|
|
87383
|
+
} else if (targetAssetType === 'image' && this.builder.opts.onImageSelectClick) {
|
|
87300
87384
|
this.builder.opts.onImageSelectClick({
|
|
87301
|
-
targetInput:
|
|
87302
|
-
theTrigger:
|
|
87385
|
+
targetInput: targetInput,
|
|
87386
|
+
theTrigger: theTrigger
|
|
87387
|
+
});
|
|
87388
|
+
} else if (targetAssetType === 'audio' && this.builder.opts.onAudioSelectClick) {
|
|
87389
|
+
this.builder.opts.onAudioSelectClick({
|
|
87390
|
+
targetInput: targetInput,
|
|
87391
|
+
theTrigger: theTrigger
|
|
87303
87392
|
});
|
|
87304
|
-
} else if (this.builder.opts.
|
|
87305
|
-
|
|
87306
|
-
|
|
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;
|
|
87307
87401
|
|
|
87308
|
-
if (
|
|
87309
|
-
|
|
87310
|
-
|
|
87311
|
-
}
|
|
87402
|
+
if (targetAssetType === 'media') {
|
|
87403
|
+
modal = this.builder.builderStuff.querySelector('.is-modal.mediaselect');
|
|
87404
|
+
iframe = modal.querySelector('iframe');
|
|
87312
87405
|
|
|
87313
|
-
|
|
87314
|
-
|
|
87315
|
-
|
|
87316
|
-
|
|
87317
|
-
|
|
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, () => {
|
|
87318
87429
|
elm.removeAttribute('data-focus');
|
|
87319
87430
|
elm.focus();
|
|
87320
87431
|
});
|
|
87321
87432
|
elm.setAttribute('data-focus', true);
|
|
87322
|
-
this.builder.targetInput = inpSrc;
|
|
87323
|
-
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87324
|
-
} else if (this.builder.opts.imageselect) {
|
|
87325
|
-
let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
|
|
87326
|
-
let iframe = modalImageSelect.querySelector('iframe');
|
|
87327
|
-
|
|
87328
|
-
if (this.builder.opts.assetRefresh) {
|
|
87329
|
-
iframe.src = this.builder.opts.imageselect;
|
|
87330
|
-
this.builder.opts.assetRefresh = false;
|
|
87331
|
-
}
|
|
87433
|
+
this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
|
|
87332
87434
|
|
|
87333
|
-
|
|
87334
|
-
|
|
87335
|
-
|
|
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
|
+
// }
|
|
87336
87478
|
|
|
87337
|
-
util.showModal(modalImageSelect, false, () => {
|
|
87338
|
-
elm.removeAttribute('data-focus');
|
|
87339
|
-
elm.focus();
|
|
87340
|
-
});
|
|
87341
|
-
elm.setAttribute('data-focus', true);
|
|
87342
|
-
this.builder.targetInput = inpSrc;
|
|
87343
|
-
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
87344
|
-
}
|
|
87345
87479
|
});
|
|
87346
87480
|
}
|
|
87347
87481
|
|
|
87348
87482
|
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87483
|
+
let frm = modalMediaSelect.querySelector('.form-upload-larger');
|
|
87349
87484
|
dom.addEventListener(inputFileSelect, 'change', e => {
|
|
87350
87485
|
let element = inputFileSelect;
|
|
87351
87486
|
|
|
@@ -87356,12 +87491,42 @@ class MediaPicker {
|
|
|
87356
87491
|
let frmUpload = element;
|
|
87357
87492
|
dom.addClass(frmUpload, 'please-wait');
|
|
87358
87493
|
modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
|
|
87494
|
+
let targetAssetType = this.builder.targetAssetType;
|
|
87359
87495
|
|
|
87360
|
-
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
|
|
87361
87508
|
this.builder.opts.onLargerImageUpload(e);
|
|
87362
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
|
+
|
|
87363
87523
|
frmUpload.submit();
|
|
87364
|
-
}
|
|
87524
|
+
} // if(this.builder.opts.onLargerImageUpload) {
|
|
87525
|
+
// this.builder.opts.onLargerImageUpload(e);
|
|
87526
|
+
// } else {
|
|
87527
|
+
// frmUpload.submit();
|
|
87528
|
+
// }
|
|
87529
|
+
|
|
87365
87530
|
|
|
87366
87531
|
inputFileSelect.value = ''; // Clear Input
|
|
87367
87532
|
});
|
|
@@ -87383,7 +87548,9 @@ class MediaPicker {
|
|
|
87383
87548
|
const modalMediaSelect = this.modalMediaSelect;
|
|
87384
87549
|
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
87385
87550
|
|
|
87386
|
-
if (assetType === '
|
|
87551
|
+
if (assetType === 'all') {
|
|
87552
|
+
inputFileSelect.setAttribute('accept', '*');
|
|
87553
|
+
} else if (assetType === 'media') {
|
|
87387
87554
|
inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
|
|
87388
87555
|
} else if (assetType === 'video') {
|
|
87389
87556
|
inputFileSelect.setAttribute('accept', 'video/mp4');
|
|
@@ -88581,6 +88748,7 @@ class ContentBuilder {
|
|
|
88581
88748
|
.is-col-tool svg {
|
|
88582
88749
|
display: initial !important;
|
|
88583
88750
|
}
|
|
88751
|
+
|
|
88584
88752
|
`;
|
|
88585
88753
|
|
|
88586
88754
|
if (!this.builderStuff.querySelector('style[data-rel="css-new"]')) {
|
|
@@ -88890,7 +89058,7 @@ class ContentBuilder {
|
|
|
88890
89058
|
html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
|
|
88891
89059
|
}
|
|
88892
89060
|
|
|
88893
|
-
html = html.replace(/{id}/g, util.makeId());
|
|
89061
|
+
html = html.replace(/{id}/g, util.makeId());
|
|
88894
89062
|
|
|
88895
89063
|
if (this.opts.onAdd) {
|
|
88896
89064
|
html = this.opts.onAdd(html);
|
|
@@ -88961,9 +89129,24 @@ class ContentBuilder {
|
|
|
88961
89129
|
this.sortableObjects.push(sortableObject);
|
|
88962
89130
|
builder.setAttribute('data-sort', true);
|
|
88963
89131
|
} // /Sortable
|
|
88964
|
-
//
|
|
89132
|
+
// Fix buttons not wrapped in <div style="white-space: nowrap;">
|
|
88965
89133
|
|
|
88966
89134
|
|
|
89135
|
+
const linkButtons = builder.querySelectorAll('a[role="button"]');
|
|
89136
|
+
Array.prototype.forEach.call(linkButtons, btn => {
|
|
89137
|
+
if (btn.parentNode) {
|
|
89138
|
+
if (btn.parentNode.parentNode) {
|
|
89139
|
+
if (btn.parentNode.parentNode.parentNode === builder) {
|
|
89140
|
+
btn.outerHTML = `
|
|
89141
|
+
<div style="white-space: nowrap;">
|
|
89142
|
+
${btn.outerHTML}
|
|
89143
|
+
</div>
|
|
89144
|
+
`;
|
|
89145
|
+
}
|
|
89146
|
+
}
|
|
89147
|
+
}
|
|
89148
|
+
}); // Additional contentEditable for subblock
|
|
89149
|
+
|
|
88967
89150
|
const subblocks = builder.querySelectorAll('.is-subblock');
|
|
88968
89151
|
Array.prototype.forEach.call(subblocks, subblock => {
|
|
88969
89152
|
subblock.contentEditable = true;
|
|
@@ -92630,7 +92813,11 @@ class ContentStuff {
|
|
|
92630
92813
|
.content-edit .box-hover {
|
|
92631
92814
|
outline: none !important;
|
|
92632
92815
|
}
|
|
92633
|
-
`;
|
|
92816
|
+
`; // .is-wrapper.is-edit > div {
|
|
92817
|
+
// overflow-x: unset;
|
|
92818
|
+
// overflow-y: unset;
|
|
92819
|
+
// }
|
|
92820
|
+
|
|
92634
92821
|
builder.contentStuff.insertAdjacentHTML('afterbegin', `
|
|
92635
92822
|
<style>
|
|
92636
92823
|
${css}
|
|
@@ -92650,6 +92837,10 @@ class AnimateScroll {
|
|
|
92650
92837
|
this.builderStuff = builderStuff;
|
|
92651
92838
|
let html = `
|
|
92652
92839
|
<style>
|
|
92840
|
+
.animatescroll td {
|
|
92841
|
+
font-size: 13px;
|
|
92842
|
+
padding: 5px 5px;
|
|
92843
|
+
}
|
|
92653
92844
|
.animatescroll.active {
|
|
92654
92845
|
right: 0;
|
|
92655
92846
|
}
|
|
@@ -92665,9 +92856,12 @@ class AnimateScroll {
|
|
|
92665
92856
|
.animatescroll .is-tabs a {
|
|
92666
92857
|
text-transform: none!important;
|
|
92667
92858
|
font-size: 13px!important;
|
|
92668
|
-
margin-right:
|
|
92859
|
+
margin-right: 25px!important;
|
|
92669
92860
|
margin-left: 3px!important;
|
|
92670
92861
|
}
|
|
92862
|
+
.animatescroll .is-tabs a:last-child {
|
|
92863
|
+
margin-right: 0!important;
|
|
92864
|
+
}
|
|
92671
92865
|
.anim-controls {
|
|
92672
92866
|
padding: 0 !important;
|
|
92673
92867
|
z-index: 1;
|
|
@@ -92676,11 +92870,11 @@ class AnimateScroll {
|
|
|
92676
92870
|
position: absolute;
|
|
92677
92871
|
top: 0;
|
|
92678
92872
|
box-sizing: border-box;
|
|
92679
|
-
border-top: transparent
|
|
92873
|
+
border-top: transparent 240px solid !important;
|
|
92680
92874
|
}
|
|
92681
92875
|
#divEnterAnim, #divLeaveAnim, #divAnimSettings {
|
|
92682
92876
|
border-top: transparent 70px solid !important;
|
|
92683
|
-
padding:
|
|
92877
|
+
padding:0 15px 20px 22px !important;
|
|
92684
92878
|
width: 100%;
|
|
92685
92879
|
height: 100%;
|
|
92686
92880
|
box-sizing: border-box;
|
|
@@ -92721,6 +92915,9 @@ class AnimateScroll {
|
|
|
92721
92915
|
font-family: sans-serif !important;
|
|
92722
92916
|
font-weight: 300 !important;
|
|
92723
92917
|
padding: 0 !important;
|
|
92918
|
+
width: 65px !important;
|
|
92919
|
+
height: 35px !important;
|
|
92920
|
+
text-align: center !important;
|
|
92724
92921
|
}
|
|
92725
92922
|
.flex-wrap {
|
|
92726
92923
|
display: flex;
|
|
@@ -92747,463 +92944,625 @@ class AnimateScroll {
|
|
|
92747
92944
|
font-weight: 300 !important;
|
|
92748
92945
|
padding: 0 !important;
|
|
92749
92946
|
}
|
|
92750
|
-
|
|
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
|
+
}
|
|
92751
92958
|
</style>
|
|
92752
92959
|
<div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
92753
92960
|
|
|
92754
92961
|
<div class="side-title">${out('Animation')}</div>
|
|
92755
92962
|
|
|
92756
|
-
<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>
|
|
92757
92964
|
|
|
92758
|
-
<
|
|
92759
|
-
|
|
92760
|
-
|
|
92761
|
-
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
|
|
92762
|
-
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
|
|
92763
|
-
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
|
|
92764
|
-
<button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
|
|
92765
|
-
</div>
|
|
92766
|
-
</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">
|
|
92767
92968
|
|
|
92768
|
-
|
|
92769
|
-
|
|
92770
|
-
<
|
|
92771
|
-
|
|
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>
|
|
92772
92989
|
</div>
|
|
92773
|
-
</div>
|
|
92774
|
-
|
|
92775
|
-
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
|
|
92776
|
-
|
|
92777
|
-
<div class="anim-controls">
|
|
92778
|
-
|
|
92779
|
-
<div style="padding:20px 0 0 18px;">
|
|
92780
|
-
<div class="anim-label">
|
|
92781
|
-
<span>
|
|
92782
|
-
<span class="bold">${out('Fade')}</span>:
|
|
92783
|
-
</span>
|
|
92784
|
-
</div>
|
|
92785
|
-
<div class="flex-wrap">
|
|
92786
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
|
|
92787
|
-
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
|
|
92788
|
-
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
|
|
92789
|
-
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
|
|
92790
|
-
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
|
|
92791
|
-
</div>
|
|
92792
|
-
|
|
92793
|
-
<div class="anim-label">
|
|
92794
|
-
<span>
|
|
92795
|
-
<span class="bold">${out('Slide')}</span>:
|
|
92796
|
-
</span>
|
|
92797
|
-
</div>
|
|
92798
|
-
<div class="flex-wrap">
|
|
92799
|
-
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
|
|
92800
|
-
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
|
|
92801
|
-
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
|
|
92802
|
-
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
|
|
92803
|
-
</div>
|
|
92804
|
-
|
|
92805
|
-
<div class="anim-label">
|
|
92806
|
-
<span>
|
|
92807
|
-
<span class="bold">${out('Flip')}</span>:
|
|
92808
|
-
</span>
|
|
92809
|
-
</div>
|
|
92810
|
-
<div class="flex-wrap">
|
|
92811
|
-
<button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
|
|
92812
|
-
<button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
|
|
92813
|
-
</div>
|
|
92814
|
-
|
|
92815
|
-
<div class="anim-label">
|
|
92816
|
-
<span>
|
|
92817
|
-
<span class="bold">${out('Zoom')}</span>:
|
|
92818
|
-
</span>
|
|
92819
|
-
</div>
|
|
92820
|
-
<div class="flex-wrap">
|
|
92821
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
|
|
92822
|
-
<button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
|
|
92823
|
-
</div>
|
|
92824
|
-
|
|
92825
|
-
<div class="anim-label">
|
|
92826
|
-
<span>
|
|
92827
|
-
<span class="bold">${out('Pulse')}</span>:
|
|
92828
|
-
</span>
|
|
92829
|
-
</div>
|
|
92830
|
-
<div class="flex-wrap">
|
|
92831
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
|
|
92832
|
-
</div>
|
|
92833
|
-
|
|
92834
|
-
<div class="anim-label">
|
|
92835
|
-
<span>
|
|
92836
|
-
<span class="bold">${out('Bounce')}</span>:
|
|
92837
|
-
</span>
|
|
92838
|
-
</div>
|
|
92839
|
-
<div class="flex-wrap">
|
|
92840
|
-
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
|
|
92841
|
-
</div>
|
|
92842
92990
|
|
|
92843
|
-
|
|
92844
|
-
|
|
92845
|
-
|
|
92846
|
-
|
|
92847
|
-
|
|
92848
|
-
|
|
92849
|
-
<
|
|
92850
|
-
|
|
92851
|
-
|
|
92852
|
-
|
|
92853
|
-
|
|
92854
|
-
|
|
92855
|
-
|
|
92856
|
-
|
|
92857
|
-
|
|
92858
|
-
|
|
92859
|
-
|
|
92860
|
-
|
|
92861
|
-
|
|
92862
|
-
|
|
92863
|
-
|
|
92864
|
-
|
|
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">
|
|
92865
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>
|
|
92866
93039
|
</button>
|
|
92867
|
-
</div>
|
|
92868
93040
|
|
|
92869
|
-
|
|
92870
|
-
|
|
92871
|
-
|
|
92872
|
-
|
|
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>
|
|
92873
93045
|
|
|
92874
|
-
|
|
92875
|
-
<button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
|
|
92876
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92877
|
-
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93046
|
+
</div>
|
|
92878
93047
|
</div>
|
|
92879
|
-
|
|
92880
93048
|
</div>
|
|
92881
93049
|
|
|
92882
|
-
|
|
93050
|
+
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="display:flex;padding:0">
|
|
92883
93051
|
|
|
92884
|
-
|
|
93052
|
+
<div class="anim-controls" style="overflow-y: auto;">
|
|
92885
93053
|
|
|
92886
|
-
|
|
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>
|
|
92887
93067
|
|
|
92888
|
-
|
|
92889
|
-
|
|
92890
|
-
|
|
92891
|
-
|
|
92892
|
-
|
|
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>
|
|
92893
93117
|
|
|
92894
|
-
|
|
92895
|
-
|
|
92896
|
-
|
|
92897
|
-
|
|
92898
|
-
|
|
92899
|
-
|
|
92900
|
-
|
|
92901
|
-
|
|
92902
|
-
<
|
|
92903
|
-
|
|
92904
|
-
|
|
92905
|
-
|
|
92906
|
-
|
|
92907
|
-
|
|
92908
|
-
|
|
92909
|
-
|
|
92910
|
-
|
|
92911
|
-
|
|
92912
|
-
|
|
92913
|
-
|
|
92914
|
-
|
|
92915
|
-
|
|
92916
|
-
|
|
92917
|
-
|
|
92918
|
-
</
|
|
92919
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
92920
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92921
|
-
</button>
|
|
92922
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
|
|
92923
|
-
</div>
|
|
92924
|
-
<div class="flex-wrap">
|
|
92925
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
92926
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
92927
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
92928
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
92929
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
92930
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92931
|
-
</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>
|
|
92932
93143
|
|
|
92933
|
-
|
|
92934
|
-
|
|
92935
|
-
<span class="bold">${out('Slide Up')}</span>:
|
|
92936
|
-
<input class="inp-slide-up" type="text" />
|
|
92937
|
-
</span>
|
|
92938
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
92939
|
-
<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')}
|
|
92940
93146
|
</button>
|
|
92941
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
|
|
92942
|
-
</div>
|
|
92943
|
-
<div class="flex-wrap">
|
|
92944
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
92945
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
92946
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
92947
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
92948
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
92949
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92950
|
-
</div>
|
|
92951
|
-
<div class="anim-label">
|
|
92952
|
-
<span>
|
|
92953
|
-
<span class="bold">${out('Slide Down')}</span>:
|
|
92954
|
-
<input class="inp-slide-down" type="text" />
|
|
92955
|
-
</span>
|
|
92956
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
92957
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92958
|
-
</button>
|
|
92959
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
|
|
92960
|
-
</div>
|
|
92961
|
-
<div class="flex-wrap">
|
|
92962
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
92963
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
92964
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
92965
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
92966
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
92967
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92968
|
-
</div>
|
|
92969
93147
|
|
|
92970
|
-
|
|
92971
|
-
<span>
|
|
92972
|
-
<span class="bold">${out('Scale')}</span>:
|
|
92973
|
-
<input class="inp-scale" type="text" />
|
|
92974
|
-
</span>
|
|
92975
|
-
<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">
|
|
92976
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>
|
|
92977
93151
|
</button>
|
|
92978
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
|
|
92979
|
-
</div>
|
|
92980
|
-
<div class="flex-nowrap">
|
|
92981
|
-
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
92982
|
-
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
92983
|
-
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
92984
|
-
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
92985
|
-
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
92986
|
-
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
92987
|
-
</div>
|
|
92988
93152
|
|
|
92989
|
-
|
|
92990
|
-
<span>
|
|
92991
|
-
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
92992
|
-
<input class="inp-rotate-clockwise" type="text" />
|
|
92993
|
-
</span>
|
|
92994
|
-
<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">
|
|
92995
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>
|
|
92996
93156
|
</button>
|
|
92997
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
92998
93157
|
</div>
|
|
92999
|
-
<div class="flex-wrap">
|
|
93000
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93001
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93002
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93003
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93004
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93005
|
-
</div>
|
|
93006
|
-
<div class="anim-label">
|
|
93007
|
-
<span>
|
|
93008
|
-
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93009
|
-
<input class="inp-rotate-counter" type="text" />
|
|
93010
|
-
</span>
|
|
93011
|
-
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93012
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93013
|
-
</button>
|
|
93014
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93015
|
-
</div>
|
|
93016
|
-
<div class="flex-wrap">
|
|
93017
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93018
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93019
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93020
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93021
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93022
|
-
</div>
|
|
93023
|
-
|
|
93024
|
-
<div class="anim-label">
|
|
93025
|
-
<span class="bold">${out('Fade')}</span>:
|
|
93026
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
|
|
93027
|
-
</div>
|
|
93028
|
-
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
|
|
93029
93158
|
|
|
93030
|
-
<br>
|
|
93031
|
-
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
93032
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93033
|
-
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93034
93159
|
</div>
|
|
93035
93160
|
|
|
93036
|
-
|
|
93161
|
+
</div>
|
|
93037
93162
|
|
|
93038
|
-
|
|
93039
|
-
<span>
|
|
93040
|
-
<span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
|
|
93041
|
-
</span>
|
|
93042
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
93043
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93044
|
-
</button>
|
|
93045
|
-
</div>
|
|
93046
|
-
<div class="flex-wrap">
|
|
93047
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93048
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93049
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93050
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93051
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93052
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93053
|
-
</div>
|
|
93054
|
-
<div class="anim-label">
|
|
93055
|
-
<span>
|
|
93056
|
-
<span class="bold">${out('Slide Right')}</span>:
|
|
93057
|
-
<input class="inp-slide-right" type="text" />
|
|
93058
|
-
</span>
|
|
93059
|
-
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93060
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93061
|
-
</button>
|
|
93062
|
-
</div>
|
|
93063
|
-
<div class="flex-wrap">
|
|
93064
|
-
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93065
|
-
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93066
|
-
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93067
|
-
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93068
|
-
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93069
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93070
|
-
</div>
|
|
93163
|
+
<div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="padding:0">
|
|
93071
93164
|
|
|
93072
|
-
|
|
93073
|
-
|
|
93074
|
-
|
|
93075
|
-
|
|
93076
|
-
</
|
|
93077
|
-
<
|
|
93078
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93079
|
-
</button>
|
|
93080
|
-
</div>
|
|
93081
|
-
<div class="flex-wrap">
|
|
93082
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93083
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93084
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93085
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93086
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93087
|
-
<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>
|
|
93088
93171
|
</div>
|
|
93089
|
-
|
|
93090
|
-
|
|
93091
|
-
|
|
93092
|
-
|
|
93093
|
-
|
|
93094
|
-
|
|
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">
|
|
93095
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>
|
|
93096
93312
|
</button>
|
|
93097
|
-
</div>
|
|
93098
|
-
<div class="flex-wrap">
|
|
93099
|
-
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93100
|
-
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93101
|
-
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93102
|
-
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93103
|
-
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93104
|
-
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93105
|
-
</div>
|
|
93106
93313
|
|
|
93107
|
-
|
|
93108
|
-
<span>
|
|
93109
|
-
<span class="bold">${out('Scale')}</span>:
|
|
93110
|
-
<input class="inp-scale" type="text" />
|
|
93111
|
-
</span>
|
|
93112
|
-
<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">
|
|
93113
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>
|
|
93114
93317
|
</button>
|
|
93115
93318
|
</div>
|
|
93116
|
-
<div class="flex-nowrap">
|
|
93117
|
-
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93118
|
-
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93119
|
-
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93120
|
-
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93121
|
-
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93122
|
-
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93123
|
-
</div>
|
|
93124
93319
|
|
|
93125
|
-
<div class="
|
|
93126
|
-
|
|
93127
|
-
|
|
93128
|
-
<
|
|
93129
|
-
|
|
93130
|
-
|
|
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">
|
|
93131
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>
|
|
93132
93452
|
</button>
|
|
93133
|
-
|
|
93134
|
-
|
|
93135
|
-
<div class="flex-wrap">
|
|
93136
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93137
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93138
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93139
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93140
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93141
|
-
</div>
|
|
93142
|
-
<div class="anim-label">
|
|
93143
|
-
<span>
|
|
93144
|
-
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93145
|
-
<input class="inp-rotate-counter" type="text" />
|
|
93146
|
-
</span>
|
|
93147
|
-
<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">
|
|
93148
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>
|
|
93149
93457
|
</button>
|
|
93150
|
-
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93151
|
-
</div>
|
|
93152
|
-
<div class="flex-wrap">
|
|
93153
|
-
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93154
|
-
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93155
|
-
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93156
|
-
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93157
|
-
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93158
|
-
</div>
|
|
93159
93458
|
|
|
93160
|
-
<div class="anim-label">
|
|
93161
|
-
<span class="bold">${out('Fade')}</span>:
|
|
93162
93459
|
</div>
|
|
93163
|
-
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
|
|
93164
|
-
|
|
93165
|
-
<br>
|
|
93166
|
-
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
93167
|
-
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93168
|
-
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93169
|
-
</div>
|
|
93170
93460
|
|
|
93171
|
-
|
|
93172
|
-
|
|
93173
|
-
|
|
93174
|
-
|
|
93175
|
-
|
|
93176
|
-
|
|
93177
|
-
|
|
93178
|
-
|
|
93179
|
-
|
|
93180
|
-
|
|
93181
|
-
|
|
93182
|
-
|
|
93183
|
-
|
|
93184
|
-
|
|
93185
|
-
|
|
93186
|
-
|
|
93187
|
-
|
|
93188
|
-
|
|
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>
|
|
93189
93479
|
|
|
93190
|
-
|
|
93480
|
+
<div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
|
|
93191
93481
|
|
|
93192
|
-
|
|
93193
|
-
|
|
93194
|
-
|
|
93195
|
-
|
|
93196
|
-
|
|
93197
|
-
|
|
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>
|
|
93198
93489
|
</div>
|
|
93490
|
+
|
|
93491
|
+
|
|
93199
93492
|
</div>
|
|
93200
93493
|
|
|
93201
|
-
|
|
93202
93494
|
</div>
|
|
93203
93495
|
|
|
93496
|
+
<div class="dummy-elm"></div>
|
|
93497
|
+
|
|
93204
93498
|
</div>
|
|
93205
93499
|
|
|
93206
|
-
<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>
|
|
93207
93566
|
|
|
93208
93567
|
</div>
|
|
93209
93568
|
`;
|
|
@@ -93229,6 +93588,237 @@ class AnimateScroll {
|
|
|
93229
93588
|
btn.classList.add('on');
|
|
93230
93589
|
this.read();
|
|
93231
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();
|
|
93232
93822
|
}); // Default
|
|
93233
93823
|
|
|
93234
93824
|
const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
@@ -93980,6 +94570,53 @@ class AnimateScroll {
|
|
|
93980
94570
|
} //Trigger Change event
|
|
93981
94571
|
|
|
93982
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
|
+
|
|
93983
94620
|
this.builder.settings.onChange();
|
|
93984
94621
|
}); // ---
|
|
93985
94622
|
//Extend onContentClick
|
|
@@ -93993,6 +94630,18 @@ class AnimateScroll {
|
|
|
93993
94630
|
setTimeout(() => {
|
|
93994
94631
|
this.clickContent();
|
|
93995
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);
|
|
93996
94645
|
};
|
|
93997
94646
|
}
|
|
93998
94647
|
|
|
@@ -94116,6 +94765,18 @@ class AnimateScroll {
|
|
|
94116
94765
|
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94117
94766
|
inpRotateCounter_leave.value = '';
|
|
94118
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 = '';
|
|
94119
94780
|
}
|
|
94120
94781
|
|
|
94121
94782
|
read() {
|
|
@@ -94161,7 +94822,75 @@ class AnimateScroll {
|
|
|
94161
94822
|
if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
|
|
94162
94823
|
if (btnDelay) btnDelay.classList.add('on');
|
|
94163
94824
|
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94164
|
-
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
|
+
|
|
94165
94894
|
|
|
94166
94895
|
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94167
94896
|
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
@@ -94470,6 +95199,7 @@ class AnimateScroll {
|
|
|
94470
95199
|
if (btnAnimateOnce.classList.contains('on')) once = true;
|
|
94471
95200
|
this.builder.editor.saveForUndo();
|
|
94472
95201
|
this.cleanupBasic(activeElement);
|
|
95202
|
+
activeElement.style.transition = 'none';
|
|
94473
95203
|
|
|
94474
95204
|
if (val) {
|
|
94475
95205
|
activeElement.classList.remove('is-inview');
|
|
@@ -94477,9 +95207,9 @@ class AnimateScroll {
|
|
|
94477
95207
|
setTimeout(() => {
|
|
94478
95208
|
activeElement.classList.add(val);
|
|
94479
95209
|
if (once) activeElement.classList.add('once');
|
|
94480
|
-
activeElement.classList.add('is-animated');
|
|
94481
|
-
|
|
95210
|
+
activeElement.classList.add('is-animated');
|
|
94482
95211
|
setTimeout(() => {
|
|
95212
|
+
activeElement.style.transition = '';
|
|
94483
95213
|
activeElement.classList.add('is-inview');
|
|
94484
95214
|
}, 10);
|
|
94485
95215
|
}, 10);
|
|
@@ -94489,6 +95219,56 @@ class AnimateScroll {
|
|
|
94489
95219
|
this.builder.settings.onChange();
|
|
94490
95220
|
}
|
|
94491
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
|
+
|
|
94492
95272
|
apply() {
|
|
94493
95273
|
let activeElement;
|
|
94494
95274
|
let target = this.getTarget();
|
|
@@ -94564,7 +95344,10 @@ class AnimateScroll {
|
|
|
94564
95344
|
if (elm.classList.contains('on')) {
|
|
94565
95345
|
dataEnd = elm.getAttribute('data-value');
|
|
94566
95346
|
}
|
|
94567
|
-
});
|
|
95347
|
+
}); // Protection:
|
|
95348
|
+
|
|
95349
|
+
if (!dataStart) dataStart = 'data-bottom-top';
|
|
95350
|
+
if (!dataEnd) dataEnd = 'data-center';
|
|
94568
95351
|
sStart = sStart.trim();
|
|
94569
95352
|
sEnd = sEnd.trim();
|
|
94570
95353
|
if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
|
|
@@ -94633,7 +95416,9 @@ class AnimateScroll {
|
|
|
94633
95416
|
if (elm.classList.contains('on')) {
|
|
94634
95417
|
dataLeaveStart = elm.getAttribute('data-value');
|
|
94635
95418
|
}
|
|
94636
|
-
});
|
|
95419
|
+
}); // Protection:
|
|
95420
|
+
|
|
95421
|
+
if (!dataLeaveStart) dataLeaveStart = 'data-center-bottom';
|
|
94637
95422
|
dataLeaveEnd = 'data-top-bottom';
|
|
94638
95423
|
sLeaveStart = sLeaveStart.trim();
|
|
94639
95424
|
sLeaveEnd = sLeaveEnd.trim();
|
|
@@ -94658,6 +95443,17 @@ class AnimateScroll {
|
|
|
94658
95443
|
this.builder.settings.onChange();
|
|
94659
95444
|
}
|
|
94660
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
|
+
|
|
94661
95457
|
getTarget() {
|
|
94662
95458
|
let target;
|
|
94663
95459
|
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
@@ -94693,6 +95489,34 @@ class AnimateScroll {
|
|
|
94693
95489
|
if (activeCol) activeElement = activeCol.parentNode.parentNode;
|
|
94694
95490
|
}
|
|
94695
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
|
+
|
|
94696
95520
|
return {
|
|
94697
95521
|
'element': activeElement ? activeElement : false,
|
|
94698
95522
|
'name': target ? target : false
|
|
@@ -94703,19 +95527,29 @@ class AnimateScroll {
|
|
|
94703
95527
|
if (!s) {
|
|
94704
95528
|
// element (inspectedElement first)
|
|
94705
95529
|
let activeElement = this.builder.editor.inspectedElement;
|
|
94706
|
-
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;
|
|
94707
95535
|
|
|
94708
|
-
|
|
94709
|
-
|
|
94710
|
-
|
|
94711
|
-
|
|
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
|
|
94712
95542
|
|
|
94713
|
-
|
|
95543
|
+
css2 = activeElement.getAttribute('data-top-bottom');
|
|
95544
|
+
}
|
|
94714
95545
|
|
|
94715
95546
|
let hasBasicAnim = false;
|
|
94716
95547
|
|
|
94717
|
-
if (
|
|
94718
|
-
|
|
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
|
+
}
|
|
94719
95553
|
}
|
|
94720
95554
|
|
|
94721
95555
|
if (css1 || css2 || hasBasicAnim) {
|
|
@@ -94745,19 +95579,29 @@ class AnimateScroll {
|
|
|
94745
95579
|
activeElement = this.builder.editor.activeCol.parentNode.parentNode;
|
|
94746
95580
|
}
|
|
94747
95581
|
|
|
94748
|
-
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;
|
|
94749
95587
|
|
|
94750
|
-
|
|
94751
|
-
|
|
94752
|
-
|
|
94753
|
-
|
|
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
|
|
94754
95594
|
|
|
94755
|
-
|
|
95595
|
+
css2 = activeElement.getAttribute('data-top-bottom');
|
|
95596
|
+
}
|
|
94756
95597
|
|
|
94757
95598
|
let hasBasicAnim = false;
|
|
94758
95599
|
|
|
94759
|
-
if (
|
|
94760
|
-
|
|
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
|
+
}
|
|
94761
95605
|
}
|
|
94762
95606
|
|
|
94763
95607
|
if (css1 || css2 || hasBasicAnim) {
|
|
@@ -94830,6 +95674,8 @@ class AnimateScroll {
|
|
|
94830
95674
|
}
|
|
94831
95675
|
|
|
94832
95676
|
edit() {
|
|
95677
|
+
// Close all opened sidebar
|
|
95678
|
+
this.builder.sidebar.closeSidebar();
|
|
94833
95679
|
this.modalAnimateScroll.classList.add('active');
|
|
94834
95680
|
this.clickContent();
|
|
94835
95681
|
}
|
|
@@ -95056,7 +95902,7 @@ class ContentBox {
|
|
|
95056
95902
|
iconButtonsMore: ['|', 'preferences'],
|
|
95057
95903
|
customTags: [],
|
|
95058
95904
|
animateModal: false,
|
|
95059
|
-
elementAnimate:
|
|
95905
|
+
elementAnimate: false,
|
|
95060
95906
|
elementEditor: true,
|
|
95061
95907
|
// onAdd: function () { },
|
|
95062
95908
|
imageQuality: 0.92,
|
|
@@ -97623,10 +98469,10 @@ class ContentBox {
|
|
|
97623
98469
|
defaultSnippetCategory: this.settings.defaultSnippetCategory,
|
|
97624
98470
|
undoRedoStyles: this.settings.undoRedoStyles,
|
|
97625
98471
|
onUndo: () => {
|
|
97626
|
-
this.
|
|
98472
|
+
this.doUndoRedo();
|
|
97627
98473
|
},
|
|
97628
98474
|
onRedo: () => {
|
|
97629
|
-
this.
|
|
98475
|
+
this.doUndoRedo();
|
|
97630
98476
|
},
|
|
97631
98477
|
undoContainerOnly: this.settings.undoContainerOnly,
|
|
97632
98478
|
absolutePath: this.settings.absolutePath,
|
|
@@ -98245,6 +99091,11 @@ class ContentBox {
|
|
|
98245
99091
|
dom.removeClass(elm, 'box-hover');
|
|
98246
99092
|
});
|
|
98247
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
|
+
}
|
|
98248
99099
|
});
|
|
98249
99100
|
} // boxSetup
|
|
98250
99101
|
|
|
@@ -98309,6 +99160,55 @@ class ContentBox {
|
|
|
98309
99160
|
});
|
|
98310
99161
|
}
|
|
98311
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
|
+
|
|
98312
99212
|
addIdea(newArea) {
|
|
98313
99213
|
this.editor.saveForUndo();
|
|
98314
99214
|
const designPath = this.designPath;
|
|
@@ -98549,6 +99449,9 @@ class ContentBox {
|
|
|
98549
99449
|
document.body.style.overflowY = '';
|
|
98550
99450
|
this.addSpace();
|
|
98551
99451
|
this.scrollTo(newSection, 600);
|
|
99452
|
+
setTimeout(() => {
|
|
99453
|
+
this.refreshPage();
|
|
99454
|
+
}, 600);
|
|
98552
99455
|
} // addIdea
|
|
98553
99456
|
|
|
98554
99457
|
|