Optimizations of ToC scrolling.

3 files changed, 66 insertions, 51 deletions

diff --git a/static/js/journal.js b/static/js/journal.js
index 849fc57..fe6d4fe 100644
--- a/static/js/journal.js
+++ b/static/js/journal.js
@@ -16,3 +16,13 @@ Vue.component('parent',{
     </div>
     `
 });
+
+$().ready(function(){
+    var elems = $("table");
+    elems.each(function(idx){
+      $(this).addClass('table-striped');
+      $(this).addClass('table');
+      $(this).addClass('table-responsive');
+      $(this).addClass('table-hover');
+      });
+});
\ No newline at end of file
diff --git a/static/js/table.js b/static/js/table.js
deleted file mode 100644
index 6d8605d..0000000
--- a/static/js/table.js
+++ /dev/null
@@ -1,9 +0,0 @@
-$().ready(function(){
-      var elems = $("table");
-      elems.each(function(idx){
-        $(this).addClass('table-striped');
-        $(this).addClass('table');
-        $(this).addClass('table-responsive');
-        $(this).addClass('table-hover');
-        });
-});
\ No newline at end of file
diff --git a/static/js/toc.js b/static/js/toc.js
index c09f598..4fde664 100644
--- a/static/js/toc.js
+++ b/static/js/toc.js
@@ -1,47 +1,61 @@
-var spy = function() {
-  var elems = $(":header");
-  if (elems.length == 0) {
-    return;
-  }
-  var currentTop = $(window).scrollTop();
-  var currentBottom = $(window).scrollTop() + $(window).height();
-  var pageBottom = $('#EOF').offset().top;
-  
-  var meetUnread = false
-  var currentIndex = -1
-  elems.each(function(idx){
-    var elemTop = $(this).offset().top;
-    var id = $(this).attr('id');
-    var navElem = $('#' + id+ '-nav');
-    if(currentTop + $(this).height() >= elemTop || currentBottom >= pageBottom){
-      navElem.addClass('toc-active');
-    } else {
-      if (meetUnread == false) {
-        meetUnread = true
-        currentIndex = idx - 1
-      }
-      navElem.removeClass('toc-active');
+var spy = function () {
+    var elems = $(":header");
+    if (elems.length == 0) {
+        return;
     }
-  })
-  if (currentIndex==-1) {
-    currentIndex = elems.length - 1;
-  }
-  //console.log(elems[currentIndex].id);
-  //Collapse them
-  collapseOthers("#"+elems[currentIndex].id+"-nav");
+    var currentTop = $(window).scrollTop();
+    var currentBottom = $(window).scrollTop() + $(window).height();
+    var pageBottom = $('#EOF').offset().top;
+
+    var meetUnread = false
+    var currentIndex = -1
+    elems.each(function (idx) {
+        var elemTop = $(this).offset().top;
+        var id = $(this).attr('id');
+        var navElem = $('#' + id + '-nav');
+        if (currentTop + $(this).height() >= elemTop || currentBottom >= pageBottom) {
+            navElem.addClass('toc-active');
+        } else {
+            if (meetUnread == false) {
+                meetUnread = true
+                currentIndex = idx - 1
+            }
+            navElem.removeClass('toc-active');
+        }
+    })
+    if (currentIndex == -1) {
+        currentIndex = elems.length - 1;
+    }
+    //console.log(elems[currentIndex].id);
+    //Collapse them
+    collapseOthers("#" + elems[currentIndex].id + "-nav");
 }
 var collapseOthers = function (currentId) {
-  //console.log(currentId);
-  $(currentId).parents(".collapse").each(function(idx){
-    $(this).collapse("show");
-  });
-  $(currentId).parent().next().filter(".collapse").collapse("show");
-  $(".collapse").not($(currentId).parents()).not($(currentId).parent().next()).each(function(idx){
-    $(this).collapse("hide");
-  });
+    //console.log(currentId);
+    $(currentId).parents(".collapse").each(function (idx) {
+        $(this).collapse("show");
+    });
+    $(currentId).parent().next().filter(".collapse").collapse("show");
+    $(".collapse").not($(currentId).parents()).not($(currentId).parent().next()).each(function (idx) {
+        $(this).collapse("hide");
+    });
 
 }
-$().ready(function(){
-  spy();
-  $(window).bind('scroll', spy);
-});
\ No newline at end of file
+$().ready(function () {
+    spy();
+    $(window).bind('scroll', debounce(spy));
+});
+
+function debounce(func, delay = 250) {
+    let timer = null;
+
+    return () => {
+        let context = this;
+        let args = arguments;
+
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(context, args);
+        }, delay)
+    }
+}
\ No newline at end of file