wakelock
<drab-wakelock auto-lock>
<button data-trigger class="button button-primary">
<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
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 alocked
attribute when connected. - Use
content
andswap
elements to adjust the UI based on the current state. request
andrelease
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.
Hierarchy
↳
WakeLock
Constructors
constructor
• new WakeLock(): WakeLock
Returns
Overrides
Defined in
src/package/wakelock/index.ts:25
Properties
#listenerController
• Private
#listenerController: AbortController
To clean up event listeners added to document
when the element is removed.
Inherited from
Defined in
wakeLock
• wakeLock: null
| WakeLockSentinel
= null
Defined in
src/package/wakelock/index.ts:23
Accessors
#autoLock
• get
#autoLock(): boolean
the auto-lock
attribute controls whether an active WakeLock should be restored when navigating back to the page.
Returns
boolean
Defined in
src/package/wakelock/index.ts:37
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.
Returns
keyof HTMLElementEventMap
Default
"click";
Inherited from
Base.event
Defined in
• set
event(value
): void
Parameters
Name | Type |
---|---|
value | keyof HTMLElementEventMap |
Returns
void
Inherited from
Base.event
Defined in
Methods
#wakeLockSupported
▸ #wakeLockSupported(): boolean
If the WakeLock API is supported on the user’s device.
Returns
boolean
Defined in
src/package/wakelock/index.ts:30
connectedCallback
▸ connectedCallback(): void
Returns
void
Inherited from
Defined in
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
Overrides
Defined in
src/package/wakelock/index.ts:105
disconnectedCallback
▸ disconnectedCallback(): void
Returns
void
Inherited from
Defined in
getContent
▸ getContent<T
>(instance?
): T
Type parameters
Name | Type |
---|---|
T | extends HTMLElement = HTMLElement |
Parameters
Name | Type | Description |
---|---|---|
instance | () => T | The instance of the desired element, ex: HTMLDialogElement . Defaults to HTMLElement . |
Returns
T
The element that matches the content
selector.
Default
this.querySelector("[data-content]");
Inherited from
Defined in
getTrigger
▸ getTrigger<T
>(): NodeListOf
<T
>
Type parameters
Name | Type |
---|---|
T | extends HTMLElement = HTMLElement |
Returns
NodeListOf
<T
>
All of the elements that match the trigger
selector.
Default
this.querySelectorAll("[data-trigger]");
Inherited from
Defined in
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.
Returns
void
Overrides
Defined in
src/package/wakelock/index.ts:67
release
▸ release(): Promise
<void
>
Releases the WakeLock, sets this.wakeLock
to null.
Returns
Promise
<void
>
Defined in
src/package/wakelock/index.ts:62
request
▸ request(): Promise
<void
>
Requests WakeLock on the current page.
Returns
Promise
<void
>
Defined in
src/package/wakelock/index.ts:42
safeListener
▸ safeListener<K
, T
>(type
, listener
, element?
, options?
): void
Wrapper around document.body.addEventListener
that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
Name | Type |
---|---|
K | extends keyof DocumentEventMap |
T | extends Window | Document | HTMLElement = HTMLElement |
Parameters
Name | Type |
---|---|
type | K |
listener | (this : T , ev : DocumentEventMap [K ]) => any |
element | T |
options | AddEventListenerOptions |
Returns
void
Inherited from
Defined in
swapContent
▸ swapContent(revert?
, delay?
): void
Finds the HTMLElement | HTMLTemplateElement
via the swap
selector and swaps this.content()
with the content of the element found.
Parameters
Name | Type | Default value | Description |
---|---|---|---|
revert | boolean | true | Swap back to old content |
delay | number | 800 | Wait time before swapping back |
Returns
void
Inherited from
Defined in
triggerListener
▸ triggerListener<T
, K
>(listener
, type?
, options?
): void
Type parameters
Name | Type |
---|---|
T | extends HTMLElement |
K | extends keyof HTMLElementEventMap |
Parameters
Name | Type | Description |
---|---|---|
listener | (this : T , e : HTMLElementEventMap [K ]) => any | Listener to attach to all of the trigger elements. |
type | K | - |
options? | AddEventListenerOptions | - |
Returns
void