/*
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).on("vvveb.getHtml.before", function (event, doc) {
	$("[data-aos]", doc).removeClass("aos-init aos-animate");
});

$(window).on("vvveb.getHtml.after", function (event, doc) {
	$("[data-aos]", doc).addClass("aos-init aos-animate");
});

//ignore aos classes for styles
Vvveb.Builder.ignoreClasses = Vvveb.Builder.ignoreClasses.concat(["aos-init", "aos-animate"]);

var aosAnimations = [
	{
		value: "",
		text: (window.__ ? window.__("editor.animate.none", "[none]") : "[none]")
	}, {
		//Fade animations
		optgroup: (window.__ ? window.__("editor.animate.group.fade", "Fade animations") : "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: (window.__ ? window.__("editor.animate.group.flip", "Flip animations") : "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: (window.__ ? window.__("editor.animate.group.slide", "Slide animations") : "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: (window.__ ? window.__("editor.animate.group.zoom", "Zoom animations") : "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"
	}
];
/*
var 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"
		}
];
*/
var ComponentBaseAnimateScroll = {
	properties: [{
		key: "animate_header",
		inputtype: SectionInput,
		name: false,
		sort: base_sort++,
		section: advanced_section,
		data: { header: (window.__ ? window.__("editor.animate.header", "Animate on scroll") : "Animate on scroll") },
	}, {
		name: (window.__ ? window.__("editor.animate.type", "Animation type") : "Animation type"),
		key: "type",
		htmlAttr: "data-aos",
		sort: base_sort++,
		section: advanced_section,
		inputtype: SelectInput,
		data: {
			options: aosAnimations,
		},
		onChange: function (node, value) {

			node.removeClass("aos-init aos-animate");
			if (value == "") {
				node.removeAttr("data-aos data-aos-duration data-aos-delay");
			} else {
				delay(() => node.addClass("aos-init aos-animate"),
					node.data("aos-duration") ? node.data("aos-duration") : 1000);
			}
			return node;
		}
		/*	}, {
				name: "Animation easing",
				key: "easing",
				htmlAttr: "data-aos-easing",
				sort: base_sort++,
				section: advanced_section,
				inputtype: SelectInput,
				data: {
					options: aosEasing,
				}*/
	}, {
		name: (window.__ ? window.__("editor.animate.duration", "Duration") : "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: (window.__ ? window.__("editor.animate.delay", "Delay") : "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.removeClass("aos-init aos-animate");
			delay(() => node.addClass("aos-init aos-animate"),
				node.data("aos-duration") ? node.data("aos-duration") : 1000);
			return node;
		}
	}]
};

Vvveb.Components.extend("_base", "_base", ComponentBaseAnimateScroll);
