From 2bcefea13b12d5531295ec625b22ff3cb972013e Mon Sep 17 00:00:00 2001 From: amazingrise <8315221+AmazingRise@users.noreply.github.com> Date: Thu, 4 Jun 2020 18:32:44 +0800 Subject: Optimizations of ToC scrolling. --- static/js/journal.js | 10 ++++++ static/js/table.js | 9 ----- static/js/toc.js | 98 ++++++++++++++++++++++++++++++---------------------- 3 files changed, 66 insertions(+), 51 deletions(-) delete mode 100644 static/js/table.js (limited to 'static') 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',{ ` }); + +$().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 -- cgit v1.2.3