stash

src/components/Visible/Visible.svelte

@@ -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;
-    /**
+    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
-     * A snippet that renders inside the component.
+    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() {
+  let observer: IntersectionObserver | undefined = $state(undefined);
-    // 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;
 
-      // If `once` is true, set `visibleOnce` to true once `visible` becomes true
+  // function scrollHandler() {
-      if (once && visible) visibleOnce = true;
+  //   // 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"