feat: auto expand and collapse toc

archetypes/default.md

@@ -12,6 +12,7 @@ author: ""
 # you can close something for this content if you open it in config.toml.
 comment: false
 toc: false
+autoCollapseToc: false
 # you can define another contentCopyright. e.g. contentCopyright: "This is an another copyright."
 contentCopyright: false
 reward: false

exampleSite/config.toml

@@ -63,6 +63,7 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
   # 一些全局开关，你可以在每一篇内容的 front matter 中单独关闭某些选项
   # Some global options, you can close something in front matter.
   toc = true                                                                            # 是否开启目录
+  autoCollapseToc = true    # Auto expand and collapse toc                              # 目录自动展开/折叠
   fancybox = true           # see https://github.com/fancyapps/fancybox                 # 是否启用fancybox（图片可点击）
   bootcdn = false           # In china. @Deprecated: use [params.publicCDN]             # 是否使用bootcdn(@Deprecated: 请使用[params.publicCDN])
   mathjax = true            # see https://www.mathjax.org/                              # 是否使用mathjax（数学公式）

layouts/partials/post/toc.html

@@ -1,7 +1,7 @@
 {{ if and .Site.Params.toc (ne .Params.toc false) }}
 <div class="post-toc" id="post-toc">
   <h2 class="post-toc-title">{{ .Site.Data.even.default.posts.toc }}</h2>
-  <div class="post-toc-content">
+  <div class="post-toc-content{{ if or .Params.autoCollapseToc (and .Site.Params.autoCollapseToc (ne .Params.autoCollapseToc false)) | not }} always-active{{ end }}">
       {{.TableOfContents}}
   </div>
 </div>

src/css/_partial/_post/_toc.scss

