root / drupal7 / sites / all / themes / adminimal_theme / js / jRespond.js @ 87dbc3bf
| 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))); |