/**
* @license
* Copyright The Closure Library Authors.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Renderer for {@link goog.ui.style.app.MenuButton}s and
* subclasses.
*/
goog.provide('goog.ui.style.app.MenuButtonRenderer');
goog.require('goog.a11y.aria.Role');
goog.require('goog.array');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.style');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuRenderer');
goog.require('goog.ui.style.app.ButtonRenderer');
goog.requireType('goog.ui.Control');
goog.requireType('goog.ui.ControlContent');
goog.requireType('goog.ui.MenuButton');
/**
* Renderer for {@link goog.ui.style.app.MenuButton}s. This implementation
* overrides {@link goog.ui.style.app.ButtonRenderer#createButton} to insert a
* dropdown element into the content element after the specified content.
* @constructor
* @extends {goog.ui.style.app.ButtonRenderer}
* @final
*/
goog.ui.style.app.MenuButtonRenderer = function() {
'use strict';
goog.ui.style.app.ButtonRenderer.call(this);
};
goog.inherits(
goog.ui.style.app.MenuButtonRenderer, goog.ui.style.app.ButtonRenderer);
goog.addSingletonGetter(goog.ui.style.app.MenuButtonRenderer);
/**
* Default CSS class to be applied to the root element of components rendered
* by this renderer.
* @type {string}
*/
goog.ui.style.app.MenuButtonRenderer.CSS_CLASS =
goog.getCssName('goog-menu-button');
/**
* Array of arrays of CSS classes that we want composite classes added and
* removed for in IE6 and lower as a workaround for lack of multi-class CSS
* selector support.
* @type {!Array<Array<string>>}
*/
goog.ui.style.app.MenuButtonRenderer.IE6_CLASS_COMBINATIONS = [
[
goog.getCssName('goog-button-base-rtl'), goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-hover'),
goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-focused'),
goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-disabled'),
goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-active'),
goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-open'),
goog.getCssName('goog-menu-button')
],
[
goog.getCssName('goog-button-base-active'),
goog.getCssName('goog-button-base-open'),
goog.getCssName('goog-menu-button')
]
];
/**
* Returns the ARIA role to be applied to menu buttons, which
* have a menu attached to them.
* @return {goog.a11y.aria.Role} ARIA role.
* @override
*/
goog.ui.style.app.MenuButtonRenderer.prototype.getAriaRole = function() {
'use strict';
// If we apply the 'button' ARIA role to the menu button, the
// screen reader keeps referring to menus as buttons, which
// might be misleading for the users. Hence the ARIA role
// 'menu' is assigned.
return goog.a11y.aria.Role.MENU;
};
/**
* Takes the button's root element and returns the parent element of the
* button's contents. Overrides the superclass implementation by taking
* the nested DIV structure of menu buttons into account.
* @param {Element} element Root element of the button whose content element
* is to be returned.
* @return {Element} The button's content element.
* @override
*/
goog.ui.style.app.MenuButtonRenderer.prototype.getContentElement = function(
element) {
'use strict';
return goog.ui.style.app.MenuButtonRenderer.superClass_.getContentElement
.call(this, element);
};
/**
* Takes an element, decorates it with the menu button control, and returns
* the element. Overrides {@link goog.ui.style.app.ButtonRenderer#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} control goog.ui.MenuButton to decorate the element.
* @param {Element} element Element to decorate.
* @return {Element} Decorated element.
* @override
*/
goog.ui.style.app.MenuButtonRenderer.prototype.decorate = function(
control, element) {
'use strict';
const button = /** @type {goog.ui.MenuButton} */ (control);
// TODO(attila): Add more robust support for subclasses of goog.ui.Menu.
const 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 to
// prevent flicker; see bug 1089244).
goog.style.setElementShown(menuElem, false);
goog.dom.appendChild(goog.dom.getOwnerDocument(menuElem).body, menuElem);
// Decorate the menu and attach it to the button.
const menu = new goog.ui.Menu();
menu.decorate(menuElem);
button.setMenu(menu);
}
// Let the superclass do the rest.
return goog.ui.style.app.MenuButtonRenderer.superClass_.decorate.call(
this, button, element);
};
/**
* Takes a text caption or existing DOM structure, and returns the content and
* a dropdown arrow element wrapped in a pseudo-rounded-corner box. Creates
* the following DOM structure:
*
* <div class="goog-inline-block goog-button-outer-box">
* <div class="goog-inline-block goog-button-inner-box">
* <div class="goog-button-pos">
* <div class="goog-button-top-shadow"> </div>
* <div class="goog-button-content">
* Contents...
* <div class="goog-menu-button-dropdown"> </div>
* </div>
* </div>
* </div>
* </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} Pseudo-rounded-corner box containing the content.
* @override
*/
goog.ui.style.app.MenuButtonRenderer.prototype.createButton = function(
content, dom) {
'use strict';
const contentWithDropdown = this.createContentWithDropdown(content, dom);
return goog.ui.style.app.MenuButtonRenderer.superClass_.createButton.call(
this, contentWithDropdown, dom);
};
/** @override */
goog.ui.style.app.MenuButtonRenderer.prototype.setContent = function(
element, content) {
'use strict';
const dom = goog.dom.getDomHelper(this.getContentElement(element));
goog.ui.style.app.MenuButtonRenderer.superClass_.setContent.call(
this, element, this.createContentWithDropdown(content, dom));
};
/**
* Inserts dropdown element as last child of existing content.
* @param {goog.ui.ControlContent} content Text caption or DOM structure.
* @param {goog.dom.DomHelper} dom DOM helper, used for document ineraction.
* @return {!Array<Node>} DOM structure to be set as the button's content.
*/
goog.ui.style.app.MenuButtonRenderer.prototype.createContentWithDropdown =
function(content, dom) {
'use strict';
const caption = dom.createDom(
goog.dom.TagName.DIV, null, content, this.createDropdown(dom));
return goog.array.toArray(caption.childNodes);
};
/**
* Returns an appropriately-styled DIV containing a dropdown arrow.
* Creates the following DOM structure:
*
* <div class="goog-menu-button-dropdown"> </div>
*
* @param {goog.dom.DomHelper} dom DOM helper, used for document interaction.
* @return {!Element} Dropdown element.
*/
goog.ui.style.app.MenuButtonRenderer.prototype.createDropdown = function(dom) {
'use strict';
return dom.createDom(
goog.dom.TagName.DIV, goog.getCssName(this.getCssClass(), 'dropdown'));
};
/**
* 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.style.app.MenuButtonRenderer.prototype.getCssClass = function() {
'use strict';
return goog.ui.style.app.MenuButtonRenderer.CSS_CLASS;
};
/** @override */
goog.ui.style.app.MenuButtonRenderer.prototype.getIe6ClassCombinations =
function() {
'use strict';
return goog.ui.style.app.MenuButtonRenderer.IE6_CLASS_COMBINATIONS;
};
Codebase Browser
chromium