add wakelock

- adds wakelock element - improves swap behavior
rossrobino · Feb 7, 2024 · dd63b43 · dd63b43
1 parent bbb65dd
commit dd63b43
Show file tree

Hide file tree

Showing 23 changed files with 1,206 additions and 402 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
 		"web components",
 		"custom elements",
 		"animate",
+		"wakelock",
 		"contextmenu",
 		"details",
 		"youtube",
@@ -46,6 +47,14 @@
 			"types": "./animate/define.d.ts",
 			"default": "./animate/define.js"
 		},
+		"./wakelock": {
+			"types": "./wakelock/index.d.ts",
+			"default": "./wakelock/index.js"
+		},
+		"./wakelock/define": {
+			"types": "./wakelock/define.d.ts",
+			"default": "./wakelock/define.js"
+		},
 		"./contextmenu": {
 			"types": "./contextmenu/index.d.ts",
 			"default": "./contextmenu/index.js"

diff --git a/src/docs/wakelock/index.html b/src/docs/wakelock/index.html
@@ -0,0 +1,11 @@
+<script type="module" src="/package/wakelock/define.ts"></script>
+
+<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> -->
diff --git a/src/lib/docs/classes/animate.md b/src/lib/docs/classes/animate.md
@@ -57,7 +57,7 @@ Animations `options` can be set:
 
 #### Defined in
 
-[src/package/animate/index.ts:39](https://github.com/rossrobino/components/blob/ebb6edd/src/package/animate/index.ts#L39)
+[src/package/animate/index.ts:39](https://github.com/rossrobino/components/blob/bbb65dd/src/package/animate/index.ts#L39)
 
 ---
 
@@ -75,7 +75,7 @@ To clean up event listeners added to `document` when the element is removed.
 
 #### Defined in
 
-[src/package/base/index.ts:17](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L17)
+[src/package/base/index.ts:17](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L17)
 
 ---
 
@@ -93,7 +93,7 @@ An object containing the values of each `animation-option` attribute
 
 #### Defined in
 
-[src/package/animate/index.ts:46](https://github.com/rossrobino/components/blob/ebb6edd/src/package/animate/index.ts#L46)
+[src/package/animate/index.ts:46](https://github.com/rossrobino/components/blob/bbb65dd/src/package/animate/index.ts#L46)
 
 ### event
 
@@ -119,7 +119,7 @@ Base.event
 
 #### Defined in
 
-[src/package/base/index.ts:30](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L30)
+[src/package/base/index.ts:30](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L30)
 
 • `set` **event**(`value`): `void`
 
@@ -139,7 +139,7 @@ Base.event
 
 #### Defined in
 
-[src/package/base/index.ts:34](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L34)
+[src/package/base/index.ts:34](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L34)
 
 ### keyframes
 
@@ -151,7 +151,7 @@ Base.event
 
 #### Defined in
 
-[src/package/animate/index.ts:128](https://github.com/rossrobino/components/blob/ebb6edd/src/package/animate/index.ts#L128)
+[src/package/animate/index.ts:128](https://github.com/rossrobino/components/blob/bbb65dd/src/package/animate/index.ts#L128)
 
 ---
 
@@ -185,7 +185,7 @@ Animates a particular element using the web animations API.
 
 #### Defined in
 
-[src/package/animate/index.ts:76](https://github.com/rossrobino/components/blob/ebb6edd/src/package/animate/index.ts#L76)
+[src/package/animate/index.ts:76](https://github.com/rossrobino/components/blob/bbb65dd/src/package/animate/index.ts#L76)
 
 ### connectedCallback
 
@@ -201,7 +201,25 @@ Animates a particular element using the web animations API.
 
 #### Defined in
 
-[src/package/base/index.ts:129](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L129)
+[src/package/base/index.ts:151](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L151)
+
+### 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](/docs/base/).[destroy](/docs/base/#destroy)
+
+#### Defined in
+
+[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158)
 
 ### disconnectedCallback
 
@@ -217,7 +235,7 @@ Animates a particular element using the web animations API.
 
 #### Defined in
 
-[src/package/base/index.ts:133](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L133)
+[src/package/base/index.ts:160](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L160)
 
 ### getContent
 
@@ -253,7 +271,7 @@ this.querySelector("[data-content]");
 
 #### Defined in
 
-[src/package/base/index.ts:55](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L55)
+[src/package/base/index.ts:55](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L55)
 
 ### getTrigger
 
@@ -277,13 +295,13 @@ this.querySelectorAll("[data-trigger]");
 
 #### Defined in
 
-[src/package/base/index.ts:42](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L42)
+[src/package/base/index.ts:42](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L42)
 
 ### mount
 
 ▸ **mount**(): `void`
 
-Placeholder function is passed into `queueMicrotask` in `connectedCallback`. It is overridden in each component that needs to run `connectedCallback`.
+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.
 
@@ -297,7 +315,7 @@ The reason for this is to make these elements work better with frameworks like S
 
 #### Defined in
 
-[src/package/base/index.ts:127](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L127)
+[src/package/base/index.ts:149](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L149)
 
 ### safeListener
 
@@ -310,17 +328,17 @@ element is removed from the DOM, these event listeners are cleaned up.
 
 | Name | Type                                                            |
 | :--- | :-------------------------------------------------------------- |
-| `K`  | extends keyof `HTMLElementEventMap`                             |
+| `K`  | extends keyof `DocumentEventMap`                                |
 | `T`  | extends `Window` \| `Document` \| `HTMLElement` = `HTMLElement` |
 
 #### Parameters
 
-| Name       | Type                                                     |
-| :--------- | :------------------------------------------------------- |
-| `type`     | `K`                                                      |
-| `listener` | (`this`: `T`, `ev`: `HTMLElementEventMap`[`K`]) => `any` |
-| `element`  | `T`                                                      |
-| `options`  | `AddEventListenerOptions`                                |
+| Name       | Type                                                  |
+| :--------- | :---------------------------------------------------- |
+| `type`     | `K`                                                   |
+| `listener` | (`this`: `T`, `ev`: `DocumentEventMap`[`K`]) => `any` |
+| `element`  | `T`                                                   |
+| `options`  | `AddEventListenerOptions`                             |
 
 #### Returns
 
@@ -332,7 +350,7 @@ element is removed from the DOM, these event listeners are cleaned up.
 
 #### Defined in
 
-[src/package/base/index.ts:96](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L96)
+[src/package/base/index.ts:118](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L118)
 
 ### swapContent
 
@@ -358,7 +376,7 @@ swaps `this.content()` with the content of the element found.
 
 #### Defined in
 
-[src/package/base/index.ts:72](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L72)
+[src/package/base/index.ts:72](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L72)
 
 ### triggerListener
 
@@ -373,10 +391,10 @@ swaps `this.content()` with the content of the element found.
 
 #### Parameters
 
-| Name       | Type                                                     | Description                                          |
-| :--------- | :------------------------------------------------------- | :--------------------------------------------------- |
-| `listener` | (`this`: `T`, `ev`: `HTMLElementEventMap`[`K`]) => `any` | Listener to attach to all of the `trigger` elements. |
-| `type`     | `K`                                                      | -                                                    |
+| Name       | Type                                                    | Description                                          |
+| :--------- | :------------------------------------------------------ | :--------------------------------------------------- |
+| `listener` | (`this`: `T`, `e`: `HTMLElementEventMap`[`K`]) => `any` | Listener to attach to all of the `trigger` elements. |
+| `type`     | `K`                                                     | -                                                    |
 
 #### Returns
 
@@ -388,4 +406,4 @@ swaps `this.content()` with the content of the element found.
 
 #### Defined in
 
-[src/package/base/index.ts:113](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L113)
+[src/package/base/index.ts:135](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L135)