impression.js

impression

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 impression.js

browser

<script src="./bundle/index.webpack.js"></script> <script src="./bundle/index.rollup.js"></script>

Usage

import Impression from 'impression.js';
let impression = new Impression();
let 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);
});

API

constructor Impression => {Impression}

const impression = new Impression(options)

isViewable => {Boolean}

impression.isViewable(element)

Only accepts a single element.

on => {Impression}

impression.on(event, selector, callback)

callback(element, { type, direction })

off => {Impression}

impression.off(event, selector, callback)

impression.off(event, selector)

impression.off(event)

impression.off()

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

Reference

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