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'); });