vue-intersect - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

__tests__/index.js

@@ -46,3 +46,3 @@ import Vue from 'vue/dist/vue.js'
 
-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)
@@ -52,6 +52,6 @@ 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
     }
@@ -69,2 +69,48 @@ }).$mount()
 
+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 () => {
@@ -141,2 +187,4 @@ const mockedIntersect = Object.assign({}, Intersect)
   expect(vm._vnode.componentInstance.observer.observables.length).toBe(0)
+
+  global.console.warn.mockReset()
 })
@@ -155,2 +203,22 @@
   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

@@ -39,6 +39,9 @@ import Vue from 'vue';
     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]]);
     }, {
@@ -45,0 +48,0 @@ threshold: this.threshold,

package.json

 {
   "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.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # Vue Intersect
-**A Vue component to add intersection observe a Vue component or HTML element.**
+**A Vue component to add intersection-observer to a Vue component or HTML element.**
 
-[![npm version](https://badge.fury.io/js/vue-intersect.svg)](https://badge.fury.io/js/vue-intersect)
+[![npm version](https://badge.fury.io/js/vue-intersect.svg)](https://badge.fury.io/js/vue-intersect) [![Coverage Status](https://coveralls.io/repos/github/heavyy/vue-intersect/badge.svg)](https://coveralls.io/github/heavyy/vue-intersect) ![Build status](https://img.shields.io/travis/heavyy/vue-intersect.svg)
 
@@ -82,3 +82,3 @@
 | ---------- | ----------- | ----------------- | -------- | ---------------------------------------- |
-| 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) |
@@ -91,8 +91,18 @@ | rootMargin | String      | *0px 0px 0px 0px* | *no*     | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
 
-| 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.
+
+
+
 ## Polyfill
@@ -102,2 +112,2 @@
 
-[WICG IntersectionObserver Polyfill](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) is higly recommended.
+[WICG IntersectionObserver Polyfill](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) is highly recommended.

src/index.js

@@ -16,3 +16,3 @@ import Vue from 'vue'
       required: false,
-      default: () => [0.2]
+      default: () => [0, 0.2]
     },
@@ -32,6 +32,9 @@ root: {
     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]])
     }, {
@@ -38,0 +41,0 @@ threshold: this.threshold,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

111

increased by11%

Worsened metrics

Total package byte prevSize

135924

decreased by-24.03%

Number of package files

13

decreased by-43.48%

Lines of code

314

decreased by-54.82%

No dependency changes