Namespace: cq-ui-manager

WebComponents. cq-ui-manager

Self registering global web component that manages the overall UI on the attached div tag.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

This component keeps track of open menus and dialogs and attaches click and tap (onclick or ontouch) events in order to close them.

By default it is attached to the "body", but it can be changed to a different div tag if this behavior is too broad for your particular implementation.

Classes

UIManager

Methods


attachedCallback()

Attach a callback to an individual component as part of the context.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface


closeMenu(element)

Closes the current acttive menu and resets the activeMenuStack.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface

Parameters:
Name Type Description
element HTMLElement

closeTopMenu()

Since:
  • 6.2.0 Added "cq-close-top" menu attribute to optionally close parent menus

Example
<cq-dialog>
	<cq-drawing-context>
		<cq-menu cq-close-top="cq-dialog[cq-drawing-context]">
			<div>This is a sub-menu</div>
			<cq-menu-dropdown>
				<cq-item>A stxtap event that bubbles to body will call UIManager#closeTopMenu</cq-item>
				<cq-item>With the cq-close-top attribute above, the dialog will be closed as well</cq-item>
			</cq-menu-dropdown>
		</cq-menu>
	</cq-drawing-context>
</cq-dialog>

detachedCallback()

Removes a callback from a component.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface.


ifAllClosed()


openMenu(menu, params)

Opens a menu item within the UI.Context.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface

Parameters:
Name Type Description
menu HTMLElement
params Object

restoreLift(element)

Parameters:
Name Type Description
element HTMLElement

topMenu()

Sets the top level menu in the activeMenuStack.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface

Returns:

activeMenuStack


<static> UIManager#lift()

Lifts a menu to an absolute position on the body, so that it can rise above any overflow: hidden, scroll or iscroll situations.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the WebComponents can be found here: Web Component Interface

Use cq-lift attribute to indicate that the menu should be lifted when opened

context.lifts is an array that contains all of the current lifts so that they can be restored when the menu is closed