├── .babelrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── vue-progress-scroll.js
├── package-lock.json
├── package.json
├── src
    ├── Progress.vue
    └── main.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # Editor directories and files
 7 | .idea
 8 | *.suo
 9 | *.ntvs*
10 | *.njsproj
11 | *.sln
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Hosein Barzegaran
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-progress-scroll
 3 | 
 4 | > Tiny Vue plugin to show a progress bar while user is reading an article or ... 
 5 | 
 6 | ## Installing 
 7 | Get from npm:
 8 | ```js
 9 | npm i -D vue-progress-scroll
10 | ```
11 | And use this inside your app:
12 | ``` js
13 | import Vue from 'vue'
14 | import App from './App.vue'
15 | import Progress from 'vue-progress-scroll'
16 | 
17 | Vue.use(Progress);
18 | new Vue({
19 |   el: '#app',
20 |   render: h => h(App)
21 | })
22 | ```
23 | 
24 | And if you want to use from browser, simply :
25 | ```js
26 | <script src='./vue-progress-scroll.js'></script>
27 | ```
28 | ## Usage
29 | Usage is really simple, just put the content inside `progress-scroll` tag.
30 | 
31 | Example:
32 | ```html
33 | <progress-scroll>
34 | 	Here is the article main part.
35 | 	lorem...
36 | 	....
37 | 	...
38 | 	..
39 | </progress-scroll>
40 | ```
41 | 
42 | ## Events
43 | vue-progress-scroll fires `complete` event when you reach end of scroll. Example:
44 | ```html
45 | <progress-scroll @complete='runMyMethod'>
46 | 	Here is the article main part.
47 | 	lorem...
48 | 	....
49 | 	...
50 | 	..
51 | </progress-scroll>
52 | ```
53 | ## Props
54 | There is a `background` prop which defines the background color of bar:
55 | ```html
56 | <progress-scroll background='#abfbc6'>
57 | 	Here is the article main part.
58 | 	lorem...
59 | 	....
60 | 	...
61 | 	..
62 | </progress-scroll>
63 | ```


--------------------------------------------------------------------------------
/dist/vue-progress-scroll.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";t.a={name:"vue-progress-scroll",props:["background"],data:function(){return{style:null}},mounted:function(){this.$nextTick(function(){function e(){var e=t.getBoundingClientRect().top-window.innerHeight/2,r=t.getBoundingClientRect().height,o=Math.abs(e)/r*100;this.style=e<0?"width:"+o+"%; background:"+n:"width:0",o>=100&&this.$emit("complete")}var t=document.getElementsByClassName("p-wrapper")[0],n=this.background||"rgb(245, 107, 107)";window.addEventListener("scroll",e.bind(this)),window.addEventListener("resize",e.bind(this))})}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),o={install:function(e){e.component("progress-scroll",r.a)}};t.default=o,"undefined"!=typeof window&&window.Vue&&window.Vue.use(o)},function(e,t,n){"use strict";function r(e){n(3)}var o=n(0),i=n(9),s=n(8),a=r,u=s(o.a,i.a,!1,a,"data-v-f660f9ba",null);t.a=u.exports},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(6)("9f4dd446",r,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".bar[data-v-f660f9ba]{position:fixed;top:0;left:0;width:0;height:5px;box-shadow:0 2px 5px 0 #828282}",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=d[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(i(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var s=[],o=0;o<n.parts.length;o++)s.push(i(n.parts[o]));d[n.id]={id:n.id,refs:1,parts:s}}}}function o(){var e=document.createElement("style");return e.type="text/css",f.appendChild(e),e}function i(e){var t,n,r=document.querySelector("style["+m+'~="'+e.id+'"]');if(r){if(v)return h;r.parentNode.removeChild(r)}if(b){var i=p++;r=l||(l=o()),t=s.bind(null,r,i,!1),n=s.bind(null,r,i,!0)}else r=o(),t=a.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function s(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,o);else{var i=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}function a(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),g.ssrId&&e.setAttribute(ssridKey,t.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var u="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!u)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=n(7),d={},f=u&&(document.head||document.getElementsByTagName("head")[0]),l=null,p=0,v=!1,h=function(){},g=null,m="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,o){v=n,g=o||{};var i=c(e,t);return r(i),function(t){for(var n=[],o=0;o<i.length;o++){var s=i[o],a=d[s.id];a.refs--,n.push(a)}t?(i=c(e,t),r(i)):i=[];for(var o=0;o<n.length;o++){var a=n[o];if(0===a.refs){for(var u=0;u<a.parts.length;u++)a.parts[u]();delete d[a.id]}}}};var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],s=i[0],a=i[1],u=i[2],c=i[3],d={id:e+":"+o,css:a,media:u,sourceMap:c};r[s]?r[s].parts.push(d):n.push(r[s]={id:s,parts:[d]})}return n}},function(e,t){e.exports=function(e,t,n,r,o,i){var s,a=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(s=e,a=e.default);var c="function"==typeof a?a.options:a;t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o);var d;if(i?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=d):r&&(d=r),d){var f=c.functional,l=f?c.render:c.beforeCreate;f?(c._injectStyles=d,c.render=function(e,t){return d.call(t),l(e,t)}):c.beforeCreate=l?[].concat(l,d):[d]}return{esModule:s,exports:a,options:c}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"bar",style:e.style}),e._v(" "),n("div",{staticClass:"p-wrapper"},[e._t("default")],2)])},o=[],i={render:r,staticRenderFns:o};t.a=i}]);
2 | //# sourceMappingURL=vue-progress-scroll.js.map


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-progress-scroll",
 3 |   "description": "A Vue.js prugin that adds progress bar on top of the page",
 4 |   "version": "1.1.1",
 5 |   "author": "hosein <hosein2398@gmail.com>",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/hosein2398/vue-progress-scroll"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "scroll",
18 |     "vue-plugin"
19 |   ],
20 |   "main": "src/main.js",
21 |   "devDependencies": {
22 |     "babel-core": "^6.26.0",
23 |     "babel-loader": "^7.1.2",
24 |     "babel-preset-env": "^1.6.0",
25 |     "babel-preset-stage-3": "^6.24.1",
26 |     "cross-env": "^5.0.5",
27 |     "css-loader": "^0.28.7",
28 |     "file-loader": "^1.1.4",
29 |     "vue-loader": "^13.0.5",
30 |     "vue-template-compiler": "^2.4.4",
31 |     "webpack": "^3.6.0",
32 |     "webpack-dev-server": "^2.11.5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/Progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="bar" :style='style'></div>
 4 |     <div class="p-wrapper">
 5 |       <slot></slot>
 6 |     </div>
 7 |   
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     name: 'vue-progress-scroll',
14 |     props: ['background'],
15 |     data() {
16 |       return {
17 |         style: null
18 |       }
19 |     },
20 |     mounted() {
21 |       
22 |       // we get nextTick so  that we are sure that DOM is fully loaded 
23 |       this.$nextTick(function() {
24 |         var theElement = document.getElementsByClassName('p-wrapper')[0];
25 |         var backColor = this.background || 'rgb(245, 107, 107)'
26 |         function calc(){
27 |           var top = theElement.getBoundingClientRect().top - (window.innerHeight / 2);
28 |           var height = theElement.getBoundingClientRect().height; 
29 |           var calculatedValue = Math.abs(top) / height * 100;
30 |           if (top  < 0) {
31 |             this.style = 'width:' + calculatedValue + '%; background:' + backColor;
32 |           } else {
33 |             this.style = 'width:0';
34 |           }
35 |           if (calculatedValue >= 100) {
36 |             this.$emit('complete')
37 |           }
38 |         }
39 |         window.addEventListener('scroll', calc.bind(this)); // scroll
40 |         window.addEventListener('resize', calc.bind(this)); // resize
41 | 
42 |       }); // nextTick
43 |   
44 |     }
45 |   }
46 | </script>
47 | 
48 | <style scoped>
49 |   .bar {
50 |     position: fixed;
51 |     top: 0;
52 |     left: 0;
53 |     width: 0;
54 |     height: 5px;
55 |     box-shadow: 0 2px 5px 0 #828282;
56 |   }
57 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Progress from "./Progress.vue";
 2 | 
 3 | const ProgressPlugin = {
 4 |   install(Vue) {
 5 |     Vue.component("progress-scroll", Progress);
 6 |   }
 7 | };
 8 | 
 9 | export default ProgressPlugin;
