tabpane.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. // Copyright 2010 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 Tabbed pane with style and functionality specific to
  16. * Editor dialogs.
  17. *
  18. * @author robbyw@google.com (Robby Walker)
  19. */
  20. goog.provide('goog.ui.editor.TabPane');
  21. goog.require('goog.asserts');
  22. goog.require('goog.dom');
  23. goog.require('goog.dom.InputType');
  24. goog.require('goog.dom.TagName');
  25. goog.require('goog.dom.classlist');
  26. goog.require('goog.events.EventHandler');
  27. goog.require('goog.events.EventType');
  28. goog.require('goog.style');
  29. goog.require('goog.ui.Component');
  30. goog.require('goog.ui.Control');
  31. goog.require('goog.ui.Tab');
  32. goog.require('goog.ui.TabBar');
  33. /**
  34. * Creates a new Editor-style tab pane.
  35. * @param {goog.dom.DomHelper} dom The dom helper for the window to create this
  36. * tab pane in.
  37. * @param {string=} opt_caption Optional caption of the tab pane.
  38. * @constructor
  39. * @extends {goog.ui.Component}
  40. * @final
  41. */
  42. goog.ui.editor.TabPane = function(dom, opt_caption) {
  43. goog.ui.editor.TabPane.base(this, 'constructor', dom);
  44. /**
  45. * The event handler used to register events.
  46. * @type {goog.events.EventHandler<!goog.ui.editor.TabPane>}
  47. * @private
  48. */
  49. this.eventHandler_ = new goog.events.EventHandler(this);
  50. this.registerDisposable(this.eventHandler_);
  51. /**
  52. * The tab bar used to render the tabs.
  53. * @type {goog.ui.TabBar}
  54. * @private
  55. */
  56. this.tabBar_ =
  57. new goog.ui.TabBar(goog.ui.TabBar.Location.START, undefined, this.dom_);
  58. this.tabBar_.setFocusable(false);
  59. /**
  60. * The content element.
  61. * @private
  62. */
  63. this.tabContent_ = this.dom_.createDom(
  64. goog.dom.TagName.DIV, {className: goog.getCssName('goog-tab-content')});
  65. /**
  66. * The currently selected radio button.
  67. * @type {Element}
  68. * @private
  69. */
  70. this.selectedRadio_ = null;
  71. /**
  72. * The currently visible tab content.
  73. * @type {Element}
  74. * @private
  75. */
  76. this.visibleContent_ = null;
  77. // Add the caption as the first element in the tab bar.
  78. if (opt_caption) {
  79. var captionControl = new goog.ui.Control(opt_caption, undefined, this.dom_);
  80. captionControl.addClassName(goog.getCssName('tr-tabpane-caption'));
  81. captionControl.setEnabled(false);
  82. this.tabBar_.addChild(captionControl, true);
  83. }
  84. };
  85. goog.inherits(goog.ui.editor.TabPane, goog.ui.Component);
  86. /**
  87. * @return {string} The ID of the content element for the current tab.
  88. */
  89. goog.ui.editor.TabPane.prototype.getCurrentTabId = function() {
  90. return this.tabBar_.getSelectedTab().getId();
  91. };
  92. /**
  93. * Selects the tab with the given id.
  94. * @param {string} id Id of the tab to select.
  95. */
  96. goog.ui.editor.TabPane.prototype.setSelectedTabId = function(id) {
  97. this.tabBar_.setSelectedTab(this.tabBar_.getChild(id));
  98. };
  99. /**
  100. * Adds a tab to the tab pane.
  101. * @param {string} id The id of the tab to add.
  102. * @param {string} caption The caption of the tab.
  103. * @param {string} tooltip The tooltip for the tab.
  104. * @param {string} groupName for the radio button group.
  105. * @param {Element} content The content element to show when this tab is
  106. * selected.
  107. */
  108. goog.ui.editor.TabPane.prototype.addTab = function(
  109. id, caption, tooltip, groupName, content) {
  110. var radio = this.dom_.createDom(
  111. goog.dom.TagName.INPUT,
  112. {name: groupName, type: goog.dom.InputType.RADIO});
  113. var tab = new goog.ui.Tab(
  114. [radio, this.dom_.createTextNode(caption)], undefined, this.dom_);
  115. tab.setId(id);
  116. tab.setTooltip(tooltip);
  117. this.tabBar_.addChild(tab, true);
  118. // When you navigate the radio buttons with TAB and then the Arrow keys on
  119. // Chrome and FF, you get a CLICK event on them, and the radio button
  120. // is selected. You don't get a SELECT at all. We listen for SELECT
  121. // nonetheless because it's possible that some browser will issue only
  122. // SELECT.
  123. this.eventHandler_.listen(
  124. radio, [goog.events.EventType.SELECT, goog.events.EventType.CLICK],
  125. goog.bind(this.tabBar_.setSelectedTab, this.tabBar_, tab));
  126. content.id = id + '-tab';
  127. this.tabContent_.appendChild(content);
  128. goog.style.setElementShown(content, false);
  129. };
  130. /** @override */
  131. goog.ui.editor.TabPane.prototype.enterDocument = function() {
  132. goog.ui.editor.TabPane.base(this, 'enterDocument');
  133. // Get the root element and add a class name to it.
  134. var root = this.getElement();
  135. goog.asserts.assert(root);
  136. goog.dom.classlist.add(root, goog.getCssName('tr-tabpane'));
  137. // Add the tabs.
  138. this.addChild(this.tabBar_, true);
  139. this.eventHandler_.listen(
  140. this.tabBar_, goog.ui.Component.EventType.SELECT, this.handleTabSelect_);
  141. // Add the tab content.
  142. root.appendChild(this.tabContent_);
  143. // Add an element to clear the tab float.
  144. root.appendChild(this.dom_.createDom(goog.dom.TagName.DIV, {
  145. className: goog.getCssName('goog-tab-bar-clear')
  146. }));
  147. };
  148. /**
  149. * Handles a tab change.
  150. * @param {goog.events.Event} e The browser change event.
  151. * @private
  152. */
  153. goog.ui.editor.TabPane.prototype.handleTabSelect_ = function(e) {
  154. var tab = /** @type {goog.ui.Tab} */ (e.target);
  155. // Show the tab content.
  156. if (this.visibleContent_) {
  157. goog.style.setElementShown(this.visibleContent_, false);
  158. }
  159. this.visibleContent_ = this.dom_.getElement(tab.getId() + '-tab');
  160. goog.style.setElementShown(this.visibleContent_, true);
  161. // Select the appropriate radio button (and deselect the current one).
  162. if (this.selectedRadio_) {
  163. this.selectedRadio_.checked = false;
  164. }
  165. this.selectedRadio_ = goog.dom.getElementsByTagName(
  166. goog.dom.TagName.INPUT, tab.getElementStrict())[0];
  167. this.selectedRadio_.checked = true;
  168. };