├── .gitignore
├── .travis.yml
├── example.js
├── package.json
├── LICENSE
├── index.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | tmp/
4 | npm-debug.log*
5 | .DS_Store
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | node_js:
2 | - "0.12"
3 | - "4"
4 | sudo: false
5 | language: node_js
6 | script: "npm run test:cov"
7 | after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov"
8 |
--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
1 | var onIntersect = require('./')
2 | var html = require('bel')
3 |
4 | if (typeof window !== 'undefined') {
5 | var el = html`Yay, we're a heading!
`
6 | onIntersect(el, function () {
7 | console.log('Woot, component is visible!')
8 | }, function () {
9 | console.log('Woot, component is no longer visible!')
10 | })
11 |
12 | document.body.appendChild(html`
13 |
14 |
15 | ${el}
16 |
17 |
18 | `)
19 | }
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "on-intersect",
3 | "version": "2.0.0",
4 | "description": "Call back when an element intersects with another",
5 | "main": "index.js",
6 | "scripts": {
7 | "deps": "dependency-check . && dependency-check . --extra --no-dev",
8 | "start": "bankai start example",
9 | "test": "standard && npm run deps",
10 | "test:cov": "standard && npm run deps"
11 | },
12 | "repository": "yoshuawuyts/on-intersect",
13 | "keywords": [
14 | "intersect",
15 | "intersect",
16 | "dom",
17 | "api"
18 | ],
19 | "license": "MIT",
20 | "dependencies": {
21 | "global": "^4.3.1",
22 | "is-dom": "^1.0.7"
23 | },
24 | "devDependencies": {
25 | "bankai": "^5.2.1",
26 | "bel": "^4.5.1",
27 | "dependency-check": "^2.7.0",
28 | "istanbul": "^0.4.5",
29 | "standard": "^8.6.0",
30 | "tape": "^4.6.3"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Yoshua Wuyts
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 all
13 | 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 THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var assert = require('assert')
2 |
3 | module.exports = onIntersect
4 |
5 | function onIntersect (el, opts, onEnter, onExit) {
6 | assert.ok(typeof window !== 'undefined', 'on-intersect: window did not exist. Are you calling this in the browser?')
7 | assert.equal(typeof el, 'object', 'on-intersect: el should be a valid DOM node')
8 |
9 | if (typeof opts === 'function') {
10 | onExit = onEnter
11 | onEnter = opts
12 | opts = {}
13 | }
14 |
15 | assert.ok(onEnter || onExit, 'on-intersect: must have at least one listener')
16 |
17 | onEnter = onEnter || noop
18 | onExit = onExit || noop
19 |
20 | assert.equal(typeof opts, 'object', 'on-intersect: opts should be type object')
21 | assert.equal(typeof onEnter, 'function', 'on-intersect: onEnter should be type function')
22 | assert.equal(typeof onExit, 'function', 'on-intersect: onExit should be type function')
23 |
24 | var wasCalled = false
25 | var observer = new window.IntersectionObserver(handler, opts)
26 | observer.observe(el)
27 |
28 | return function () {
29 | observer.disconnect()
30 | }
31 |
32 | function handler (entries, obs) {
33 | var entry = entries[0]
34 |
35 | // This covers subtle edge cases where the intersection value is 0.
36 | // See: https://github.com/yoshuawuyts/on-intersect/issues/2
37 | var isNotIntersecting = typeof entry.isIntersecting === 'boolean'
38 | ? !entry.isIntersecting
39 | : entry.intersectionRatio === 0
40 |
41 | if (isNotIntersecting) {
42 | // Make sure it's not called immediately when loaded.
43 | if (wasCalled) onExit(entry)
44 | } else {
45 | onEnter(entry)
46 | }
47 |
48 | wasCalled = true
49 | }
50 | }
51 |
52 | function noop () {}
53 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # on-intersect [![stability][0]][1]
2 | [![npm version][2]][3] [![build status][4]][5]
3 | [![downloads][8]][9] [![js-standard-style][10]][11]
4 |
5 | Call back when an element intersects with another.
6 |
7 | ## Usage
8 | ```js
9 | var onIntersect = require('on-intersect')
10 | var html = require('bel')
11 |
12 | var el = html`Yay, we're a heading!
`
13 |
14 | onIntersect(el, function () {
15 | console.log('Woot, component is visible!')
16 | })
17 |
18 | document.body.appendChild(html`
19 |
20 |
21 | ${el}
22 |
23 |
24 | `)
25 | ```
26 |
27 | ## API
28 | ### stopObserving = onViewport(element, [opts], [onEnter], [onExit])
29 | Call `onEnter` when an element scrolls into view, and `onExit` when an element
30 | scrolls out of view. `opts` can be any value passed into the
31 | [InterSectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
32 | constructor.
33 |
34 | ### stopObserving()
35 | Stop the observer.
36 |
37 | ## Installation
38 | ```sh
39 | $ npm install on-intersect
40 | ```
41 |
42 | ## Further Reading
43 | - [MDN/Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
44 |
45 | ## Authors
46 | - [Finn Pauls](https://github.com/finnp)
47 | - [Yoshua Wuyts](https://github.com/yoshuawuyts)
48 |
49 | ## License
50 | [MIT](https://tldrlegal.com/license/mit-license)
51 |
52 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
53 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
54 | [2]: https://img.shields.io/npm/v/on-intersect.svg?style=flat-square
55 | [3]: https://npmjs.org/package/on-intersect
56 | [4]: https://img.shields.io/travis/yoshuawuyts/on-intersect/master.svg?style=flat-square
57 | [5]: https://travis-ci.org/yoshuawuyts/on-intersect
58 | [6]: https://img.shields.io/codecov/c/github/yoshuawuyts/on-intersect/master.svg?style=flat-square
59 | [7]: https://codecov.io/github/yoshuawuyts/on-intersect
60 | [8]: http://img.shields.io/npm/dm/on-intersect.svg?style=flat-square
61 | [9]: https://npmjs.org/package/on-intersect
62 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
63 | [11]: https://github.com/feross/standard
64 |
--------------------------------------------------------------------------------