10 | 
11 | if (typeof window !== "undefined" && window.Vue) {
12 |   window.Vue.use(ProgressPlugin);
13 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'vue-progress-scroll.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.css$/,
15 |         use: [
16 |           'vue-style-loader',
17 |           'css-loader'
18 |         ],
19 |       },      {
20 |         test: /\.vue$/,
21 |         loader: 'vue-loader',
22 |         options: {
23 |           loaders: {
24 |           }
25 |           // other vue-loader options go here
26 |         }
27 |       },
28 |       {
29 |         test: /\.js$/,
30 |         loader: 'babel-loader',
31 |         exclude: /node_modules/
32 |       },
33 |       {
34 |         test: /\.(png|jpg|gif|svg)$/,
35 |         loader: 'file-loader',
36 |         options: {
37 |           name: '[name].[ext]?[hash]'
38 |         }
39 |       }
40 |     ]
41 |   },
42 |   resolve: {
43 |     alias: {
44 |       'vue$': 'vue/dist/vue.esm.js'
45 |     },
46 |     extensions: ['*', '.js', '.vue', '.json']
47 |   },
48 |   devServer: {
49 |     historyApiFallback: true,
50 |     noInfo: true,
51 |     overlay: true
52 |   },
53 |   performance: {
54 |     hints: false
55 |   },
56 |   devtool: '#eval-source-map'
57 | }
58 | 
59 | if (process.env.NODE_ENV === 'production') {
60 |   module.exports.devtool = '#source-map'
61 |   // http://vue-loader.vuejs.org/en/workflow/production.html
62 |   module.exports.plugins = (module.exports.plugins || []).concat([
63 |     new webpack.DefinePlugin({
64 |       'process.env': {
65 |         NODE_ENV: '"production"'
66 |       }
67 |     }),
68 |     new webpack.optimize.UglifyJsPlugin({
69 |       sourceMap: true,
70 |       compress: {
71 |         warnings: false
72 |       }
73 |     }),
74 |     new webpack.LoaderOptionsPlugin({
75 |       minimize: true
76 |     })
77 |   ])
78 | }
79 | 


--------------------------------------------------------------------------------