openaustralia/publicwhip

/*
* onMediaQuery
* http://springload.co.nz/love-the-web/
*
* Copyright 2012, Springload
* Released under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Date: Fri 24 October, 2012
*/
;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(function () {
      // Also create a global in case some scripts
      // that are loaded still are looking for
      // a global even when an AMD loader is in use.
      return (root.MQ = factory(root, root.MQ || {}));
    });
  } else {
    // Browser globals
    root.MQ = factory(root, root.MQ || {});
  }
}(this, function(mq) {
  /**
  * Initialises the MQ object and sets the initial media query callbacks
  * @returns Void(0)
  */
  mq.init = function(query_array) {
    // Container for all callbacks registered with the plugin
    this.callbacks = [];
    this.context = ''; //current active query
    this.new_context = ''; //current active query to be read inside callbacks, as this.context won't be set when they're called!
    if (typeof(query_array) !== 'undefined' ) {
      for (i = 0; i < query_array.length; i++) {
        var r = this.addQuery(query_array[i]);
      }
    }
    // Add a listener to the window.resize event, pass mq/self as the scope.
    this.addEvent(window, 'resize', mq.listenForChange, mq);
    // Figure out which query is active on load.
    this.listenForChange();
  };
  /**
  * Binds to the window.onResize and checks for media query changes
  * @returns Void(0)
  */
  mq.listenForChange = function() {
    var query_string;
    // Get the value of html { font-family } from the element style.
    if (document.documentElement.currentStyle) {
      query_string = document.documentElement.currentStyle["fontFamily"];
    }
    if (window.getComputedStyle) {
      query_string = window.getComputedStyle(document.documentElement,null).getPropertyValue('font-family');
    }
    // No support for CSS enumeration? Return and avoid errors.
    if (query_string === null) return;
    // Android browsers place a "," after an item in the font family list.
    // Most browsers either single or double quote the string.
    query_string = query_string.replace(/['",]/g, '');
    if (query_string !== this.context) {
      this.new_context = query_string;
      this.triggerCallbacks(this.context, 'unmatch');
      this.triggerCallbacks(this.new_context, 'match');
    }
    this.context = this.new_context;
  };
  /**
  * Attach a new query to test.
  * @param query_object {
  * context: ['some_media_query','some_other_media_query'],
  * call_for_each_context: true,
  * callback: function() {
  * //something awesome
  * }
  * }
  * @returns A reference to the query_object that was added
  */
  mq.addQuery = function(query_object) {
    if (query_object === null || query_object === undefined) return;
    this.callbacks.push(query_object);
    // If the context is passed as a string, turn it into an array (for unified approach elsewhere in the code)
    if (typeof(query_object.context) == "string") {
      query_object.context = [query_object.context];
    }
    // See if "call_for_each_context" is set, if not, set a default (for unified approach elsewhere in the code)
    if (typeof(query_object.call_for_each_context) !== "boolean") {
      query_object.call_for_each_context = true; // Default
    }
    // Fire the added callback if it matches the current context
    if (this.context !== '' && this._inArray(this.context, query_object.context)) {
      query_object.match();
    }
    return this.callbacks[ this.callbacks.length - 1];
  };
  /**
  * Remove a query_object by reference.
  * @returns Void(0)
  */
  mq.removeQuery = function(query_object) {
    if (query_object === null || query_object === undefined) return;
    var match = -1;
    while ((match = mq._indexOf(query_object,this.callbacks)) > -1) {
      this.callbacks.splice(match, 1);
    }
  };
  /**
  * Loop through the stored callbacks and execute
  * the ones that are bound to the current context.
  * @returns Void(0)
  */
  mq.triggerCallbacks = function(size, key) {
    var i, callback_function, call_for_each_context;
    for (i = 0; i < this.callbacks.length; i++) {
      // Don't call for each context?
      if(this.callbacks[i].call_for_each_context === false) {
        if ((key === 'match' && this._inArray(this.context, this.callbacks[i].context)) ||
          (key === 'unmatch' && this._inArray(this.new_context, this.callbacks[i].context))) {
            // Was previously called, and we don't want to call it for each context
            continue;
          }
        }
        callback_function = this.callbacks[i][key];
        if (this._inArray(size, this.callbacks[i].context) && callback_function !== undefined) {
          callback_function();
        }
      }
    };
    /**
    * Swiss Army Knife event binding, in lieu of jQuery.
    * @returns Void(0)
    */
    mq.addEvent = function(elem, type, eventHandle, eventContext) {
      if (elem === null || elem === undefined) return;
      // If the browser supports event listeners, use them.
      if (elem.addEventListener) {
        elem.addEventListener(type, function() { eventHandle.call(eventContext); }, false);
      } else if (elem.attachEvent ) {
        elem.attachEvent("on" + type, function() { eventHandle.call(eventContext); });
        // Otherwise, replace the current thing bound to on[whatever]! Consider refactoring.
      } else {
        elem["on" + type] = function() { eventHandle.call(eventContext); };
      }
    };
    /**
    * Function to return the mediaquery's previous context
    * @returns String returns the current mediaquery's context
    */
    mq.getPreviousContext = function()
    {
      return this.context;
    };
    /**
    * Function to return the mediaquery's current context
    * @returns String returns the current mediaquery's context
    */
    mq.getContext = function()
    {
      return this.new_context;
    };
    /**
    * Internal helper function that checks wether "needle" occurs in "haystack"
    * @param needle Mixed Value to look for in haystack array
    * @param haystack Array Haystack array to search in
    * @returns Boolan True if the needle occurs, false otherwise
    */
    mq._inArray = function(needle, haystack)
    {
      var length = haystack.length;
      for(var i = 0; i < length; i++) {
        if(haystack[i] == needle) return true;
      }
      return false;
    };
    /**
    * IE8 do not supports Array.properties.indexOf
    * copy from jQuery.
    * in lieu of jQuery.
    * @returns int
    */
    mq._indexOf = function( elem, arr, i )
    {
      var len;
      if ( arr ) {
        if ( arr.indexOf ) {
          return arr.indexOf( elem, i );
        }
        len = arr.length;
        i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
        for ( ; i < len; i++ ) {
          // Skip accessing in sparse arrays
          if ( i in arr && arr[ i ] === elem ) {
            return i;
          }
        }
      }
      return -1;
    }
    // Expose the functions.
    return mq;
  }));