flatbuttonrenderer.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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 Similar functionality of {@link goog.ui.ButtonRenderer},
  16. * but uses a <div> element instead of a <button> or <input> element.
  17. *
  18. */
  19. goog.provide('goog.ui.FlatButtonRenderer');
  20. goog.require('goog.a11y.aria.Role');
  21. goog.require('goog.asserts');
  22. goog.require('goog.dom.TagName');
  23. goog.require('goog.dom.classlist');
  24. goog.require('goog.ui.Button');
  25. goog.require('goog.ui.ButtonRenderer');
  26. goog.require('goog.ui.INLINE_BLOCK_CLASSNAME');
  27. goog.require('goog.ui.registry');
  28. /**
  29. * Flat renderer for {@link goog.ui.Button}s. Flat buttons can contain
  30. * almost arbitrary HTML content, will flow like inline elements, but can be
  31. * styled like block-level elements.
  32. * @constructor
  33. * @extends {goog.ui.ButtonRenderer}
  34. */
  35. goog.ui.FlatButtonRenderer = function() {
  36. goog.ui.ButtonRenderer.call(this);
  37. };
  38. goog.inherits(goog.ui.FlatButtonRenderer, goog.ui.ButtonRenderer);
  39. goog.addSingletonGetter(goog.ui.FlatButtonRenderer);
  40. /**
  41. * Default CSS class to be applied to the root element of components rendered
  42. * by this renderer.
  43. * @type {string}
  44. */
  45. goog.ui.FlatButtonRenderer.CSS_CLASS = goog.getCssName('goog-flat-button');
  46. /**
  47. * Returns the control's contents wrapped in a div element, with
  48. * the renderer's own CSS class and additional state-specific classes applied
  49. * to it, and the button's disabled attribute set or cleared as needed.
  50. * Overrides {@link goog.ui.ButtonRenderer#createDom}.
  51. * @param {goog.ui.Control} button Button to render.
  52. * @return {!Element} Root element for the button.
  53. * @override
  54. */
  55. goog.ui.FlatButtonRenderer.prototype.createDom = function(button) {
  56. var classNames = this.getClassNames(button);
  57. var element = button.getDomHelper().createDom(
  58. goog.dom.TagName.DIV,
  59. goog.ui.INLINE_BLOCK_CLASSNAME + ' ' + classNames.join(' '),
  60. button.getContent());
  61. this.setTooltip(element, button.getTooltip());
  62. return element;
  63. };
  64. /**
  65. * Returns the ARIA role to be applied to flat buttons.
  66. * @return {goog.a11y.aria.Role|undefined} ARIA role.
  67. * @override
  68. */
  69. goog.ui.FlatButtonRenderer.prototype.getAriaRole = function() {
  70. return goog.a11y.aria.Role.BUTTON;
  71. };
  72. /**
  73. * Returns true if this renderer can decorate the element. Overrides
  74. * {@link goog.ui.ButtonRenderer#canDecorate} by returning true if the
  75. * element is a DIV, false otherwise.
  76. * @param {Element} element Element to decorate.
  77. * @return {boolean} Whether the renderer can decorate the element.
  78. * @override
  79. */
  80. goog.ui.FlatButtonRenderer.prototype.canDecorate = function(element) {
  81. return element.tagName == goog.dom.TagName.DIV;
  82. };
  83. /**
  84. * Takes an existing element and decorates it with the flat button control.
  85. * Initializes the control's ID, content, tooltip, value, and state based
  86. * on the ID of the element, its child nodes, and its CSS classes, respectively.
  87. * Returns the element. Overrides {@link goog.ui.ButtonRenderer#decorate}.
  88. * @param {goog.ui.Control} button Button instance to decorate the element.
  89. * @param {Element} element Element to decorate.
  90. * @return {Element} Decorated element.
  91. * @override
  92. */
  93. goog.ui.FlatButtonRenderer.prototype.decorate = function(button, element) {
  94. goog.asserts.assert(element);
  95. goog.dom.classlist.add(element, goog.ui.INLINE_BLOCK_CLASSNAME);
  96. return goog.ui.FlatButtonRenderer.superClass_.decorate.call(
  97. this, button, element);
  98. };
  99. /**
  100. * Flat buttons can't use the value attribute since they are div elements.
  101. * Overrides {@link goog.ui.ButtonRenderer#getValue} to prevent trying to
  102. * access the element's value.
  103. * @param {Element} element The button control's root element.
  104. * @return {string} Value not valid for flat buttons.
  105. * @override
  106. */
  107. goog.ui.FlatButtonRenderer.prototype.getValue = function(element) {
  108. // Flat buttons don't store their value in the DOM.
  109. return '';
  110. };
  111. /**
  112. * Returns the CSS class to be applied to the root element of components
  113. * rendered using this renderer.
  114. * @return {string} Renderer-specific CSS class.
  115. * @override
  116. */
  117. goog.ui.FlatButtonRenderer.prototype.getCssClass = function() {
  118. return goog.ui.FlatButtonRenderer.CSS_CLASS;
  119. };
  120. // Register a decorator factory function for Flat Buttons.
  121. goog.ui.registry.setDecoratorByClassName(
  122. goog.ui.FlatButtonRenderer.CSS_CLASS, function() {
  123. // Uses goog.ui.Button, but with FlatButtonRenderer.
  124. return new goog.ui.Button(null, goog.ui.FlatButtonRenderer.getInstance());
  125. });