blob: bb5b742fc11311ac2f767bcfcf22a0f89626c823 [file] [log] [blame]
// Copyright 2008 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 Similiar functionality of {@link goog.ui.ButtonRenderer},
* but uses a <div> element instead of a <button> or <input> element.
*
*/
goog.provide('goog.ui.FlatButtonRenderer');
goog.require('goog.a11y.aria.Role');
goog.require('goog.asserts');
goog.require('goog.dom.classlist');
goog.require('goog.ui.Button');
goog.require('goog.ui.ButtonRenderer');
goog.require('goog.ui.INLINE_BLOCK_CLASSNAME');
goog.require('goog.ui.registry');
/**
* Flat renderer for {@link goog.ui.Button}s. Flat buttons can contain
* almost arbitrary HTML content, will flow like inline elements, but can be
* styled like block-level elements.
* @constructor
* @extends {goog.ui.ButtonRenderer}
*/
goog.ui.FlatButtonRenderer = function() {
goog.ui.ButtonRenderer.call(this);
};
goog.inherits(goog.ui.FlatButtonRenderer, goog.ui.ButtonRenderer);
goog.addSingletonGetter(goog.ui.FlatButtonRenderer);
/**
* Default CSS class to be applied to the root element of components rendered
* by this renderer.
* @type {string}
*/
goog.ui.FlatButtonRenderer.CSS_CLASS = goog.getCssName('goog-flat-button');
/**
* Returns the control's contents wrapped in a div element, with
* the renderer's own CSS class and additional state-specific classes applied
* to it, and the button's disabled attribute set or cleared as needed.
* Overrides {@link goog.ui.ButtonRenderer#createDom}.
* @param {goog.ui.Control} button Button to render.
* @return {!Element} Root element for the button.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.createDom = function(button) {
var classNames = this.getClassNames(button);
var attributes = {
'class': goog.ui.INLINE_BLOCK_CLASSNAME + ' ' + classNames.join(' ')
};
var element = button.getDomHelper().createDom(
'div', attributes, button.getContent());
this.setTooltip(element, button.getTooltip());
return element;
};
/**
* Returns the ARIA role to be applied to flat buttons.
* @return {goog.a11y.aria.Role|undefined} ARIA role.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.getAriaRole = function() {
return goog.a11y.aria.Role.BUTTON;
};
/**
* Returns true if this renderer can decorate the element. Overrides
* {@link goog.ui.ButtonRenderer#canDecorate} by returning true if the
* element is a DIV, false otherwise.
* @param {Element} element Element to decorate.
* @return {boolean} Whether the renderer can decorate the element.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.canDecorate = function(element) {
return element.tagName == 'DIV';
};
/**
* Takes an existing element and decorates it with the flat button control.
* Initializes the control's ID, content, tooltip, value, and state based
* on the ID of the element, its child nodes, and its CSS classes, respectively.
* Returns the element. Overrides {@link goog.ui.ButtonRenderer#decorate}.
* @param {goog.ui.Control} button Button instance to decorate the element.
* @param {Element} element Element to decorate.
* @return {Element} Decorated element.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.decorate = function(button, element) {
goog.asserts.assert(element);
goog.dom.classlist.add(element, goog.ui.INLINE_BLOCK_CLASSNAME);
return goog.ui.FlatButtonRenderer.superClass_.decorate.call(this, button,
element);
};
/**
* Flat buttons can't use the value attribute since they are div elements.
* Overrides {@link goog.ui.ButtonRenderer#getValue} to prevent trying to
* access the element's value.
* @param {Element} element The button control's root element.
* @return {string} Value not valid for flat buttons.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.getValue = function(element) {
// Flat buttons don't store their value in the DOM.
return '';
};
/**
* Returns the CSS class to be applied to the root element of components
* rendered using this renderer.
* @return {string} Renderer-specific CSS class.
* @override
*/
goog.ui.FlatButtonRenderer.prototype.getCssClass = function() {
return goog.ui.FlatButtonRenderer.CSS_CLASS;
};
// Register a decorator factory function for Flat Buttons.
goog.ui.registry.setDecoratorByClassName(goog.ui.FlatButtonRenderer.CSS_CLASS,
function() {
// Uses goog.ui.Button, but with FlatButtonRenderer.
return new goog.ui.Button(null, goog.ui.FlatButtonRenderer.getInstance());
});