Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
/* 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.