| 1 |
efrain |
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 |
}, '3.18.1', {"requires": ["node-event-delegate", "classnamemanager"]});
|