Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

tabview-base.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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.4.0
  6. build: nightly
  7. */
  8. YUI.add('tabview-base', function(Y) {
  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. _classNames = {
  18. tabview: getClassName(TABVIEW),
  19. tabviewPanel: getClassName(TABVIEW, PANEL),
  20. tabviewList: getClassName(TABVIEW, 'list'),
  21. tab: getClassName(TAB),
  22. tabLabel: getClassName(TAB, 'label'),
  23. tabPanel: getClassName(TAB, PANEL),
  24. selectedTab: getClassName(TAB, SELECTED),
  25. selectedPanel: getClassName(TAB, PANEL, SELECTED)
  26. },
  27. _queries = {
  28. tabview: DOT + _classNames.tabview,
  29. tabviewList: '> ul',
  30. tab: '> ul > li',
  31. tabLabel: '> ul > li > a ',
  32. tabviewPanel: '> div',
  33. tabPanel: '> div > div',
  34. selectedTab: '> ul > ' + DOT + _classNames.selectedTab,
  35. selectedPanel: '> div ' + DOT + _classNames.selectedPanel
  36. },
  37. TabviewBase = function(config) {
  38. this.init.apply(this, arguments);
  39. };
  40. TabviewBase.NAME = 'tabviewBase';
  41. TabviewBase._queries = _queries;
  42. TabviewBase._classNames = _classNames;
  43. Y.mix(TabviewBase.prototype, {
  44. init: function(config) {
  45. config = config || EMPTY_OBJ;
  46. this._node = config.host || Y.one(config.node);
  47. this.refresh();
  48. },
  49. initClassNames: function(index) {
  50. Y.Object.each(_queries, function(query, name) {
  51. // this === tabview._node
  52. if (_classNames[name]) {
  53. var result = this.all(query);
  54. if (index !== undefined) {
  55. result = result.item(index);
  56. }
  57. if (result) {
  58. result.addClass(_classNames[name]);
  59. }
  60. }
  61. }, this._node);
  62. this._node.addClass(_classNames.tabview);
  63. },
  64. _select: function(index) {
  65. var node = this._node,
  66. oldItem = node.one(_queries.selectedTab),
  67. oldContent = node.one(_queries.selectedPanel),
  68. newItem = node.all(_queries.tab).item(index),
  69. newContent = node.all(_queries.tabPanel).item(index);
  70. if (oldItem) {
  71. oldItem.removeClass(_classNames.selectedTab);
  72. }
  73. if (oldContent) {
  74. oldContent.removeClass(_classNames.selectedPanel);
  75. }
  76. if (newItem) {
  77. newItem.addClass(_classNames.selectedTab);
  78. }
  79. if (newContent) {
  80. newContent.addClass(_classNames.selectedPanel);
  81. }
  82. },
  83. initState: function() {
  84. var node = this._node,
  85. activeNode = node.one(_queries.selectedTab),
  86. activeIndex = activeNode ?
  87. node.all(_queries.tab).indexOf(activeNode) : 0;
  88. this._select(activeIndex);
  89. },
  90. // collapse extra space between list-items
  91. _scrubTextNodes: function() {
  92. this._node.one(_queries.tabviewList).get('childNodes').each(function(node) {
  93. if (node.get('nodeType') === 3) { // text node
  94. node.remove();
  95. }
  96. });
  97. },
  98. // base renderer only enlivens existing markup
  99. refresh: function() {
  100. this._scrubTextNodes();
  101. this.initClassNames();
  102. this.initState();
  103. this.initEvents();
  104. },
  105. tabEventName: 'click',
  106. initEvents: function() {
  107. // TODO: detach prefix for delegate?
  108. // this._node.delegate('tabview|' + this.tabEventName),
  109. this._node.delegate(this.tabEventName,
  110. this.onTabEvent,
  111. _queries.tab,
  112. this
  113. );
  114. },
  115. onTabEvent: function(e) {
  116. e.preventDefault();
  117. this._select(this._node.all(_queries.tab).indexOf(e.currentTarget));
  118. },
  119. destroy: function() {
  120. this._node.detach(this.tabEventName);
  121. }
  122. });
  123. Y.TabviewBase = TabviewBase;
  124. }, '3.4.0' ,{requires:['node-event-delegate', 'classnamemanager', 'skin-sam-tabview']});