Example: Natively use YUI Gallery Modules

Jump to Table of Contents

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

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

});