Skip to content

Commit fd746d2

Browse files
TheAlexLichterTheAlexLichter
committed
chore: init
0 parents  commit fd746d2

File tree

12 files changed

+633
-0
lines changed

12 files changed

+633
-0
lines changed

‎.babelrc

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"presets": [
3+
[
4+
"vue-app",
5+
{
6+
"modules": false
7+
}
8+
]
9+
],
10+
"env": {
11+
"test": {
12+
"presets": [
13+
[
14+
"vue-app",
15+
{
16+
"targets": {
17+
"node": 8
18+
}
19+
}
20+
]
21+
]
22+
}
23+
}
24+
}

‎.eslintrc.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = {
2+
root: true,
3+
parserOptions: {
4+
sourceType: 'module'
5+
},
6+
env: {
7+
browser: true,
8+
node: true,
9+
jest: true
10+
},
11+
extends: 'standard',
12+
plugins: [
13+
'jest',
14+
'vue'
15+
],
16+
rules: {
17+
// Allow paren-less arrow functions
18+
'arrow-parens': 0,
19+
// Allow async-await
20+
'generator-star-spacing': 0,
21+
// Allow debugger during development
22+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
23+
// Do not allow console.logs etc...
24+
'no-console': 2
25+
},
26+
globals: {
27+
'jest/globals': true,
28+
jasmine: true
29+
}
30+
}

