Created
October 30, 2012 11:11
-
-
Save codekipple/3979639 to your computer and use it in GitHub Desktop.
running js functions on media query breakpoints
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* module: breakpoints | |
* description: module for working with breakpoints, | |
* used within other modules | |
---------------------------------------- */ | |
var WIRED = (function (module) { | |
module.breakpoint = function(){ | |
var actions = {}; | |
var lastCheck; // stores the breakpoint last checked, only need to run actions once a breakpoint change accours | |
var comparisons = { // comparison lookup table | |
'<': function(a, b) { return a < b; }, | |
'<=': function(a, b) { return a <= b; }, | |
'>': function(a, b) { return a > b; }, | |
'>=': function(a, b) { return a >= b; }, | |
'===': function(a, b) { return a === b; }, | |
'!==': function(a, b) { return a !== b; } | |
}; | |
$(document).ready(function (){ | |
// run on every window resize | |
$(window).resize(function(){ runActions(); }); | |
}); | |
/* | |
* gets the breakpoint which is being used by the css, see the link | |
* below for an explanation of the technique | |
* http://adactio.com/journal/5429/ | |
*/ | |
function getBreakpoint(){ | |
var breakpoint; | |
/* | |
* can't get ie8 to retreive :after or :before content | |
*/ | |
if ('getComputedStyle' in window){ | |
breakpoint = window.getComputedStyle(document.body,':after').getPropertyValue('content'); | |
breakpoint = breakpoint.replace( /"/g, ''); | |
breakpoint = parseInt(breakpoint.replace( /point/g, '')); | |
} | |
if(!breakpoint){ | |
breakpoint = 0; | |
} | |
return breakpoint; | |
} | |
/* | |
* public function for external code to add actions | |
*/ | |
function addActions(newActions){ | |
$.extend(actions, newActions); | |
runActions(); | |
} | |
/* | |
* loop through all the actions and run any necessary ones | |
*/ | |
function runActions(){ | |
var breakpoint = getBreakpoint(); | |
var actionList = actions; | |
if(breakpoint !== false && breakpoint !== lastCheck){ | |
$.each(actions, function(index, action){ | |
/* | |
* action.activeState is used to avoid called a function when not needed | |
* without it a function maybe called when the breakpoint changes but the condition for the code may be true | |
* across multiple breakpoints so it may have already run | |
*/ | |
if(comparisons[action.compare](breakpoint, action.breakpoint)){ | |
if(!action.activeState){ | |
action.run(); | |
action.activeState = true; | |
} | |
}else{ | |
action.activeState = false; | |
} | |
}); | |
lastCheck = breakpoint; | |
} | |
} | |
// expose functions for public use | |
return{ | |
getBreakpoint : getBreakpoint, | |
addActions : addActions | |
} | |
}(); | |
return module; | |
}(WIRED || {})); | |
/* | |
* add required actions to the breakpoint module | |
*/ | |
var actions = [ | |
{ | |
breakpoint : 4, | |
compare : '<', | |
run : function(){ | |
compactedView() | |
} | |
}, | |
{ | |
breakpoint : 4, | |
compare : '>=', | |
run : function(){ | |
expandedView() | |
} | |
} | |
]; | |
module.breakpoint.addActions(actions); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment