├── .gitignore
├── .npmignore
├── README.md
├── build
    ├── common.coffee
    └── webpack.config.coffee
├── dev
    └── basic.vue
├── karma.conf.coffee
├── package.json
├── src
    └── scrollfire.vue
└── test
    └── scrollfire.coffee


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.sublime-project
3 | *.sublime-workspace
4 | npm-debug.log
5 | build/bundle.js
6 | dev/index.js
7 | static
8 | *.js
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.sublime-project
3 | *.sublime-workspace
4 | npm-debug.log
5 | dev/index.js
6 | static
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-scrollfire
 2 | 
 3 | Fires an event on a specific scroll position
 4 | 
 5 | ### [Demo](https://vue-comps.github.io/vue-scrollfire)
 6 | 
 7 | 
 8 | # Install
 9 | 
10 | ```sh
11 | npm install --save-dev vue-scrollfire
12 | // vue@1.0
13 | npm install --save-dev vue-scrollfire@1
14 | ```
15 | or include `build/bundle.js`.
16 | 
17 | ## Usage
18 | ```coffee
19 | # in your component
20 | components:
21 |   "scrollfire": require("vue-scrollfire")
22 | # or, when using bundle.js
23 | components:
24 |   "scrollfire": window.vueComps.scrollfire
25 | ```
26 | ```html
27 | <scrollfire></scrollfire>
28 | ```
29 | 
30 | For examples see [`dev/`](dev/).
31 | 
32 | #### Props
33 | Name | type | default | description
34 | ---:| --- | ---| ---
35 | multiple | Boolean | false | set to fire on every time the element enters, leaves or moves within the viewport
36 | offset | Number | 0 | lateral offset when to fire
37 | after | Number | 0 | milliseconds to wait until fire
38 | ignoreParent | Boolean | false | don't use the bounding box of parent but of scrollfire `span`
39 | initial | Boolean | false | fires `entered` and `left` on initial page load when element `top` or `bottom` is in or above viewport
40 | 
41 | #### Events
42 | Name |  description
43 | ---:| ---
44 | entered |  will be fired on entering of viewport
45 | progress |  will be fired on scrolling of viewport. Argument: `{top,bottom}`
46 | left |  will be fired on leaving of viewport
47 | 
48 | ## Changelog
49 | - 2.0.0  
50 | added vue 2.0.0 compatibility  
51 | `Number` props must be set like this `:after=100`, this isn't working anymore: `after=100`  
52 | 
53 | - 1.0.0  
54 | now has `left` event  
55 | uses parent for size calculation  
56 | 
57 | # Development
58 | Clone repository.
59 | ```sh
60 | npm install
61 | npm run dev
62 | ```
63 | Browse to `http://localhost:8080/`.
64 | 
65 | ## License
66 | Copyright (c) 2016 Paul Pflugradt
67 | Licensed under the MIT license.
68 | 


--------------------------------------------------------------------------------
/build/common.coffee:
--------------------------------------------------------------------------------
1 | window.vueComps ?= {}
2 | window.vueComps.scrollfire = require('../scrollfire.js')
3 | 


--------------------------------------------------------------------------------
/build/webpack.config.coffee:
--------------------------------------------------------------------------------
 1 | webpack = require "webpack"
 2 | 
 3 | module.exports =
 4 |   entry: "./build/common.coffee"
 5 |   output:
 6 |     filename: "bundle.js"
 7 |     path: __dirname
 8 |   module:
 9 |     loaders: [
10 |       { test: /\.coffee$/, loader: "coffee"}
11 |     ]
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin compress: warnings: false
14 |     new webpack.optimize.OccurenceOrderPlugin()
15 |   ]
16 | 


--------------------------------------------------------------------------------
/dev/basic.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .container(style="height:4000px;padding-left:200px;padding-top:50px")
 3 |   a(href="https://github.com/vue-comps/vue-comps-scrollspy/blob/master/dev/basic.vue") source
 4 |   p open console and scroll down
 5 |   p try reloading the page at the bottom to see the effect of `initial` prop and scroll up
 6 |   div(style="margin-top:1500px;width:200px;height:200px;background-color:blue",ref="div") div
 7 |     scrollfire(@entered="entered", @left="left", @progress="progress", multiple)
 8 |     scrollfire(@entered="enteredOffset",@left="leftOffset",:offset=200)
 9 |     scrollfire(@entered="enteredNegativOffset",:offset=-200)
