Finish auto collapse on contents.

2 files changed, 62 insertions, 26 deletions

diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index a21fa69..4f4a79c 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -7,25 +7,36 @@
 		{{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }}
 		{{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }}
 		<center>- {{ i18n "toc_title" }} -</center>
+		{{ $scratch := newScratch }}
+		{{ $scratch.Set "prev_heading" 1 }}
+		<ul>
 			{{ range $headers }}
 				{{ $header := . }}
 				{{ range first 1 (findRE $re $header 1) }}
 					{{ range findRE $renum . 1 }}
 						{{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }}
-						{{ range seq $next_heading }}
-							<ul>
+						{{ $prev_heading := $scratch.Get "prev_heading"}}
+						{{ if lt $next_heading $prev_heading }}
+							{{ range seq (sub $prev_heading $next_heading) }}
+								</ul>
+							{{ end }}
 						{{ end }}
-						{{ $anchorId :=  (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }}
-								<li>
-				 					<a href="#{{ $anchorId }}" v-on:click="closeDrawer" id="{{ $anchorId }}-nav">
-										 {{ $header | plainify | htmlUnescape }}
-									</a>
-								</li>
-						{{ range seq $next_heading }}
-							</ul>
+						{{ if gt $next_heading $prev_heading }}
+							{{ range seq (sub $next_heading $prev_heading) }}
+								<ul class="collapse" data-toggle="collapse">
+							{{ end }}
 						{{ end }}
+						{{ $anchorId :=  (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }}
+							<li>
+								<a href="#{{ $anchorId }}" v-on:click="closeDrawer" onclick="collapseOthers(`#{{ $anchorId | safeJS}}-nav`)" id="{{ $anchorId }}-nav">
+									{{ $header | plainify | htmlUnescape }}
+								</a>
+							</li>
+						
+						{{ $scratch.Set "prev_heading" $next_heading }}
 					{{ end }}
 				{{ end }}
 			{{ end }}
+		</ul>
 	</div>
 {{ end }}
diff --git a/static/js/toc.js b/static/js/toc.js
index 075a09e..c09f598 100644
--- a/static/js/toc.js
+++ b/static/js/toc.js
@@ -1,22 +1,47 @@
-$().ready(function(){
+var spy = function() {
   var elems = $(":header");
   if (elems.length == 0) {
     return;
   }
-  $(window).bind('scroll', function() {
-      var currentTop = $(window).scrollTop();
-      var currentBottom = $(window).scrollTop() + $(window).height();
-      var pageBottom = $('#EOF').offset().top;
-      
-      elems.each(function(idx){
-        var elemTop = $(this).offset().top;
-        var id = $(this).attr('id');
-        var navElem = $('#' + id+ '-nav');
-        if(currentTop >= elemTop || currentBottom >= pageBottom){
-      	  navElem.addClass('toc-active');
-        } else {
-          navElem.removeClass('toc-active');
-        }
-      })
+  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");
+  });
+
+}
+$().ready(function(){
+  spy();
+  $(window).bind('scroll', spy);
 });
\ No newline at end of file