File: tabview/js/tabview.js

            /**
             * 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;