wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stash

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-06-24 12:17:51 -07:00
parent b17ce2ee4b
commit a5006e18d0
Failed to extract signature
1 changed files with 52 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/Visible/Visible.svelte
View file

@ -1,6 +1,6 @@
<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
<script lang="ts">
import { type Snippet } from 'svelte';
import { onMount, type Snippet } from 'svelte';
interface Props {
/**
@ -29,9 +29,8 @@
* Specify a pixel value.
*/
right?: number;
/**
* A snippet that renders inside the component.
*/
/** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
threshold?: number;
children?: Snippet<[boolean]>;
}
@ -41,6 +40,7 @@
bottom = 0,
left = 0,
right = 0,
threshold = 0,
children,
}: Props = $props();
@ -48,23 +48,58 @@
let visibleOnce = $state(false);
let container: HTMLElement | undefined = $state(undefined);
function scrollHandler() {
// Only trigger if `visibleOnce` is false
if (container && !visibleOnce) {
const bcr = container.getBoundingClientRect();
visible =
bcr.bottom + bottom > 0 &&
bcr.right + right > 0 &&
bcr.top - top < window.innerHeight &&
bcr.left - left < window.innerWidth;
let observer: IntersectionObserver | undefined = $state(undefined);
// If `once` is true, set `visibleOnce` to true once `visible` becomes true
if (once && visible) visibleOnce = true;
// function scrollHandler() {
// // Only trigger if `visibleOnce` is false
// if (container && observer && !visibleOnce) {
// const bcr = container.getBoundingClientRect();
// visible =
// bcr.bottom + bottom > 0 &&
// bcr.right + right > 0 &&
// bcr.top - top < window.innerHeight &&
// bcr.left - left < window.innerWidth;
// if (container) {
// // console.log('Observing container:', observer);
// observer.observe(container);
// }
// // If `once` is true, set `visibleOnce` to true once `visible` becomes true
// if (once && visible) visibleOnce = true;
// }
// }
onMount(() => {
if (typeof IntersectionObserver !== 'undefined') {
const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
const observer = new IntersectionObserver(
(entries) => {
visible = entries[0].isIntersecting;
if (visible && once && container && observer) {
observer.unobserve(container);
}
},
{
rootMargin,
threshold,
}
);
// Unobserve when the component is unmounted
return () => {
if (container && observer) observer.unobserve(container);
};
}
});
$effect(() => {
console.log('visible:', visible);
});
</script>
<svelte:window onscroll={scrollHandler} />
<!-- <svelte:window onscroll={scrollHandler} /> -->
<div
class="visibility-tracker"