lib/yui/element/element-beta.js

   1 /*
   2 Copyright (c) 2008, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.5.2
   6 */
   7 /**
   8  * Provides Attribute configurations.
   9  * @namespace YAHOO.util
  10  * @class Attribute
  11  * @constructor
  12  * @param hash {Object} The intial Attribute.
  13  * @param {YAHOO.util.AttributeProvider} The owner of the Attribute instance.
  14  */
  15
  16 YAHOO.util.Attribute = function(hash, owner) {
  17     if (owner) {
  18         this.owner = owner;
  19         this.configure(hash, true);
  20     }
  21 };
  22
  23 YAHOO.util.Attribute.prototype = {
  24         /**
  25      * The name of the attribute.
  26          * @property name
  27          * @type String
  28          */
  29     name: undefined,
  30
  31         /**
  32      * The value of the attribute.
  33          * @property value
  34          * @type String
  35          */
  36     value: null,
  37
  38         /**
  39      * The owner of the attribute.
  40          * @property owner
  41          * @type YAHOO.util.AttributeProvider
  42          */
  43     owner: null,
  44
  45         /**
  46      * Whether or not the attribute is read only.
  47          * @property readOnly
  48          * @type Boolean
  49          */
  50     readOnly: false,
  51
  52         /**
  53      * Whether or not the attribute can only be written once.
  54          * @property writeOnce
  55          * @type Boolean
  56          */
  57     writeOnce: false,
  58
  59         /**
  60      * The attribute's initial configuration.
  61      * @private
  62          * @property _initialConfig
  63          * @type Object
  64          */
  65     _initialConfig: null,
  66
  67         /**
  68      * Whether or not the attribute's value has been set.
  69      * @private
  70          * @property _written
  71          * @type Boolean
  72          */
  73     _written: false,
  74
  75         /**
  76      * The method to use when setting the attribute's value.
  77      * The method recieves the new value as the only argument.
  78          * @property method
  79          * @type Function
  80          */
  81     method: null,
  82
  83         /**
  84      * The validator to use when setting the attribute's value.
  85          * @property validator
  86          * @type Function
  87      * @return Boolean
  88          */
  89     validator: null,
  90
  91     /**
  92      * Retrieves the current value of the attribute.
  93      * @method getValue
  94      * @return {any} The current value of the attribute.
  95      */
  96     getValue: function() {
  97         return this.value;
  98     },
  99
 100     /**
 101      * Sets the value of the attribute and fires beforeChange and change events.
 102      * @method setValue
 103      * @param {Any} value The value to apply to the attribute.
 104      * @param {Boolean} silent If true the change events will not be fired.
 105      * @return {Boolean} Whether or not the value was set.
 106      */
 107     setValue: function(value, silent) {
 108         var beforeRetVal;
 109         var owner = this.owner;
 110         var name = this.name;
 111
 112         var event = {
 113             type: name,
 114             prevValue: this.getValue(),
 115             newValue: value
 116         };
 117
 118         if (this.readOnly || ( this.writeOnce && this._written) ) {
 119             return false; // write not allowed
 120         }
 121
 122         if (this.validator && !this.validator.call(owner, value) ) {
 123             return false; // invalid value
 124         }
 125
 126         if (!silent) {
 127             beforeRetVal = owner.fireBeforeChangeEvent(event);
 128             if (beforeRetVal === false) {
 129                 return false;
 130             }
 131         }
 132
 133         if (this.method) {
 134             this.method.call(owner, value);
 135         }
 136
 137         this.value = value;
 138         this._written = true;
 139
 140         event.type = name;
 141
 142         if (!silent) {
 143             this.owner.fireChangeEvent(event);
 144         }
 145
 146         return true;
 147     },
 148
 149     /**
 150      * Allows for configuring the Attribute's properties.
 151      * @method configure
 152      * @param {Object} map A key-value map of Attribute properties.
 153      * @param {Boolean} init Whether or not this should become the initial config.
 154      */
 155     configure: function(map, init) {
 156         map = map || {};
 157         this._written = false; // reset writeOnce
 158         this._initialConfig = this._initialConfig || {};
 159
 160         for (var key in map) {
 161             if ( key && YAHOO.lang.hasOwnProperty(map, key) ) {
 162                 this[key] = map[key];
 163                 if (init) {
 164                     this._initialConfig[key] = map[key];
 165                 }
 166             }
 167         }
 168     },
 169
 170     /**
 171      * Resets the value to the initial config value.
 172      * @method resetValue
 173      * @return {Boolean} Whether or not the value was set.
 174      */
 175     resetValue: function() {
 176         return this.setValue(this._initialConfig.value);
 177     },
 178
 179     /**
 180      * Resets the attribute config to the initial config state.
 181      * @method resetConfig
 182      */
 183     resetConfig: function() {
 184         this.configure(this._initialConfig);
 185     },
 186
 187     /**
 188      * Resets the value to the current value.
 189      * Useful when values may have gotten out of sync with actual properties.
 190      * @method refresh
 191      * @return {Boolean} Whether or not the value was set.
 192      */
 193     refresh: function(silent) {
 194         this.setValue(this.value, silent);
 195     }
 196 };
 197
 198 (function() {
 199     var Lang = YAHOO.util.Lang;
 200
 201     /*
 202     Copyright (c) 2006, Yahoo! Inc. All rights reserved.
 203     Code licensed under the BSD License:
 204     http://developer.yahoo.net/yui/license.txt
 205     */
 206
 207     /**
 208      * Provides and manages YAHOO.util.Attribute instances
 209      * @namespace YAHOO.util
 210      * @class AttributeProvider
 211      * @uses YAHOO.util.EventProvider
 212      */
 213     YAHOO.util.AttributeProvider = function() {};
 214
 215     YAHOO.util.AttributeProvider.prototype = {
 216
 217         /**
 218          * A key-value map of Attribute configurations
 219          * @property _configs
 220          * @protected (may be used by subclasses and augmentors)
 221          * @private
 222          * @type {Object}
 223          */
 224         _configs: null,
 225         /**
 226          * Returns the current value of the attribute.
 227          * @method get
 228          * @param {String} key The attribute whose value will be returned.
 229          */
 230         get: function(key){
 231             this._configs = this._configs || {};
 232             var config = this._configs[key];
 233
 234             if (!config) {
 235                 return undefined;
 236             }
 237
 238             return config.value;
 239         },
 240
 241         /**
 242          * Sets the value of a config.
 243          * @method set
 244          * @param {String} key The name of the attribute
 245          * @param {Any} value The value to apply to the attribute
 246          * @param {Boolean} silent Whether or not to suppress change events
 247          * @return {Boolean} Whether or not the value was set.
 248          */
 249         set: function(key, value, silent){
 250             this._configs = this._configs || {};
 251             var config = this._configs[key];
 252
 253             if (!config) {
 254                 return false;
 255             }
 256
 257             return config.setValue(value, silent);
 258         },
 259
 260         /**
 261          * Returns an array of attribute names.
 262          * @method getAttributeKeys
 263          * @return {Array} An array of attribute names.
 264          */
 265         getAttributeKeys: function(){
 266             this._configs = this._configs;
 267             var keys = [];
 268             var config;
 269             for (var key in this._configs) {
 270                 config = this._configs[key];
 271                 if ( Lang.hasOwnProperty(this._configs, key) &&
 272                         !Lang.isUndefined(config) ) {
 273                     keys[keys.length] = key;
 274                 }
 275             }
 276
 277             return keys;
 278         },
 279
 280         /**
 281          * Sets multiple attribute values.
 282          * @method setAttributes
 283          * @param {Object} map  A key-value map of attributes
 284          * @param {Boolean} silent Whether or not to suppress change events
 285          */
 286         setAttributes: function(map, silent){
 287             for (var key in map) {
 288                 if ( Lang.hasOwnProperty(map, key) ) {
 289                     this.set(key, map[key], silent);
 290                 }
 291             }
 292         },
 293
 294         /**
 295          * Resets the specified attribute's value to its initial value.
 296          * @method resetValue
 297          * @param {String} key The name of the attribute
 298          * @param {Boolean} silent Whether or not to suppress change events
 299          * @return {Boolean} Whether or not the value was set
 300          */
 301         resetValue: function(key, silent){
 302             this._configs = this._configs || {};
 303             if (this._configs[key]) {
 304                 this.set(key, this._configs[key]._initialConfig.value, silent);
 305                 return true;
 306             }
 307             return false;
 308         },
 309
 310         /**
 311          * Sets the attribute's value to its current value.
 312          * @method refresh
 313          * @param {String | Array} key The attribute(s) to refresh
 314          * @param {Boolean} silent Whether or not to suppress change events
 315          */
 316         refresh: function(key, silent){
 317             this._configs = this._configs;
 318
 319             key = ( ( Lang.isString(key) ) ? [key] : key ) ||
 320                     this.getAttributeKeys();
 321
 322             for (var i = 0, len = key.length; i < len; ++i) {
 323                 if ( // only set if there is a value and not null
 324                     this._configs[key[i]] &&
 325                     ! Lang.isUndefined(this._configs[key[i]].value) &&
 326                     ! Lang.isNull(this._configs[key[i]].value) ) {
 327                     this._configs[key[i]].refresh(silent);
 328                 }
 329             }
 330         },
 331
 332         /**
 333          * Adds an Attribute to the AttributeProvider instance.
 334          * @method register
 335          * @param {String} key The attribute's name
 336          * @param {Object} map A key-value map containing the
 337          * attribute's properties.
 338          * @deprecated Use setAttributeConfig
 339          */
 340         register: function(key, map) {
 341             this.setAttributeConfig(key, map);
 342         },
 343
 344
 345         /**
 346          * Returns the attribute's properties.
 347          * @method getAttributeConfig
 348          * @param {String} key The attribute's name
 349          * @private
 350          * @return {object} A key-value map containing all of the
 351          * attribute's properties.
 352          */
 353         getAttributeConfig: function(key) {
 354             this._configs = this._configs || {};
 355             var config = this._configs[key] || {};
 356             var map = {}; // returning a copy to prevent overrides
 357
 358             for (key in config) {
 359                 if ( Lang.hasOwnProperty(config, key) ) {
 360                     map[key] = config[key];
 361                 }
 362             }
 363
 364             return map;
 365         },
 366
 367         /**
 368          * Sets or updates an Attribute instance's properties.
 369          * @method setAttributeConfig
 370          * @param {String} key The attribute's name.
 371          * @param {Object} map A key-value map of attribute properties
 372          * @param {Boolean} init Whether or not this should become the intial config.
 373          */
 374         setAttributeConfig: function(key, map, init) {
 375             this._configs = this._configs || {};
 376             map = map || {};
 377             if (!this._configs[key]) {
 378                 map.name = key;
 379                 this._configs[key] = this.createAttribute(map);
 380             } else {
 381                 this._configs[key].configure(map, init);
 382             }
 383         },
 384
 385         /**
 386          * Sets or updates an Attribute instance's properties.
 387          * @method configureAttribute
 388          * @param {String} key The attribute's name.
 389          * @param {Object} map A key-value map of attribute properties
 390          * @param {Boolean} init Whether or not this should become the intial config.
 391          * @deprecated Use setAttributeConfig
 392          */
 393         configureAttribute: function(key, map, init) {
 394             this.setAttributeConfig(key, map, init);
 395         },
 396
 397         /**
 398          * Resets an attribute to its intial configuration.
 399          * @method resetAttributeConfig
 400          * @param {String} key The attribute's name.
 401          * @private
 402          */
 403         resetAttributeConfig: function(key){
 404             this._configs = this._configs || {};
 405             this._configs[key].resetConfig();
 406         },
 407
 408         // wrapper for EventProvider.subscribe
 409         // to create events on the fly
 410         subscribe: function(type, callback) {
 411             this._events = this._events || {};
 412
 413             if ( !(type in this._events) ) {
 414                 this._events[type] = this.createEvent(type);
 415             }
 416
 417             YAHOO.util.EventProvider.prototype.subscribe.apply(this, arguments);
 418         },
 419
 420         on: function() {
 421             this.subscribe.apply(this, arguments);
 422         },
 423
 424         addListener: function() {
 425             this.subscribe.apply(this, arguments);
 426         },
 427
 428         /**
 429          * Fires the attribute's beforeChange event.
 430          * @method fireBeforeChangeEvent
 431          * @param {String} key The attribute's name.
 432          * @param {Obj} e The event object to pass to handlers.
 433          */
 434         fireBeforeChangeEvent: function(e) {
 435             var type = 'before';
 436             type += e.type.charAt(0).toUpperCase() + e.type.substr(1) + 'Change';
 437             e.type = type;
 438             return this.fireEvent(e.type, e);
 439         },
 440
 441         /**
 442          * Fires the attribute's change event.
 443          * @method fireChangeEvent
 444          * @param {String} key The attribute's name.
 445          * @param {Obj} e The event object to pass to the handlers.
 446          */
 447         fireChangeEvent: function(e) {
 448             e.type += 'Change';
 449             return this.fireEvent(e.type, e);
 450         },
 451
 452         createAttribute: function(map) {
 453             return new YAHOO.util.Attribute(map, this);
 454         }
 455     };
 456
 457     YAHOO.augment(YAHOO.util.AttributeProvider, YAHOO.util.EventProvider);
 458 })();
 459
 460 (function() {
 461 // internal shorthand
 462 var Dom = YAHOO.util.Dom,
 463     AttributeProvider = YAHOO.util.AttributeProvider;
 464
 465 /**
 466  * Element provides an wrapper object to simplify adding
 467  * event listeners, using dom methods, and managing attributes.
 468  * @module element
 469  * @namespace YAHOO.util
 470  * @requires yahoo, dom, event
 471  * @beta
 472  */
 473
 474 /**
 475  * Element provides an wrapper object to simplify adding
 476  * event listeners, using dom methods, and managing attributes.
 477  * @class Element
 478  * @uses YAHOO.util.AttributeProvider
 479  * @constructor
 480  * @param el {HTMLElement | String} The html element that
 481  * represents the Element.
 482  * @param {Object} map A key-value map of initial config names and values
 483  */
 484 YAHOO.util.Element = function(el, map) {
 485     if (arguments.length) {
 486         this.init(el, map);
 487     }
 488 };
 489
 490 YAHOO.util.Element.prototype = {
 491     /**
 492      * Dom events supported by the Element instance.
 493      * @property DOM_EVENTS
 494      * @type Object
 495      */
 496     DOM_EVENTS: null,
 497
 498     /**
 499      * Wrapper for HTMLElement method.
 500      * @method appendChild
 501      * @param {YAHOO.util.Element || HTMLElement} child The element to append.
 502      */
 503     appendChild: function(child) {
 504         child = child.get ? child.get('element') : child;
 505         this.get('element').appendChild(child);
 506     },
 507
 508     /**
 509      * Wrapper for HTMLElement method.
 510      * @method getElementsByTagName
 511      * @param {String} tag The tagName to collect
 512      */
 513     getElementsByTagName: function(tag) {
 514         return this.get('element').getElementsByTagName(tag);
 515     },
 516
 517     /**
 518      * Wrapper for HTMLElement method.
 519      * @method hasChildNodes
 520      * @return {Boolean} Whether or not the element has childNodes
 521      */
 522     hasChildNodes: function() {
 523         return this.get('element').hasChildNodes();
 524     },
 525
 526     /**
 527      * Wrapper for HTMLElement method.
 528      * @method insertBefore
 529      * @param {HTMLElement} element The HTMLElement to insert
 530      * @param {HTMLElement} before The HTMLElement to insert
 531      * the element before.
 532      */
 533     insertBefore: function(element, before) {
 534         element = element.get ? element.get('element') : element;
 535         before = (before && before.get) ? before.get('element') : before;
 536
 537         this.get('element').insertBefore(element, before);
 538     },
 539
 540     /**
 541      * Wrapper for HTMLElement method.
 542      * @method removeChild
 543      * @param {HTMLElement} child The HTMLElement to remove
 544      */
 545     removeChild: function(child) {
 546         child = child.get ? child.get('element') : child;
 547         this.get('element').removeChild(child);
 548         return true;
 549     },
 550
 551     /**
 552      * Wrapper for HTMLElement method.
 553      * @method replaceChild
 554      * @param {HTMLElement} newNode The HTMLElement to insert
 555      * @param {HTMLElement} oldNode The HTMLElement to replace
 556      */
 557     replaceChild: function(newNode, oldNode) {
 558         newNode = newNode.get ? newNode.get('element') : newNode;
 559         oldNode = oldNode.get ? oldNode.get('element') : oldNode;
 560         return this.get('element').replaceChild(newNode, oldNode);
 561     },
 562
 563
 564     /**
 565      * Registers Element specific attributes.
 566      * @method initAttributes
 567      * @param {Object} map A key-value map of initial attribute configs
 568      */
 569     initAttributes: function(map) {
 570     },
 571
 572     /**
 573      * Adds a listener for the given event.  These may be DOM or
 574      * customEvent listeners.  Any event that is fired via fireEvent
 575      * can be listened for.  All handlers receive an event object.
 576      * @method addListener
 577      * @param {String} type The name of the event to listen for
 578      * @param {Function} fn The handler to call when the event fires
 579      * @param {Any} obj A variable to pass to the handler
 580      * @param {Object} scope The object to use for the scope of the handler
 581      */
 582     addListener: function(type, fn, obj, scope) {
 583         var el = this.get('element');
 584         scope = scope || this;
 585
 586         el = this.get('id') || el;
 587         var self = this;
 588         if (!this._events[type]) { // create on the fly
 589             if ( this.DOM_EVENTS[type] ) {
 590                 YAHOO.util.Event.addListener(el, type, function(e) {
 591                     if (e.srcElement && !e.target) { // supplement IE with target
 592                         e.target = e.srcElement;
 593                     }
 594                     self.fireEvent(type, e);
 595                 }, obj, scope);
 596             }
 597
 598             this.createEvent(type, this);
 599         }
 600
 601         YAHOO.util.EventProvider.prototype.subscribe.apply(this, arguments); // notify via customEvent
 602     },
 603
 604
 605     /**
 606      * Alias for addListener
 607      * @method on
 608      * @param {String} type The name of the event to listen for
 609      * @param {Function} fn The function call when the event fires
 610      * @param {Any} obj A variable to pass to the handler
 611      * @param {Object} scope The object to use for the scope of the handler
 612      */
 613     on: function() { this.addListener.apply(this, arguments); },
 614
 615     /**
 616      * Alias for addListener
 617      * @method subscribe
 618      * @param {String} type The name of the event to listen for
 619      * @param {Function} fn The function call when the event fires
 620      * @param {Any} obj A variable to pass to the handler
 621      * @param {Object} scope The object to use for the scope of the handler
 622      */
 623     subscribe: function() { this.addListener.apply(this, arguments); },
 624
 625     /**
 626      * Remove an event listener
 627      * @method removeListener
 628      * @param {String} type The name of the event to listen for
 629      * @param {Function} fn The function call when the event fires
 630      */
 631     removeListener: function(type, fn) {
 632         this.unsubscribe.apply(this, arguments);
 633     },
 634
 635     /**
 636      * Wrapper for Dom method.
 637      * @method addClass
 638      * @param {String} className The className to add
 639      */
 640     addClass: function(className) {
 641         Dom.addClass(this.get('element'), className);
 642     },
 643
 644     /**
 645      * Wrapper for Dom method.
 646      * @method getElementsByClassName
 647      * @param {String} className The className to collect
 648      * @param {String} tag (optional) The tag to use in
 649      * conjunction with class name
 650      * @return {Array} Array of HTMLElements
 651      */
 652     getElementsByClassName: function(className, tag) {
 653         return Dom.getElementsByClassName(className, tag,
 654                 this.get('element') );
 655     },
 656
 657     /**
 658      * Wrapper for Dom method.
 659      * @method hasClass
 660      * @param {String} className The className to add
 661      * @return {Boolean} Whether or not the element has the class name
 662      */
 663     hasClass: function(className) {
 664         return Dom.hasClass(this.get('element'), className);
 665     },
 666
 667     /**
 668      * Wrapper for Dom method.
 669      * @method removeClass
 670      * @param {String} className The className to remove
 671      */
 672     removeClass: function(className) {
 673         return Dom.removeClass(this.get('element'), className);
 674     },
 675
 676     /**
 677      * Wrapper for Dom method.
 678      * @method replaceClass
 679      * @param {String} oldClassName The className to replace
 680      * @param {String} newClassName The className to add
 681      */
 682     replaceClass: function(oldClassName, newClassName) {
 683         return Dom.replaceClass(this.get('element'),
 684                 oldClassName, newClassName);
 685     },
 686
 687     /**
 688      * Wrapper for Dom method.
 689      * @method setStyle
 690      * @param {String} property The style property to set
 691      * @param {String} value The value to apply to the style property
 692      */
 693     setStyle: function(property, value) {
 694         var el = this.get('element');
 695         if (!el) {
 696             return this._queue[this._queue.length] = ['setStyle', arguments];
 697         }
 698
 699         return Dom.setStyle(el,  property, value); // TODO: always queuing?
 700     },
 701
 702     /**
 703      * Wrapper for Dom method.
 704      * @method getStyle
 705      * @param {String} property The style property to retrieve
 706      * @return {String} The current value of the property
 707      */
 708     getStyle: function(property) {
 709         return Dom.getStyle(this.get('element'),  property);
 710     },
 711
 712     /**
 713      * Apply any queued set calls.
 714      * @method fireQueue
 715      */
 716     fireQueue: function() {
 717         var queue = this._queue;
 718         for (var i = 0, len = queue.length; i < len; ++i) {
 719             this[queue[i][0]].apply(this, queue[i][1]);
 720         }
 721     },
 722
 723     /**
 724      * Appends the HTMLElement into either the supplied parentNode.
 725      * @method appendTo
 726      * @param {HTMLElement | Element} parentNode The node to append to
 727      * @param {HTMLElement | Element} before An optional node to insert before
 728      */
 729     appendTo: function(parent, before) {
 730         parent = (parent.get) ?  parent.get('element') : Dom.get(parent);
 731
 732         this.fireEvent('beforeAppendTo', {
 733             type: 'beforeAppendTo',
 734             target: parent
 735         });
 736
 737
 738         before = (before && before.get) ?
 739                 before.get('element') : Dom.get(before);
 740         var element = this.get('element');
 741
 742         if (!element) {
 743             return false;
 744         }
 745
 746         if (!parent) {
 747             return false;
 748         }
 749
 750         if (element.parent != parent) {
 751             if (before) {
 752                 parent.insertBefore(element, before);
 753             } else {
 754                 parent.appendChild(element);
 755             }
 756         }
 757
 758
 759         this.fireEvent('appendTo', {
 760             type: 'appendTo',
 761             target: parent
 762         });
 763     },
 764
 765     get: function(key) {
 766         var configs = this._configs || {};
 767         var el = configs.element; // avoid loop due to 'element'
 768         if (el && !configs[key] && !YAHOO.lang.isUndefined(el.value[key]) ) {
 769             return el.value[key];
 770         }
 771
 772         return AttributeProvider.prototype.get.call(this, key);
 773     },
 774
 775     setAttributes: function(map, silent){
 776         var el = this.get('element');
 777         for (var key in map) {
 778             // need to configure if setting unconfigured HTMLElement attribute
 779             if ( !this._configs[key] && !YAHOO.lang.isUndefined(el[key]) ) {
 780                 this.setAttributeConfig(key);
 781             }
 782         }
 783
 784         // set based on configOrder
 785         for (var i = 0, len = this._configOrder.length; i < len; ++i) {
 786             if (map[this._configOrder[i]] !== undefined) {
 787                 this.set(this._configOrder[i], map[this._configOrder[i]], silent);
 788             }
 789         }
 790     },
 791
 792     set: function(key, value, silent) {
 793         var el = this.get('element');
 794         if (!el) {
 795             this._queue[this._queue.length] = ['set', arguments];
 796             if (this._configs[key]) {
 797                 this._configs[key].value = value; // so "get" works while queueing
 798
 799             }
 800             return;
 801         }
 802
 803         // set it on the element if not configured and is an HTML attribute
 804         if ( !this._configs[key] && !YAHOO.lang.isUndefined(el[key]) ) {
 805             _registerHTMLAttr.call(this, key);
 806         }
 807
 808         return AttributeProvider.prototype.set.apply(this, arguments);
 809     },
 810
 811     setAttributeConfig: function(key, map, init) {
 812         var el = this.get('element');
 813
 814         if (el && !this._configs[key] && !YAHOO.lang.isUndefined(el[key]) ) {
 815             _registerHTMLAttr.call(this, key, map);
 816         } else {
 817             AttributeProvider.prototype.setAttributeConfig.apply(this, arguments);
 818         }
 819         this._configOrder.push(key);
 820     },
 821
 822     getAttributeKeys: function() {
 823         var el = this.get('element');
 824         var keys = AttributeProvider.prototype.getAttributeKeys.call(this);
 825
 826         //add any unconfigured element keys
 827         for (var key in el) {
 828             if (!this._configs[key]) {
 829                 keys[key] = keys[key] || el[key];
 830             }
 831         }
 832
 833         return keys;
 834     },
 835
 836     createEvent: function(type, scope) {
 837         this._events[type] = true;
 838         AttributeProvider.prototype.createEvent.apply(this, arguments);
 839     },
 840
 841     init: function(el, attr) {
 842         _initElement.apply(this, arguments);
 843     }
 844 };
 845
 846 var _initElement = function(el, attr) {
 847     this._queue = this._queue || [];
 848     this._events = this._events || {};
 849     this._configs = this._configs || {};
 850     this._configOrder = [];
 851     attr = attr || {};
 852     attr.element = attr.element || el || null;
 853
 854     this.DOM_EVENTS = {
 855         'click': true,
 856         'dblclick': true,
 857         'keydown': true,
 858         'keypress': true,
 859         'keyup': true,
 860         'mousedown': true,
 861         'mousemove': true,
 862         'mouseout': true,
 863         'mouseover': true,
 864         'mouseup': true,
 865         'focus': true,
 866         'blur': true,
 867         'submit': true
 868     };
 869
 870     var isReady = false;  // to determine when to init HTMLElement and content
 871
 872     if (YAHOO.lang.isString(el) ) { // defer until available/ready
 873         _registerHTMLAttr.call(this, 'id', { value: attr.element });
 874     }
 875
 876     if (Dom.get(el)) {
 877         isReady = true;
 878         _initHTMLElement.call(this, attr);
 879         _initContent.call(this, attr);
 880     }
 881
 882     YAHOO.util.Event.onAvailable(attr.element, function() {
 883         if (!isReady) { // otherwise already done
 884             _initHTMLElement.call(this, attr);
 885         }
 886
 887         this.fireEvent('available', { type: 'available', target: attr.element });
 888     }, this, true);
 889
 890     YAHOO.util.Event.onContentReady(attr.element, function() {
 891         if (!isReady) { // otherwise already done
 892             _initContent.call(this, attr);
 893         }
 894         this.fireEvent('contentReady', { type: 'contentReady', target: attr.element });
 895     }, this, true);
 896 };
 897
 898 var _initHTMLElement = function(attr) {
 899     /**
 900      * The HTMLElement the Element instance refers to.
 901      * @attribute element
 902      * @type HTMLElement
 903      */
 904     this.setAttributeConfig('element', {
 905         value: Dom.get(attr.element),
 906         readOnly: true
 907      });
 908 };
 909
 910 var _initContent = function(attr) {
 911     this.initAttributes(attr);
 912     this.setAttributes(attr, true);
 913     this.fireQueue();
 914
 915 };
 916
 917 /**
 918  * Sets the value of the property and fires beforeChange and change events.
 919  * @private
 920  * @method _registerHTMLAttr
 921  * @param {YAHOO.util.Element} element The Element instance to
 922  * register the config to.
 923  * @param {String} key The name of the config to register
 924  * @param {Object} map A key-value map of the config's params
 925  */
 926 var _registerHTMLAttr = function(key, map) {
 927     var el = this.get('element');
 928     map = map || {};
 929     map.name = key;
 930     map.method = map.method || function(value) {
 931         el[key] = value;
 932     };
 933     map.value = map.value || el[key];
 934     this._configs[key] = new YAHOO.util.Attribute(map, this);
 935 };
 936
 937 /**
 938  * Fires when the Element's HTMLElement can be retrieved by Id.
 939  * <p>See: <a href="#addListener">Element.addListener</a></p>
 940  * <p><strong>Event fields:</strong><br>
 941  * <code>&lt;String&gt; type</code> available<br>
 942  * <code>&lt;HTMLElement&gt;
 943  * target</code> the HTMLElement bound to this Element instance<br>
 944  * <p><strong>Usage:</strong><br>
 945  * <code>var handler = function(e) {var target = e.target};<br>
 946  * myTabs.addListener('available', handler);</code></p>
 947  * @event available
 948  */
 949
 950 /**
 951  * Fires when the Element's HTMLElement subtree is rendered.
 952  * <p>See: <a href="#addListener">Element.addListener</a></p>
 953  * <p><strong>Event fields:</strong><br>
 954  * <code>&lt;String&gt; type</code> contentReady<br>
 955  * <code>&lt;HTMLElement&gt;
 956  * target</code> the HTMLElement bound to this Element instance<br>
 957  * <p><strong>Usage:</strong><br>
 958  * <code>var handler = function(e) {var target = e.target};<br>
 959  * myTabs.addListener('contentReady', handler);</code></p>
 960  * @event contentReady
 961  */
 962
 963 /**
 964  * Fires before the Element is appended to another Element.
 965  * <p>See: <a href="#addListener">Element.addListener</a></p>
 966  * <p><strong>Event fields:</strong><br>
 967  * <code>&lt;String&gt; type</code> beforeAppendTo<br>
 968  * <code>&lt;HTMLElement/Element&gt;
 969  * target</code> the HTMLElement/Element being appended to
 970  * <p><strong>Usage:</strong><br>
 971  * <code>var handler = function(e) {var target = e.target};<br>
 972  * myTabs.addListener('beforeAppendTo', handler);</code></p>
 973  * @event beforeAppendTo
 974  */
 975
 976 /**
 977  * Fires after the Element is appended to another Element.
 978  * <p>See: <a href="#addListener">Element.addListener</a></p>
 979  * <p><strong>Event fields:</strong><br>
 980  * <code>&lt;String&gt; type</code> appendTo<br>
 981  * <code>&lt;HTMLElement/Element&gt;
 982  * target</code> the HTMLElement/Element being appended to
 983  * <p><strong>Usage:</strong><br>
 984  * <code>var handler = function(e) {var target = e.target};<br>
 985  * myTabs.addListener('appendTo', handler);</code></p>
 986  * @event appendTo
 987  */
 988
 989 YAHOO.augment(YAHOO.util.Element, AttributeProvider);
 990 })();
 991
 992 YAHOO.register("element", YAHOO.util.Element, {version: "2.5.2", build: "1076"});