From e0561a45e5c8ce60205ae8376a1fc16d660e7931 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 16 Oct 2023 21:30:36 +0100
Subject: [PATCH] Improve scroll indicator implementation

Now I know why it works!
---
 package-lock.json          | 11 +++++++++++
 package.json               |  1 +
 static/src/js/base.js      |  1 +
 static/src/js/content.js   | 34 +++++++++++++++++++++++++---------
 static/src/scss/_hero.scss |  4 ++--
 5 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a94e5a5..d10b599 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "glightbox": "3.2.0",
         "htmx.org": "1.9.2",
         "lite-youtube-embed": "0.3.0",
+        "lodash.clamp": "4.0.3",
         "lodash.debounce": "4.0.8",
         "lodash.throttle": "4.1.1",
         "npm-run-all": "4.1.5",
@@ -2248,6 +2249,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -5398,6 +5404,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
diff --git a/package.json b/package.json
index 21bbcbb..005575e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "glightbox": "3.2.0",
     "htmx.org": "1.9.2",
     "lite-youtube-embed": "0.3.0",
+    "lodash.clamp": "4.0.3",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "npm-run-all": "4.1.5",
diff --git a/static/src/js/base.js b/static/src/js/base.js
index ddc82ff..080d738 100644
--- a/static/src/js/base.js
+++ b/static/src/js/base.js
@@ -89,6 +89,7 @@ window.addEventListener("load", () => {
 
 window.addEventListener("DOMContentLoaded", () => {
   setHeroHeight();
+  handleHeroStuck();
 
   if (window.location.hash <= 1) {
     return;
diff --git a/static/src/js/content.js b/static/src/js/content.js
index d4354e4..14c420b 100644
--- a/static/src/js/content.js
+++ b/static/src/js/content.js
@@ -1,17 +1,33 @@
 require("lite-youtube-embed");
 const GLightbox = require("glightbox");
+const clamp = require("lodash.clamp");
 
 const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
 const CONTENT = document.querySelector(".container.content");
 
-window.addEventListener("load", () => {
-  GLightbox({});
-});
+function handleScrollIndicator() {
+  // How far down the page does the content start?
+  const initialScroll = CONTENT.getBoundingClientRect().top + window.scrollY;
 
-window.addEventListener("scroll", () => {
-  const winScroll =
-    document.body.scrollTop || document.documentElement.scrollTop;
-  const height = CONTENT.getBoundingClientRect().height;
-  const scrolled = Math.min((winScroll / height) * 100, 100);
-  SCROLL_INDICATOR.style.width = `${scrolled}%`;
+  const contentHeight = CONTENT.getBoundingClientRect().height;
+
+  // How far down the page do we consider the content "read"?
+  const scrollTarget = window.innerHeight * 0.75;
+
+  const scrolled =
+    (window.scrollY - initialScroll + scrollTarget) / contentHeight;
+
+  const scrolledPercentage = clamp(scrolled * 100, 0, 100);
+
+  SCROLL_INDICATOR.style.width = `${scrolledPercentage.toFixed(2)}%`;
+}
+
+window.addEventListener("load", () => {
+  window.addEventListener("resize", handleScrollIndicator);
+  window.addEventListener("scroll", handleScrollIndicator);
+
+  GLightbox({});
+
+  // Initialize the indicator
+  handleScrollIndicator();
 });
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index cf4af8a..d41d3d7 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -130,10 +130,10 @@ section.hero {
     height: 5px;
 
     #scroll-indicator {
-      transition-duration: 0.5s;
+      transition-duration: 0.3s;
       transition-property: background-color;
       height: 100%;
-      width: 50%;
+      width: 0%;
     }
   }