Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tag: 2.0.0b1
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

executable file 169 lines (123 sloc) 5.071 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
Glow 2.0.0 alpha 1
==================

This is the first release of Glow 2. It is intended for testing and shouldn't be used in a live environment.

Loading Glow
============

There are 2 options for loading Glow onto your page

Asynchronous loading (recommended)
----------------------------------

This makes Glow load in the background, which doesn't block page rendering. This can also be used to load only the parts of Glow that are needed.

<!-- Include the loader, this is best at the end of your page -->
<script type="text/javascript" src="/scripts/glow/2.0.0/glow.js"></script>
<script type="text/javascript">
// load glow
Glow(2).ready(function(glow) {
// glow has loaded and the DOM is ready
glow('body').append('glow is ready!');
});
</script>

Another benefit is glow doesn't hit the global scope, it only exists inside your ready callback. Although it isn’t ideal in terms of bandwidth, multiple versions of glow can be loaded safely on the same page.

For larger apps, this pattern may be more useful

<script type="text/javascript">
(function() {
var glow = Glow(2).ready(init);
function init() {
// initialise your application here
}
})();
</script>

Later, when we add more features, Glow will be split into packages. If we had any widgets, you would load them like this:

<script type="text/javascript">
// load glow
Glow(2).load('widgets').ready(function(glow) {
// glow has loaded and the DOM is ready
glow('body').append('glow & glow.widgets is ready!');
});
</script>

At the moment there’s only one package, 'core'. This is loaded as soon as you call Glow(2).

These methods of loading Glow replace Gloader, which was used to load Glow 1.

The full docs for Glow can be found in glow.debug.js, search for "@name Glow"

Synchronous loading
-------------------

Using the loader is optional, you can load Glow synchronously into the global scope via:

<!-- Include the loader, this is best at the end of your page -->
<script type="text/javascript" src="/scripts/glow/2.0.0/core.js"></script>
<script type="text/javascript">
// glow has loaded into the global scope
glow.ready(function() {
// now the dom is ready
glow('body').append('glow is ready!')
});
</script>

Interacting with the DOM
========================

You can use glow as a function to get elements by CSS selector or create them by HTML string.

glow('#nav li:first-child').css('background', 'red');
glow('<p>New paragraph</p>').appendTo('body');

glow() is simply a shortcut.

glow('h1')
is the same as
new glow.NodeList('h1')

The full docs for glow.NodeList can be found in core.debug.js, search for "@name glow.NodeList"

Differences from Glow 1
-----------------------

The NodeList API is very similar to Glow 1, most of the work has been on performance for this module.

Glow 2 uses Sizzle as its CSS selector engine, greatly improving the range of selectors that can be used.

CSS can also be used to search for, and filter elements. For instance:

// get all the items in the NodeList that have class 'active'
myNodeList.filter('.active');

// get the parent element that's a child list-item of #nav
myNodeList.parent('#nav > li');

Events
======

The full docs for glow.events can be found in core.debug.js, search for "@name glow.events"

Custom Events
-------------

Now, any object can extend or be enhanced by glow.events.Target. This gives it instance methods like 'on', 'detach' and 'fire'.

function Ball() {}
glow.util.extend(Ball, glow.event.Target, {
bounce: function() {
// fire the bounce event
this.fire('bounce');
}
});

// and other code can listen for these events
var myBall = new Ball();
myBall.on('bounce', function() {
glow('body').append('<p>boing!</p>');
});

DOM Events
----------

Rather than the long-winded glow.events.addListener, NodeList now has an 'on' method.

glow('#nav a').on('click', function() {
alert('You just clicked a link in the nav');
});

The above will add a listener to each link in #nav. As a more efficient alternative, you could use event delegation...

glow('#nav').delegate('click', 'a', function() {
alert('You just clicked a link in the nav');
});

The above adds one listener to the nav, but only fires your callback if the user clicks on a link inside the nav. This means that the event will also fire for links created after the listener is added.

Keyboard Events
---------------

Keyboard events have been normalised to fire keydown and keyup once per key press, whereas the keypress event will repeat while the key is held down.

Details of which keys have been pressed have been normalised across browsers.

// adding key listeners for a sideways-scrolling shooter
glow('#spaceshipGameScreen').on('keydown', function() {
if (e.key === 'up') {
spaceship.startMoveUp();
}
else if (e.key === 'down') {
spaceship.startMoveDown();
}
}).on('keyup', function(e) {
if (e.key === 'up') {
spaceship.stopMoveUp();
}
else if (e.key === 'down') {
spaceship.stopMoveDown();
}
}).on('keypress', function(e) {
if (e.key === 'space') {
spaceship.fireLasers();
}
})
Something went wrong with that request. Please try again.