/**
 * 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);