// 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 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: *
*
* Contents... *
*
*   *
*
* 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: *
* Contents... *
* @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: *
*   *
* @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()); });