YUI Library Examples: The YUI Global Object: YUI 2 in 3

The YUI Global Object: YUI 2 in 3

Using YUI2 inside of YUI3

In this example, we are using the new YUI 3 support for loading and sandboxing YUI2. From the YUI().use() statement, you will be able to load any module/utility/widget from YUI 2 and use it like you would in YUI 2.

Creating your YUI instance

Now we need to create our YUI instance with the dd-drag and yui2-calendar modules, so we can create a YUI 2 calendar and make it draggable with YUI 3.

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
});

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
});

Creating the Calendar

Now that we have our tools in place, let's create the calendar. Using the new support for loading YUI2 into a YUI3 instance, you can set up a simple variable to help you cut and paste your YUI2 based code.

In the code sample below, we are creating a scoped variable called YAHOO and assigning it from Y.YUI2. The YUI2 property of the YUI instance is a scoped version of the YUI 2 YAHOO object. If this page is inspected, you will notice that there is no global YAHOO variable.

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;
 
    var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    cal1.render();
});

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;
 
    var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    cal1.render();
});

Making it draggable

Now we make the calendar draggable with the 3.x dd-drag module.

First we listen for the renderEvent of the Calendar and set up the DD instance on it. After it's created, we need to remove the renderEvent listener as it's fired on Calendar page change.

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
 
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');
 
        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
    cal1.renderEvent.subscribe(setupDD);
    cal1.render();
 
 
});

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
 
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');
 
        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
    cal1.renderEvent.subscribe(setupDD);
    cal1.render();
 
 
});

Handling the Calendar's Select Event with Node

Now we need to hook up the selectEvent and handle that with 3.x's Node.

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');
 
        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
    cal1.renderEvent.subscribe(setupDD);
 
    cal1.selectEvent.subscribe(function(e, dates) {
        var d = dates[0][0],
            dateStr = d[1] + '/' + d[2] + '/' + d[0];
 
        Y.one('#results').set('innerHTML', 'You clicked on: ' + dateStr);
    });
    cal1.render();
});

YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');
 
        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
    cal1.renderEvent.subscribe(setupDD);
 
    cal1.selectEvent.subscribe(function(e, dates) {
        var d = dates[0][0],
            dateStr = d[1] + '/' + d[2] + '/' + d[0];
 
        Y.one('#results').set('innerHTML', 'You clicked on: ' + dateStr);
    });
    cal1.render();
});