From 764125e6b95af923643b1a4be82975ff79a8826c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 2 Jan 2024 19:26:05 +0800
Subject: [PATCH] Test replace scroll-based to inview

---
 src/app.css                 | 12 ++++++++++-
 src/components/timeline.jsx | 41 +++++++++++++++++++++++++------------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/app.css b/src/app.css
index a8ba5ecd..36061c9a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -894,6 +894,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   text-shadow: 0 1px var(--bg-color);
 }
 .status-carousel > ul {
+  --carousel-gap: 16px;
   display: flex;
   overflow-x: auto;
   overflow-y: clip;
@@ -901,7 +902,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   scroll-behavior: smooth;
   margin: 0;
   padding: 8px 16px;
-  gap: 16px;
+  gap: var(--carousel-gap);
   align-items: flex-start;
   counter-reset: index;
   min-height: 160px;
@@ -926,6 +927,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
   display: none;
 }
+.status-carousel .status-carousel-beacon {
+  margin-right: calc(-1 * var(--carousel-gap));
+  pointer-events: none;
+  opacity: 0;
+
+  ~ .status-carousel-beacon {
+    margin-left: calc(-1 * var(--carousel-gap));
+  }
+}
 /*
   Assume that browsers that do support inline-size property also support container queries.
   https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 3af0f3df..2939c8eb 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -698,18 +698,18 @@ function StatusCarousel({ title, class: className, children }) {
   // });
   const startButtonRef = useRef();
   const endButtonRef = useRef();
-  useScrollFn(
-    {
-      scrollableRef: carouselRef,
-      direction: 'horizontal',
-      init: true,
-    },
-    ({ reachStart, reachEnd }) => {
-      if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
-      if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
-    },
-    [],
-  );
+  // useScrollFn(
+  //   {
+  //     scrollableRef: carouselRef,
+  //     direction: 'horizontal',
+  //     init: true,
+  //   },
+  //   ({ reachStart, reachEnd }) => {
+  //     if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
+  //     if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
+  //   },
+  //   [],
+  // );
   // useEffect(() => {
   //   init?.();
   // }, []);
@@ -749,7 +749,22 @@ function StatusCarousel({ title, class: className, children }) {
           </button>
         </span>
       </header>
-      <ul ref={carouselRef}>{children}</ul>
+      <ul ref={carouselRef}>
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (startButtonRef.current)
+              startButtonRef.current.disabled = inView;
+          }}
+        />
+        {children}
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (endButtonRef.current) endButtonRef.current.disabled = inView;
+          }}
+        />
+      </ul>
     </div>
   );
 }