fix: Resolve some problems of toc

1. Solved that toc can't automatically scroll when h2 is before h1 in article. 2. Solved that sub-toc can't automatically hide when h2 is before h1 in article.
liuyib · Sep 13, 2019 · ebf5d11 · ebf5d11
1 parent 8f06543
commit ebf5d11
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/source/css/_common/components/sidebar/index.styl b/source/css/_common/components/sidebar/index.styl
@@ -59,15 +59,15 @@
     }
 
     if (!hexo-config('toc.expand_all')) {
-      .toc .toc-child {
+      .toc-child {
         display: none;
       }
 
-      .toc .active > .toc-child {
+      .active > .toc-child {
         display: block;
       }
 
-      .toc .current > .toc-child {
+      .current > .toc-child {
         display: block;
       }
     }

diff --git a/source/js/sidebar.js b/source/js/sidebar.js
@@ -2,6 +2,17 @@ $(document).ready(function () {
   var tocDepth = CONFIG.sidebar.renderTocDepth;
   // Optimize selector by theme config.
   var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6,'.slice(0, tocDepth * 3).slice(0, -1);
+
+  function initTocDisplay () {
+    if ($('.post-body').find(HEADING_SELECTOR)[0]) {
+      return;
+    }
+
+    $('.sidebar-nav').addClass('hide');
+    $('.sidebar-toc').addClass('hide');
+    $('.sidebar-ov').removeClass('hide');
+  }
+
   // The heading that reached the top currently.
   var currHeading = null;
   // The heading that reached the top last time.
@@ -28,7 +39,7 @@ $(document).ready(function () {
     });
 
     // All heading are not to the top.
-    if ($postBody[0] && (!!$firsetChild[0] &&
+    if ($postBody[0] && ($firsetChild[0] &&
         $firsetChild.offset().top - $(window).scrollTop() > 0)) {
       if (!isRemoveTocClass) {
         $allTocItem.removeClass('active current');
@@ -58,7 +69,7 @@ $(document).ready(function () {
   // Scroll the post toc to the middle.
   function scrollTocToMiddle () {
     var $tocWrapHeight = $('.sidebar-toc').height();
-    var $tocHeight = $('.sidebar-toc .toc').height();
+    var $tocHeight = $('.sidebar-toc > div').height();
 
     if ($tocHeight <= $tocWrapHeight) {
       return;
@@ -88,7 +99,7 @@ $(document).ready(function () {
   // Distance from sidebar to top.
   var SIDEBAR_STICKY_TOP = parseInt(CONFIG.sidebar.offsetTop);
   var isSidebarSticky = false;
-  
+
   // Sticky the sidebar when it arrived the top.
   function sidebarSticky () {
     var $sidebar = $('.sidebar-inner');
@@ -175,6 +186,8 @@ $(document).ready(function () {
       $overview.css('display', 'block');
       $overview.velocity('stop').velocity('fadeIn');
     });
+
+    initTocDisplay();
   };
 
   // Initialization

diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js
@@ -7,7 +7,6 @@ $(document).ready(function () {
   }
 
   Stun.utils.pjaxReloadBoot = function () {
-    this.initTocDisplay();
     this.addCopyButton();
     this.registerCopyEvent();
 

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -175,15 +175,6 @@ Stun.utils = Stun.$u = {
       return false;
     }
   },
-  initTocDisplay: function () {
-    if ($('.post-body').find('h1,h2,h3,h4,h5,h6')[0]) {
-      return;
-    }
-
-    $('.sidebar-nav').addClass('hide');
-    $('.sidebar-toc').addClass('hide');
-    $('.sidebar-ov').removeClass('hide');
-  },
   // Wrap images with fancybox support.
   wrapImageWithFancyBox: function () {
     $('.content img').not(':hidden').each(function () {
@@ -255,7 +246,7 @@ Stun.utils = Stun.$u = {
   },
   // Add a mark icon to the link with `target="_blank"` attribute.
   addIconToExternalLink: function (container) {
-    if (!$(container).length) {
+    if (!$(container)[0]) {
       return;
     }