Highlight current heading in shortcuts

assets/css/content.css

@@ -4,12 +4,6 @@
     padding: 75px 15px 125px 15px;
 }
 
-.shortcuts-container {
-    width: 100%;
-    max-width: 150px;
-    margin: 75px 15px;
-}
-
 .content-container {
     max-width: 850px;
     margin: 0 30px;
@@ -53,31 +47,3 @@
     font-weight: bold;
     margin-top: 25px;
 }
-
-.shortcuts-title {
-    font-size: 17px;
-    font-weight: bold;
-}
-
-#shortcuts {
-    margin-top: 10px;
-    border-left: 1px solid var(--colorPrimaryDark);
-}
-
-.shortcuts-H2 {
-    margin: 5px 5px 0 15px;
-    font-size: 15px;
-    cursor: pointer;
-}
-
-.shortcuts-H3 {
-    margin: 5px 5px 0 25px;
-    font-size: 14px;
-    cursor: pointer;
-}
-
-@media only screen and (max-width: 1090px) {
-    .shortcuts-container {
-        display: none;
-    }
-}

assets/css/shortcuts.css

@@ -0,0 +1,52 @@
+.shortcuts-container {
+  position: sticky;
+  align-self: flex-start;
+  top: 6rem;
+  width: 100%;
+  max-width: 150px;
+  margin: 75px 15px;
+}
+
+.shortcuts-title {
+  font-size: 1.1rem;
+  opacity: 0.75;
+}
+
+.shortcuts-title img {
+  padding-right: 0.75rem;
+  opacity: 0.5;
+  vertical-align: middle;
+}
+
+#shortcuts {
+  margin-top: 10px;
+  border-left: 1px solid var(--colorPrimaryDark);
+}
+
+#shortcuts > div:not(.active) {
+  opacity: 0.75;
+}
+
+#shortcuts > div.active {
+  font-weight: bold;
+  color: var(--colorPrimaryDark);
+  border-left: 1.5px solid var(--colorPrimaryDark);
+}
+
+.shortcuts-H2 {
+  padding: 5px 5px 0 15px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.shortcuts-H3 {
+  padding: 5px 5px 0 25px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 1090px) {
+  .shortcuts-container {
+    display: none;
+  }
+}

layouts/partials/css.html

@@ -3,6 +3,7 @@
                    "bulma"
                    "vars" "styles" "content" "news" "keyfeatures"
                    "tables" "videos" "posts" "teams" "code-highlight"
+                   "shortcuts"
                 ) }}
 {{ $page := . }}
 

layouts/partials/section/section.html

@@ -1,6 +1,6 @@
 <section class="content-padding flex-row">
 <div class="shortcuts-container">
-  <div class="shortcuts-title">Shortcuts</div>
+  <div class="shortcuts-title"><img src="/images/icons/mui-icons_format-list-bulleted.svg"/>On this page</div>
   <div id="shortcuts"></div>
 </div>
 <div class="content-container">

layouts/partials/single/content.html

@@ -1,6 +1,6 @@
 <section class="content-padding flex-row">
     <div class="shortcuts-container">
-        <div class="shortcuts-title">Shortcuts</div>
+        <div class="shortcuts-title"><img src="/images/icons/mui-icons_format-list-bulleted.svg"/>On this page</div>
         <div id="shortcuts"></div>
     </div>
     <div class="content-container">

layouts/shortcodes/youtube.html

@@ -53,7 +53,7 @@
 {{ $transcript := $s | markdownify | safeHTML }}
 
 <div class="youtube">
-  <h{{ $levelOffset}} class="video-title">
+  <h{{ $levelOffset}} id="transcript-{{ $title | anchorize }}" class="video-title">
     {{ $title }}
   </h{{ $levelOffset }}>
   <iframe src="https://www.youtube.com/embed/{{ .Get "id" }}?enablejsapi=1{{ with .Get "color" }}{{ if eq . "white" }}&color=white{{ end }}{{ end }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}{{ if isset .Params "yt_start" }}&start={{ .Get "yt_start" }}{{ end }}{{ if isset .Params "yt_end" }}&end={{ .Get "yt_end" }}{{ end }}&modestbranding=0" allowfullscreen class="youtube"></iframe>

static/js/fresh.js

@@ -17,18 +17,6 @@ $(document).ready(function(){
         });
     }
 
-    //Navbar Clone
-    if ($('#navbar-clone').length) {
-        $(window).on("scroll", function() {    // this will work when your window scrolled.
-            var height = $(window).scrollTop();  //getting the scrolling height of window
-            if(height  > 50) {
-                $("#navbar-clone").addClass('is-active');
-            } else{
-                $("#navbar-clone").removeClass('is-active');
-            }
-        });
-    }
-
     //reveal elements on scroll so animations trigger the right way
     var $window           = $(window),
         win_height_padded = $window.height() * 1.1,

