YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: YUI 2 in 3 & Gallery Modules

## The YUI Global Object: YUI 2 in 3 & Gallery Modules

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

View example in new window.

This <strong>is a test</strong>, this is only a test.

### 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) { });

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

    });

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; });

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

    });

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', 'gallery-storage-lite', 'yui2-editor', function(Y) {     //Aliasing Y.YUI2 to YAHOO    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.set('innerHTML', 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.StorageLite.on('storage-lite:ready', function () {        var editorValue = Y.StorageLite.getItem('editorContent');        if (editorValue !== null) {            Y.one('#editor').set('value', editorValue);            write('Loaded editor content from Local Storage');        } else {            write('Loaded default editor content');        }        editor.render();    });});

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

        //Aliasing Y.YUI2 to YAHOO
        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.set('innerHTML', 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.StorageLite.on('storage-lite:ready', function () {
            var editorValue = Y.StorageLite.getItem('editorContent');
            if (editorValue !== null) {
                Y.one('#editor').set('value', editorValue);
                write('Loaded editor content from Local Storage');
            } else {
                write('Loaded default editor content');
            }
            editor.render();
        });
    });

YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) { //Aliasing Y.YUI2 to YAHOO 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.set('innerHTML', 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.StorageLite.on('storage-lite:ready', function () { var editorValue = Y.StorageLite.getItem('editorContent'); if (editorValue !== null) { Y.one('#editor').set('value', editorValue); write('Loaded editor content from Local Storage'); } else { write('Loaded default editor content'); } editor.render(); }); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings