Example: Natively use YUI Gallery Modules

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

});