Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.
/ impression Public archive

👀Element view notifier

License

Notifications You must be signed in to change notification settings

vivaxy/impression

Repository files navigation

impression

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

impression

Build Status NPM Version NPM Downloads MIT License Codecov Codacy Badge

DOI

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