[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('tabview-base', function (Y, NAME) {
   9  
  10  var getClassName = Y.ClassNameManager.getClassName,
  11      TABVIEW = 'tabview',
  12      TAB = 'tab',
  13      PANEL = 'panel',
  14      SELECTED = 'selected',
  15      EMPTY_OBJ = {},
  16      DOT = '.',
  17  
  18      TabviewBase = function() {
  19          this.init.apply(this, arguments);
  20      };
  21  
  22  TabviewBase.NAME = 'tabviewBase';
  23  TabviewBase._classNames = {
  24      tabview: getClassName(TABVIEW),
  25      tabviewPanel: getClassName(TABVIEW, PANEL),
  26      tabviewList: getClassName(TABVIEW, 'list'),
  27      tab: getClassName(TAB),
  28      tabLabel: getClassName(TAB, 'label'),
  29      tabPanel: getClassName(TAB, PANEL),
  30      selectedTab: getClassName(TAB, SELECTED),
  31      selectedPanel: getClassName(TAB, PANEL, SELECTED)
  32  };
  33  TabviewBase._queries = {
  34      tabview: DOT + TabviewBase._classNames.tabview,
  35      tabviewList: '> ul',
  36      tab: '> ul > li',
  37      tabLabel: '> ul > li > a',
  38      tabviewPanel: '> div',
  39      tabPanel: '> div > div',
  40      selectedTab: '> ul > ' + DOT + TabviewBase._classNames.selectedTab,
  41      selectedPanel: '> div ' + DOT + TabviewBase._classNames.selectedPanel
  42  };
  43  
  44  Y.mix(TabviewBase.prototype, {
  45      init: function(config) {
  46          config = config || EMPTY_OBJ;
  47          this._node = config.host || Y.one(config.node);
  48  
  49          this.refresh();
  50      },
  51  
  52      initClassNames: function(index) {
  53          var _classNames = Y.TabviewBase._classNames;
  54  
  55          Y.Object.each(Y.TabviewBase._queries, function(query, name) {
  56              // this === tabview._node
  57              if (_classNames[name]) {
  58                  var result = this.all(query);
  59  
  60                  if (index !== undefined) {
  61                      result = result.item(index);
  62                  }
  63  
  64                  if (result) {
  65                      result.addClass(_classNames[name]);
  66                  }
  67              }
  68          }, this._node);
  69  
  70          this._node.addClass(_classNames.tabview);
  71      },
  72  
  73      _select: function(index) {
  74          var _classNames = Y.TabviewBase._classNames,
  75              _queries = Y.TabviewBase._queries,
  76              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 _queries = Y.TabviewBase._queries,
 101              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(Y.TabviewBase._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              Y.TabviewBase._queries.tab,
 134              this
 135          );
 136      },
 137  
 138      onTabEvent: function(e) {
 139          e.preventDefault();
 140          this._select(this._node.all(Y.TabviewBase._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.17.2', {"requires": ["node-event-delegate", "classnamemanager"]});