This example shows how to use YUI 2 and 3 at the same time as well as interacting with each other. We will make a YUI 2 Calendar Control draggable with YUI 3 Drag & Drop and use YUI 3's Node to handle the Calendar's Select Event.
Using YUI 2 inside of YUI 3
In this example, we are using the new YUI 3 support for loading and sandboxing YUI 2. 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) { });
Creating the Calendar
Now that we have our tools in place, let's create the calendar. Using the new support for loading YUI 2 into a YUI 3 instance, you can set up a simple variable to help you cut and paste your YUI 2 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(); });
Making it draggable
Now we make the calendar draggable with the YUI 3 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(); });
Handling the Calendar's Select Event with Node
Now we need to hook up the selectEvent
and handle that with YUI 3's Node
.
YUI().use('dd-drag', 'yui2-calendar', 'yui2-logger', 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').setContent('You clicked on: ' + dateStr); }); cal1.render(); });