Skip to content
This repository was archived by the owner on Oct 9, 2019. It is now read-only.

Commit 8d3c9f1

Browse files
meteorlxymeteorlxy
committed
version 0.0.1
0 parents  commit 8d3c9f1

20 files changed

+8519
-0
lines changed

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎.eslintignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
node_modules/
3+
dist/
4+
lib/
5+
**/@vssue/*/types/
6+
!.vuepress/

‎.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
4+
env: {
5+
node: true,
6+
},
7+
8+
parser: '@typescript-eslint/parser',
9+
10+
extends: [
11+
'@vue/standard',
12+
'@vue/typescript',
13+
],
14+
15+
rules: {
16+
'comma-dangle': ['error', 'always-multiline'],
17+
},
18+
}

‎.gitattributes

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# @see https://git-scm.com/docs/gitattributes
2+
# @see https://help.github.com/articles/dealing-with-line-endings
3+
4+
* text=auto
5+
6+
*.txt text eol=crlf
7+
8+
*.png binary
9+
*.jpg binary
10+
*.jpeg binary
11+
*.ico binary
12+
*.tff binary
13+
*.woff binary
14+
*.woff2 binary

‎.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.temp
2+
.DS_Store
3+
node_modules
4+
5+
# Log files
6+
*.log
7+
8+
# Editor directories and files
9+
.vscode
10+
11+
docs-dist/
12+
lib/

‎.npmignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.circleci/
2+
.temp/
3+
.vscode/
4+
docs/
5+
docs-dist/
6+
src/
7+
.editorconfig
8+
.eslint*
9+
.gitattributes
10+
.gitignore
11+
.travis.yml
12+
tsconfig.json
13+
yarn.lock
14+
15+
npm-debug.log
16+
yarn-debug.log
17+
yarn-error.log

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
message="version %s"

‎.travis.yml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
language: node_js
2+
node_js: stable
3+
branches:
4+
only:
5+
- master
6+
7+
# S: Build Lifecycle
8+
install:
9+
- yarn
10+
11+
script:
12+
- yarn docs:build
13+
14+
after_success:
15+
- cd ./docs-dist
16+
- git init
17+
- git config user.name "${GH_USER_NAME}"
18+
- git config user.email "{GH_USER_EMAIL}"
19+
- git add .
20+
- git commit -m "Build docs $(date +%Y%m%d%H%M)"
21+
- git push --force --quiet "https://${GH_TOKEN}@${GH_REPO}" master:gh-pages
22+
# E: Build LifeCycle

‎LICENSE

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MIT License
2+
3+
Copyright (c) 2019 meteorlxy & contributors
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎Readme.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# vuepress-plugin-smooth-scroll
2+
3+
A Plugin for [Vuepress](https://vuepress.vuejs.org/) to make the `scrollBehavior` of `vue-router` smooth.

‎docs/.vuepress/config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
title: 'vuepress-plugin-smooth-scroll',
3+
4+
plugins: [
5+
require.resolve('../../lib'),
6+
],
7+
}

‎docs/Readme.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
sidebar: auto
3+
---
4+
5+
# vuepress-plugin-smooth-scroll
6+
7+
## Introduction
8+
9+
A simple plugin to make Vuepress scroll smoothly.
10+
11+
It simply does two things:
12+
13+
- Use `window.scrollTo({ behavior: 'smooth' })` for [scrollBehavior](https://router.vuejs.org/api/#scrollbehavior)
14+
- [Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)
15+
- [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Browser_Compatibility)
16+
- [smoothscroll-ployfill](https://github.com/iamdustan/smoothscroll)
17+
- Add `scroll-behavior: smooth;` to the `<html>` element
18+
- [Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
19+
- [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Browser_compatibility)
20+
21+
::: tip
22+
- The first one only works with `<RouterLink to="#anchor">`
23+
- The second one works with both `<RouterLink to="#anchor">` and `<a href="#anchor">`
24+
25+
You may notice that the browser compatibility of this two features are quite different, so we currently use both of them.
26+
27+
For better browser compatibility, we suggest to use `<RouterLink to="#anchor">` if possible.
28+
:::
29+
30+
::: warning
31+
This plugin may not work well with `@vuepress/plugin-active-header-links`, which is used in the default theme of Vuepress.
32+
33+
The problem is that, `@vuepress/plugin-active-header-links` watches the `scroll` event to set the active sidebar link, and `vuepress-plugin-smooth-scroll` will trigger the `scroll` event for sure.
34+
35+
Click the sidebar of this page and you will see what the problem is.
36+
37+
If you are using your own theme without `@vuepress/plugin-active-header-links`, you can have a try on this plugin.
38+
:::
39+
40+
## Usage
41+
42+
### Installation
43+
44+
Install `vuepress-plugin-smooth-scroll` via NPM:
45+
46+
```bash
47+
npm install vuepress-plugin-smooth-scroll
48+
```
49+
50+
### Use the plugin
51+
52+
> See [Vuepress Offical Docs](https://vuepress.vuejs.org/plugin/using-a-plugin.html) for how to use a plugin in detail
53+
54+
55+
```js
56+
// .vuepress/config.js
57+
58+
module.exports = {
59+
plugins: {
60+
'vuepress-plugin-smooth-scroll': true,
61+
},
62+
}
63+
```
64+
65+
## Demo
66+
67+
- Click the links in the sidebar
68+
- Click the header anchors
69+
70+
```
71+
72+
73+
This
74+
75+
76+
77+
is
78+
79+
80+
81+
used
82+
83+
84+
85+
to
86+
87+
88+
89+
make
90+
91+
92+
93+
the
94+
95+
96+
97+
page
98+
99+
100+
101+
longer
102+
103+
104+
```
105+
106+
### End of the page

‎package.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "vuepress-plugin-smooth-scroll",
3+
"version": "0.0.1",
4+
"description": "Vuepress plugin for smooth scrolling",
5+
"main": "lib/index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/meteorlxy/vuepress-plugin-smooth-scroll.git"
9+
},
10+
"keywords": [
11+
"vuepress",
12+
"plugin",
13+
"smooth",
14+
"scroll"
15+
],
16+
"author": "meteorlxy <[email protected]>",
17+
"license": "MIT",
18+
"bugs": {
19+
"url": "https://github.com/meteorlxy/vuepress-plugin-smooth-scroll/issues"
20+
},
21+
"homepage": "https://github.com/meteorlxy/vuepress-plugin-smooth-scroll#readme",
22+
"scripts": {
23+
"build": "rimraf lib types && tsc -p tsconfig.json",
24+
"docs:dev": "vuepress dev docs --temp .temp",
25+
"docs:build": "vuepress build docs --dest docs-dist",
26+
"lint": "eslint --ext .ts src/",
27+
"postinstall": "yarn build"
28+
},
29+
"husky": {
30+
"hooks": {
31+
"pre-commit": "lint-staged"
32+
}
33+
},
34+
"lint-staged": {
35+
"*.ts": [
36+
"eslint --fix",
37+
"git add"
38+
]
39+
},
40+
"devDependencies": {
41+
"@types/node": "^11.9.5",
42+
"@vue/eslint-config-standard": "^4.0.0",
43+
"@vue/eslint-config-typescript": "^4.0.0",
44+
"eslint": "^5.14.1",
45+
"husky": "^1.3.1",
46+
"lint-staged": "^8.1.4",
47+
"rimraf": "^2.6.3",
48+
"typescript": "^3.3.3333",
49+
"vuepress": "^1.0.0-alpha.39"
50+
},
51+
"dependencies": {
52+
"smoothscroll-polyfill": "^0.4.3"
53+
}
54+
}

‎src/enhanceApp.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Route } from 'vue-router'
2+
import smoothscroll from 'smoothscroll-polyfill'
3+
import '../styles/index.styl'
4+
5+
export default ({ Vue, router }) => {
6+
smoothscroll.polyfill()
7+
8+
router.options.scrollBehavior = (to: Route, from: Route, savedPosition: { x: number, y: number} | null) => {
9+
if (savedPosition) {
10+
return window.scrollTo({
11+
top: savedPosition.y,
12+
behavior: 'smooth',
13+
})
14+
} else if (to.hash) {
15+
if (Vue.$vuepress.$get('disableScrollBehavior')) {
16+
return false
17+
}
18+
19+
const targetElement = document.querySelector(to.hash)
20+
21+
if (targetElement) {
22+
return window.scrollTo({
23+
top: getElementPosition(targetElement).y,
24+
behavior: 'smooth',
25+
})
26+
}
27+
28+
return false
29+
} else {
30+
return window.scrollTo({
31+
top: 0,
32+
behavior: 'smooth',
33+
})
34+
}
35+
}
36+
}
37+
38+
// fork from [email protected]
39+
// src/util/scroll.js
40+
function getElementPosition (el: Element) {
41+
const docEl = document.documentElement
42+
const docRect = docEl.getBoundingClientRect()
43+
const elRect = el.getBoundingClientRect()
44+
return {
45+
x: elRect.left - docRect.left,
46+
y: elRect.top - docRect.top,
47+
}
48+
}

‎src/index.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
name: 'vuepress-plugin-smooth-scroll',
5+
6+
enhanceAppFiles: [
7+
path.resolve(__dirname, 'enhanceApp.js'),
8+
],
9+
}

‎styles/index.styl

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
html
2+
scroll-behavior smooth

‎tsconfig.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"compilerOptions": {
3+
"rootDir": "./src",
4+
"outDir": "./lib",
5+
"declarationDir": "./types",
6+
"target": "es2015",
7+
"module": "es2015",
8+
"lib": ["es2017", "es2018", "dom", "dom.iterable"],
9+
"newLine": "lf",
10+
"declaration": true,
11+
"sourceMap": true,
12+
"noEmitOnError": true,
13+
"importHelpers": true,
14+
"downlevelIteration": true,
15+
"strict": true,
16+
"noImplicitAny": false,
17+
"moduleResolution": "node",
18+
"allowSyntheticDefaultImports": true,
19+
"esModuleInterop": true,
20+
"resolveJsonModule": true,
21+
"experimentalDecorators": true,
22+
"emitDecoratorMetadata": true
23+
},
24+
"include": [
25+
"./src"
26+
],
27+
"exclude": [
28+
"**/*.spec.ts",
29+
"node_modules"
30+
]
31+
}

‎types/enhanceApp.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import '../styles/index.styl'
2+
declare const _default: ({ Vue, router }: {
3+
Vue: any;
4+
router: any;
5+
}) => void
6+
export default _default

‎types/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare const path: any

0 commit comments

Comments
 (0)