‎.gitignore

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.idea/**
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pids
8+
*.pid
9+
*.seed
10+
*.pid.lock
11+
lib-cov
12+
coverage
13+
.nyc_output
14+
.grunt
15+
bower_components
16+
.lock-wscript
17+
build/Release
18+
node_modules/
19+
package-lock.json
20+
jspm_packages/
21+
typings/
22+
.npm
23+
.eslintcache
24+
.node_repl_history
25+
*.tgz
26+
.yarn-integrity
27+
.env
28+
.next
29+
dist

‎.travis.yml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
language: node_js
2+
node_js:
3+
- "8"
4+
- "9"
5+
- "10"
6+
cache:
7+
npm: true
8+
directories:
9+
- node_modules
10+
install:
11+
- npm install
12+
script:
13+
- npm t
14+
after_success:
15+
- npm run coverage

‎CONTRIBUTING.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Contributing to VueNextLevelScroll
2+
3+
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
4+
2. Install the dependencies: `npm install`.
5+
3. Develop your feature/bugfix.
6+
4. Add tests into `test` directory and try them with `npm test`.
7+
5. Send the PR!

‎LICENSE.md

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

‎README.md

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# VueNextLevelScroll - Bring your scroll game to the next level!
2+
3+
<p align="center">
4+
<a href="https://travis-ci.org/Developmint/vue-next-level-scroll"><img src="https://img.shields.io/travis/Developmint/vue-next-level-scroll/master.svg" alt="Build Status"></a>
5+
<a href="https://codecov.io/gh/Developmint/vue-next-level-scroll"><img src="https://img.shields.io/codecov/c/github/Developmint/vue-next-level-scroll/master.svg" alt="Coverage Status"></a>
6+
<a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/dm/vue-next-level-scroll.svg" alt="Downloads"></a>
7+
<a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/v/vue-next-level-scroll.svg" alt="Version"></a>
8+
<a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/l/vue-next-level-scroll.svg" alt="License"></a>
9+
<a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="We use Conventional Commits"></a>
10+
</p>
11+
12+
> "Click to scroll" **component** using the modern Browser API.
13+
14+
## 🔥 Features
15+
16+
- Just **one tiny file**
17+
- Component based (great for **async loading** and code splitting)
18+
- Universal code/SSR-safe
19+
- Well tested and **documented**
20+
- Compatible with Node 8.0+
21+
- Vue as the only dependency
22+
- Highly customizable
23+
24+
## 🔎 Getting started
25+
26+
27+
### 📦️ Through NPM
28+
29+
```
30+
$ npm install vue-next-level-scroll
31+
```
32+
33+
#### Synchronous import
34+
35+
```js
36+
import VueNextLevelScroll from 'vue-next-level-scroll'
37+
38+
39+
export default {
40+
components: {
41+
VueNextLevelScroll
42+
}
43+
}
44+
45+
```
46+
47+
#### Async import
48+
49+
```js
50+
import VueNextLevelScroll from 'vue-next-level-scroll'
51+
52+
53+
export default {
54+
components: {
55+
VueNextLevelScroll
56+
}
57+
}
58+
59+
```
60+
61+
### 🔗❌ Using a CDN
62+
63+
Sorry! You can't use *VueNextLevelScroll* with a CDN by now.
64+
65+
## 🔐 Usage
66+
67+
### You might like to go for a Polyfill
68+
69+
VueNextLevelScroll uses the new [`ScrollBehavior specification`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) by default.
70+
Unfortunately, Firefox is the only browser that has it built-in (by now).
71+
For this reason, you might like to go for [this polyfill](https://github.com/iamdustan/smoothscroll) (don't worry, less than 2kB after GZIP).
72+
73+
74+
### The component based approach
75+
76+
As you likely have seen, there are various *Vue directives* out their that handle scrolling as well.
77+
You might have used one or two of them already or built one yourself.
78+
79+
**But!** A component can sometimes be the better approach, as it can be tree shaken, is
80+
better suited for universal/SSR code and can be loaded asynchronously as well!
81+
82+
### Prop overview
83+
84+
85+
| Prop | Optional? | Comment |
86+
|---| --- | --- |
87+
| target | ✅ | Can be any query selector you want (or a function that returns such). Will be passed to the scroll function |
88+
| scrollFunction | ✅ | You can define an own scroll function that will take the `target` prop as parameter and can do whatever you like. |
89+
90+
91+
### Default scroll function explained
92+
93+
#### Scroll to top
94+
95+
When no `target` prop is set, the default scroll function will trigger a scroll to top:
96+
97+
```html
98+
<vue-next-level-scroll>
99+
<img src="https://developmint.de/logo.png">
100+
</vue-next-level-scroll>
101+
```
102+
103+
#### Scroll to query selector
104+
105+
When the `target` prop is provided, the default scroll function look the DOM node up and smooth scroll to it.
106+
If the `target` is a class query, the first found element will be chosen to scroll to.
107+
108+
```html
109+
<vue-next-level-scroll target="#my-target">
110+
<img src="https://developmint.de/logo.png">
111+
</vue-next-level-scroll>
112+
<div id="my-target"/>
113+
```
114+
115+
#### Scroll to non-existing query selector
116+
117+
When the `target` prop is given but no node matches, a console error will appear.
118+
119+
```html
120+
<vue-next-level-scroll target="#my-target">
121+
<img src="https://developmint.de/logo.png">
122+
</vue-next-level-scroll>
123+
<div id="my-non-existing-target"/>
124+
```
125+
126+
```js
127+
Error: Could not scroll to #my-target
128+
```
129+
130+
### Custom scroll function
131+
132+
Most users are satisfied with the default scroll function provided by *VueNextLevelScroll*
133+
However if you need other behavior you can simply write your own function:
134+
135+
```html
136+
<template>
137+
<vue-next-level-scroll
138+
target="#my-target"
139+
:scroll="myScroll">
140+
<img src="https://developmint.de/logo.png">
141+
</vue-next-level-scroll>
142+
<div id="my-non-existing-target"/>
143+
</template>
144+
145+
<script>
146+
export default {
147+
const myScroll = target => doSomeMagicHere(target)
148+
}
149+
</script>
150+
```
151+
152+
You might not need the polyfill then as well :wink:
153+
154+
## 🛠️ Contributing
155+
156+
Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)
157+
158+
159+
## 📑 License
160+
161+
[MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter

‎commitlint.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ['@commitlint/config-conventional'] }

‎lib/ScrollNextLevel.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
export default {
3+
functional: true,
4+
render (h, { children, data, props: { target, scrollFunction }, _ssrNode }) {
5+
const clickFunction = () => { scrollFunction ? scrollFunction(target) : defaultScrollFunction(target)}
6+
7+
return h('div', {
8+
...data,
9+
on: {
10+
// Ignore scroll function on server side
11+
click: _ssrNode ? undefined : clickFunction
12+
}
13+
}, children)
14+
}
15+
}
16+
17+
const defaultScrollFunction = async rawTarget => {
18+
const target = (typeof rawTarget === 'function') ? await rawTarget() : rawTarget
19+
20+
// If no target given, auto scroll to top
21+
if (!target) {
22+
return window.scroll({
23+
top: 0,
24+
behavior: 'smooth'
25+
})
26+
}
27+
28+
const node = document.querySelector(target)
29+
30+
// If target prop is present but the node does not exist, send an error
31+
if (!node) {
32+
return console.error(`Could not scroll to ${target}`)
33+
}
34+
35+
node.scrollIntoView({
36+
behavior: 'smooth'
37+
})
38+
}
39+
40+
</script>

0 commit comments

Comments
 (0)