/*
* BackgroundCheck
* http://kennethcachia.com/background-check
*
* v1.2.2
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else {
root.BackgroundCheck = factory(root);
}
}(this, function () {
'use strict';
var resizeEvent = window.orientation !== undefined ? 'orientationchange' : 'resize';
var supported;
var canvas;
var context;
var throttleDelay;
var viewport;
var attrs = {};
/*
* Initializer
*/
function init(a) {
if (a === undefined || a.targets === undefined) {
throw 'Missing attributes';
}
// Default values
attrs.debug = checkAttr(a.debug, false);
attrs.debugOverlay = checkAttr(a.debugOverlay, false);
attrs.targets = getElements(a.targets);
attrs.images = getElements(a.images || 'img', true);
attrs.changeParent = checkAttr(a.changeParent, false);
attrs.threshold = checkAttr(a.threshold, 50);
attrs.minComplexity = checkAttr(a.minComplexity, 30);
attrs.minOverlap = checkAttr(a.minOverlap, 50);
attrs.windowEvents = checkAttr(a.windowEvents, true);
attrs.maxDuration = checkAttr(a.maxDuration, 500);
attrs.mask = checkAttr(a.mask, {
r: 0,
g: 255,
b: 0
});
attrs.classes = checkAttr(a.classes, {
dark: 'background--dark',
light: 'background--light',
complex: 'background--complex'
});
if (supported === undefined) {
checkSupport();
if (supported) {
canvas.style.position = 'fixed';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.width = '100%';
canvas.style.height = '100%';
window.addEventListener(resizeEvent, throttle.bind(null, function () {
resizeCanvas();
check();
}));
window.addEventListener('scroll', throttle.bind(null, check));
resizeCanvas();
check();
}
}
}
/*
* Destructor
*/
function destroy() {
supported = null;
canvas = null;
context = null;
attrs = {};
if (throttleDelay) {
clearTimeout(throttleDelay);
}
}
/*
* Output debug logs
*/
function log(msg) {
if (get('debug')) {
console.log(msg);
}
}
/*
* Get attribute value, use a default
* when undefined
*/
function checkAttr(value, def) {
checkType(value, typeof def);
return (value === undefined) ? def : value;
}
/*
* Reject unwanted types
*/
function checkType(value, type) {
if (value !== undefined && typeof value !== type) {
throw 'Incorrect attribute type';
}
}
/*
* Convert elements with background-image
* to Images
*/
function checkForCSSImages(els) {
var el;
var url;
var list = [];
for (var e = 0; e < els.length; e++) {
el = els[e];
list.push(el);
if (el.tagName !== 'IMG') {
url = window.getComputedStyle(el).backgroundImage;
// Ignore multiple backgrounds
if (url.split(/,url|, url/).length > 1) {
throw 'Multiple backgrounds are not supported';
}
if (url && url !== 'none') {
list[e] = {
img: new Image(),
el: list[e]
};
url = url.slice(4, -1);
url = url.replace(/"/g, '');
list[e].img.src = url;
log('CSS Image - ' + url);
} else {
throw 'Element is not an but does not have a background-image';
}
}
}
return list;
}
/*
* Check for String, Element or NodeList
*/
function getElements(selector, convertToImages) {
var els = selector;
if (typeof selector === 'string') {
els = document.querySelectorAll(selector);
} else if (selector && selector.nodeType === 1) {
els = [selector];
}
if (!els || els.length === 0 || els.length === undefined) {
throw 'Elements not found';
} else {
if (convertToImages) {
els = checkForCSSImages(els);
}
els = Array.prototype.slice.call(els);
}
return els;
}
/*
* Check if browser supports