[Summary view] [Print] [Text view]

   1  YUI.add('yui2-tabview', function(Y) {
   2      var YAHOO    = Y.YUI2;
   3      /*
   4  Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   5  Code licensed under the BSD License:
   6  http://developer.yahoo.com/yui/license.html
   7  version: 2.9.0
   8  */
   9  (function() {
  10  
  11      /**
  12       * The tabview module provides a widget for managing content bound to tabs.
  13       * @module tabview
  14       * @requires yahoo, dom, event, element
  15       *
  16       */
  17  
  18      var Y = YAHOO.util,
  19          Dom = Y.Dom,
  20          Event = Y.Event,
  21          document = window.document,
  22      
  23          // STRING CONSTANTS
  24          ACTIVE = 'active',
  25          ACTIVE_INDEX = 'activeIndex',
  26          ACTIVE_TAB = 'activeTab',
  27          DISABLED = 'disabled',
  28          CONTENT_EL = 'contentEl',
  29          ELEMENT = 'element',
  30      
  31      /**
  32       * A widget to control tabbed views.
  33       * @namespace YAHOO.widget
  34       * @class TabView
  35       * @extends YAHOO.util.Element
  36       * @constructor
  37       * @param {HTMLElement | String | Object} el(optional) The html 
  38       * element that represents the TabView, or the attribute object to use. 
  39       * An element will be created if none provided.
  40       * @param {Object} attr (optional) A key map of the tabView's 
  41       * initial attributes.  Ignored if first arg is attributes object.
  42       */
  43      TabView = function(el, attr) {
  44          attr = attr || {};
  45          if (arguments.length == 1 && !YAHOO.lang.isString(el) && !el.nodeName) {
  46              attr = el; // treat first arg as attr object
  47              el = attr.element || null;
  48          }
  49          
  50          if (!el && !attr.element) { // create if we dont have one
  51              el = this._createTabViewElement(attr);
  52          }
  53          TabView.superclass.constructor.call(this, el, attr); 
  54      };
  55  
  56      YAHOO.extend(TabView, Y.Element, {
  57          /**
  58           * The className to add when building from scratch. 
  59           * @property CLASSNAME
  60           * @default "navset"
  61           */
  62          CLASSNAME: 'yui-navset',
  63          
  64          /**
  65           * The className of the HTMLElement containing the TabView's tab elements
  66           * to look for when building from existing markup, or to add when building
  67           * from scratch. 
  68           * All childNodes of the tab container are treated as Tabs when building
  69           * from existing markup.
  70           * @property TAB_PARENT_CLASSNAME
  71           * @default "nav"
  72           */
  73          TAB_PARENT_CLASSNAME: 'yui-nav',
  74          
  75          /**
  76           * The className of the HTMLElement containing the TabView's label elements
  77           * to look for when building from existing markup, or to add when building
  78           * from scratch. 
  79           * All childNodes of the content container are treated as content elements when
  80           * building from existing markup.
  81           * @property CONTENT_PARENT_CLASSNAME
  82           * @default "nav-content"
  83           */
  84          CONTENT_PARENT_CLASSNAME: 'yui-content',
  85          
  86          _tabParent: null,
  87          _contentParent: null,
  88          
  89          /**
  90           * Adds a Tab to the TabView instance.  
  91           * If no index is specified, the tab is added to the end of the tab list.
  92           * @method addTab
  93           * @param {YAHOO.widget.Tab} tab A Tab instance to add.
  94           * @param {Integer} index The position to add the tab. 
  95           * @return void
  96           */
  97          addTab: function(tab, index) {
  98              var tabs = this.get('tabs'),
  99                  tabParent = this._tabParent,
 100                  contentParent = this._contentParent,
 101                  tabElement = tab.get(ELEMENT),
 102                  contentEl = tab.get(CONTENT_EL),
 103                  activeIndex = this.get(ACTIVE_INDEX),
 104                  before;
 105  
 106              if (!tabs) { // not ready yet
 107                  this._queue[this._queue.length] = ['addTab', arguments];
 108                  return false;
 109              }
 110              
 111              before = this.getTab(index);
 112              index = (index === undefined) ? tabs.length : index;
 113              
 114              tabs.splice(index, 0, tab);
 115  
 116              if (before) {
 117                  tabParent.insertBefore(tabElement, before.get(ELEMENT));
 118                  if (contentEl) {
 119                      contentParent.appendChild(contentEl);
 120                  }
 121              } else {
 122                  tabParent.appendChild(tabElement);
 123                  if (contentEl) {
 124                      contentParent.appendChild(contentEl);
 125                  }
 126              }
 127  
 128              if ( !tab.get(ACTIVE) ) {
 129                  tab.set('contentVisible', false, true); /* hide if not active */
 130                  if (index <= activeIndex) {
 131                      this.set(ACTIVE_INDEX, activeIndex + 1, true);
 132                  }  
 133              } else {
 134                  this.set(ACTIVE_TAB, tab, true);
 135                  this.set('activeIndex', index, true);
 136              }
 137  
 138              this._initTabEvents(tab);
 139          },
 140  
 141          _initTabEvents: function(tab) {
 142              tab.addListener( tab.get('activationEvent'), tab._onActivate, this, tab);
 143              tab.addListener('activationEventChange', tab._onActivationEventChange, this, tab);
 144          },
 145  
 146          _removeTabEvents: function(tab) {
 147              tab.removeListener(tab.get('activationEvent'), tab._onActivate, this, tab);
 148              tab.removeListener('activationEventChange', tab._onActivationEventChange, this, tab);
 149          },
 150  
 151          /**
 152           * Routes childNode events.
 153           * @method DOMEventHandler
 154           * @param {event} e The Dom event that is being handled.
 155           * @return void
 156           */
 157          DOMEventHandler: function(e) {
 158              var target = Event.getTarget(e),
 159                  tabParent = this._tabParent,
 160                  tabs = this.get('tabs'),
 161                  tab,
 162                  tabEl,
 163                  contentEl;
 164  
 165              
 166              if (Dom.isAncestor(tabParent, target) ) {
 167                  for (var i = 0, len = tabs.length; i < len; i++) {
 168                      tabEl = tabs[i].get(ELEMENT);
 169                      contentEl = tabs[i].get(CONTENT_EL);
 170  
 171                      if ( target == tabEl || Dom.isAncestor(tabEl, target) ) {
 172                          tab = tabs[i];
 173                          break; // note break
 174                      }
 175                  } 
 176                  
 177                  if (tab) {
 178                      tab.fireEvent(e.type, e);
 179                  }
 180              }
 181          },
 182          
 183          /**
 184           * Returns the Tab instance at the specified index.
 185           * @method getTab
 186           * @param {Integer} index The position of the Tab.
 187           * @return YAHOO.widget.Tab
 188           */
 189          getTab: function(index) {
 190              return this.get('tabs')[index];
 191          },
 192          
 193          /**
 194           * Returns the index of given tab.
 195           * @method getTabIndex
 196           * @param {YAHOO.widget.Tab} tab The tab whose index will be returned.
 197           * @return int
 198           */
 199          getTabIndex: function(tab) {
 200              var index = null,
 201                  tabs = this.get('tabs');
 202              for (var i = 0, len = tabs.length; i < len; ++i) {
 203                  if (tab == tabs[i]) {
 204                      index = i;
 205                      break;
 206                  }
 207              }
 208              
 209              return index;
 210          },
 211          
 212          /**
 213           * Removes the specified Tab from the TabView.
 214           * @method removeTab
 215           * @param {YAHOO.widget.Tab} item The Tab instance to be removed.
 216           * @return void
 217           */
 218          removeTab: function(tab) {
 219              var tabCount = this.get('tabs').length,
 220                  activeIndex = this.get(ACTIVE_INDEX),
 221                  index = this.getTabIndex(tab);
 222  
 223              if ( tab === this.get(ACTIVE_TAB) ) { 
 224                  if (tabCount > 1) { // select another tab
 225                      if (index + 1 === tabCount) { // if last, activate previous
 226                          this.set(ACTIVE_INDEX, index - 1);
 227                      } else { // activate next tab
 228                          this.set(ACTIVE_INDEX, index + 1);
 229                      }
 230                  } else { // no more tabs
 231                      this.set(ACTIVE_TAB, null);
 232                  }
 233              } else if (index < activeIndex) {
 234                  this.set(ACTIVE_INDEX, activeIndex - 1, true);
 235              }
 236              
 237              this._removeTabEvents(tab);
 238              this._tabParent.removeChild( tab.get(ELEMENT) );
 239              this._contentParent.removeChild( tab.get(CONTENT_EL) );
 240              this._configs.tabs.value.splice(index, 1);
 241  
 242              tab.fireEvent('remove', { type: 'remove', tabview: this });
 243          },
 244          
 245          /**
 246           * Provides a readable name for the TabView instance.
 247           * @method toString
 248           * @return String
 249           */
 250          toString: function() {
 251              var name = this.get('id') || this.get('tagName');
 252              return "TabView " + name; 
 253          },
 254          
 255          /**
 256           * The transiton to use when switching between tabs.
 257           * @method contentTransition
 258           */
 259          contentTransition: function(newTab, oldTab) {
 260              if (newTab) {
 261                  newTab.set('contentVisible', true);
 262              }
 263              if (oldTab) {
 264                  oldTab.set('contentVisible', false);
 265              }
 266          },
 267          
 268          /**
 269           * setAttributeConfigs TabView specific properties.
 270           * @method initAttributes
 271           * @param {Object} attr Hash of initial attributes
 272           */
 273          initAttributes: function(attr) {
 274              TabView.superclass.initAttributes.call(this, attr);
 275              
 276              if (!attr.orientation) {
 277                  attr.orientation = 'top';
 278              }
 279              
 280              var el = this.get(ELEMENT);
 281  
 282              if (!this.hasClass(this.CLASSNAME)) {
 283                  this.addClass(this.CLASSNAME);        
 284              }
 285              
 286              /**
 287               * The Tabs belonging to the TabView instance.
 288               * @attribute tabs
 289               * @type Array
 290               */
 291              this.setAttributeConfig('tabs', {
 292                  value: [],
 293                  readOnly: true
 294              });
 295  
 296              /**
 297               * The container of the tabView's label elements.
 298               * @property _tabParent
 299               * @private
 300               * @type HTMLElement
 301               */
 302              this._tabParent = 
 303                      this.getElementsByClassName(this.TAB_PARENT_CLASSNAME,
 304                              'ul' )[0] || this._createTabParent();
 305                  
 306              /**
 307               * The container of the tabView's content elements.
 308               * @property _contentParent
 309               * @type HTMLElement
 310               * @private
 311               */
 312              this._contentParent = 
 313                      this.getElementsByClassName(this.CONTENT_PARENT_CLASSNAME,
 314                              'div')[0] ||  this._createContentParent();
 315              
 316              /**
 317               * How the Tabs should be oriented relative to the TabView.
 318               * Valid orientations are "top", "left", "bottom", and "right"
 319               * @attribute orientation
 320               * @type String
 321               * @default "top"
 322               */
 323              this.setAttributeConfig('orientation', {
 324                  value: attr.orientation,
 325                  method: function(value) {
 326                      var current = this.get('orientation');
 327                      this.addClass('yui-navset-' + value);
 328                      
 329                      if (current != value) {
 330                          this.removeClass('yui-navset-' + current);
 331                      }
 332                      
 333                      if (value === 'bottom') {
 334                          this.appendChild(this._tabParent);
 335                      }
 336                  }
 337              });
 338              
 339              /**
 340               * The index of the tab currently active.
 341               * @attribute activeIndex
 342               * @type Int
 343               */
 344              this.setAttributeConfig(ACTIVE_INDEX, {
 345                  value: attr.activeIndex,
 346                  validator: function(value) {
 347                      var ret = true,
 348                          tab;
 349                      if (value) { // cannot activate if disabled
 350                          tab = this.getTab(value);
 351                          if (tab && tab.get(DISABLED)) {
 352                              ret = false;
 353                          }
 354                      }
 355                      return ret;
 356                  }
 357              });
 358              
 359              /**
 360               * The tab currently active.
 361               * @attribute activeTab
 362               * @type YAHOO.widget.Tab
 363               */
 364              this.setAttributeConfig(ACTIVE_TAB, {
 365                  value: attr[ACTIVE_TAB],
 366                  method: function(tab) {
 367                      var activeTab = this.get(ACTIVE_TAB);
 368                      
 369                      if (tab) {
 370                          tab.set(ACTIVE, true);
 371                      }
 372                      
 373                      if (activeTab && activeTab !== tab) {
 374                          activeTab.set(ACTIVE, false);
 375                      }
 376                      
 377                      if (activeTab && tab !== activeTab) { // no transition if only 1
 378                          this.contentTransition(tab, activeTab);
 379                      } else if (tab) {
 380                          tab.set('contentVisible', true);
 381                      }
 382                  },
 383                  validator: function(value) {
 384                      var ret = true;
 385                      if (value && value.get(DISABLED)) { // cannot activate if disabled
 386                          ret = false;
 387                      }
 388                      return ret;
 389                  }
 390              });
 391  
 392              this.on('activeTabChange', this._onActiveTabChange);
 393              this.on('activeIndexChange', this._onActiveIndexChange);
 394  
 395              YAHOO.log('attributes initialized', 'info', 'TabView');
 396              if ( this._tabParent ) {
 397                  this._initTabs();
 398              }
 399              
 400              // Due to delegation we add all DOM_EVENTS to the TabView container
 401              // but IE will leak when unsupported events are added, so remove these
 402              this.DOM_EVENTS.submit = false;
 403              this.DOM_EVENTS.focus = false;
 404              this.DOM_EVENTS.blur = false;
 405              this.DOM_EVENTS.change = false;
 406  
 407              for (var type in this.DOM_EVENTS) {
 408                  if ( YAHOO.lang.hasOwnProperty(this.DOM_EVENTS, type) ) {
 409                      this.addListener.call(this, type, this.DOMEventHandler);
 410                  }
 411              }
 412          },
 413  
 414          /**
 415           * Removes selected state from the given tab if it is the activeTab
 416           * @method deselectTab
 417           * @param {Int} index The tab index to deselect 
 418           */
 419          deselectTab: function(index) {
 420              if (this.getTab(index) === this.get(ACTIVE_TAB)) {
 421                  this.set(ACTIVE_TAB, null);
 422              }
 423          },
 424  
 425          /**
 426           * Makes the tab at the given index the active tab
 427           * @method selectTab
 428           * @param {Int} index The tab index to be made active
 429           */
 430          selectTab: function(index) {
 431              this.set(ACTIVE_TAB, this.getTab(index));
 432          },
 433  
 434          _onActiveTabChange: function(e) {
 435              var activeIndex = this.get(ACTIVE_INDEX),
 436                  newIndex = this.getTabIndex(e.newValue);
 437  
 438              if (activeIndex !== newIndex) {
 439                  if (!(this.set(ACTIVE_INDEX, newIndex)) ) { // NOTE: setting
 440                       // revert if activeIndex update fails (cancelled via beforeChange) 
 441                      this.set(ACTIVE_TAB, e.prevValue);
 442                  }
 443              }
 444          },
 445          
 446          _onActiveIndexChange: function(e) {
 447              // no set if called from ActiveTabChange event
 448              if (e.newValue !== this.getTabIndex(this.get(ACTIVE_TAB))) {
 449                  if (!(this.set(ACTIVE_TAB, this.getTab(e.newValue))) ) { // NOTE: setting
 450                       // revert if activeTab update fails (cancelled via beforeChange) 
 451                      this.set(ACTIVE_INDEX, e.prevValue);
 452                  }
 453              }
 454          },
 455  
 456          /**
 457           * Creates Tab instances from a collection of HTMLElements.
 458           * @method _initTabs
 459           * @private
 460           * @return void
 461           */
 462          _initTabs: function() {
 463              var tabs = Dom.getChildren(this._tabParent),
 464                  contentElements = Dom.getChildren(this._contentParent),
 465                  activeIndex = this.get(ACTIVE_INDEX),
 466                  tab,
 467                  attr,
 468                  active;
 469  
 470              for (var i = 0, len = tabs.length; i < len; ++i) {
 471                  attr = {};
 472                  
 473                  if (contentElements[i]) {
 474                      attr.contentEl = contentElements[i];
 475                  }
 476  
 477                  tab = new YAHOO.widget.Tab(tabs[i], attr);
 478                  this.addTab(tab);
 479                  
 480                  if (tab.hasClass(tab.ACTIVE_CLASSNAME) ) {
 481                      active = tab;
 482                  }
 483              }
 484              if (activeIndex != undefined) { // not null or undefined
 485                  this.set(ACTIVE_TAB, this.getTab(activeIndex));
 486              } else {
 487                  this._configs[ACTIVE_TAB].value = active; // dont invoke method
 488                  this._configs[ACTIVE_INDEX].value = this.getTabIndex(active);
 489              }
 490          },
 491  
 492          _createTabViewElement: function(attr) {
 493              var el = document.createElement('div');
 494  
 495              if ( this.CLASSNAME ) {
 496                  el.className = this.CLASSNAME;
 497              }
 498              
 499              YAHOO.log('TabView Dom created', 'info', 'TabView');
 500              return el;
 501          },
 502  
 503          _createTabParent: function(attr) {
 504              var el = document.createElement('ul');
 505  
 506              if ( this.TAB_PARENT_CLASSNAME ) {
 507                  el.className = this.TAB_PARENT_CLASSNAME;
 508              }
 509              
 510              this.get(ELEMENT).appendChild(el);
 511              
 512              return el;
 513          },
 514          
 515          _createContentParent: function(attr) {
 516              var el = document.createElement('div');
 517  
 518              if ( this.CONTENT_PARENT_CLASSNAME ) {
 519                  el.className = this.CONTENT_PARENT_CLASSNAME;
 520              }
 521              
 522              this.get(ELEMENT).appendChild(el);
 523              
 524              return el;
 525          }
 526      });
 527      
 528      
 529      YAHOO.widget.TabView = TabView;
 530  })();
 531  
 532  (function() {
 533      var Y = YAHOO.util, 
 534          Dom = Y.Dom,
 535          Lang = YAHOO.lang,
 536      
 537  
 538      // STRING CONSTANTS
 539          ACTIVE_TAB = 'activeTab',
 540          LABEL = 'label',
 541          LABEL_EL = 'labelEl',
 542          CONTENT = 'content',
 543          CONTENT_EL = 'contentEl',
 544          ELEMENT = 'element',
 545          CACHE_DATA = 'cacheData',
 546          DATA_SRC = 'dataSrc',
 547          DATA_LOADED = 'dataLoaded',
 548          DATA_TIMEOUT = 'dataTimeout',
 549          LOAD_METHOD = 'loadMethod',
 550          POST_DATA = 'postData',
 551          DISABLED = 'disabled',
 552      
 553      /**
 554       * A representation of a Tab's label and content.
 555       * @namespace YAHOO.widget
 556       * @class Tab
 557       * @extends YAHOO.util.Element
 558       * @constructor
 559       * @param element {HTMLElement | String} (optional) The html element that 
 560       * represents the Tab. An element will be created if none provided.
 561       * @param {Object} properties A key map of initial properties
 562       */
 563      Tab = function(el, attr) {
 564          attr = attr || {};
 565          if (arguments.length == 1 && !Lang.isString(el) && !el.nodeName) {
 566              attr = el;
 567              el = attr.element;
 568          }
 569  
 570          if (!el && !attr.element) {
 571              el = this._createTabElement(attr);
 572          }
 573  
 574          this.loadHandler =  {
 575              success: function(o) {
 576                  this.set(CONTENT, o.responseText);
 577              },
 578              failure: function(o) {
 579              }
 580          };
 581          
 582          Tab.superclass.constructor.call(this, el, attr);
 583          
 584          this.DOM_EVENTS = {}; // delegating to tabView
 585      };
 586  
 587      YAHOO.extend(Tab, YAHOO.util.Element, {
 588          /**
 589           * The default tag name for a Tab's inner element.
 590           * @property LABEL_INNER_TAGNAME
 591           * @type String
 592           * @default "em"
 593           */
 594          LABEL_TAGNAME: 'em',
 595          
 596          /**
 597           * The class name applied to active tabs.
 598           * @property ACTIVE_CLASSNAME
 599           * @type String
 600           * @default "selected"
 601           */
 602          ACTIVE_CLASSNAME: 'selected',
 603          
 604          /**
 605           * The class name applied to active tabs.
 606           * @property HIDDEN_CLASSNAME
 607           * @type String
 608           * @default "yui-hidden"
 609           */
 610          HIDDEN_CLASSNAME: 'yui-hidden',
 611          
 612          /**
 613           * The title applied to active tabs.
 614           * @property ACTIVE_TITLE
 615           * @type String
 616           * @default "active"
 617           */
 618          ACTIVE_TITLE: 'active',
 619  
 620          /**
 621           * The class name applied to disabled tabs.
 622           * @property DISABLED_CLASSNAME
 623           * @type String
 624           * @default "disabled"
 625           */
 626          DISABLED_CLASSNAME: DISABLED,
 627          
 628          /**
 629           * The class name applied to dynamic tabs while loading.
 630           * @property LOADING_CLASSNAME
 631           * @type String
 632           * @default "disabled"
 633           */
 634          LOADING_CLASSNAME: 'loading',
 635  
 636          /**
 637           * Provides a reference to the connection request object when data is
 638           * loaded dynamically.
 639           * @property dataConnection
 640           * @type Object
 641           */
 642          dataConnection: null,
 643          
 644          /**
 645           * Object containing success and failure callbacks for loading data.
 646           * @property loadHandler
 647           * @type object
 648           */
 649          loadHandler: null,
 650  
 651          _loading: false,
 652          
 653          /**
 654           * Provides a readable name for the tab.
 655           * @method toString
 656           * @return String
 657           */
 658          toString: function() {
 659              var el = this.get(ELEMENT),
 660                  id = el.id || el.tagName;
 661              return "Tab " + id; 
 662          },
 663          
 664          /**
 665           * setAttributeConfigs Tab specific properties.
 666           * @method initAttributes
 667           * @param {Object} attr Hash of initial attributes
 668           */
 669          initAttributes: function(attr) {
 670              attr = attr || {};
 671              Tab.superclass.initAttributes.call(this, attr);
 672              
 673              /**
 674               * The event that triggers the tab's activation.
 675               * @attribute activationEvent
 676               * @type String
 677               */
 678              this.setAttributeConfig('activationEvent', {
 679                  value: attr.activationEvent || 'click'
 680              });        
 681  
 682              /**
 683               * The element that contains the tab's label.
 684               * @attribute labelEl
 685               * @type HTMLElement
 686               */
 687              this.setAttributeConfig(LABEL_EL, {
 688                  value: attr[LABEL_EL] || this._getLabelEl(),
 689                  method: function(value) {
 690                      value = Dom.get(value);
 691                      var current = this.get(LABEL_EL);
 692  
 693                      if (current) {
 694                          if (current == value) {
 695                              return false; // already set
 696                          }
 697                          
 698                          current.parentNode.replaceChild(value, current);
 699                          this.set(LABEL, value.innerHTML);
 700                      }
 701                  } 
 702              });
 703  
 704              /**
 705               * The tab's label text (or innerHTML).
 706               * @attribute label
 707               * @type String
 708               */
 709              this.setAttributeConfig(LABEL, {
 710                  value: attr.label || this._getLabel(),
 711                  method: function(value) {
 712                      var labelEl = this.get(LABEL_EL);
 713                      if (!labelEl) { // create if needed
 714                          this.set(LABEL_EL, this._createLabelEl());
 715                      }
 716                      
 717                      labelEl.innerHTML = value;
 718                  }
 719              });
 720              
 721              /**
 722               * The HTMLElement that contains the tab's content.
 723               * @attribute contentEl
 724               * @type HTMLElement
 725               */
 726              this.setAttributeConfig(CONTENT_EL, {
 727                  value: attr[CONTENT_EL] || document.createElement('div'),
 728                  method: function(value) {
 729                      value = Dom.get(value);
 730                      var current = this.get(CONTENT_EL);
 731  
 732                      if (current) {
 733                          if (current === value) {
 734                              return false; // already set
 735                          }
 736                          if (!this.get('selected')) {
 737                              Dom.addClass(value, this.HIDDEN_CLASSNAME);
 738                          }
 739                          current.parentNode.replaceChild(value, current);
 740                          this.set(CONTENT, value.innerHTML);
 741                      }
 742                  }
 743              });
 744              
 745              /**
 746               * The tab's content.
 747               * @attribute content
 748               * @type String
 749               */
 750              this.setAttributeConfig(CONTENT, {
 751                  value: attr[CONTENT] || this.get(CONTENT_EL).innerHTML,
 752                  method: function(value) {
 753                      this.get(CONTENT_EL).innerHTML = value;
 754                  }
 755              });
 756  
 757              /**
 758               * The tab's data source, used for loading content dynamically.
 759               * @attribute dataSrc
 760               * @type String
 761               */
 762              this.setAttributeConfig(DATA_SRC, {
 763                  value: attr.dataSrc
 764              });
 765              
 766              /**
 767               * Whether or not content should be reloaded for every view.
 768               * @attribute cacheData
 769               * @type Boolean
 770               * @default false
 771               */
 772              this.setAttributeConfig(CACHE_DATA, {
 773                  value: attr.cacheData || false,
 774                  validator: Lang.isBoolean
 775              });
 776              
 777              /**
 778               * The method to use for the data request.
 779               * @attribute loadMethod
 780               * @type String
 781               * @default "GET"
 782               */
 783              this.setAttributeConfig(LOAD_METHOD, {
 784                  value: attr.loadMethod || 'GET',
 785                  validator: Lang.isString
 786              });
 787  
 788              /**
 789               * Whether or not any data has been loaded from the server.
 790               * @attribute dataLoaded
 791               * @type Boolean
 792               */        
 793              this.setAttributeConfig(DATA_LOADED, {
 794                  value: false,
 795                  validator: Lang.isBoolean,
 796                  writeOnce: true
 797              });
 798              
 799              /**
 800               * Number if milliseconds before aborting and calling failure handler.
 801               * @attribute dataTimeout
 802               * @type Number
 803               * @default null
 804               */
 805              this.setAttributeConfig(DATA_TIMEOUT, {
 806                  value: attr.dataTimeout || null,
 807                  validator: Lang.isNumber
 808              });
 809              
 810              /**
 811               * Arguments to pass when POST method is used 
 812               * @attribute postData
 813               * @default null
 814               */
 815              this.setAttributeConfig(POST_DATA, {
 816                  value: attr.postData || null
 817              });
 818  
 819              /**
 820               * Whether or not the tab is currently active.
 821               * If a dataSrc is set for the tab, the content will be loaded from
 822               * the given source.
 823               * @attribute active
 824               * @type Boolean
 825               */
 826              this.setAttributeConfig('active', {
 827                  value: attr.active || this.hasClass(this.ACTIVE_CLASSNAME),
 828                  method: function(value) {
 829                      if (value === true) {
 830                          this.addClass(this.ACTIVE_CLASSNAME);
 831                          this.set('title', this.ACTIVE_TITLE);
 832                      } else {
 833                          this.removeClass(this.ACTIVE_CLASSNAME);
 834                          this.set('title', '');
 835                      }
 836                  },
 837                  validator: function(value) {
 838                      return Lang.isBoolean(value) && !this.get(DISABLED) ;
 839                  }
 840              });
 841              
 842              /**
 843               * Whether or not the tab is disabled.
 844               * @attribute disabled
 845               * @type Boolean
 846               */
 847              this.setAttributeConfig(DISABLED, {
 848                  value: attr.disabled || this.hasClass(this.DISABLED_CLASSNAME),
 849                  method: function(value) {
 850                      if (value === true) {
 851                          this.addClass(this.DISABLED_CLASSNAME);
 852                      } else {
 853                          this.removeClass(this.DISABLED_CLASSNAME);
 854                      }
 855                  },
 856                  validator: Lang.isBoolean
 857              });
 858              
 859              /**
 860               * The href of the tab's anchor element.
 861               * @attribute href
 862               * @type String
 863               * @default '#'
 864               */
 865              this.setAttributeConfig('href', {
 866                  value: attr.href ||
 867                          this.getElementsByTagName('a')[0].getAttribute('href', 2) || '#',
 868                  method: function(value) {
 869                      this.getElementsByTagName('a')[0].href = value;
 870                  },
 871                  validator: Lang.isString
 872              });
 873              
 874              /**
 875               * The Whether or not the tab's content is visible.
 876               * @attribute contentVisible
 877               * @type Boolean
 878               * @default false
 879               */
 880              this.setAttributeConfig('contentVisible', {
 881                  value: attr.contentVisible,
 882                  method: function(value) {
 883                      if (value) {
 884                          Dom.removeClass(this.get(CONTENT_EL), this.HIDDEN_CLASSNAME);
 885                          
 886                          if ( this.get(DATA_SRC) ) {
 887                           // load dynamic content unless already loading or loaded and caching
 888                              if ( !this._loading && !(this.get(DATA_LOADED) && this.get(CACHE_DATA)) ) {
 889                                  this._dataConnect();
 890                              }
 891                          }
 892                      } else {
 893                          Dom.addClass(this.get(CONTENT_EL), this.HIDDEN_CLASSNAME);
 894                      }
 895                  },
 896                  validator: Lang.isBoolean
 897              });
 898              YAHOO.log('attributes initialized', 'info', 'Tab');
 899          },
 900          
 901          _dataConnect: function() {
 902              if (!Y.Connect) {
 903                  YAHOO.log('YAHOO.util.Connect dependency not met',
 904                          'error', 'Tab');
 905                  return false;
 906              }
 907  
 908              Dom.addClass(this.get(CONTENT_EL).parentNode, this.LOADING_CLASSNAME);
 909              this._loading = true; 
 910              this.dataConnection = Y.Connect.asyncRequest(
 911                  this.get(LOAD_METHOD),
 912                  this.get(DATA_SRC), 
 913                  {
 914                      success: function(o) {
 915                          YAHOO.log('content loaded successfully', 'info', 'Tab');
 916                          this.loadHandler.success.call(this, o);
 917                          this.set(DATA_LOADED, true);
 918                          this.dataConnection = null;
 919                          Dom.removeClass(this.get(CONTENT_EL).parentNode,
 920                                  this.LOADING_CLASSNAME);
 921                          this._loading = false;
 922                      },
 923                      failure: function(o) {
 924                          YAHOO.log('loading failed: ' + o.statusText, 'error', 'Tab');
 925                          this.loadHandler.failure.call(this, o);
 926                          this.dataConnection = null;
 927                          Dom.removeClass(this.get(CONTENT_EL).parentNode,
 928                                  this.LOADING_CLASSNAME);
 929                          this._loading = false;
 930                      },
 931                      scope: this,
 932                      timeout: this.get(DATA_TIMEOUT)
 933                  },
 934  
 935                  this.get(POST_DATA)
 936              );
 937          },
 938          _createTabElement: function(attr) {
 939              var el = document.createElement('li'),
 940                  a = document.createElement('a'),
 941                  label = attr.label || null,
 942                  labelEl = attr.labelEl || null;
 943              
 944              a.href = attr.href || '#'; // TODO: Use Dom.setAttribute?
 945              el.appendChild(a);
 946              
 947              if (labelEl) { // user supplied labelEl
 948                  if (!label) { // user supplied label
 949                      label = this._getLabel();
 950                  }
 951              } else {
 952                  labelEl = this._createLabelEl();
 953              }
 954              
 955              a.appendChild(labelEl);
 956              
 957              YAHOO.log('creating Tab Dom', 'info', 'Tab');
 958              return el;
 959          },
 960  
 961          _getLabelEl: function() {
 962              return this.getElementsByTagName(this.LABEL_TAGNAME)[0];
 963          },
 964  
 965          _createLabelEl: function() {
 966              var el = document.createElement(this.LABEL_TAGNAME);
 967              return el;
 968          },
 969      
 970          
 971          _getLabel: function() {
 972              var el = this.get(LABEL_EL);
 973                  
 974                  if (!el) {
 975                      return undefined;
 976                  }
 977              
 978              return el.innerHTML;
 979          },
 980  
 981          _onActivate: function(e, tabview) {
 982              var tab = this,
 983                  silent = false;
 984  
 985              Y.Event.preventDefault(e);
 986              if (tab === tabview.get(ACTIVE_TAB)) {
 987                  silent = true; // dont fire activeTabChange if already active
 988              }
 989              tabview.set(ACTIVE_TAB, tab, silent);
 990          },
 991  
 992          _onActivationEventChange: function(e) {
 993              var tab = this;
 994  
 995              if (e.prevValue != e.newValue) {
 996                  tab.removeListener(e.prevValue, tab._onActivate);
 997                  tab.addListener(e.newValue, tab._onActivate, this, tab);
 998              }
 999          }
1000      });
1001      
1002      
1003      /**
1004       * Fires when a tab is removed from the tabview
1005       * @event remove
1006       * @type CustomEvent
1007       * @param {Event} An event object with fields for "type" ("remove")
1008       * and "tabview" (the tabview instance it was removed from) 
1009       */
1010      
1011      YAHOO.widget.Tab = Tab;
1012  })();
1013  
1014  YAHOO.register("tabview", YAHOO.widget.TabView, {version: "2.9.0", build: "2800"});
1015  
1016  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-skin-sam-tabview", "yui2-element"], "optional": ["yui2-connection"]});