This commit is contained in:
+1
@@ -0,0 +1 @@
|
||||
export * from "./is-in-viewport.svelte.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./is-in-viewport.svelte.js";
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import type { ConfigurableWindow } from "../../internal/configurable-globals.js";
|
||||
import type { MaybeElementGetter } from "../../internal/types.js";
|
||||
import { type UseIntersectionObserverOptions } from "../use-intersection-observer/use-intersection-observer.svelte.js";
|
||||
export type IsInViewportOptions = ConfigurableWindow & UseIntersectionObserverOptions;
|
||||
/**
|
||||
* Tracks if an element is visible within the current viewport.
|
||||
*
|
||||
* @see {@link https://runed.dev/docs/utilities/is-in-viewport}
|
||||
*/
|
||||
export declare class IsInViewport {
|
||||
#private;
|
||||
constructor(node: MaybeElementGetter, options?: IsInViewportOptions);
|
||||
get current(): boolean;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { useIntersectionObserver, } from "../use-intersection-observer/use-intersection-observer.svelte.js";
|
||||
/**
|
||||
* Tracks if an element is visible within the current viewport.
|
||||
*
|
||||
* @see {@link https://runed.dev/docs/utilities/is-in-viewport}
|
||||
*/
|
||||
export class IsInViewport {
|
||||
#isInViewport = $state(false);
|
||||
constructor(node, options) {
|
||||
useIntersectionObserver(node, (intersectionObserverEntries) => {
|
||||
let isIntersecting = this.#isInViewport;
|
||||
let latestTime = 0;
|
||||
for (const entry of intersectionObserverEntries) {
|
||||
if (entry.time >= latestTime) {
|
||||
latestTime = entry.time;
|
||||
isIntersecting = entry.isIntersecting;
|
||||
}
|
||||
}
|
||||
this.#isInViewport = isIntersecting;
|
||||
}, options);
|
||||
}
|
||||
get current() {
|
||||
return this.#isInViewport;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user