Fix screen resizer memory leak for mdl layout

.nvmrc

@@ -0,0 +1 @@
+11

src/layout/layout.js

@@ -17,6 +17,10 @@
 (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:
@@ -40,7 +44,6 @@
    * @private
    */
   MaterialLayout.prototype.Constant_ = {
-    MAX_WIDTH: '(max-width: 1024px)',
     TAB_SCROLL_PIXELS: 100,
     RESIZE_TIMEOUT: 100,
 
@@ -129,17 +132,6 @@
 
   };
 
-  /**
-   * 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);
-  };
-
   /**
    * Handles scrolling on the content.
    *
@@ -190,27 +182,39 @@
    *
    * @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');
-      }
-    } 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);
+  function screenSizeHandler(e) {
+    // 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];
 
-        if (this.element_.classList.contains(this.CssClasses_.FIXED_DRAWER)) {
-          this.drawer_.setAttribute('aria-hidden', 'false');
+      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 {
+          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'); // corrected selector
+            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.
    *
@@ -223,7 +227,6 @@
         // prevent scrolling in drawer nav
         evt.preventDefault();
       } else {
-        // prevent other keys
         return;
       }
     }
@@ -431,12 +434,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_ = this.matchMedia_(
-          /** @type {string} */ (this.Constant_.MAX_WIDTH));
-      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
-      this.screenSizeHandler_();
+      screenSizeHandler(MEDIA_QUERY);
 
       // Initialize tabs, if any.
       if (this.header_ && this.tabBar_) {