44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
/** Collection of callback functions for media querys. */
|
|
var listeners = {};
|
|
/**
|
|
* Bind functions to a matchMedia listener (subscriber).
|
|
*
|
|
* @param {string|number} query Media query to match or number for min-width.
|
|
* @param {function} yes Function to invoke when the media query matches.
|
|
* @param {function} no Function to invoke when the media query doesn't match.
|
|
*/
|
|
export function add(query, yes, no) {
|
|
if (typeof query == 'number') {
|
|
query = '(min-width: ' + query + 'px)';
|
|
}
|
|
listeners[query] = listeners[query] || [];
|
|
listeners[query].push({ yes: yes, no: no });
|
|
}
|
|
/**
|
|
* Initialize the matchMedia listener.
|
|
*/
|
|
export function watch() {
|
|
var _loop_1 = function (query) {
|
|
var mqlist = window.matchMedia(query);
|
|
fire(query, mqlist);
|
|
mqlist.onchange = function (evnt) {
|
|
fire(query, mqlist);
|
|
};
|
|
};
|
|
for (var query in listeners) {
|
|
_loop_1(query);
|
|
}
|
|
}
|
|
/**
|
|
* Invoke the "yes" or "no" function for a matchMedia listener (publisher).
|
|
*
|
|
* @param {string} query Media query to check for.
|
|
* @param {MediaQueryList} mqlist Media query list to check with.
|
|
*/
|
|
export function fire(query, mqlist) {
|
|
var fn = mqlist.matches ? 'yes' : 'no';
|
|
for (var m = 0; m < listeners[query].length; m++) {
|
|
listeners[query][m][fn]();
|
|
}
|
|
}
|