More reliable toc panel height

next-theme · Jul 22, 2021 · 7ead651 · 7ead651
1 parent b796e87
commit 7ead651
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
@@ -22,10 +22,14 @@ NexT.boot.registerEvents = function() {
       const sidebar = document.querySelector('.sidebar-inner');
 
       const panelContainer = sidebar.querySelector('.sidebar-panel-container');
-      const activePanelHeight = panelContainer.children[index].scrollHeight;
-      panelContainer.style.setProperty('--active-panel-height', `${activePanelHeight}px`);
-      const inactivePanelHeight = panelContainer.children[1 - index].scrollHeight;
-      panelContainer.style.setProperty('--inactive-panel-height', `${inactivePanelHeight}px`);
+      const nav = panelContainer.firstElementChild.querySelector('.nav');
+      const navHeight = nav ? parseInt(nav.style.getPropertyValue('--height'), 10) : 0;
+      const panelHeights = [
+        navHeight || panelContainer.firstElementChild.scrollHeight,
+        panelContainer.lastElementChild.scrollHeight
+      ];
+      panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);
+      panelContainer.style.setProperty('--active-panel-height', `${panelHeights[index]}px`);
 
       const activeClassNames = ['sidebar-toc-active', 'sidebar-overview-active'];
       sidebar.classList.replace(activeClassNames[1 - index], activeClassNames[index]);

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -163,6 +163,19 @@ NexT.utils = {
     });
   },
 
+  updateActiveNav: function() {
+    if (!Array.isArray(NexT.utils.sections)) return;
+    let index = NexT.utils.sections.findIndex(element => {
+      return element && element.getBoundingClientRect().top > 0;
+    });
+    if (index === -1) {
+      index = NexT.utils.sections.length - 1;
+    } else if (index > 0) {
+      index--;
+    }
+    this.activateNavByIndex(index);
+  },
+
   registerScrollPercent: function() {
     const backToTop = document.querySelector('.back-to-top');
     const readingProgressBar = document.querySelector('.reading-progress-bar');
@@ -179,16 +192,7 @@ NexT.utils = {
           readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
         }
       }
-      if (!Array.isArray(NexT.utils.sections)) return;
-      let index = NexT.utils.sections.findIndex(element => {
-        return element && element.getBoundingClientRect().top > 0;
-      });
-      if (index === -1) {
-        index = NexT.utils.sections.length - 1;
-      } else if (index > 0) {
-        index--;
-      }
-      this.activateNavByIndex(index);
+      NexT.utils.updateActiveNav();
     }, { passive: true });
 
     backToTop && backToTop.addEventListener('click', () => {
@@ -280,6 +284,7 @@ NexT.utils = {
       });
       return target;
     });
+    this.updateActiveNav();
   },
 
   registerPostReward: function() {
@@ -307,11 +312,12 @@ NexT.utils = {
 
     let activateEle = target.querySelector('.nav-child') || target.parentElement;
     let navChildHeight = 0;
-    while (activateEle !== nav) {
+
+    while (nav.contains(activateEle)) {
       if (activateEle.classList.contains('nav-item')) {
         activateEle.classList.add('active');
-      } else if (activateEle.classList.contains('nav-child')) {
-        // Defined in CSS. The last nav-item in a nav-child has a margin-bottom of 5px.
+      } else if (activateEle.classList.contains('nav-child') || activateEle === nav) {
+        // Defined in CSS. The last nav-item in a list has a margin-bottom of 5px.
         const extraHeight = 5;
 
         // scrollHeight isn't reliable here as transitioning items affect.