mini_cocopi/block/closure/goog/ui/roundedtabrenderer.js

// Copyright 2008 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Rounded corner tab renderer for {@link goog.ui.Tab}s.
 *
 * @author attila@google.com (Attila Bodis)
 */

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

goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.ui.Tab');
goog.require('goog.ui.TabBar');
goog.require('goog.ui.TabRenderer');
goog.require('goog.ui.registry');



/**
 * Rounded corner tab renderer for {@link goog.ui.Tab}s.
 * @constructor
 * @extends {goog.ui.TabRenderer}
 * @final
 */
goog.ui.RoundedTabRenderer = function() {
  goog.ui.TabRenderer.call(this);
};
goog.inherits(goog.ui.RoundedTabRenderer, goog.ui.TabRenderer);
goog.addSingletonGetter(goog.ui.RoundedTabRenderer);


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


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


/**
 * Creates the tab's DOM structure, based on the containing tab bar's location
 * relative to tab contents.  For example, the DOM for a tab in a tab bar
 * located above tab contents would look like this:
 *
 *    <div class="goog-rounded-tab" title="...">
 *      <table class="goog-rounded-tab-table">
 *        <tbody>
 *          <tr>
 *            <td nowrap>
 *              <div class="goog-rounded-tab-outer-edge"></div>
 *              <div class="goog-rounded-tab-inner-edge"></div>
 *            </td>
 *          </tr>
 *          <tr>
 *            <td nowrap>
 *              <div class="goog-rounded-tab-caption">Hello, world</div>
 *            </td>
 *          </tr>
 *        </tbody>
 *      </table>
 *    </div>
 *
 * @param {goog.ui.Control} tab Tab to render.
 * @return {Element} Root element for the tab.
 * @override
 */
goog.ui.RoundedTabRenderer.prototype.createDom = function(tab) {
  return this.decorate(
      tab, goog.ui.RoundedTabRenderer.superClass_.createDom.call(this, tab));
};


/**
 * Decorates the element with the tab.  Overrides the superclass implementation
 * by wrapping the tab's content in a table that implements rounded corners.
 * @param {goog.ui.Control} tab Tab to decorate the element.
 * @param {Element} element Element to decorate.
 * @return {Element} Decorated element.
 * @override
 */
goog.ui.RoundedTabRenderer.prototype.decorate = function(tab, element) {
  var tabBar = tab.getParent();

  if (!this.getContentElement(element)) {
    // The element to be decorated doesn't appear to have the full tab DOM,
    // so we have to create it.
    element.appendChild(
        this.createTab(
            tab.getDomHelper(), element.childNodes, tabBar.getLocation()));
  }

  return goog.ui.RoundedTabRenderer.superClass_.decorate.call(
      this, tab, element);
};


/**
 * Creates a table implementing a rounded corner tab.
 * @param {goog.dom.DomHelper} dom DOM helper to use for element construction.
 * @param {goog.ui.ControlContent} caption Text caption or DOM structure
 *     to display as the tab's caption.
 * @param {goog.ui.TabBar.Location} location Tab bar location relative to the
 *     tab contents.
 * @return {!Element} Table implementing a rounded corner tab.
 * @protected
 */
goog.ui.RoundedTabRenderer.prototype.createTab = function(
    dom, caption, location) {
  var rows = [];

  if (location != goog.ui.TabBar.Location.BOTTOM) {
    // This is a left, right, or top tab, so it needs a rounded top edge.
    rows.push(this.createEdge(dom, /* isTopEdge */ true));
  }
  rows.push(this.createCaption(dom, caption));
  if (location != goog.ui.TabBar.Location.TOP) {
    // This is a left, right, or bottom tab, so it needs a rounded bottom edge.
    rows.push(this.createEdge(dom, /* isTopEdge */ false));
  }

  return dom.createDom(
      goog.dom.TagName.TABLE, {
        'cellPadding': 0,
        'cellSpacing': 0,
        'className': goog.getCssName(this.getStructuralCssClass(), 'table')
      },
      dom.createDom(goog.dom.TagName.TBODY, null, rows));
};


/**
 * Creates a table row implementing the tab caption.
 * @param {goog.dom.DomHelper} dom DOM helper to use for element construction.
 * @param {goog.ui.ControlContent} caption Text caption or DOM structure
 *     to display as the tab's caption.
 * @return {!Element} Tab caption table row.
 * @protected
 */
goog.ui.RoundedTabRenderer.prototype.createCaption = function(dom, caption) {
  var baseClass = this.getStructuralCssClass();
  return dom.createDom(
      goog.dom.TagName.TR, null,
      dom.createDom(
          goog.dom.TagName.TD, {'noWrap': true},
          dom.createDom(
              goog.dom.TagName.DIV, goog.getCssName(baseClass, 'caption'),
              caption)));
};


/**
 * Creates a table row implementing a rounded tab edge.
 * @param {goog.dom.DomHelper} dom DOM helper to use for element construction.
 * @param {boolean} isTopEdge Whether to create a top or bottom edge.
 * @return {!Element} Rounded tab edge table row.
 * @protected
 */
goog.ui.RoundedTabRenderer.prototype.createEdge = function(dom, isTopEdge) {
  var baseClass = this.getStructuralCssClass();
  var inner = dom.createDom(
      goog.dom.TagName.DIV, goog.getCssName(baseClass, 'inner-edge'));
  var outer = dom.createDom(
      goog.dom.TagName.DIV, goog.getCssName(baseClass, 'outer-edge'));
  return dom.createDom(
      goog.dom.TagName.TR, null,
      dom.createDom(
          goog.dom.TagName.TD, {'noWrap': true},
          isTopEdge ? [outer, inner] : [inner, outer]));
};


/** @override */
goog.ui.RoundedTabRenderer.prototype.getContentElement = function(element) {
  var baseClass = this.getStructuralCssClass();
  return element &&
      goog.dom.getElementsByTagNameAndClass(
          goog.dom.TagName.DIV, goog.getCssName(baseClass, 'caption'),
          element)[0];
};


// Register a decorator factory function for goog.ui.Tabs using the rounded
// tab renderer.
goog.ui.registry.setDecoratorByClassName(
    goog.ui.RoundedTabRenderer.CSS_CLASS, function() {
      return new goog.ui.Tab(null, goog.ui.RoundedTabRenderer.getInstance());
    });