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

gets rid of interaction observer

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-06-24 11:51:14 -07:00
parent 6858a8a868
commit b17ce2ee4b
Failed to extract signature
2 changed files with 5 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
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) --> <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
<script lang="ts"> <script lang="ts">
import { onMount, type Snippet } from 'svelte'; import { type Snippet } from 'svelte';
interface Props { interface Props {
/** /**
@ -29,8 +29,9 @@
* Specify a pixel value. * Specify a pixel value.
*/ */
right?: number; right?: number;
/** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */ /**
threshold?: number; * A snippet that renders inside the component.
*/
children?: Snippet<[boolean]>; children?: Snippet<[boolean]>;
} }
@ -40,7 +41,6 @@
bottom = 0, bottom = 0,
left = 0, left = 0,
right = 0, right = 0,
threshold = 0,
children, children,
}: Props = $props(); }: Props = $props();
@ -62,31 +62,6 @@
if (once && visible) visibleOnce = 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.unobserve(container);
}
},
{
rootMargin,
threshold,
}
);
if (container) observer.observe(container);
// Unobserve when the component is unmounted
return () => {
if (container) observer.unobserve(container);
};
}
});
</script> </script>
<svelte:window onscroll={scrollHandler} /> <svelte:window onscroll={scrollHandler} />

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

@ -5,7 +5,7 @@
import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte'; import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
import sharkSrc from '../../FeaturePhoto/images/shark.jpg'; import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
let top = 200; let top = 100;
const demoText = 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.'; '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.';