drab - wakelock

import "drab/wakelock/define";

<drab-wakelock auto-lock>
	<button data-trigger>
		<span data-content>Lock</span>
		<template data-swap>Unlock</template>
	</button>
</drab-wakelock>

<!-- Alternatively, set without a `trigger` (hidden) -->
<!-- <drab-wakelock locked auto-lock></drab-wakelock> -->

Overview

Defined in: wakelock/index.ts:23

WakeLock uses the WakeLock API to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.

WakeLock can be toggled with a trigger, or will be requested if the element has a locked attribute when connected.
Use content and swap elements to adjust the UI based on the current state.
request and release methods are provided to set the WakeLock with JavaScript.
trigger is disabled if not supported.
WakeLock is released when the element is removed from the DOM.

auto-lock

By default, the WakeLock will be released when the tab is not active. Use the auto-lock attribute to automatically request the WakeLock when the user views the tab again.

Extends

Base

Constructors

new WakeLock()

new WakeLock(): WakeLock

Defined in: wakelock/index.ts:26

Returns

WakeLock

Overrides

Base.constructor

Properties

wakeLock

wakeLock: null | WakeLockSentinel = null

Defined in: wakelock/index.ts:24

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:42

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";

Returns

keyof HTMLElementEventMap

Set Signature

set event(value): void

Defined in: base/index.ts:46

Parameters

value

keyof HTMLElementEventMap

Returns

void

Inherited from

Base.event

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

Returns

void

Inherited from

Base.announce

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

destroy()

destroy(): void

Defined in: wakelock/index.ts:108

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

Returns

void

Overrides

Base.destroy

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

getContent()

getContent<T>(instance): T

Defined in: base/index.ts:74

Type Parameters

• T extends HTMLElement = HTMLElement

Parameters

instance

() => T

The instance of the desired element to validate against, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Default

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

Inherited from

Base.getContent

getTrigger()

getTrigger<T>(): NodeListOf<T>

Defined in: base/index.ts:61

Type Parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

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

Inherited from

Base.getTrigger

mount()

mount(): void

Defined in: wakelock/index.ts:70

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.