From ff8c114526d59a54574fa603fbaa5939cd14eb7e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:38:01 -0700
Subject: [PATCH] gets rid of scroll event, makes root margin a string to allow
 unit specification

---
 src/components/Visible/Visible.svelte         | 81 +++++--------------
 .../Visible/demo/VisibleDemo.svelte           |  2 +-
 2 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 38e4ec75..d48a3be5 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -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}
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index ca97581a..02f65c77 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -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.';