@@ -20,6 +20,10 @@
   .post-toc-content {
     font-size: $post-toc-content;
 
+    &.always-active ul {
+      display: block;
+    }
+
     >nav>ul {
       margin: 10px 0;
     }
@@ -27,9 +31,14 @@
     ul {
       padding-left: 20px;
       list-style: $post-toc-list-style;
-  
+
       ul {
         padding-left: 15px;
+        display: none;
+      }
+
+      .has-active > ul {
+        display: block;
       }
     }
 

src/js/even.js

@@ -88,23 +88,37 @@ Even._initToc = function () {
   const HEADERFIX = 30
   const $toclink = $('.toc-link')
   const $headerlink = $('.headerlink')
+  const $tocLinkLis = $('.post-toc-content li')
 
   const headerlinkTop = $.map($headerlink, function (link) {
     return $(link).offset().top
   })
 
+  const headerLinksOffsetForSearch = $.map(headerlinkTop, function (offset) {
+    return offset - HEADERFIX
+  })
+
+  const searchActiveTocIndex = function (array, target) {
+    for (let i = 0; i < array.length - 1; i++) {
+      if (target > array[i] && target <= array[i + 1]) return i
+    }
+    if (target > array[array.length - 1]) return array.length - 1
+    return -1
+  }
+
   $(window).scroll(function () {
     const scrollTop = $(window).scrollTop()
+    const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop)
 
-    for (let i = 0; i < $toclink.length; i++) {
-      const isLastOne = i + 1 === $toclink.length
-      const currentTop = headerlinkTop[i] - HEADERFIX
-      const nextTop = isLastOne ? Infinity : headerlinkTop[i + 1] - HEADERFIX
+    $($toclink).removeClass('active')
+    $($tocLinkLis).removeClass('has-active')
 
-      if (currentTop < scrollTop && scrollTop <= nextTop) {
-        $($toclink[i]).addClass('active')
-      } else {
-        $($toclink[i]).removeClass('active')
+    if (activeTocIndex !== -1) {
+      $($toclink[activeTocIndex]).addClass('active')
+      let ancestor = $toclink[activeTocIndex].parentNode
+      while (ancestor.tagName !== 'NAV') {
+        $(ancestor).addClass('has-active')
+        ancestor = ancestor.parentNode.parentNode
       }
     }
   })
@@ -171,11 +185,9 @@ Even._refactorToc = function (toc) {
   const oldTocList = toc.children[0]
   let newTocList = oldTocList
   let temp
-  while (newTocList.children.length === 1 && (temp = newTocList.children[0].children[0]).tagName === 'UL')
-    newTocList = temp
+  while (newTocList.children.length === 1 && (temp = newTocList.children[0].children[0]).tagName === 'UL') newTocList = temp
 
-  if (newTocList !== oldTocList)
-    toc.replaceChild(newTocList, oldTocList)
+  if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList)
 }
 
 Even._linkToc = function () {

static/dist/even.min.js

@@ -1,2 +1,2 @@
-!function(e){function n(t){if(o[t])return o[t].exports;var c=o[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,n),c.l=!0,c.exports}var o={};n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=0)}([function(e,n,o){"use strict";var t=o(1);o(2),$(document).ready(function(){t.Even.backToTop(),t.Even.mobileNavbar(),t.Even.toc(),t.Even.fancybox()}),hljs.initHighlighting(),t.Even.highlight()},function(e,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t={};t.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},t.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),o=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});o.disableTouch(),n.click(function(){o.toggle()}),o.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),o.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){o.isOpen()&&n.click()})},t._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var o=e.offset().top-20,t=n.offset().top-e.height()-20,c={start:{position:"absolute",top:o},process:{position:"fixed",top:20},end:{position:"absolute",top:t}};$(window).scroll(function(){var n=$(window).scrollTop();n<o?e.css(c.start):n>t?e.css(c.end):e.css(c.process)})}var i=$(".toc-link"),r=$(".headerlink"),l=$.map(r,function(e){return $(e).offset().top});$(window).scroll(function(){for(var e=$(window).scrollTop(),n=0;n<i.length;n++){var o=n+1===i.length,t=l[n]-30,c=o?1/0:l[n+1]-30;t<e&&e<=c?$(i[n]).addClass("active"):$(i[n]).removeClass("active")}})},t.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},t.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n<e.length;n++){for(var o=e[n],t=o.parentElement,c=o.innerHTML.split(/\n/).slice(0,-1),i=c.length,r="",l=0;l<i;l++)r+='<div class="line">'+(l+1)+"</div>";for(var a="",s=0;s<i;s++)a+='<div class="line">'+c[s]+"</div>";o.className+=" highlight";var d=document.createElement("figure");d.className=o.className,d.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+r+'</pre></td><td class="code"><pre>'+a+"</pre></td></tr></tbody></table>",t.parentElement.replaceChild(d,t)}},t.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},t._refactorToc=function(e){for(var n=e.children[0],o=n,t=void 0;1===o.children.length&&"UL"===(t=o.children[0].children[0]).tagName;)o=t;o!==n&&e.replaceChild(o,n)},t._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a"),n=0;n<e.length;n++)e[n].className+=" toc-link";for(var o=1;o<=6;o++)for(var t=document.querySelectorAll(".post-content>h"+o),c=0;c<t.length;c++){var i=t[c];i.innerHTML='<a href="#'+i.id+'" class="headerlink" title="'+i.innerHTML+'"></a>'+i.innerHTML}},n.Even=t},function(e,n){}]);
+!function(e){function n(o){if(t[o])return t[o].exports;var c=t[o]={i:o,l:!1,exports:{}};return e[o].call(c.exports,c,c.exports,n),c.l=!0,c.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=0)}([function(e,n,t){"use strict";var o=t(1);t(2),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.toc(),o.Even.fancybox()}),hljs.initHighlighting(),o.Even.highlight()},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o={};o.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},o.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),t=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});t.disableTouch(),n.click(function(){t.toggle()}),t.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),t.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){t.isOpen()&&n.click()})},o._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var t=e.offset().top-20,o=n.offset().top-e.height()-20,c={start:{position:"absolute",top:t},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var n=$(window).scrollTop();n<t?e.css(c.start):n>o?e.css(c.end):e.css(c.process)})}var i=$(".toc-link"),r=$(".headerlink"),a=$(".post-toc-content li"),l=$.map(r,function(e){return $(e).offset().top}),s=$.map(l,function(e){return e-30}),d=function(e,n){for(var t=0;t<e.length-1;t++)if(n>e[t]&&n<=e[t+1])return t;return n>e[e.length-1]?e.length-1:-1};$(window).scroll(function(){var e=$(window).scrollTop(),n=d(s,e);if($(i).removeClass("active"),$(a).removeClass("has-active"),-1!==n){$(i[n]).addClass("active");for(var t=i[n].parentNode;"NAV"!==t.tagName;)$(t).addClass("has-active"),t=t.parentNode.parentNode}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n<e.length;n++){for(var t=e[n],o=t.parentElement,c=t.innerHTML.split(/\n/).slice(0,-1),i=c.length,r="",a=0;a<i;a++)r+='<div class="line">'+(a+1)+"</div>";for(var l="",s=0;s<i;s++)l+='<div class="line">'+c[s]+"</div>";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+r+'</pre></td><td class="code"><pre>'+l+"</pre></td></tr></tbody></table>",o.parentElement.replaceChild(d,o)}},o.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},o._refactorToc=function(e){for(var n=e.children[0],t=n,o=void 0;1===t.children.length&&"UL"===(o=t.children[0].children[0]).tagName;)t=o;t!==n&&e.replaceChild(t,n)},o._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a"),n=0;n<e.length;n++)e[n].className+=" toc-link";for(var t=1;t<=6;t++)for(var o=document.querySelectorAll(".post-content>h"+t),c=0;c<o.length;c++){var i=o[c];i.innerHTML='<a href="#'+i.id+'" class="headerlink" title="'+i.innerHTML+'"></a>'+i.innerHTML}},n.Even=o},function(e,n){}]);
 //# sourceMappingURL=even.min.js.map