10 |     scrollfire(@entered="enteredAfter",:after=1000)
11 |     scrollfire(@entered="initial", @left="initialLeft", initial)
12 | </template>
13 | 
14 | <script lang="coffee">
15 | module.exports =
16 |   mixins: [
17 |     require("vue-mixins/getViewportSize")
18 |     require("vue-mixins/setCss")
19 |   ]
20 |   components:
21 |     "scrollfire": require "../src/scrollfire.vue"
22 |   methods:
23 |     entered: -> console.log "div entered view"
24 |     left: -> console.log "div left view"
25 |     progress: (pos) -> console.log("div on viewport, top:" + pos.top + " bottom:" + pos.bottom)
26 |     enteredOffset: -> console.log "div entered view 200px before"
27 |     leftOffset: -> console.log "div left view 200px ago"
28 |     enteredNegativOffset: -> console.log "div will enter view in 200px"
29 |     enteredAfter: -> console.log "div entered view 1sec before"
30 |     initial: -> console.log "div entered view or was in view initially or was scrolled by initially"
31 |     initialLeft: -> console.log "div left view or was in view initially or was scrolled by initially"
32 | </script>
33 | 


--------------------------------------------------------------------------------
/karma.conf.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (config) ->
 2 |   config.set
 3 |     preprocessors:
 4 |       "**/*.coffee": ["webpack",'sourcemap']
 5 |     webpack:
 6 |       devtool: 'inline-source-map'
 7 |       resolve:
 8 |         extensions: ["",".js",".coffee",".vue"]
 9 |       module:
10 |         loaders: [
11 |           { test: /\.coffee$/, loader: "coffee-loader" }
12 |           { test: /\.vue$/, loader: "vue-loader" }
13 |           { test: /\.html$/, loader: "html"}
14 |           { test: /\.css$/, loader: "style-loader!css-loader" }
15 |         ]
16 |     webpackMiddleware:
17 |       noInfo: true
18 |     files: ["test/*.coffee"]
19 |     frameworks: ["mocha","chai-dom","chai-spies","chai","vue-component"]
20 |     plugins: [
21 |       require("karma-chai")
22 |       require("karma-chai-dom")
23 |       require("karma-chrome-launcher")
24 |       require("karma-firefox-launcher")
25 |       require("karma-mocha")
26 |       require("karma-webpack")
27 |       require("karma-sourcemap-loader")
28 |       require("karma-spec-reporter")
29 |       require("karma-chai-spies")
30 |       require("karma-vue-component")
31 |     ]
32 |     browsers: ["Chromium","Firefox"]
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-scrollfire",
 3 |   "description": "fires an event on a specific scroll position",
 4 |   "version": "2.0.0",
 5 |   "homepage": "https://github.com/vue-comps",
 6 |   "author": {
 7 |     "name": "Paul Pflugradt",
 8 |     "email": "paul.pflugradt@gmail.com"
 9 |   },
