popover
Popover
This works without JavaScript.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<drab-popover
animation-keyframe-from-transform="scale(.95) translateY(3%)"
animation-keyframe-from-opacity="0"
animation-keyframe-to-transform="scale(1) translateY(0)"
animation-keyframe-to-opacity="1"
>
<button
data-trigger
popovertarget="popover"
type="button"
class="button button-primary"
>
Show
</button>
<div data-content id="popover" popover class="card sm:max-w-96">
<div class="mb-4 flex items-center justify-between">
<h3 class="my-0">Popover</h3>
<button
data-trigger
popovertarget="popover"
type="button"
class="button button-ghost"
title="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
fill-rule="evenodd"
d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<p>This works without JavaScript.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</drab-popover>
Overview
Provides animations for the Popover API.
This component can be deprecated once it can be animated with CSS only, currently only available in Chrome.
Hierarchy
↳
Popover
Constructors
constructor
• new Popover(): Popover
Returns
Overrides
Defined in
src/package/popover/index.ts:13
Properties
#listenerController
• Private
#listenerController: AbortController
To clean up event listeners added to document
when the element is removed.
Inherited from
Defined in
Accessors
animationOptions
• get
animationOptions(): KeyframeAnimationOptions
Returns
KeyframeAnimationOptions
An object containing the values of each animation-option
attribute
Inherited from
Animate.animationOptions
Defined in
src/package/animate/index.ts:46
event
• get
event(): keyof HTMLElementEventMap
Event for the trigger
to execute.
For example, set to "mouseover"
to execute the event when the user hovers the mouse over the trigger
, instead of when they click it.
Returns
keyof HTMLElementEventMap
Default
"click";
Inherited from
Animate.event
Defined in
• set
event(value
): void
Parameters
Name | Type |
---|---|
value | keyof HTMLElementEventMap |
Returns
void
Inherited from
Animate.event
Defined in
keyframes
• get
keyframes(): Keyframe
[]
Returns
Keyframe
[]
Inherited from
Animate.keyframes
Defined in
src/package/animate/index.ts:128
open
• get
open(): boolean
Whether the popover is open or closed. This doesn’t get set automatically on the element like with the HTMLDialogElement
.
Returns
boolean
Defined in
src/package/popover/index.ts:21
• set
open(value
): void
Parameters
Name | Type |
---|---|
value | boolean |
Returns
void
Defined in
src/package/popover/index.ts:25
Methods
animateElement
▸ animateElement(animateOptions?
): Promise
<void
>
Parameters
Name | Type | Description |
---|---|---|
animateOptions | Object | animates this.content() by default |
animateOptions.element? | HTMLElement | - |
animateOptions.options? | KeyframeAnimationOptions | - |
Returns
Promise
<void
>
Description
Animates a particular element using the web animations API.
- Disables animation if the user prefers reduced motion.
- Sets default options
- Uses the keyframes provided from
this.keyframes
- Waits for the animation to complete
- Sets the start and end styles based on the first and last keyframe
Inherited from
Defined in
src/package/animate/index.ts:76
connectedCallback
▸ connectedCallback(): void
Returns
void
Inherited from
Defined in
destroy
▸ destroy(): void
Passed into disconnectedCallback
, since Base
needs to run disconnectedCallback
as well. It is overridden in each element that needs to run disconnectedCallback
.
Returns
void
Inherited from
Defined in
disconnectedCallback
▸ disconnectedCallback(): void
Returns
void
Inherited from
Defined in
getContent
▸ getContent<T
>(instance?
): T
Type parameters
Name | Type |
---|---|
T | extends HTMLElement = HTMLElement |
Parameters
Name | Type | Description |
---|---|---|
instance | () => T | The instance of the desired element, ex: HTMLDialogElement . Defaults to HTMLElement . |
Returns
T
The element that matches the content
selector.
Default
this.querySelector("[data-content]");
Inherited from
Defined in
getTrigger
▸ getTrigger<T
>(): NodeListOf
<T
>
Type parameters
Name | Type |
---|---|
T | extends HTMLElement = HTMLElement |
Returns
NodeListOf
<T
>
All of the elements that match the trigger
selector.
Default
this.querySelectorAll("[data-trigger]");
Inherited from
Defined in
hide
▸ hide(): Promise
<void
>
HTMLElement.hidePopover()
with animation.
Returns
Promise
<void
>
Defined in
src/package/popover/index.ts:41
mount
▸ mount(): void
Passed into queueMicrotask
in connectedCallback
. It is overridden in each component that needs to run connectedCallback
.
The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback
is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.
Returns
void
Overrides
Defined in
src/package/popover/index.ts:57
safeListener
▸ safeListener<K
, T
>(type
, listener
, element?
, options?
): void
Wrapper around document.body.addEventListener
that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
Name | Type |
---|---|
K | extends keyof DocumentEventMap |
T | extends Window | Document | HTMLElement = HTMLElement |
Parameters
Name | Type |
---|---|
type | K |
listener | (this : T , ev : DocumentEventMap [K ]) => any |
element | T |
options | AddEventListenerOptions |
Returns
void
Inherited from
Defined in
show
▸ show(): Promise
<void
>
HTMLElement.showPopover()
with animation.
Returns
Promise
<void
>
Defined in
src/package/popover/index.ts:34
swapContent
▸ swapContent(revert?
, delay?
): void
Finds the HTMLElement | HTMLTemplateElement
via the swap
selector and swaps this.content()
with the content of the element found.
Parameters
Name | Type | Default value | Description |
---|---|---|---|
revert | boolean | true | Swap back to old content |
delay | number | 800 | Wait time before swapping back |
Returns
void
Inherited from
Defined in
toggle
▸ toggle(): Promise
<void
>
show
or hide
depending on the current state.
Returns
Promise
<void
>
Defined in
src/package/popover/index.ts:52
triggerListener
▸ triggerListener<T
, K
>(listener
, type?
, options?
): void
Type parameters
Name | Type |
---|---|
T | extends HTMLElement |
K | extends keyof HTMLElementEventMap |
Parameters
Name | Type | Description |
---|---|---|
listener | (this : T , e : HTMLElementEventMap [K ]) => any | Listener to attach to all of the trigger elements. |
type | K | - |
options? | AddEventListenerOptions | - |
Returns
void