jssource/src_files/include/javascript/yui3/build/tabview/tabview-base.js

   1 /*
   2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 3.3.0
   6 build: 3167
   7 */
   8 YUI.add('tabview-base', function(Y) {
   9
  10 var getClassName = Y.ClassNameManager.getClassName,
  11     TABVIEW = 'tabview',
  12     TAB = 'tab',
  13     CONTENT = 'content',
  14     PANEL = 'panel',
  15     SELECTED = 'selected',
  16     EMPTY_OBJ = {},
  17     DOT = '.',
  18
  19     _classNames = {
  20         tabview: getClassName(TABVIEW),
  21         tabviewPanel: getClassName(TABVIEW, PANEL),
  22         tabviewList: getClassName(TABVIEW, 'list'),
  23         tab: getClassName(TAB),
  24         tabLabel: getClassName(TAB, 'label'),
  25         tabPanel: getClassName(TAB, PANEL),
  26         selectedTab: getClassName(TAB, SELECTED),
  27         selectedPanel: getClassName(TAB, PANEL, SELECTED)
  28     },
  29
  30     _queries = {
  31         tabview: DOT + _classNames.tabview,
  32         tabviewList: '> ul',
  33         tab: '> ul > li',
  34         tabLabel: '> ul > li > a ',
  35         tabviewPanel: '> div',
  36         tabPanel: '> div > div',
  37         selectedTab: '> ul > ' + DOT + _classNames.selectedTab,
  38         selectedPanel: '> div ' + DOT + _classNames.selectedPanel
  39     },
  40
  41     TabviewBase = function(config) {
  42         this.init.apply(this, arguments);
  43     };
  44
  45 TabviewBase.NAME = 'tabviewBase';
  46 TabviewBase._queries = _queries;
  47 TabviewBase._classNames = _classNames;
  48
  49 Y.mix(TabviewBase.prototype, {
  50     init: function(config) {
  51         config = config || EMPTY_OBJ;
  52         this._node = config.host || Y.one(config.node);
  53
  54         this.refresh();
  55     },
  56
  57     initClassNames: function(index) {
  58         Y.Object.each(_queries, function(query, name) {
  59             // this === tabview._node
  60             if (_classNames[name]) {
  61                 var result = this.all(query);
  62
  63                 if (index !== undefined) {
  64                     result = result.item(index);
  65                 }
  66
  67                 if (result) {
  68                     result.addClass(_classNames[name]);
  69                 }
  70             }
  71         }, this._node);
  72
  73         this._node.addClass(_classNames.tabview);
  74     },
  75
  76     _select: function(index) {
  77         var node = this._node,
  78             oldItem = node.one(_queries.selectedTab),
  79             oldContent = node.one(_queries.selectedPanel),
  80             newItem = node.all(_queries.tab).item(index),
  81             newContent = node.all(_queries.tabPanel).item(index);
  82
  83         if (oldItem) {
  84             oldItem.removeClass(_classNames.selectedTab);
  85         }
  86
  87         if (oldContent) {
  88             oldContent.removeClass(_classNames.selectedPanel);
  89         }
  90
  91         if (newItem) {
  92             newItem.addClass(_classNames.selectedTab);
  93         }
  94
  95         if (newContent) {
  96             newContent.addClass(_classNames.selectedPanel);
  97         }
  98     },
  99
 100     initState: function() {
 101         var node = this._node,
 102             activeNode = node.one(_queries.selectedTab),
 103             activeIndex = activeNode ?
 104                     node.all(_queries.tab).indexOf(activeNode) : 0;
 105
 106         this._select(activeIndex);
 107     },
 108
 109     // collapse extra space between list-items
 110     _scrubTextNodes: function() {
 111         this._node.one(_queries.tabviewList).get('childNodes').each(function(node) {
 112             if (node.get('nodeType') === 3) { // text node
 113                 node.remove();
 114             }
 115         });
 116     },
 117
 118     // base renderer only enlivens existing markup
 119     refresh: function() {
 120         this._scrubTextNodes();
 121         this.initClassNames();
 122         this.initState();
 123         this.initEvents();
 124     },
 125
 126     tabEventName: 'click',
 127
 128     initEvents: function() {
 129         // TODO: detach prefix for delegate?
 130         // this._node.delegate('tabview|' + this.tabEventName),
 131         this._node.delegate(this.tabEventName,
 132             this.onTabEvent,
 133             _queries.tab,
 134             this
 135         );
 136     },
 137
 138     onTabEvent: function(e) {
 139         e.preventDefault();
 140         this._select(this._node.all(_queries.tab).indexOf(e.currentTarget));
 141     },
 142
 143     destroy: function() {
 144         this._node.detach(this.tabEventName);
 145     }
 146 });
 147
 148 Y.TabviewBase = TabviewBase;
 149
 150
 151 }, '3.3.0' ,{requires:['node-event-delegate', 'classnamemanager', 'skin-sam-tabview']});