YUI Global Object

Jump to Table of Contents

This example demonstrates using YUI 2 with YUI 3 and a Gallery module.

Setting it up

This example uses the following modules: node, gallery-storage-lite, yui2-editor

YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {

});

Aliasing YUI 2

For ease of use or for easier porting of code, this example aliases the Y.YUI2 property on the instance to a local variable called YAHOO. This will allow most YUI 2 code to run unmodified.

YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {
    //Aliasing Y.YUI2 to YAHOO
    var YAHOO = Y.YUI2;

});

Full Source

The rest of the example is just to show you that you can mix and match YUI 2 and YUI 3 code.

YUI().use('node', 'event-delegate', 'yui2-editor', 'gallery-storage-lite', function(Y, result) {

    var YAHOO = Y.YUI2, res = Y.one('#wrapper .status'),
    defaultText = Y.one('#editor').get('value'),
    write = function(str) {
        var d = new Date();
        str += ' :: ' + d.toTimeString();
        res.setContent(str);
    },
    save = function() {
        Y.StorageLite.on('storage-lite:ready', function () {
            var html = editor.saveHTML();
            Y.StorageLite.setItem('editorContent', html);
            write('Editor content saved..');
        });
    };

    var editor = new YAHOO.widget.Editor('editor', {
        dompath: true,
        width: '550px',
        height: '250px',
        toolbar: {
            titlebar: 'Saving Editor',
            buttons: [
                { group: 'saveclear', label: 'Save & Clear',
                    buttons: [
                        { type: 'push', label: 'Save', value: 'save' },
                        { type: 'push', label: 'Clear', value: 'clear' },
                        { type: 'push', label: 'Reset', value: 'reset' }
                    ]
                },
                { group: 'textstyle', label: 'Font Style',
                    buttons: [
                        { type: 'push', label: 'Bold', value: 'bold' },
                        { type: 'push', label: 'Italic', value: 'italic' },
                        { type: 'push', label: 'Underline', value: 'underline' },
                        { type: 'separator' },
                        { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                            menu: [
                                { text: 'Arial', checked: true },
                                { text: 'Arial Black' },
                                { text: 'Comic Sans MS' },
                                { text: 'Courier New' },
                                { text: 'Lucida Console' },
                                { text: 'Tahoma' },
                                { text: 'Times New Roman' },
                                { text: 'Trebuchet MS' },
                                { text: 'Verdana' }
                            ]
                        },
                        { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                        { type: 'separator' },
                        { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                        { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                    ]
                }
            ]
        }
    });
    editor.on('toolbarLoaded', function() {
        editor.toolbar.on('clearClick', function() {
            editor.setEditorHTML('<br>');
            write('Editor content cleared..');
        });
        editor.toolbar.on('resetClick', function() {
            if (confirm('Are you sure you want to reset the Editor?')) {
                editor.setEditorHTML(defaultText);
                Y.StorageLite.setItem('editorContent', null);
                write('Editor content reset to default..');
            }
        });
        editor.toolbar.on('saveClick', save);
    });
    Y.later(5000, editor, function() {
        if (editor.editorDirty) {
            editor.editorDirty = null;
            save();
        }
    }, {}, true);

    Y.on('domready', function() {

        Y.StorageLite.on('storage-lite:ready', function () {
            var editorValue;
            try {
                editorValue = Y.StorageLite.getItem('editorContent');
            } catch(e) {}
            if (!editorValue) {
                Y.one('#editor').set('value', editorValue);
                write('Loaded editor content from Local Storage');
            } else {
                write('Loaded default editor content');
            }
            editor.render();
        });

    });

});