Class TJSContextMenu

Provides and manages browser window wide context menu functionality. The best way to create a context menu is to attach the source KeyboardEvent or MouseEvent / PointerEvent as data in TJSContextMenu.create. This allows proper keyboard handling across browsers supporting the context menu key. A A11yFocusSource data object is generated which allows tracking of the source element that triggered the context menu allowing focus to return to the source when the context menu is closed. This A11yFocusSource object is also forwarded on through the onPress callback and is intended to be supplied as SvelteApplication options particularly for modal dialogs allowing focus to return to the original source after the modal dialog is closed.

Constructors

constructor

Methods

create

Constructors

constructor

Methods

Staticcreate

  • create(opts?): void

  • Creates and manages a browser wide context menu. The best way to create the context menu is to pass in the source DOM event as it is processed for the location of the context menu to display. Likewise, a A11yFocusSource object is generated that allows focus to be returned to the source location. You may supply a default focus target as a fallback via focusEl.

    Parameters

    • Optionalopts: {
          activeWindow?: Window;
          duration?: number;
          easing?: EasingReference;
          event?: MouseEvent | KeyboardEvent;
          focusDebug?: boolean;
          focusEl?: string | HTMLElement;
          id?: string;
          items?: Iterable<TJSContextMenuItemData, any, any>;
          keyCode?: string;
          offsetX?: number;
          offsetY?: number;
          styles?: {
              [key: string]: string | null;
          };
          x?: number;
          y?: number;
          zIndex?: number;
      }

      Optional parameters.

      • OptionalactiveWindow?: Window

        The active browser window that the context menu is displaying inside.

      • Optionalduration?: number

        Transition option for duration of transition.

      • Optionaleasing?: EasingReference

        Transition option for ease. Either an easing function or easing function name.

      • Optionalevent?: MouseEvent | KeyboardEvent

        The source MouseEvent or KeyboardEvent.

      • OptionalfocusDebug?: boolean

        When true the associated A11yFocusSource object will log focus target data when applied.

      • OptionalfocusEl?: string | HTMLElement

        A specific HTMLElement or selector string as the default focus target.

      • Optionalid?: string

        A custom CSS ID to add to the menu. This allows CSS style targeting.

      • Optionalitems?: Iterable<TJSContextMenuItemData, any, any>

        Menu items to display.

      • OptionalkeyCode?: string

        Key to select menu items.

      • OptionaloffsetX?: number

        Small positive integer offset for context menu so the pointer / mouse is over the menu on display.

      • OptionaloffsetY?: number

        Small positive integer offset for context menu so the pointer / mouse is over the menu on display.

      • Optionalstyles?: {
            [key: string]: string | null;
        }

        Optional inline styles to apply.

        • [key: string]: string | null
      • Optionalx?: number

        X position override for the top / left of the menu.

      • Optionaly?: number

        Y position override for the top / left of the menu.

      • OptionalzIndex?: number

        Z-index for context menu.

    Returns void

Settings

Member Visibility

On This Page

Constructors
Methods