feat: highlight current region in sidebar (#272)

lib/app/app.js

@@ -57,7 +57,7 @@ export function createApp () {
       if (saved) {
         return saved
       } else if (to.hash) {
-        return { selector: to.hash }
+        return false
       } else {
         return { x: 0, y: 0 }
       }

lib/default-theme/Layout.vue

@@ -29,6 +29,7 @@ import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 import { pathToComponentName } from '@app/util'
 import { resolveSidebarItems } from './util'
+import throttle from 'lodash.throttle'
 
 export default {
   components: { Home, Page, Sidebar, Navbar },
@@ -111,6 +112,8 @@ export default {
     this.$watch('$page', updateMeta)
     updateMeta()
 
+    window.addEventListener('scroll', this.onScroll)
+
     // configure progress bar
     nprogress.configure({ showSpinner: false })
 
@@ -129,6 +132,8 @@ export default {
 
   beforeDestroy () {
     updateMetaTags(null, this.currentMetaTags)
+
+    window.removeEventListener('scroll', this.onScroll)
   },
 
   methods: {
@@ -152,6 +157,30 @@ export default {
           this.toggleSidebar(false)
         }
       }
+    },
+    onScroll: throttle(function () {
+      this.setActiveHash()
+    }, 300),
+    setActiveHash () {
+      const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
+      const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
+        .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
+        
+      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
+
+      for (let i = 0; i < anchors.length; i++) {
+        const anchor = anchors[i]
+        const nextAnchor = anchors[i + 1]
+
+        const isActive = i === 0 && scrollTop === 0 ||
+          (scrollTop >= anchor.parentElement.offsetTop + 10 &&
+            (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
+
+        if (isActive && this.$route.hash !== anchor.hash) {
+          this.$router.replace(anchor.hash)
+          return
+        }
+      }
     }
   }
 }

package.json

@@ -59,6 +59,7 @@
     "koa-mount": "^3.0.0",
     "koa-static": "^4.0.2",
     "loader-utils": "^1.1.0",
+    "lodash.throttle": "^4.1.1",
     "lru-cache": "^4.1.2",
     "markdown-it": "^8.4.1",
     "markdown-it-anchor": "^4.0.0",