feat: add navigation support

Author: TheAlexLichter

README.md

@@ -15,6 +15,7 @@
 
 - Just **one tiny file**
 - Component based (great for **async loading** and code splitting)
+- Supports navigation through *VueRouter*
 - Universal code/SSR-safe
 - Well tested and **documented**
 - Compatible with Node 8.0+
@@ -91,6 +92,8 @@ better suited for universal/SSR code and can be loaded asynchronously as well!
 |---| --- | --- |
 | target | :white_check_mark: | Can be any query selector you want (or a function that returns such). Will be passed to the scroll function |
 | scrollFunction  | :white_check_mark: | You can define an own scroll function that will take the `target` prop as parameter and can do whatever you like. |
+| shouldNavigate  | :white_check_mark: | If set, VueRouter will reflect navigation changes in the url(top: no hash, target: hash)  |
+| navigationType  | :white_check_mark: | Default to `push`. The navigation type of that VueRouter should use. Usually either `push` or `replace` |
 
 
 ### Default scroll function explained

package.json

@@ -93,6 +93,7 @@
     "standard-version": "latest",
     "vue-jest": "^2.6.0",
     "vue-loader": "^15.4.2",
+    "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.17-beta.0",
     "vue-template-compiler": "^2.5.17-beta.0"
   },

src/index.js

@@ -1,7 +1,10 @@
 export default {
   functional: true,
-  render(h, { children, data, props: { target, scrollFunction }, _ssrNode }) {
-    const clickFunction = () => { scrollFunction ? scrollFunction(target) : defaultScrollFunction(target) }
+  render(h, { children, data, props: { target, scrollFunction, shouldNavigate = false, navigationType = 'push' }, parent: { $router }, _ssrNode }) {
+    const clickFunction = () => {
+      const fn = scrollFunction || defaultScrollFunction
+      fn(target, { shouldNavigate, navigationType, $router })
+    }
 
     return h('div', {
       ...data,
@@ -13,15 +16,22 @@ export default {
   }
 }
 
-const defaultScrollFunction = async (rawTarget) => {
+const defaultScrollFunction = async (rawTarget, { shouldNavigate, navigationType, $router }) => {
   const target = (typeof rawTarget === 'function') ? await rawTarget() : rawTarget
-
   // If no target given, auto scroll to top
   if (!target) {
-    return window.scroll({
+    window.scroll({
       top: 0,
       behavior: 'smooth'
     })
+    if (shouldNavigate && $router) {
+      const currentRoute = $router.currentRoute
+      const hash = currentRoute.hash
+      const fullPath = currentRoute.fullPath
+      const newPath = fullPath.replace(hash, '')
+      navigate($router, newPath, navigationType)
+    }
+    return
   }
 
   const node = document.querySelector(target)
@@ -35,4 +45,10 @@ const defaultScrollFunction = async (rawTarget) => {
   node.scrollIntoView({
     behavior: 'smooth'
   })
+
+  if (shouldNavigate && $router) {
+    navigate($router, target, navigationType)
+  }
 }
+
+const navigate = ($router, path, type) => { $router[type](path) }

test/ScrollNextLevel.spec.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
-import { mount } from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
 import { render } from '@vue/server-test-utils'
 import flushPromises from 'flush-promises'
+import VueRouter from 'vue-router'
 import ScrollNextLevel from '../src'
 import Target from './fixtures/Target'
 
@@ -45,6 +46,36 @@ describe('ScrollNextLevel', () => {
         })
       })
 
+      it('does navigate to path without hash when enabled and scroll to top', () => {
+        spy = jest.spyOn(global, 'scroll')
+        const localVue = createLocalVue()
+        localVue.use(VueRouter)
+        const router = new VueRouter()
+
+        const wrapper = mount(ScrollNextLevel, {
+          attachToDocument: true,
+          context: {
+            props: {
+              shouldNavigate: true
+            }
+          },
+          localVue,
+          router
+        })
+
+        router.replace('#test')
+
+        expect(spy).toHaveBeenCalledTimes(0)
+
+        wrapper.trigger('click')
+
+        expect(spy).toBeCalledWith({
+          top: 0,
+          behavior: 'smooth'
+        })
+        expect(router.currentRoute.fullPath).toBe('/')
+      })
+
       it('does smooth scroll to target when present', () => {
         spy = jest.spyOn(Element.prototype, 'scrollIntoView')
 
@@ -75,6 +106,44 @@ describe('ScrollNextLevel', () => {
         })
       })
 
+      it('does navigate to target after smooth-scrolling', () => {
+        spy = jest.spyOn(Element.prototype, 'scrollIntoView')
+        const localVue = createLocalVue()
+        localVue.use(VueRouter)
+        const router = new VueRouter()
+
+        const wrapper = mount(ScrollNextLevel, {
+          attachToDocument: true,
+          context: {
+            props: {
+              target: targetString,
+              shouldNavigate: true
+            }
+          },
+          slots: {
+            default: Target
+          },
+          localVue,
+          router
+        })
+
+        expect(wrapper.html()).toBe('<div><div id="target">Hi</div></div>')
+
+        expect(wrapper.contains(targetString)).toBe(true)
+
+        const element = wrapper.find(targetString).element
+
+        expect(element.scrollIntoView).toHaveBeenCalledTimes(0)
+
+        wrapper.trigger('click')
+
+        expect(element.scrollIntoView).toBeCalledWith({
+          behavior: 'smooth'
+        })
+
+        expect(router.currentRoute.fullPath).toBe(`/${targetString}`)
+      })
+
       it('does send error if target is set but not present', () => {
         const weirdTarget = 'weird things here'
         spy = jest.spyOn(console, 'error')
@@ -161,7 +230,7 @@ describe('ScrollNextLevel', () => {
       })
       wrapper.trigger('click')
 
-      expect(spy).toBeCalledWith(undefined)
+      expect(spy).toBeCalledWith(undefined, { $parent: undefined, navigationType: 'push', shouldNavigate: false })
     })
 
     it('calls custom function with target on click', () => {
@@ -177,7 +246,11 @@ describe('ScrollNextLevel', () => {
       })
       wrapper.trigger('click')
 
-      expect(spy).toBeCalledWith(targetString)
+      expect(spy).toBeCalledWith(targetString, {
+        $parent: undefined,
+        navigationType: 'push',
+        shouldNavigate: false
+      })
     })
   })