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

gets rid of scroll event, makes root margin a string to allow unit specification

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-06-24 12:38:01 -07:00
parent a5006e18d0
commit ff8c114526
Failed to extract signature
2 changed files with 19 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,26 +9,14 @@
* Useful for loading expensive images or other media and then keeping them around once they're first loaded.
*/
once?: boolean;
/**
* Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`.
* Specify a pixel value.
*/
top?: number;
/**
* Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`.
* Specify a pixel value.
*/
bottom?: number;
/**
* Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`.
* Specify a pixel value.
*/
left?: number;
/**
* Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`.
* Specify a pixel value.
*/
right?: number;
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Accepted units are `px` or `%`. */
top?: string;
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Accepted units are `px` or `%`. */
bottom?: string;
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Accepted units are `px` or `%`. */
left?: string;
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Accepted units are `px` or `%`. */
right?: string;
/** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
threshold?: number;
children?: Snippet<[boolean]>;
@ -36,48 +24,25 @@
let {
once = false,
top = 0,
bottom = 0,
left = 0,
right = 0,
top = '0px',
bottom = '0px',
left = '0px',
right = '0px',
threshold = 0,
children,
}: Props = $props();
let visible = $state(false);
let visibleOnce = $state(false);
let container: HTMLElement | undefined = $state(undefined);
let observer: IntersectionObserver | undefined = $state(undefined);
// 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 rootMargin = `${bottom} ${left} ${top} ${right}`;
const observer = new IntersectionObserver(
(entries) => {
visible = entries[0].isIntersecting;
if (visible && once && container && observer) {
if (visible && once && container) {
observer.unobserve(container);
}
},
@ -86,27 +51,17 @@
threshold,
}
);
// Unobserve when the component is unmounted
if (container) observer.observe(container);
return () => {
if (container && observer) observer.unobserve(container);
if (container) observer.observe(container);
};
}
});
$effect(() => {
console.log('visible:', visible);
});
$effect(() => console.log('visible', visible));
</script>
<!-- <svelte:window onscroll={scrollHandler} /> -->
<div
class="visibility-tracker"
class:visible
class:not-visible={!visible}
bind:this={container}
>
<div bind:this={container}>
{#if children}
{@render children(visible)}
{/if}

2
src/components/Visible/demo/VisibleDemo.svelte
View file

@ -5,7 +5,7 @@
import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
let top = 100;
let top = '150px';
const demoText =
'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';