backbone.mq
v1.2.0
Published
Backbone plugin to detect and listen to media queries.
Downloads
6
Readme
backbone.mq
Backbone plugin to detect and listen to media queries.
Usage
Setup
Create a new MQ object to get started.
import MQ from 'backbone.mq'
const mq = new MQ()
Then add your media queries you would like to use.
mq.add('desktop', 'only screen and (min-width:60em)')
Or add multiple media queries.
mq.add({
'desktop': 'screen and (min-width:60em)',
'mobile': 'handheld or screen and (max-width:59.99em)'
})
Or add your media queries when you initialize your MQ object.
const mq = new MQ({
'desktop': 'screen and (min-width:60em)',
'mobile': 'handheld or screen and (max-width:59.99em)'
})
You can also remove media queries.
mq.remove('mobile')
Detection
At any point you can see if your media query matches.
const isDesktop = mq.matches('desktop') // -> boolean
if (isDesktop) {
// Do some desktopy things
}
Alternatively this works too.
mq.matches('desktop', function() {
// Also do some desktopy things
})
Events
You can also listen for when a media query becomes matched or unmatched. The MQ object extends Backbone.Events, so enjoy making the most of it.
Events which are namespaced by :match
or :unmatch
are only triggered if the media query is matched or unmatched respectively.
mq.on('desktop', function (media) {
if (media.matches) {
// Do some desktopy things
} else {
// Or not
}
})
mq.once('mobile:match', function() {
// I'm on a phone!
})
backboneThing.listenTo(mq, 'desktop:unmatch', function() {
// Wait, we're not on a desktop any more? How did that happen?
})
mq.off('desktop')
Chainable
Most methods on MQ are chainable.
mq
.add({
'desktop': 'screen and (min-width:60em)',
'mobile': 'handheld or screen and (max-width:59.99em)'
})
.matches('desktop', function() { /* ... */ })
.once('mobile', function() { /* ... */ })
.remove('desktop')
Except mq.matches()
with a single parameter, which returns a boolean :wink:
Fallback
When matchMedia
or media queries isn't supported, MQ will fall back to a single media query. By default the first added media query will be used, but you're welcome to override it:
mq.fallback = 'mobile'; // Mobile first yo!
Compatibility
Backbone.MQ requires matchMedia
to work properly, so you might need a polyfill for older browsers.
License
MIT - see license