jakearchibald

<script type="text/javascript" src="scripts/glow/2.0.0/seed.js"></script>

<script type="text/javascript">
	glow.load('widgets').ready(function() {
		glow.dom.get('#yey');
		// glow is version 2.0.0, the same version as the seed
	});
</script>

jakearchibald

<script type="text/javascript">
	gloader.getSeed(2).load('widgets').ready(function(glow) {
		glow.dom.get('#yey');
		// glow is the latest 2.x.x version
	});
</script>

jakearchibald

<script type="text/javascript">
(function() {
	var glow = ember.getSeed('2').load('widgets').ready(init);
	
	function init() {
		// now my application can start & use 'glow'
	}
})();
</script>

jakearchibald

<div id="hideLinkContainer"></div>

<div id="stuffToToggle">Hello!</div>

<script type="text/javascript">
	// we create the show / hide link in JavaScript so it isn't there for
	// users with JavaScript disabled
	var showHideLink = glow.dom.create('<a href="#">Hide</a>').appendTo('#hideLinkContainer');
	var stuffToToggle = glow.dom.get('#stuffToToggle');
	

jakearchibald

<!-- 1. Simple, usual case with callback -->
<script type="text/javascript">
	Glow("2").load("core", "widgets").ready(function (glow) {
		// core & widgets loaded & dom ready
		glow.widgets.doodle();
	});
</script>

<!-- 2. 'Application Pattern'. Allows glow instance to be easily used in a wider but not global scope -->
<script type="text/javascript">

jakearchibald

glow.net.loadScript('http://twitter.com/statuses/user_timeline/15390783.json?callback={callback}', {
	onLoad: function(data) {
		alert(data[0].user.name + "'s latest tweet:\n\n" + data[0].text);
	}
});

jakearchibald

(function() {
	var glow = new Glow('2').load().loaded(loaded);
	
	function loaded() {
		var thingToClick = glow.dom.create('<a href="#">Thing to click</a>');
		
		glow.events.addListener(thingToClick, 'click', function() {
			glow.load('widgets').loaded(widgetsLoaded);
		});
	}

jakearchibald

/**
 @name glow.events
 @namespace
 @description Listening, creating & firing events
*/

/**
 @name glow.events.addListeners
 @function
 @param {Object[]} attachTo   Array of objects to add listeners to

jakearchibald

// adding a show listener to an overlay:
	myOverlay.on('show', function(event) {
		// ...
	});

// adding and removing a show listener to an overlay

	function showListener() {
		// ...
	}

jakearchibald

// out with the old:

(function(){
	// this will hold our instance of glow
	var glow;
	
	gloader.load(['glow', '1', 'glow.dom', 'glow.anim', 'glow.widgets.Carousel'], {
		async: true,
		onLoad: function(g) {
			glow = g;