hexo-theme-next - npm Package Compare versions

Comparing version 8.14.2 to 8.15.0

package.json

 {
   "name": "hexo-theme-next",
-  "version": "8.14.2",
+  "version": "8.15.0",
   "description": "Elegant and powerful theme for Hexo.",
@@ -36,5 +36,5 @@ "main": "package.json",
     "@next-theme/eslint-config": "0.0.3",
-    "c8": "7.12.0",
+    "c8": "7.13.0",
     "chai": "4.3.7",
-    "eslint": "8.33.0",
+    "eslint": "8.35.0",
     "hexo": "6.3.0",
@@ -45,4 +45,4 @@ "hexo-renderer-marked": "6.0.0",
     "stylelint": "14.16.1",
-    "stylelint-stylus": "0.17.1"
+    "stylelint-stylus": "0.18.0"
   }
 }

source/js/pjax.js

@@ -7,7 +7,21 @@ /* global NexT, CONFIG, Pjax */
     'script[type="application/json"]',
+    // Precede .main-inner to prevent placeholder TOC changes asap
+    '.post-toc-wrap',
     '.main-inner',
-    '.post-toc-wrap',
     '.languages',
     '.pjax'
   ],
+  switches: {
+    '.post-toc-wrap': function(oldWrap, newWrap) {
+      if (newWrap.querySelector('.post-toc')) {
+        Pjax.switches.outerHTML.call(this, oldWrap, newWrap);
+      } else {
+        const curTOC = oldWrap.querySelector('.post-toc');
+        if (curTOC) {
+          curTOC.classList.add('placeholder-toc');
+        }
+        this.onSwitch();
+      }
+    }
+  },
   analytics: false,
@@ -32,3 +46,3 @@ cacheBust: false,
   if (CONFIG.sidebar.display !== 'remove') {
-    const hasTOC = document.querySelector('.post-toc');
+    const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
     document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
@@ -35,0 +49,0 @@ NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);

source/js/utils.js

@@ -125,2 +125,15 @@ /* global NexT, CONFIG */
 
+  updateActiveNav: function() {
+    if (!Array.isArray(NexT.utils.sections)) return;
+    let index = NexT.utils.sections.findIndex(element => {
+      return element && element.getBoundingClientRect().top > 10;
+    });
+    if (index === -1) {
+      index = NexT.utils.sections.length - 1;
+    } else if (index > 0) {
+      index--;
+    }
+    this.activateNavByIndex(index);
+  },
+
   registerScrollPercent: function() {
@@ -142,12 +155,3 @@ const backToTop = document.querySelector('.back-to-top');
       }
-      if (!Array.isArray(NexT.utils.sections)) return;
-      let index = NexT.utils.sections.findIndex(element => {
-        return element && element.getBoundingClientRect().top > 10;
-      });
-      if (index === -1) {
-        index = NexT.utils.sections.length - 1;
-      } else if (index > 0) {
-        index--;
-      }
-      this.activateNavByIndex(index);
+      this.updateActiveNav();
     }, { passive: true });
@@ -268,3 +272,3 @@
   registerSidebarTOC: function() {
-    this.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
+    this.sections = [...document.querySelectorAll('.post-toc:not(.placeholder-toc) li a.nav-link')].map(element => {
       const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
@@ -287,2 +291,3 @@ // TOC item animation navigate.
     });
+    this.updateActiveNav();
   },
@@ -299,14 +304,31 @@
   activateNavByIndex: function(index) {
-    const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
+    const nav = document.querySelector('.post-toc:not(.placeholder-toc) .nav');
+    if (!nav) return;
+
+    const navItemList = nav.querySelectorAll('.nav-item');
+    const target = navItemList[index];
     if (!target || target.classList.contains('active-current')) return;
 
-    document.querySelectorAll('.post-toc .active').forEach(element => {
-      element.classList.remove('active', 'active-current');
+    const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
+
+    nav.querySelectorAll('.active').forEach(navItem => {
+      navItem.classList.remove('active', 'active-current');
     });
     target.classList.add('active', 'active-current');
-    let parent = target.parentNode;
-    while (!parent.matches('.post-toc')) {
-      if (parent.matches('li')) parent.classList.add('active');
-      parent = parent.parentNode;
+
+    let activateEle = target.querySelector('.nav-child') || target.parentElement;
+    let navChildHeight = 0;
+
+    while (nav.contains(activateEle)) {
+      if (activateEle.classList.contains('nav-item')) {
+        activateEle.classList.add('active');
+      } else { // .nav-child or .nav
+        // scrollHeight isn't reliable for transitioning child items.
+        // The last nav-item in a list has a margin-bottom of 5px.
+        navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
+        activateEle.style.setProperty('--height', `${navChildHeight}px`);
+      }
+      activateEle = activateEle.parentElement;
     }
+
     // Scrolling to center active TOC element if TOC content is taller then viewport.
@@ -326,3 +348,3 @@ const tocElement = document.querySelector(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini' ? '.sidebar-panel-container' : '.sidebar');
     // Expand sidebar on post detail page by default, when post has a toc.
-    const hasTOC = document.querySelector('.post-toc');
+    const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
     let display = CONFIG.page.sidebar;
@@ -339,27 +361,26 @@ if (typeof display !== 'boolean') {
   activateSidebarPanel: function(index) {
-    const duration = 200;
     const sidebar = document.querySelector('.sidebar-inner');
-    const panel = document.querySelector('.sidebar-panel-container');
-    const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
+    const activeClassNames = ['sidebar-toc-active', 'sidebar-overview-active'];
+    if (sidebar.classList.contains(activeClassNames[index])) return;
 
-    if (sidebar.classList.contains(activeClassName[index])) return;
+    const panelContainer = sidebar.querySelector('.sidebar-panel-container');
+    const tocPanel = panelContainer.firstElementChild;
+    const overviewPanel = panelContainer.lastElementChild;
 
-    window.anime({
-      duration,
-      targets   : panel,
-      easing    : 'linear',
-      opacity   : 0,
-      translateY: [0, -20],
-      complete  : () => {
-        // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
-        sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
-        window.anime({
-          duration,
-          targets   : panel,
-          easing    : 'linear',
-          opacity   : [0, 1],
-          translateY: [-20, 0]
-        });
+    let postTOCHeight = tocPanel.scrollHeight;
+    // For TOC activation, try to use the animated TOC height
+    if (index === 0) {
+      const nav = tocPanel.querySelector('.nav');
+      if (nav) {
+        postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
       }
-    });
+    }
+    const panelHeights = [
+      postTOCHeight,
+      overviewPanel.scrollHeight
+    ];
+    panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);
+    panelContainer.style.setProperty('--active-panel-height', `${panelHeights[index]}px`);
+
+    sidebar.classList.replace(activeClassNames[1 - index], activeClassNames[index]);
   },
@@ -366,0 +387,0 @@

No alert changes

Improved metrics

Total package byte prevSize

465409

increased by0.87%

Lines of code

3046

increased by0.93%

No dependency changes