3 Copyright 2012 Yahoo! Inc. All rights reserved.
4 Licensed under the BSD License.
5 http://yuilibrary.com/license/
7 YUI.add('tabview-base', function(Y) {
9 var getClassName = Y.ClassNameManager.getClassName,
14 SELECTED = 'selected',
19 tabview: getClassName(TABVIEW),
20 tabviewPanel: getClassName(TABVIEW, PANEL),
21 tabviewList: getClassName(TABVIEW, 'list'),
22 tab: getClassName(TAB),
23 tabLabel: getClassName(TAB, 'label'),
24 tabPanel: getClassName(TAB, PANEL),
25 selectedTab: getClassName(TAB, SELECTED),
26 selectedPanel: getClassName(TAB, PANEL, SELECTED)
30 tabview: DOT + _classNames.tabview,
33 tabLabel: '> ul > li > a ',
34 tabviewPanel: '> div',
35 tabPanel: '> div > div',
36 selectedTab: '> ul > ' + DOT + _classNames.selectedTab,
37 selectedPanel: '> div ' + DOT + _classNames.selectedPanel
40 TabviewBase = function(config) {
41 this.init.apply(this, arguments);
44 TabviewBase.NAME = 'tabviewBase';
45 TabviewBase._queries = _queries;
46 TabviewBase._classNames = _classNames;
48 Y.mix(TabviewBase.prototype, {
49 init: function(config) {
50 config = config || EMPTY_OBJ;
51 this._node = config.host || Y.one(config.node);
56 initClassNames: function(index) {
57 Y.Object.each(_queries, function(query, name) {
58 // this === tabview._node
59 if (_classNames[name]) {
60 var result = this.all(query);
62 if (index !== undefined) {
63 result = result.item(index);
67 result.addClass(_classNames[name]);
72 this._node.addClass(_classNames.tabview);
75 _select: function(index) {
76 var node = this._node,
77 oldItem = node.one(_queries.selectedTab),
78 oldContent = node.one(_queries.selectedPanel),
79 newItem = node.all(_queries.tab).item(index),
80 newContent = node.all(_queries.tabPanel).item(index);
83 oldItem.removeClass(_classNames.selectedTab);
87 oldContent.removeClass(_classNames.selectedPanel);
91 newItem.addClass(_classNames.selectedTab);
95 newContent.addClass(_classNames.selectedPanel);
99 initState: function() {
100 var node = this._node,
101 activeNode = node.one(_queries.selectedTab),
102 activeIndex = activeNode ?
103 node.all(_queries.tab).indexOf(activeNode) : 0;
105 this._select(activeIndex);
108 // collapse extra space between list-items
109 _scrubTextNodes: function() {
110 this._node.one(_queries.tabviewList).get('childNodes').each(function(node) {
111 if (node.get('nodeType') === 3) { // text node
117 // base renderer only enlivens existing markup
118 refresh: function() {
119 this._scrubTextNodes();
120 this.initClassNames();
125 tabEventName: 'click',
127 initEvents: function() {
128 // TODO: detach prefix for delegate?
129 // this._node.delegate('tabview|' + this.tabEventName),
130 this._node.delegate(this.tabEventName,
137 onTabEvent: function(e) {
139 this._select(this._node.all(_queries.tab).indexOf(e.currentTarget));
142 destroy: function() {
143 this._node.detach(this.tabEventName);
147 Y.TabviewBase = TabviewBase;
150 }, '3.5.1' ,{requires:['node-event-delegate', 'classnamemanager', 'skin-sam-tabview']});