This package has been deprecated

Author message:

Use @advertol/core.

kist-lazyads

Simple ads manager. Provides async control with Postscribe.

Installation

npm install kist-lazyads --save

API

Lazyads(options)

Type: Function

Module class. Available options are:

el

Type: String|jQuery|Element

Element which will contain ad content. String should be valid CSS selector.

context

Type: Array

List of contexts which will be used to resolve ads.

contentIdDataProp

Type: String

data property which will be used to connect with ad content.

This will inject ad1 content inside element with data-ad-id="ad1"

{
    contentIdDataProp: 'ad-id'
}

<div data-ad-id="ad1"></div>

classes

Type: Object

HTML clasess for DOM elements.

{
    el: 'kist-Lazyads-item',
    isLoaded: 'is-loaded',
    isHidden: 'is-hidden',
    isContentEmpty: 'is-contentEmpty'
}

adapter

Type: Adapter

Adapter for banner system (e.g. Revive Ads, Google DFP, …).

.init(cb)

Type: Function
Returns: Lazyads

Initializes ad manager. This method must be called, either after setting up control, or after creating instance.

.control(options)

Type: Function
Returns: Lazyads

Provides individual control of ads based on specific conditions. Available options are:

name

Type: String

Name of control. Options with same name will be merged.

condition

Type: Function

Condition on which callback method of current control will be run.

Argument	Type	Description
el	jQuery	Current ad element which fullfils condition.

callback

Type: Function

Callback to run when condition is true.

Argument	Type	Description
el	jQuery	Current ad element which fullfils condition.
emit	Function	Accepts one argument: name of event to emit. Emitted event has form of {Provided argument}:{Control name} and is triggered on corresponding ad element.
waitForLayout	Function	Alias for setTimeout. Default timeout is 300.

.addPlaceholder(el)

Type: Function
Returns: Lazyads

Dynamically creates placeholder for ad. Useful if you don’t want to display specific ad on Lazyads initialization.

el

Type: String|jQuery|Element

Element which will contain ad content. String should be valid CSS selector.

.recheckControl()

Type: Function
Returns: Lazyads

Iterates over every control entry and fires callback if condition is satisifed.

.destroy()

Type: Function
Returns: Lazyads

Destroys current Lazyads instance.

Examples

import Lazyads from 'kist-lazyads';
import MediaQueryContext from 'kist-lazyads/context/media-query.esm';
import ReviveAdsAdapter from 'kist-lazyads/adaptes/revive-ads.esm';
 
const lazyads = new Lazyads({
    el: '.Banner',
    adapter: new ReviveAdsAdapter(),
    context: [
        new MediaQueryContext({
            'screen and (min-width:1000px) and (max-width:1199px)': ['ad1','ad2','ad3','ad5'],
            'screen and (min-width:1500px)': ['ad1','ad2','ad3'],
            'screen and (min-width:915px) and (max-width:999px)': ['ad1','ad2','ad3','ad3','ad5'],
            'screen and (min-width:1200px) and (max-width:1499px)': ['ad1','ad2','ad3'],
            'screen and (min-width:728px) and (max-width:914px)': ['ad1','ad3','ad5'],
            'screen and (max-width:599px)': ['ad4']
        })
    ]
});
 
lazyads
    .control({
        name: 'ad1',
        condition: ( el ) => {
            return el.data('ad-id') === 'ad1';
        },
        callback: ( el, emit, wait ) => {
            if ( el.hasClass('is-loaded') ) {
                if ( el.hasClass('is-hidden') ) {
                    console.log(1);
                    emit('foo');
                }
            }
        }
    })
    .control({
        name: 'ad4',
        condition: ( el ) => {
            return el.data('ad-id') === 'ad4';
        },
        callback: ( el, emit, wait ) => {
            console.log(2);
        }
    })
    .init(() => {
        console.log('Lazyads initialized!');
    });
 
lazyads.addPlaceholder($('<div clas="Banner" data-ad-id="ad5"></div>'));
 
$('[data-ad-id="ad1"]').on('foo:ad1', ( e, el ) => {
    console.log(arguments);
});
 
$(document).on('foo:ad1', ( e, el ) => {
    console.log(e.currentTarget);
    console.log(e.target);
});

<data class="Banner" data-ad-id="ad1"></div>
<data class="Banner" data-ad-id="ad2"></div>
<data class="Banner" data-ad-id="ad3"></div>
<data class="Banner" data-ad-id="ad4"></div>

Browser support

Tested in IE9+ and all modern browsers.

License

MIT © Ivan Nikolić