contextmenu

Source

<drab-contextmenu
    animation-keyframe-from-transform="scale(.95) translateY(3%)"
    animation-keyframe-from-opacity="0"
    animation-keyframe-to-transform="scale(1) translateY(0)"
    animation-keyframe-to-opacity="1"
>
    <button data-trigger class="button button-primary">Right Click</button>
    <!-- content should be set to `display: none;` -->
    <div data-content class="hidden">
        <div class="card flex w-48 flex-col gap-2 p-2">
            <div class="font-bold">Context Menu</div>
            <button role="menuitem" class="button button-secondary">Button</button>
            <button role="menuitem" class="button button-secondary">Button</button>
            <button role="menuitem" class="button button-secondary">Button</button>
        </div>
    </div>
</drab-contextmenu>

Overview

Displays content when the trigger element is right clicked, or long pressed on mobile.

Constructors

constructor

• new ContextMenu(): ContextMenu

Properties

#listenerController

• Private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Animate.#listenerController

Defined in

src/package/base/index.ts:17

#touchTimer

• Private #touchTimer: undefined | Timeout

Tracks the long press duration on mobile.

Defined in

src/package/contextmenu/index.ts:11

Accessors

#coordinates

• set #coordinates(value): void

Sets the context menu’s style.left and style.top position.

Parameters

Name	Type
`value`	`Object`
`value.x`	`number`
`value.y`	`number`

Returns

void

Defined in

src/package/contextmenu/index.ts:18

animationOptions

• get animationOptions(): KeyframeAnimationOptions

Returns

KeyframeAnimationOptions

An object containing the values of each animation-option attribute

Inherited from

Animate.animationOptions

Defined in

src/package/animate/index.ts:46

event

• get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Returns

keyof HTMLElementEventMap

Default

"click";

Inherited from

Animate.event

Defined in

src/package/base/index.ts:30

• set event(value): void

Parameters

Name	Type
`value`	keyof `HTMLElementEventMap`

Returns

void

Inherited from

Animate.event

Defined in

src/package/base/index.ts:34

keyframes

• get keyframes(): Keyframe[]

Returns

Keyframe[]

Inherited from

Animate.keyframes

Defined in

src/package/animate/index.ts:128

Methods

animateElement

▸ animateElement(animateOptions?): Promise<void>

Parameters

Name	Type	Description
`animateOptions`	`Object`	animates `this.content()` by default
`animateOptions.element?`	`HTMLElement`	-
`animateOptions.options?`	`KeyframeAnimationOptions`	-

Returns

Promise<void>

Description

Animates a particular element using the web animations API.

Disables animation if the user prefers reduced motion.
Sets default options
Uses the keyframes provided from this.keyframes
Waits for the animation to complete
Sets the start and end styles based on the first and last keyframe

Inherited from

Animate.animateElement

Defined in

src/package/animate/index.ts:76

connectedCallback

▸ connectedCallback(): void

Returns

void

Inherited from

Animate.connectedCallback

Defined in

src/package/base/index.ts:152

destroy

▸ destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Animate.destroy

Defined in

src/package/base/index.ts:159

disconnectedCallback

▸ disconnectedCallback(): void

Returns

void

Inherited from

Animate.disconnectedCallback

Defined in

src/package/base/index.ts:161

getContent

▸ getContent<T>(instance?): T

Type parameters

Name	Type
`T`	extends `HTMLElement` = `HTMLElement`

Parameters

Name	Type	Description
`instance`	() => `T`	The instance of the desired element, ex: `HTMLDialogElement`. Defaults to `HTMLElement`.

Returns

T

The element that matches the content selector.

Default

this.querySelector("[data-content]");

Inherited from

Animate.getContent

Defined in

src/package/base/index.ts:55

getTrigger

▸ getTrigger<T>(): NodeListOf<T>

Type parameters

Name	Type
`T`	extends `HTMLElement` = `HTMLElement`

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

Inherited from

Animate.getTrigger

Defined in

src/package/base/index.ts:42

hide

▸ hide(): Promise<void>

Returns

Promise<void>

Defined in

src/package/contextmenu/index.ts:57

mount

▸ mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

Overrides

Animate.mount

Defined in

src/package/contextmenu/index.ts:66

safeListener

▸ safeListener<K, T>(type, listener, element?, options?): void

Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type parameters

Name	Type
`K`	extends keyof `DocumentEventMap`
`T`	extends `Window` \| `Document` \| `HTMLElement` = `HTMLElement`

Parameters

Name	Type
`type`	`K`
`listener`	(`this`: `T`, `ev`: `DocumentEventMap`[`K`]) => `any`
`element`	`T`
`options`	`AddEventListenerOptions`

Returns

void

Inherited from

Animate.safeListener

Defined in

src/package/base/index.ts:118

show

▸ show(e): Promise<void>

Parameters

Name	Type
`e`	`MouseEvent` \| `TouchEvent`

Returns

Promise<void>

Defined in

src/package/contextmenu/index.ts:23

swapContent

▸ swapContent(revert?, delay?): void

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

Parameters

Name	Type	Default value	Description
`revert`	`boolean`	`true`	Swap back to old content
`delay`	`number`	`800`	Wait time before swapping back

Returns

void

Inherited from

Animate.swapContent

Defined in

src/package/base/index.ts:72

triggerListener

▸ triggerListener<T, K>(listener, type?, options?): void

Type parameters

Name	Type
`T`	extends `HTMLElement`
`K`	extends keyof `HTMLElementEventMap`

Parameters

Name	Type	Description
`listener`	(`this`: `T`, `e`: `HTMLElementEventMap`[`K`]) => `any`	Listener to attach to all of the `trigger` elements.
`type`	`K`	-
`options?`	`AddEventListenerOptions`	-

Returns

void

Inherited from

Animate.triggerListener

Defined in

src/package/base/index.ts:135