fullscreen

Source

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

<drab-fullscreen>
    <div data-content class="card mt-8 bg-muted">
        <button data-trigger type="button" class="button button-primary">
            Content Fullscreen
        </button>
    </div>
</drab-fullscreen>

Overview

Toggles the documentElement or content element to fullscreen mode.

Disables the trigger if fullscreen is not supported.

Constructors

new Fullscreen()

new Fullscreen(): Fullscreen

Properties

#listenerController

private #listenerController: AbortController

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

Inherited from

Base.#listenerController

Source

src/package/base/index.ts:17

Accessors

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

Methods

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.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

Base.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

fullscreenSupported()

fullscreenSupported(): boolean

Returns

boolean

true if fullscreen is supported.

Source

src/package/fullscreen/index.ts:26

isFullscreen()

isFullscreen(): boolean

Returns

boolean

true if fullscreen is currently enabled.

Source

src/package/fullscreen/index.ts:19

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.