JoshBarr/js-media-queries — pull request #11 by patocallaghan (2012-10-24 04:41:34+00:00)
Title: Added ability to fire callbacks on exiting breakpoints

Hey,

I really appreciate the work you've done with this plugin. Distinct from other plugins I like the fact you can define your breakpoints in one place, the CSS.

One feature I like from EnquireJS which you guys didn't have was the ability to fire callbacks when a breakpoint unmatches. For instance, a mobile menu may need different event listeners than a desktop view, so using `unmatch` you can unbind unneeded JS when you exit a breakpoint.

I"ve altered the `callbacks` key to use `match` and `unmatch` instead. I've also made sure this works for context ranges too so it will only trigger the match/unmatch when it moves from one range to another.

``` js
var queries = [
{
context: ['mobile', 'tablet'],
call_for_each_context: false,
match: function() {
console.log('Bind Small!');
},
unmatch: function () {
console.log('Unbind Small!');
}
},
{
context: ['desktop', 'widescreen'],
call_for_each_context: false,
match: function() {
console.log('Bind Large!');
},
unmatch: function () {
console.log('Unbind Large!');
}
},
{
context: 'mobile',
match: function() {
console.log('Bind Mobile!');
},
unmatch: function () {
console.log('Unbind Mobile!');
}
},
{
context: 'tablet',
match: function() {
console.log('Bind Tablet!');
},
unmatch: function () {
console.log('Unbind Tablet!');
}
},
{
context: 'desktop',
match: function() {
console.log('Bind Desktop!');
},
unmatch: function () {
console.log('Unbind Desktop!');
}
},
{
context: 'widescreen',
match: function() {
console.log('Bind Widescreen!');
},
unmatch: function () {
console.log('Unbind Widescreen!');
}
}
];
```
I"ve created a simple demo here if you want to have a gander at how it works:
http://codepen.io/patocallaghan/pen/jtDAL

I also added two convenience methods for getting the `this.context` and the `this.new_context` as these could be useful.

If you want me to re-jig or rewrite anything let me know.

Thanks,
Pat