Today, YUI engineer Dav Glass introduced the YUI Gallery at YUIConf.  The YUI Gallery is a place for YUI users and developers to share their work. You can create your own YUI 3 modules, submit them for review, and have them appear in the gallery. As an added bonus, submissions are eligible to be distributed on the Yahoo! CDN so that others can enjoy your work. Contributed modules have spots for all kinds of information and can be covered by any number of licenses.

Dav invited me to make some contributions for the launch, and immediately I thought of the IdleTimer I introduced in my post, Detecting if the user is idle with JavaScript and YUI 3. I had to make a few changes to comply with the gallery’s posting rules, but the functionality remains unchanged.

The changes

The biggest change to the IdleTimer is in the module name. All gallery modules must begin with “gallery-” to disambiguate from standard YUI modules and ensure unique naming. Thus, the IdleTimer’s module name was changed from “idle-timer” to “gallery-idletimer”.

The source code of the file also remains roughly the same. The only change is that it now uses the standard YUI build system to generate the distributed JavaScript file. That means the generic nomenclature for adding the YUI.add() wrapper is handled automatically and three versions of the file are generated: a debug version, which is nicely formatted for viewing and has log statements included, a clean source code version without log statements, and a minified version. Overall, the resulting code is exactly the same as the original version, excluding the YUI module name.

Usage

The most exciting change is that the IdleTimer code is now available on the Yahoo! CDN. That means you can automatically load the file remotely using the YUI().use() method and it will automatically pull in the appropriate dependencies for you. Basic usage is as follows:

YUI({

    //define a custom module
    modules: {
        'gallery-idletimer': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.28-14/build/gallery-idletimer/gallery-idletimer-min.js',
            requires: ["event","event-custom"],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-idletimer', function(Y) {

    Y.IdleTimer.subscribe("idle", function(){
        //handle when the user becomes idle
    });

    Y.IdleTimer.subscribe("active", function(){
         //handle when the user becomes active
    });

    //start the timer with a default timeout of 30s
    Y.IdleTimer.start();
});

Note the module definition of “gallery-idletimer” at the beginning is the part that lets YUI autoload the correct resources by just calling YUI().use("gallery-idletimer"). The YUI Gallery build system automatically generates this code as an example along with the CDN URL.

More information

The IdleTimer on YUI Gallery page has all of the information you need to get started. You can download the source code either from the YUI Gallery GitHub location or my JSTools GitHub project. Dav has also written up a great tutorial on how to submit to the YUI Gallery.