This example shows how to natively use a YUI Gallery module.
Long URL:
Short URL:
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 });
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('event-key', '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 }), exp = Y.one('#expand'), short = Y.one('#shorten'), 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; }, shorten = function(node) { bitly.shorten(short.get('value'), function(r) { var par = node.get('parentNode'), item = createElm(par, r.shortUrl); exp.set('value', r.shortUrl); }); }, expand = function(node) { bitly.expandByURL(exp.get('value'), function(r) { var par = node.get('parentNode'), item = createElm(par, r.longUrl); short.set('value', r.longUrl); }); }; Y.on('click', function(e) { shorten(e.target); }, '#do_shorten'); Y.on('click', function(e) { expand(e.target); }, '#do_expand'); Y.on('blur', function(e) { shorten(e.target); }, '#shorten'); Y.on('blur', function(e) { expand(e.target); }, '#expand'); short.on('key', function(e) { shorten(e.target); }, 'enter'); exp.on('key', function(e) { expand(e.target); }, 'enter'); });