fix: Handle observer options on window resize

Author: stefanskoricdev

apps/website/src/components/vibe-code-mvp/WorkWithUsDesktop.astro

@@ -119,28 +119,28 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
     }
   </div>
   <script>
-    const screenHeight = window.innerHeight;
+    const getObserverOpts = () => {
+      const screenHeight = window.innerHeight;
 
-    const observingElemsHeight = 700;
+      const observingElemsHeight = 700;
 
-    // Intersection area: from the very top of viewport
-    // down to observed elements height (700px) x 1.5
-    let intersectionBottomMargin = screenHeight - observingElemsHeight * 1.5;
-    let rootMargin = "0px";
+      // Intersection area: from the very top of viewport
+      // down to observed elements height (700px) x 1.5
+      let intersectionBottomMargin = screenHeight - observingElemsHeight * 1.5;
+      let rootMargin = "0px";
 
-    if (intersectionBottomMargin > 0) {
-      rootMargin = `0px 0px -${intersectionBottomMargin}px 0px`;
-    }
+      if (intersectionBottomMargin > 0) {
+        rootMargin = `0px 0px -${intersectionBottomMargin}px 0px`;
+      }
 
-    const opts = {
-      root: null,
-      rootMargin: rootMargin,
-      threshold: [0.7],
+      return {
+        root: null,
+        rootMargin: rootMargin,
+        threshold: [0.7],
+      };
     };
 
-    const images = document.querySelectorAll(".images");
-
-    const observer = new IntersectionObserver((entries) => {
+    const observeCallback = (entries: IntersectionObserverEntry[]) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           const targetIdx = Number(entry.target.getAttribute("data-index"));
@@ -155,11 +155,33 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
           });
         }
       });
-    }, opts);
+    };
 
     const textSections = document.querySelectorAll(".phase");
-    textSections.forEach((section) => {
-      observer.observe(section);
+    const images = document.querySelectorAll(".images");
+
+    let observer = new IntersectionObserver(observeCallback, getObserverOpts());
+
+    const handleUnobserve = (observer: IntersectionObserver) => {
+      textSections.forEach((section) => {
+        observer.observe(section);
+      });
+    };
+
+    const handleObserve = () => {
+      if (observer) {
+        handleUnobserve(observer);
+      }
+      observer = new IntersectionObserver(observeCallback, getObserverOpts());
+      textSections.forEach((section) => {
+        observer.observe(section);
+      });
+    };
+
+    window.addEventListener("resize", () => {
+      handleObserve();
     });
+
+    handleObserve();
   </script>
 </Section>