This example shows how to natively use a YUI Gallery module.
Long URL:
Short URL:
Loading Gallery Modules
If a Gallery module has been pushed to the CDN, it will be available to use as a first class YUI 3 module.
To load a Gallery module, simply add its module name to your YUI().use call. In the code sample below we are using the gallery-bitly module.
YUI().use('gallery-bitly', function(Y) {
//Y.bitly is available here
});
Bitly example
This simple example demonstrates using the gallery-bitly module to expand and shorten url's.
Note: We are using the gallery module directly from the use statement, no configuration needed.
YUI().use('node', 'gallery-bitly', function(Y) {
/*
To use the bit.ly module, you must have a bit.ly username and apiKey.
If you do not have an apiKey, sign up for a bitly account and go to
your Account page to get your apiKey.
*/
var bitly = new Y.bitly({
username: username,
key: key
}),
createElm = function(par, url) {
var item = '';
if (par.one('em')) {
item = par.one('em');
} else {
item = Y.Node.create('<em></em>');
par.append(item);
}
item.set('innerHTML', '<a href="' + url + '">' + url + '</a>');
return item;
};
Y.on('click', function(e) {
bitly.shorten(Y.one('#shorten').get('value'), function(r) {
var par = e.target.get('parentNode'),
item = createElm(par, r.shortUrl);
Y.one('#expand').set('value', r.shortUrl);
});
}, '#do_shorten');
Y.on('click', function(e) {
bitly.expandByURL(Y.one('#expand').get('value'), function(r) {
var par = e.target.get('parentNode'),
item = createElm(par, r.longUrl);
Y.one('#shorten').set('value', r.longUrl);
});
}, '#do_expand');
});