google-closure-library/closure/goog/ui/tabbarrenderer.js

Google's common JavaScript library

/**
 * @license
 * Copyright The Closure Library Authors.
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * @fileoverview Default renderer for {@link goog.ui.TabBar}s.  Based on the
 * original `TabPane` code.
 */

goog.provide('goog.ui.TabBarRenderer');

goog.require('goog.a11y.aria.Role');
goog.require('goog.object');
goog.require('goog.ui.ContainerRenderer');
goog.requireType('goog.ui.Container');



/**
 * Default renderer for {@link goog.ui.TabBar}s, based on the `TabPane`
 * code.  The tab bar's DOM structure is determined by its orientation and
 * location relative to tab contents.  For example, a horizontal tab bar
 * located above tab contents looks like this:
 *
 *    <div class="goog-tab-bar goog-tab-bar-horizontal goog-tab-bar-top">
 *      ...(tabs here)...
 *    </div>
 *
 * @constructor
 * @extends {goog.ui.ContainerRenderer}
 */
goog.ui.TabBarRenderer = function() {
  'use strict';
  goog.ui.ContainerRenderer.call(this, goog.a11y.aria.Role.TAB_LIST);
};
goog.inherits(goog.ui.TabBarRenderer, goog.ui.ContainerRenderer);
goog.addSingletonGetter(goog.ui.TabBarRenderer);


/**
 * Default CSS class to be applied to the root element of components rendered
 * by this renderer.
 * @type {string}
 */
goog.ui.TabBarRenderer.CSS_CLASS = goog.getCssName('goog-tab-bar');


/**
 * Returns the CSS class name to be applied to the root element of all tab bars
 * rendered or decorated using this renderer.
 * @return {string} Renderer-specific CSS class name.
 * @override
 */
goog.ui.TabBarRenderer.prototype.getCssClass = function() {
  'use strict';
  return goog.ui.TabBarRenderer.CSS_CLASS;
};


/**
 * Sets the tab bar's state based on the given CSS class name, encountered
 * during decoration.  Overrides the superclass implementation by recognizing
 * class names representing tab bar orientation and location.
 * @param {goog.ui.Container} tabBar Tab bar to configure.
 * @param {string} className CSS class name.
 * @param {string} baseClass Base class name used as the root of state-specific
 *     class names (typically the renderer's own class name).
 * @protected
 * @override
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.ui.TabBarRenderer.prototype.setStateFromClassName = function(
    tabBar, className, baseClass) {
  'use strict';
  // Create the class-to-location lookup table on first access.
  if (!this.locationByClass_) {
    this.createLocationByClassMap_();
  }

  // If the class name corresponds to a location, update the tab bar's location;
  // otherwise let the superclass handle it.
  var location = this.locationByClass_[className];
  if (location) {
    tabBar.setLocation(location);
  } else {
    goog.ui.TabBarRenderer.superClass_.setStateFromClassName.call(
        this, tabBar, className, baseClass);
  }
};


/**
 * Returns all CSS class names applicable to the tab bar, based on its state.
 * Overrides the superclass implementation by appending the location-specific
 * class name to the list.
 * @param {goog.ui.Container} tabBar Tab bar whose CSS classes are to be
 *     returned.
 * @return {!Array<string>} Array of CSS class names applicable to the tab bar.
 * @override
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.ui.TabBarRenderer.prototype.getClassNames = function(tabBar) {
  'use strict';
  var classNames =
      goog.ui.TabBarRenderer.superClass_.getClassNames.call(this, tabBar);

  // Create the location-to-class lookup table on first access.
  if (!this.classByLocation_) {
    this.createClassByLocationMap_();
  }

  // Apped the class name corresponding to the tab bar's location to the list.
  classNames.push(this.classByLocation_[tabBar.getLocation()]);
  return classNames;
};


/**
 * Creates the location-to-class lookup table.
 * @private
 */
goog.ui.TabBarRenderer.prototype.createClassByLocationMap_ = function() {
  'use strict';
  var baseClass = this.getCssClass();

  /**
   * Map of locations to location-specific structural class names,
   * precomputed and cached on first use to minimize object allocations
   * and string concatenation.
   * @type {Object}
   * @private
   * @suppress {missingRequire} goog.ui.TabBar
   */
  this.classByLocation_ = goog.object.create(
      goog.ui.TabBar.Location.TOP, goog.getCssName(baseClass, 'top'),
      goog.ui.TabBar.Location.BOTTOM, goog.getCssName(baseClass, 'bottom'),
      goog.ui.TabBar.Location.START, goog.getCssName(baseClass, 'start'),
      goog.ui.TabBar.Location.END, goog.getCssName(baseClass, 'end'));
};


/**
 * Creates the class-to-location lookup table, used during decoration.
 * @private
 */
goog.ui.TabBarRenderer.prototype.createLocationByClassMap_ = function() {
  'use strict';
  // We need the classByLocation_ map so we can transpose it.
  if (!this.classByLocation_) {
    this.createClassByLocationMap_();
  }

  /**
   * Map of location-specific structural class names to locations, used during
   * element decoration.  Precomputed and cached on first use to minimize object
   * allocations and string concatenation.
   * @type {Object}
   * @private
   */
  this.locationByClass_ = goog.object.transpose(this.classByLocation_);
};