The goog.ui.SubMenuRenderer Class

Default renderer for {@link goog.ui.SubMenu}s. Each item has the following structure:

.CSS_CLASS {string}

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

.canDecorate(element)

Returns true if this renderer can decorate the element, false otherwise. The default implementation always returns true.

`.createContent(content, dom)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Wraps the given text caption or existing DOM node(s) in a structural element containing the menu item's contents.

content {goog.ui.ControlContent}: Menu item contents.
dom {goog.dom.DomHelper}: DOM helper for document interaction.
returns {Element}: Menu item content element.

.createDom(control)

Overrides {@link goog.ui.MenuItemRenderer#createDom} by adding the additional class 'goog-submenu' to the created element, and passes the element to {@link goog.ui.SubMenuItemRenderer#addArrow_} to add an child element that can be styled to show an arrow.

.decorate(control, element)

Overrides {@link goog.ui.MenuItemRenderer#decorate} by adding the additional class 'goog-submenu' to the decorated element, and passing the element to {@link goog.ui.SubMenuItemRenderer#addArrow_} to add a child element that can be styled to show an arrow. Also searches the element for a child with the class goog-menu. If a matching child element is found, creates a goog.ui.Menu, uses it to decorate the child element, and passes that menu to subMenu.setMenu.

.enableClassName(control, className, enable)

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.

.enableExtraClassName(control, className, enable)

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

.getAriaRole()

Returns the ARIA role to be applied to the control. See http://wiki/Main/ARIA for more info.

`.getClassForState(state)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Takes a single {@link goog.ui.Component.State}, and returns the corresponding CSS class name (null if none). Overrides the superclass implementation by using 'highlight' as opposed to 'hover' as the CSS class name suffix for the HOVER state, for backwards compatibility.

state {goog.ui.Component.State}: Component state.
returns {string|undefined}: CSS class representing the given state (undefined if none).

`.getClassNames(control)` [protected]

