tab.js revision b7d35a3417d982b6fa70eb7eab19f0ae159d88dc
var Lang = Y.Lang,
_queries = Y.TabviewBase._queries,
_classNames = Y.TabviewBase._classNames,
getClassName = Y.ClassNameManager.getClassName;
/**
* Provides Tab instances for use with TabView
* @param config {Object} Object literal specifying tabview configuration properties.
*
* @class Tab
* @constructor
* @extends Widget
* @uses WidgetChild
*/
Y.Tab = Y.Base.create('tab', Y.Widget, [Y.WidgetChild], {
BOUNDING_TEMPLATE: '<li class="' + _classNames.tab + '"></li>',
CONTENT_TEMPLATE: '<a class="' + _classNames.tabLabel + '"></a>',
PANEL_TEMPLATE: '<div class="' + _classNames.tabPanel + '"></div>',
_uiSetSelectedPanel: function(selected) {
this.get('panelNode').toggleClass(_classNames.selectedPanel, selected);
},
_afterTabSelectedChange: function(event) {
this._uiSetSelectedPanel(event.newVal);
},
_afterParentChange: function(e) {
if (!e.newVal) {
this._remove();
} else {
this._add();
}
},
_initAria: function() {
var anchor = this.get('contentBox'),
id = anchor.get('id'),
panel = this.get('panelNode');
if (!id) {
id = Y.guid();
anchor.set('id', id);
}
// Apply the ARIA roles, states and properties to each tab
anchor.set('role', 'tab');
anchor.get('parentNode').set('role', 'presentation');
// Apply the ARIA roles, states and properties to each panel
panel.setAttrs({
role: 'tabpanel',
'aria-labelledby': id
});
},
syncUI: function() {
this.set('label', this.get('label'));
this.set('content', this.get('content'));
this._uiSetSelectedPanel(this.get('selected'));
},
bindUI: function() {
this.after('selectedChange', this._afterTabSelectedChange);
this.after('parentChange', this._afterParentChange);
},
renderUI: function() {
this._renderPanel();
this._initAria();
},
_renderPanel: function() {
this.get('parent').get('panelNode')
.appendChild(this.get('panelNode'));
},
_add: function() {
var parent = this.get('parent').get('contentBox'),
list = parent.get('listNode'),
panel = parent.get('panelNode');
if (list) {
list.appendChild(this.get('boundingBox'));
}
if (panel) {
panel.appendChild(this.get('panelNode'));
}
},
_remove: function() {
this.get('boundingBox').remove();
this.get('panelNode').remove();
},
_onActivate: function(e) {
if (e.target === this) {
// Prevent the browser from navigating to the URL specified by the
// anchor's href attribute.
e.domEvent.preventDefault();
e.target.set('selected', 1);
}
},
initializer: function() {
this.publish(this.get('triggerEvent'), {
defaultFn: this._onActivate
});
},
_defLabelSetter: function(label) {
this.get('contentBox').setContent(label);
return label;
},
_defContentSetter: function(content) {
this.get('panelNode').setContent(content);
return content;
},
// find panel by ID mapping from label href
_defPanelNodeValueFn: function() {
var href = this.get('contentBox').get('href') || '',
parent = this.get('parent'),
hashIndex = href.indexOf('#'),
panel;
href = href.substr(hashIndex);
if (href.charAt(0) === '#') { // in-page nav, find by ID
panel = Y.one(href);
if (panel) {
panel.addClass(_classNames.tabPanel);
}
}
// use the one found by id, or else try matching indices
if (!panel && parent) {
panel = parent.get('panelNode')
.get('children').item(this.get('index'));
}
if (!panel) { // create if none found
panel = Y.Node.create(this.PANEL_TEMPLATE);
}
return panel;
}
}, {
ATTRS: {
/**
* @attribute triggerEvent
* @default "click"
* @type String
*/
triggerEvent: {
value: 'click'
},
/**
* @attribute label
* @type String
*/
label: {
setter: '_defLabelSetter',
validator: Lang.isString
},
/**
* @attribute content
* @type String
*/
content: {
setter: '_defContentSetter',
validator: Lang.isString
},
/**
* @attribute panelNode
* @type Y.Node
*/
panelNode: {
setter: function(node) {
node = Y.one(node);
if (node) {
node.addClass(_classNames.tabPanel);
}
return node;
},
valueFn: '_defPanelNodeValueFn'
},
tabIndex: {
value: null,
validator: '_validTabIndex'
}
},
HTML_PARSER: {
selected: function(contentBox) {
var ret = (this.get('boundingBox').hasClass(_classNames.selectedTab)) ?
1 : 0;
return ret;
}
}
});