goog.ui.style.app.ButtonRenderer

Provided By	`goog.ui.style.app.ButtonRenderer`
Extends	`goog.ui.CustomButtonRenderer` `goog.ui.ButtonRenderer` `goog.ui.ControlRenderer`
All Known Direct Subclasses	`goog.ui.style.app.MenuButtonRenderer` `goog.ui.style.app.PrimaryActionButtonRenderer`

Custom renderer for goog.ui.Buttons. Imageless buttons can contain almost arbitrary HTML content, will flow like inline elements, but can be styled like block-level elements.

new ButtonRenderer()

Parameters	None.

VIEW SOURCE

Instance Methods

Returns true if this renderer can decorate the element. Overrides goog.ui.ButtonRenderer#canDecorate by returning true if the element is a DIV, false otherwise.

Defined by

goog.ui.CustomButtonRenderer

Overrides

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	Element to decorate.

Returns

boolean

Whether the renderer can decorate the element.

VIEW SOURCE

Takes a text caption or existing DOM structure, and returns the content wrapped in a pseudo-rounded-corner box. Creates the following DOM structure:

<div class="goog-inline-block goog-button-base-outer-box">
  <div class="goog-inline-block goog-button-base-inner-box">
    <div class="goog-button-base-pos">
      <div class="goog-button-base-top-shadow">&nbsp;</div>
      <div class="goog-button-base-content">Contents...</div>
    </div>
  </div>
</div>

Used by both #createDom and #decorate. To be overridden by subclasses.

Overrides

goog.ui.CustomButtonRenderer

Parameters

`content`	`(string\|Node\|Array<Node>\|NodeList<Node>\|null)`
	Text caption or DOM structure to wrap in a box.
`dom`	`(goog.dom.DomHelper\|null)`
	DOM helper, used for document interaction.

Returns

Element

Pseudo-rounded-corner box containing the content.

VIEW SOURCE

Returns the button's contents wrapped in the following DOM structure:

<div class="goog-inline-block goog-custom-button">
  <div class="goog-inline-block goog-custom-button-outer-box">
    <div class="goog-inline-block goog-custom-button-inner-box">
      Contents...
    </div>
  </div>
</div>

Overrides goog.ui.ButtonRenderer#createDom.

Defined by

goog.ui.CustomButtonRenderer

Overrides

goog.ui.ButtonRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	goog.ui.Button to render.

Returns

Element

Root element for the button.

VIEW SOURCE

Takes an existing element and decorates it with the custom 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 goog.ui.ButtonRenderer#decorate.

Defined by

goog.ui.CustomButtonRenderer

Overrides

goog.ui.ButtonRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Button instance to decorate the element.
`element`	`(Element\|null)`
	Element to decorate.

Returns

(Element|null)

Decorated element.

VIEW SOURCE