Inherited from goog.ui.ControlRenderer .

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 {@link #getCssClass}, followed by
the structural CSS class returned by {@link getStructuralCssClass} (if different from the renderer-specific CSS class), followed by
any state-specific classes returned by {@link #getClassNamesForState}, followed by
any extra classes returned by the control's {@code getExtraClassNames} method and
for IE6 and lower, additional combined classes from {@link 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.

control {goog.ui.Control}: Control whose CSS classes are to be returned.
returns {Array.<string>}: Array of CSS class names applicable to the control.

`.getClassNamesForState(state)` [protected]

Inherited from goog.ui.ControlRenderer .

Takes a bit mask of {@link goog.ui.Component.State}s, 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 {@link getClassForState} method to generate each state-specific class.

state {number}: Bit mask of component states.
returns {!Array.<string>}: Array of CSS class names representing the given state.

.getContentElement(element)

Takes the control's root element and returns the parent element of the control's contents. Since by default controls are rendered as a single DIV, the default implementation returns the element itself. Subclasses with more complex DOM structures must override this method as needed.

.getCssClass()

Returns the CSS class name to be applied to the root element of all components rendered or decorated using this renderer. The class name is expected to uniquely identify the renderer class, i.e. no two renderer classes are expected to share the same CSS class name.

.getIe6ClassCombinations()

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

.getKeyEventTarget(control)

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.

`.getStateFromClass(className)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Takes a single CSS class name which may represent a component state, and returns the corresponding component state (0x00 if none). Overrides the superclass implementation by treating 'goog-option-selected' as special, for backwards compatibility.

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).

.getStructuralCssClass()

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 {@link #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 {@link #getCssClass}, but subclasses are expected to override this method as needed.

`.hasCheckBoxStructure(element)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Determines whether the item contains a checkbox element.

element {Element}: Menu item root element.
returns {boolean}: Whether the element contains a checkbox element.

`.hasContentStructure(element)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Returns true if the element appears to have a proper menu item structure by checking whether its first child has the appropriate structural class name.

element {Element}: Element to check.
returns {boolean}: Whether the element appears to have a proper menu item DOM.

.initializeDom(control)

Overrides {@link goog.ui.MenuItemRenderer#initializeDom} to tweak the DOM structure for the span.goog-submenu-arrow element depending on the text direction (LTR or RTL). When the SubMenu is RTL the arrow will be given the additional class of goog-submenu-arrow-rtl, and the arrow will be moved up to be the first child in the SubMenu's element. Otherwise the arrow will have the class goog-submenu-arrow-ltr, and be kept as the last child of the SubMenu's element.

.isFocusable(control)

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

.setAllowTextSelection(element, allow)

.setAriaRole(element, opt_preferredRole)

.setAriaStates(control, element)

Sets the element's ARIA states. An element does not need an ARIA role in order to have an ARIA state. Only states which are initialized to be true will be set.

.setCheckable(item, element, checkable)

.setContent(element, content)

Takes a menu item's root element, and sets its content to the given text caption or DOM structure. Overrides the superclass immplementation by making sure that the submenu arrow structure is preserved.

`.setEnableCheckBoxStructure(item, element, enable)` [protected]

Inherited from goog.ui.MenuItemRenderer .

Adds or removes extra markup and CSS styling to the menu item to make it selectable or non-selectable, depending on the value of the {@code selectable} argument.

item {goog.ui.Control}: Menu item to update.
element {Element}: Menu item element to update.
enable {boolean}: Whether to add or remove the checkbox structure.

.setFocusable(control, focusable)

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

.setRightToLeft(element, rightToLeft)

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.

.setSelectable(item, element, selectable)

.setState(control, state, enable)

.setVisible(element, visible)

`.updateAriaState(element, state, enable)` [protected]

Inherited from goog.ui.ControlRenderer .

Updates the element's ARIA (accessibility) state.

element {Element}: 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.

The `goog.ui.SubMenuRenderer` Class

`goog.ui.SubMenuRenderer()`

`.CSS_CLASS` {`string`}

`.canDecorate(element)`

`.createContent(content, dom)` [protected]

`.createDom(control)`

`.decorate(control, element)`

`.enableClassName(control, className, enable)`

`.enableExtraClassName(control, className, enable)`

`.getAriaRole()`

`.getClassForState(state)` [protected]

`.getClassNames(control)` [protected]

`.getClassNamesForState(state)` [protected]

`.getContentElement(element)`

`.getCssClass()`

`.getIe6ClassCombinations()`

`.getKeyEventTarget(control)`

`.getStateFromClass(className)` [protected]

`.getStructuralCssClass()`

`.hasCheckBoxStructure(element)` [protected]

`.hasContentStructure(element)` [protected]

`.initializeDom(control)`

`.isFocusable(control)`

`.setAllowTextSelection(element, allow)`

`.setAriaRole(element, opt_preferredRole)`

`.setAriaStates(control, element)`

`.setCheckable(item, element, checkable)`

`.setContent(element, content)`

`.setEnableCheckBoxStructure(item, element, enable)` [protected]

`.setFocusable(control, focusable)`

`.setRightToLeft(element, rightToLeft)`

`.setSelectable(item, element, selectable)`

`.setState(control, state, enable)`

`.setVisible(element, visible)`

`.updateAriaState(element, state, enable)` [protected]

The goog.ui.SubMenuRenderer Class

goog.ui.SubMenuRenderer()

.CSS_CLASS {string}

.canDecorate(element)

.createContent(content, dom) [protected]

.createDom(control)

.decorate(control, element)

.enableClassName(control, className, enable)

.enableExtraClassName(control, className, enable)

.getAriaRole()

.getClassForState(state) [protected]

.getClassNames(control) [protected]

.getClassNamesForState(state) [protected]

.getContentElement(element)

.getCssClass()

.getIe6ClassCombinations()

.getKeyEventTarget(control)

.getStateFromClass(className) [protected]

.getStructuralCssClass()

.hasCheckBoxStructure(element) [protected]

.hasContentStructure(element) [protected]

.initializeDom(control)

.isFocusable(control)

.setAllowTextSelection(element, allow)

.setAriaRole(element, opt_preferredRole)

.setAriaStates(control, element)

.setCheckable(item, element, checkable)

.setContent(element, content)

.setEnableCheckBoxStructure(item, element, enable) [protected]

.setFocusable(control, focusable)

.setRightToLeft(element, rightToLeft)

.setSelectable(item, element, selectable)

.setState(control, state, enable)

.setVisible(element, visible)

.updateAriaState(element, state, enable) [protected]

The `goog.ui.SubMenuRenderer` Class

`goog.ui.SubMenuRenderer()`

`.CSS_CLASS` {`string`}

`.canDecorate(element)`

`.createContent(content, dom)` [protected]

`.createDom(control)`

`.decorate(control, element)`

`.enableClassName(control, className, enable)`

`.enableExtraClassName(control, className, enable)`

`.getAriaRole()`

`.getClassForState(state)` [protected]

`.getClassNames(control)` [protected]

`.getClassNamesForState(state)` [protected]

`.getContentElement(element)`

`.getCssClass()`

`.getIe6ClassCombinations()`

`.getKeyEventTarget(control)`

`.getStateFromClass(className)` [protected]

`.getStructuralCssClass()`

`.hasCheckBoxStructure(element)` [protected]

`.hasContentStructure(element)` [protected]

`.initializeDom(control)`

`.isFocusable(control)`

`.setAllowTextSelection(element, allow)`

`.setAriaRole(element, opt_preferredRole)`

`.setAriaStates(control, element)`

`.setCheckable(item, element, checkable)`

`.setContent(element, content)`

`.setEnableCheckBoxStructure(item, element, enable)` [protected]

`.setFocusable(control, focusable)`

`.setRightToLeft(element, rightToLeft)`

`.setSelectable(item, element, selectable)`

`.setState(control, state, enable)`

`.setVisible(element, visible)`

`.updateAriaState(element, state, enable)` [protected]