Display a right-click activated Context Menu which provides a dropdown menu of options A ContextMenu is constructed by designating a parent HTML container and a target selector An Array of menuItems defines the entries of the menu which is displayed

Constructors

  • Parameters

    • element: any

      The containing HTML element within which the menu is positioned

    • selector: string

      A CSS selector which activates the context menu.

    • menuItems: ContextMenuEntry[]

      An Array of entries to display in the menu

    • Optional options: {
          eventName: string;
          onOpen: ContextMenuCallback;
          onClose: ContextMenuCallback;
      } = {}

      Additional options to configure the context menu.

      • eventName: string

        Optionally override the triggering event which can spawn the menu

      • onOpen: ContextMenuCallback

        A function to call when the context menu is opened.

      • onClose: ContextMenuCallback

        A function to call when the context menu is closed.

    Returns ContextMenu

Properties

element: any

The target HTMLElement being selected

selector: string

The target CSS selector which activates the menu

eventName: string

An interaction event name which activates the menu

menuItems: ContextMenuEntry[]

The array of menu items being rendered

onOpen: Function

A function to call when the context menu is opened.

onClose: Function

A function to call when the context menu is closed.

_expandUp: boolean

Track which direction the menu is expanded in

#target: HTMLElement

The parent HTML element to which the context menu is attached

Accessors

  • A convenience accessor to the context menu HTML object

    Returns any

Methods

  • Attach a ContextMenu instance to an HTML selector

    Returns void

  • Closes the menu and removes it from the DOM.

    Parameters

    • Optional options: {
          animate: boolean;
      } = {}

      Options to configure the closing behavior.

      • animate: boolean

        Animate the context menu closing.

    Returns Promise<void>

  • Render the Context Menu by iterating over the menuItems it contains. Check the visibility of each menu item, and only render ones which are allowed by the item's logical condition. Attach a click handler to each item which is rendered.

    Parameters

    • target: jQuery

      The target element to which the context menu is attached

    • Optional options: {
          event: PointerEvent;
      } = {}
      • event: PointerEvent

        The event that triggered the context menu opening.

    Returns void | Promise<jQuery>

    A Promise that resolves when the open animation has completed.

  • Local listeners which apply to each ContextMenu instance which is created.

    Parameters

    • html: jQuery

    Returns void

  • Protected

    Set the position of the context menu, taking into consideration whether the menu should expand upward or downward

    Parameters

    • html: jQuery

      The context menu element.

    • target: jQuery

      The element that the context menu was spawned on.

    • Optional options: {
          event: PointerEvent;
      } = {}
      • event: PointerEvent

        The event that triggered the context menu opening.

    Returns void

  • Handle click events on context menu items.

    Parameters

    • event: PointerEvent

      The click event

    Returns void

  • Create a ContextMenu for this Application and dispatch hooks.

    Parameters

    • app: any

      The Application this ContextMenu belongs to.

    • html: any

      The Application's rendered HTML.

    • selector: string

      The target CSS selector which activates the menu.

    • menuItems: ContextMenuEntry[]

      The array of menu items being rendered.

    • Optional options: {
          hookName: string;
      } = {}

      Additional options to configure context menu initialization.

      • hookName: string

        The name of the hook to call.

    Returns ContextMenu

  • Global listeners which apply once only to the document.

    Returns void