238 lines
7.7 KiB
JavaScript
238 lines
7.7 KiB
JavaScript
/*
|
|
* 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;
|
|
})); |