colormenubuttonrenderer.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. // Copyright 2008 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 Renderer for {@link goog.ui.ColorMenuButton}s.
  16. *
  17. * @author robbyw@google.com (Robby Walker)
  18. * @author attila@google.com (Attila Bodis)
  19. */
  20. goog.provide('goog.ui.ColorMenuButtonRenderer');
  21. goog.require('goog.asserts');
  22. goog.require('goog.color');
  23. goog.require('goog.dom.TagName');
  24. goog.require('goog.dom.classlist');
  25. goog.require('goog.ui.MenuButtonRenderer');
  26. goog.require('goog.userAgent');
  27. /**
  28. * Renderer for {@link goog.ui.ColorMenuButton}s.
  29. * @constructor
  30. * @extends {goog.ui.MenuButtonRenderer}
  31. */
  32. goog.ui.ColorMenuButtonRenderer = function() {
  33. goog.ui.MenuButtonRenderer.call(this);
  34. };
  35. goog.inherits(goog.ui.ColorMenuButtonRenderer, goog.ui.MenuButtonRenderer);
  36. goog.addSingletonGetter(goog.ui.ColorMenuButtonRenderer);
  37. /**
  38. * Default CSS class to be applied to the root element of components rendered
  39. * by this renderer.
  40. * @type {string}
  41. */
  42. goog.ui.ColorMenuButtonRenderer.CSS_CLASS =
  43. goog.getCssName('goog-color-menu-button');
  44. /**
  45. * Overrides the superclass implementation by wrapping the caption text or DOM
  46. * structure in a color indicator element. Creates the following DOM structure:
  47. *
  48. * <div class="goog-inline-block goog-menu-button-caption">
  49. * <div class="goog-color-menu-button-indicator">
  50. * Contents...
  51. * </div>
  52. * </div>
  53. *
  54. * The 'goog-color-menu-button-indicator' style should be defined to have a
  55. * bottom border of nonzero width and a default color that blends into its
  56. * background.
  57. * @param {goog.ui.ControlContent} content Text caption or DOM structure.
  58. * @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
  59. * @return {Element} Caption element.
  60. * @override
  61. */
  62. goog.ui.ColorMenuButtonRenderer.prototype.createCaption = function(
  63. content, dom) {
  64. return goog.ui.ColorMenuButtonRenderer.superClass_.createCaption.call(
  65. this, goog.ui.ColorMenuButtonRenderer.wrapCaption(content, dom), dom);
  66. };
  67. /**
  68. * Wrap a caption in a div with the color-menu-button-indicator CSS class.
  69. * @param {goog.ui.ControlContent} content Text caption or DOM structure.
  70. * @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
  71. * @return {!Element} Caption element.
  72. */
  73. goog.ui.ColorMenuButtonRenderer.wrapCaption = function(content, dom) {
  74. return dom.createDom(
  75. goog.dom.TagName.DIV,
  76. goog.getCssName(goog.ui.ColorMenuButtonRenderer.CSS_CLASS, 'indicator'),
  77. content);
  78. };
  79. /**
  80. * Takes a color menu button control's root element and a value object
  81. * (which is assumed to be a color), and updates the button's DOM to reflect
  82. * the new color. Overrides {@link goog.ui.ButtonRenderer#setValue}.
  83. * @param {Element} element The button control's root element (if rendered).
  84. * @param {*} value New value; assumed to be a color spec string.
  85. * @override
  86. */
  87. goog.ui.ColorMenuButtonRenderer.prototype.setValue = function(element, value) {
  88. if (element) {
  89. goog.ui.ColorMenuButtonRenderer.setCaptionValue(
  90. this.getContentElement(element), value);
  91. }
  92. };
  93. /**
  94. * Takes a control's content element and a value object (which is assumed
  95. * to be a color), and updates its DOM to reflect the new color.
  96. * @param {Element} caption A content element of a control.
  97. * @param {*} value New value; assumed to be a color spec string.
  98. */
  99. goog.ui.ColorMenuButtonRenderer.setCaptionValue = function(caption, value) {
  100. // Assume that the caption's first child is the indicator.
  101. if (caption && caption.firstChild) {
  102. // Normalize the value to a hex color spec or null (otherwise setting
  103. // borderBottomColor will cause a JS error on IE).
  104. var hexColor;
  105. var strValue = /** @type {string} */ (value);
  106. hexColor = strValue && goog.color.isValidColor(strValue) ?
  107. goog.color.parse(strValue).hex :
  108. null;
  109. // Stupid IE6/7 doesn't do transparent borders.
  110. // TODO(attila): Add user-agent version check when IE8 comes out...
  111. caption.firstChild.style.borderBottomColor =
  112. hexColor || (goog.userAgent.IE ? '' : 'transparent');
  113. }
  114. };
  115. /**
  116. * Initializes the button's DOM when it enters the document. Overrides the
  117. * superclass implementation by making sure the button's color indicator is
  118. * initialized.
  119. * @param {goog.ui.Control} button goog.ui.ColorMenuButton whose DOM is to be
  120. * initialized as it enters the document.
  121. * @override
  122. */
  123. goog.ui.ColorMenuButtonRenderer.prototype.initializeDom = function(button) {
  124. var buttonElement = button.getElement();
  125. goog.asserts.assert(buttonElement);
  126. this.setValue(buttonElement, button.getValue());
  127. goog.dom.classlist.add(
  128. buttonElement, goog.ui.ColorMenuButtonRenderer.CSS_CLASS);
  129. goog.ui.ColorMenuButtonRenderer.superClass_.initializeDom.call(this, button);
  130. };