lib/yui/3.5.0/build/tabview-base/tabview-base-debug.js

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