PageRenderTime 133ms CodeModel.GetById 11ms app.highlight 90ms RepoModel.GetById 11ms app.codeStats 1ms

/hippo/src/main/webapp/yui/editor/editor-debug.js

http://hdbc.googlecode.com/
JavaScript | 1602 lines | 1093 code | 80 blank | 429 comment | 239 complexity | 1b17fd1ce9b8419bda62baa0b8b1e545 MD5 | raw file

Large files files are truncated, but you can click here to view the full file

   1/*
   2Copyright (c) 2009, Yahoo! Inc. All rights reserved.
   3Code licensed under the BSD License:
   4http://developer.yahoo.net/yui/license.txt
   5version: 2.7.0
   6*/
   7(function() {
   8var Dom = YAHOO.util.Dom,
   9    Event = YAHOO.util.Event,
  10    Lang = YAHOO.lang;
  11    /**
  12     * @module editor    
  13     * @description <p>Creates a rich custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar</p>
  14     * @class ToolbarButtonAdvanced
  15     * @namespace YAHOO.widget
  16     * @requires yahoo, dom, element, event, container_core, menu, button
  17     * 
  18     * Provides a toolbar button based on the button and menu widgets.
  19     * @constructor
  20     * @class ToolbarButtonAdvanced
  21     * @param {String/HTMLElement} el The element to turn into a button.
  22     * @param {Object} attrs Object liternal containing configuration parameters.
  23    */
  24    if (YAHOO.widget.Button) {
  25        YAHOO.widget.ToolbarButtonAdvanced = YAHOO.widget.Button;
  26        /**
  27        * @property buttonType
  28        * @private
  29        * @description Tells if the Button is a Rich Button or a Simple Button
  30        */
  31        YAHOO.widget.ToolbarButtonAdvanced.prototype.buttonType = 'rich';
  32        /**
  33        * @method checkValue
  34        * @param {String} value The value of the option that we want to mark as selected
  35        * @description Select an option by value
  36        */
  37        YAHOO.widget.ToolbarButtonAdvanced.prototype.checkValue = function(value) {
  38            var _menuItems = this.getMenu().getItems();
  39            if (_menuItems.length === 0) {
  40                this.getMenu()._onBeforeShow();
  41                _menuItems = this.getMenu().getItems();
  42            }
  43            for (var i = 0; i < _menuItems.length; i++) {
  44                _menuItems[i].cfg.setProperty('checked', false);
  45                if (_menuItems[i].value == value) {
  46                    _menuItems[i].cfg.setProperty('checked', true);
  47                }
  48            }      
  49        };
  50    } else {
  51        YAHOO.widget.ToolbarButtonAdvanced = function() {};
  52    }
  53
  54
  55    /**
  56     * @description <p>Creates a basic custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar</p><p>Provides a toolbar button based on the button and menu widgets, &lt;select&gt; elements are used in place of menu's.</p>
  57     * @class ToolbarButton
  58     * @namespace YAHOO.widget
  59     * @requires yahoo, dom, element, event
  60     * @extends YAHOO.util.Element
  61     * 
  62     * 
  63     * @constructor
  64     * @param {String/HTMLElement} el The element to turn into a button.
  65     * @param {Object} attrs Object liternal containing configuration parameters.
  66    */
  67
  68    YAHOO.widget.ToolbarButton = function(el, attrs) {
  69        YAHOO.log('ToolbarButton Initalizing', 'info', 'ToolbarButton');
  70        YAHOO.log(arguments.length + ' arguments passed to constructor', 'info', 'Toolbar');
  71        
  72        if (Lang.isObject(arguments[0]) && !Dom.get(el).nodeType) {
  73            attrs = el;
  74        }
  75        var local_attrs = (attrs || {});
  76
  77        var oConfig = {
  78            element: null,
  79            attributes: local_attrs
  80        };
  81
  82        if (!oConfig.attributes.type) {
  83            oConfig.attributes.type = 'push';
  84        }
  85        
  86        oConfig.element = document.createElement('span');
  87        oConfig.element.setAttribute('unselectable', 'on');
  88        oConfig.element.className = 'yui-button yui-' + oConfig.attributes.type + '-button';
  89        oConfig.element.innerHTML = '<span class="first-child"><a href="#">LABEL</a></span>';
  90        oConfig.element.firstChild.firstChild.tabIndex = '-1';
  91        oConfig.attributes.id = (oConfig.attributes.id || Dom.generateId());
  92        oConfig.element.id = oConfig.attributes.id;
  93
  94        YAHOO.widget.ToolbarButton.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
  95    };
  96
  97    YAHOO.extend(YAHOO.widget.ToolbarButton, YAHOO.util.Element, {
  98        /**
  99        * @property buttonType
 100        * @private
 101        * @description Tells if the Button is a Rich Button or a Simple Button
 102        */
 103        buttonType: 'normal',
 104        /**
 105        * @method _handleMouseOver
 106        * @private
 107        * @description Adds classes to the button elements on mouseover (hover)
 108        */
 109        _handleMouseOver: function() {
 110            if (!this.get('disabled')) {
 111                this.addClass('yui-button-hover');
 112                this.addClass('yui-' + this.get('type') + '-button-hover');
 113            }
 114        },
 115        /**
 116        * @method _handleMouseOut
 117        * @private
 118        * @description Removes classes from the button elements on mouseout (hover)
 119        */
 120        _handleMouseOut: function() {
 121            this.removeClass('yui-button-hover');
 122            this.removeClass('yui-' + this.get('type') + '-button-hover');
 123        },
 124        /**
 125        * @method checkValue
 126        * @param {String} value The value of the option that we want to mark as selected
 127        * @description Select an option by value
 128        */
 129        checkValue: function(value) {
 130            if (this.get('type') == 'menu') {
 131                var opts = this._button.options;
 132                for (var i = 0; i < opts.length; i++) {
 133                    if (opts[i].value == value) {
 134                        opts.selectedIndex = i;
 135                    }
 136                }
 137            }
 138        },
 139        /** 
 140        * @method init
 141        * @description The ToolbarButton class's initialization method
 142        */        
 143        init: function(p_oElement, p_oAttributes) {
 144            YAHOO.widget.ToolbarButton.superclass.init.call(this, p_oElement, p_oAttributes);
 145
 146            this.on('mouseover', this._handleMouseOver, this, true);
 147            this.on('mouseout', this._handleMouseOut, this, true);
 148            this.on('click', function(ev) {
 149                Event.stopEvent(ev);
 150                return false;
 151            }, this, true);
 152        },
 153        /**
 154        * @method initAttributes
 155        * @description Initializes all of the configuration attributes used to create 
 156        * the toolbar.
 157        * @param {Object} attr Object literal specifying a set of 
 158        * configuration attributes used to create the toolbar.
 159        */        
 160        initAttributes: function(attr) {
 161            YAHOO.widget.ToolbarButton.superclass.initAttributes.call(this, attr);
 162            /**
 163            * @attribute value
 164            * @description The value of the button
 165            * @type String
 166            */            
 167            this.setAttributeConfig('value', {
 168                value: attr.value
 169            });
 170            /**
 171            * @attribute menu
 172            * @description The menu attribute, see YAHOO.widget.Button
 173            * @type Object
 174            */            
 175            this.setAttributeConfig('menu', {
 176                value: attr.menu || false
 177            });
 178            /**
 179            * @attribute type
 180            * @description The type of button to create: push, menu, color, select, spin
 181            * @type String
 182            */            
 183            this.setAttributeConfig('type', {
 184                value: attr.type,
 185                writeOnce: true,
 186                method: function(type) {
 187                    var el, opt;
 188                    if (!this._button) {
 189                        this._button = this.get('element').getElementsByTagName('a')[0];
 190                    }
 191                    switch (type) {
 192                        case 'select':
 193                        case 'menu':
 194                            el = document.createElement('select');
 195                            var menu = this.get('menu');
 196                            for (var i = 0; i < menu.length; i++) {
 197                                opt = document.createElement('option');
 198                                opt.innerHTML = menu[i].text;
 199                                opt.value = menu[i].value;
 200                                if (menu[i].checked) {
 201                                    opt.selected = true;
 202                                }
 203                                el.appendChild(opt);
 204                            }
 205                            this._button.parentNode.replaceChild(el, this._button);
 206                            Event.on(el, 'change', this._handleSelect, this, true);
 207                            this._button = el;
 208                            break;
 209                    }
 210                }
 211            });
 212
 213            /**
 214            * @attribute disabled
 215            * @description Set the button into a disabled state
 216            * @type String
 217            */            
 218            this.setAttributeConfig('disabled', {
 219                value: attr.disabled || false,
 220                method: function(disabled) {
 221                    if (disabled) {
 222                        this.addClass('yui-button-disabled');
 223                        this.addClass('yui-' + this.get('type') + '-button-disabled');
 224                    } else {
 225                        this.removeClass('yui-button-disabled');
 226                        this.removeClass('yui-' + this.get('type') + '-button-disabled');
 227                    }
 228                    if (this.get('type') == 'menu') {
 229                        this._button.disabled = disabled;
 230                    }
 231                }
 232            });
 233
 234            /**
 235            * @attribute label
 236            * @description The text label for the button
 237            * @type String
 238            */            
 239            this.setAttributeConfig('label', {
 240                value: attr.label,
 241                method: function(label) {
 242                    if (!this._button) {
 243                        this._button = this.get('element').getElementsByTagName('a')[0];
 244                    }
 245                    if (this.get('type') == 'push') {
 246                        this._button.innerHTML = label;
 247                    }
 248                }
 249            });
 250
 251            /**
 252            * @attribute title
 253            * @description The title of the button
 254            * @type String
 255            */            
 256            this.setAttributeConfig('title', {
 257                value: attr.title
 258            });
 259
 260            /**
 261            * @config container
 262            * @description The container that the button is rendered to, handled by Toolbar
 263            * @type String
 264            */            
 265            this.setAttributeConfig('container', {
 266                value: null,
 267                writeOnce: true,
 268                method: function(cont) {
 269                    this.appendTo(cont);
 270                }
 271            });
 272
 273        },
 274        /** 
 275        * @private
 276        * @method _handleSelect
 277        * @description The event fired when a change event gets fired on a select element
 278        * @param {Event} ev The change event.
 279        */        
 280        _handleSelect: function(ev) {
 281            var tar = Event.getTarget(ev);
 282            var value = tar.options[tar.selectedIndex].value;
 283            this.fireEvent('change', {type: 'change', value: value });
 284        },
 285        /** 
 286        * @method getMenu
 287        * @description A stub function to mimic YAHOO.widget.Button's getMenu method
 288        */        
 289        getMenu: function() {
 290            return this.get('menu');
 291        },
 292        /** 
 293        * @method destroy
 294        * @description Destroy the button
 295        */        
 296        destroy: function() {
 297            Event.purgeElement(this.get('element'), true);
 298            this.get('element').parentNode.removeChild(this.get('element'));
 299            //Brutal Object Destroy
 300            for (var i in this) {
 301                if (Lang.hasOwnProperty(this, i)) {
 302                    this[i] = null;
 303                }
 304            }       
 305        },
 306        /** 
 307        * @method fireEvent
 308        * @description Overridden fireEvent method to prevent DOM events from firing if the button is disabled.
 309        */        
 310        fireEvent: function(p_sType, p_aArgs) {
 311            //  Disabled buttons should not respond to DOM events
 312            if (this.DOM_EVENTS[p_sType] && this.get('disabled')) {
 313                Event.stopEvent(p_aArgs);
 314                return;
 315            }
 316        
 317            YAHOO.widget.ToolbarButton.superclass.fireEvent.call(this, p_sType, p_aArgs);
 318        },
 319        /**
 320        * @method toString
 321        * @description Returns a string representing the toolbar.
 322        * @return {String}
 323        */        
 324        toString: function() {
 325            return 'ToolbarButton (' + this.get('id') + ')';
 326        }
 327        
 328    });
 329})();
 330/**
 331 * @module editor
 332 * @description <p>Creates a rich Toolbar widget based on Button. Primarily used with the Rich Text Editor</p>
 333 * @namespace YAHOO.widget
 334 * @requires yahoo, dom, element, event, toolbarbutton
 335 * @optional container_core, dragdrop
 336 */
 337(function() {
 338var Dom = YAHOO.util.Dom,
 339    Event = YAHOO.util.Event,
 340    Lang = YAHOO.lang;
 341    
 342    var getButton = function(id) {
 343        var button = id;
 344        if (Lang.isString(id)) {
 345            button = this.getButtonById(id);
 346        }
 347        if (Lang.isNumber(id)) {
 348            button = this.getButtonByIndex(id);
 349        }
 350        if ((!(button instanceof YAHOO.widget.ToolbarButton)) && (!(button instanceof YAHOO.widget.ToolbarButtonAdvanced))) {
 351            button = this.getButtonByValue(id);
 352        }
 353        if ((button instanceof YAHOO.widget.ToolbarButton) || (button instanceof YAHOO.widget.ToolbarButtonAdvanced)) {
 354            return button;
 355        }
 356        return false;
 357    };
 358
 359    /**
 360     * Provides a rich toolbar widget based on the button and menu widgets
 361     * @constructor
 362     * @class Toolbar
 363     * @extends YAHOO.util.Element
 364     * @param {String/HTMLElement} el The element to turn into a toolbar.
 365     * @param {Object} attrs Object liternal containing configuration parameters.
 366    */
 367    YAHOO.widget.Toolbar = function(el, attrs) {
 368        YAHOO.log('Toolbar Initalizing', 'info', 'Toolbar');
 369        YAHOO.log(arguments.length + ' arguments passed to constructor', 'info', 'Toolbar');
 370        
 371        if (Lang.isObject(arguments[0]) && !Dom.get(el).nodeType) {
 372            attrs = el;
 373        }
 374        var local_attrs = {};
 375        if (attrs) {
 376            Lang.augmentObject(local_attrs, attrs); //Break the config reference
 377        }
 378        
 379
 380        var oConfig = {
 381            element: null,
 382            attributes: local_attrs
 383        };
 384        
 385        
 386        if (Lang.isString(el) && Dom.get(el)) {
 387            oConfig.element = Dom.get(el);
 388        } else if (Lang.isObject(el) && Dom.get(el) && Dom.get(el).nodeType) {  
 389            oConfig.element = Dom.get(el);
 390        }
 391        
 392
 393        if (!oConfig.element) {
 394            YAHOO.log('No element defined, creating toolbar container', 'warn', 'Toolbar');
 395            oConfig.element = document.createElement('DIV');
 396            oConfig.element.id = Dom.generateId();
 397            
 398            if (local_attrs.container && Dom.get(local_attrs.container)) {
 399                YAHOO.log('Container found in config appending to it (' + Dom.get(local_attrs.container).id + ')', 'info', 'Toolbar');
 400                Dom.get(local_attrs.container).appendChild(oConfig.element);
 401            }
 402        }
 403        
 404
 405        if (!oConfig.element.id) {
 406            oConfig.element.id = ((Lang.isString(el)) ? el : Dom.generateId());
 407            YAHOO.log('No element ID defined for toolbar container, creating..', 'warn', 'Toolbar');
 408        }
 409        YAHOO.log('Initing toolbar with id: ' + oConfig.element.id, 'info', 'Toolbar');
 410        
 411        var fs = document.createElement('fieldset');
 412        var lg = document.createElement('legend');
 413        lg.innerHTML = 'Toolbar';
 414        fs.appendChild(lg);
 415        
 416        var cont = document.createElement('DIV');
 417        oConfig.attributes.cont = cont;
 418        Dom.addClass(cont, 'yui-toolbar-subcont');
 419        fs.appendChild(cont);
 420        oConfig.element.appendChild(fs);
 421
 422        oConfig.element.tabIndex = -1;
 423
 424        
 425        oConfig.attributes.element = oConfig.element;
 426        oConfig.attributes.id = oConfig.element.id;
 427
 428        YAHOO.widget.Toolbar.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
 429         
 430    };
 431
 432    YAHOO.extend(YAHOO.widget.Toolbar, YAHOO.util.Element, {
 433        /**
 434        * @method _addMenuClasses
 435        * @private
 436        * @description This method is called from Menu's renderEvent to add a few more classes to the menu items
 437        * @param {String} ev The event that fired.
 438        * @param {Array} na Array of event information.
 439        * @param {Object} o Button config object. 
 440        */
 441        _addMenuClasses: function(ev, na, o) {
 442            Dom.addClass(this.element, 'yui-toolbar-' + o.get('value') + '-menu');
 443            if (Dom.hasClass(o._button.parentNode.parentNode, 'yui-toolbar-select')) {
 444                Dom.addClass(this.element, 'yui-toolbar-select-menu');
 445            }
 446            var items = this.getItems();
 447            for (var i = 0; i < items.length; i++) {
 448                Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-').toLowerCase() : items[i]._oText.nodeValue.replace(/ /g, '-').toLowerCase()));
 449                Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-')));
 450            }
 451        },
 452        /** 
 453        * @property buttonType
 454        * @description The default button to use
 455        * @type Object
 456        */
 457        buttonType: YAHOO.widget.ToolbarButton,
 458        /** 
 459        * @property dd
 460        * @description The DragDrop instance associated with the Toolbar
 461        * @type Object
 462        */
 463        dd: null,
 464        /** 
 465        * @property _colorData
 466        * @description Object reference containing colors hex and text values.
 467        * @type Object
 468        */
 469        _colorData: {
 470/* {{{ _colorData */
 471    '#111111': 'Obsidian',
 472    '#2D2D2D': 'Dark Gray',
 473    '#434343': 'Shale',
 474    '#5B5B5B': 'Flint',
 475    '#737373': 'Gray',
 476    '#8B8B8B': 'Concrete',
 477    '#A2A2A2': 'Gray',
 478    '#B9B9B9': 'Titanium',
 479    '#000000': 'Black',
 480    '#D0D0D0': 'Light Gray',
 481    '#E6E6E6': 'Silver',
 482    '#FFFFFF': 'White',
 483    '#BFBF00': 'Pumpkin',
 484    '#FFFF00': 'Yellow',
 485    '#FFFF40': 'Banana',
 486    '#FFFF80': 'Pale Yellow',
 487    '#FFFFBF': 'Butter',
 488    '#525330': 'Raw Siena',
 489    '#898A49': 'Mildew',
 490    '#AEA945': 'Olive',
 491    '#7F7F00': 'Paprika',
 492    '#C3BE71': 'Earth',
 493    '#E0DCAA': 'Khaki',
 494    '#FCFAE1': 'Cream',
 495    '#60BF00': 'Cactus',
 496    '#80FF00': 'Chartreuse',
 497    '#A0FF40': 'Green',
 498    '#C0FF80': 'Pale Lime',
 499    '#DFFFBF': 'Light Mint',
 500    '#3B5738': 'Green',
 501    '#668F5A': 'Lime Gray',
 502    '#7F9757': 'Yellow',
 503    '#407F00': 'Clover',
 504    '#8A9B55': 'Pistachio',
 505    '#B7C296': 'Light Jade',
 506    '#E6EBD5': 'Breakwater',
 507    '#00BF00': 'Spring Frost',
 508    '#00FF80': 'Pastel Green',
 509    '#40FFA0': 'Light Emerald',
 510    '#80FFC0': 'Sea Foam',
 511    '#BFFFDF': 'Sea Mist',
 512    '#033D21': 'Dark Forrest',
 513    '#438059': 'Moss',
 514    '#7FA37C': 'Medium Green',
 515    '#007F40': 'Pine',
 516    '#8DAE94': 'Yellow Gray Green',
 517    '#ACC6B5': 'Aqua Lung',
 518    '#DDEBE2': 'Sea Vapor',
 519    '#00BFBF': 'Fog',
 520    '#00FFFF': 'Cyan',
 521    '#40FFFF': 'Turquoise Blue',
 522    '#80FFFF': 'Light Aqua',
 523    '#BFFFFF': 'Pale Cyan',
 524    '#033D3D': 'Dark Teal',
 525    '#347D7E': 'Gray Turquoise',
 526    '#609A9F': 'Green Blue',
 527    '#007F7F': 'Seaweed',
 528    '#96BDC4': 'Green Gray',
 529    '#B5D1D7': 'Soapstone',
 530    '#E2F1F4': 'Light Turquoise',
 531    '#0060BF': 'Summer Sky',
 532    '#0080FF': 'Sky Blue',
 533    '#40A0FF': 'Electric Blue',
 534    '#80C0FF': 'Light Azure',
 535    '#BFDFFF': 'Ice Blue',
 536    '#1B2C48': 'Navy',
 537    '#385376': 'Biscay',
 538    '#57708F': 'Dusty Blue',
 539    '#00407F': 'Sea Blue',
 540    '#7792AC': 'Sky Blue Gray',
 541    '#A8BED1': 'Morning Sky',
 542    '#DEEBF6': 'Vapor',
 543    '#0000BF': 'Deep Blue',
 544    '#0000FF': 'Blue',
 545    '#4040FF': 'Cerulean Blue',
 546    '#8080FF': 'Evening Blue',
 547    '#BFBFFF': 'Light Blue',
 548    '#212143': 'Deep Indigo',
 549    '#373E68': 'Sea Blue',
 550    '#444F75': 'Night Blue',
 551    '#00007F': 'Indigo Blue',
 552    '#585E82': 'Dockside',
 553    '#8687A4': 'Blue Gray',
 554    '#D2D1E1': 'Light Blue Gray',
 555    '#6000BF': 'Neon Violet',
 556    '#8000FF': 'Blue Violet',
 557    '#A040FF': 'Violet Purple',
 558    '#C080FF': 'Violet Dusk',
 559    '#DFBFFF': 'Pale Lavender',
 560    '#302449': 'Cool Shale',
 561    '#54466F': 'Dark Indigo',
 562    '#655A7F': 'Dark Violet',
 563    '#40007F': 'Violet',
 564    '#726284': 'Smoky Violet',
 565    '#9E8FA9': 'Slate Gray',
 566    '#DCD1DF': 'Violet White',
 567    '#BF00BF': 'Royal Violet',
 568    '#FF00FF': 'Fuchsia',
 569    '#FF40FF': 'Magenta',
 570    '#FF80FF': 'Orchid',
 571    '#FFBFFF': 'Pale Magenta',
 572    '#4A234A': 'Dark Purple',
 573    '#794A72': 'Medium Purple',
 574    '#936386': 'Cool Granite',
 575    '#7F007F': 'Purple',
 576    '#9D7292': 'Purple Moon',
 577    '#C0A0B6': 'Pale Purple',
 578    '#ECDAE5': 'Pink Cloud',
 579    '#BF005F': 'Hot Pink',
 580    '#FF007F': 'Deep Pink',
 581    '#FF409F': 'Grape',
 582    '#FF80BF': 'Electric Pink',
 583    '#FFBFDF': 'Pink',
 584    '#451528': 'Purple Red',
 585    '#823857': 'Purple Dino',
 586    '#A94A76': 'Purple Gray',
 587    '#7F003F': 'Rose',
 588    '#BC6F95': 'Antique Mauve',
 589    '#D8A5BB': 'Cool Marble',
 590    '#F7DDE9': 'Pink Granite',
 591    '#C00000': 'Apple',
 592    '#FF0000': 'Fire Truck',
 593    '#FF4040': 'Pale Red',
 594    '#FF8080': 'Salmon',
 595    '#FFC0C0': 'Warm Pink',
 596    '#441415': 'Sepia',
 597    '#82393C': 'Rust',
 598    '#AA4D4E': 'Brick',
 599    '#800000': 'Brick Red',
 600    '#BC6E6E': 'Mauve',
 601    '#D8A3A4': 'Shrimp Pink',
 602    '#F8DDDD': 'Shell Pink',
 603    '#BF5F00': 'Dark Orange',
 604    '#FF7F00': 'Orange',
 605    '#FF9F40': 'Grapefruit',
 606    '#FFBF80': 'Canteloupe',
 607    '#FFDFBF': 'Wax',
 608    '#482C1B': 'Dark Brick',
 609    '#855A40': 'Dirt',
 610    '#B27C51': 'Tan',
 611    '#7F3F00': 'Nutmeg',
 612    '#C49B71': 'Mustard',
 613    '#E1C4A8': 'Pale Tan',
 614    '#FDEEE0': 'Marble'
 615/* }}} */
 616        },
 617        /** 
 618        * @property _colorPicker
 619        * @description The HTML Element containing the colorPicker
 620        * @type HTMLElement
 621        */
 622        _colorPicker: null,
 623        /** 
 624        * @property STR_COLLAPSE
 625        * @description String for Toolbar Collapse Button
 626        * @type String
 627        */
 628        STR_COLLAPSE: 'Collapse Toolbar',
 629        /** 
 630        * @property STR_SPIN_LABEL
 631        * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute
 632        * @type String
 633        */
 634        STR_SPIN_LABEL: 'Spin Button with value {VALUE}. Use Control Shift Up Arrow and Control Shift Down arrow keys to increase or decrease the value.',
 635        /** 
 636        * @property STR_SPIN_UP
 637        * @description String for spinbutton up
 638        * @type String
 639        */
 640        STR_SPIN_UP: 'Click to increase the value of this input',
 641        /** 
 642        * @property STR_SPIN_DOWN
 643        * @description String for spinbutton down
 644        * @type String
 645        */
 646        STR_SPIN_DOWN: 'Click to decrease the value of this input',
 647        /** 
 648        * @property _titlebar
 649        * @description Object reference to the titlebar
 650        * @type HTMLElement
 651        */
 652        _titlebar: null,
 653        /** 
 654        * @property browser
 655        * @description Standard browser detection
 656        * @type Object
 657        */
 658        browser: YAHOO.env.ua,
 659        /**
 660        * @protected
 661        * @property _buttonList
 662        * @description Internal property list of current buttons in the toolbar
 663        * @type Array
 664        */
 665        _buttonList: null,
 666        /**
 667        * @protected
 668        * @property _buttonGroupList
 669        * @description Internal property list of current button groups in the toolbar
 670        * @type Array
 671        */
 672        _buttonGroupList: null,
 673        /**
 674        * @protected
 675        * @property _sep
 676        * @description Internal reference to the separator HTML Element for cloning
 677        * @type HTMLElement
 678        */
 679        _sep: null,
 680        /**
 681        * @protected
 682        * @property _sepCount
 683        * @description Internal refernce for counting separators, so we can give them a useful class name for styling
 684        * @type Number
 685        */
 686        _sepCount: null,
 687        /**
 688        * @protected
 689        * @property draghandle
 690        * @type HTMLElement
 691        */
 692        _dragHandle: null,
 693        /**
 694        * @protected
 695        * @property _toolbarConfigs
 696        * @type Object
 697        */
 698        _toolbarConfigs: {
 699            renderer: true
 700        },
 701        /**
 702        * @protected
 703        * @property CLASS_CONTAINER
 704        * @description Default CSS class to apply to the toolbar container element
 705        * @type String
 706        */
 707        CLASS_CONTAINER: 'yui-toolbar-container',
 708        /**
 709        * @protected
 710        * @property CLASS_DRAGHANDLE
 711        * @description Default CSS class to apply to the toolbar's drag handle element
 712        * @type String
 713        */
 714        CLASS_DRAGHANDLE: 'yui-toolbar-draghandle',
 715        /**
 716        * @protected
 717        * @property CLASS_SEPARATOR
 718        * @description Default CSS class to apply to all separators in the toolbar
 719        * @type String
 720        */
 721        CLASS_SEPARATOR: 'yui-toolbar-separator',
 722        /**
 723        * @protected
 724        * @property CLASS_DISABLED
 725        * @description Default CSS class to apply when the toolbar is disabled
 726        * @type String
 727        */
 728        CLASS_DISABLED: 'yui-toolbar-disabled',
 729        /**
 730        * @protected
 731        * @property CLASS_PREFIX
 732        * @description Default prefix for dynamically created class names
 733        * @type String
 734        */
 735        CLASS_PREFIX: 'yui-toolbar',
 736        /** 
 737        * @method init
 738        * @description The Toolbar class's initialization method
 739        */
 740        init: function(p_oElement, p_oAttributes) {
 741            YAHOO.widget.Toolbar.superclass.init.call(this, p_oElement, p_oAttributes);
 742
 743        },
 744        /**
 745        * @method initAttributes
 746        * @description Initializes all of the configuration attributes used to create 
 747        * the toolbar.
 748        * @param {Object} attr Object literal specifying a set of 
 749        * configuration attributes used to create the toolbar.
 750        */
 751        initAttributes: function(attr) {
 752            YAHOO.widget.Toolbar.superclass.initAttributes.call(this, attr);
 753            this.addClass(this.CLASS_CONTAINER);
 754
 755            /**
 756            * @attribute buttonType
 757            * @description The buttonType to use (advanced or basic)
 758            * @type String
 759            */
 760            this.setAttributeConfig('buttonType', {
 761                value: attr.buttonType || 'basic',
 762                writeOnce: true,
 763                validator: function(type) {
 764                    switch (type) {
 765                        case 'advanced':
 766                        case 'basic':
 767                            return true;
 768                    }
 769                    return false;
 770                },
 771                method: function(type) {
 772                    if (type == 'advanced') {
 773                        if (YAHOO.widget.Button) {
 774                            this.buttonType = YAHOO.widget.ToolbarButtonAdvanced;
 775                        } else {
 776                            YAHOO.log('Can not find YAHOO.widget.Button', 'error', 'Toolbar');
 777                            this.buttonType = YAHOO.widget.ToolbarButton;
 778                        }
 779                    } else {
 780                        this.buttonType = YAHOO.widget.ToolbarButton;
 781                    }
 782                }
 783            });
 784
 785
 786            /**
 787            * @attribute buttons
 788            * @description Object specifying the buttons to include in the toolbar
 789            * Example:
 790            * <code><pre>
 791            * {
 792            *   { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
 793            *   { type: 'separator' },
 794            *   { id: 'b4', type: 'menu', label: 'Align', value: 'align',
 795            *       menu: [
 796            *           { text: "Left", value: 'alignleft' },
 797            *           { text: "Center", value: 'aligncenter' },
 798            *           { text: "Right", value: 'alignright' }
 799            *       ]
 800            *   }
 801            * }
 802            * </pre></code>
 803            * @type Array
 804            */
 805            
 806            this.setAttributeConfig('buttons', {
 807                value: [],
 808                writeOnce: true,
 809                method: function(data) {
 810                    for (var i in data) {
 811                        if (Lang.hasOwnProperty(data, i)) {
 812                            if (data[i].type == 'separator') {
 813                                this.addSeparator();
 814                            } else if (data[i].group !== undefined) {
 815                                this.addButtonGroup(data[i]);
 816                            } else {
 817                                this.addButton(data[i]);
 818                            }
 819                        }
 820                    }
 821                }
 822            });
 823
 824            /**
 825            * @attribute disabled
 826            * @description Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
 827            * @default false
 828            * @type Boolean
 829            */
 830            this.setAttributeConfig('disabled', {
 831                value: false,
 832                method: function(disabled) {
 833                    if (this.get('disabled') === disabled) {
 834                        return false;
 835                    }
 836                    if (disabled) {
 837                        this.addClass(this.CLASS_DISABLED);
 838                        this.set('draggable', false);
 839                        this.disableAllButtons();
 840                    } else {
 841                        this.removeClass(this.CLASS_DISABLED);
 842                        if (this._configs.draggable._initialConfig.value) {
 843                            //Draggable by default, set it back
 844                            this.set('draggable', true);
 845                        }
 846                        this.resetAllButtons();
 847                    }
 848                }
 849            });
 850
 851            /**
 852            * @config cont
 853            * @description The container for the toolbar.
 854            * @type HTMLElement
 855            */
 856            this.setAttributeConfig('cont', {
 857                value: attr.cont,
 858                readOnly: true
 859            });
 860
 861
 862            /**
 863            * @attribute grouplabels
 864            * @description Boolean indicating if the toolbar should show the group label's text string.
 865            * @default true
 866            * @type Boolean
 867            */
 868            this.setAttributeConfig('grouplabels', {
 869                value: ((attr.grouplabels === false) ? false : true),
 870                method: function(grouplabels) {
 871                    if (grouplabels) {
 872                        Dom.removeClass(this.get('cont'), (this.CLASS_PREFIX + '-nogrouplabels'));
 873                    } else {
 874                        Dom.addClass(this.get('cont'), (this.CLASS_PREFIX + '-nogrouplabels'));
 875                    }
 876                }
 877            });
 878            /**
 879            * @attribute titlebar
 880            * @description Boolean indicating if the toolbar should have a titlebar. If
 881            * passed a string, it will use that as the titlebar text
 882            * @default false
 883            * @type Boolean or String
 884            */
 885            this.setAttributeConfig('titlebar', {
 886                value: false,
 887                method: function(titlebar) {
 888                    if (titlebar) {
 889                        if (this._titlebar && this._titlebar.parentNode) {
 890                            this._titlebar.parentNode.removeChild(this._titlebar);
 891                        }
 892                        this._titlebar = document.createElement('DIV');
 893                        this._titlebar.tabIndex = '-1';
 894                        Event.on(this._titlebar, 'focus', function() {
 895                            this._handleFocus();
 896                        }, this, true);
 897                        Dom.addClass(this._titlebar, this.CLASS_PREFIX + '-titlebar');
 898                        if (Lang.isString(titlebar)) {
 899                            var h2 = document.createElement('h2');
 900                            h2.tabIndex = '-1';
 901                            h2.innerHTML = '<a href="#" tabIndex="0">' + titlebar + '</a>';
 902                            this._titlebar.appendChild(h2);
 903                            Event.on(h2.firstChild, 'click', function(ev) {
 904                                Event.stopEvent(ev);
 905                            });
 906                            Event.on([h2, h2.firstChild], 'focus', function() {
 907                                this._handleFocus();
 908                            }, this, true);
 909                        }
 910                        if (this.get('firstChild')) {
 911                            this.insertBefore(this._titlebar, this.get('firstChild'));
 912                        } else {
 913                            this.appendChild(this._titlebar);
 914                        }
 915                        if (this.get('collapse')) {
 916                            this.set('collapse', true);
 917                        }
 918                    } else if (this._titlebar) {
 919                        if (this._titlebar && this._titlebar.parentNode) {
 920                            this._titlebar.parentNode.removeChild(this._titlebar);
 921                        }
 922                    }
 923                }
 924            });
 925
 926
 927            /**
 928            * @attribute collapse
 929            * @description Boolean indicating if the the titlebar should have a collapse button.
 930            * The collapse button will not remove the toolbar, it will minimize it to the titlebar
 931            * @default false
 932            * @type Boolean
 933            */
 934            this.setAttributeConfig('collapse', {
 935                value: false,
 936                method: function(collapse) {
 937                    if (this._titlebar) {
 938                        var collapseEl = null;
 939                        var el = Dom.getElementsByClassName('collapse', 'span', this._titlebar);
 940                        if (collapse) {
 941                            if (el.length > 0) {
 942                                //There is already a collapse button
 943                                return true;
 944                            }
 945                            collapseEl = document.createElement('SPAN');
 946                            collapseEl.innerHTML = 'X';
 947                            collapseEl.title = this.STR_COLLAPSE;
 948
 949                            Dom.addClass(collapseEl, 'collapse');
 950                            this._titlebar.appendChild(collapseEl);
 951                            Event.addListener(collapseEl, 'click', function() {
 952                                if (Dom.hasClass(this.get('cont').parentNode, 'yui-toolbar-container-collapsed')) {
 953                                    this.collapse(false); //Expand Toolbar
 954                                } else {
 955                                    this.collapse(); //Collapse Toolbar
 956                                }
 957                            }, this, true);
 958                        } else {
 959                            collapseEl = Dom.getElementsByClassName('collapse', 'span', this._titlebar);
 960                            if (collapseEl[0]) {
 961                                if (Dom.hasClass(this.get('cont').parentNode, 'yui-toolbar-container-collapsed')) {
 962                                    //We are closed, reopen the titlebar..
 963                                    this.collapse(false); //Expand Toolbar
 964                                }
 965                                collapseEl[0].parentNode.removeChild(collapseEl[0]);
 966                            }
 967                        }
 968                    }
 969                }
 970            });
 971
 972            /**
 973            * @attribute draggable
 974            * @description Boolean indicating if the toolbar should be draggable.  
 975            * @default false
 976            * @type Boolean
 977            */
 978
 979            this.setAttributeConfig('draggable', {
 980                value: (attr.draggable || false),
 981                method: function(draggable) {
 982                    if (draggable && !this.get('titlebar')) {
 983                        YAHOO.log('Dragging enabled', 'info', 'Toolbar');
 984                        if (!this._dragHandle) {
 985                            this._dragHandle = document.createElement('SPAN');
 986                            this._dragHandle.innerHTML = '|';
 987                            this._dragHandle.setAttribute('title', 'Click to drag the toolbar');
 988                            this._dragHandle.id = this.get('id') + '_draghandle';
 989                            Dom.addClass(this._dragHandle, this.CLASS_DRAGHANDLE);
 990                            if (this.get('cont').hasChildNodes()) {
 991                                this.get('cont').insertBefore(this._dragHandle, this.get('cont').firstChild);
 992                            } else {
 993                                this.get('cont').appendChild(this._dragHandle);
 994                            }
 995                            this.dd = new YAHOO.util.DD(this.get('id'));
 996                            this.dd.setHandleElId(this._dragHandle.id);
 997                            
 998                        }
 999                    } else {
1000                        YAHOO.log('Dragging disabled', 'info', 'Toolbar');
1001                        if (this._dragHandle) {
1002                            this._dragHandle.parentNode.removeChild(this._dragHandle);
1003                            this._dragHandle = null;
1004                            this.dd = null;
1005                        }
1006                    }
1007                    if (this._titlebar) {
1008                        if (draggable) {
1009                            this.dd = new YAHOO.util.DD(this.get('id'));
1010                            this.dd.setHandleElId(this._titlebar);
1011                            Dom.addClass(this._titlebar, 'draggable');
1012                        } else {
1013                            Dom.removeClass(this._titlebar, 'draggable');
1014                            if (this.dd) {
1015                                this.dd.unreg();
1016                                this.dd = null;
1017                            }
1018                        }
1019                    }
1020                },
1021                validator: function(value) {
1022                    var ret = true;
1023                    if (!YAHOO.util.DD) {
1024                        ret = false;
1025                    }
1026                    return ret;
1027                }
1028            });
1029
1030        },
1031        /**
1032        * @method addButtonGroup
1033        * @description Add a new button group to the toolbar. (uses addButton)
1034        * @param {Object} oGroup Object literal reference to the Groups Config (contains an array of button configs as well as the group label)
1035        */
1036        addButtonGroup: function(oGroup) {
1037            if (!this.get('element')) {
1038                this._queue[this._queue.length] = ['addButtonGroup', arguments];
1039                return false;
1040            }
1041            
1042            if (!this.hasClass(this.CLASS_PREFIX + '-grouped')) {
1043                this.addClass(this.CLASS_PREFIX + '-grouped');
1044            }
1045            var div = document.createElement('DIV');
1046            Dom.addClass(div, this.CLASS_PREFIX + '-group');
1047            Dom.addClass(div, this.CLASS_PREFIX + '-group-' + oGroup.group);
1048            if (oGroup.label) {
1049                var label = document.createElement('h3');
1050                label.innerHTML = oGroup.label;
1051                div.appendChild(label);
1052            }
1053            if (!this.get('grouplabels')) {
1054                Dom.addClass(this.get('cont'), this.CLASS_PREFIX, '-nogrouplabels');
1055            }
1056
1057            this.get('cont').appendChild(div);
1058
1059            //For accessibility, let's put all of the group buttons in an Unordered List
1060            var ul = document.createElement('ul');
1061            div.appendChild(ul);
1062
1063            if (!this._buttonGroupList) {
1064                this._buttonGroupList = {};
1065            }
1066            
1067            this._buttonGroupList[oGroup.group] = ul;
1068
1069            for (var i = 0; i < oGroup.buttons.length; i++) {
1070                var li = document.createElement('li');
1071                li.className = this.CLASS_PREFIX + '-groupitem';
1072                ul.appendChild(li);
1073                if ((oGroup.buttons[i].type !== undefined) && oGroup.buttons[i].type == 'separator') {
1074                    this.addSeparator(li);
1075                } else {
1076                    oGroup.buttons[i].container = li;
1077                    this.addButton(oGroup.buttons[i]);
1078                }
1079            }
1080        },
1081        /**
1082        * @method addButtonToGroup
1083        * @description Add a new button to a toolbar group. Buttons supported:
1084        *   push, split, menu, select, color, spin
1085        * @param {Object} oButton Object literal reference to the Button's Config
1086        * @param {String} group The Group identifier passed into the initial config
1087        * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
1088        */
1089        addButtonToGroup: function(oButton, group, after) {
1090            var groupCont = this._buttonGroupList[group];
1091            var li = document.createElement('li');
1092            li.className = this.CLASS_PREFIX + '-groupitem';
1093            oButton.container = li;
1094            this.addButton(oButton, after);
1095            groupCont.appendChild(li);
1096        },
1097        /**
1098        * @method addButton
1099        * @description Add a new button to the toolbar. Buttons supported:
1100        *   push, split, menu, select, color, spin
1101        * @param {Object} oButton Object literal reference to the Button's Config
1102        * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
1103        */
1104        addButton: function(oButton, after) {
1105            if (!this.get('element')) {
1106                this._queue[this._queue.length] = ['addButton', arguments];
1107                return false;
1108            }
1109            if (!this._buttonList) {
1110                this._buttonList = [];
1111            }
1112            YAHOO.log('Adding button of type: ' + oButton.type, 'info', 'Toolbar');
1113            if (!oButton.container) {
1114                oButton.container = this.get('cont');
1115            }
1116
1117            if ((oButton.type == 'menu') || (oButton.type == 'split') || (oButton.type == 'select')) {
1118                if (Lang.isArray(oButton.menu)) {
1119                    for (var i in oButton.menu) {
1120                        if (Lang.hasOwnProperty(oButton.menu, i)) {
1121                            var funcObject = {
1122                                fn: function(ev, x, oMenu) {
1123                                    if (!oButton.menucmd) {
1124                                        oButton.menucmd = oButton.value;
1125                                    }
1126                                    oButton.value = ((oMenu.value) ? oMenu.value : oMenu._oText.nodeValue);
1127                                },
1128                                scope: this
1129                            };
1130                            oButton.menu[i].onclick = funcObject;
1131                        }
1132                    }
1133                }
1134            }
1135            var _oButton = {}, skip = false;
1136            for (var o in oButton) {
1137                if (Lang.hasOwnProperty(oButton, o)) {
1138                    if (!this._toolbarConfigs[o]) {
1139                        _oButton[o] = oButton[o];
1140                    }
1141                }
1142            }
1143            if (oButton.type == 'select') {
1144                _oButton.type = 'menu';
1145            }
1146            if (oButton.type == 'spin') {
1147                _oButton.type = 'push';
1148            }
1149            if (_oButton.type == 'color') {
1150                if (YAHOO.widget.Overlay) {
1151                    _oButton = this._makeColorButton(_oButton);
1152                } else {
1153                    skip = true;
1154                }
1155            }
1156            if (_oButton.menu) {
1157                if ((YAHOO.widget.Overlay) && (oButton.menu instanceof YAHOO.widget.Overlay)) {
1158                    oButton.menu.showEvent.subscribe(function() {
1159                        this._button = _oButton;
1160                    });
1161                } else {
1162                    for (var m = 0; m < _oButton.menu.length; m++) {
1163                        if (!_oButton.menu[m].value) {
1164                            _oButton.menu[m].value = _oButton.menu[m].text;
1165                        }
1166                    }
1167                    if (this.browser.webkit) {
1168                        _oButton.focusmenu = false;
1169                    }
1170                }
1171            }
1172            if (skip) {
1173                oButton = false;
1174            } else {
1175                //Add to .get('buttons') manually
1176                this._configs.buttons.value[this._configs.buttons.value.length] = oButton;
1177                
1178                var tmp = new this.buttonType(_oButton);
1179                tmp.get('element').tabIndex = '-1';
1180                tmp.get('element').setAttribute('role', 'button');
1181                tmp._selected = true;
1182                
1183                if (this.get('disabled')) {
1184                    //Toolbar is disabled, disable the new button too!
1185                    tmp.set('disabled', true);
1186                }
1187                if (!oButton.id) {
1188                    oButton.id = tmp.get('id');
1189                }
1190                YAHOO.log('Button created (' + oButton.type + ')', 'info', 'Toolbar');
1191                
1192                if (after) {
1193                    var el = tmp.get('element');
1194                    var nextSib = null;
1195                    if (after.get) {
1196                        nextSib = after.get('element').nextSibling;
1197                    } else if (after.nextSibling) {
1198                        nextSib = after.nextSibling;
1199                    }
1200                    if (nextSib) {
1201                        nextSib.parentNode.insertBefore(el, nextSib);
1202                    }
1203                }
1204                tmp.addClass(this.CLASS_PREFIX + '-' + tmp.get('value'));
1205
1206                var icon = document.createElement('span');
1207                icon.className = this.CLASS_PREFIX + '-icon';
1208                tmp.get('element').insertBefore(icon, tmp.get('firstChild'));
1209                if (tmp._button.tagName.toLowerCase() == 'button') {
1210                    tmp.get('element').setAttribute('unselectable', 'on');
1211                    //Replace the Button HTML Element with an a href if it exists
1212                    var a = document.createElement('a');
1213                    a.innerHTML = tmp._button.innerHTML;
1214                    a.href = '#';
1215                    a.tabIndex = '-1';
1216                    Event.on(a, 'click', function(ev) {
1217                        Event.stopEvent(ev);
1218                    });
1219                    tmp._button.parentNode.replaceChild(a, tmp._button);
1220                    tmp._button = a;
1221                }
1222
1223                if (oButton.type == 'select') {
1224                    if (tmp._button.tagName.toLowerCase() == 'select') {
1225                        icon.parentNode.removeChild(icon);
1226                        var iel = tmp._button;
1227                        var parEl = tmp.get('element');
1228                        parEl.parentNode.replaceChild(iel, parEl);
1229                    } else {
1230                        //Don't put a class on it if it's a real select element
1231                        tmp.addClass(this.CLASS_PREFIX + '-select');
1232                    }
1233                }
1234                if (oButton.type == 'spin') {
1235                    if (!Lang.isArray(oButton.range)) {
1236                        oButton.range = [ 10, 100 ];
1237                    }
1238                    this._makeSpinButton(tmp, oButton);
1239                }
1240                tmp.get('element').setAttribute('title', tmp.get('label'));
1241                if (oButton.type != 'spin') {
1242                    if ((YAHOO.widget.Overlay) && (_oButton.menu instanceof YAHOO.widget.Overlay)) {
1243                        var showPicker = function(ev) {
1244                            var exec = true;
1245                            if (ev.keyCode && (ev.keyCode == 9)) {
1246                                exec = false;
1247                            }
1248                            if (exec) {
1249                                if (this._colorPicker) {
1250                                    this._colorPicker._button = oButton.value;
1251                                }
1252                                var menuEL = tmp.getMenu().element;
1253                                if (Dom.getStyle(menuEL, 'visibility') == 'hidden') {
1254                                    tmp.getMenu().show();
1255                                } else {
1256                                    tmp.getMenu().hide();
1257                                }
1258                            }
1259                            YAHOO.util.Event.stopEvent(ev);
1260                        };
1261                        tmp.on('mousedown', showPicker, oButton, this);
1262                        tmp.on('keydown', showPicker, oButton, this);
1263                        
1264                    } else if ((oButton.type != 'menu') && (oButton.type != 'select')) {
1265                        tmp.on('keypress', this._buttonClick, oButton, this);
1266                        tmp.on('mousedown', function(ev) {
1267                            YAHOO.util.Event.stopEvent(ev);
1268                            this._buttonClick(ev, oButton);
1269                        }, oButton, this);
1270                        tmp.on('click', function(ev) {
1271                            YAHOO.util.Event.stopEvent(ev);
1272                        });
1273                    } else {
1274                        //Stop the mousedown event so we can trap the selection in the editor!
1275                        tmp.on('mousedown', function(ev) {
1276                            YAHOO.util.Event.stopEvent(ev);
1277                        });
1278                        tmp.on('click', functi

Large files files are truncated, but you can click here to view the full file