tabrenderer.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. // Copyright 2008 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Default renderer for {@link goog.ui.Tab}s. Based on the
  16. * original {@code TabPane} code.
  17. *
  18. * @author attila@google.com (Attila Bodis)
  19. */
  20. goog.provide('goog.ui.TabRenderer');
  21. goog.require('goog.a11y.aria.Role');
  22. goog.require('goog.ui.Component');
  23. goog.require('goog.ui.ControlRenderer');
  24. /**
  25. * Default renderer for {@link goog.ui.Tab}s, based on the {@code TabPane} code.
  26. * @constructor
  27. * @extends {goog.ui.ControlRenderer}
  28. */
  29. goog.ui.TabRenderer = function() {
  30. goog.ui.ControlRenderer.call(this);
  31. };
  32. goog.inherits(goog.ui.TabRenderer, goog.ui.ControlRenderer);
  33. goog.addSingletonGetter(goog.ui.TabRenderer);
  34. /**
  35. * Default CSS class to be applied to the root element of components rendered
  36. * by this renderer.
  37. * @type {string}
  38. */
  39. goog.ui.TabRenderer.CSS_CLASS = goog.getCssName('goog-tab');
  40. /**
  41. * Returns the CSS class name to be applied to the root element of all tabs
  42. * rendered or decorated using this renderer.
  43. * @return {string} Renderer-specific CSS class name.
  44. * @override
  45. */
  46. goog.ui.TabRenderer.prototype.getCssClass = function() {
  47. return goog.ui.TabRenderer.CSS_CLASS;
  48. };
  49. /**
  50. * Returns the ARIA role to be applied to the tab element.
  51. * See http://wiki/Main/ARIA for more info.
  52. * @return {goog.a11y.aria.Role} ARIA role.
  53. * @override
  54. */
  55. goog.ui.TabRenderer.prototype.getAriaRole = function() {
  56. return goog.a11y.aria.Role.TAB;
  57. };
  58. /**
  59. * Returns the tab's contents wrapped in a DIV, with the renderer's own CSS
  60. * class and additional state-specific classes applied to it. Creates the
  61. * following DOM structure:
  62. *
  63. * <div class="goog-tab" title="Title">Content</div>
  64. *
  65. * @param {goog.ui.Control} tab Tab to render.
  66. * @return {Element} Root element for the tab.
  67. * @override
  68. */
  69. goog.ui.TabRenderer.prototype.createDom = function(tab) {
  70. var element = goog.ui.TabRenderer.superClass_.createDom.call(this, tab);
  71. var tooltip = tab.getTooltip();
  72. if (tooltip) {
  73. // Only update the element if the tab has a tooltip.
  74. this.setTooltip(element, tooltip);
  75. }
  76. return element;
  77. };
  78. /**
  79. * Decorates the element with the tab. Initializes the tab's ID, content,
  80. * tooltip, and state based on the ID of the element, its title, child nodes,
  81. * and CSS classes, respectively. Returns the element.
  82. * @param {goog.ui.Control} tab Tab to decorate the element.
  83. * @param {Element} element Element to decorate.
  84. * @return {Element} Decorated element.
  85. * @override
  86. */
  87. goog.ui.TabRenderer.prototype.decorate = function(tab, element) {
  88. element = goog.ui.TabRenderer.superClass_.decorate.call(this, tab, element);
  89. var tooltip = this.getTooltip(element);
  90. if (tooltip) {
  91. // Only update the tab if the element has a tooltip.
  92. tab.setTooltipInternal(tooltip);
  93. }
  94. // If the tab is selected and hosted in a tab bar, update the tab bar's
  95. // selection model.
  96. if (tab.isSelected()) {
  97. var tabBar = tab.getParent();
  98. if (tabBar && goog.isFunction(tabBar.setSelectedTab)) {
  99. // We need to temporarily deselect the tab, so the tab bar can re-select
  100. // it and thereby correctly initialize its state. We use the protected
  101. // setState() method to avoid dispatching useless events.
  102. tab.setState(goog.ui.Component.State.SELECTED, false);
  103. tabBar.setSelectedTab(tab);
  104. }
  105. }
  106. return element;
  107. };
  108. /**
  109. * Takes a tab's root element, and returns its tooltip text, or the empty
  110. * string if the element has no tooltip.
  111. * @param {Element} element The tab's root element.
  112. * @return {string} The tooltip text (empty string if none).
  113. */
  114. goog.ui.TabRenderer.prototype.getTooltip = function(element) {
  115. return element.title || '';
  116. };
  117. /**
  118. * Takes a tab's root element and a tooltip string, and updates the element
  119. * with the new tooltip. If the new tooltip is null or undefined, sets the
  120. * element's title to the empty string.
  121. * @param {Element} element The tab's root element.
  122. * @param {string|null|undefined} tooltip New tooltip text (if any).
  123. */
  124. goog.ui.TabRenderer.prototype.setTooltip = function(element, tooltip) {
  125. if (element) {
  126. element.title = tooltip || '';
  127. }
  128. };