drab - fullscreen

import "drab/fullscreen/define";

<drab-fullscreen class="contents">
	<button data-trigger type="button">Fullscreen</button>
</drab-fullscreen>

<drab-fullscreen class="contents">
	<div data-content class="bg-foreground mt-8 rounded-md p-6">
		<button data-trigger type="button" class="secondary">
			Content Fullscreen
		</button>
	</div>
</drab-fullscreen>

Overview

Defined in: fullscreen/index.ts:10

Toggles the documentElement or content element to fullscreen mode.

Disables the trigger if fullscreen is not supported.

Constructors

new Fullscreen()

new Fullscreen(): Fullscreen

Defined in: fullscreen/index.ts:11

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.

isFullscreen()

isFullscreen(): boolean

Defined in: fullscreen/index.ts:18

Returns

boolean

true if fullscreen is currently enabled.

mount()

mount(): void

Defined in: fullscreen/index.ts:42

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.

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.

toggle(): void

Defined in: fullscreen/index.ts:30

Enables or disables fullscreen mode based on the current state.

Returns

void

triggerListener()

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

Defined in: base/index.ts:153