tabbarrenderer.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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.TabBar}s. Based on the
  16. * original {@code TabPane} code.
  17. *
  18. * @author attila@google.com (Attila Bodis)
  19. * @author eae@google.com (Emil A. Eklund)
  20. */
  21. goog.provide('goog.ui.TabBarRenderer');
  22. goog.require('goog.a11y.aria.Role');
  23. goog.require('goog.object');
  24. goog.require('goog.ui.ContainerRenderer');
  25. /**
  26. * Default renderer for {@link goog.ui.TabBar}s, based on the {@code TabPane}
  27. * code. The tab bar's DOM structure is determined by its orientation and
  28. * location relative to tab contents. For example, a horizontal tab bar
  29. * located above tab contents looks like this:
  30. *
  31. * <div class="goog-tab-bar goog-tab-bar-horizontal goog-tab-bar-top">
  32. * ...(tabs here)...
  33. * </div>
  34. *
  35. * @constructor
  36. * @extends {goog.ui.ContainerRenderer}
  37. */
  38. goog.ui.TabBarRenderer = function() {
  39. goog.ui.ContainerRenderer.call(this, goog.a11y.aria.Role.TAB_LIST);
  40. };
  41. goog.inherits(goog.ui.TabBarRenderer, goog.ui.ContainerRenderer);
  42. goog.addSingletonGetter(goog.ui.TabBarRenderer);
  43. goog.tagUnsealableClass(goog.ui.TabBarRenderer);
  44. /**
  45. * Default CSS class to be applied to the root element of components rendered
  46. * by this renderer.
  47. * @type {string}
  48. */
  49. goog.ui.TabBarRenderer.CSS_CLASS = goog.getCssName('goog-tab-bar');
  50. /**
  51. * Returns the CSS class name to be applied to the root element of all tab bars
  52. * rendered or decorated using this renderer.
  53. * @return {string} Renderer-specific CSS class name.
  54. * @override
  55. */
  56. goog.ui.TabBarRenderer.prototype.getCssClass = function() {
  57. return goog.ui.TabBarRenderer.CSS_CLASS;
  58. };
  59. /**
  60. * Sets the tab bar's state based on the given CSS class name, encountered
  61. * during decoration. Overrides the superclass implementation by recognizing
  62. * class names representing tab bar orientation and location.
  63. * @param {goog.ui.Container} tabBar Tab bar to configure.
  64. * @param {string} className CSS class name.
  65. * @param {string} baseClass Base class name used as the root of state-specific
  66. * class names (typically the renderer's own class name).
  67. * @protected
  68. * @override
  69. */
  70. goog.ui.TabBarRenderer.prototype.setStateFromClassName = function(
  71. tabBar, className, baseClass) {
  72. // Create the class-to-location lookup table on first access.
  73. if (!this.locationByClass_) {
  74. this.createLocationByClassMap_();
  75. }
  76. // If the class name corresponds to a location, update the tab bar's location;
  77. // otherwise let the superclass handle it.
  78. var location = this.locationByClass_[className];
  79. if (location) {
  80. tabBar.setLocation(location);
  81. } else {
  82. goog.ui.TabBarRenderer.superClass_.setStateFromClassName.call(
  83. this, tabBar, className, baseClass);
  84. }
  85. };
  86. /**
  87. * Returns all CSS class names applicable to the tab bar, based on its state.
  88. * Overrides the superclass implementation by appending the location-specific
  89. * class name to the list.
  90. * @param {goog.ui.Container} tabBar Tab bar whose CSS classes are to be
  91. * returned.
  92. * @return {!Array<string>} Array of CSS class names applicable to the tab bar.
  93. * @override
  94. */
  95. goog.ui.TabBarRenderer.prototype.getClassNames = function(tabBar) {
  96. var classNames =
  97. goog.ui.TabBarRenderer.superClass_.getClassNames.call(this, tabBar);
  98. // Create the location-to-class lookup table on first access.
  99. if (!this.classByLocation_) {
  100. this.createClassByLocationMap_();
  101. }
  102. // Apped the class name corresponding to the tab bar's location to the list.
  103. classNames.push(this.classByLocation_[tabBar.getLocation()]);
  104. return classNames;
  105. };
  106. /**
  107. * Creates the location-to-class lookup table.
  108. * @private
  109. */
  110. goog.ui.TabBarRenderer.prototype.createClassByLocationMap_ = function() {
  111. var baseClass = this.getCssClass();
  112. /**
  113. * Map of locations to location-specific structural class names,
  114. * precomputed and cached on first use to minimize object allocations
  115. * and string concatenation.
  116. * @type {Object}
  117. * @private
  118. * @suppress {missingRequire} goog.ui.TabBar
  119. */
  120. this.classByLocation_ = goog.object.create(
  121. goog.ui.TabBar.Location.TOP, goog.getCssName(baseClass, 'top'),
  122. goog.ui.TabBar.Location.BOTTOM, goog.getCssName(baseClass, 'bottom'),
  123. goog.ui.TabBar.Location.START, goog.getCssName(baseClass, 'start'),
  124. goog.ui.TabBar.Location.END, goog.getCssName(baseClass, 'end'));
  125. };
  126. /**
  127. * Creates the class-to-location lookup table, used during decoration.
  128. * @private
  129. */
  130. goog.ui.TabBarRenderer.prototype.createLocationByClassMap_ = function() {
  131. // We need the classByLocation_ map so we can transpose it.
  132. if (!this.classByLocation_) {
  133. this.createClassByLocationMap_();
  134. }
  135. /**
  136. * Map of location-specific structural class names to locations, used during
  137. * element decoration. Precomputed and cached on first use to minimize object
  138. * allocations and string concatenation.
  139. * @type {Object}
  140. * @private
  141. */
  142. this.locationByClass_ = goog.object.transpose(this.classByLocation_);
  143. };