impression

See appear event instead. For React hook, see useAppear. For React components, see react-lifecycle-appear.

Element impression, for ads or user behaviour statistics.

Written in es6 javascript, published as npm package as es5 along with a browser standalone.

Browser support

IE9+, chrome, safari, firefox, opera...

Installation

npm

npm install @vivaxy/impression

browser

<script src="./bundle/impression.rollup.js"></script>

<script src="./bundle/impression.webpack.js"></script>

Usage

import Impression from '@vivaxy/impression';
const impression = new Impression();
const element = document.querySelector('#test');
impression.isViewable(element); // => true
impression.on('begin', '#test', (element) => {
    console.log(`element shown into view`, element);
});
impression.on('end', '#test', (element) => {
    console.log(`element shown out of view`, element);
});
impression.scan(); // flush current viewable element

API

constructor Impression => {Impression}

Initialize the instance.

const impression = new Impression(options)

isViewable => {Boolean}

Test if an element is viewable.

impression.isViewable(element)

Only accepts a single element.

on => {Impression}

Listen when elements match selector enter or leave the view.

impression.on(event, selector, callback)

callback(element, { type, direction })

off => {Impression}

Remove listeners.

impression.off(event, selector, callback)

impression.off(event, selector)

impression.off(event)

impression.off()

scan => {Impression}

Scan page to update element status.

impression.scan()

once => {Impression}

impression.once(event, selector, callback)

attach => {Impression}

impression.attach()

detach => {Impression}

impression.detach()

onObservers => {Impression}

impression.onObservers(type, callback)

onceObservers => {Impression}

impression.onceObservers(type, callback)

offObservers => {Impression}

impression.offObservers(type, callback)

impression.offObservers(type)

impression.offObservers()

Options

tolerance

The number of pixels an element is allowed to enter its container boundaries before calling its callback.

default 0

debounce

The number of milliseconds to wait before calling an element's callback after the changes.

default 100

container

The container of the elements you want to track.

default window

Events

begin

impression.on('begin', '[data-impression-uniqueid="1"]', (element, { type }) => {
    // => which element begins to impression
    // => the cause of the change
});

end

impression.on('end', '[data-impression-uniqueid="1"]', (element, { type }) => {
    // => which element's impression ends
    // => the cause of the change
});

Types

• mutation
• resize
• scroll
• unload
• scan

Reference

• onScreen
• 判断元素是否在屏幕中出现
• Code Coverage of Mocha Tests using Istanbul and Karma
• babel-plugin-istanbul
• Chai Assertion Library BDD
• in-view.js