Change the event API, add tests and update README

Author: tkjaergaard

README.md

@@ -79,17 +79,27 @@ This means that it's basically a "decorator". A component which does not output
 
 | Property   | Type        | Default           | Required | Description                              |
 | ---------- | ----------- | ----------------- | -------- | ---------------------------------------- |
-| threshold  | Array       | [0.2]             | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
+| threshold  | Array       | [0, 0.2]          | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 | root       | HTMLElement | null              | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 | rootMargin | String      | *0px 0px 0px 0px* | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 
 
 
 ## Events
 
-| Name            | Arguments | Description                 |
-| --------------- | --------- | --------------------------- |
-| **intersected** | *none*    | Event fired on intersected. |
+| Name       | Arguments                                | Description                              |
+| ---------- | ---------------------------------------- | ---------------------------------------- |
+| **change** | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired on any inte.                 |
+| **enter**  | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired when the element is intersected (visible on the screen) |
+| **leave**  | [*IntersectionObserverEntry*](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | Event fired when the element is *not* intersected (not visible on the screen) |
+
+
+
+> The **enter** and **leave** event is sugar, for an often performed operation. You still have to set the threshold to e.g. [0, 0.2] (default). If you leave out "0", it will never call the **leave** event.
+
+
+
+The events is compliant with Vue's [event modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers). This means that you could add `.once` to the events to make sure you only trigger your event handler once.
 
 
 

__tests__/index.js

@@ -43,15 +43,15 @@ test('It should mount correctly and add the item to the observers list', async (
   expect(vm.$el.textContent).toBe('this is my component')
 })
 
-test('It should emit "intersected" event when the component is intersected', async () => {
+test('It should emit "enter" event when the component is intersected', async () => {
   const mockedIntersect = Object.assign({}, Intersect)
   const spy = jest.fn()
 
   const vm = new Vue({
-    template: `<intersect @intersected="intersected"><div></div></intersect>`,
+    template: `<intersect @enter="onEnter"><div></div></intersect>`,
     components: {Intersect: mockedIntersect},
     methods: {
-      intersected: spy
+      onEnter: spy
     }
   }).$mount()
 
@@ -64,6 +64,52 @@ test('It should emit "intersected" event when the component is intersected', asy
   expect(spy).toHaveBeenCalledTimes(1)
 })
 
+test('It should emit "leave" event when the component is not intersected', async () => {
+  const mockedIntersect = Object.assign({}, Intersect)
+  const spy = jest.fn()
+
+  const vm = new Vue({
+    template: `<intersect @leave="onLeave"><div></div></intersect>`,
+    components: {Intersect: mockedIntersect},
+    methods: {
+      onLeave: spy
+    }
+  }).$mount()
+
+  await vm.$nextTick()
+
+  vm._vnode.componentInstance.observer.cb([{
+    isIntersecting: false
+  }])
+
+  expect(spy).toHaveBeenCalledTimes(1)
+})
+
+test('It should emit "change" on any intersection change', async () => {
+  const mockedIntersect = Object.assign({}, Intersect)
+  const spy = jest.fn()
+
+  const vm = new Vue({
+    template: `<intersect @change="onChange"><div></div></intersect>`,
+    components: {Intersect: mockedIntersect},
+    methods: {
+      onChange: spy
+    }
+  }).$mount()
+
+  await vm.$nextTick()
+
+  vm._vnode.componentInstance.observer.cb([{
+    isIntersecting: false
+  }])
+
+  vm._vnode.componentInstance.observer.cb([{
+    isIntersecting: true
+  }])
+
+  expect(spy).toHaveBeenCalledTimes(2)
+})
+
 test('It should be possible to set the threshold property', async () => {
   const mockedIntersect = Object.assign({}, Intersect)
   const vm = new Vue({
@@ -135,6 +181,8 @@ test('It should warn when no child component is defined', async () => {
 
   expect(global.console.warn).toHaveBeenCalledTimes(1)
   expect(vm._vnode.componentInstance.observer.observables.length).toBe(0)
+
+  global.console.warn.mockReset()
 })
 
 test('It should warn if more than one child component is defined', async () => {
@@ -148,4 +196,24 @@ test('It should warn if more than one child component is defined', async () => {
 
   expect(global.console.warn).toHaveBeenCalledTimes(1)
   expect(vm._vnode.componentInstance.observer.observables.length).toBe(1)
+
+  global.console.warn.mockReset()
+})
+
+test('It should not warn if Vue.config.silent is set to false', async () => {
+  require('vue').config.silent = true
+
+  global.console.warn = jest.fn()
+
+  const vm = new Vue({
+    template: `<intersect><div></div><div></div></intersect>`,
+    components: {Intersect}
+  }).$mount()
+
+  await vm.$nextTick()
+
+  expect(global.console.warn).toHaveBeenCalledTimes(0)
+  expect(vm._vnode.componentInstance.observer.observables.length).toBe(1)
+
+  global.console.warn.mockReset()
 })

dist/index.js

@@ -36,10 +36,13 @@ export default {
     var _this = this;
 
     this.observer = new IntersectionObserver(function (entries) {
-      if (entries[0].isIntersecting) {
-        _this.$emit('intersected');
-        _this.observer.disconnect();
+      if (!entries[0].isIntersecting) {
+        _this.$emit('leave', [entries[0]]);
+      } else {
+        _this.$emit('enter', [entries[0]]);
       }
+
+      _this.$emit('change', [entries[0]]);
     }, {
       threshold: this.threshold,
       root: this.root,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intersect",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A Vue component to add intersection-observer to a Vue component or HTML element.",
   "main": "dist/index.js",
   "repository": "[email protected]:heavyy/vue-intersect.git",

src/index.js

@@ -13,7 +13,7 @@ export default {
     threshold: {
       type: Array,
       required: false,
-      default: () => [0.2]
+      default: () => [0, 0.2]
     },
     root: {
       type: HTMLElement,
@@ -28,10 +28,13 @@ export default {
   },
   created () {
     this.observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        this.$emit('intersected')
-        this.observer.disconnect()
+      if (!entries[0].isIntersecting) {
+        this.$emit('leave', [entries[0]])
+      } else {
+        this.$emit('enter', [entries[0]])
       }
+
+      this.$emit('change', [entries[0]])
     }, {
       threshold: this.threshold,
       root: this.root,