highlight table of content depending on where you are in the page

3 files changed, 116 insertions, 26 deletions

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 8681259..75b4c48 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -138,8 +138,9 @@ body{
             font-size:14px;

             line-height:20px;

             padding-left:2px;

+

             .TableOfContents {

-                font-weight:500;

+                

                 > *{

                     margin-left:5px;

                 }

@@ -170,6 +171,14 @@ body{
                 }

                 li{

                     padding: 8px 0px 8px 0px;

+                    a {

+                        font-weight:300;

+                        /*padding-left: 2px;*/

+                        &.active{

+                            font-weight:500;

+                        }

+                    }

+                    

                 }

                 

             }

diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
index 898ce4d..de0485c 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
@@ -65,31 +65,34 @@ body {
     font-size: 14px;
     line-height: 20px;
     padding-left: 2px; }
-    body article section.right-menu .TableOfContents {
-      font-weight: 500; }
-      body article section.right-menu .TableOfContents > * {
-        margin-left: 5px; }
-      body article section.right-menu .TableOfContents label {
-        font-weight: 700;
-        letter-spacing: -1px;
-        display: block;
-        margin-bottom: 14px;
-        border-bottom: 1px dotted #999999;
-        color: #333333;
-        font-variant: small-caps; }
-      body article section.right-menu .TableOfContents nav > ul {
-        padding: 0px 0px 0px 0px;
-        margin: 0px 0px 0px 0px; }
-        body article section.right-menu .TableOfContents nav > ul ul {
-          padding: 0px 0px 0px 14px;
-          margin: 0px 0px 0px 0px;
-          border-left: 1px solid #e6e6e6; }
-          body article section.right-menu .TableOfContents nav > ul ul li {
-            font-size: 90%; }
-      body article section.right-menu .TableOfContents ul {
-        list-style-type: none; }
-      body article section.right-menu .TableOfContents li {
-        padding: 8px 0px 8px 0px; }
+    body article section.right-menu .TableOfContents > * {
+      margin-left: 5px; }
+    body article section.right-menu .TableOfContents label {
+      font-weight: 700;
+      letter-spacing: -1px;
+      display: block;
+      margin-bottom: 14px;
+      border-bottom: 1px dotted #999999;
+      color: #333333;
+      font-variant: small-caps; }
+    body article section.right-menu .TableOfContents nav > ul {
+      padding: 0px 0px 0px 0px;
+      margin: 0px 0px 0px 0px; }
+      body article section.right-menu .TableOfContents nav > ul ul {
+        padding: 0px 0px 0px 14px;
+        margin: 0px 0px 0px 0px;
+        border-left: 1px solid #e6e6e6; }
+        body article section.right-menu .TableOfContents nav > ul ul li {
+          font-size: 90%; }
+    body article section.right-menu .TableOfContents ul {
+      list-style-type: none; }
+    body article section.right-menu .TableOfContents li {
+      padding: 8px 0px 8px 0px; }
+      body article section.right-menu .TableOfContents li a {
+        font-weight: 300;
+        /*padding-left: 2px;*/ }
+        body article section.right-menu .TableOfContents li a.active {
+          font-weight: 500; }
   body footer {
     background-color: #333333;
     color: #cccccc;
diff --git a/static/js/docport.js b/static/js/docport.js
index 244e0f8..2c8a581 100644
--- a/static/js/docport.js
+++ b/static/js/docport.js
@@ -42,6 +42,84 @@ jQuery(document).ready(function() {
 });

 

 

+(function scrollSpy() {

+  var OFFSET = 10;

+  var timer;

+  var headingsCache;

+

+  var findHeadings = function findHeadings() {

+    return headingsCache || document.querySelectorAll('.TableOfContents li > a');

+  };

+

+  var onScroll = function onScroll() {

+    if (timer) {

+      // throttle

+      return;

+    }

+

+    timer = setTimeout(function() {

+      timer = null;

+      var activeNavFound = false;

+      var headings = findHeadings(); // toc nav anchors

+

+      /**

+       * On every call, try to find header right after  <-- next header

+       * the one whose content is on the current screen <-- highlight this

+       */

+

+      for (var i = 0; i < headings.length; i++) {

+        // headings[i] is current element

+        // if an element is already active, then current element is not active

+        // if no element is already active, then current element is active

+        var currNavActive = !activeNavFound;

+        /**

+         * Enter the following check up only when an active nav header is not yet found

+         * Then, check the bounding rectangle of the next header

+         * The headers that are scrolled passed will have negative bounding rect top

+         * So the first one with positive bounding rect top will be the nearest next header

+         */

+

+        if (currNavActive && i < headings.length - 1) {

+          var heading = headings[i + 1];

+          var next = decodeURIComponent(heading.href.split('#')[1]);

+          var nextHeader = document.getElementById(next);

+

+          if (nextHeader) {

+            var top = nextHeader.getBoundingClientRect().top;

+            currNavActive = top > OFFSET;

+          } else {

+            console.error('Can not find header element', {

+              id: next,

+              heading: heading,

+            });

+          }

+        }

+        /**

+         * Stop searching once a first such header is found,

+         * this makes sure the highlighted header is the most current one

+         */

+

+        if (currNavActive) {

+          activeNavFound = true;

+          headings[i].classList.add('active');

+        } else {

+          headings[i].classList.remove('active');

+        }

+      }

+    }, 100);

+  };

+

+  document.addEventListener('scroll', onScroll);

+  document.addEventListener('resize', onScroll);

+  document.addEventListener('DOMContentLoaded', function() {

+    // Cache the headings once the page has fully loaded.

+    headingsCache = findHeadings();

+    onScroll();

+  });

+})();

+

+

+

 

 // Get Parameters from some url

 var getUrlParameter = function getUrlParameter(sPageURL) {