static/js/shortcuts.js

@@ -1,3 +1,79 @@
+// throttle function, enforces a minimum time interval
+function throttle(fn, interval) {
+    var lastCall, timeoutId;
+    return function () {
+        var now = new Date().getTime();
+        if (lastCall && now < (lastCall + interval) ) {
+            // if we are inside the interval we remove
+            // the existing timer and set up a new one
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(function () {
+                lastCall = now;
+                fn.call();
+            }, interval - (now - lastCall) );
+        } else {
+            // otherwise, we directly call the function
+            lastCall = now;
+            fn.call();
+        }
+    };
+}
+
+// Highlight currently scrolled to header in shortcuts
+// Based on https://stackoverflow.com/a/32396543/214686
+// and
+// https://stackoverflow.com/a/57494988/214686
+// which fixes some issues with the first, particularly
+// around scrolling upward.
+function scrollHeadersAndNavbar() {
+  var scrollPosition = $(window).scrollTop();
+  var headers = $(":header[id]");
+  var allShortcuts = $('#shortcuts > div');
+
+  //Navbar Clone
+  if (scrollPosition  > 50) {
+    $("#navbar-clone").addClass('is-active');
+  } else{
+    $("#navbar-clone").removeClass('is-active');
+  }
+
+  headers.each(function() {
+    var currentSection = $(this);
+    // get the position of the section
+    var sectionTop = currentSection.position().top;
+    var sectionHeight = currentSection.height();
+    var overall = scrollPosition + sectionHeight;
+    var headerOffset = remToPx(4);
+
+    if (scrollPosition < headerOffset) {
+      allShortcuts.removeClass('active');
+      return false;
+    }
+
+    // user has scrolled over the top of the section
+    if (((scrollPosition + headerOffset) >= sectionTop) && (scrollPosition < overall)) {
+      var id = currentSection.attr('id');
+      var shortcut = $(`#${id}-shortcut`);
+      if (shortcut.length && !shortcut.hasClass('active')) {
+        allShortcuts.removeClass('active');
+        shortcut.addClass('active');
+      }
+    }
+  });
+}
+
+function bindScroll() {
+  $(window).scroll(throttle(scrollHeadersAndNavbar, 100));
+}
+
+function unbindScroll() {
+  $(window).unbind('scroll');
+}
+
+function remToPx(rem) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
 function setupShortcuts(shortcutDepth=2) {
   shortcutDepth += 1; // to account for the page title
 
@@ -15,19 +91,34 @@ function setupShortcuts(shortcutDepth=2) {
   if (shortcutsTarget.length > 0) {
     $(classes).map(function(idx, el) {
       const title = el.textContent;
-      // transforms title into snake-case
-      const elTitle = title.replace(/\W/g, '-').toLowerCase();
+      const elId = el.id;
       // Gets the element type (e.g. h2, h3)
       const elType = $(el).get(0).tagName;
       // Adds snake-case title as an id attribute to target element
-      $(el).attr('id', elTitle);
-      shortcutsTarget.append(`<div id="${elTitle}-shortcut" class="shortcuts-${elType}">${title}</div>`);
+      shortcutsTarget.append(`<div id="${elId}-shortcut" class="shortcuts-${elType}" href="#${elId}">${title}</div>`);
+
+      const shortcut = $(`#${elId}-shortcut`);
+      shortcut.click(function() {
+        // We don't want the shortcuts to flash through highlights while
+        // we scroll to the desired header
+        unbindScroll();
+
+        // Replace what's in the location bar, without changing browser history
+        // and without triggering a page scroll
+        history.replaceState(null, null, `#${elId}`);
 
-      $(`#${elTitle}-shortcut`).click(function() {
+        let distance = $(`#${elId}`).offset().top-60;
         $([document.documentElement, document.body]).animate({
-          scrollTop: $(`#${elTitle}`).offset().top-60
-      }, 1000);
-      })
+          scrollTop: distance,
+        }, 300, null, function() {
+          $('#shortcuts > div').removeClass('active');
+          shortcut.addClass('active');
+
+          // Done moving to clicked header; re-enable
+          // scroll highlighting of shortcuts
+          bindScroll();
+        });
+      });
     });
   }
 
@@ -36,4 +127,6 @@ function setupShortcuts(shortcutDepth=2) {
   if ($('#shortcuts div').length < 1) {
     $('.shortcuts-container').css('display', 'none');
   }
+
+  bindScroll();
 }