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

new ContextMenu()

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

Source

src/package/base/index.ts:17

#touchTimer

private #touchTimer: undefined | Timeout

Tracks the long press duration on mobile.

Source

src/package/contextmenu/index.ts:11

Accessors

#coordinates

set private #coordinates(value): void

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

Parameters

• value

• value.x: number

• value.y: number

Source

src/package/contextmenu/index.ts:18

animationOptions

get animationOptions(): KeyframeAnimationOptions

Returns

KeyframeAnimationOptions

An object containing the values of each animation-option attribute

Source

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.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

keyframes

get keyframes(): Keyframe[]

Returns

Keyframe[]

Source

src/package/animate/index.ts:128

Methods

animateElement()

animateElement(animateOptions): Promise<void>

Parameters

• animateOptions= undefined

animates this.content() by default

• animateOptions.element?: HTMLElement

• animateOptions.options?: KeyframeAnimationOptions

Returns

Promise<void>

Inherited from

Animate.animateElement

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

Source

src/package/animate/index.ts:76

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Animate.connectedCallback

Source

src/package/base/index.ts:155

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

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Animate.disconnectedCallback

Source

src/package/base/index.ts:167

hide()

hide(): Promise<void>

Returns

Promise<void>

Source

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.