Permalink
Branch: master
Find file Copy path
65640d3 Oct 3, 2018
2 contributors

Users who have contributed to this file

@keanulee @e111077
29 lines (24 sloc) 1.21 KB
/**
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
/**
Utility method that calls a callback whenever a media-query matches in response
to the viewport size changing. The callback should take a boolean parameter
(with `true` meaning the media query is matched).
Example:
import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
installMediaQueryWatcher(`(min-width: 600px)`, (matches) => {
console.log(matches ? 'wide screen' : 'narrow sreen');
});
*/
export const installMediaQueryWatcher = (mediaQuery: string, layoutChangedCallback: (mediaQueryMatches: boolean) => void) => {
let mql = window.matchMedia(mediaQuery);
mql.addListener((e) => layoutChangedCallback(e.matches));
layoutChangedCallback(mql.matches);
};