API Reference
Namespaces
Classes
Events
Global
Externals

Class: UIManager

CIQ.UI. UIManager

This is a custom HtmlElement (Web Component). The tag name is the following:

<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 to close them.

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


new UIManager()

See:

Extends

  • HTMLElement

Methods


closeMenu( [menu] [, tagFilter])

Closes the current active menu and resets the active menu stack.

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.

Parameters:
Name Type Argument Description
menu HTMLElement <optional>

The menu to be closed. If a menu is not specified, all active menus are closed.

tagFilter string <optional>

Accepts a comma delimited list of tagNames and closes only matching tags.

Since:
  • 8.7.0 Modified tagFilter parameter to accept a comma seperated list of tag names.


closeOpenColorPicker()

Close open color picker

Since:
  • 8.9.2


closeTopMenu()

Closes the menu that is at the top of the active menu stack.

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>

connectedCallback()

Attaches a "resize" event listener 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 web components can be found here: Web Component Interface.


disconnectedCallback()

Removes a "resize" event listener 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.


getColorPicker(el)

Return the color picker and if necessary create one for the scope of the given element

Parameters:
Name Type Description
el HTMLElement

Element for which to get color picker

Since:
  • 8.9.2

Returns:

Color picker from the element context

Type
CIQ.UI.ColorPicker

ifAllClosed()

Ends modal mode if there are no active menus. See also CIQ.ChartEngine#modalEnd.


initializeMenuListeners(stx)

Adds "menu" listener for CIQ.ChartEngine#callbackListeners.

Parameters:
Name Type Description
stx CIQ.ChartEngine
Since:
  • 8.4.0


lift(element)

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

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.

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

Parameters:
Name Type Description
element HTMLElement

DOM node to be lifted.


openMenu(menu, params)

Opens a menu item within the chart CIQ.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 web components can be found here: Web Component Interface.

Parameters:
Name Type Description
menu HTMLElement

The menu to be opened.

params object

Configuration parameters for the opened menu.


topMenu()

Gets the topmost menu in the active menu stack.

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.

Returns:

The topmost active menu.

Type
HTMLElement