YUI 3.x Home -

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.

Setting it up

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

  1. YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {
  2.  
  3. });
  4.  
  5.  
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.

  1. YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {
  2.     //Aliasing Y.YUI2 to YAHOO
  3.     var YAHOO = Y.YUI2;
  4.  
  5. });
  6.  
  7.  
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.

  1. YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {
  2.  
  3.     //Aliasing Y.YUI2 to YAHOO
  4.     var YAHOO = Y.YUI2, res = Y.one('#wrapper .status'),
  5.     defaultText = Y.one('#editor').get('value'),
  6.     write = function(str) {
  7.         var d = new Date();
  8.         str += ' :: ' + d.toTimeString();
  9.         res.set('innerHTML', str);
  10.     },
  11.     save = function() {
  12.         Y.StorageLite.on('storage-lite:ready', function () {
  13.             var html = editor.saveHTML();
  14.             Y.StorageLite.setItem('editorContent', html);
  15.             write('Editor content saved..');
  16.         });
  17.     };
  18.  
  19.     var editor = new YAHOO.widget.Editor('editor', {
  20.         dompath: true,
  21.         width: '550px',
  22.         height: '250px',
  23.         toolbar: {
  24.             titlebar: 'Saving Editor',
  25.             buttons: [
  26.                 { group: 'saveclear', label: 'Save & Clear',
  27.                     buttons: [
  28.                         { type: 'push', label: 'Save', value: 'save' },
  29.                         { type: 'push', label: 'Clear', value: 'clear' },
  30.                         { type: 'push', label: 'Reset', value: 'reset' }
  31.                     ]
  32.                 },
  33.                 { group: 'textstyle', label: 'Font Style',
  34.                     buttons: [
  35.                         { type: 'push', label: 'Bold', value: 'bold' },
  36.                         { type: 'push', label: 'Italic', value: 'italic' },
  37.                         { type: 'push', label: 'Underline', value: 'underline' },
  38.                         { type: 'separator' },
  39.                         { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
  40.                             menu: [
  41.                                 { text: 'Arial', checked: true },
  42.                                 { text: 'Arial Black' },
  43.                                 { text: 'Comic Sans MS' },
  44.                                 { text: 'Courier New' },
  45.                                 { text: 'Lucida Console' },
  46.                                 { text: 'Tahoma' },
  47.                                 { text: 'Times New Roman' },
  48.                                 { text: 'Trebuchet MS' },
  49.                                 { text: 'Verdana' }
  50.                             ]
  51.                         },
  52.                         { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
  53.                         { type: 'separator' },
  54.                         { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
  55.                         { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
  56.                     ]
  57.                 }
  58.             ]
  59.         }
  60.     });
  61.     editor.on('toolbarLoaded', function() {
  62.         editor.toolbar.on('clearClick', function() {
  63.             editor.setEditorHTML('<br>');
  64.             write('Editor content cleared..');
  65.         });
  66.         editor.toolbar.on('resetClick', function() {
  67.             if (confirm('Are you sure you want to reset the Editor?')) {
  68.                 editor.setEditorHTML(defaultText);
  69.                 Y.StorageLite.setItem('editorContent', null);
  70.                 write('Editor content reset to default..');
  71.             }
  72.         });
  73.         editor.toolbar.on('saveClick', save);
  74.     });
  75.     Y.later(5000, editor, function() {
  76.         if (editor.editorDirty) {
  77.             editor.editorDirty = null;
  78.             save();
  79.         }
  80.     }, {}, true);
  81.     Y.StorageLite.on('storage-lite:ready', function () {
  82.         var editorValue = Y.StorageLite.getItem('editorContent');
  83.         if (editorValue !== null) {
  84.             Y.one('#editor').set('value', editorValue);
  85.             write('Loaded editor content from Local Storage');
  86.         } else {
  87.             write('Loaded default editor content');
  88.         }
  89.         editor.render();
  90.     });
  91. });
  92.  
  93.  
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();
    });
});
 
 

More The YUI Global Object Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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