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.

callback

Type: Function

Callback to run when condition is true.

.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ć