New JS: Scroll ToC to follow content

iBug · Feb 5, 2021 · ca14b16 · ca14b16
1 parent 625dcbf
commit ca14b16
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -37,4 +37,5 @@
 {% unless site.env.CI %}
   <script src="{{ "/assets/js/clipboard.js" | relative_url }}" async defer></script>
   <script src="{{ "/assets/js/love.js" | relative_url }}" async defer></script>
+  <script src="{{ "/assets/js/nav-scroll.js" | relative_url }}" async defer></script>
 {% endunless %}
diff --git a/_sass/page-content.scss b/_sass/page-content.scss
@@ -3,8 +3,15 @@ section.page__content {
     margin-top: 0 !important;
   }
 
+  .toc .nav__title {
+    margin-top: 0;
+    padding: 0.5rem;
+    font-size: 0.8em;
+  }
+
   .toc__menu a {
     color: $text-color;
+    transition: background-color 0.2s linear;
   }
 
   a {
@@ -60,12 +67,6 @@ section.page__content {
     }
   }
 
-  .toc .nav__title {
-    margin-top: 0;
-    padding: 0.5rem;
-    font-size: 0.8em;
-  }
-
   table {
     display: table;
     width: auto;

diff --git a/_sass/toc.scss b/_sass/toc.scss
@@ -1,6 +1,8 @@
 .sidebar__right.sticky {
-  max-height: calc(100vh - 4em);
-  overflow-y: auto;
+  @include breakpoint($large) {
+    max-height: calc(100vh - 4em);
+    overflow-y: auto;
+  }
 
   &::-webkit-scrollbar {
     width: 2px;

diff --git a/assets/js/nav-scroll.js b/assets/js/nav-scroll.js
@@ -0,0 +1,15 @@
+document.addEventListener("gumshoeActivate", function (event) {
+  const target = event.target;
+  const scrollOptions = { behavior: "auto", block: "nearest", inline: "start" };
+
+  const tocElement = document.querySelector("aside.sidebar__right.sticky");
+  if (!tocElement) return;
+  if (!window.matchMedia("(min-width: 64em)").matches) return;
+
+  if (target.parentElement.classList.contains("toc__menu") && target == target.parentElement.firstElementChild) {
+    // Scroll to top instead
+    document.querySelector("nav.toc header").scrollIntoView(scrollOptions);
+  } else {
+    target.scrollIntoView(scrollOptions);
+  }
+});
diff --git a/script/patch.sh b/script/patch.sh
@@ -17,7 +17,7 @@ fi
 
 if command -v npx &>/dev/null && [ -e package.json ]; then
   # Combine all JS files into one
-  npx uglifyjs "$SRC"/assets/js/{main.min,clipboard,love}.js -c -m -o "$SRC"/assets/js/main.min.js
+  npx uglifyjs "$SRC"/assets/js/{main.min,clipboard,love,nav-scroll}.js -c -m -o "$SRC"/assets/js/main.min.js
 
   npx postcss "$SRC"/assets/css/main.css --use autoprefixer --replace --no-map
 fi