root / drupal7 / sites / all / themes / adaptivetheme / at_core / scripts / onmediaquery.js @ a08833bd
1 | 85ad3d82 | Assos Assos | /*
|
---|---|---|---|
2 | * onMediaQuery
|
||
3 | * http://springload.co.nz/love-the-web/
|
||
4 | *
|
||
5 | * Copyright 2012, Springload
|
||
6 | * Released under the MIT license.
|
||
7 | * http://www.opensource.org/licenses/mit-license.php
|
||
8 | *
|
||
9 | * Date: Fri 18 May, 2012
|
||
10 | */
|
||
11 | |||
12 | var MQ = (function(mq) { |
||
13 | var mq = mq || {};
|
||
14 | |||
15 | /**
|
||
16 | * Initialises the MQ object and sets the initial media query callbacks
|
||
17 | * @returns Void(0)
|
||
18 | */
|
||
19 | mq.init = function(query_array) { |
||
20 | |||
21 | // Container for all callbacks registered with the plugin
|
||
22 | this.callbacks = [];
|
||
23 | this.context = ''; //current active query |
||
24 | this.new_context = ''; //current active query to be read inside callbacks, as this.context won't be set when they're called! |
||
25 | |||
26 | if (typeof(query_array) !== 'undefined' ) { |
||
27 | for (i = 0; i < query_array.length; i++) { |
||
28 | var r = this.addQuery(query_array[i]); |
||
29 | } |
||
30 | } |
||
31 | |||
32 | // Add a listener to the window.resize event, pass mq/self as the scope.
|
||
33 | this.addEvent(window, 'resize', mq.listenForChange, mq); |
||
34 | |||
35 | // Figure out which query is active on load.
|
||
36 | this.listenForChange();
|
||
37 | } |
||
38 | |||
39 | /**
|
||
40 | * Binds to the window.onResize and checks for media query changes
|
||
41 | * @returns Void(0)
|
||
42 | */
|
||
43 | mq.listenForChange = function() { |
||
44 | var body_after;
|
||
45 | |||
46 | // Get the value of html { font-family } from the element style.
|
||
47 | if (document.documentElement.currentStyle) {
|
||
48 | query_string = document.documentElement.currentStyle["fontFamily"];
|
||
49 | } |
||
50 | |||
51 | if (window.getComputedStyle) {
|
||
52 | query_string = window.getComputedStyle(document.documentElement).getPropertyValue('font-family');
|
||
53 | } |
||
54 | |||
55 | // No support for CSS enumeration? Return and avoid errors.
|
||
56 | if (query_string == null) return; |
||
57 | |||
58 | // Android browsers place a "," after an item in the font family list.
|
||
59 | // Most browsers either single or double quote the string.
|
||
60 | query_string = query_string.replace(/['",]/g, ''); |
||
61 | |||
62 | if (query_string !== this.context) { |
||
63 | this.new_context = query_string;
|
||
64 | this.triggerCallbacks(this.new_context); |
||
65 | } |
||
66 | |||
67 | this.context = this.new_context; |
||
68 | } |
||
69 | |||
70 | /**
|
||
71 | * Attach a new query to test.
|
||
72 | * @param query_object {
|
||
73 | * context: ['some_media_query','some_other_media_query'],
|
||
74 | * call_for_each_context: true,
|
||
75 | * callback: function() {
|
||
76 | * //something awesome
|
||
77 | * }
|
||
78 | * }
|
||
79 | * @returns A reference to the query_object that was added
|
||
80 | */
|
||
81 | mq.addQuery = function(query_object) { |
||
82 | if (query_object == null || query_object == undefined) return; |
||
83 | |||
84 | this.callbacks.push(query_object);
|
||
85 | |||
86 | // If the context is passed as a string, turn it into an array (for unified approach elsewhere in the code)
|
||
87 | if (typeof(query_object.context) == "string") { |
||
88 | query_object.context = [query_object.context]; |
||
89 | } |
||
90 | |||
91 | // See if "call_for_each_context" is set, if not, set a default (for unified approach elsewhere in the code)
|
||
92 | if (typeof(query_object.call_for_each_context) !== "boolean") { |
||
93 | query_object.call_for_each_context = true; // Default |
||
94 | } |
||
95 | |||
96 | // Fire the added callback if it matches the current context
|
||
97 | if (this.context != '' && this._inArray(this.context, query_object.context)) { |
||
98 | query_object.callback(); |
||
99 | } |
||
100 | |||
101 | return this.callbacks[ this.callbacks.length - 1]; |
||
102 | }; |
||
103 | |||
104 | /**
|
||
105 | * Remove a query_object by reference.
|
||
106 | * @returns Void(0)
|
||
107 | */
|
||
108 | mq.removeQuery = function(query_object) { |
||
109 | if (query_object == null || query_object == undefined) return; |
||
110 | |||
111 | var match = -1; |
||
112 | |||
113 | while ((match = this.callbacks.indexOf(query_object)) > -1) { |
||
114 | this.callbacks.splice(match, 1); |
||
115 | } |
||
116 | } |
||
117 | |||
118 | /**
|
||
119 | * Loop through the stored callbacks and execute
|
||
120 | * the ones that are bound to the current context.
|
||
121 | * @returns Void(0)
|
||
122 | */
|
||
123 | mq.triggerCallbacks = function(size) { |
||
124 | var i, callback_function, call_for_each_context;
|
||
125 | |||
126 | for (i = 0; i < this.callbacks.length; i++) { |
||
127 | |||
128 | // Don't call for each context?
|
||
129 | if (this.callbacks[i].call_for_each_context == false && this._inArray(this.context, this.callbacks[i].context)) { |
||
130 | // Was previously called, and we don't want to call it for each context
|
||
131 | continue;
|
||
132 | } |
||
133 | |||
134 | callback_function = this.callbacks[i].callback;
|
||
135 | if (this._inArray(size, this.callbacks[i].context) && callback_function !== undefined) { |
||
136 | callback_function(); |
||
137 | } |
||
138 | |||
139 | } |
||
140 | } |
||
141 | |||
142 | /**
|
||
143 | * Swiss Army Knife event binding, in lieu of jQuery.
|
||
144 | * @returns Void(0)
|
||
145 | */
|
||
146 | mq.addEvent = function(elem, type, eventHandle, eventContext) { |
||
147 | if (elem == null || elem == undefined) return; |
||
148 | // If the browser supports event listeners, use them.
|
||
149 | if (elem.addEventListener) {
|
||
150 | elem.addEventListener(type, function() { eventHandle.call(eventContext) }, false); |
||
151 | } else if (elem.attachEven ) { |
||
152 | elem.attachEvent("on" + type, function() { eventHandle.call(eventContext) }); |
||
153 | |||
154 | // Otherwise, replace the current thing bound to on[whatever]! Consider refactoring.
|
||
155 | } else {
|
||
156 | elem["on" + type] = function() { eventHandle.call(eventContext) }; |
||
157 | } |
||
158 | } |
||
159 | |||
160 | /**
|
||
161 | * Internal helper function that checks wether "needle" occurs in "haystack"
|
||
162 | * @param needle Mixed Value to look for in haystack array
|
||
163 | * @param haystack Array Haystack array to search in
|
||
164 | * @returns Boolan True if the needle occurs, false otherwise
|
||
165 | */
|
||
166 | mq._inArray = function(needle, haystack) |
||
167 | { |
||
168 | var length = haystack.length;
|
||
169 | for(var i = 0; i < length; i++) { |
||
170 | if(haystack[i] == needle) return true; |
||
171 | } |
||
172 | return false; |
||
173 | } |
||
174 | |||
175 | // Expose the functions.
|
||
176 | return mq;
|
||
177 | |||
178 | }(MQ || {})); |