drab - contextmenu

import "drab/contextmenu/define";

<drab-contextmenu>
	<button data-trigger>Right Click</button>
	<!-- content should be set to `display: none;` and shown based on the `data-open` attribute with CSS. -->
	<div
		data-content
		class="hidden opacity-0 transition-[opacity,display] transition-discrete duration-250 data-open:block data-open:opacity-100 data-open:starting:opacity-0"
	>
		<div class="bg-background flex w-48 flex-col gap-2 rounded-md border 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

Defined in: contextmenu/index.ts:8

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

Constructors

new ContextMenu()

new ContextMenu(): ContextMenu

Defined in: contextmenu/index.ts:12

Accessors

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

destroy()

destroy(): void

Defined in: base/index.ts:178

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

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

hide()

hide(): Promise<void>

Defined in: contextmenu/index.ts:54

mount()

mount(): void

Defined in: contextmenu/index.ts:58

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

Base.mount

safeListener()

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

Defined in: base/index.ts:136

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

show(e): Promise<void>

Defined in: contextmenu/index.ts:22

swapContent(revert): void

Defined in: base/index.ts:93

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

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

Defined in: base/index.ts:153