From 49ff685dc6353138a22e5d1e7a9719287bdec222 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Wed, 17 Jul 2024 11:57:11 -0700 Subject: [PATCH 01/19] Fix mem leak --- src/layout/layout.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index a82c67307..27231deb7 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -191,21 +191,27 @@ * @private */ MaterialLayout.prototype.screenSizeHandler_ = function() { - if (this.screenSizeMediaQuery_.matches) { - this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN); - - if (this.drawer_) { - this.drawer_.setAttribute('aria-hidden', 'true'); - } + // modified to query dependent elements rather than binding materialLayout to windows media query result + var materialLayout = window.document.querySelector('.mdl-layout') + if (materialLayout){ + var drawerElement = materialLayout.querySelector('.mdl-layout__drawer'); + if (window.matchMedia('(max-width: 1024px)').matches) { + materialLayout.classList.add('is-small-screen'); + if (drawerElement) { + drawerElement.setAttribute('aria-hidden', 'true'); + } } else { - this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN); - // Collapse drawer (if any) when moving to a large screen size. - if (this.drawer_) { - this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); - this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); - - if (this.element_.classList.contains(this.CssClasses_.FIXED_DRAWER)) { - this.drawer_.setAttribute('aria-hidden', 'false'); + materialLayout.classList.remove('is-small-screen'); + // Collapse drawer (if any) when moving to a large screen size. + if (drawerElement) { + drawerElement.classList.remove('is-visible'); + var obfuscator = window.document.querySelector('mdl-layout__obfuscator') + if(obfuscator){ + obfuscator.classList.remove('is-visible'); + } + if (materialLayout.classList.contains('mdl-layout--fixed-drawer')) { + drawerElement.setAttribute('aria-hidden', 'false'); + } } } } @@ -433,9 +439,8 @@ // Keep an eye on screen size, and add/remove auxiliary class for styling // of small screens. - this.screenSizeMediaQuery_ = this.matchMedia_( - /** @type {string} */ (this.Constant_.MAX_WIDTH)); - this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)); + this.screenSizeMediaQuery_ = window.matchMedia('(max-width: 1024px)'); + this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_); this.screenSizeHandler_(); // Initialize tabs, if any. From bf8251b23f1472d25c2bca0a4191b162c1f0cd74 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Wed, 17 Jul 2024 14:02:52 -0700 Subject: [PATCH 02/19] Make screenResizeHanlder local and use change event --- src/layout/layout.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 27231deb7..6dbfed352 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -190,17 +190,18 @@ * * @private */ - MaterialLayout.prototype.screenSizeHandler_ = function() { + + function screenSizeHandler(e) { // modified to query dependent elements rather than binding materialLayout to windows media query result var materialLayout = window.document.querySelector('.mdl-layout') if (materialLayout){ var drawerElement = materialLayout.querySelector('.mdl-layout__drawer'); - if (window.matchMedia('(max-width: 1024px)').matches) { + if (e.matches) { materialLayout.classList.add('is-small-screen'); - if (drawerElement) { + if (drawerElement) { drawerElement.setAttribute('aria-hidden', 'true'); - } - } else { + } + } else { materialLayout.classList.remove('is-small-screen'); // Collapse drawer (if any) when moving to a large screen size. if (drawerElement) { @@ -216,7 +217,6 @@ } } }; - /** * Handles events of drawer button. * @@ -440,8 +440,8 @@ // Keep an eye on screen size, and add/remove auxiliary class for styling // of small screens. this.screenSizeMediaQuery_ = window.matchMedia('(max-width: 1024px)'); - this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_); - this.screenSizeHandler_(); + this.screenSizeMediaQuery_.addEventListener('change', screenSizeHandler); + screenSizeHandler(this.screenSizeMediaQuery_); // Initialize tabs, if any. if (this.header_ && this.tabBar_) { From e0c4664ec00960fd23f946dcf9c828cbce106fae Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Wed, 17 Jul 2024 15:47:34 -0700 Subject: [PATCH 03/19] Make the media query global --- src/layout/layout.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 6dbfed352..ac387a904 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -129,17 +129,7 @@ }; - /** - * Provide local version of matchMedia. This is needed in order to support - * monkey-patching of matchMedia in the unit tests. Due to peculiarities in - * PhantomJS, it doesn't work to monkey patch window.matchMedia directly. - * - * @private - */ - MaterialLayout.prototype.matchMedia_ = function(query) { - return window.matchMedia(query); - }; - + window["materialLayoutScreenWidthMediaQuery"] = window.matchMedia(window.MaterialLayout.prototype.Constant_.MAX_WIDTH); /** * Handles scrolling on the content. * @@ -439,7 +429,7 @@ // Keep an eye on screen size, and add/remove auxiliary class for styling // of small screens. - this.screenSizeMediaQuery_ = window.matchMedia('(max-width: 1024px)'); + this.screenSizeMediaQuery_ = window.materialLayoutScreenWidthMediaQuery this.screenSizeMediaQuery_.addEventListener('change', screenSizeHandler); screenSizeHandler(this.screenSizeMediaQuery_); From 25123a6a2b565d1c118399d9d8142fc69b9e4522 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Wed, 17 Jul 2024 15:55:23 -0700 Subject: [PATCH 04/19] Loop over all layouts --- src/layout/layout.js | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index ac387a904..b96250e7d 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -181,32 +181,36 @@ * @private */ + function screenSizeHandler(e) { // modified to query dependent elements rather than binding materialLayout to windows media query result - var materialLayout = window.document.querySelector('.mdl-layout') - if (materialLayout){ - var drawerElement = materialLayout.querySelector('.mdl-layout__drawer'); - if (e.matches) { - materialLayout.classList.add('is-small-screen'); - if (drawerElement) { + var materialLayouts = window.document.querySelectorAll('.mdl-layout') + Array.from(materialLayouts).forEach((layout) => { + if (layout) { + var drawerElement = layout.querySelector('.mdl-layout__drawer'); + if (e.matches) { + layout.classList.add('is-small-screen'); + if (drawerElement) { drawerElement.setAttribute('aria-hidden', 'true'); - } - } else { - materialLayout.classList.remove('is-small-screen'); - // Collapse drawer (if any) when moving to a large screen size. - if (drawerElement) { - drawerElement.classList.remove('is-visible'); - var obfuscator = window.document.querySelector('mdl-layout__obfuscator') - if(obfuscator){ - obfuscator.classList.remove('is-visible'); } - if (materialLayout.classList.contains('mdl-layout--fixed-drawer')) { + } else { + layout.classList.remove('is-small-screen'); + // Collapse drawer (if any) when moving to a large screen size. + if (drawerElement) { + drawerElement.classList.remove('is-visible'); + var obfuscator = layout.querySelector('mdl-layout__obfuscator') + if (obfuscator) { + obfuscator.classList.remove('is-visible'); + } + if (layout.classList.contains('mdl-layout--fixed-drawer')) { drawerElement.setAttribute('aria-hidden', 'false'); + } } } } - } + }); }; + /** * Handles events of drawer button. * From 2ac6dfe7a301a3e502a9907f34295f91242204c4 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen <59895043+jakelauritsen@users.noreply.github.com> Date: Thu, 18 Jul 2024 09:22:50 -0700 Subject: [PATCH 05/19] Update src/layout/layout.js Co-authored-by: Ryan Brown --- src/layout/layout.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index b96250e7d..5b62dcd06 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -129,7 +129,8 @@ }; - window["materialLayoutScreenWidthMediaQuery"] = window.matchMedia(window.MaterialLayout.prototype.Constant_.MAX_WIDTH); + /** @const @private */ + MaterialLayout.screenWidthMediaQuery_ = window.matchMedia(/** @type{string} */(MaterialLayout.prototype.Constant_.MAX_WIDTH)); /** * Handles scrolling on the content. * From 873dc208d1bac96ee6bc59eb0b04561ce72e911b Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Thu, 18 Jul 2024 12:57:58 -0700 Subject: [PATCH 06/19] Only add one listener for all layouts --- src/layout/layout.js | 40 ++++++++++++++-------------------------- 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 5b62dcd06..dd2491bc6 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -17,30 +17,22 @@ (function() { 'use strict'; - /** - * Class constructor for Layout MDL component. - * Implements MDL component design pattern defined at: - * https://github.com/jasonmayes/mdl-component-design-pattern - * - * @constructor - * @param {HTMLElement} element The element that will be upgraded. - */ + /** @const @private */ + const MEDIA_QUERY = window.matchMedia('(max-width: 1024px)'); + MEDIA_QUERY.onchange = screenSizeHandler; + var MaterialLayout = function MaterialLayout(element) { this.element_ = element; - // Initialize instance. this.init(); }; - window['MaterialLayout'] = MaterialLayout; - - /** + window['MaterialLayout'] = MaterialLayout; /** * Store constants in one place so they can be updated easily. * * @enum {string | number} * @private */ MaterialLayout.prototype.Constant_ = { - MAX_WIDTH: '(max-width: 1024px)', TAB_SCROLL_PIXELS: 100, RESIZE_TIMEOUT: 100, @@ -129,8 +121,6 @@ }; - /** @const @private */ - MaterialLayout.screenWidthMediaQuery_ = window.matchMedia(/** @type{string} */(MaterialLayout.prototype.Constant_.MAX_WIDTH)); /** * Handles scrolling on the content. * @@ -182,13 +172,16 @@ * @private */ - function screenSizeHandler(e) { // modified to query dependent elements rather than binding materialLayout to windows media query result - var materialLayouts = window.document.querySelectorAll('.mdl-layout') - Array.from(materialLayouts).forEach((layout) => { + var materialLayouts = document.querySelectorAll('.mdl-layout'); + + for (let i = 0; i < materialLayouts.length; i++) { + let layout = materialLayouts[i]; + if (layout) { var drawerElement = layout.querySelector('.mdl-layout__drawer'); + if (e.matches) { layout.classList.add('is-small-screen'); if (drawerElement) { @@ -199,7 +192,7 @@ // Collapse drawer (if any) when moving to a large screen size. if (drawerElement) { drawerElement.classList.remove('is-visible'); - var obfuscator = layout.querySelector('mdl-layout__obfuscator') + var obfuscator = layout.querySelector('.mdl-layout__obfuscator'); // corrected selector if (obfuscator) { obfuscator.classList.remove('is-visible'); } @@ -209,9 +202,8 @@ } } } - }); + } }; - /** * Handles events of drawer button. * @@ -432,11 +424,7 @@ this.drawer_.setAttribute('aria-hidden', 'true'); } - // Keep an eye on screen size, and add/remove auxiliary class for styling - // of small screens. - this.screenSizeMediaQuery_ = window.materialLayoutScreenWidthMediaQuery - this.screenSizeMediaQuery_.addEventListener('change', screenSizeHandler); - screenSizeHandler(this.screenSizeMediaQuery_); + screenSizeHandler(MEDIA_QUERY); // Initialize tabs, if any. if (this.header_ && this.tabBar_) { From fde3ac6b9bb367bfbbbb2244bb90bd7099a66e35 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Thu, 18 Jul 2024 13:01:37 -0700 Subject: [PATCH 07/19] Formatting adjustments --- src/layout/layout.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index dd2491bc6..754efa378 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -21,12 +21,23 @@ const MEDIA_QUERY = window.matchMedia('(max-width: 1024px)'); MEDIA_QUERY.onchange = screenSizeHandler; + /** + * Class constructor for Layout MDL component. + * Implements MDL component design pattern defined at: + * https://github.com/jasonmayes/mdl-component-design-pattern + * + * @constructor + * @param {HTMLElement} element The element that will be upgraded. + */ var MaterialLayout = function MaterialLayout(element) { this.element_ = element; + // Initialize instance. this.init(); }; - window['MaterialLayout'] = MaterialLayout; /** + window['MaterialLayout'] = MaterialLayout; + + /** * Store constants in one place so they can be updated easily. * * @enum {string | number} From 2ed0df3034ee146431a78d21aea25c9ee39048ad Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 10:42:19 -0700 Subject: [PATCH 08/19] Clean Linter --- src/layout/layout.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 754efa378..9b27f7ef3 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -17,7 +17,7 @@ (function() { 'use strict'; - /** @const @private */ + /** @private */ const MEDIA_QUERY = window.matchMedia('(max-width: 1024px)'); MEDIA_QUERY.onchange = screenSizeHandler; @@ -214,7 +214,7 @@ } } } - }; + } /** * Handles events of drawer button. * @@ -227,7 +227,7 @@ // prevent scrolling in drawer nav evt.preventDefault(); } else { - // prevent other keys + // prevent other keys2a79247898d1680570c03d8b1cdc5eaf184386372a79247898d1680570c03d8b1cdc5eaf184386372a79247898d1680570c03d8b1cdc5eaf18438637 return; } } From 89b260bf5fa6028645e84fa4e4d238558a264fe2 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 10:45:30 -0700 Subject: [PATCH 09/19] Add nvmrc --- .nvmrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..b4de39476 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +11 From 971e663fa5741ec58ea1e5c5569dbcac9fbd6031 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 10:51:30 -0700 Subject: [PATCH 10/19] Clean linter --- src/layout/layout.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 9b27f7ef3..0251a6749 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -227,7 +227,6 @@ // prevent scrolling in drawer nav evt.preventDefault(); } else { - // prevent other keys2a79247898d1680570c03d8b1cdc5eaf184386372a79247898d1680570c03d8b1cdc5eaf184386372a79247898d1680570c03d8b1cdc5eaf18438637 return; } } From 243ed70255ee2a3314ea07ee13d93d316259cd52 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 11:09:47 -0700 Subject: [PATCH 11/19] Fix es5 error --- src/layout/layout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 0251a6749..f2b3f6b12 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -187,8 +187,8 @@ // modified to query dependent elements rather than binding materialLayout to windows media query result var materialLayouts = document.querySelectorAll('.mdl-layout'); - for (let i = 0; i < materialLayouts.length; i++) { - let layout = materialLayouts[i]; + for (var i = 0; i < materialLayouts.length; i++) { + var layout = materialLayouts[i]; if (layout) { var drawerElement = layout.querySelector('.mdl-layout__drawer'); From 499e3ad51b3706d1e0038355885d5e1651f27df5 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 12:35:33 -0700 Subject: [PATCH 12/19] Fixing tests that rely on window.mediaQuery --- src/layout/layout.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index f2b3f6b12..7f3ca53f3 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -16,11 +16,6 @@ */ (function() { 'use strict'; - - /** @private */ - const MEDIA_QUERY = window.matchMedia('(max-width: 1024px)'); - MEDIA_QUERY.onchange = screenSizeHandler; - /** * Class constructor for Layout MDL component. * Implements MDL component design pattern defined at: @@ -44,6 +39,7 @@ * @private */ MaterialLayout.prototype.Constant_ = { + MAX_WIDTH: '(max-width: 1024px)', TAB_SCROLL_PIXELS: 100, RESIZE_TIMEOUT: 100, @@ -132,6 +128,23 @@ }; + /** + * Provide local version of matchMedia. This is needed in order to support + * monkey-patching of matchMedia in the unit tests. Due to peculiarities in + * PhantomJS, it doesn't work to monkey patch window.matchMedia directly. + * + * @private + */ + MaterialLayout.prototype.matchMedia_ = function(query) { + return window.matchMedia(query); + }; + + var mediaQuery = MaterialLayout.prototype.matchMedia_( + /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH)) + mediaQuery.onchange = screenSizeHandler; + + MaterialLayout.prototype.screenSizeMediaQuery_ = mediaQuery + /** * Handles scrolling on the content. * @@ -434,7 +447,10 @@ this.drawer_.setAttribute('aria-hidden', 'true'); } - screenSizeHandler(MEDIA_QUERY); + // Keep an eye on screen size, and add/remove auxiliary class for styling + // of small screens. + + screenSizeHandler(this.screenSizeMediaQuery_); // Initialize tabs, if any. if (this.header_ && this.tabBar_) { From e864a239b0e2f93f5693bc21f67f280de823f27e Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 12:38:14 -0700 Subject: [PATCH 13/19] Clean linter --- src/layout/layout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 7f3ca53f3..f7afa454d 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -140,10 +140,10 @@ }; var mediaQuery = MaterialLayout.prototype.matchMedia_( - /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH)) + /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH)); mediaQuery.onchange = screenSizeHandler; - MaterialLayout.prototype.screenSizeMediaQuery_ = mediaQuery + MaterialLayout.prototype.screenSizeMediaQuery_ = mediaQuery; /** * Handles scrolling on the content. From 8ce3abd89a7e0c14afe6944d51d387aabf844c3d Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Fri, 19 Jul 2024 13:03:12 -0700 Subject: [PATCH 14/19] No need for .nvmrc --- .nvmrc | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index b4de39476..000000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -11 From c63e70054d13072b54c0eecc9afd7308d92fddb1 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Mon, 22 Jul 2024 10:47:28 -0700 Subject: [PATCH 15/19] Register a mock media list if one exists on the static def of layout --- test/unit/layout.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/unit/layout.js b/test/unit/layout.js index 688314f45..f6c2ee912 100644 --- a/test/unit/layout.js +++ b/test/unit/layout.js @@ -22,6 +22,10 @@ describe('MaterialLayout', function () { } MockMediaQueryList.registry = {}; + if(window.MaterialLayout.prototype.screenSizeMediaQuery_){ + var query = window.MaterialLayout.prototype.Constant_.MAX_WIDTH + MockMediaQueryList.registry[query] = new MockMediaQueryList(query) + } MockMediaQueryList.mockMatchMedia = function(query) { if (! MockMediaQueryList.registry.hasOwnProperty(query)) { From cbb40d555c99eee8e8480adb478e376ac3f8f3fb Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Mon, 22 Jul 2024 13:12:13 -0700 Subject: [PATCH 16/19] Make screenSizeMediaQuery static and add update docs --- src/layout/layout.js | 24 ++++++++++++++---------- test/unit/layout.js | 2 +- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index f7afa454d..7d13fbf6a 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. @@ -191,12 +189,18 @@ }; /** - * 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_) { diff --git a/test/unit/layout.js b/test/unit/layout.js index f6c2ee912..d27eb5799 100644 --- a/test/unit/layout.js +++ b/test/unit/layout.js @@ -22,7 +22,7 @@ describe('MaterialLayout', function () { } MockMediaQueryList.registry = {}; - if(window.MaterialLayout.prototype.screenSizeMediaQuery_){ + if(MaterialLayout.screenSizeMediaQuery_){ var query = window.MaterialLayout.prototype.Constant_.MAX_WIDTH MockMediaQueryList.registry[query] = new MockMediaQueryList(query) } From 11d7b23379c7851c89aa212271617ba66781def1 Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Mon, 22 Jul 2024 13:20:37 -0700 Subject: [PATCH 17/19] Use static method for storing the matchMedia --- test/unit/layout.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/test/unit/layout.js b/test/unit/layout.js index d27eb5799..ec24d57c5 100644 --- a/test/unit/layout.js +++ b/test/unit/layout.js @@ -135,9 +135,8 @@ describe('MaterialLayout', function () { var navLink; beforeEach(function() { - this.originalMatchMedia = window.MaterialLayout.prototype.matchMedia_; - window.MaterialLayout.prototype.matchMedia_ = MockMediaQueryList.mockMatchMedia; - window.patched = 'yes patched'; + this.originalMatchMedia = MaterialLayout.matchMedia_; + MaterialLayout.matchMedia_ = MockMediaQueryList.mockMatchMedia; el = document.createElement('div'); el.innerHTML = '
' + @@ -161,7 +160,7 @@ describe('MaterialLayout', function () { }); afterEach(function() { - window.MaterialLayout.prototype.matchMedia_ = this.originalMatchMedia; + MaterialLayoutmatchMedia_ = this.originalMatchMedia; }); it('should have attribute aria-hidden="true"', function () { From 1c203b92f3235e214b80cebc59dbaf2ebc32188f Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Mon, 22 Jul 2024 13:32:28 -0700 Subject: [PATCH 18/19] Make matchMedia static and update doc for closure --- src/layout/layout.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/layout/layout.js b/src/layout/layout.js index 7d13fbf6a..1dfcb1056 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -135,11 +135,11 @@ * * @private */ - MaterialLayout.prototype.matchMedia_ = function(query) { + MaterialLayout.matchMedia_ = function(query) { return window.matchMedia(query); }; - MaterialLayout.screenSizeMediaQuery_ = MaterialLayout.prototype.matchMedia_( + MaterialLayout.screenSizeMediaQuery_ = MaterialLayout.matchMedia_( /** @type {string} */ (MaterialLayout.prototype.Constant_.MAX_WIDTH)); MaterialLayout.screenSizeMediaQuery_.onchange = screenSizeHandler; @@ -188,16 +188,11 @@ } }; - /** - * @typedef {Object} Matchable - * @property {boolean} matches - Indicates if the media query condition is met. - */ - /** * 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 + * @param {!MediaQueryList|!MediaQueryListEvent} m - is any object that provides matches * */ function screenSizeHandler(m) { From 83e468c8de1a79c166ce47c04b775e22d7662a4a Mon Sep 17 00:00:00 2001 From: Jake Lauritsen Date: Mon, 22 Jul 2024 13:39:57 -0700 Subject: [PATCH 19/19] Fix test typo --- test/unit/layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/layout.js b/test/unit/layout.js index ec24d57c5..219ec0eef 100644 --- a/test/unit/layout.js +++ b/test/unit/layout.js @@ -160,7 +160,7 @@ describe('MaterialLayout', function () { }); afterEach(function() { - MaterialLayoutmatchMedia_ = this.originalMatchMedia; + MaterialLayout.matchMedia_ = this.originalMatchMedia; }); it('should have attribute aria-hidden="true"', function () {