@vivaxy/impression

    2.1.1 • Public • Published

    impression

    impression

    Build Status NPM Version NPM Downloads MIT License Codecov Codacy Badge

    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

    Install

    npm i @vivaxy/impression

    DownloadsWeekly Downloads

    1

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    226 kB

    Total Files

    60

    Last publish

    Collaborators

    • vivaxy