gistfile1.js

/* Loading Glow */

	// Old
	gloader.load(['glow', '1', 'glow.dom', 'glow.events', 'glow.anim'], {
		async: true,
		onLoad: function(glow) {
			glow.ready(function() {
				// glow loaded & dom ready
			});
		}
	});
	
	// New
	Glow(2).ready(function(glow) {
		// glow loaded & dom ready
	});
	
	// or with extra packages
	Glow(2).load('widgets').ready(function(glow) {
		// glow loaded & dom ready
	});
	
	// Old application pattern
	var myApplication = (function(){
		// this will hold our instance of glow
		var glow;
		
		gloader.load(['glow', '1', 'glow.dom', 'glow.events', 'glow.anim'], {
			async: true,
			onLoad: function(g) {
				glow = g;
				g.ready(domReady);
			}
		});
		
		function domReady() {
			// glow loaded & dom ready
		}
		
		// return the public properties & methods of your application as an object
		return {
			greeting: 'Hello!'
		};
	})();
	
	// new
	var myApplication = (function(){
		// this will hold our instance of glow
		var glow = Glow(2).ready(domReady);
		
		function domReady() {
			// glow loaded & dom ready
		}
		
		// return the public properties & methods of your application as an object
		return {
			greeting: 'Hello!'
		};
	})();

/* Getting elements */

	// old
	glow.dom.get('#element');
	
	// new
	glow('#element');
	
	// adding 'odd' class to odd list items, old
	glow.dom.get('#nav > li').filter(function(i) {
		return i % 2;
	}).addClass('odd');
	
	// new
	glow('#nav > li:nth-child(odd)').addClass('odd');
	
/* Creating elements */

	// old
	glow.dom.create('<div></div>');
	
	// new
	glow('<div></div>');
	
/* Getting parent list */

	// old
	var list = glow.dom.get('#nav a.active');
	while (list[0].nodeName != 'ul') {
		list = list.parent();
	}
	
	// new
	glow.dom.get('#nav a.active').parent('li');
	
/* adding click listener */
	
	// old
	glow.events.addListener('#someLink', 'click', function() {
		alert('pow!');
	});
	
	// new
	glow('#someLink').on('click', function() {
		alert('pow!');
	});

/* Delegating clicks onto list items */

	// old
	glow.events.addListener('#nav', 'click', function(e) {
		var elm = e.source;
		do {
			if (elm.nodeName === 'li') {
				// do stuff!
			}
			else if (elm === this) {
				break;
			}
		} while (elm = elm.parentNode);
	});
	
	// new
	glow('#nav').delegate('click', 'li', function() {
		// do stuff!
	});
	
/* Custom events */

	// old
	function Ball() {}
	
	var ballInstance = new Ball;
	
	glow.events.addListener(ballInstance, 'bounce', function() {
		alert('boing');
	});
	
	glow.events.fire(ballInstance, 'bounce');
	
	// new
	function Ball() {}
	glow.util.extend(Ball, glow.events.Target);
	
	var ballInstance = new Ball;
	
	ballInstance.on('bounce', function() {
		alert('boing');
	});
	
	ballInstance.fire('bounce');

/* Animating simple CSS values */
	
	// old
	var anim = glow.anim.css('#element', 3, {
		width: 700
	}, {
		destroyOnComplete: true,
		tween: glow.tweens.easeBoth()
	}).start();
	
	glow.events.addListener(anim, 'complete', function() {
		alert('done');
	});
	
	// new
	glow('#element').anim(3, {
		width: 700
	}).on('complete', function() {
		alert('done');
	});
	
/* Animating experimental CSS values */

	// old
	var anim = new glow.anim.Animation(3, {
		tween: glow.tweens.easeBoth(),
		destroyOnComplete: true
	});
	
	var elementStyle = glow.dom.get('#element').prop('style');
	
	glow.events.addListener(anim, 'frame', function() {
		elementStyle.MozBoxShadow = "0 0 " + (120 + -105 * this.value)
			+ "px rgba(0, 0, 255, " + this.value + ")";
	});
	
	anim.start();
	
	// new
	var elementStyle = glow.dom.get('#element').prop('style');
	
	glow.anim.Anim(3).target(elementStyle).prop('MozBoxShadow', {
		template: '0 0 ?px rgba(0, 0, 255, ?)',
		from: [120, 0],
		to: [15, 1]
	}).start();