Your IP : 192.168.165.1
/*
YUI 3.17.2 (build 9c3c78e)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
YUI.add('tabview', function (Y, NAME) {
/**
* The TabView module
*
* @module tabview
*/
var DOT = '.',
/**
* Provides a tabbed widget interface
* @param config {Object} Object literal specifying tabview configuration properties.
*
* @class TabView
* @constructor
* @extends Widget
* @uses WidgetParent
*/
TabView = Y.Base.create('tabView', Y.Widget, [Y.WidgetParent], {
_afterChildAdded: function() {
this.get('contentBox').focusManager.refresh();
},
_defListNodeValueFn: function() {
var node = Y.Node.create(this.LIST_TEMPLATE);
node.addClass(Y.TabviewBase._classNames.tabviewList);
return node;
},
_defPanelNodeValueFn: function() {
var node = Y.Node.create(this.PANEL_TEMPLATE);
node.addClass(Y.TabviewBase._classNames.tabviewPanel);
return node;
},
_afterChildRemoved: function(e) { // update the selected tab when removed
var i = e.index,
selection = this.get('selection');
if (!selection) { // select previous item if selection removed
selection = this.item(i - 1) || this.item(0);
if (selection) {
selection.set('selected', 1);
}
}
this.get('contentBox').focusManager.refresh();
},
_initAria: function(contentBox) {
var tablist = contentBox.one(Y.TabviewBase._queries.tabviewList);
if (tablist) {
tablist.setAttrs({
//'aria-labelledby':
role: 'tablist'
});
}
},
bindUI: function() {
// Use the Node Focus Manager to add keyboard support:
// Pressing the left and right arrow keys will move focus
// among each of the tabs.
this.get('contentBox').plug(Y.Plugin.NodeFocusManager, {
descendants: DOT + Y.TabviewBase._classNames.tabLabel,
keys: { next: 'down:39', // Right arrow
previous: 'down:37' }, // Left arrow
circular: true
});
this.after('render', this._setDefSelection);
this.after('addChild', this._afterChildAdded);
this.after('removeChild', this._afterChildRemoved);
},
renderUI: function() {
var contentBox = this.get('contentBox');
this._renderListBox(contentBox);
this._renderPanelBox(contentBox);
this._childrenContainer = this.get('listNode');
this._renderTabs(contentBox);
this._initAria(contentBox);
},
_setDefSelection: function() {
// If no tab is selected, select the first tab.
var selection = this.get('selection') || this.item(0);
this.some(function(tab) {
if (tab.get('selected')) {
selection = tab;
return true;
}
});
if (selection) {
// TODO: why both needed? (via widgetParent/Child)?
this.set('selection', selection);
selection.set('selected', 1);
}
},
_renderListBox: function(contentBox) {
var node = this.get('listNode');
if (!node.inDoc()) {
contentBox.append(node);
}
},
_renderPanelBox: function(contentBox) {
var node = this.get('panelNode');
if (!node.inDoc()) {
contentBox.append(node);
}
},
_renderTabs: function(contentBox) {
var _classNames = Y.TabviewBase._classNames,
_queries = Y.TabviewBase._queries,
tabs = contentBox.all(_queries.tab),
panelNode = this.get('panelNode'),
panels = (panelNode) ? this.get('panelNode').get('children') : null,
tabview = this;
if (tabs) { // add classNames and fill in Tab fields from markup when possible
tabs.addClass(_classNames.tab);
contentBox.all(_queries.tabLabel).addClass(_classNames.tabLabel);
contentBox.all(_queries.tabPanel).addClass(_classNames.tabPanel);
tabs.each(function(node, i) {
var panelNode = (panels) ? panels.item(i) : null;
tabview.add({
boundingBox: node,
contentBox: node.one(DOT + _classNames.tabLabel),
panelNode: panelNode
});
});
}
}
}, {
ATTRS: {
defaultChildType: {
value: 'Tab'
},
listNode: {
setter: function(node) {
node = Y.one(node);
if (node) {
node.addClass(Y.TabviewBase._classNames.tabviewList);
}
return node;
},
valueFn: '_defListNodeValueFn'
},
panelNode: {
setter: function(node) {
node = Y.one(node);
if (node) {
node.addClass(Y.TabviewBase._classNames.tabviewPanel);
}
return node;
},
valueFn: '_defPanelNodeValueFn'
},
tabIndex: {
value: null
//validator: '_validTabIndex'
}
},
HTML_PARSER: {
listNode: function(srcNode) {
return srcNode.one(Y.TabviewBase._queries.tabviewList);
},
panelNode: function(srcNode) {
return srcNode.one(Y.TabviewBase._queries.tabviewPanel);
}
},
// Static for legacy support.
LIST_TEMPLATE: '<ul></ul>',
PANEL_TEMPLATE: '<div></div>'
});
// Map to static values by default.
TabView.prototype.LIST_TEMPLATE = TabView.LIST_TEMPLATE;
TabView.prototype.PANEL_TEMPLATE = TabView.PANEL_TEMPLATE;
Y.TabView = TabView;
/**
* 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></li>',
CONTENT_TEMPLATE: '<a></a>',
PANEL_TEMPLATE: '<div></div>',
_uiSetSelectedPanel: function(selected) {
this.get('panelNode').toggleClass(Y.TabviewBase._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() {
var _classNames = Y.TabviewBase._classNames;
this.get('boundingBox').addClass(_classNames.tab);
this.get('contentBox').addClass(_classNames.tabLabel);
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
});
},
_defLabelGetter: function() {
return this.get('contentBox').getHTML();
},
_defLabelSetter: function(label) {
var labelNode = this.get('contentBox');
if (labelNode.getHTML() !== label) { // Avoid rewriting existing label.
labelNode.setHTML(label);
}
return label;
},
_defContentSetter: function(content) {
var panel = this.get('panelNode');
if (panel.getHTML() !== content) { // Avoid rewriting existing content.
panel.setHTML(content);
}
return content;
},
_defContentGetter: function() {
return this.get('panelNode').getHTML();
},
// find panel by ID mapping from label href
_defPanelNodeValueFn: function() {
var _classNames = Y.TabviewBase._classNames,
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);
panel.addClass(_classNames.tabPanel);
}
return panel;
}
}, {
ATTRS: {
/**
* @attribute triggerEvent
* @default "click"
* @type String
*/
triggerEvent: {
value: 'click'
},
/**
* @attribute label
* @type HTML
*/
label: {
setter: '_defLabelSetter',
getter: '_defLabelGetter'
},
/**
* @attribute content
* @type HTML
*/
content: {
setter: '_defContentSetter',
getter: '_defContentGetter'
},
/**
* @attribute panelNode
* @type Y.Node
*/
panelNode: {
setter: function(node) {
node = Y.one(node);
if (node) {
node.addClass(Y.TabviewBase._classNames.tabPanel);
}
return node;
},
valueFn: '_defPanelNodeValueFn'
},
tabIndex: {
value: null,
validator: '_validTabIndex'
}
},
HTML_PARSER: {
selected: function() {
var ret = (this.get('boundingBox').hasClass(Y.TabviewBase._classNames.selectedTab)) ?
1 : 0;
return ret;
}
}
});
}, '3.17.2', {
"requires": [
"widget",
"widget-parent",
"widget-child",
"tabview-base",
"node-pluginhost",
"node-focusmanager"
],
"skinnable": true
});