jquery.matchMedia.js

jQuery adapter for matchMedia (https://developer.mozilla.org/cs/docs/Web/API/Window/matchMedia)

Current browser support: https://caniuse.com/#search=matchMedia

jquery.matchMedia.js has two versions
1. dist/jquery.matchMedia.js DEMO HERE
2. dist/jquery.matchMedia.polyfill.js - include polyfill (https://github.com/paulirish/matchMedia.js/) DEMO HERE

NPM

npm install jquery-matchmedia --save

options

* Rule - string - media queries rule or name. Example: '(max-width: 40em)' or 'md'.
* HandlerTrue - function - function is calling, if rule is true.
* HandlerFalse - function - function is calling, if rule is false.
* Listener - booleans - default is true - addListener on resize

You can call function in two ways

$3

``js
$('.element').mq(rule, handlerTrue, handlerFalse);
`
Example
`js
$('.element').mq('(min-width: 40em)', function () {
$(this).css('color', 'green').text('true');
}, function () {
$(this).css('color', 'red').text('false');
});
`

OR

$3

`js
$.mq.action(rule, handlerTrue, handlerFalse);
`
Example
`js
$.mq.action('(min-width: 40em)', function () {
console.log('true');
}, function () {
console.log('false');
});
`

$3

In css you need to write json with breakpoints to html:before {content '-->>HERE<<--'}:

`css
html:before {
display: none;
content: '{"xs" : "(max-width: 47.9375em)", "sm": "(min-width: 48em) and (max-width: 61.9375em)", "md": "(min-width: 62em) and (max-width: 74.9375em)", "lg": "(min-width: 75em)"}';
}
`

Now you can call rules by names (xs, sm, md, lg).

This can be use after $(document).ready().

`js
$(document).ready(function () {
$('.element').mq('md', function () {
$(this).css('color', 'green').text('md true');
}, function () {
$(this).css('color', 'red').text('md false');
});

$.mq.action('sm', function () {
console.log('sm true');
}, function () {
console.log('sm false');
});
});
``

Object with breakpoints rules is return $.mq.getBreakpoints().

For inspiration I thank to Jan Semilský and Bohumil Jahoda.