init
This commit is contained in:
285
static/Vvvebjs/libs/builder/plugin-aos.js
Normal file
285
static/Vvvebjs/libs/builder/plugin-aos.js
Normal file
@@ -0,0 +1,285 @@
|
||||
/*
|
||||
Copyright 2017 Ziadin Givan
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
https://github.com/givanz/VvvebJs
|
||||
*/
|
||||
|
||||
/*
|
||||
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);
|
||||
Reference in New Issue
Block a user