239 lines
8.5 KiB
JavaScript
239 lines
8.5 KiB
JavaScript
// 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.MenuButtonRenderer},
|
|
* but inherits from {@link goog.ui.FlatButtonRenderer} instead of
|
|
* {@link goog.ui.CustomButtonRenderer}. This creates a simpler menu button
|
|
* that will look more like a traditional <select> menu.
|
|
*
|
|
*/
|
|
|
|
goog.provide('goog.ui.FlatMenuButtonRenderer');
|
|
|
|
goog.require('goog.a11y.aria');
|
|
goog.require('goog.a11y.aria.State');
|
|
goog.require('goog.asserts');
|
|
goog.require('goog.dom');
|
|
goog.require('goog.string');
|
|
goog.require('goog.style');
|
|
goog.require('goog.ui.Component');
|
|
goog.require('goog.ui.FlatButtonRenderer');
|
|
goog.require('goog.ui.INLINE_BLOCK_CLASSNAME');
|
|
goog.require('goog.ui.Menu');
|
|
goog.require('goog.ui.MenuButton');
|
|
goog.require('goog.ui.MenuRenderer');
|
|
goog.require('goog.ui.registry');
|
|
|
|
|
|
|
|
/**
|
|
* Flat Menu Button renderer. Creates a simpler version of
|
|
* {@link goog.ui.MenuButton} that doesn't look like a button and
|
|
* doesn't have rounded corners. Uses just a <div> and looks more like
|
|
* a traditional <select> element.
|
|
* @constructor
|
|
* @extends {goog.ui.FlatButtonRenderer}
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer = function() {
|
|
goog.ui.FlatButtonRenderer.call(this);
|
|
};
|
|
goog.inherits(goog.ui.FlatMenuButtonRenderer, goog.ui.FlatButtonRenderer);
|
|
goog.addSingletonGetter(goog.ui.FlatMenuButtonRenderer);
|
|
|
|
|
|
/**
|
|
* Default CSS class to be applied to the root element of components rendered
|
|
* by this renderer.
|
|
* @type {string}
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.CSS_CLASS =
|
|
goog.getCssName('goog-flat-menu-button');
|
|
|
|
|
|
/**
|
|
* Returns the button's contents wrapped in the following DOM structure:
|
|
* <div class="goog-inline-block goog-flat-menu-button">
|
|
* <div class="goog-inline-block goog-flat-menu-button-caption">
|
|
* Contents...
|
|
* </div>
|
|
* <div class="goog-inline-block goog-flat-menu-button-dropdown">
|
|
*
|
|
* </div>
|
|
* </div>
|
|
* Overrides {@link goog.ui.FlatButtonRenderer#createDom}.
|
|
* @param {goog.ui.Control} control Button to render.
|
|
* @return {Element} Root element for the button.
|
|
* @override
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.createDom = function(control) {
|
|
var button = /** @type {goog.ui.Button} */ (control);
|
|
var classNames = this.getClassNames(button);
|
|
var attributes = {
|
|
'class': goog.ui.INLINE_BLOCK_CLASSNAME + ' ' + classNames.join(' ')
|
|
};
|
|
var element = button.getDomHelper().createDom('div', attributes,
|
|
[this.createCaption(button.getContent(), button.getDomHelper()),
|
|
this.createDropdown(button.getDomHelper())]);
|
|
this.setTooltip(
|
|
element, /** @type {!string}*/ (button.getTooltip()));
|
|
return element;
|
|
};
|
|
|
|
|
|
/**
|
|
* Takes the button's root element and returns the parent element of the
|
|
* button's contents.
|
|
* @param {Element} element Root element of the button whose content
|
|
* element is to be returned.
|
|
* @return {Element} The button's content element (if any).
|
|
* @override
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.getContentElement = function(element) {
|
|
return element && /** @type {Element} */ (element.firstChild);
|
|
};
|
|
|
|
|
|
/**
|
|
* Updates the flat menu button's ARIA (accessibility) state so that
|
|
* aria-expanded does not appear when the button is "opened."
|
|
* @param {Element} element Element whose ARIA state is to be updated.
|
|
* @param {goog.ui.Component.State} state Component state being enabled or
|
|
* disabled.
|
|
* @param {boolean} enable Whether the state is being enabled or disabled.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.updateAriaState = function(
|
|
element, state, enable) {
|
|
// If button has OPENED state, do not assign an ARIA state. Usually
|
|
// aria-expanded would be assigned, but aria-expanded is not a valid state
|
|
// for a menu button.
|
|
goog.asserts.assertObject(
|
|
element, 'The flat button menu DOM element cannot be null.');
|
|
goog.asserts.assert(goog.string.isEmpty(
|
|
goog.a11y.aria.getState(element, goog.a11y.aria.State.EXPANDED)),
|
|
'Menu buttons do not support the ARIA expanded attribute. ' +
|
|
'Please use ARIA disabled instead.');
|
|
if (state != goog.ui.Component.State.OPENED) {
|
|
goog.base(this, 'updateAriaState', element, state, enable);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Takes an element, decorates it with the menu button control, and returns
|
|
* the element. Overrides {@link goog.ui.CustomButtonRenderer#decorate} by
|
|
* looking for a child element that can be decorated by a menu, and if it
|
|
* finds one, decorates it and attaches it to the menu button.
|
|
* @param {goog.ui.Control} button Menu button to decorate the element.
|
|
* @param {Element} element Element to decorate.
|
|
* @return {Element} Decorated element.
|
|
* @override
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.decorate = function(button, element) {
|
|
// TODO(user): MenuButtonRenderer uses the exact same code.
|
|
// Refactor this block to its own module where both can use it.
|
|
var menuElem = goog.dom.getElementsByTagNameAndClass(
|
|
'*', goog.ui.MenuRenderer.CSS_CLASS, element)[0];
|
|
if (menuElem) {
|
|
// Move the menu element directly under the body, but hide it first; see
|
|
// bug 1089244.
|
|
goog.style.setElementShown(menuElem, false);
|
|
button.getDomHelper().getDocument().body.appendChild(menuElem);
|
|
|
|
// Decorate the menu and attach it to the button.
|
|
var menu = new goog.ui.Menu();
|
|
menu.decorate(menuElem);
|
|
button.setMenu(menu);
|
|
}
|
|
|
|
// Add the caption if it's not already there.
|
|
var captionElem = goog.dom.getElementsByTagNameAndClass(
|
|
'*', goog.getCssName(this.getCssClass(), 'caption'), element)[0];
|
|
if (!captionElem) {
|
|
element.appendChild(
|
|
this.createCaption(element.childNodes, button.getDomHelper()));
|
|
}
|
|
|
|
// Add the dropdown icon if it's not already there.
|
|
var dropdownElem = goog.dom.getElementsByTagNameAndClass(
|
|
'*', goog.getCssName(this.getCssClass(), 'dropdown'), element)[0];
|
|
if (!dropdownElem) {
|
|
element.appendChild(this.createDropdown(button.getDomHelper()));
|
|
}
|
|
|
|
// Let the superclass do the rest.
|
|
return goog.ui.FlatMenuButtonRenderer.superClass_.decorate.call(this, button,
|
|
element);
|
|
};
|
|
|
|
|
|
/**
|
|
* Takes a text caption or existing DOM structure, and returns it wrapped in
|
|
* an appropriately-styled DIV. Creates the following DOM structure:
|
|
* <div class="goog-inline-block goog-flat-menu-button-caption">
|
|
* Contents...
|
|
* </div>
|
|
* @param {goog.ui.ControlContent} content Text caption or DOM structure to wrap
|
|
* in a box.
|
|
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
|
|
* @return {Element} Caption element.
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.createCaption = function(content,
|
|
dom) {
|
|
return dom.createDom('div',
|
|
goog.ui.INLINE_BLOCK_CLASSNAME + ' ' +
|
|
goog.getCssName(this.getCssClass(), 'caption'), content);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns an appropriately-styled DIV containing a dropdown arrow element.
|
|
* Creates the following DOM structure:
|
|
* <div class="goog-inline-block goog-flat-menu-button-dropdown">
|
|
*
|
|
* </div>
|
|
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
|
|
* @return {Element} Dropdown element.
|
|
*/
|
|
goog.ui.FlatMenuButtonRenderer.prototype.createDropdown = function(dom) {
|
|
// 00A0 is
|
|
return dom.createDom('div',
|
|
goog.ui.INLINE_BLOCK_CLASSNAME + ' ' +
|
|
goog.getCssName(this.getCssClass(), 'dropdown'), '\u00A0');
|
|
};
|
|
|
|
|
|
/**
|
|
* 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.FlatMenuButtonRenderer.prototype.getCssClass = function() {
|
|
return goog.ui.FlatMenuButtonRenderer.CSS_CLASS;
|
|
};
|
|
|
|
|
|
// Register a decorator factory function for Flat Menu Buttons.
|
|
goog.ui.registry.setDecoratorByClassName(
|
|
goog.ui.FlatMenuButtonRenderer.CSS_CLASS,
|
|
function() {
|
|
// Uses goog.ui.MenuButton, but with FlatMenuButtonRenderer.
|
|
return new goog.ui.MenuButton(null, null,
|
|
goog.ui.FlatMenuButtonRenderer.getInstance());
|
|
});
|
|
|