123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- // Copyright 2010 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 Tabbed pane with style and functionality specific to
- * Editor dialogs.
- *
- * @author robbyw@google.com (Robby Walker)
- */
- goog.provide('goog.ui.editor.TabPane');
- goog.require('goog.asserts');
- goog.require('goog.dom');
- goog.require('goog.dom.InputType');
- goog.require('goog.dom.TagName');
- goog.require('goog.dom.classlist');
- goog.require('goog.events.EventHandler');
- goog.require('goog.events.EventType');
- goog.require('goog.style');
- goog.require('goog.ui.Component');
- goog.require('goog.ui.Control');
- goog.require('goog.ui.Tab');
- goog.require('goog.ui.TabBar');
- /**
- * Creates a new Editor-style tab pane.
- * @param {goog.dom.DomHelper} dom The dom helper for the window to create this
- * tab pane in.
- * @param {string=} opt_caption Optional caption of the tab pane.
- * @constructor
- * @extends {goog.ui.Component}
- * @final
- */
- goog.ui.editor.TabPane = function(dom, opt_caption) {
- goog.ui.editor.TabPane.base(this, 'constructor', dom);
- /**
- * The event handler used to register events.
- * @type {goog.events.EventHandler<!goog.ui.editor.TabPane>}
- * @private
- */
- this.eventHandler_ = new goog.events.EventHandler(this);
- this.registerDisposable(this.eventHandler_);
- /**
- * The tab bar used to render the tabs.
- * @type {goog.ui.TabBar}
- * @private
- */
- this.tabBar_ =
- new goog.ui.TabBar(goog.ui.TabBar.Location.START, undefined, this.dom_);
- this.tabBar_.setFocusable(false);
- /**
- * The content element.
- * @private
- */
- this.tabContent_ = this.dom_.createDom(
- goog.dom.TagName.DIV, {className: goog.getCssName('goog-tab-content')});
- /**
- * The currently selected radio button.
- * @type {Element}
- * @private
- */
- this.selectedRadio_ = null;
- /**
- * The currently visible tab content.
- * @type {Element}
- * @private
- */
- this.visibleContent_ = null;
- // Add the caption as the first element in the tab bar.
- if (opt_caption) {
- var captionControl = new goog.ui.Control(opt_caption, undefined, this.dom_);
- captionControl.addClassName(goog.getCssName('tr-tabpane-caption'));
- captionControl.setEnabled(false);
- this.tabBar_.addChild(captionControl, true);
- }
- };
- goog.inherits(goog.ui.editor.TabPane, goog.ui.Component);
- /**
- * @return {string} The ID of the content element for the current tab.
- */
- goog.ui.editor.TabPane.prototype.getCurrentTabId = function() {
- return this.tabBar_.getSelectedTab().getId();
- };
- /**
- * Selects the tab with the given id.
- * @param {string} id Id of the tab to select.
- */
- goog.ui.editor.TabPane.prototype.setSelectedTabId = function(id) {
- this.tabBar_.setSelectedTab(this.tabBar_.getChild(id));
- };
- /**
- * Adds a tab to the tab pane.
- * @param {string} id The id of the tab to add.
- * @param {string} caption The caption of the tab.
- * @param {string} tooltip The tooltip for the tab.
- * @param {string} groupName for the radio button group.
- * @param {Element} content The content element to show when this tab is
- * selected.
- */
- goog.ui.editor.TabPane.prototype.addTab = function(
- id, caption, tooltip, groupName, content) {
- var radio = this.dom_.createDom(
- goog.dom.TagName.INPUT,
- {name: groupName, type: goog.dom.InputType.RADIO});
- var tab = new goog.ui.Tab(
- [radio, this.dom_.createTextNode(caption)], undefined, this.dom_);
- tab.setId(id);
- tab.setTooltip(tooltip);
- this.tabBar_.addChild(tab, true);
- // When you navigate the radio buttons with TAB and then the Arrow keys on
- // Chrome and FF, you get a CLICK event on them, and the radio button
- // is selected. You don't get a SELECT at all. We listen for SELECT
- // nonetheless because it's possible that some browser will issue only
- // SELECT.
- this.eventHandler_.listen(
- radio, [goog.events.EventType.SELECT, goog.events.EventType.CLICK],
- goog.bind(this.tabBar_.setSelectedTab, this.tabBar_, tab));
- content.id = id + '-tab';
- this.tabContent_.appendChild(content);
- goog.style.setElementShown(content, false);
- };
- /** @override */
- goog.ui.editor.TabPane.prototype.enterDocument = function() {
- goog.ui.editor.TabPane.base(this, 'enterDocument');
- // Get the root element and add a class name to it.
- var root = this.getElement();
- goog.asserts.assert(root);
- goog.dom.classlist.add(root, goog.getCssName('tr-tabpane'));
- // Add the tabs.
- this.addChild(this.tabBar_, true);
- this.eventHandler_.listen(
- this.tabBar_, goog.ui.Component.EventType.SELECT, this.handleTabSelect_);
- // Add the tab content.
- root.appendChild(this.tabContent_);
- // Add an element to clear the tab float.
- root.appendChild(this.dom_.createDom(goog.dom.TagName.DIV, {
- className: goog.getCssName('goog-tab-bar-clear')
- }));
- };
- /**
- * Handles a tab change.
- * @param {goog.events.Event} e The browser change event.
- * @private
- */
- goog.ui.editor.TabPane.prototype.handleTabSelect_ = function(e) {
- var tab = /** @type {goog.ui.Tab} */ (e.target);
- // Show the tab content.
- if (this.visibleContent_) {
- goog.style.setElementShown(this.visibleContent_, false);
- }
- this.visibleContent_ = this.dom_.getElement(tab.getId() + '-tab');
- goog.style.setElementShown(this.visibleContent_, true);
- // Select the appropriate radio button (and deselect the current one).
- if (this.selectedRadio_) {
- this.selectedRadio_.checked = false;
- }
- this.selectedRadio_ = goog.dom.getElementsByTagName(
- goog.dom.TagName.INPUT, tab.getElementStrict())[0];
- this.selectedRadio_.checked = true;
- };
|