Class TJSContextMenu
Index
Constructors
Methods
Constructors
constructor
Returns TJSContextMenu
Methods
Staticcreate
- create(
opts: {
activeWindow?: Window;
anchorToEventTarget?: boolean;
classes?: Iterable<string>;
duration?: number;
easing?: EasingReference;
event?: MouseEvent | PointerEvent | KeyboardEvent;
focusDebug?: boolean;
focusEl?: string | HTMLElement;
id?: string;
items?: Iterable<Items, any, any> | (() => Iterable<Items>);
keyCode?: string;
offsetX?: number;
offsetY?: number;
onClose?: Function;
onPressApplyFocus?: boolean;
styles?: { [key: string]: string };
x?: number;
y?: number;
},
): voidCreates 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, an 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
- opts: {
activeWindow?: Window;
anchorToEventTarget?: boolean;
classes?: Iterable<string>;
duration?: number;
easing?: EasingReference;
event?: MouseEvent | PointerEvent | KeyboardEvent;
focusDebug?: boolean;
focusEl?: string | HTMLElement;
id?: string;
items?: Iterable<Items, any, any> | (() => Iterable<Items>);
keyCode?: string;
offsetX?: number;
offsetY?: number;
onClose?: Function;
onPressApplyFocus?: boolean;
styles?: { [key: string]: string };
x?: number;
y?: number;
}Optional parameters.
OptionalactiveWindow?: WindowThe active browser window that the context menu is displaying inside. When you pass an
eventthis is determined automatically.OptionalanchorToEventTarget?: booleanAlign context menu to the
event.targetelement. This will usually display the context menu aligned at the bottom left of the target element with automatic alignment adjustments when the menu opens to the left or upwards.Optionalclasses?: Iterable<string>Additional custom CSS classes to add to the menu. This allows CSS style targeting.
Optionalduration?: numberTransition option for duration of transition in milliseconds; default:
120ms.Optionaleasing?: EasingReferenceTransition option for ease. Either an easing function or easing function name.
Optionalevent?: MouseEvent | PointerEvent | KeyboardEventThe source PointerEvent, MouseEvent or KeyboardEvent. It is highly recommended to pass the originating DOM event for automatic configuration.
OptionalfocusDebug?: booleanWhen true the associated A11yFocusSource object will log focus target data when applied.
OptionalfocusEl?: string | HTMLElementA specific HTMLElement or selector string as the default focus target.
Optionalid?: stringA custom CSS ID to add to the menu. This allows CSS style targeting.
Optionalitems?: Iterable<Items, any, any> | (() => Iterable<Items>)Menu items list of function returning a menu item list to display.
OptionalkeyCode?: stringKey to select menu items.
OptionaloffsetX?: numberSmall positive number offset for context menu so the pointer / mouse is over the menu on display.
OptionaloffsetY?: numberSmall positive number offset for context menu so the pointer / mouse is over the menu on display.
OptionalonClose?: FunctionA function that is invoked when the context menu is closed. Useful for any state based changes such as CSS highlighting of context menu invoking element.
OptionalonPressApplyFocus?: booleanWhen true, any focus source derived from the associated
eventor definedfocusElis applied automatically in response to menu item presses.Optionalstyles?: { [key: string]: string }Optional inline styles to apply.
Optionalx?: numberX position override for the top / left of the menu.
Optionaly?: numberY position override for the top / left of the menu.
Returns void
- opts: {
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
onPresscallback and is intended to be supplied asSvelteApplicationoptions particularly for modal dialogs allowing focus to return to the original source after the modal dialog is closed.