root / drupal7 / sites / all / themes / adminimal_theme / js / jRespond.js @ b6b9edaa
1 | 87dbc3bf | Benjamin Luce | /*! jRespond.js v 0.10 | Author: Jeremy Fields [jeremy.fields@viget.com], 2013 | License: MIT */
|
---|---|---|---|
2 | |||
3 | // Universal Module Definition
|
||
4 | ;(function (window, name, fn) {
|
||
5 | // Node module pattern
|
||
6 | if (typeof module === "object" && module && typeof module.exports === "object") { |
||
7 | module.exports = fn; |
||
8 | } else {
|
||
9 | // browser
|
||
10 | window[name] = fn; |
||
11 | |||
12 | // AMD definition
|
||
13 | if (typeof define === "function" && define.amd) { |
||
14 | define(name, [], function (module) {
|
||
15 | return fn;
|
||
16 | }); |
||
17 | } |
||
18 | } |
||
19 | }(this, 'jRespond', function(win,doc,undefined) { |
||
20 | |||
21 | 'use strict';
|
||
22 | |||
23 | return function(breakpoints) { |
||
24 | |||
25 | // array for registered functions
|
||
26 | var mediaListeners = [];
|
||
27 | |||
28 | // array that corresponds to mediaListeners and holds the current on/off state
|
||
29 | var mediaInit = [];
|
||
30 | |||
31 | // array of media query breakpoints; adjust as needed
|
||
32 | var mediaBreakpoints = breakpoints;
|
||
33 | |||
34 | // store the current breakpoint
|
||
35 | var curr = ''; |
||
36 | |||
37 | // the previous breakpoint
|
||
38 | var prev = ''; |
||
39 | |||
40 | // window resize event timer stuff
|
||
41 | var resizeTimer;
|
||
42 | var resizeW = 0; |
||
43 | var resizeTmrFast = 100; |
||
44 | var resizeTmrSlow = 500; |
||
45 | var resizeTmrSpd = resizeTmrSlow;
|
||
46 | |||
47 | // cross browser window width
|
||
48 | var winWidth = function() { |
||
49 | |||
50 | var w = 0; |
||
51 | |||
52 | // IE
|
||
53 | if (typeof( window.innerWidth ) != 'number') { |
||
54 | |||
55 | if (!(document.documentElement.clientWidth === 0)) { |
||
56 | |||
57 | // strict mode
|
||
58 | w = document.documentElement.clientWidth; |
||
59 | } else {
|
||
60 | |||
61 | // quirks mode
|
||
62 | w = document.body.clientWidth; |
||
63 | } |
||
64 | } else {
|
||
65 | |||
66 | // w3c
|
||
67 | w = window.innerWidth; |
||
68 | } |
||
69 | |||
70 | return w;
|
||
71 | }; |
||
72 | |||
73 | // determine input type
|
||
74 | var addFunction = function(elm) { |
||
75 | if (elm.length === undefined) { |
||
76 | addToStack(elm); |
||
77 | } else {
|
||
78 | for (var i = 0; i < elm.length; i++) { |
||
79 | addToStack(elm[i]); |
||
80 | } |
||
81 | } |
||
82 | }; |
||
83 | |||
84 | // send media to the mediaListeners array
|
||
85 | var addToStack = function(elm) { |
||
86 | var brkpt = elm['breakpoint']; |
||
87 | var entr = elm['enter'] || undefined; |
||
88 | |||
89 | // add function to stack
|
||
90 | mediaListeners.push(elm); |
||
91 | |||
92 | // add corresponding entry to mediaInit
|
||
93 | mediaInit.push(false);
|
||
94 | |||
95 | if (testForCurr(brkpt)) {
|
||
96 | if (entr !== undefined) { |
||
97 | entr.call(null, {entering : curr, exiting : prev}); |
||
98 | } |
||
99 | mediaInit[(mediaListeners.length - 1)] = true; |
||
100 | } |
||
101 | }; |
||
102 | |||
103 | // loops through all registered functions and determines what should be fired
|
||
104 | var cycleThrough = function() { |
||
105 | |||
106 | var enterArray = [];
|
||
107 | var exitArray = [];
|
||
108 | |||
109 | for (var i = 0; i < mediaListeners.length; i++) { |
||
110 | var brkpt = mediaListeners[i]['breakpoint']; |
||
111 | var entr = mediaListeners[i]['enter'] || undefined; |
||
112 | var exit = mediaListeners[i]['exit'] || undefined; |
||
113 | |||
114 | if (brkpt === '*') { |
||
115 | if (entr !== undefined) { |
||
116 | enterArray.push(entr); |
||
117 | } |
||
118 | if (exit !== undefined) { |
||
119 | exitArray.push(exit); |
||
120 | } |
||
121 | } else if (testForCurr(brkpt)) { |
||
122 | if (entr !== undefined && !mediaInit[i]) { |
||
123 | enterArray.push(entr); |
||
124 | } |
||
125 | mediaInit[i] = true;
|
||
126 | } else {
|
||
127 | if (exit !== undefined && mediaInit[i]) { |
||
128 | exitArray.push(exit); |
||
129 | } |
||
130 | mediaInit[i] = false;
|
||
131 | } |
||
132 | } |
||
133 | |||
134 | var eventObject = {
|
||
135 | entering : curr,
|
||
136 | exiting : prev
|
||
137 | }; |
||
138 | |||
139 | // loop through exit functions to call
|
||
140 | for (var j = 0; j < exitArray.length; j++) { |
||
141 | exitArray[j].call(null, eventObject);
|
||
142 | } |
||
143 | |||
144 | // then loop through enter functions to call
|
||
145 | for (var k = 0; k < enterArray.length; k++) { |
||
146 | enterArray[k].call(null, eventObject);
|
||
147 | } |
||
148 | }; |
||
149 | |||
150 | // checks for the correct breakpoint against the mediaBreakpoints list
|
||
151 | var returnBreakpoint = function(width) { |
||
152 | |||
153 | var foundBrkpt = false; |
||
154 | |||
155 | // look for existing breakpoint based on width
|
||
156 | for (var i = 0; i < mediaBreakpoints.length; i++) { |
||
157 | |||
158 | // if registered breakpoint found, break out of loop
|
||
159 | if (width >= mediaBreakpoints[i]['enter'] && width <= mediaBreakpoints[i]['exit']) { |
||
160 | foundBrkpt = true;
|
||
161 | |||
162 | break;
|
||
163 | } |
||
164 | } |
||
165 | |||
166 | // if breakpoint is found and it's not the current one
|
||
167 | if (foundBrkpt && curr !== mediaBreakpoints[i]['label']) { |
||
168 | prev = curr; |
||
169 | curr = mediaBreakpoints[i]['label'];
|
||
170 | |||
171 | // run the loop
|
||
172 | cycleThrough(); |
||
173 | |||
174 | // or if no breakpoint applies
|
||
175 | } else if (!foundBrkpt && curr !== '') { |
||
176 | curr = '';
|
||
177 | |||
178 | // run the loop
|
||
179 | cycleThrough(); |
||
180 | } |
||
181 | |||
182 | }; |
||
183 | |||
184 | // takes the breakpoint/s arguement from an object and tests it against the current state
|
||
185 | var testForCurr = function(elm) { |
||
186 | |||
187 | // if there's an array of breakpoints
|
||
188 | if (typeof elm === 'object') { |
||
189 | if (elm.join().indexOf(curr) >= 0) { |
||
190 | return true; |
||
191 | } |
||
192 | |||
193 | // if the string is '*' then run at every breakpoint
|
||
194 | } else if (elm === '*') { |
||
195 | return true; |
||
196 | |||
197 | // or if it's a single breakpoint
|
||
198 | } else if (typeof elm === 'string') { |
||
199 | if (curr === elm) {
|
||
200 | return true; |
||
201 | } |
||
202 | } |
||
203 | }; |
||
204 | |||
205 | // self-calling function that checks the browser width and delegates if it detects a change
|
||
206 | var checkResize = function() { |
||
207 | |||
208 | // get current width
|
||
209 | var w = winWidth();
|
||
210 | |||
211 | // if there is a change speed up the timer and fire the returnBreakpoint function
|
||
212 | if (w !== resizeW) {
|
||
213 | resizeTmrSpd = resizeTmrFast; |
||
214 | |||
215 | returnBreakpoint(w); |
||
216 | |||
217 | // otherwise keep on keepin' on
|
||
218 | } else {
|
||
219 | resizeTmrSpd = resizeTmrSlow; |
||
220 | } |
||
221 | |||
222 | resizeW = w; |
||
223 | |||
224 | // calls itself on a setTimeout
|
||
225 | setTimeout(checkResize, resizeTmrSpd); |
||
226 | }; |
||
227 | checkResize(); |
||
228 | |||
229 | // return
|
||
230 | return {
|
||
231 | addFunc: function(elm) { addFunction(elm); }, |
||
232 | getBreakpoint: function() { return curr; } |
||
233 | }; |
||
234 | |||
235 | }; |
||
236 | |||
237 | }(this,this.document))); |