10 |   "license": "MIT",
11 |   "main": "scrollfire.js",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/vue-comps/vue-scrollfire"
15 |   },
16 |   "engines": {
17 |     "node": "*"
18 |   },
19 |   "dependencies": {
20 |     "vue-mixins": "^0.3.4"
21 |   },
22 |   "devDependencies": {
23 |     "chai": "^3.5.0",
24 |     "chai-spies": "^0.7.1",
25 |     "coffee-loader": "^0.7.2",
26 |     "coffee-script": "^1.11.1",
27 |     "gh-pages": "^0.11.0",
28 |     "karma": "^1.3.0",
29 |     "karma-chai": "^0.1.0",
30 |     "karma-chai-dom": "^1.1.0",
31 |     "karma-chai-spies": "^0.1.4",
32 |     "karma-chrome-launcher": "^2.0.0",
33 |     "karma-firefox-launcher": "^1.0.0",
34 |     "karma-mocha": "^1.2.0",
35 |     "karma-sourcemap-loader": "^0.3.7",
36 |     "karma-spec-reporter": "^0.0.26",
37 |     "karma-vue-component": "^2.0.1",
38 |     "karma-webpack": "^1.8.0",
39 |     "mocha": "^3.1.2",
40 |     "pug": "^2.0.0-beta6",
41 |     "script-runner": "^0.1.6",
42 |     "vue": "^2.0.3",
43 |     "vue-compiler": "^2.0.0",
44 |     "vue-dev-server": "^2.0.1",
45 |     "vue-html-loader": "^1.2.3",
46 |     "vue-loader": "^9.7.0",
47 |     "webpack": "^1.13.2"
48 |   },
49 |   "keywords": [
50 |     "scrollfire",
51 |     "component",
52 |     "vue"
53 |   ],
54 |   "readmeFilename": "README.md",
55 |   "scripts": {
56 |     "build:vue": "NODE_ENV=production vue-compiler --out . src/*.vue",
57 |     "build:webpack": "webpack --config build/webpack.config.coffee",
58 |     "build": "run-npm build:*",
59 |     "dev": "vue-dev-server",
60 |     "watch": "karma start --browsers Chromium --auto-watch --reporters spec",
61 |     "test": "karma start --single-run",
62 |     "preversion": "npm test",
63 |     "version": "npm run build && git add .",
64 |     "postversion": "git push && git push --tags && npm publish",
65 |     "ghpages": "vue-dev-server --static static/ && gh-pages -d static"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/scrollfire.vue:
--------------------------------------------------------------------------------
 1 | // out: ..
 2 | <template lang="pug">
 3 | span
 4 |   slot
 5 | </template>
 6 | 
 7 | <script lang="coffee">
 8 | module.exports =
 9 | 
10 |   props:
11 |     multiple:
12 |       type: Boolean
13 |       default: false
14 |     offset:
15 |       type: Number
16 |       default: 0
17 |       coerce: Number
18 |     after:
19 |       type: Number
20 |       default: 0
21 |       coerce: Number
22 |     ignoreParent:
23 |       type: Boolean
24 |       default: false
25 |     initial:
26 |       type: Boolean
27 |       default: false
28 | 
29 |   mixins:[
30 |     require("vue-mixins/onWindowScroll")
31 |     require("vue-mixins/getViewportSize")
32 |     require("vue-mixins/onWindowResize")
33 |   ]
34 | 
35 |   methods:
36 |     processScroll: ->
37 |       box = @target.getBoundingClientRect()
38 |       top = box.top-@height
39 |       bottom = box.bottom
40 |       if @initial and not @lastPos
41 |         @lastPos = {top: Number.MAX_VALUE, bottom: Number.MAX_VALUE}
42 |       if @lastPos?
43 |         if not @state.entered and
44 |             (@lastPos.top > -@offset and top <= -@offset) or
45 |             (@lastPos.bottom < @offset and bottom >= @offset)
46 |           if @after > -@offset
47 |             setTimeout (=>@$emit("entered")),@after
48 |           else
49 |             @$emit("entered")
50 |           @state.entered = true unless @multiple
51 | 
52 |         if not @state.left and
53 |             (@lastPos.bottom > -@offset and bottom <= -@offset) or
54 |             (@lastPos.top < @offset and top >= @offset)
55 |           if @after > 0
56 |             setTimeout (=>@$emit("left")),@after
57 |           else
58 |             @$emit("left")
59 |           @state.left = true unless @multiple
60 |           setTimeout(@disposeListener,1) unless @multiple
61 | 
62 |         if (top < 0 and bottom > 0)
63 |           @$emit("progress", {top: -top, bottom: bottom})
64 |       @lastPos = {top: top, bottom: bottom}
65 |     getHeight: ->
66 |       @height = @getViewportSize().height
67 |   compiled: ->
68 | 
69 | 
70 |   mounted: -> @$nextTick ->
71 |     @state = {entered:false,left:false}
72 |     @getHeight()
73 |     @onWindowResize @getHeight
74 |     @disposeListener = @onWindowScroll @processScroll
75 |     @target = if @ignoreParent then @$el else @$el.parentElement
76 |     @processScroll()
77 | 
78 | </script>
79 | 


--------------------------------------------------------------------------------
/test/scrollfire.coffee:
--------------------------------------------------------------------------------
 1 | env = null
 2 | basic = require("../dev/basic.vue")
 3 | vp = null
 4 | scroll = (y,cb) ->
 5 |   window.scrollTo(0,y)
 6 |   scrollEvent = document.createEvent( 'CustomEvent' )
 7 |   scrollEvent.initCustomEvent( 'scroll', false, false, null )
 8 |   window.dispatchEvent(scrollEvent)
 9 |   window.requestAnimationFrame -> window.requestAnimationFrame ->
10 |     cb()
11 | describe "scrollfire", ->
12 | 
13 |   describe "basic env", ->
14 | 
15 |     before (done) ->
16 |       basic.created = ->
17 |         @entered = chai.spy("entered")
18 |         @left = chai.spy("left")
19 |         @progress = chai.spy("progress")
20 |         @enteredOffset = chai.spy("enteredOffset")
21 |         @leftOffset = chai.spy("leftOffset")
22 |         @enteredNegativOffset = chai.spy("enteredNegativOffset")
23 |         @enteredAfter = chai.spy("enteredAfter")
24 |         @initial = chai.spy("initial")
25 |         @initialLeft = chai.spy("initialLeft")
26 |       env = loadComp(basic)
27 |       vp = env.getViewportSize()
28 |       env.$nextTick ->
29 |         done()
30 | 
31 |     after ->
32 |       #unloadComp(env)
33 | 
34 |     it "should work on scrolling down", (done) ->
35 |       box = env.$refs.div.getBoundingClientRect()
36 |       top = box.top
37 |       bottom = box.bottom
38 |       timeoutCalled = false
39 |       finished = false
40 |       scroll top - vp.height - 200, ->
41 |         env.enteredNegativOffset.should.be.called.once
42 |         scroll top - vp.height , ->
43 |           setTimeout (->
44 |             env.enteredAfter.should.be.called.once
45 |             timeoutCalled = true
46 |             done() if finished
47 |             ),1010
48 |           env.entered.should.be.called.once
49 |           env.initial.should.be.called.once
50 |           scroll top - vp.height + 200, ->
51 |             env.enteredOffset.should.be.called.once
52 |             env.progress.should.be.called.once
53 |             scroll bottom, ->
54 |               env.left.should.be.called.once
55 |               env.initialLeft.should.be.called.once
56 |               scroll bottom+200, ->
57 |                 env.leftOffset.should.be.called.once
58 |                 finished = true
59 |                 done() if timeoutCalled
60 | 
61 |     it "should work on scrolling up", (done) ->
62 |       env.setCss(document.body, "height", "4000px")
63 |       timeoutCalled = false
64 |       finished = false
65 |       scroll 4000, ->
66 |         document.body.removeChild(env.$el)
67 |         env.$destroy()
68 |         env = loadComp(basic)
69 |         env.$nextTick -> env.$nextTick ->
70 |           env.initial.should.be.called.once
71 |           env.initialLeft.should.be.called.once
72 |           scroll env.$refs.div.offsetTop+env.$refs.div.offsetHeight+200, ->
73 |             env.enteredNegativOffset.should.be.called.once
74 |             scroll env.$refs.div.offsetTop+env.$refs.div.offsetHeight, ->
75 |               env.entered.should.be.called.once
76 |               setTimeout (->
77 |                 env.enteredAfter.should.be.called.once
78 |                 timeoutCalled = true
79 |                 done() if finished
80 |                 ),1010
81 |               scroll env.$refs.div.offsetTop + env.$refs.div.offsetHeight - 200, ->
82 |                 env.enteredOffset.should.be.called.once
83 |                 env.progress.should.be.called.once
84 |                 scroll env.$refs.div.offsetTop - vp.height, ->
85 |                   env.left.should.be.called.once
86 |                   scroll env.$refs.div.offsetTop - vp.height - 200, ->
87 |                     env.left.should.be.called.once
88 |                     finished = true
89 |                     done() if timeoutCalled
90 | 


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