intersect

Scroll down, when part of this trigger moves out of the viewport, the data-intersect attribute will be removed and the color will change.

import "drab/intersect/define";

html

<drab-intersect threshold="1" class="flex flex-col items-center gap-10">
	<div
		data-trigger
		class="flex min-h-48 items-center justify-center rounded-md border p-6 shadow"
	>
		<p>
			Scroll down, when part of this trigger moves out of the viewport, the
			<code>data-intersect</code>
			attribute will be removed and the color will change.
		</p>
	</div>
	<div
		data-content
		class="bg-muted data-intersect:bg-foreground size-48 rounded-full transition-colors"
	></div>
</drab-intersect>

Overview

Defined in: intersect/index.ts:38

Uses the Intersection Observer API to add a data-intersect attribute to content when the trigger is intersecting.

Events

intersect

Fired when the trigger enters the viewport.

exit

Fired when the trigger exits the viewport.

Attributes

threshold

Specify a threshold between 0 and 1 to determine how much of the trigger should be visible for the intersection to occur.

Constructors

Constructor

new Intersect(): Intersect

Defined in: intersect/index.ts:39

Overrides

Lifecycle(Trigger(Content())).constructor

Accessors

event

Set Signature

set event(value): void

Defined in: base/index.ts:126

Methods

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:76

Called when custom element is added to the page.

Inherited from

Lifecycle(Trigger(Content())).connectedCallback

destroy()

destroy(): void

Defined in: base/index.ts:83

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

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:86

Called when custom element is removed from the page.

Inherited from

Lifecycle(Trigger(Content())).disconnectedCallback

listener()

Call Signature

listener<T>(listener, options?): void

Defined in: base/index.ts:152

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

listener

Listener<T>

Listener to attach to all of the trigger elements.

Inherited from

Lifecycle(Trigger(Content())).listener

Call Signature

listener<T>(type, listener, options?): void

Defined in: base/index.ts:161

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

listener

Listener<T>

Listener to attach to all of the trigger elements.

Inherited from

Lifecycle(Trigger(Content())).listener

mount()

mount(): void

Defined in: intersect/index.ts:54

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

Lifecycle(Trigger(Content())).mount

safeListener()

Call Signature

safeListener<T>(type, listener, element?, options?): void

Defined in: base/index.ts:35

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

element?

HTMLElement

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content())).safeListener

Call Signature

safeListener<T>(type, listener, document, options?): void

Defined in: base/index.ts:41

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof DocumentEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

document

Document

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content())).safeListener

Call Signature

safeListener<T>(type, listener, window, options?): void

Defined in: base/index.ts:47

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof WindowEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

window

Window

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content())).safeListener

swap()

swap(revert): void

Defined in: base/index.ts:231

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

triggers<T>(instance): NodeListOf<T>

Defined in: base/index.ts:136

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

Inherited from

Lifecycle(Trigger(Content())).triggers

Call Signature

triggers(): NodeListOf<HTMLElement>

Defined in: base/index.ts:137

Returns

NodeListOf<HTMLElement>

All of the elements that match the trigger selector.

Default

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

Inherited from

Lifecycle(Trigger(Content())).triggers