Skip to content

Commit 8c06fd0

Browse files
Initial commit
0 parents  commit 8c06fd0

File tree

11 files changed

+6496
-0
lines changed

11 files changed

+6496
-0
lines changed

.babelrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 4
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

.eslintrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": [
3+
"eslint:recommended",
4+
"plugin:vue/essential"
5+
],
6+
"rules": {
7+
"vue/no-unused-vars": 0
8+
}
9+
}

.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Robbin Johansson <robbinfellow@gmail.com>
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: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[![npm](https://img.shields.io/npm/v/vue-scroll-indicator.svg)](https://www.npmjs.com/package/vue-scroll-indicator)
2+
[![npm](https://img.shields.io/npm/dt/vue-scroll-indicator.svg)](https://www.npmjs.com/package/vue-scroll-indicator)
3+
[![npm](https://img.shields.io/npm/l/vue-scroll-indicator.svg)](https://www.npmjs.com/package/vue-scroll-indicator)
4+
5+
# Vue-scroll-indicator
6+
Scroll indicator component using Vue.js.
7+
8+
<img src="https://thumbs.gfycat.com/DefiniteHardBubblefish-size_restricted.gif" width="100%" />
9+
10+
## Installation
11+
```shell
12+
$ yarn add vue-scroll-indicator --dev
13+
# or ...
14+
$ npm i vue-scroll-indicator --save-dev
15+
```
16+
17+
#### Setup:
18+
19+
```javascript
20+
// register the plugin
21+
import Vue from 'vue'
22+
import VueScrollIndicator from 'vue-scroll-indicator'
23+
24+
Vue.use(VueScrollIndicator)
25+
26+
// ... or register the component manually
27+
import Vue from 'vue'
28+
import { VueScrollIndicator } from 'vue-scroll-indicator'
29+
30+
Vue.component('vue-scroll-indicator', VueScrollIndicator)
31+
```
32+
33+
## Usage
34+
35+
Display the component using default style:
36+
37+
```vue
38+
<vue-scroll-indicator></vue-scroll-indicator>
39+
```
40+
41+
Display the component using custom style _(any valid use of css units will do)_:
42+
43+
```vue
44+
<vue-scroll-indicator
45+
height="7px"
46+
indicator-color="#11998e"
47+
bg-color="none"
48+
>
49+
</vue-scroll-indicator>
50+
```
51+
52+
## Available properties
53+
54+
| Prop | Data Type | Required | Default | Description
55+
| :--- | :--- | :--- | :--- | :--- |
56+
| `height` | String | `false` | `5px` | Scroll indicator height
57+
| `bg-color` | String | `false` | `#eaeaea` | Scroll indicator background-color
58+
| `indicator-color` | String | `false` | `linear-gradient(to right, #ec008c, #fc6767)` | Scroll indicator color
59+
60+
## Author
61+
62+
Robbin Johansson \<robbinfellow@gmail.com>.
63+
64+
[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/robbinfellow)
65+
66+
## License
67+
68+
Vue-scroll-indicator is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).

package.json

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "vue-scroll-indicator",
3+
"description": "Scroll indicator component using Vue.js",
4+
"version": "0.0.1",
5+
"author": "Robbin Johansson <robbinfellow@gmail.com>",
6+
"main": "dist/vue-scroll-indicator.js",
7+
"homepage": "https://github.com/robbinfellow/vue-scroll-indicator#readme",
8+
"license": "MIT",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/robbinfellow/vue-scroll-indicator.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/robbinfellow/vue-scroll-indicator/issues"
15+
},
16+
"keywords": [
17+
"vue",
18+
"vue-component",
19+
"scroll-indicator",
20+
"scroll"
21+
],
22+
"scripts": {
23+
"lint": "./node_modules/.bin/eslint --ext .js,.vue src",
24+
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
25+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
26+
},
27+
"dependencies": {
28+
"vue": "^2.5.11"
29+
},
30+
"browserslist": [
31+
"> 1%",
32+
"last 2 versions",
33+
"not ie <= 8"
34+
],
35+
"devDependencies": {
36+
"babel-core": "^6.26.0",
37+
"babel-loader": "^7.1.2",
38+
"babel-preset-env": "^1.6.0",
39+
"babel-preset-stage-3": "^6.24.1",
40+
"cross-env": "^5.0.5",
41+
"css-loader": "^0.28.7",
42+
"eslint": "^4.16.0",
43+
"eslint-plugin-vue": "^4.2.0",
44+
"file-loader": "^1.1.4",
45+
"node-sass": "^4.5.3",
46+
"postcss-cssnext": "^3.0.2",
47+
"sass-loader": "^6.0.6",
48+
"vue-loader": "^13.0.5",
49+
"vue-template-compiler": "^2.4.4",
50+
"webpack": "^3.6.0",
51+
"webpack-dev-server": "^2.9.1"
52+
}
53+
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="v-scroll--indicator-wrapper" :style="{ height: height, background: bgColor }">
3+
<div class="v-scroll--indicator" :style="{ background: indicatorColor, width: indicatorWidth }"></div>
4+
</div>
5+
</template>
6+
7+
<style lang="sass" scoped>
8+
.v-scroll--indicator-wrapper
9+
width: 100%
10+
position: fixed
11+
top: 0
12+
left: 0
13+
right: 0
14+
z-index: 9999
15+
.v-scroll--indicator
16+
width: 0%
17+
height: 100%
18+
</style>
19+
20+
<script>
21+
export default {
22+
props: {
23+
height: {
24+
type: String,
25+
default: '5px',
26+
required: false
27+
},
28+
bgColor: {
29+
type: String,
30+
default: '#eaeaea',
31+
required: true
32+
},
33+
indicatorColor: {
34+
type: String,
35+
default: 'linear-gradient(to right, #ec008c, #fc6767)',
36+
required: false
37+
}
38+
},
39+
mounted() {
40+
this.scrollHandler()
41+
42+
},
43+
created(){
44+
window.addEventListener('scroll', this.scrollHandler)
45+
},
46+
data() {
47+
return {
48+
winScroll: '',
49+
docHeight: '',
50+
indicatorWidth: '',
51+
}
52+
},
53+
methods: {
54+
scrollHandler(){
55+
this.winScroll = document.body.scrollTop || document.documentElement.scrollTop
56+
this.docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
57+
this.indicatorWidth = (this.winScroll / this.docHeight) * 100+'%'
58+
}
59+
}
60+
}
61+
</script>

src/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import VueScrollIndicator from './components/VueScrollIndicator.vue'
2+
3+
const plugin = {
4+
install: Vue => {
5+
Vue.component('vue-scroll-indicator', VueScrollIndicator)
6+
}
7+
}
8+
9+
// Automatic installation if Vue has been added to the global scope.
10+
if (typeof window !== 'undefined' && window.Vue) {
11+
window.Vue.use(plugin)
12+
}
13+
14+
export default plugin
15+
export { VueScrollIndicator }

webpack.config.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/index.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'vue-scroll-indicator.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.css$/,
15+
use: [
16+
'vue-style-loader',
17+
'css-loader'
18+
],
19+
},
20+
{
21+
test: /\.scss$/,
22+
use: [
23+
'vue-style-loader',
24+
'css-loader',
25+
'sass-loader'
26+
],
27+
},
28+
{
29+
test: /\.sass$/,
30+
use: [
31+
'vue-style-loader',
32+
'css-loader',
33+
'sass-loader?indentedSyntax'
34+
],
35+
},
36+
{
37+
test: /\.vue$/,
38+
loader: 'vue-loader',
39+
options: {
40+
postcss: [require('postcss-cssnext')()],
41+
loaders: {
42+
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
43+
// the "scss" and "sass" values for the lang attribute to the right configs here.
44+
// other preprocessors should work out of the box, no loader config like this necessary.
45+
'scss': [
46+
'vue-style-loader',
47+
'css-loader',
48+
'sass-loader'
49+
],
50+
'sass': [
51+
'vue-style-loader',
52+
'css-loader',
53+
'sass-loader?indentedSyntax'
54+
]
55+
}
56+
// other vue-loader options go here
57+
}
58+
},
59+
{
60+
test: /\.js$/,
61+
loader: 'babel-loader',
62+
exclude: /node_modules/
63+
},
64+
{
65+
test: /\.(png|jpg|gif|svg)$/,
66+
loader: 'file-loader',
67+
options: {
68+
name: '[name].[ext]?[hash]'
69+
}
70+
}
71+
]
72+
},
73+
resolve: {
74+
alias: {
75+
'vue$': 'vue/dist/vue.esm.js'
76+
},
77+
extensions: ['*', '.js', '.vue', '.json']
78+
},
79+
devServer: {
80+
historyApiFallback: true,
81+
noInfo: false,
82+
overlay: true
83+
},
84+
performance: {
85+
hints: false
86+
},
87+
devtool: '#eval-source-map'
88+
}
89+
90+
if (process.env.NODE_ENV === 'production') {
91+
module.exports.devtool = '#source-map'
92+
// http://vue-loader.vuejs.org/en/workflow/production.html
93+
module.exports.plugins = (module.exports.plugins || []).concat([
94+
new webpack.DefinePlugin({
95+
'process.env': {
96+
NODE_ENV: '"production"'
97+
}
98+
}),
99+
new webpack.optimize.UglifyJsPlugin({
100+
sourceMap: true,
101+
compress: {
102+
warnings: false
103+
}
104+
}),
105+
new webpack.LoaderOptionsPlugin({
106+
minimize: true
107+
})
108+
])
109+
}

0 commit comments

Comments
 (0)