From dd63b438cc89f436abfe90f1d5f54a5c59178be6 Mon Sep 17 00:00:00 2001 From: Ross Robino Date: Wed, 7 Feb 2024 12:32:34 -0500 Subject: [PATCH] add wakelock - adds wakelock element - improves swap behavior --- package.json | 9 + src/docs/wakelock/index.html | 11 + src/lib/docs/classes/animate.md | 72 +++-- src/lib/docs/classes/base.md | 64 +++-- src/lib/docs/classes/breakpoint.md | 70 +++-- src/lib/docs/classes/contextmenu.md | 80 +++--- src/lib/docs/classes/copy.md | 70 +++-- src/lib/docs/classes/details.md | 80 +++--- src/lib/docs/classes/dialog.md | 80 +++--- src/lib/docs/classes/editor.md | 100 ++++--- src/lib/docs/classes/fullscreen.md | 72 +++-- src/lib/docs/classes/popover.md | 82 +++--- src/lib/docs/classes/share.md | 72 +++-- src/lib/docs/classes/tablesort.md | 68 +++-- src/lib/docs/classes/wakelock.md | 396 ++++++++++++++++++++++++++++ src/lib/docs/classes/youtube.md | 84 +++--- src/lib/docs/modules.md | 35 ++- src/package/base/index.ts | 44 +++- src/package/fullscreen/index.ts | 3 +- src/package/index.ts | 3 + src/package/wakelock/define.ts | 3 + src/package/wakelock/index.ts | 108 ++++++++ tsup.config.ts | 2 + 23 files changed, 1206 insertions(+), 402 deletions(-) create mode 100644 src/docs/wakelock/index.html create mode 100644 src/lib/docs/classes/wakelock.md create mode 100644 src/package/wakelock/define.ts create mode 100644 src/package/wakelock/index.ts diff --git a/package.json b/package.json index 175fb57..64a462d 100644 --- 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 new file mode 100644 index 0000000..c141b17 --- /dev/null +++ b/src/docs/wakelock/index.html @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/src/lib/docs/classes/animate.md b/src/lib/docs/classes/animate.md index afeb999..d42b9a8 100644 --- 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) diff --git a/src/lib/docs/classes/base.md b/src/lib/docs/classes/base.md index 2dc642b..512b4cf 100644 --- a/src/lib/docs/classes/base.md +++ b/src/lib/docs/classes/base.md @@ -27,6 +27,8 @@ Each element can have multiple `trigger`s, but will only have one `content`. ↳↳ [`TableSort`](/docs/tablesort/) + ↳↳ [`WakeLock`](/docs/wakelock/) + ↳↳ [`YouTube`](/docs/youtube/) --- @@ -47,7 +49,7 @@ HTMLElement.constructor #### Defined in -[src/package/base/index.ts:19](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/index.ts#L19) +[src/package/base/index.ts:19](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L19) --- @@ -61,7 +63,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) --- @@ -87,7 +89,7 @@ keyof `HTMLElementEventMap` #### 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` @@ -103,7 +105,7 @@ keyof `HTMLElementEventMap` #### 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) --- @@ -119,7 +121,21 @@ keyof `HTMLElementEventMap` #### 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` + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -131,7 +147,7 @@ keyof `HTMLElementEventMap` #### 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 @@ -163,7 +179,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 @@ -183,13 +199,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. @@ -199,7 +215,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 @@ -212,17 +228,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 @@ -230,7 +246,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 @@ -252,7 +268,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 @@ -267,10 +283,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 @@ -278,4 +294,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) diff --git a/src/lib/docs/classes/breakpoint.md b/src/lib/docs/classes/breakpoint.md index 4a615b1..35fab48 100644 --- a/src/lib/docs/classes/breakpoint.md +++ b/src/lib/docs/classes/breakpoint.md @@ -32,7 +32,7 @@ Provide alternate breakpoints by specifying `breakpoint` attributes: #### Defined in -[src/package/breakpoint/index.ts:27](https://github.com/rossrobino/components/blob/ebb6edd/src/package/breakpoint/index.ts#L27) +[src/package/breakpoint/index.ts:27](https://github.com/rossrobino/components/blob/bbb65dd/src/package/breakpoint/index.ts#L27) --- @@ -50,7 +50,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) ### breakpoints @@ -58,7 +58,7 @@ To clean up event listeners added to `document` when the element is removed. #### Defined in -[src/package/breakpoint/index.ts:19](https://github.com/rossrobino/components/blob/ebb6edd/src/package/breakpoint/index.ts#L19) +[src/package/breakpoint/index.ts:19](https://github.com/rossrobino/components/blob/bbb65dd/src/package/breakpoint/index.ts#L19) --- @@ -76,7 +76,7 @@ finds the current breakpoint #### Defined in -[src/package/breakpoint/index.ts:51](https://github.com/rossrobino/components/blob/ebb6edd/src/package/breakpoint/index.ts#L51) +[src/package/breakpoint/index.ts:51](https://github.com/rossrobino/components/blob/bbb65dd/src/package/breakpoint/index.ts#L51) ### event @@ -102,7 +102,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` @@ -122,7 +122,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) --- @@ -142,7 +142,25 @@ Base.event #### 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 @@ -158,7 +176,7 @@ Base.event #### 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 @@ -194,7 +212,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 @@ -218,13 +236,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. @@ -238,7 +256,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/breakpoint/index.ts:63](https://github.com/rossrobino/components/blob/ebb6edd/src/package/breakpoint/index.ts#L63) +[src/package/breakpoint/index.ts:63](https://github.com/rossrobino/components/blob/bbb65dd/src/package/breakpoint/index.ts#L63) ### safeListener @@ -251,17 +269,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 @@ -273,7 +291,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 @@ -299,7 +317,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 @@ -314,10 +332,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 @@ -329,4 +347,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) diff --git a/src/lib/docs/classes/contextmenu.md b/src/lib/docs/classes/contextmenu.md index b45dd46..3fc8e48 100644 --- a/src/lib/docs/classes/contextmenu.md +++ b/src/lib/docs/classes/contextmenu.md @@ -26,7 +26,7 @@ Displays content when the `trigger` element is right clicked, or long pressed on #### Defined in -[src/package/contextmenu/index.ts:13](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L13) +[src/package/contextmenu/index.ts:13](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L13) --- @@ -44,7 +44,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) ### #touchTimer @@ -54,7 +54,7 @@ Tracks the long press duration on mobile. #### Defined in -[src/package/contextmenu/index.ts:11](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L11) +[src/package/contextmenu/index.ts:11](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L11) --- @@ -80,7 +80,7 @@ Sets the context menu's `style.left` and `style.top` position. #### Defined in -[src/package/contextmenu/index.ts:18](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L18) +[src/package/contextmenu/index.ts:18](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L18) ### animationOptions @@ -98,7 +98,7 @@ Animate.animationOptions #### 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 @@ -124,7 +124,7 @@ Animate.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` @@ -144,7 +144,7 @@ Animate.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 @@ -160,7 +160,7 @@ Animate.keyframes #### 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) --- @@ -198,7 +198,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 @@ -214,7 +214,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 + +[Animate](/docs/animate/).[destroy](/docs/animate/#destroy) + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -230,7 +248,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 @@ -266,7 +284,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 @@ -290,7 +308,7 @@ 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) ### hide @@ -302,13 +320,13 @@ this.querySelectorAll("[data-trigger]"); #### Defined in -[src/package/contextmenu/index.ts:57](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L57) +[src/package/contextmenu/index.ts:57](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L57) ### 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. @@ -322,7 +340,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/contextmenu/index.ts:66](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L66) +[src/package/contextmenu/index.ts:66](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L66) ### safeListener @@ -335,17 +353,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 @@ -357,7 +375,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) ### show @@ -375,7 +393,7 @@ element is removed from the DOM, these event listeners are cleaned up. #### Defined in -[src/package/contextmenu/index.ts:23](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L23) +[src/package/contextmenu/index.ts:23](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L23) ### swapContent @@ -401,7 +419,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 @@ -416,10 +434,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 @@ -431,4 +449,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) diff --git a/src/lib/docs/classes/copy.md b/src/lib/docs/classes/copy.md index c8880b6..122e120 100644 --- a/src/lib/docs/classes/copy.md +++ b/src/lib/docs/classes/copy.md @@ -27,7 +27,7 @@ BaseCopy.constructor #### Defined in -[src/package/copy/index.ts:11](https://github.com/rossrobino/components/blob/ebb6edd/src/package/copy/index.ts#L11) +[src/package/copy/index.ts:11](https://github.com/rossrobino/components/blob/bbb65dd/src/package/copy/index.ts#L11) --- @@ -45,7 +45,7 @@ BaseCopy.#listenerController #### 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) --- @@ -75,7 +75,7 @@ BaseCopy.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` @@ -95,7 +95,7 @@ BaseCopy.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) ### value @@ -119,7 +119,7 @@ BaseCopy.value #### Defined in -[src/package/base/copy/index.ts:13](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L13) +[src/package/base/copy/index.ts:13](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L13) • `set` **value**(`value`): `void` @@ -139,7 +139,7 @@ BaseCopy.value #### Defined in -[src/package/base/copy/index.ts:17](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L17) +[src/package/base/copy/index.ts:17](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L17) --- @@ -159,7 +159,7 @@ BaseCopy.connectedCallback #### 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) ### copy @@ -183,7 +183,25 @@ BaseCopy.copy #### Defined in -[src/package/base/copy/index.ts:25](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L25) +[src/package/base/copy/index.ts:25](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L25) + +### 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 + +BaseCopy.destroy + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -199,7 +217,7 @@ BaseCopy.disconnectedCallback #### 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 @@ -235,7 +253,7 @@ BaseCopy.getContent #### 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 @@ -259,7 +277,7 @@ BaseCopy.getTrigger #### 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 @@ -275,7 +293,7 @@ BaseCopy.mount #### Defined in -[src/package/copy/index.ts:15](https://github.com/rossrobino/components/blob/ebb6edd/src/package/copy/index.ts#L15) +[src/package/copy/index.ts:15](https://github.com/rossrobino/components/blob/bbb65dd/src/package/copy/index.ts#L15) ### safeListener @@ -288,17 +306,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 @@ -310,7 +328,7 @@ BaseCopy.safeListener #### 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 @@ -336,7 +354,7 @@ BaseCopy.swapContent #### 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 @@ -351,10 +369,10 @@ BaseCopy.swapContent #### 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 @@ -366,4 +384,4 @@ BaseCopy.triggerListener #### 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) diff --git a/src/lib/docs/classes/details.md b/src/lib/docs/classes/details.md index 6e849aa..647f0f3 100644 --- a/src/lib/docs/classes/details.md +++ b/src/lib/docs/classes/details.md @@ -32,7 +32,7 @@ instead. #### Defined in -[src/package/details/index.ts:16](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L16) +[src/package/details/index.ts:16](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L16) --- @@ -50,7 +50,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) --- @@ -72,7 +72,7 @@ Animate.animationOptions #### 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) ### details @@ -84,7 +84,7 @@ Animate.animationOptions #### Defined in -[src/package/details/index.ts:20](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L20) +[src/package/details/index.ts:20](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L20) ### event @@ -110,7 +110,7 @@ Animate.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` @@ -130,7 +130,7 @@ Animate.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 @@ -146,7 +146,7 @@ Animate.keyframes #### 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) --- @@ -184,7 +184,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) ### close @@ -198,7 +198,7 @@ Closes details with animation. #### Defined in -[src/package/details/index.ts:33](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L33) +[src/package/details/index.ts:33](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L33) ### connectedCallback @@ -214,7 +214,25 @@ Closes details with animation. #### 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 + +[Animate](/docs/animate/).[destroy](/docs/animate/#destroy) + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -230,7 +248,7 @@ Closes details with animation. #### 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 @@ -266,7 +284,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 @@ -290,13 +308,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. @@ -310,7 +328,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/details/index.ts:48](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L48) +[src/package/details/index.ts:48](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L48) ### open @@ -322,7 +340,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/details/index.ts:27](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L27) +[src/package/details/index.ts:27](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L27) ### safeListener @@ -335,17 +353,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 @@ -357,7 +375,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 @@ -383,7 +401,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) ### toggle @@ -395,7 +413,7 @@ swaps `this.content()` with the content of the element found. #### Defined in -[src/package/details/index.ts:40](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L40) +[src/package/details/index.ts:40](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L40) ### triggerListener @@ -410,10 +428,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 @@ -425,4 +443,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) diff --git a/src/lib/docs/classes/dialog.md b/src/lib/docs/classes/dialog.md index eb58824..77fba5d 100644 --- a/src/lib/docs/classes/dialog.md +++ b/src/lib/docs/classes/dialog.md @@ -26,7 +26,7 @@ Provides triggers and animations for the `HTMLDialogElement`. #### Defined in -[src/package/dialog/index.ts:10](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L10) +[src/package/dialog/index.ts:10](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L10) --- @@ -44,7 +44,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) --- @@ -66,7 +66,7 @@ Animate.animationOptions #### 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) ### dialog @@ -80,7 +80,7 @@ The `HTMLDialogElement` within the element. #### Defined in -[src/package/dialog/index.ts:15](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L15) +[src/package/dialog/index.ts:15](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L15) ### event @@ -106,7 +106,7 @@ Animate.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` @@ -126,7 +126,7 @@ Animate.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 @@ -142,7 +142,7 @@ Animate.keyframes #### 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) --- @@ -180,7 +180,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) ### close @@ -194,7 +194,7 @@ Animates a particular element using the web animations API. #### Defined in -[src/package/dialog/index.ts:26](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L26) +[src/package/dialog/index.ts:26](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L26) ### connectedCallback @@ -210,7 +210,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 + +[Animate](/docs/animate/).[destroy](/docs/animate/#destroy) + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -226,7 +244,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 @@ -262,7 +280,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 @@ -286,13 +304,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. @@ -306,7 +324,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/dialog/index.ts:41](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L41) +[src/package/dialog/index.ts:41](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L41) ### safeListener @@ -319,17 +337,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 @@ -341,7 +359,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) ### show @@ -355,7 +373,7 @@ element is removed from the DOM, these event listeners are cleaned up. #### Defined in -[src/package/dialog/index.ts:20](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L20) +[src/package/dialog/index.ts:20](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L20) ### swapContent @@ -381,7 +399,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) ### toggle @@ -395,7 +413,7 @@ swaps `this.content()` with the content of the element found. #### Defined in -[src/package/dialog/index.ts:36](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L36) +[src/package/dialog/index.ts:36](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L36) ### triggerListener @@ -410,10 +428,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 @@ -425,4 +443,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) diff --git a/src/lib/docs/classes/editor.md b/src/lib/docs/classes/editor.md index 1e321d6..2d8389c 100644 --- a/src/lib/docs/classes/editor.md +++ b/src/lib/docs/classes/editor.md @@ -52,7 +52,7 @@ Other features: #### Defined in -[src/package/editor/index.ts:63](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L63) +[src/package/editor/index.ts:63](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L63) --- @@ -70,7 +70,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) ### #openChars @@ -80,7 +80,7 @@ Array of keyPair characters that have been opened. #### Defined in -[src/package/editor/index.ts:51](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L51) +[src/package/editor/index.ts:51](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L51) ### keyPairs @@ -94,7 +94,7 @@ The characters that will be automatically closed when typed. #### Defined in -[src/package/editor/index.ts:54](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L54) +[src/package/editor/index.ts:54](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L54) --- @@ -112,7 +112,7 @@ An array of `ContentElement`s derived from each `trigger`'s data attributes. #### Defined in -[src/package/editor/index.ts:89](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L89) +[src/package/editor/index.ts:89](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L89) ### #currentBlock @@ -129,7 +129,7 @@ An array of `ContentElement`s derived from each `trigger`'s data attributes. #### Defined in -[src/package/editor/index.ts:103](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L103) +[src/package/editor/index.ts:103](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L103) ### #selectionEnd @@ -143,7 +143,7 @@ Gets the end position of the selection #### Defined in -[src/package/editor/index.ts:116](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L116) +[src/package/editor/index.ts:116](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L116) ### #selectionStart @@ -157,7 +157,7 @@ Gets the start position of the selection. #### Defined in -[src/package/editor/index.ts:121](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L121) +[src/package/editor/index.ts:121](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L121) ### event @@ -183,7 +183,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` @@ -203,7 +203,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) ### text @@ -217,7 +217,7 @@ The current `value` of the `textarea`. #### Defined in -[src/package/editor/index.ts:80](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L80) +[src/package/editor/index.ts:80](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L80) • `set` **text**(`value`): `void` @@ -233,7 +233,7 @@ The current `value` of the `textarea`. #### Defined in -[src/package/editor/index.ts:84](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L84) +[src/package/editor/index.ts:84](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L84) ### textArea @@ -247,7 +247,7 @@ The `content`, expects an `HTMLTextAreaElement`. #### Defined in -[src/package/editor/index.ts:75](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L75) +[src/package/editor/index.ts:75](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L75) --- @@ -272,7 +272,7 @@ The `content`, expects an `HTMLTextAreaElement`. #### Defined in -[src/package/editor/index.ts:227](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L227) +[src/package/editor/index.ts:227](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L227) ### #correctFollowing @@ -309,7 +309,7 @@ Instead: #### Defined in -[src/package/editor/index.ts:311](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L311) +[src/package/editor/index.ts:311](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L311) ### #getContentElement @@ -329,7 +329,7 @@ The ContentElement based on the `trigger`'s attributes. #### Defined in -[src/package/editor/index.ts:134](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L134) +[src/package/editor/index.ts:134](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L134) ### #getLineInfo @@ -355,7 +355,7 @@ const { lines, lineNumber, columnNumber } = getLineInfo(); #### Defined in -[src/package/editor/index.ts:269](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L269) +[src/package/editor/index.ts:269](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L269) ### #getRepeat @@ -378,7 +378,7 @@ what is found, or the empty string #### Defined in -[src/package/editor/index.ts:242](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L242) +[src/package/editor/index.ts:242](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L242) ### #insertText @@ -401,7 +401,7 @@ what is found, or the empty string #### Defined in -[src/package/editor/index.ts:149](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L149) +[src/package/editor/index.ts:149](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L149) ### #setCaretPosition @@ -425,7 +425,7 @@ what is found, or the empty string #### Defined in -[src/package/editor/index.ts:191](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L191) +[src/package/editor/index.ts:191](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L191) ### #setSelectionRange @@ -446,7 +446,7 @@ Sets the current cursor selection in the `textarea` #### Defined in -[src/package/editor/index.ts:126](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L126) +[src/package/editor/index.ts:126](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L126) ### connectedCallback @@ -462,7 +462,25 @@ Sets the current cursor selection in the `textarea` #### 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 @@ -478,7 +496,7 @@ Sets the current cursor selection in the `textarea` #### 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 @@ -514,7 +532,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 @@ -538,13 +556,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. @@ -558,7 +576,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/editor/index.ts:338](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L338) +[src/package/editor/index.ts:338](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L338) ### safeListener @@ -571,17 +589,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 @@ -593,7 +611,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 @@ -619,7 +637,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 @@ -634,10 +652,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 @@ -649,4 +667,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) diff --git a/src/lib/docs/classes/fullscreen.md b/src/lib/docs/classes/fullscreen.md index 823815c..b1c2274 100644 --- a/src/lib/docs/classes/fullscreen.md +++ b/src/lib/docs/classes/fullscreen.md @@ -28,7 +28,7 @@ Disables the `trigger` if fullscreen is not supported. #### Defined in -[src/package/fullscreen/index.ts:12](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L12) +[src/package/fullscreen/index.ts:12](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L12) --- @@ -46,7 +46,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) --- @@ -76,7 +76,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` @@ -96,7 +96,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) --- @@ -116,7 +116,25 @@ Base.event #### 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 @@ -132,7 +150,7 @@ Base.event #### 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) ### fullscreenSupported @@ -146,7 +164,7 @@ Base.event #### Defined in -[src/package/fullscreen/index.ts:26](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L26) +[src/package/fullscreen/index.ts:26](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L26) ### getContent @@ -182,7 +200,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 @@ -206,7 +224,7 @@ 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) ### isFullscreen @@ -220,13 +238,13 @@ this.querySelectorAll("[data-trigger]"); #### Defined in -[src/package/fullscreen/index.ts:19](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L19) +[src/package/fullscreen/index.ts:19](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L19) ### 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. @@ -240,7 +258,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/fullscreen/index.ts:43](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L43) +[src/package/fullscreen/index.ts:44](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L44) ### safeListener @@ -253,17 +271,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 @@ -275,7 +293,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 @@ -301,7 +319,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) ### toggle @@ -315,7 +333,7 @@ Enables or disables fullscreen mode based on the current state. #### Defined in -[src/package/fullscreen/index.ts:31](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L31) +[src/package/fullscreen/index.ts:32](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L32) ### triggerListener @@ -330,10 +348,10 @@ Enables or disables fullscreen mode based on the current state. #### 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 @@ -345,4 +363,4 @@ Enables or disables fullscreen mode based on the current state. #### 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) diff --git a/src/lib/docs/classes/popover.md b/src/lib/docs/classes/popover.md index 0a0c37b..f3abf31 100644 --- a/src/lib/docs/classes/popover.md +++ b/src/lib/docs/classes/popover.md @@ -31,7 +31,7 @@ currently [only available in Chrome](https://developer.chrome.com/blog/introduci #### Defined in -[src/package/popover/index.ts:15](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L15) +[src/package/popover/index.ts:15](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L15) --- @@ -49,7 +49,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) --- @@ -71,7 +71,7 @@ Animate.animationOptions #### 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 @@ -97,7 +97,7 @@ Animate.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` @@ -117,7 +117,7 @@ Animate.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 @@ -133,7 +133,7 @@ Animate.keyframes #### 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) ### open @@ -148,7 +148,7 @@ automatically on the element like with the `HTMLDialogElement`. #### Defined in -[src/package/popover/index.ts:23](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L23) +[src/package/popover/index.ts:23](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L23) • `set` **open**(`value`): `void` @@ -164,7 +164,7 @@ automatically on the element like with the `HTMLDialogElement`. #### Defined in -[src/package/popover/index.ts:27](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L27) +[src/package/popover/index.ts:27](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L27) --- @@ -202,7 +202,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 @@ -218,7 +218,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 + +[Animate](/docs/animate/).[destroy](/docs/animate/#destroy) + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -234,7 +252,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 @@ -270,7 +288,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 @@ -294,7 +312,7 @@ 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) ### hide @@ -308,13 +326,13 @@ this.querySelectorAll("[data-trigger]"); #### Defined in -[src/package/popover/index.ts:43](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L43) +[src/package/popover/index.ts:43](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L43) ### 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. @@ -328,7 +346,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/popover/index.ts:59](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L59) +[src/package/popover/index.ts:59](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L59) ### safeListener @@ -341,17 +359,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 @@ -363,7 +381,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) ### show @@ -377,7 +395,7 @@ element is removed from the DOM, these event listeners are cleaned up. #### Defined in -[src/package/popover/index.ts:36](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L36) +[src/package/popover/index.ts:36](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L36) ### swapContent @@ -403,7 +421,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) ### toggle @@ -417,7 +435,7 @@ swaps `this.content()` with the content of the element found. #### Defined in -[src/package/popover/index.ts:54](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L54) +[src/package/popover/index.ts:54](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L54) ### triggerListener @@ -432,10 +450,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 @@ -447,4 +465,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) diff --git a/src/lib/docs/classes/share.md b/src/lib/docs/classes/share.md index c56983e..560d35d 100644 --- a/src/lib/docs/classes/share.md +++ b/src/lib/docs/classes/share.md @@ -26,7 +26,7 @@ BaseCopy.constructor #### Defined in -[src/package/share/index.ts:10](https://github.com/rossrobino/components/blob/ebb6edd/src/package/share/index.ts#L10) +[src/package/share/index.ts:10](https://github.com/rossrobino/components/blob/bbb65dd/src/package/share/index.ts#L10) --- @@ -44,7 +44,7 @@ BaseCopy.#listenerController #### 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) --- @@ -74,7 +74,7 @@ BaseCopy.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` @@ -94,7 +94,7 @@ BaseCopy.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) ### value @@ -118,7 +118,7 @@ BaseCopy.value #### Defined in -[src/package/base/copy/index.ts:13](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L13) +[src/package/base/copy/index.ts:13](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L13) • `set` **value**(`value`): `void` @@ -138,7 +138,7 @@ BaseCopy.value #### Defined in -[src/package/base/copy/index.ts:17](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L17) +[src/package/base/copy/index.ts:17](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L17) --- @@ -158,7 +158,7 @@ BaseCopy.connectedCallback #### 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) ### copy @@ -182,7 +182,25 @@ BaseCopy.copy #### Defined in -[src/package/base/copy/index.ts:25](https://github.com/rossrobino/components/blob/ebb6edd/src/package/base/copy/index.ts#L25) +[src/package/base/copy/index.ts:25](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/copy/index.ts#L25) + +### 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 + +BaseCopy.destroy + +#### Defined in + +[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L158) ### disconnectedCallback @@ -198,7 +216,7 @@ BaseCopy.disconnectedCallback #### 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 @@ -234,7 +252,7 @@ BaseCopy.getContent #### 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 @@ -258,7 +276,7 @@ BaseCopy.getTrigger #### 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 @@ -274,7 +292,7 @@ BaseCopy.mount #### Defined in -[src/package/share/index.ts:35](https://github.com/rossrobino/components/blob/ebb6edd/src/package/share/index.ts#L35) +[src/package/share/index.ts:35](https://github.com/rossrobino/components/blob/bbb65dd/src/package/share/index.ts#L35) ### safeListener @@ -287,17 +305,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 @@ -309,7 +327,7 @@ BaseCopy.safeListener #### 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) ### share @@ -332,7 +350,7 @@ depending on browser support. #### Defined in -[src/package/share/index.ts:20](https://github.com/rossrobino/components/blob/ebb6edd/src/package/share/index.ts#L20) +[src/package/share/index.ts:20](https://github.com/rossrobino/components/blob/bbb65dd/src/package/share/index.ts#L20) ### swapContent @@ -358,7 +376,7 @@ BaseCopy.swapContent #### 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 @@ BaseCopy.swapContent #### 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 @@ BaseCopy.triggerListener #### 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) diff --git a/src/lib/docs/classes/tablesort.md b/src/lib/docs/classes/tablesort.md index e98ef8e..a3d87a8 100644 --- a/src/lib/docs/classes/tablesort.md +++ b/src/lib/docs/classes/tablesort.md @@ -36,7 +36,7 @@ datatype `number` or `boolean`, set `data-type="number"` on the corresponding #### Defined in -[src/package/tablesort/index.ts:20](https://github.com/rossrobino/components/blob/ebb6edd/src/package/tablesort/index.ts#L20) +[src/package/tablesort/index.ts:20](https://github.com/rossrobino/components/blob/bbb65dd/src/package/tablesort/index.ts#L20) --- @@ -54,7 +54,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) --- @@ -84,7 +84,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` @@ -104,7 +104,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) --- @@ -130,7 +130,7 @@ true if ascending, false if descending #### Defined in -[src/package/tablesort/index.ts:30](https://github.com/rossrobino/components/blob/ebb6edd/src/package/tablesort/index.ts#L30) +[src/package/tablesort/index.ts:30](https://github.com/rossrobino/components/blob/bbb65dd/src/package/tablesort/index.ts#L30) ### connectedCallback @@ -146,7 +146,25 @@ true if ascending, false if descending #### 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 @@ -162,7 +180,7 @@ true if ascending, false if descending #### 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 @@ -198,7 +216,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 @@ -222,13 +240,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. @@ -242,7 +260,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/tablesort/index.ts:49](https://github.com/rossrobino/components/blob/ebb6edd/src/package/tablesort/index.ts#L49) +[src/package/tablesort/index.ts:49](https://github.com/rossrobino/components/blob/bbb65dd/src/package/tablesort/index.ts#L49) ### safeListener @@ -255,17 +273,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 @@ -277,7 +295,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 @@ -303,7 +321,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 @@ -318,10 +336,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 @@ -333,4 +351,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) diff --git a/src/lib/docs/classes/wakelock.md b/src/lib/docs/classes/wakelock.md new file mode 100644 index 0000000..ae9a396 --- /dev/null +++ b/src/lib/docs/classes/wakelock.md @@ -0,0 +1,396 @@ +`WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_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. + +--- + +## Hierarchy + +- [`Base`](/docs/base/) + + ↳ **`WakeLock`** + +--- + +## Constructors + +### constructor + +• **new WakeLock**(): [`WakeLock`](/docs/wakelock/) + +#### Returns + +[`WakeLock`](/docs/wakelock/) + +#### Overrides + +[Base](/docs/base/).[constructor](/docs/base/#constructor) + +#### 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 + +[Base](/docs/base/).[#listenerController](/docs/base/##listenercontroller) + +#### Defined in + +[src/package/base/index.ts:17](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L17) + +### 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`** + +```ts +"click"; +``` + +#### Inherited from + +Base.event + +#### Defined in + +[src/package/base/index.ts:30](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L30) + +• `set` **event**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :-------------------------- | +| `value` | keyof `HTMLElementEventMap` | + +#### Returns + +`void` + +#### Inherited from + +Base.event + +#### Defined in + +[src/package/base/index.ts:34](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L34) + +--- + +## 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 + +[Base](/docs/base/).[connectedCallback](/docs/base/#connectedcallback) + +#### Defined in + +[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` + +#### Overrides + +[Base](/docs/base/).[destroy](/docs/base/#destroy) + +#### Defined in + +src/package/wakelock/index.ts:105 + +### disconnectedCallback + +▸ **disconnectedCallback**(): `void` + +#### Returns + +`void` + +#### Inherited from + +[Base](/docs/base/).[disconnectedCallback](/docs/base/#disconnectedcallback) + +#### Defined in + +[src/package/base/index.ts:160](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L160) + +### 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`** + +```ts +this.querySelector("[data-content]"); +``` + +#### Inherited from + +[Base](/docs/base/).[getContent](/docs/base/#getcontent) + +#### Defined in + +[src/package/base/index.ts:55](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L55) + +### getTrigger + +▸ **getTrigger**(): `NodeListOf`\<`HTMLElement`\> + +#### Returns + +`NodeListOf`\<`HTMLElement`\> + +All of the elements that match the `trigger` selector. + +**`Default`** + +```ts +this.querySelectorAll("[data-trigger]"); +``` + +#### Inherited from + +[Base](/docs/base/).[getTrigger](/docs/base/#gettrigger) + +#### Defined in + +[src/package/base/index.ts:42](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L42) + +### 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 + +[Base](/docs/base/).[mount](/docs/base/#mount) + +#### 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 + +[Base](/docs/base/).[safeListener](/docs/base/#safelistener) + +#### Defined in + +[src/package/base/index.ts:118](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L118) + +### 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 + +[Base](/docs/base/).[swapContent](/docs/base/#swapcontent) + +#### Defined in + +[src/package/base/index.ts:72](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L72) + +### triggerListener + +▸ **triggerListener**\<`T`, `K`\>(`listener`, `type?`): `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` | - | + +#### Returns + +`void` + +#### Inherited from + +[Base](/docs/base/).[triggerListener](/docs/base/#triggerlistener) + +#### Defined in + +[src/package/base/index.ts:135](https://github.com/rossrobino/components/blob/bbb65dd/src/package/base/index.ts#L135) diff --git a/src/lib/docs/classes/youtube.md b/src/lib/docs/classes/youtube.md index edb33a1..2b0c558 100644 --- a/src/lib/docs/classes/youtube.md +++ b/src/lib/docs/classes/youtube.md @@ -26,7 +26,7 @@ Embeds a YouTube video iframe into a website with the video uid, using www.youtu #### Defined in -[src/package/youtube/index.ts:12](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L12) +[src/package/youtube/index.ts:12](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L12) --- @@ -44,7 +44,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) ### observedAttributes @@ -52,7 +52,7 @@ To clean up event listeners added to `document` when the element is removed. #### Defined in -[src/package/youtube/index.ts:10](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L10) +[src/package/youtube/index.ts:10](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L10) --- @@ -70,7 +70,7 @@ Whether the video should start playing when loaded. #### Defined in -[src/package/youtube/index.ts:22](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L22) +[src/package/youtube/index.ts:22](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L22) • `set` **autoplay**(`value`): `void` @@ -86,7 +86,7 @@ Whether the video should start playing when loaded. #### Defined in -[src/package/youtube/index.ts:26](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L26) +[src/package/youtube/index.ts:26](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L26) ### event @@ -112,7 +112,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` @@ -132,7 +132,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) ### iframe @@ -146,7 +146,7 @@ The `HTMLIFrameElement` within the element. #### Defined in -[src/package/youtube/index.ts:17](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L17) +[src/package/youtube/index.ts:17](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L17) ### start @@ -160,7 +160,7 @@ The start time of the video (seconds). #### Defined in -[src/package/youtube/index.ts:32](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L32) +[src/package/youtube/index.ts:32](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L32) • `set` **start**(`value`): `void` @@ -176,7 +176,7 @@ The start time of the video (seconds). #### Defined in -[src/package/youtube/index.ts:36](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L36) +[src/package/youtube/index.ts:36](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L36) ### uid @@ -193,7 +193,7 @@ the `uid` is `"gouiY85kD2o"`. #### Defined in -[src/package/youtube/index.ts:46](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L46) +[src/package/youtube/index.ts:46](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L46) • `set` **uid**(`v`): `void` @@ -209,7 +209,7 @@ the `uid` is `"gouiY85kD2o"`. #### Defined in -[src/package/youtube/index.ts:52](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L52) +[src/package/youtube/index.ts:52](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L52) --- @@ -225,7 +225,7 @@ the `uid` is `"gouiY85kD2o"`. #### Defined in -[src/package/youtube/index.ts:62](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L62) +[src/package/youtube/index.ts:62](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L62) ### connectedCallback @@ -241,7 +241,25 @@ the `uid` is `"gouiY85kD2o"`. #### 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 @@ -257,7 +275,7 @@ the `uid` is `"gouiY85kD2o"`. #### 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 @@ -293,7 +311,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 @@ -317,13 +335,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. @@ -337,7 +355,7 @@ The reason for this is to make these elements work better with frameworks like S #### Defined in -[src/package/youtube/index.ts:56](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L56) +[src/package/youtube/index.ts:56](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L56) ### safeListener @@ -350,17 +368,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 @@ -372,7 +390,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 @@ -398,7 +416,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 @@ -413,10 +431,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 @@ -428,4 +446,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) diff --git a/src/lib/docs/modules.md b/src/lib/docs/modules.md index cdb40d2..83a3ddf 100644 --- a/src/lib/docs/modules.md +++ b/src/lib/docs/modules.md @@ -14,6 +14,7 @@ - [Popover](/docs/classes/Popover.md) - [Share](/docs/classes/Share.md) - [TableSort](/docs/classes/TableSort.md) +- [WakeLock](/docs/classes/WakeLock.md) - [YouTube](/docs/classes/YouTube.md) ## Type Aliases @@ -24,7 +25,7 @@ #### Defined in -[src/package/animate/index.ts:8](https://github.com/rossrobino/components/blob/ebb6edd/src/package/animate/index.ts#L8) +[src/package/animate/index.ts:8](https://github.com/rossrobino/components/blob/bbb65dd/src/package/animate/index.ts#L8) --- @@ -34,7 +35,7 @@ #### Defined in -[src/package/breakpoint/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/breakpoint/index.ts#L4) +[src/package/breakpoint/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/breakpoint/index.ts#L4) --- @@ -44,7 +45,7 @@ #### Defined in -[src/package/contextmenu/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/contextmenu/index.ts#L4) +[src/package/contextmenu/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/contextmenu/index.ts#L4) --- @@ -54,7 +55,7 @@ #### Defined in -[src/package/copy/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/copy/index.ts#L4) +[src/package/copy/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/copy/index.ts#L4) --- @@ -64,7 +65,7 @@ #### Defined in -[src/package/details/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/details/index.ts#L4) +[src/package/details/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/details/index.ts#L4) --- @@ -74,7 +75,7 @@ #### Defined in -[src/package/dialog/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/dialog/index.ts#L4) +[src/package/dialog/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/dialog/index.ts#L4) --- @@ -84,7 +85,7 @@ #### Defined in -[src/package/editor/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/editor/index.ts#L4) +[src/package/editor/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/editor/index.ts#L4) --- @@ -94,7 +95,7 @@ #### Defined in -[src/package/fullscreen/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/fullscreen/index.ts#L4) +[src/package/fullscreen/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/fullscreen/index.ts#L4) --- @@ -104,7 +105,7 @@ #### Defined in -[src/package/popover/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/popover/index.ts#L4) +[src/package/popover/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/popover/index.ts#L4) --- @@ -114,7 +115,7 @@ #### Defined in -[src/package/share/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/share/index.ts#L4) +[src/package/share/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/share/index.ts#L4) --- @@ -124,7 +125,17 @@ #### Defined in -[src/package/tablesort/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/tablesort/index.ts#L4) +[src/package/tablesort/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/tablesort/index.ts#L4) + +--- + +### WakeLockAttributes + +Ƭ **WakeLockAttributes**: `Attributes`\<[`WakeLock`](/docs/classes/WakeLock.md)\> & `Partial`\<\{ `auto-lock`: `boolean` ; `locked`: `boolean` }\> + +#### Defined in + +src/package/wakelock/index.ts:4 --- @@ -134,4 +145,4 @@ #### Defined in -[src/package/youtube/index.ts:4](https://github.com/rossrobino/components/blob/ebb6edd/src/package/youtube/index.ts#L4) +[src/package/youtube/index.ts:4](https://github.com/rossrobino/components/blob/bbb65dd/src/package/youtube/index.ts#L4) diff --git a/src/package/base/index.ts b/src/package/base/index.ts index 5491733..6da4046 100644 --- a/src/package/base/index.ts +++ b/src/package/base/index.ts @@ -70,18 +70,40 @@ export class Base extends HTMLElement { * @param delay Wait time before swapping back */ swapContent(revert: boolean = true, delay: number = 800) { + // BREAKING TODO: `revert` and `delay` -- these could be one parameter + // revert: number = 800 + + /** The swap element, used to hold the replacement contents. */ const swap = this.querySelector(this.getAttribute("swap") ?? "[data-swap]"); + if (swap) { - const original = Array.from(this.getContent().childNodes); + /** A copy of the content currently in `this.getContent()`. */ + const currentContent = Array.from(this.getContent().childNodes); + /** + * The contents of the swap element, set based on whether the + * swap is a `template` or not. + */ + const placeholder: Node[] = []; + + // Set the placeholder with the `swap` content, then replace the + // swap content with the `currentContent` if (swap instanceof HTMLTemplateElement) { - this.getContent().replaceChildren(swap.content.cloneNode(true)); + // use `content` since it's a `template` element + placeholder.push(swap.content.cloneNode(true)); + swap.content.replaceChildren(...currentContent); } else { - this.getContent().replaceChildren(...swap.childNodes); + // not a `template`, replace children directly + placeholder.push(...swap.childNodes); + swap.replaceChildren(...currentContent); } + // finally, set the content to the contents of the placeholder + this.getContent().replaceChildren(...placeholder); + if (revert) { - setTimeout(() => this.getContent().replaceChildren(...original), delay); + // wait and then run again to swap back + setTimeout(() => this.swapContent(false), delay); } } } @@ -94,11 +116,11 @@ export class Base extends HTMLElement { * @param options */ safeListener< - K extends keyof HTMLElementEventMap, + K extends keyof DocumentEventMap, T extends HTMLElement | Window | Document = HTMLElement, >( type: K, - listener: (this: T, ev: HTMLElementEventMap[K]) => any, + listener: (this: T, ev: DocumentEventMap[K]) => any, element: T = document.body as T, options: AddEventListenerOptions = {}, ) { @@ -111,7 +133,7 @@ export class Base extends HTMLElement { * @param listener Listener to attach to all of the `trigger` elements. */ triggerListener( - listener: (this: T, ev: HTMLElementEventMap[K]) => any, + listener: (this: T, e: HTMLElementEventMap[K]) => any, type: K = this.event as K, ) { for (const trigger of this.getTrigger()) { @@ -120,7 +142,7 @@ export class Base extends HTMLElement { } /** - * 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. */ @@ -130,7 +152,13 @@ export class Base extends HTMLElement { queueMicrotask(() => this.mount()); } + /** + * Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`. + */ + destroy() {} + disconnectedCallback() { + this.destroy(); this.#listenerController.abort(); } } diff --git a/src/package/fullscreen/index.ts b/src/package/fullscreen/index.ts index 622c2ca..46eedb6 100644 --- a/src/package/fullscreen/index.ts +++ b/src/package/fullscreen/index.ts @@ -24,6 +24,7 @@ export class Fullscreen extends Base { * @returns `true` if fullscreen is supported. */ fullscreenSupported() { + // BREAKING TODO: make private like in WakeLock return Boolean(document.documentElement.requestFullscreen); } @@ -44,7 +45,7 @@ export class Fullscreen extends Base { this.triggerListener(() => this.toggle()); for (const trigger of this.getTrigger()) { - if (!this.fullscreenSupported() && trigger instanceof HTMLButtonElement) { + if (!this.fullscreenSupported() && "disabled" in trigger) { trigger.disabled = true; } } diff --git a/src/package/index.ts b/src/package/index.ts index bea7204..95bbd7f 100644 --- a/src/package/index.ts +++ b/src/package/index.ts @@ -13,6 +13,7 @@ import { Fullscreen, type FullscreenAttributes } from "./fullscreen/index.js"; import { Popover, type PopoverAttributes } from "./popover/index.js"; import { Share, type ShareAttributes } from "./share/index.js"; import { TableSort, type TableSortAttributes } from "./tablesort/index.js"; +import { WakeLock, type WakeLockAttributes } from "./wakelock/index.js"; import { YouTube, type YouTubeAttributes } from "./youtube/index.js"; export { @@ -39,6 +40,8 @@ export { ShareAttributes, TableSort, TableSortAttributes, + WakeLock, + WakeLockAttributes, YouTube, YouTubeAttributes, }; diff --git a/src/package/wakelock/define.ts b/src/package/wakelock/define.ts new file mode 100644 index 0000000..52bd4ec --- /dev/null +++ b/src/package/wakelock/define.ts @@ -0,0 +1,3 @@ +import { WakeLock } from "./index.js"; + +customElements.define("drab-wakelock", WakeLock); diff --git a/src/package/wakelock/index.ts b/src/package/wakelock/index.ts new file mode 100644 index 0000000..b2a72f6 --- /dev/null +++ b/src/package/wakelock/index.ts @@ -0,0 +1,108 @@ +import { Base } from "../base/index.js"; +import type { Attributes } from "../types/index.js"; + +export type WakeLockAttributes = Attributes & + Partial<{ "auto-lock": boolean; locked: boolean }>; + +/** + * `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_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. + * + * + */ +export class WakeLock extends Base { + wakeLock: WakeLockSentinel | null = null; + + constructor() { + super(); + } + + /** If the WakeLock API is supported on the user's device. */ + #wakeLockSupported() { + return "wakeLock" in navigator; + } + + /** + * the `auto-lock` attribute controls whether an active WakeLock should be restored when navigating back to the page. + */ + get #autoLock() { + return this.hasAttribute("auto-lock"); + } + + /** Requests WakeLock on the current page. */ + async request() { + if (this.#wakeLockSupported() && document.visibilityState === "visible") { + this.wakeLock = await navigator.wakeLock.request("screen"); + this.setAttribute("locked", ""); + this.swapContent(false); + + this.wakeLock.addEventListener("release", () => { + this.removeAttribute("locked"); + this.swapContent(false); + + if (!this.#autoLock) { + // set to null is required, used to determine if screen should be + // locked again, see visibilitychange listener + this.wakeLock = null; + } + }); + } + } + + /** Releases the WakeLock, sets `this.wakeLock` to null. */ + async release() { + await this.wakeLock?.release(); + this.wakeLock = null; + } + + mount() { + // lock on mount if the `locked` attribute is present + if (this.hasAttribute("locked")) { + this.request(); + } + + this.triggerListener(() => { + // toggle + if (this.wakeLock) { + this.release(); + } else { + this.request(); + } + }); + + for (const trigger of this.getTrigger()) { + if (!this.#wakeLockSupported() && "disabled" in trigger) { + // disable `trigger` if not supported + trigger.disabled = true; + } + } + + if (this.#autoLock) { + this.safeListener( + "visibilitychange", + () => { + // When the tab is not visible, the wakeLock is automatically released. + // This requests it back if it exists, if it is `null`, that + // means it was removed. In which case, it shouldn't be requested again. + if (this.wakeLock) { + this.request(); + } + }, + document, + ); + } + } + + destroy() { + this.release(); + } +} diff --git a/tsup.config.ts b/tsup.config.ts index bff8b92..cd863b3 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -29,6 +29,8 @@ export default defineConfig((options) => { "share/define": "src/package/share/define.ts", "tablesort/index": "src/package/tablesort/index.ts", "tablesort/define": "src/package/tablesort/define.ts", + "wakelock/index": "src/package/wakelock/index.ts", + "wakelock/define": "src/package/wakelock/define.ts", "youtube/index": "src/package/youtube/index.ts", "youtube/define": "src/package/youtube/define.ts", },