material_design_lite-sass 1.0.2.1 → 1.0.3

data/vendor/assets/javascripts/material/mdlComponentHandler.js

@@ -19,23 +19,29 @@
  * A component handler interface using the revealing module design pattern.
  * More details on this design pattern here:
  * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
  * @author Jason Mayes.
  */
 /* exported componentHandler */
-var componentHandler = (function() {
+window.componentHandler = (function() {
   'use strict';
 
+  /** @type {!Array<componentHandler.ComponentConfig>} */
   var registeredComponents_ = [];
+
+  /** @type {!Array<componentHandler.Component>} */
   var createdComponents_ = [];
+
   var downgradeMethod_ = 'mdlDowngrade_';
   var componentConfigProperty_ = 'mdlComponentConfigInternal_';
 
   /**
    * Searches registered components for a class we are interested in using.
    * Optionally replaces a match with passed object if specified.
-   * @param {string} name The name of a class we want to use.
-   * @param {Object=} optReplace Optional object to replace match with.
-   * @return {Object | boolean}
+   *
+   * @param {String} name The name of a class we want to use.
+   * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
+   * @return {!Object|Boolean}
    * @private
    */
   function findRegisteredClass_(name, optReplace) {
@@ -52,8 +58,9 @@ var componentHandler = (function() {
 
   /**
    * Returns an array of the classNames of the upgraded classes on the element.
-   * @param {HTMLElement} element The element to fetch data from.
-   * @return {Array<string>}
+   *
+   * @param {!HTMLElement} element The element to fetch data from.
+   * @return {!Array<String>}
    * @private
    */
   function getUpgradedListOfElement_(element) {
@@ -65,9 +72,10 @@ var componentHandler = (function() {
   /**
    * Returns true if the given element has already been upgraded for the given
    * class.
-   * @param {HTMLElement} element The element we want to check.
-   * @param {string} jsClass The class to check for.
-   * @return boolean
+   *
+   * @param {!HTMLElement} element The element we want to check.
+   * @param {String} jsClass The class to check for.
+   * @returns {Boolean}
    * @private
    */
   function isElementUpgraded_(element, jsClass) {
@@ -78,9 +86,10 @@ var componentHandler = (function() {
   /**
    * Searches existing DOM for elements of our component type and upgrades them
    * if they have not already been upgraded.
-   * @param {!string=} optJsClass the programatic name of the element class we
+   *
+   * @param {String=} optJsClass the programatic name of the element class we
    * need to create a new instance of.
-   * @param {!string=} optCssClass the name of the CSS class elements of this
+   * @param {String=} optCssClass the name of the CSS class elements of this
    * type will have.
    */
   function upgradeDomInternal(optJsClass, optCssClass) {
@@ -90,7 +99,7 @@ var componentHandler = (function() {
             registeredComponents_[i].cssClass);
       }
     } else {
-      var jsClass = /** @type {!string} */ (optJsClass);
+      var jsClass = /** @type {String} */ (optJsClass);
       if (optCssClass === undefined) {
         var registeredClass = findRegisteredClass_(jsClass);
         if (registeredClass) {
@@ -107,8 +116,9 @@ var componentHandler = (function() {
 
   /**
    * Upgrades a specific element rather than all in the DOM.
-   * @param {HTMLElement} element The element we wish to upgrade.
-   * @param {!string=} optJsClass Optional name of the class we want to upgrade
+   *
+   * @param {!HTMLElement} element The element we wish to upgrade.
+   * @param {String=} optJsClass Optional name of the class we want to upgrade
    * the element to.
    */
   function upgradeElementInternal(element, optJsClass) {
@@ -122,7 +132,7 @@ var componentHandler = (function() {
     // ones matching the element's CSS classList.
     if (!optJsClass) {
       var classList = element.classList;
-      registeredComponents_.forEach(function (component) {
+      registeredComponents_.forEach(function(component) {
         // Match CSS & Not to be upgraded & Not upgraded.
         if (classList.contains(component.cssClass) &&
             classesToUpgrade.indexOf(component) === -1 &&
@@ -166,13 +176,14 @@ var componentHandler = (function() {
 
   /**
    * Upgrades a specific list of elements rather than all in the DOM.
-   * @param {HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection} elements
+   *
+   * @param {!HTMLElement|!Array<!HTMLElement>|!NodeList|!HTMLCollection} elements
    * The elements we wish to upgrade.
    */
   function upgradeElementsInternal(elements) {
     if (!Array.isArray(elements)) {
       if (typeof elements.item === 'function') {
-        elements = Array.prototype.slice.call(elements);
+        elements = Array.prototype.slice.call(/** @type {Array} */ (elements));
       } else {
         elements = [elements];
       }
@@ -190,17 +201,17 @@ var componentHandler = (function() {
 
   /**
    * Registers a class for future use and attempts to upgrade existing DOM.
-   * @param {Object} config An object containing:
-   * {constructor: Constructor, classAsString: string, cssClass: string}
+   *
+   * @param {{constructor: !Function, classAsString: String, cssClass: String, widget: String}} config
    */
   function registerInternal(config) {
-    var newConfig = {
+    var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
       'classConstructor': config.constructor,
       'className': config.classAsString,
       'cssClass': config.cssClass,
       'widget': config.widget === undefined ? true : config.widget,
       'callbacks': []
-    };
+    });
 
     registeredComponents_.forEach(function(item) {
       if (item.cssClass === newConfig.cssClass) {
@@ -214,7 +225,7 @@ var componentHandler = (function() {
     if (config.constructor.prototype
         .hasOwnProperty(componentConfigProperty_)) {
       throw new Error(
-        'MDL component classes must not have ' + componentConfigProperty_ +
+          'MDL component classes must not have ' + componentConfigProperty_ +
           ' defined as a property.');
     }
 
@@ -228,10 +239,12 @@ var componentHandler = (function() {
   /**
    * Allows user to be alerted to any upgrades that are performed for a given
    * component type
-   * @param {string} jsClass The class name of the MDL component we wish
+   *
+   * @param {String} jsClass The class name of the MDL component we wish
    * to hook into for any upgrades performed.
-   * @param {!Function} callback The function to call upon an upgrade. This
-   * function should expect 1 parameter - the HTMLElement which got upgraded.
+   * @param {function(!HTMLElement)} callback The function to call upon an
+   * upgrade. This function should expect 1 parameter - the HTMLElement which
+   * got upgraded.
    */
   function registerUpgradedCallbackInternal(jsClass, callback) {
     var regClass = findRegisteredClass_(jsClass);
@@ -253,7 +266,7 @@ var componentHandler = (function() {
   /**
    * Finds a created component by a given DOM node.
    *
-   * @param {!Element} node
+   * @param {!Node} node
    * @return {*}
    */
   function findCreatedComponentByNodeInternal(node) {
@@ -296,7 +309,7 @@ var componentHandler = (function() {
   /**
    * Downgrade either a given node, an array of nodes, or a NodeList.
    *
-   * @param {*} nodes
+   * @param {!Node|!Array<!Node>|!NodeList} nodes
    */
   function downgradeNodesInternal(nodes) {
     var downgradeNode = function(node) {
@@ -344,3 +357,31 @@ window.addEventListener('load', function() {
         componentHandler.register = function() {};
   }
 });
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   constructor: !Function,
+ *   className: String,
+ *   cssClass: String,
+ *   widget: String,
+ *   callbacks: !Array<function(!HTMLElement)>
+ * }}
+ */
+componentHandler.ComponentConfig;  // jshint ignore:line
+
+/**
+ * Created component (i.e., upgraded element) type as managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ *   element_: !HTMLElement,
+ *   className: String,
+ *   classAsString: String,
+ *   cssClass: String,
+ *   widget: String
+ * }}
+ */
+componentHandler.Component;  // jshint ignore:line

data/vendor/assets/javascripts/material/menu.js

@@ -15,454 +15,470 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for dropdown MDL component.
- * Implements MDL component design pattern defined at:
- * https://github.com/jasonmayes/mdl-component-design-pattern
- * @param {HTMLElement} element The element that will be upgraded.
- */
-function MaterialMenu(element) {
+(function() {
   'use strict';
 
-  this.element_ = element;
+  /**
+   * Class constructor for dropdown MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialMenu = function MaterialMenu(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialMenu = MaterialMenu;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String | Number}
+   * @private
+   */
+  MaterialMenu.prototype.Constant_ = {
+    // Total duration of the menu animation.
+    TRANSITION_DURATION_SECONDS: 0.3,
+    // The fraction of the total duration we want to use for menu item animations.
+    TRANSITION_DURATION_FRACTION: 0.8,
+    // How long the menu stays open after choosing an option (so the user can see
+    // the ripple).
+    CLOSE_TIMEOUT: 150
+  };
+
+  /**
+   * Keycodes, for code readability.
+   *
+   * @enum {Number}
+   * @private
+   */
+  MaterialMenu.prototype.Keycodes_ = {
+    ENTER: 13,
+    ESCAPE: 27,
+    SPACE: 32,
+    UP_ARROW: 38,
+    DOWN_ARROW: 40
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {String}
+   * @private
+   */
+  MaterialMenu.prototype.CssClasses_ = {
+    CONTAINER: 'mdl-menu__container',
+    OUTLINE: 'mdl-menu__outline',
+    ITEM: 'mdl-menu__item',
+    ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE: 'mdl-ripple',
+    // Statuses
+    IS_UPGRADED: 'is-upgraded',
+    IS_VISIBLE: 'is-visible',
+    IS_ANIMATING: 'is-animating',
+    // Alignment options
+    BOTTOM_LEFT: 'mdl-menu--bottom-left',  // This is the default.
+    BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+    TOP_LEFT: 'mdl-menu--top-left',
+    TOP_RIGHT: 'mdl-menu--top-right',
+    UNALIGNED: 'mdl-menu--unaligned'
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialMenu.prototype.init = function() {
+    if (this.element_) {
+      // Create container for the menu.
+      var container = document.createElement('div');
+      container.classList.add(this.CssClasses_.CONTAINER);
+      this.element_.parentElement.insertBefore(container, this.element_);
+      this.element_.parentElement.removeChild(this.element_);
+      container.appendChild(this.element_);
+      this.container_ = container;
+
+      // Create outline for the menu (shadow and background).
+      var outline = document.createElement('div');
+      outline.classList.add(this.CssClasses_.OUTLINE);
+      this.outline_ = outline;
+      container.insertBefore(outline, this.element_);
+
+      // Find the "for" element and bind events to it.
+      var forElId = this.element_.getAttribute('for');
+      var forEl = null;
+      if (forElId) {
+        forEl = document.getElementById(forElId);
+        if (forEl) {
+          this.forElement_ = forEl;
+          forEl.addEventListener('click', this.handleForClick_.bind(this));
+          forEl.addEventListener('keydown',
+              this.handleForKeyboardEvent_.bind(this));
+        }
+      }
 
-  // Initialize instance.
-  this.init();
-}
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+      this.boundItemKeydown = this.handleItemKeyboardEvent_.bind(this);
+      this.boundItemClick = this.handleItemClick_.bind(this);
+      for (var i = 0; i < items.length; i++) {
+        // Add a listener to each menu item.
+        items[i].addEventListener('click', this.boundItemClick);
+        // Add a tab index to each menu item.
+        items[i].tabIndex = '-1';
+        // Add a keyboard listener to each menu item.
+        items[i].addEventListener('keydown', this.boundItemKeydown);
+      }
 
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string | number}
- * @private
- */
-MaterialMenu.prototype.Constant_ = {
-  // Total duration of the menu animation.
-  TRANSITION_DURATION_SECONDS: 0.3,
-  // The fraction of the total duration we want to use for menu item animations.
-  TRANSITION_DURATION_FRACTION: 0.8,
-  // How long the menu stays open after choosing an option (so the user can see
-  // the ripple).
-  CLOSE_TIMEOUT: 150
-};
+      // Add ripple classes to each item, if the user has enabled ripples.
+      if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+        this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
 
-/**
- * Keycodes, for code readability.
- * @enum {number}
- * @private
- */
-MaterialMenu.prototype.Keycodes_ = {
-  ENTER: 13,
-  ESCAPE: 27,
-  SPACE: 32,
-  UP_ARROW: 38,
-  DOWN_ARROW: 40
-};
+        for (i = 0; i < items.length; i++) {
+          var item = items[i];
 
-/**
- * Store strings for class names defined by this component that are used in
- * JavaScript. This allows us to simply change it in one place should we
- * decide to modify at a later date.
- * @enum {string}
- * @private
- */
-MaterialMenu.prototype.CssClasses_ = {
-  CONTAINER: 'mdl-menu__container',
-  OUTLINE: 'mdl-menu__outline',
-  ITEM: 'mdl-menu__item',
-  ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
-  RIPPLE_EFFECT: 'mdl-js-ripple-effect',
-  RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
-  RIPPLE: 'mdl-ripple',
-  // Statuses
-  IS_UPGRADED: 'is-upgraded',
-  IS_VISIBLE: 'is-visible',
-  IS_ANIMATING: 'is-animating',
-  // Alignment options
-  BOTTOM_LEFT: 'mdl-menu--bottom-left',  // This is the default.
-  BOTTOM_RIGHT: 'mdl-menu--bottom-right',
-  TOP_LEFT: 'mdl-menu--top-left',
-  TOP_RIGHT: 'mdl-menu--top-right',
-  UNALIGNED: 'mdl-menu--unaligned'
-};
+          var rippleContainer = document.createElement('span');
+          rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
 
-/**
- * Initialize element.
- */
-MaterialMenu.prototype.init = function() {
-  'use strict';
+          var ripple = document.createElement('span');
+          ripple.classList.add(this.CssClasses_.RIPPLE);
+          rippleContainer.appendChild(ripple);
 
-  if (this.element_) {
-    // Create container for the menu.
-    var container = document.createElement('div');
-    container.classList.add(this.CssClasses_.CONTAINER);
-    this.element_.parentElement.insertBefore(container, this.element_);
-    this.element_.parentElement.removeChild(this.element_);
-    container.appendChild(this.element_);
-    this.container_ = container;
-
-    // Create outline for the menu (shadow and background).
-    var outline = document.createElement('div');
-    outline.classList.add(this.CssClasses_.OUTLINE);
-    this.outline_ = outline;
-    container.insertBefore(outline, this.element_);
-
-    // Find the "for" element and bind events to it.
-    var forElId = this.element_.getAttribute('for');
-    var forEl = null;
-    if (forElId) {
-      forEl = document.getElementById(forElId);
-      if (forEl) {
-        this.forElement_ = forEl;
-        forEl.addEventListener('click', this.handleForClick_.bind(this));
-        forEl.addEventListener('keydown',
-            this.handleForKeyboardEvent_.bind(this));
+          item.appendChild(rippleContainer);
+          item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+        }
       }
-    }
 
-    var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+      // Copy alignment classes to the container, so the outline can use them.
+      if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
+        this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+        this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+        this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+        this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        this.outline_.classList.add(this.CssClasses_.UNALIGNED);
+      }
 
-    for (var i = 0; i < items.length; i++) {
-      // Add a listener to each menu item.
-      items[i].addEventListener('click', this.handleItemClick_.bind(this));
-      // Add a tab index to each menu item.
-      items[i].tabIndex = '-1';
-      // Add a keyboard listener to each menu item.
-      items[i].addEventListener('keydown',
-          this.handleItemKeyboardEvent_.bind(this));
+      container.classList.add(this.CssClasses_.IS_UPGRADED);
     }
-
-    // Add ripple classes to each item, if the user has enabled ripples.
-    if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
-      this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
-
-      for (i = 0; i < items.length; i++) {
-        var item = items[i];
-
-        var rippleContainer = document.createElement('span');
-        rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
-
-        var ripple = document.createElement('span');
-        ripple.classList.add(this.CssClasses_.RIPPLE);
-        rippleContainer.appendChild(ripple);
-
-        item.appendChild(rippleContainer);
-        item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+  };
+
+  /**
+   * Handles a click on the "for" element, by positioning the menu and then
+   * toggling it.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleForClick_ = function(evt) {
+    if (this.element_ && this.forElement_) {
+      var rect = this.forElement_.getBoundingClientRect();
+      var forRect = this.forElement_.parentElement.getBoundingClientRect();
+
+      if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        // Do not position the menu automatically. Requires the developer to
+        // manually specify position.
+      } else if (this.element_.classList.contains(
+          this.CssClasses_.BOTTOM_RIGHT)) {
+        // Position below the "for" element, aligned to its right.
+        this.container_.style.right = (forRect.right - rect.right) + 'px';
+        this.container_.style.top =
+            this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+      } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+        // Position above the "for" element, aligned to its left.
+        this.container_.style.left = this.forElement_.offsetLeft + 'px';
+        this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+        // Position above the "for" element, aligned to its right.
+        this.container_.style.right = (forRect.right - rect.right) + 'px';
+        this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      } else {
+        // Default: position below the "for" element, aligned to its left.
+        this.container_.style.left = this.forElement_.offsetLeft + 'px';
+        this.container_.style.top =
+            this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
       }
     }
 
-    // Copy alignment classes to the container, so the outline can use them.
-    if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
-      this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
-    }
-    if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
-      this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+    this.toggle(evt);
+  };
+
+  /**
+   * Handles a keyboard event on the "for" element.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleForKeyboardEvent_ = function(evt) {
+    if (this.element_ && this.container_ && this.forElement_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+        ':not([disabled])');
+
+      if (items && items.length > 0 &&
+          this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+        if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+          evt.preventDefault();
+          items[items.length - 1].focus();
+        } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+          evt.preventDefault();
+          items[0].focus();
+        }
+      }
     }
-    if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
-      this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+  };
+
+  /**
+   * Handles a keyboard event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleItemKeyboardEvent_ = function(evt) {
+    if (this.element_ && this.container_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+        ':not([disabled])');
+
+      if (items && items.length > 0 &&
+          this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+        var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+
+        if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+          evt.preventDefault();
+          if (currentIndex > 0) {
+            items[currentIndex - 1].focus();
+          } else {
+            items[items.length - 1].focus();
+          }
+        } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+          evt.preventDefault();
+          if (items.length > currentIndex + 1) {
+            items[currentIndex + 1].focus();
+          } else {
+            items[0].focus();
+          }
+        } else if (evt.keyCode === this.Keycodes_.SPACE ||
+              evt.keyCode === this.Keycodes_.ENTER) {
+          evt.preventDefault();
+          // Send mousedown and mouseup to trigger ripple.
+          var e = new MouseEvent('mousedown');
+          evt.target.dispatchEvent(e);
+          e = new MouseEvent('mouseup');
+          evt.target.dispatchEvent(e);
+          // Send click.
+          evt.target.click();
+        } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+          evt.preventDefault();
+          this.hide();
+        }
+      }
     }
-    if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
-      this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+  };
+
+  /**
+   * Handles a click event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleItemClick_ = function(evt) {
+    if (evt.target.getAttribute('disabled') !== null) {
+      evt.stopPropagation();
+    } else {
+      // Wait some time before closing menu, so the user can see the ripple.
+      this.closing_ = true;
+      window.setTimeout(function(evt) {
+        this.hide();
+        this.closing_ = false;
+      }.bind(this), this.Constant_.CLOSE_TIMEOUT);
     }
+  };
+
+  /**
+   * Calculates the initial clip (for opening the menu) or final clip (for closing
+   * it), and applies it. This allows us to animate from or to the correct point,
+   * that is, the point it's aligned to in the "for" element.
+   *
+   * @param {Number} height Height of the clip rectangle
+   * @param {Number} width Width of the clip rectangle
+   * @private
+   */
+  MaterialMenu.prototype.applyClip_ = function(height, width) {
     if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
-      this.outline_.classList.add(this.CssClasses_.UNALIGNED);
-    }
-
-    container.classList.add(this.CssClasses_.IS_UPGRADED);
-  }
-};
-
-/**
- * Handles a click on the "for" element, by positioning the menu and then
- * toggling it.
- * @private
- */
-MaterialMenu.prototype.handleForClick_ = function(evt) {
-  'use strict';
-
-  if (this.element_ && this.forElement_) {
-    var rect = this.forElement_.getBoundingClientRect();
-    var forRect = this.forElement_.parentElement.getBoundingClientRect();
-
-    if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
-      // Do not position the menu automatically. Requires the developer to
-      // manually specify position.
-    } else if (this.element_.classList.contains(
-        this.CssClasses_.BOTTOM_RIGHT)) {
-      // Position below the "for" element, aligned to its right.
-      this.container_.style.right = (forRect.right - rect.right) + 'px';
-      this.container_.style.top =
-          this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+      // Do not clip.
+      this.element_.style.clip = null;
+    } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+      // Clip to the top right corner of the menu.
+      this.element_.style.clip =
+          'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
     } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
-      // Position above the "for" element, aligned to its left.
-      this.container_.style.left = this.forElement_.offsetLeft + 'px';
-      this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      // Clip to the bottom left corner of the menu.
+      this.element_.style.clip =
+          'rect(' + height + 'px 0 ' + height + 'px 0)';
     } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
-      // Position above the "for" element, aligned to its right.
-      this.container_.style.right = (forRect.right - rect.right) + 'px';
-      this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      // Clip to the bottom right corner of the menu.
+      this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' +
+          height + 'px ' + width + 'px)';
     } else {
-      // Default: position below the "for" element, aligned to its left.
-      this.container_.style.left = this.forElement_.offsetLeft + 'px';
-      this.container_.style.top =
-          this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
-    }
-  }
-
-  this.toggle(evt);
-};
-
-/**
- * Handles a keyboard event on the "for" element.
- * @private
- */
-MaterialMenu.prototype.handleForKeyboardEvent_ = function(evt) {
-  'use strict';
-
-  if (this.element_ && this.container_ && this.forElement_) {
-    var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
-      ':not([disabled])');
-
-    if (items && items.length > 0 &&
-        this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
-      if (evt.keyCode === this.Keycodes_.UP_ARROW) {
-        evt.preventDefault();
-        items[items.length - 1].focus();
-      } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
-        evt.preventDefault();
-        items[0].focus();
-      }
+      // Default: do not clip (same as clipping to the top left corner).
+      this.element_.style.clip = null;
     }
-  }
-};
-
-/**
- * Handles a keyboard event on an item.
- * @private
- */
-MaterialMenu.prototype.handleItemKeyboardEvent_ = function(evt) {
-  'use strict';
-
-  if (this.element_ && this.container_) {
-    var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
-      ':not([disabled])');
-
-    if (items && items.length > 0 &&
-        this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
-      var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+  };
+
+  /**
+   * Adds an event listener to clean up after the animation ends.
+   *
+   * @private
+   */
+  MaterialMenu.prototype.addAnimationEndListener_ = function() {
+    var cleanup = function() {
+      this.element_.removeEventListener('transitionend', cleanup);
+      this.element_.removeEventListener('webkitTransitionEnd', cleanup);
+      this.element_.classList.remove(this.CssClasses_.IS_ANIMATING);
+    }.bind(this);
 
-      if (evt.keyCode === this.Keycodes_.UP_ARROW) {
-        evt.preventDefault();
-        if (currentIndex > 0) {
-          items[currentIndex - 1].focus();
-        } else {
-          items[items.length - 1].focus();
-        }
-      } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
-        evt.preventDefault();
-        if (items.length > currentIndex + 1) {
-          items[currentIndex + 1].focus();
+    // Remove animation class once the transition is done.
+    this.element_.addEventListener('transitionend', cleanup);
+    this.element_.addEventListener('webkitTransitionEnd', cleanup);
+  };
+
+  /**
+   * Displays the menu.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.show = function(evt) {
+    if (this.element_ && this.container_ && this.outline_) {
+      // Measure the inner element.
+      var height = this.element_.getBoundingClientRect().height;
+      var width = this.element_.getBoundingClientRect().width;
+
+      // Apply the inner element's size to the container and outline.
+      this.container_.style.width = width + 'px';
+      this.container_.style.height = height + 'px';
+      this.outline_.style.width = width + 'px';
+      this.outline_.style.height = height + 'px';
+
+      var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS *
+          this.Constant_.TRANSITION_DURATION_FRACTION;
+
+      // Calculate transition delays for individual menu items, so that they fade
+      // in one at a time.
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+      for (var i = 0; i < items.length; i++) {
+        var itemDelay = null;
+        if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ||
+            this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+          itemDelay = ((height - items[i].offsetTop - items[i].offsetHeight) /
+              height * transitionDuration) + 's';
         } else {
-          items[0].focus();
+          itemDelay = (items[i].offsetTop / height * transitionDuration) + 's';
         }
-      } else if (evt.keyCode === this.Keycodes_.SPACE ||
-            evt.keyCode === this.Keycodes_.ENTER) {
-        evt.preventDefault();
-        // Send mousedown and mouseup to trigger ripple.
-        var e = new MouseEvent('mousedown');
-        evt.target.dispatchEvent(e);
-        e = new MouseEvent('mouseup');
-        evt.target.dispatchEvent(e);
-        // Send click.
-        evt.target.click();
-      } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
-        evt.preventDefault();
-        this.hide();
+        items[i].style.transitionDelay = itemDelay;
       }
-    }
-  }
-};
-
-/**
- * Handles a click event on an item.
- * @private
- */
-MaterialMenu.prototype.handleItemClick_ = function(evt) {
-  'use strict';
-
-  if (evt.target.getAttribute('disabled') !== null) {
-    evt.stopPropagation();
-  } else {
-    // Wait some time before closing menu, so the user can see the ripple.
-    this.closing_ = true;
-    window.setTimeout(function(evt) {
-      this.hide();
-      this.closing_ = false;
-    }.bind(this), this.Constant_.CLOSE_TIMEOUT);
-  }
-};
-
-/**
- * Calculates the initial clip (for opening the menu) or final clip (for closing
- * it), and applies it. This allows us to animate from or to the correct point,
- * that is, the point it's aligned to in the "for" element.
- * @private
- */
-MaterialMenu.prototype.applyClip_ = function(height, width) {
-  'use strict';
-
-  if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
-    // Do not clip.
-    this.element_.style.clip = null;
-  } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
-    // Clip to the top right corner of the menu.
-    this.element_.style.clip =
-        'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
-  } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
-    // Clip to the bottom left corner of the menu.
-    this.element_.style.clip =
-        'rect(' + height + 'px 0 ' + height + 'px 0)';
-  } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
-    // Clip to the bottom right corner of the menu.
-    this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' +
-        height + 'px ' + width + 'px)';
-  } else {
-    // Default: do not clip (same as clipping to the top left corner).
-    this.element_.style.clip = null;
-  }
-};
-
-/**
- * Adds an event listener to clean up after the animation ends.
- * @private
- */
-MaterialMenu.prototype.addAnimationEndListener_ = function() {
-  'use strict';
-
-  var cleanup = function () {
-    this.element_.removeEventListener('transitionend', cleanup);
-    this.element_.removeEventListener('webkitTransitionEnd', cleanup);
-    this.element_.classList.remove(this.CssClasses_.IS_ANIMATING);
-  }.bind(this);
-
-  // Remove animation class once the transition is done.
-  this.element_.addEventListener('transitionend', cleanup);
-  this.element_.addEventListener('webkitTransitionEnd', cleanup);
-};
-
-/**
- * Displays the menu.
- * @public
- */
-MaterialMenu.prototype.show = function(evt) {
-  'use strict';
-
-  if (this.element_ && this.container_ && this.outline_) {
-    // Measure the inner element.
-    var height = this.element_.getBoundingClientRect().height;
-    var width = this.element_.getBoundingClientRect().width;
-
-    // Apply the inner element's size to the container and outline.
-    this.container_.style.width = width + 'px';
-    this.container_.style.height = height + 'px';
-    this.outline_.style.width = width + 'px';
-    this.outline_.style.height = height + 'px';
-
-    var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS *
-        this.Constant_.TRANSITION_DURATION_FRACTION;
 
-    // Calculate transition delays for individual menu items, so that they fade
-    // in one at a time.
-    var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
-    for (var i = 0; i < items.length; i++) {
-      var itemDelay = null;
-      if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ||
-          this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
-        itemDelay = ((height - items[i].offsetTop - items[i].offsetHeight) /
-            height * transitionDuration) + 's';
-      } else {
-        itemDelay = (items[i].offsetTop / height * transitionDuration) + 's';
-      }
-      items[i].style.transitionDelay = itemDelay;
+      // Apply the initial clip to the text before we start animating.
+      this.applyClip_(height, width);
+
+      // Wait for the next frame, turn on animation, and apply the final clip.
+      // Also make it visible. This triggers the transitions.
+      window.requestAnimationFrame(function() {
+        this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+        this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+        this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+      }.bind(this));
+
+      // Clean up after the animation is complete.
+      this.addAnimationEndListener_();
+
+      // Add a click listener to the document, to close the menu.
+      var callback = function(e) {
+        // Check to see if the document is processing the same event that
+        // displayed the menu in the first place. If so, do nothing.
+        // Also check to see if the menu is in the process of closing itself, and
+        // do nothing in that case.
+        if (e !== evt && !this.closing_) {
+          document.removeEventListener('click', callback);
+          this.hide();
+        }
+      }.bind(this);
+      document.addEventListener('click', callback);
     }
+  };
+
+  /**
+   * Hides the menu.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.hide = function() {
+    if (this.element_ && this.container_ && this.outline_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+
+      // Remove all transition delays; menu items fade out concurrently.
+      for (var i = 0; i < items.length; i++) {
+        items[i].style.transitionDelay = null;
+      }
 
-    // Apply the initial clip to the text before we start animating.
-    this.applyClip_(height, width);
+      // Measure the inner element.
+      var height = this.element_.getBoundingClientRect().height;
+      var width = this.element_.getBoundingClientRect().width;
 
-    // Wait for the next frame, turn on animation, and apply the final clip.
-    // Also make it visible. This triggers the transitions.
-    window.requestAnimationFrame(function() {
+      // Turn on animation, and apply the final clip. Also make invisible.
+      // This triggers the transitions.
       this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
-      this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
-      this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
-    }.bind(this));
-
-    // Clean up after the animation is complete.
-    this.addAnimationEndListener_();
-
-    // Add a click listener to the document, to close the menu.
-    var callback = function(e) {
-      // Check to see if the document is processing the same event that
-      // displayed the menu in the first place. If so, do nothing.
-      // Also check to see if the menu is in the process of closing itself, and
-      // do nothing in that case.
-      if (e !== evt && !this.closing_) {
-        document.removeEventListener('click', callback);
-        this.hide();
-      }
-    }.bind(this);
-    document.addEventListener('click', callback);
-  }
-};
+      this.applyClip_(height, width);
+      this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
 
-/**
- * Hides the menu.
- * @public
- */
-MaterialMenu.prototype.hide = function() {
-  'use strict';
-
-  if (this.element_ && this.container_ && this.outline_) {
+      // Clean up after the animation is complete.
+      this.addAnimationEndListener_();
+    }
+  };
+
+  /**
+   * Displays or hides the menu, depending on current state.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.toggle = function(evt) {
+    if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+      this.hide();
+    } else {
+      this.show(evt);
+    }
+  };
+
+  /**
+   * Downgrade the component.
+   *
+   * @private
+   */
+  MaterialMenu.prototype.mdlDowngrade_ = function() {
     var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
 
-    // Remove all transition delays; menu items fade out concurrently.
     for (var i = 0; i < items.length; i++) {
-      items[i].style.transitionDelay = null;
+      items[i].removeEventListener('click', this.boundItemClick);
+      items[i].removeEventListener('keydown', this.boundItemKeydown);
     }
-
-    // Measure the inner element.
-    var height = this.element_.getBoundingClientRect().height;
-    var width = this.element_.getBoundingClientRect().width;
-
-    // Turn on animation, and apply the final clip. Also make invisible.
-    // This triggers the transitions.
-    this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
-    this.applyClip_(height, width);
-    this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
-
-    // Clean up after the animation is complete.
-    this.addAnimationEndListener_();
-  }
-};
-
-/**
- * Displays or hides the menu, depending on current state.
- * @public
- */
-MaterialMenu.prototype.toggle = function(evt) {
-  'use strict';
-
-  if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
-    this.hide();
-  } else {
-    this.show(evt);
-  }
-};
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialMenu,
-  classAsString: 'MaterialMenu',
-  cssClass: 'mdl-js-menu',
-  widget: true
-});
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialMenu,
+    classAsString: 'MaterialMenu',
+    cssClass: 'mdl-js-menu',
+    widget: true
+  });
+})();