background-check.js

/*
 * BackgroundCheck
 * https://linkstack.org/
 * Source: Kenneth Cachia
 * 
 * v1.3.0
 */

(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 || supported === null) {
      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 <img> 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 <canvas>
   */
  function checkSupport() {
    canvas = document.createElement('canvas');

    if (canvas && canvas.getContext) {
      context = canvas.getContext('2d', { willReadFrequently: true });
      supported = true;
    } else {
      supported = false;
    }

    showDebugOverlay();
  }


  /*
   * Show <canvas> on top of page
   */
  function showDebugOverlay() {

    if (get('debugOverlay')) {
      canvas.style.opacity = 0.5;
      canvas.style.pointerEvents = 'none';
      document.body.appendChild(canvas);
    } else {

      // Check if it was previously added
      if (canvas.parentNode) {
        canvas.parentNode.removeChild(canvas);
      }
    }
  }


  /*
   * Stop if it's slow
   */
  function kill(start) {
    var duration = new Date().getTime() - start;
    
    log('Duration: ' + duration + 'ms');

    if (duration > get('maxDuration')) {
      // Log a message even when debug is false
      console.log('BackgroundCheck - Killed');
      removeClasses();
      destroy();
    }
  }


  /*
   * Set width and height of <canvas>
   */
  function resizeCanvas() {
    viewport = {
      left: 0,
      top: 0,
      right: document.body.clientWidth,
      bottom: window.innerHeight
    };

    canvas.width = document.body.clientWidth;
    canvas.height = window.innerHeight;
  }


  /*
   * Process px and %, discard anything else
   */
  function getValue(css, parent, delta) {
    var value;
    var percentage;

    if (css.indexOf('px') !== -1) {
      value = parseFloat(css);
    } else if (css.indexOf('%') !== -1) {
      value = parseFloat(css);
      percentage = value / 100;
      value = percentage * parent;

      if (delta) {
        value -= delta * percentage;
      }
    } else {
      value = parent;
    }

    return value;
  }


  /*
   * Calculate top, left, width and height
   * using the object's CSS
   */
  function calculateAreaFromCSS(obj) {
    var css = window.getComputedStyle(obj.el);

    // Force no-repeat and padding-box
    obj.el.style.backgroundRepeat = 'no-repeat';
    obj.el.style.backgroundOrigin = 'padding-box';

    // Background Size
    var size = css.backgroundSize.split(' ');
    var width = size[0];
    var height = size[1] === undefined ? 'auto' : size[1];

    var parentRatio = obj.el.clientWidth / obj.el.clientHeight;
    var imgRatio = obj.img.naturalWidth / obj.img.naturalHeight;

    if (width === 'cover') {

      if (parentRatio >= imgRatio) {
        width = '100%';
        height = 'auto';
      } else {
        width = 'auto';
        size[0] = 'auto';
        height = '100%';
      }

    } else if (width === 'contain') {

      if (1 / parentRatio < 1 / imgRatio) {
        width = 'auto';
        size[0] = 'auto';
        height = '100%';
      } else {
        width = '100%';
        height = 'auto';
      }
    }

    if (width === 'auto') {
      width = obj.img.naturalWidth;
    } else {
      width = getValue(width, obj.el.clientWidth);
    }

    if (height === 'auto') {
      height = (width / obj.img.naturalWidth) * obj.img.naturalHeight;
    } else {
      height = getValue(height, obj.el.clientHeight);
    }

    if (size[0] === 'auto' && size[1] !== 'auto') {
      width = (height / obj.img.naturalHeight) * obj.img.naturalWidth;
    }

    var position = css.backgroundPosition;

    // Fix inconsistencies between browsers
    if (position === 'top') {
      position = '50% 0%';
    } else if (position === 'left') {
      position = '0% 50%';
    } else if (position === 'right') {
      position = '100% 50%';
    } else if (position === 'bottom') {
      position = '50% 100%';
    } else if (position === 'center') {
      position = '50% 50%';
    }

    position = position.split(' ');

    var x;
    var y;

    // Two-value syntax vs Four-value syntax
    if (position.length === 4) {
      x = position[1];
      y = position[3];
    } else {
      x = position[0];
      y = position[1];
    }

    // Use a default value
    y = y || '50%';

    // Background Position
    x = getValue(x, obj.el.clientWidth, width);
    y = getValue(y, obj.el.clientHeight, height);

    // Take care of ex: background-position: right 20px bottom 20px;
    if (position.length === 4) {

      if (position[0] === 'right') {
        x = obj.el.clientWidth - obj.img.naturalWidth - x;
      }

      if (position[2] === 'bottom') {
        y = obj.el.clientHeight - obj.img.naturalHeight - y;
      }
    }

    x += obj.el.getBoundingClientRect().left;
    y += obj.el.getBoundingClientRect().top;

    return {
      left: Math.floor(x),
      right: Math.floor(x + width),
      top: Math.floor(y),
      bottom: Math.floor(y + height),
      width: Math.floor(width),
      height: Math.floor(height)
    };
  }


  /*
   * Get Bounding Client Rect
   */
  function getArea(obj) {
    var area;
    var image;
    var parent;

    if (obj.nodeType) {
      var rect = obj.getBoundingClientRect();

      // Clone ClientRect for modification purposes
      area = {
        left: rect.left,
        right: rect.right,
        top: rect.top,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height
      };

      parent = obj.parentNode;
      image = obj;
    } else {
      area = calculateAreaFromCSS(obj);
      parent = obj.el;
      image = obj.img;
    }

    parent = parent.getBoundingClientRect();

    area.imageTop = 0;
    area.imageLeft = 0;
    area.imageWidth = image.naturalWidth;
    area.imageHeight = image.naturalHeight;

    var ratio = area.imageHeight / area.height;
    var delta;

    // Stay within the parent's boundary
    if (area.top < parent.top) {
      delta = parent.top - area.top;
      area.imageTop = ratio * delta;
      area.imageHeight -= ratio * delta;
      area.top += delta;
      area.height -= delta;
    }

    if (area.left < parent.left) {
      delta = parent.left - area.left;
      area.imageLeft += ratio * delta;
      area.imageWidth -= ratio * delta;
      area.width -= delta;
      area.left += delta;
    }

    if (area.bottom > parent.bottom) {
      delta = area.bottom - parent.bottom;
      area.imageHeight -= ratio * delta;
      area.height -= delta;
    }

    if (area.right > parent.right) {
      delta = area.right - parent.right;
      area.imageWidth -= ratio * delta;
      area.width -= delta;
    }

    area.imageTop = Math.floor(area.imageTop);
    area.imageLeft = Math.floor(area.imageLeft);
    area.imageHeight = Math.floor(area.imageHeight);
    area.imageWidth = Math.floor(area.imageWidth);

    return area;
  }


  /*
   * Render image on canvas
   */
  function drawImage(image) {
    var area = getArea(image);

    image = image.nodeType ? image : image.img;

    if (area.imageWidth > 0 && area.imageHeight > 0 && area.width > 0 && area.height > 0) {
      context.drawImage(image,
                        area.imageLeft, area.imageTop, area.imageWidth, area.imageHeight,
                        area.left, area.top, area.width, area.height);
    } else {
      log('Skipping image - ' + image.src + ' - area too small');
    }
  }


  /*
   * Add/remove classes
   */
  function classList(node, name, mode) {
    var className = node.className;

    switch (mode) {
    case 'add':
      className += ' ' + name;
      break;
    case 'remove':
      var pattern = new RegExp('(?:^|\\s)' + name + '(?!\\S)', 'g');
      className = className.replace(pattern, '');
      break;
    }

    node.className = className.trim();
  }


  /*
   * Remove classes from element or
   * their parents, depending on checkParent
   */
  function removeClasses(el) {
    var targets = el ? [el] : get('targets');
    var target;

    for (var t = 0; t < targets.length; t++) {
      target = targets[t];
      target = get('changeParent') ? target.parentNode : target;
      
      classList(target, get('classes').light, 'remove');
      classList(target, get('classes').dark, 'remove');
      classList(target, get('classes').complex, 'remove');
    }
  }


  /*
   * Calculate average pixel brightness of a region 
   * and add 'light' or 'dark' accordingly
   */
  function calculatePixelBrightness(target) {
    var dims = target.getBoundingClientRect();
    var left = dims.left;
    var top = dims.top;
    var width = dims.width;
    var height = dims.height;
    var brightness;
    var data;
    var pixels = 0;
    var delta;
    var deltaSqr = 0;
    var mean = 0;
    var variance;
    var minOverlap = 0;
    var mask = get('mask');

    // Ignore pixels outside the viewport.
    if (left < viewport.left) {
      width = width - (viewport.left - left);
      left = viewport.left;
    }
    if (left + width > viewport.right) {
      width = viewport.right - left;
    }
    if (top < viewport.top) {
      height = height - (viewport.top - top);
      top = viewport.top;
    }
    if (top + height > viewport.bottom) {
      height = viewport.bottom - top;
    }

    if (width > 0 && height > 0) {
      removeClasses(target);

      target = get('changeParent') ? target.parentNode : target;
      data = context.getImageData(left, top, width, height).data;

      for (var p = 0; p < data.length; p += 4) {

        if (data[p] === mask.r && data[p + 1] === mask.g && data[p + 2] === mask.b) {
          minOverlap++;
        } else {
          pixels++;
          brightness = (0.2126 * data[p]) + (0.7152 * data[p + 1]) + (0.0722 * data[p + 2]);
          delta = brightness - mean;
          deltaSqr += delta * delta;
          mean = mean + delta / pixels;
        }
      }

      if (minOverlap <= (data.length / 4) * (1 - (get('minOverlap') / 100))) {
        variance = Math.sqrt(deltaSqr / pixels) / 255;
        mean = mean / 255;
        log('Target: ' + target.className +  ' lum: ' + mean + ' var: ' + variance);
        classList(target, mean <= (get('threshold') / 100) ? get('classes').dark : get('classes').light, 'add');

        if (variance > get('minComplexity') / 100) {
          classList(target, get('classes').complex, 'add');
        }
      }
    }
  }


  /*
   * Test if a is within b's boundary
   */
  function isInside(a, b) {
    a = (a.nodeType ? a : a.el).getBoundingClientRect();
    b = b === viewport ? b : (b.nodeType ? b : b.el).getBoundingClientRect();

    return !(a.right < b.left || a.left > b.right || a.top > b.bottom || a.bottom < b.top);
  }


  /*
   * Process all targets (checkTarget is undefined)
   * or a single target (checkTarget is a previously set target)
   *
   * When not all images are loaded, checkTarget is an image
   * to avoid processing all targets multiple times
   */
  function processTargets(checkTarget) {
    var start = new Date().getTime();
    var mode = (checkTarget && (checkTarget.tagName === 'IMG' || checkTarget.img)) ? 'image' : 'targets';
    var found = checkTarget ? false : true;
    var total = get('targets').length;
    var target;

    for (var t = 0; t < total; t++) {
      target = get('targets')[t];

      if (isInside(target, viewport)) {
        if (mode === 'targets' && (!checkTarget || checkTarget === target)) {
          found = true;
          calculatePixelBrightness(target);
        } else if (mode === 'image' && isInside(target, checkTarget)) {
          calculatePixelBrightness(target);
        }
      }
    }

    if (mode === 'targets' && !found) {
      throw checkTarget + ' is not a target';
    }

    kill(start);
  }


  /*
   * Find the element's zIndex. Also checks
   * the zIndex of its parent
   */
  function getZIndex(el) {
    var calculate = function (el) {
      var zindex = 0;

      if (window.getComputedStyle(el).position !== 'static') {
        zindex = parseInt(window.getComputedStyle(el).zIndex, 10) || 0;

        // Reserve zindex = 0 for elements with position: static;
        if (zindex >= 0) {
          zindex++;
        }
      }

      return zindex;
    };

    var parent = el.parentNode;
    var zIndexParent = parent ? calculate(parent) : 0;
    var zIndexEl = calculate(el);

    return (zIndexParent * 100000) + zIndexEl;
  }


  /*
   * Check zIndexes
   */
  function sortImagesByZIndex(images) {
    var sorted = false;

    images.sort(function (a, b) {
      a = a.nodeType ? a : a.el;
      b = b.nodeType ? b : b.el;

      var pos = a.compareDocumentPosition(b);
      var reverse = 0;

      a = getZIndex(a);
      b = getZIndex(b);

      if (a > b) {
        sorted = true;
      }

      // Reposition if zIndex is the same but the elements are not
      // sorted according to their document position
      if (a === b && pos === 2) {
        reverse = 1;
      } else if (a === b && pos === 4) {
        reverse = -1;
      }

      return reverse || a - b;
    });

    log('Sorted: ' + sorted);

    if (sorted) {
      log(images);
    }

    return sorted;
  }


  /*
   * Main function
   */
  function check(target, avoidClear, imageLoaded) {

    if (supported) {
      var mask = get('mask');

      log('--- BackgroundCheck ---');
      log('onLoad event: ' + (imageLoaded && imageLoaded.src));

      if (avoidClear !== true) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = 'rgb(' + mask.r + ', ' + mask.g + ', ' + mask.b + ')';
        context.fillRect(0, 0, canvas.width, canvas.height);
      }

      var processImages = imageLoaded ? [imageLoaded] : get('images');
      var sorted = sortImagesByZIndex(processImages);

      var image;
      var imageNode;
      var loading = false;

      for (var i = 0; i < processImages.length; i++) {
        image = processImages[i];

        if (isInside(image, viewport)) {
          imageNode = image.nodeType ? image : image.img;

          if (imageNode.naturalWidth === 0) {
            loading = true;
            log('Loading... ' + image.src);

            imageNode.removeEventListener('load', check);

            if (sorted) {
              // Sorted -- redraw all images
              imageNode.addEventListener('load', check.bind(null, null, false, null));
            } else {
              // Not sorted -- just draw one image
              imageNode.addEventListener('load', check.bind(null, target, true, image));
            }
          } else {
            log('Drawing: ' + image.src);
            drawImage(image);
          }
        }
      }

      if (!imageLoaded && !loading) {
        processTargets(target);
      } else if (imageLoaded) {
        processTargets(imageLoaded);
      }
    }
  }


  /*
   * Throttle events
   */
  function throttle(callback) {

    if (get('windowEvents') === true) {

      if (throttleDelay) {
        clearTimeout(throttleDelay);
      }

      throttleDelay = setTimeout(callback, 200);
    }
  }


  /*
   * Setter
   */
  function set(property, newValue) {

    if (attrs[property] === undefined) {
      throw 'Unknown property - ' + property;
    } else if (newValue === undefined) {
      throw 'Missing value for ' + property;
    }

    if (property === 'targets' || property === 'images') {

      try {
        newValue = getElements(property === 'images' && !newValue ? 'img' : newValue, property === 'images' ? true : false);
      } catch (err) {
        newValue = [];
        throw err;
      }
    } else {
      checkType(newValue, typeof attrs[property]);
    }

    removeClasses();
    attrs[property] = newValue;
    check();

    if (property === 'debugOverlay') {
      showDebugOverlay();
    }
  }


  /*
   * Getter
   */
  function get(property) {

    if (attrs[property] === undefined) {
      throw 'Unknown property - ' + property;
    }

    return attrs[property];
  }


  /*
   * Get position and size of all images.
   * Used for testing purposes
   */
  function getImageData() {
    var images = get('images');
    var area;
    var data = [];

    for (var i = 0; i < images.length; i++) {
      area = getArea(images[i]);
      data.push(area);
    }

    return data;
  }


  return {
    /*
     * Init and destroy
     */
    init: init,
    destroy: destroy,

    /*
     * Expose main function
     */
    refresh: check,

    /*
     * Setters and getters
     */
    set: set,
    get: get,

    /*
     * Return image data
     */
    getImageData: getImageData
  };

}));