spaniel - GitLite

KO | EN

gitlite — search

#javascript #python #golang #machine-learning #rust #linux #nodejs #macos #java #cli #awesome-list #vue #pytorch #openai

spaniel

(★ 92)

LinkedIn's JavaScript viewport tracking library and IntersectionObserver polyfill

File Explorer

Download Latest Version (.zip)

- - ci.yaml
- settings.json
- tasks.json
- build-docs.sh
- build.sh
- publish-docs.sh
- size-calc.js
- - element.ts
  - engine.ts
  - events.ts
  - index.ts
  - interfaces.ts
  - queue.ts
  - scheduler.ts
  - window-proxy.ts
- index.ts
- interfaces.ts
- intersection-observer.ts
- native-spaniel-observer.ts
- native-watcher.ts
- spaniel-observer.ts
- utils.ts
- watcher.ts
- - index.html
  - index.js
  - setup.js
  - style.css
- - context.js
  - run.js
  - spaniel-context.js
  - test-module.js
- - environment.js
- - spaniel-observer.spec.js
- constants.js
.babelrc
.gitignore
.npmignore
.travis.yml
Brocfile.js
CHANGELOG.md
LICENSE
NOTICE
package.json
README.md
rollup.config.js
testem.json
tsconfig.json
tslint.json
USAGE.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Spaniel [![Build Status](https://travis-ci.org/linkedin/spaniel.svg?branch=master)](https://travis-ci.org/linkedin/spaniel) [![npm version](https://badge.fury.io/js/spaniel.svg)](https://www.npmjs.com/package/spaniel)

LinkedIn's JavaScript viewport tracking library and [IntersectionObserver](https://github.com/WICG/IntersectionObserver) polyfill. Track what the user actually sees.

```JavaScript
import { IntersectionObserver } from 'spaniel';

new IntersectionObserver((entries) => { console.log('I see you') }, {
  threshold: 0.5
}).observe(document.getElementById('my-element'));
```

Practical uses included:

* Determining advertisement impressions
* Impression discounting feedback for relevance systems
* Occlusion culling - Don't render an object until user is close to scrolling the object into the viewport

## [Usage and API Docs](https://linkedin.github.io/spaniel/)

Spaniel provides additional abstractions on top of [IntersectionObserver](https://github.com/WICG/IntersectionObserver), provides APIs for hooking into the low-level internals, and has some limitations as a non-complete polyfill. Learn more by reading the [Usage and API Docs](https://linkedin.github.io/spaniel/).

## Why use Spaniel?

* Provides the future-proofing of a WICG API, but with an expanded feature-set built upon said API.
* Tested and iterated upon in production by LinkedIn since late 2014
* Highly performant, only relies on `requestAnimationFrame`
* Extensive `requestAnimationFrame` task/utility API

#### How is it tested?

Spaniel has both unit tests and a headless test suite. The headless tests are run using [Nightmare](https://github.com/segmentio/nightmare).

#### How big is Spaniel?

Checkout [size.txt](https://github.com/linkedin/spaniel/blob/gh-pages/size.txt) to see the current minified UMD gzipped size.

You can also run `npm run stats` to measure locally.

## Installation

Spaniel is a standard NPM/CommonJS module. You can use a build tool like [browserify](http://browserify.org/) or [webpack](https://www.npmjs.com/package/webpack) to include Spaniel in your application.

If you're using [rollup](http://rollupjs.org/), an ES6 version is built at `/exports/es6/spaniel.js` (as noted by `jsnext:main` in `package.json`).

Alternatively, running *npm run build* will generate a UMD file at `/exports/spaniel.js`, and a minified UMD file at `/exports/min/spaniel.js`. You can use the minified file in production.

## Development setup
The Spaniel source code is written in [TypeScript](https://www.typescriptlang.org/).

You will need `testem` installed globally to run the tests.

```
npm install -g testem
```

You will also need to install [phantom.js](http://phantomjs.org/download.html) globally.

```
// Install dependencies
npm install

// Run build
npm run build

// Watch and auto-rebuild
npm run watch

// Serve test app
npm run serve

// Run the tests
npm run test
```

## IntersectionObserver Resources

* [https://github.com/WICG/IntersectionObserver](https://github.com/WICG/IntersectionObserver)
* [https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

## Copyright

Copyright 2017 LinkedIn Corp.  All rights reserved.