Updates the control's DOM by adding or removing the specified class name to/from its root element. May add additional combined classes as needed in IE6 and lower. Because of this, subclasses should use this method when modifying class names on the control's root element.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|Element\|null)`
	Control instance (or root element) to be updated.
`className`	`string`
	CSS class name to add or remove.
`enable`	`boolean`
	Whether to add or remove the class name.

VIEW SOURCE

Updates the control's DOM by adding or removing the specified extra class name to/from its element.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control to be updated.
`className`	`string`
	CSS class name to add or remove.
`enable`	`boolean`
	Whether to add or remove the class name.

VIEW SOURCE

Returns the ARIA role to be applied to custom buttons.

Defined by

goog.ui.CustomButtonRenderer

Overrides

goog.ui.ButtonRenderer

Parameters

None.

Returns

(goog.a11y.aria.Role|undefined)

ARIA role.

VIEW SOURCE

Takes a single goog.ui.Component.State, and returns the corresponding CSS class name (null if none).

Defined by

goog.ui.ControlRenderer

Parameters

`state`	`goog.ui.Component.State`
	Component state.

Returns

(string|undefined)

CSS class representing the given state (undefined if none).

VIEW SOURCE

Returns all CSS class names applicable to the given control, based on its state. The return value is an array of strings containing

the renderer-specific CSS class returned by #getCssClass, followed by
the structural CSS class returned by getStructuralCssClass (if different from the renderer-specific CSS class), followed by
any state-specific classes returned by #getClassNamesForState, followed by
any extra classes returned by the control's `getExtraClassNames` method and
for IE6 and lower, additional combined classes from getAppliedCombinedClassNames_.

Since all controls have at least one renderer-specific CSS class name, this method is guaranteed to return an array of at least one element.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control whose CSS classes are to be returned.

Returns

Array<string>

Array of CSS class names applicable to the control.

VIEW SOURCE

Takes a bit mask of goog.ui.Component.States, and returns an array of the appropriate class names representing the given state, suitable to be applied to the root element of a component rendered using this renderer, or null if no state-specific classes need to be applied. This default implementation uses the renderer's getClassForState method to generate each state-specific class.

Defined by

goog.ui.ControlRenderer

Parameters

`state`	`number`
	Bit mask of component states.

Returns

Array<string>

Array of CSS class names representing the given state.

VIEW SOURCE

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 custom buttons into account.

Overrides

goog.ui.CustomButtonRenderer

Parameters

`element`	`(Element\|null)`
	Root element of the button whose content element is to be returned.

Returns

(Element|null)

The button's content element (if any).

VIEW SOURCE

Returns the CSS class to be applied to the root element of components rendered using this renderer.

Overrides

goog.ui.CustomButtonRenderer

Parameters

None.

Returns

string

Renderer-specific CSS class.

VIEW SOURCE

Returns an array of combinations of classes to apply combined class names for in IE6 and below. See IE6_CLASS_COMBINATIONS for more detail. This method doesn't reference IE6_CLASS_COMBINATIONS so that it can be compiled out, but subclasses should return their IE6_CLASS_COMBINATIONS static constant instead.

Overrides

goog.ui.ControlRenderer

Parameters

None.

Returns

Array<(Array<string>|null)>

Array of class name combinations.

VIEW SOURCE

Returns the element within the component's DOM that should receive keyboard focus (null if none). The default implementation returns the control's root element.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control whose key event target is to be returned.

Returns

(Element|null)

The key event target.

VIEW SOURCE

Takes a single CSS class name which may represent a component state, and returns the corresponding component state (0x00 if none).

Defined by

goog.ui.ControlRenderer

Parameters

`className`	`string`
	CSS class name, possibly representing a component state.

Returns

goog.ui.Component.State

state Component state corresponding to the given CSS class (0x00 if none).

VIEW SOURCE

Returns the name of a DOM structure-specific CSS class to be applied to the root element of all components rendered or decorated using this renderer. Unlike the class name returned by #getCssClass, the structural class name may be shared among different renderers that generate similar DOM structures. The structural class name also serves as the basis of derived class names used to identify and style structural elements of the control's DOM, as well as the basis for state-specific class names. The default implementation returns the same class name as #getCssClass, but subclasses are expected to override this method as needed.

Overrides

goog.ui.ControlRenderer

Parameters

None.

Returns

string

DOM structure-specific CSS class name (same as the renderer- specific CSS class name by default).

VIEW SOURCE

Takes a button's root element, and returns its tooltip text.

Defined by

goog.ui.ButtonRenderer

Parameters

`element`	`(Element\|null)`
	The button's root element.

Returns

(string|undefined)

The tooltip text.

VIEW SOURCE

Takes a button's root element, and returns the value associated with it. No-op in the base class.

Defined by

goog.ui.ButtonRenderer

Parameters

`element`	`(Element\|null)`
	The button's root element.

Returns

(string|undefined)

The button's value (undefined if none).

VIEW SOURCE

Check if the button's element has a box structure.

Overrides

goog.ui.CustomButtonRenderer

Parameters

`button`	`(goog.ui.Button\|null)`
	Button instance whose structure is being checked.
`element`	`(Element\|null)`
	Element of the button.

Returns

boolean

Whether the element has a box structure.

VIEW SOURCE

Initializes the control's DOM by configuring properties that can only be set after the DOM has entered the document. This implementation sets up BiDi and keyboard focus. Called from goog.ui.Control#enterDocument.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control whose DOM is to be initialized as it enters the document.

VIEW SOURCE

Returns true if the control's key event target supports keyboard focus (based on its tabIndex attribute), false otherwise.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control whose key event target is to be checked.

Returns

boolean

Whether the control's key event target is focusable.

VIEW SOURCE

Allows or disallows text selection within the control's DOM.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	The control's root element.
`allow`	`boolean`
	Whether the element should allow text selection.

VIEW SOURCE

Sets the element's ARIA label. This should be overriden by subclasses that don't apply the role directly on control.element_.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`Element`
	Element whose ARIA label is to be updated.
`ariaLabel`	`string`
	Label to add to the element.

VIEW SOURCE

Sets the element's ARIA role.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	Element to update.
`opt_preferredRole`	`(goog.a11y.aria.Role\|null)=`
	The preferred ARIA role.

VIEW SOURCE

Sets the element's ARIA attributes, including distinguishing between universally supported ARIA properties and ARIA states that are only supported by certain ARIA roles. Only attributes which are initialized to be true will be set.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`goog.ui.Control`
	Control whose ARIA state will be updated.
`element`	`Element`
	Element whose ARIA state is to be updated.

VIEW SOURCE

Collapses the border on one or both sides of the button, allowing it to be combined with the adjacent button(s), forming a single UI componenet with multiple targets.

Defined by

goog.ui.ButtonRenderer

Parameters

`button`	`(goog.ui.Button\|null)`
	Button to update.
`sides`	`number`
	Bitmap of one or more `goog.ui.ButtonSide`s for which borders should be collapsed.

VIEW SOURCE

Takes a control's root element, and sets its content to the given text caption or DOM structure. The default implementation replaces the children of the given element. Renderers that create more complex DOM structures must override this method accordingly.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	The control's root element.
`content`	`(string\|Node\|Array<Node>\|NodeList<Node>\|null)`
	Text caption or DOM structure to be set as the control's content. The DOM nodes will not be cloned, they will only moved under the content element of the control.

VIEW SOURCE

Updates the control's key event target to make it focusable or non-focusable via its tabIndex attribute. Does nothing if the control doesn't support the FOCUSED state, or if it has no key event target.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control whose key event target is to be updated.
`focusable`	`boolean`
	Whether to enable keyboard focus support on the control's key event target.

VIEW SOURCE

Applies special styling to/from the control's element if it is rendered right-to-left, and removes it if it is rendered left-to-right.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	The control's root element.
`rightToLeft`	`boolean`
	Whether the component is rendered right-to-left.

VIEW SOURCE

Updates the appearance of the control in response to a state change.

Defined by

goog.ui.ControlRenderer

Parameters

`control`	`(goog.ui.Control\|null)`
	Control instance to update.
`state`	`goog.ui.Component.State`
	State to enable or disable.
`enable`	`boolean`
	Whether the control is entering or exiting the state.

VIEW SOURCE

Takes a button's root element and a tooltip string, and updates the element with the new tooltip.

Defined by

goog.ui.ButtonRenderer

Parameters

`element`	`(Element\|null)`
	The button's root element.
`tooltip`	`string`
	New tooltip text.

VIEW SOURCE

Takes a button's root element and a value, and updates the element to reflect the new value. No-op in the base class.

Defined by

goog.ui.ButtonRenderer

Parameters

`element`	`(Element\|null)`
	The button's root element.
`value`	`string`
	New value.

VIEW SOURCE

Shows or hides the element.

Defined by

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	Element to update.
`visible`	`boolean`
	Whether to show the element.

VIEW SOURCE

Updates the button's ARIA (accessibility) state if the button is being treated as a checkbox. Also makes sure that attributes which aren't supported by buttons aren't being added.

Defined by

goog.ui.ButtonRenderer

Overrides

goog.ui.ControlRenderer

Parameters

`element`	`(Element\|null)`
	Element whose ARIA state is to be updated.
`state`	`goog.ui.Component.State`
	Component state being enabled or disabled.
`enable`	`boolean`
	Whether the state is being enabled or disabled.

VIEW SOURCE

Static Functions

Parameters

None.

Returns

goog.ui.style.app.ButtonRenderer

VIEW SOURCE

Static Properties

Default CSS class to be applied to the root element of components rendered by this renderer.

VIEW SOURCE

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.

VIEW SOURCE

goog.ui.style.app.ButtonRenderer

new ButtonRenderer()

Instance Methods

this.canDecorate( element ) → boolean

this.createButton( content, dom ) → Element

this.createDom( control ) → Element

this.decorate( control, element ) → (Element|null)

this.enableClassName( control, className, enable ) → void

this.enableExtraClassName( control, className, enable ) → void

this.getAriaRole() → (goog.a11y.aria.Role|undefined)

this.getClassForState( state ) → (string|undefined)

this.getClassNames( control ) → Array<string>

this.getClassNamesForState( state ) → Array<string>

this.getContentElement( element ) → (Element|null)

this.getCssClass() → string

this.getIe6ClassCombinations() → Array<(Array<string>|null)>

this.getKeyEventTarget( control ) → (Element|null)

this.getStateFromClass( className ) → goog.ui.Component.State

this.getStructuralCssClass() → string

this.getTooltip( element ) → (string|undefined)

this.getValue( element ) → (string|undefined)

this.hasBoxStructure( button, element ) → boolean

this.initializeDom( control ) → void

this.isFocusable( control ) → boolean

this.setAllowTextSelection( element, allow ) → void

this.setAriaLabel( element, ariaLabel ) → void

this.setAriaRole( element, opt_preferredRole ) → void

this.setAriaStates( control, element ) → void

this.setCollapsed( button, sides ) → void

this.setContent( element, content ) → void

this.setFocusable( control, focusable ) → void

this.setRightToLeft( element, rightToLeft ) → void

this.setState( control, state, enable ) → void

this.setTooltip( element, tooltip ) → void

this.setValue( element, value ) → void

this.setVisible( element, visible ) → void

this.updateAriaState( element, state, enable ) → void

Static Functions

ButtonRenderer.getInstance() → goog.ui.style.app.ButtonRenderer

Static Properties

ButtonRenderer.CSS_CLASS → string

ButtonRenderer.IE6_CLASS_COMBINATIONS → Array<(Array<string>|null)>

`this.`canDecorate( `element` ) `→` `boolean`

`this.`createButton( `content`, `dom` ) `→` `Element`

`this.`createDom( `control` ) `→` `Element`

`this.`decorate( `control`, `element` ) `→` `(Element|null)`

`this.`enableClassName( `control`, `className`, `enable` ) `→` `void`

`this.`enableExtraClassName( `control`, `className`, `enable` ) `→` `void`

`this.`getAriaRole() `→` `(goog.a11y.aria.Role|undefined)`

`this.`getClassForState( `state` ) `→` `(string|undefined)`

`this.`getClassNames( `control` ) `→` `Array<string>`

`this.`getClassNamesForState( `state` ) `→` `Array<string>`

`this.`getContentElement( `element` ) `→` `(Element|null)`

`this.`getCssClass() `→` `string`

`this.`getIe6ClassCombinations() `→` `Array<(Array<string>|null)>`

`this.`getKeyEventTarget( `control` ) `→` `(Element|null)`

`this.`getStateFromClass( `className` ) `→` `goog.ui.Component.State`

`this.`getStructuralCssClass() `→` `string`

`this.`getTooltip( `element` ) `→` `(string|undefined)`

`this.`getValue( `element` ) `→` `(string|undefined)`

`this.`hasBoxStructure( `button`, `element` ) `→` `boolean`

`this.`initializeDom( `control` ) `→` `void`

`this.`isFocusable( `control` ) `→` `boolean`

`this.`setAllowTextSelection( `element`, `allow` ) `→` `void`

`this.`setAriaLabel( `element`, `ariaLabel` ) `→` `void`

`this.`setAriaRole( `element`, `opt_preferredRole` ) `→` `void`

`this.`setAriaStates( `control`, `element` ) `→` `void`

`this.`setCollapsed( `button`, `sides` ) `→` `void`

`this.`setContent( `element`, `content` ) `→` `void`

`this.`setFocusable( `control`, `focusable` ) `→` `void`

`this.`setRightToLeft( `element`, `rightToLeft` ) `→` `void`

`this.`setState( `control`, `state`, `enable` ) `→` `void`

`this.`setTooltip( `element`, `tooltip` ) `→` `void`

`this.`setValue( `element`, `value` ) `→` `void`

`this.`setVisible( `element`, `visible` ) `→` `void`

`this.`updateAriaState( `element`, `state`, `enable` ) `→` `void`

ButtonRenderer.getInstance() `→` `goog.ui.style.app.ButtonRenderer`

ButtonRenderer.CSS_CLASS `→` `string`

ButtonRenderer.IE6_CLASS_COMBINATIONS `→` `Array<(Array<string>|null)>`