new event: left, progress

Duncan Hsieh · Duncan Hsieh · commit b2cf03695780 · 2016-08-29T20:48:31.000+08:00
diff --git a/README.md b/README.md
@@ -38,6 +38,8 @@ For examples see [`dev/`](dev/).
 | Name |  description |
 | ---:| --- |
 | entered |  will be fired on entering of viewport |
+| progress |  will be fired on scrolling of viewport |
+| left |  will be fired on leaving of viewport |
 
 # Development
 Clone repository.
diff --git a/dev/basic.vue b/dev/basic.vue
@@ -3,7 +3,7 @@
   a(href="https://github.com/vue-comps/vue-comps-scrollspy/blob/master/dev/basic.vue") source
   p open console and scroll down
   div(style="margin-top:800px;width:200px;height:200px;background-color:blue") div
-    scrollfire(@entered="entered")
+    scrollfire(@entered="entered", @left="left", @progress="progress", multiple=true)
     scrollfire(@entered="enteredOffset",:offset=200)
     scrollfire(@entered="enteredNegativOffset",:offset=-200)
     scrollfire(@entered="enteredAfter",:after=5000)
@@ -15,6 +15,8 @@ module.exports =
     "scrollfire": require "../src/scrollfire.vue"
   methods:
     entered: -> console.log "div entered view"
+    left: -> console.log "div left view"
+    progress: (pos) -> console.log("div on viewport, top:" + pos.top + " bottom:" + pos.bottom)
     enteredOffset: -> console.log "div entered view 200px before"
     enteredNegativOffset: -> console.log "div will enter view in 200px"
     enteredAfter: -> console.log "div entered view 5sec before"
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-scrollfire",
   "description": "fires an event on a specific scroll position",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://github.com/vue-comps",
   "author": {
     "name": "Paul Pflugradt",
diff --git a/src/scrollfire.vue b/src/scrollfire.vue
@@ -1,6 +1,7 @@
 // out: ..
 <template lang="jade">
 span
+  slot
 </template>
 
 <script lang="coffee">
@@ -22,22 +23,34 @@ module.exports =
     require("vue-mixins/getViewportSize")
     require("vue-mixins/onWindowResize")
   ]
+
   methods:
     processScroll: ->
-      pos = @$el.getBoundingClientRect().top+@offset-@height
-      if @lastPos > 0 and pos <= 0
+      top = @$el.getBoundingClientRect().top+@offset-@height
+      bottom = @$el.getBoundingClientRect().bottom+@offset
+      if (@lastPos.top > 0 and top <= 0) || (@lastPos.bottom < 0 and bottom >= 0)
         if @after > 0
-          setTimeout (=>@$emit("entered")),@after
+          setTimeout (=>@$emit("left")),@after
         else
           @$emit("entered")
-        setTimeout(@disposeListener,1) unless @multiple
-      @lastPos = pos
+
+      if (@lastPos.bottom > 0 and bottom <= 0) || (@lastPos.top < 0 and top >= 0)
+        if @after > 0
+          setTimeout (=>@$emit("left")),@after
+        else
+          @$emit("left")
+        setTimeout(@distopeListener,1) unless @multiple
+
+      if (top < 0 and bottom > 0)
+        @$emit("progress", {top: -top, bottom: bottom})
+
+      @lastPos = {top: top, bottom: bottom}
     getHeight: ->
       @height = @getViewportSize().height
   compiled: ->
-    @lastPos = Number.MAX_VALUE
+    @lastPos = {top: Number.MAX_VALUE, bottom: Number.MAX_VALUE}
     @getHeight()
     @onWindowResize @getHeight
-    @disposeListener = @onWindowScroll @processScroll
+    @distopeListener = @onWindowScroll @processScroll
 
 </script>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-scrollfire",`
`3`	`3`	`"description": "fires an event on a specific scroll position",`
`4`		`- "version": "0.1.0",`
	`4`	`+ "version": "0.2.0",`
`5`	`5`	`"homepage": "https://github.com/vue-comps",`
`6`	`6`	`"author": {`
`7`	`7`	`"name": "Paul Pflugradt",`