1 YUI.add('tabview-base', function (Y, NAME) {

     2 

     3 var getClassName = Y.ClassNameManager.getClassName,

     4     TABVIEW = 'tabview',

     5     TAB = 'tab',

     6     PANEL = 'panel',

     7     SELECTED = 'selected',

     8     EMPTY_OBJ = {},

     9     DOT = '.',

    10 

    11     TabviewBase = function() {

    12         this.init.apply(this, arguments);

    13     };

    14 

    15 TabviewBase.NAME = 'tabviewBase';

    16 TabviewBase._classNames = {

    17     tabview: getClassName(TABVIEW),

    18     tabviewPanel: getClassName(TABVIEW, PANEL),

    19     tabviewList: getClassName(TABVIEW, 'list'),

    20     tab: getClassName(TAB),

    21     tabLabel: getClassName(TAB, 'label'),

    22     tabPanel: getClassName(TAB, PANEL),

    23     selectedTab: getClassName(TAB, SELECTED),

    24     selectedPanel: getClassName(TAB, PANEL, SELECTED)

    25 };

    26 TabviewBase._queries = {

    27     tabview: DOT + TabviewBase._classNames.tabview,

    28     tabviewList: '> ul',

    29     tab: '> ul > li',

    30     tabLabel: '> ul > li > a',

    31     tabviewPanel: '> div',

    32     tabPanel: '> div > div',

    33     selectedTab: '> ul > ' + DOT + TabviewBase._classNames.selectedTab,

    34     selectedPanel: '> div ' + DOT + TabviewBase._classNames.selectedPanel

    35 };

    36 

    37 Y.mix(TabviewBase.prototype, {

    38     init: function(config) {

    39         config = config || EMPTY_OBJ;

    40         this._node = config.host || Y.one(config.node);

    41 

    42         this.refresh();

    43     },

    44 

    45     initClassNames: function(index) {

    46         var _classNames = Y.TabviewBase._classNames;

    47 

    48         Y.Object.each(Y.TabviewBase._queries, function(query, name) {

    49             // this === tabview._node

    50             if (_classNames[name]) {

    51                 var result = this.all(query);

    52 

    53                 if (index !== undefined) {

    54                     result = result.item(index);

    55                 }

    56 

    57                 if (result) {

    58                     result.addClass(_classNames[name]);

    59                 }

    60             }

    61         }, this._node);

    62 

    63         this._node.addClass(_classNames.tabview);

    64     },

    65 

    66     _select: function(index) {

    67         var _classNames = Y.TabviewBase._classNames,

    68             _queries = Y.TabviewBase._queries,

    69             node = this._node,

    70             oldItem = node.one(_queries.selectedTab),

    71             oldContent = node.one(_queries.selectedPanel),

    72             newItem = node.all(_queries.tab).item(index),

    73             newContent = node.all(_queries.tabPanel).item(index);

    74 

    75         if (oldItem) {

    76             oldItem.removeClass(_classNames.selectedTab);

    77         }

    78 

    79         if (oldContent) {

    80             oldContent.removeClass(_classNames.selectedPanel);

    81         }

    82 

    83         if (newItem) {

    84             newItem.addClass(_classNames.selectedTab);

    85         }

    86 

    87         if (newContent) {

    88             newContent.addClass(_classNames.selectedPanel);

    89         }

    90     },

    91 

    92     initState: function() {

    93         var _queries = Y.TabviewBase._queries,

    94             node = this._node,

    95             activeNode = node.one(_queries.selectedTab),

    96             activeIndex = activeNode ?

    97                     node.all(_queries.tab).indexOf(activeNode) : 0;

    98 

    99         this._select(activeIndex);

   100     },

   101 

   102     // collapse extra space between list-items

   103     _scrubTextNodes: function() {

   104         this._node.one(Y.TabviewBase._queries.tabviewList).get('childNodes').each(function(node) {

   105             if (node.get('nodeType') === 3) { // text node

   106                 node.remove();

   107             }

   108         });

   109     },

   110 

   111     // base renderer only enlivens existing markup

   112     refresh: function() {

   113         this._scrubTextNodes();

   114         this.initClassNames();

   115         this.initState();

   116         this.initEvents();

   117     },

   118 

   119     tabEventName: 'click',

   120 

   121     initEvents: function() {

   122         // TODO: detach prefix for delegate?

   123         // this._node.delegate('tabview|' + this.tabEventName),

   124         this._node.delegate(this.tabEventName,

   125             this.onTabEvent,

   126             Y.TabviewBase._queries.tab,

   127             this

   128         );

   129     },

   130 

   131     onTabEvent: function(e) {

   132         e.preventDefault();

   133         this._select(this._node.all(Y.TabviewBase._queries.tab).indexOf(e.currentTarget));

   134     },

   135 

   136     destroy: function() {

   137         this._node.detach(this.tabEventName);

   138     }

   139 });

   140 

   141 Y.TabviewBase = TabviewBase;

   142 

   143 

   144 }, '@VERSION@', {"requires": ["node-event-delegate", "classnamemanager"]});