Class ContextMenu

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

constructor

Properties

menuItems onClose onOpen

Accessors

element eventName expandUp fixed selector target implementation

Methods

activateListeners close render _animate _close _injectMenu _onActivate _onRender _preRender _setFixedPosition _setPosition create eventListeners

Constructors

constructor

  • new ContextMenu(
        container: any,
        selector: string,
        menuItems: ContextMenuEntry[],
        options?: ContextMenuOptions,
    ): ContextMenu

    Parameters

    • container: any

      The HTML element that contains the context menu targets.

    • selector: string

      A CSS selector which activates the context menu.

    • menuItems: ContextMenuEntry[]

      An Array of entries to display in the menu

    • Optionaloptions: ContextMenuOptions = {}

      Additional options to configure the context menu.

    Returns ContextMenu

Properties

menuItems

menuItems: (ContextMenuEntry & { element: HTMLElement })[]

The array of menu items to render.

onClose

onClose: ContextMenuCallback

A function to call when the context menu is closed.

onOpen

onOpen: ContextMenuCallback

A function to call when the context menu is opened.

Accessors

element

  • get element(): HTMLElement

    The menu element.

    Returns HTMLElement

eventName

  • get eventName(): string

    The event name to listen for.

    Returns string

expandUp

  • get expandUp(): boolean

    Check which direction the menu is expanded in.

    Returns boolean

fixed

  • get fixed(): boolean

    Whether to position the context menu as a fixed element, or inject it into the target.

    Returns boolean

selector

  • get selector(): string

    A CSS selector to identify context menu targets.

    Returns string

target

  • get target(): HTMLElement

    The parent HTML element to which the context menu is attached

    Returns HTMLElement

Staticimplementation

  • get implementation(): typeof ContextMenu

    Retrieve the configured DragDrop implementation.

    Returns typeof ContextMenu

Methods

activateListeners

  • activateListeners(menu: HTMLElement): void

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

    Parameters

    • menu: HTMLElement

      The context menu element.

    Returns void

close

  • close(options?: { animate?: boolean; target?: HTMLElement }): Promise<void>

    Closes the menu and removes it from the DOM.

    Parameters

    • Optionaloptions: { animate?: boolean; target?: HTMLElement } = {}

      Options to configure the closing behavior.

      • Optionalanimate?: boolean

        Animate the context menu closing.

      • Optionaltarget?: HTMLElement

        The target element to close on.

    Returns Promise<void>

render

  • render(target: HTMLElement, options?: ContextMenuRenderOptions): 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: HTMLElement

      The target element to which the context menu is attached.

    • Optionaloptions: ContextMenuRenderOptions = {}

    Returns Promise<void>

    A Promise that resolves when the open animation has completed.

Protected_animate

  • _animate(open?: boolean): Promise<void>
    Protected

    Animate the context menu's height when opening or closing.

    Parameters

    • open: boolean = false

      Whether the menu is opening or closing.

    Returns Promise<void>

    A Promise that resolves when the animation completes.

Protected_close

  • _close(options?: { target?: HTMLElement }): void
    Protected

    Close the menu and remove it from the DOM.

    Parameters

    • Optionaloptions: { target?: HTMLElement } = {}
      • Optionaltarget?: HTMLElement

        The target element to close on.

    Returns void

Protected_injectMenu

  • _injectMenu(menu: HTMLElement, target: HTMLElement): void
    Protected

    Inject the menu inside the target.

    Parameters

    • menu: HTMLElement

      The menu element.

    • target: HTMLElement

      The context target.

    Returns void

Protected_onActivate

  • _onActivate(event: Event): undefined | Promise<void>
    Protected

    Handle context menu activation.

    Parameters

    • event: Event

      The triggering event.

    Returns undefined | Promise<void>

Protected_onRender

Protected_preRender

  • _preRender(
        target: HTMLElement,
        options?: ContextMenuRenderOptions,
    ): Promise<void>
    Protected

    Called before the context menu begins rendering.

    Parameters

    Returns Promise<void>

Protected_setFixedPosition

  • _setFixedPosition(
        menu: HTMLElement,
        target: HTMLElement,
        options?: { event?: Event },
    ): void
    Protected

    Set the context menu at a fixed position in the viewport.

    Parameters

    • menu: HTMLElement

      The menu element.

    • target: HTMLElement

      The context target.

    • Optionaloptions: { event?: Event } = {}
      • Optionalevent?: Event

        The event that triggered the context menu opening.

    Returns void

Protected_setPosition

  • _setPosition(
        menu: HTMLElement,
        target: HTMLElement,
        options?: { event?: Event },
    ): void
    Protected

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

    Parameters

    • menu: HTMLElement

      The context menu element.

    • target: HTMLElement

      The element that the context menu was spawned on.

    • Optionaloptions: { event?: Event } = {}
      • Optionalevent?: Event

        The event that triggered the context menu opening.

    Returns void

Staticcreate

  • create(
        app: Application,
        html: any,
        selector: string,
        menuItems: ContextMenuEntry[],
        options?: { hookName?: string },
    ): ContextMenu

    Create a ContextMenu for this Application and dispatch hooks.

    Parameters

    • app: Application

      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.

    • Optionaloptions: { hookName?: string } = {}

      Additional options to configure context menu initialization.

      • OptionalhookName?: string

        The name of the hook to call.

    Returns ContextMenu

    Deprecated

    since v13

StaticeventListeners

  • eventListeners(): void

    Global listeners which apply once only to the document.

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods