289 lines
6.2 KiB
JavaScript
289 lines
6.2 KiB
JavaScript
/**
|
|
* Vvveb
|
|
*
|
|
* Copyright (C) 2021 Ziadin Givan
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*
|
|
* https://github.com/givanz/Vvveb
|
|
*/
|
|
|
|
/*
|
|
Animate on scroll
|
|
The edited page should include the aos library https://github.com/michalsnik/aos
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
|
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
*/
|
|
//clean aos classes on save
|
|
window.addEventListener("vvveb.getHtml.before", function(event) {
|
|
let doc = event.detail;
|
|
doc.querySelectorAll("[data-aos]").forEach(e => e.classList.remove("aos-animate", "aos-init"));
|
|
});
|
|
|
|
window.addEventListener("vvveb.getHtml.after", function(event) {
|
|
let doc = event.detail;
|
|
doc.querySelectorAll("[data-aos]").forEach(e => e.classList.add("aos-animate", "aos-init"));
|
|
});
|
|
|
|
//ignore aos classes for styles
|
|
Vvveb.Builder.ignoreClasses = Vvveb.Builder.ignoreClasses.concat(["aos-init", "aos-animate"]);
|
|
|
|
let aosAnimations = [{
|
|
value: "",
|
|
text: "[none]"
|
|
},{
|
|
//Fade animations
|
|
optgroup: "Fade animations"
|
|
},{
|
|
value: "fade",
|
|
text: "Fade"
|
|
},{
|
|
value: "fade-up",
|
|
text: "Fade Up"
|
|
},{
|
|
value: "fade-down",
|
|
text: "Fade down"
|
|
},{
|
|
value: "fade-left",
|
|
text: "Fade left"
|
|
},{
|
|
value: "fade-right",
|
|
text: "Fade right"
|
|
},{
|
|
value: "fade-up-right",
|
|
text: "Fade up right"
|
|
},{
|
|
value: "fade-up-left",
|
|
text: "Fade up left"
|
|
},{
|
|
value: "fade-down-right",
|
|
text: "Fade down right"
|
|
},{
|
|
value: "fade-down-left",
|
|
text: "Fade down left"
|
|
},{
|
|
//Flip animations
|
|
optgroup: "Flip animations"
|
|
},{
|
|
value: "flip-up",
|
|
text: "Flip Up"
|
|
},{
|
|
value: "flip-down",
|
|
text: "Flip Down"
|
|
},{
|
|
value: "flip-left",
|
|
text: "Flip left"
|
|
},{
|
|
value: "flip-right",
|
|
text: "Flip right"
|
|
},{
|
|
//Slide animations
|
|
optgroup: "Slide animations"
|
|
},{
|
|
value: "slide-up",
|
|
text: "Slide up"
|
|
},{
|
|
value: "slide-down",
|
|
text: "Slide down"
|
|
},{
|
|
value: "slide-left",
|
|
text: "Slide left"
|
|
},{
|
|
value: "slide-right",
|
|
text: "Slide right"
|
|
},{
|
|
//Zoom animations
|
|
optgroup: "Zoom animations"
|
|
},{
|
|
value: "zoom-in",
|
|
text: "Zoom in"
|
|
},{
|
|
value: "zoom-in-up",
|
|
text: "Zoom in up"
|
|
},{
|
|
value: "zoom-in-down",
|
|
text: "Zoom in down"
|
|
},{
|
|
value: "zoom-in-left",
|
|
text: "Zoom in left"
|
|
},{
|
|
value: "zoom-in-right",
|
|
text: "Zoom in right"
|
|
},{
|
|
value: "zoom-out",
|
|
text: "Zoom out"
|
|
},{
|
|
value: "zoom-out-up",
|
|
text: "Zoom out up"
|
|
},{
|
|
value: "zoom-out-down",
|
|
text: "Zoom out down"
|
|
},{
|
|
value: "zoom-out-left",
|
|
text: "Zoom out left"
|
|
},{
|
|
value: "zoom-out-right",
|
|
text: "Zoom out right"
|
|
}
|
|
];
|
|
/*
|
|
let aosEasing = [{
|
|
value: "",
|
|
text: "[default]"
|
|
},{
|
|
value: "linear",
|
|
text: "linear"
|
|
},{
|
|
value: "ease",
|
|
text: "ease"
|
|
},{
|
|
value: "ease-out",
|
|
text: "ease-out"
|
|
},{
|
|
value: "ease-in-out",
|
|
text: "ease-in-out"
|
|
},{
|
|
value: "ease-in-back",
|
|
text: "ease-in-back"
|
|
},{
|
|
value: "ease-out-back",
|
|
text: "ease-out-back"
|
|
},{
|
|
value: "ease-in-out-back",
|
|
text: "ease-in-out-back"
|
|
},{
|
|
value: "ease-in-sine",
|
|
text: "ease-in-sine"
|
|
},{
|
|
value: "ease-out-sine",
|
|
text: "ease-out-sine"
|
|
},{
|
|
value: "ease-in-quad",
|
|
text: "ease-in-quad"
|
|
},{
|
|
value: "ease-out-quad",
|
|
text: "ease-out-quad"
|
|
},{
|
|
value: "ease-in-out-quad",
|
|
text: "ease-in-out-quad"
|
|
},{
|
|
value: "ease-in-cubic",
|
|
text: "ease-in-cubic"
|
|
},{
|
|
value: "ease-out-cubic",
|
|
text: "ease-out-cubic"
|
|
},{
|
|
value: "ease-in-out-cubic",
|
|
text: "ease-in-out-cubic"
|
|
},{
|
|
value: "ease-in-quart",
|
|
text: "ease-in-quart"
|
|
},{
|
|
value: "ease-out-quart",
|
|
text: "ease-out-quart"
|
|
},{
|
|
value: "ease-in-out-quart",
|
|
text: "ease-in-out-quart"
|
|
}
|
|
];
|
|
*/
|
|
let ComponentBaseAnimateScroll = {
|
|
properties: [{
|
|
key: "animate_header",
|
|
inputtype: SectionInput,
|
|
name:false,
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
data: {header:"Animate on scroll"},
|
|
},{
|
|
name: "Animation type",
|
|
key: "type",
|
|
htmlAttr: "data-aos",
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
inputtype: SelectInput,
|
|
data: {
|
|
options: aosAnimations,
|
|
},
|
|
onChange: function(node, value) {
|
|
node.classList.remove("aos-init","aos-animate");
|
|
if (value == "") {
|
|
node.removeAttribute("data-aos","data-aos-duration","data-aos-delay");
|
|
} else {
|
|
delay(() => node.classList.add("aos-init","aos-animate"),
|
|
node.dataset.aosDuration ? node.dataset.aosDuration : 1000);
|
|
}
|
|
return node;
|
|
}
|
|
/* },{
|
|
name: "Animation easing",
|
|
key: "easing",
|
|
htmlAttr: "data-aos-easing",
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
inputtype: SelectInput,
|
|
data: {
|
|
options: aosEasing,
|
|
}*/
|
|
},{
|
|
name: "Duration",
|
|
key: "duration",
|
|
htmlAttr: "data-aos-duration",
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
inputtype: RangeInput,
|
|
data:{
|
|
max: 10000,
|
|
min:0,
|
|
step:100
|
|
},
|
|
defaultValue: 1000
|
|
},{
|
|
name: "Delay",
|
|
key: "delay",
|
|
htmlAttr: "data-aos-delay",
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
inputtype: RangeInput,
|
|
data:{
|
|
max: 10000,
|
|
min:0,
|
|
step:100
|
|
},
|
|
defaultValue: "0"
|
|
},{
|
|
name: "",
|
|
key: "delay",
|
|
htmlAttr: "data-aos-delay",
|
|
sort: base_sort++,
|
|
section: advanced_section,
|
|
inputtype: ButtonInput,
|
|
data: {text:"Play animation", icon:"la-play"},
|
|
onChange: function(node, value) {
|
|
node.classList.remove("aos-init","aos-animate");
|
|
delay(() => node.classList.add("aos-init","aos-animate"),
|
|
node.dataset.aosDuration ? node.dataset.aosDuration : 1000);
|
|
return node;
|
|
}
|
|
}]
|
|
};
|
|
|
|
Vvveb.Components.extend("_base", "_base", ComponentBaseAnimateScroll);
|