tristatemenuitem.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. // Copyright 2007 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 A menu item class that supports three state checkbox semantics.
  16. *
  17. * @author eae@google.com (Emil A Eklund)
  18. */
  19. goog.provide('goog.ui.TriStateMenuItem');
  20. goog.provide('goog.ui.TriStateMenuItem.State');
  21. goog.require('goog.dom.classlist');
  22. goog.require('goog.ui.Component');
  23. goog.require('goog.ui.MenuItem');
  24. goog.require('goog.ui.TriStateMenuItemRenderer');
  25. goog.require('goog.ui.registry');
  26. /**
  27. * Class representing a three state checkbox menu item.
  28. *
  29. * @param {goog.ui.ControlContent} content Text caption or DOM structure
  30. * to display as the content of the item (use to add icons or styling to
  31. * menus).
  32. * @param {Object=} opt_model Data/model associated with the menu item.
  33. * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper used for
  34. * document interactions.
  35. * @param {goog.ui.MenuItemRenderer=} opt_renderer Optional renderer.
  36. * @param {boolean=} opt_alwaysAllowPartial If true, always allow partial
  37. * state.
  38. * @constructor
  39. * @extends {goog.ui.MenuItem}
  40. * TODO(attila): Figure out how to better integrate this into the
  41. * goog.ui.Control state management framework.
  42. * @final
  43. */
  44. goog.ui.TriStateMenuItem = function(
  45. content, opt_model, opt_domHelper, opt_renderer, opt_alwaysAllowPartial) {
  46. goog.ui.MenuItem.call(
  47. this, content, opt_model, opt_domHelper,
  48. opt_renderer || new goog.ui.TriStateMenuItemRenderer());
  49. this.setCheckable(true);
  50. this.alwaysAllowPartial_ = opt_alwaysAllowPartial || false;
  51. };
  52. goog.inherits(goog.ui.TriStateMenuItem, goog.ui.MenuItem);
  53. /**
  54. * Checked states for component.
  55. * @enum {number}
  56. */
  57. goog.ui.TriStateMenuItem.State = {
  58. /**
  59. * Component is not checked.
  60. */
  61. NOT_CHECKED: 0,
  62. /**
  63. * Component is partially checked.
  64. */
  65. PARTIALLY_CHECKED: 1,
  66. /**
  67. * Component is fully checked.
  68. */
  69. FULLY_CHECKED: 2
  70. };
  71. /**
  72. * Menu item's checked state.
  73. * @type {goog.ui.TriStateMenuItem.State}
  74. * @private
  75. */
  76. goog.ui.TriStateMenuItem.prototype.checkState_ =
  77. goog.ui.TriStateMenuItem.State.NOT_CHECKED;
  78. /**
  79. * Whether the partial state can be toggled.
  80. * @type {boolean}
  81. * @private
  82. */
  83. goog.ui.TriStateMenuItem.prototype.allowPartial_ = false;
  84. /**
  85. * Used to override allowPartial_ to force the third state to always be
  86. * permitted.
  87. * @type {boolean}
  88. * @private
  89. */
  90. goog.ui.TriStateMenuItem.prototype.alwaysAllowPartial_ = false;
  91. /**
  92. * @return {goog.ui.TriStateMenuItem.State} The menu item's check state.
  93. */
  94. goog.ui.TriStateMenuItem.prototype.getCheckedState = function() {
  95. return this.checkState_;
  96. };
  97. /**
  98. * Sets the checked state.
  99. * @param {goog.ui.TriStateMenuItem.State} state The checked state.
  100. */
  101. goog.ui.TriStateMenuItem.prototype.setCheckedState = function(state) {
  102. this.setCheckedState_(state);
  103. this.allowPartial_ =
  104. state == goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED;
  105. };
  106. /**
  107. * Sets the checked state and updates the CSS styling. Dispatches a
  108. * {@code CHECK} or {@code UNCHECK} event prior to changing the component's
  109. * state, which may be caught and canceled to prevent the component from
  110. * changing state.
  111. * @param {goog.ui.TriStateMenuItem.State} state The checked state.
  112. * @private
  113. */
  114. goog.ui.TriStateMenuItem.prototype.setCheckedState_ = function(state) {
  115. if (this.dispatchEvent(
  116. state != goog.ui.TriStateMenuItem.State.NOT_CHECKED ?
  117. goog.ui.Component.EventType.CHECK :
  118. goog.ui.Component.EventType.UNCHECK)) {
  119. this.setState(
  120. goog.ui.Component.State.CHECKED,
  121. state != goog.ui.TriStateMenuItem.State.NOT_CHECKED);
  122. this.checkState_ = state;
  123. this.updatedCheckedStateClassNames_();
  124. }
  125. };
  126. /** @override */
  127. goog.ui.TriStateMenuItem.prototype.performActionInternal = function(e) {
  128. switch (this.getCheckedState()) {
  129. case goog.ui.TriStateMenuItem.State.NOT_CHECKED:
  130. this.setCheckedState_(
  131. this.alwaysAllowPartial_ || this.allowPartial_ ?
  132. goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED :
  133. goog.ui.TriStateMenuItem.State.FULLY_CHECKED);
  134. break;
  135. case goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED:
  136. this.setCheckedState_(goog.ui.TriStateMenuItem.State.FULLY_CHECKED);
  137. break;
  138. case goog.ui.TriStateMenuItem.State.FULLY_CHECKED:
  139. this.setCheckedState_(goog.ui.TriStateMenuItem.State.NOT_CHECKED);
  140. break;
  141. }
  142. var checkboxClass =
  143. goog.getCssName(this.getRenderer().getCssClass(), 'checkbox');
  144. var clickOnCheckbox = e.target &&
  145. goog.dom.classlist.contains(
  146. /** @type {!Element} */ (e.target), checkboxClass);
  147. return this.dispatchEvent(
  148. clickOnCheckbox || this.allowPartial_ ?
  149. goog.ui.Component.EventType.CHANGE :
  150. goog.ui.Component.EventType.ACTION);
  151. };
  152. /**
  153. * Updates the extra class names applied to the menu item element.
  154. * @private
  155. */
  156. goog.ui.TriStateMenuItem.prototype.updatedCheckedStateClassNames_ = function() {
  157. var renderer = this.getRenderer();
  158. renderer.enableExtraClassName(
  159. this, goog.getCssName(renderer.getCssClass(), 'partially-checked'),
  160. this.getCheckedState() ==
  161. goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED);
  162. renderer.enableExtraClassName(
  163. this, goog.getCssName(renderer.getCssClass(), 'fully-checked'),
  164. this.getCheckedState() == goog.ui.TriStateMenuItem.State.FULLY_CHECKED);
  165. };
  166. // Register a decorator factory function for goog.ui.TriStateMenuItemRenderer.
  167. goog.ui.registry.setDecoratorByClassName(
  168. goog.ui.TriStateMenuItemRenderer.CSS_CLASS, function() {
  169. // TriStateMenuItem defaults to using TriStateMenuItemRenderer.
  170. return new goog.ui.TriStateMenuItem(null);
  171. });