Example: Working with YUI 2 in 3

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 node and yui2-imagecropper modules, so we can create a YUI 2 ImageCropper and do some simple DOM manipulation with Node.

YUI().use('node', 'yui2-imagecropper', function(Y) {
});

Creating the ImageCropper

Now that we have our tools in place, let's create the ImageCropper. 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('node', 'yui2-imagecropper', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;

    var crop = new YAHOO.widget.ImageCropper('cropper'); 
    
});

Using Node too

Now we need to add the yui-skin-sam class to the body so the skin works.

Y.one('body').addClass('yui-skin-sam');

Full example source

<img src="../assets/yui/yui.jpg" id="cropper">

<script>
YUI().use('node', 'anim', 'yui2-imagecropper', function(Y) {

    Y.one('body').addClass('yui-skin-sam');

    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;

    var crop = new YAHOO.widget.ImageCropper('cropper'); 

});

</script>