Flow Examples

var Animate = function() {
	/* Animation Call
	 *
	 * optional parameters:
	 * from (calculated if not present)
	 * tween (normal by default, can be one of several)
	 * speed (0.5 by default)
	 * 
	 * Sample:
	 * Flow.Animate({
	 * 	node : foo,
	 * 	from : {
	 * 		height : 200
	 * 	},
	 * 	to : {
	 * 		height : 0
	 * 	},
	 * 	tween : 'Bounce.easeInOut',
	 * }, 2).start();
	 *
	*/
	var node = document.getById("animationtrigger");
	var ani;
	node.addEventListener("click", function(e) {
		var target = document.getById("animationsquare");
		this.toggleClass("active");
		
		if (this.hasClass("active")) {
			if (ani) {
				ani.stop();
			}
			ani = Flow.Animate({
				node : target,
				to : {
					width : 200,
					height : 80,
					top : 20,
					left : 300,
					opacity : 50
				},
				tween : "Expo.easeInOut"
			}, 2).start();
		} else {
			if (ani) {
				ani.stop();
			}
			ani = Flow.Animate({
				node : target,
				to : {
					width : 50,
					height : 50,
					top : 0,
					left : 0,
					opacity : 100
				},
				tween : "Bounce.easeOut"
			}, 2).start();
		}
		e.preventDefault();
	}, false);
	
};

// Bind on DOMContentLoaded
window.addEventListener("DOMContentLoaded", Animate, false);

var Accordion = function() {
	/* Accordion Call
	 *
	 * optional parameters:
	 * autofold (true by default, can be false)
	 * event ('click' by default, can be any event)
	 * speed (0.5 by default)
	 * tween (normal by default)
	 * property ('height' by default, can be 'width')
	 * 
	 * Sample:
	 * new Flow.Fx.Accordion(document.getById('foo'), {
	 * 	autofold : false,
	 * 	event : 'mouseover',
	 * 	speed : 0.5,
	 * 	tween : 'Expo.easeInOut',
	 * 	property : 'height'
	 * });
	 *
	*/
	new Flow.Fx.Accordion(document.getByClass("accordion"), {
		tween : "Elastic.out",
		speed : 1
	});
};

// Bind on DOMContentLoaded
window.addEventListener("DOMContentLoaded", Accordion, false);

var Ajax = function() {
	/* Ajax Call
	 *
	 * Sample:
	 * var req = new HttpRequest();
	 * req.open("POST", "foo.xml", true); // parameters
	 * req.addEventListener("success", function() {
	 * 	console.log(this);
	 * }, false); // can also listen for "error"
	 * req.send(); // Send request
	 * property ('height' by default, can be 'width')
	 *
	*/
	var trigger = document.getById("ajaxtrigger");
	
	trigger.addEventListener("click", function(e) {
		
		// Initialize
		var req = new HttpRequest();
		
		// Parameters
		req.open("GET", "fake.json", true);
		
		// Add success listener (optional)
		req.addEventListener("success", function() {
			var json = eval("(" + this.responseText + ")");

			// Grab our hook
			var target = document.getById("ajaxhook");
			
			// Inject a wrapper ul, make that our hook
			target = target.setInnerHTML('<ul class="generated"></ul>');
			
			// For each 'properties', inject a list item into our generated ul
			json.properties.forEach(function(prop) {
				target.setInnerHTML('<li>' + prop + '</li>', "append");
			});

		}, false);
		
		// Add error listener (optional)
		req.addEventListener("error", function() {
			throw new Error(this.status);
		}, false);
		req.send();
		
		// Return false on link
		e.preventDefault();
	}, false);
};

// Bind on DOMContentLoaded
window.addEventListener("DOMContentLoaded", Ajax, false);

var Drag = function() {
	/* Drag Call
	 *	
	 * optional parameters:
	 * space (the amount of separation during dragging, 5px by default)
	 * speed (how fast to animate the separation, 0.1 by default)
	 * tween (animate separation using a custom tween, normal by default)
	 * 
	 * Event Listeners:
	 *  - ondragstart
	 *  - ondragstop
	 *  - ondelete
	 *  - onmove
	 *  - onmoveup
	 *  - onmovedown
	 * 
	 * Optional Calls:
	 * - setInnerHTML
	 * - appendChild
	 * 
	 * Sample:
	 * var drag = new Flow.Fx.Drag(document.getById('foo'), {
	 * 	space : 30,
	 * 	speed : 1,
	 * 	tween : 'Expo.easeInOut',
	 * });
	 * 
	 * // Omit "on"
	 * drag.addEventListener("delete", function() {
	 * 	alert(this);
	 * 	drag.setInnerHTML("<li>Foo</li>", "append");
	 * }, false);
	 *	
	*/
	var drag = new Flow.Fx.Drag(document.getByClass("dragdrop")[0]);

	drag.addEventListener("dragstart", function() {
		console.log("dragstart");
	}, false);

	drag.addEventListener("dragstop", function() {
		console.log("dragstop");
	}, false);

	drag.addEventListener("delete", function() {
		console.log("delete");
		drag.setInnerHTML("<li>Foo</li>", "append");
	}, false);
};

// Bind on DOMContentLoaded
window.addEventListener("DOMContentLoaded", Drag, false);