diff --git a/src/layout/layout.js b/src/layout/layout.js index f7afa454d..b98f88584 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -139,11 +139,9 @@ return window.matchMedia(query); }; - var mediaQuery = MaterialLayout.prototype.matchMedia_( + MaterialLayout.screenSizeMediaQuery_ = MaterialLayout.prototype.matchMedia_( /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH)); - mediaQuery.onchange = screenSizeHandler; - - MaterialLayout.prototype.screenSizeMediaQuery_ = mediaQuery; + MaterialLayout.screenSizeMediaQuery_.onchange = screenSizeHandler; /** * Handles scrolling on the content. @@ -187,16 +185,22 @@ if (evt.keyCode === this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) { this.toggleDrawer(); - } +} }; /** - * Handles changes in screen size. - * - * @private + * @typedef {Object} Matchable + * @property {boolean} matches - Indicates if the media query condition is met. */ - function screenSizeHandler(e) { + /** + * Handles screen size changes by updating the layout and drawer elements + * based on the media query change event status. + * + * @param {Matchable} m - is any object that provides matches + * + */ + function screenSizeHandler(m) { // modified to query dependent elements rather than binding materialLayout to windows media query result var materialLayouts = document.querySelectorAll('.mdl-layout'); @@ -206,7 +210,7 @@ if (layout) { var drawerElement = layout.querySelector('.mdl-layout__drawer'); - if (e.matches) { + if (m.matches) { layout.classList.add('is-small-screen'); if (drawerElement) { drawerElement.setAttribute('aria-hidden', 'true'); @@ -450,7 +454,7 @@ // Keep an eye on screen size, and add/remove auxiliary class for styling // of small screens. - screenSizeHandler(this.screenSizeMediaQuery_); + screenSizeHandler(MaterialLayout.screenSizeMediaQuery_); // Initialize tabs, if any. if (this.header_ && this.tabBar_) {