From 0c04fffb1bb1ea383293c7486c9b0c4d456b9738 Mon Sep 17 00:00:00 2001
From: Will Norris <wnorris@twitter.com>
Date: Fri, 22 Oct 2021 16:55:19 -0700
Subject: [PATCH] use IntersectionObserver for scrollspy

rather than using Bootstrap's scrollspy, we can do it ourselves pretty
easily with IntersectionObserver.  This also removes the final bit of
code using bootstrap or jquery, so we can remove those dependencies.
---
 assets/css/year-in-review.scss       |  1 +
 layouts/_default/year-in-review.html | 13 +------------
 static/js/year-in-review.js          | 25 ++++++++++++++++++++-----
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
index c57ec4243..66c440e08 100644
--- a/assets/css/year-in-review.scss
+++ b/assets/css/year-in-review.scss
@@ -180,6 +180,7 @@ a.YIRnav-YIR-link:hover {
 }
 
 .nav li {
+  list-style: none;
   position: relative;
   transition: all 0.3s ease-out;
   margin-bottom: var(--feather-grid-medium);
diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
index 69d07a7be..2e308da4d 100644
--- a/layouts/_default/year-in-review.html
+++ b/layouts/_default/year-in-review.html
@@ -27,10 +27,6 @@
     <title>{{ .Title }}</title>
     <link rel="shortcut icon" type="image/png" href="{{ "assets/favicon.ico" | relURL }}"/>
 
-    <!-- Year in Review timeline effect CSS -->
-    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
-    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
-
     <!-- Main CSS -->
     {{- $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
@@ -385,14 +381,7 @@ <h1>@TwitterOSS</h1>
   {{ end }}
 </script>
 
-<!-- Year in Review timeline effect JS -->
-<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
-<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
-
-<!-- Twemoji -->
-<!-- <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script> -->
-
-<script src="{{ "js/main.js" | relURL }}"></script> 
+<script src="{{ "js/main.js" | relURL }}"></script>
 <script src="{{ printf "js/%s" .Params.custom_js | relURL }}"></script>
 {{ partial "ga.html" . }}
 </html>
diff --git a/static/js/year-in-review.js b/static/js/year-in-review.js
index a075ac166..e492a75c5 100644
--- a/static/js/year-in-review.js
+++ b/static/js/year-in-review.js
@@ -48,12 +48,10 @@ renderTopRepos(allRepos);
 
 // Svg triggers using intersection observer
 // https://alligator.io/js/intersection-observer/
-const svgs = document.querySelectorAll('.YIR-wrapper svg');
 const config = {
   rootMargin: '50px 50px 50px 50px',
   threshold: [0, 0.25, 0.5]
 };
-
 observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.intersectionRatio > 0) {
@@ -63,11 +61,28 @@ observer = new IntersectionObserver((entries) => {
     }
   });
 }, config);
-svgs.forEach(image => {
+document.querySelectorAll('.YIR-wrapper svg').forEach(image => {
   observer.observe(image);
-}, config);
+});
 
-// Media query for Year in Review mobile navigation
+// show active section in nav menu
+const navEntries = document.querySelectorAll('.nav > li')
+observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      navEntries.forEach(n => {
+        if (n.querySelector(`a[href="#${entry.target.id}"]`)) {
+          n.classList.add('active')
+        } else {
+          n.classList.remove('active')
+        }
+      })
+    }
+  })
+}, {rootMargin: "-50% 0px"})
+document.querySelectorAll('section').forEach(e => {
+  observer.observe(e);
+})
 
 // Close nav-menu when menu item clicked (only effects mobile menu)
 document.querySelectorAll("#nav-menu a").forEach(e => {