material_design_lite-sass 1.0.6.3 → 1.1.0

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

@@ -112,30 +112,6 @@
     }
   };
 
-  /**
-   * Downgrade the element.
-   *
-   * @private
-   */
-  MaterialButton.prototype.mdlDowngrade_ = function() {
-    if (this.rippleElement_) {
-      this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
-    }
-    this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
-    this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
-  };
-
-  /**
-   * Public alias for the downgrade method.
-   *
-   * @public
-   */
-  MaterialButton.prototype.mdlDowngrade =
-      MaterialButton.prototype.mdlDowngrade_;
-
-  MaterialButton.prototype['mdlDowngrade'] =
-      MaterialButton.prototype.mdlDowngrade;
-
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -258,32 +258,6 @@
     }
   };
 
-  /**
-   * Downgrade the component.
-   *
-   * @private
-   */
-  MaterialCheckbox.prototype.mdlDowngrade_ = function() {
-    if (this.rippleContainerElement_) {
-      this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
-    }
-    this.inputElement_.removeEventListener('change', this.boundInputOnChange);
-    this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
-    this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
-    this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
-  };
-
-  /**
-   * Public alias for the downgrade method.
-   *
-   * @public
-   */
-  MaterialCheckbox.prototype.mdlDowngrade =
-      MaterialCheckbox.prototype.mdlDowngrade_;
-
-  MaterialCheckbox.prototype['mdlDowngrade'] =
-      MaterialCheckbox.prototype.mdlDowngrade;
-
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

data/vendor/assets/javascripts/material/data-table.js

@@ -24,7 +24,7 @@
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
    * @constructor
-   * @param {HTMLElement} element The element that will be upgraded.
+   * @param {Element} element The element that will be upgraded.
    */
   var MaterialDataTable = function MaterialDataTable(element) {
     this.element_ = element;
@@ -66,7 +66,7 @@
    * single row (or multiple rows).
    *
    * @param {Element} checkbox Checkbox that toggles the selection state.
-   * @param {HTMLElement} row Row to toggle when checkbox changes.
+   * @param {Element} row Row to toggle when checkbox changes.
    * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
@@ -106,7 +106,7 @@
    * Creates a checkbox for a single or or multiple rows and hooks up the
    * event handling.
    *
-   * @param {HTMLElement} row Row to toggle when checkbox changes.
+   * @param {Element} row Row to toggle when checkbox changes.
    * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
@@ -122,8 +122,13 @@
     var checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.classList.add('mdl-checkbox__input');
-    checkbox.addEventListener('change',
-        this.selectRow_(checkbox, row, opt_rows));
+
+    if (row) {
+      checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
+      checkbox.addEventListener('change', this.selectRow_(checkbox, row));
+    } else if (opt_rows) {
+      checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
+    }
 
     label.appendChild(checkbox);
     componentHandler.upgradeElement(label, 'MaterialCheckbox');
@@ -136,7 +141,9 @@
   MaterialDataTable.prototype.init = function() {
     if (this.element_) {
       var firstHeader = this.element_.querySelector('th');
-      var rows = this.element_.querySelector('tbody').querySelectorAll('tr');
+      var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
+      var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
+      var rows = bodyRows.concat(footRows);
 
       if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
         var th = document.createElement('th');
@@ -148,14 +155,15 @@
           var firstCell = rows[i].querySelector('td');
           if (firstCell) {
             var td = document.createElement('td');
-            var rowCheckbox = this.createCheckbox_(rows[i]);
-            td.appendChild(rowCheckbox);
+            if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
+              var rowCheckbox = this.createCheckbox_(rows[i]);
+              td.appendChild(rowCheckbox);
+            }
             rows[i].insertBefore(td, firstCell);
           }
         }
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
       }
-
-      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
   };
 

data/vendor/assets/javascripts/material/icon-toggle.js

@@ -244,32 +244,6 @@
     }
   };
 
-  /**
-   * Downgrade the component
-   *
-   * @private
-   */
-  MaterialIconToggle.prototype.mdlDowngrade_ = function() {
-    if (this.rippleContainerElement_) {
-      this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
-    }
-    this.inputElement_.removeEventListener('change', this.boundInputOnChange);
-    this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
-    this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
-    this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
-  };
-
-  /**
-   * Public alias for the downgrade method.
-   *
-   * @public
-   */
-  MaterialIconToggle.prototype.mdlDowngrade =
-      MaterialIconToggle.prototype.mdlDowngrade_;
-
-  MaterialIconToggle.prototype['mdlDowngrade'] =
-      MaterialIconToggle.prototype.mdlDowngrade;
-
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -44,11 +44,23 @@
     MAX_WIDTH: '(max-width: 1024px)',
     TAB_SCROLL_PIXELS: 100,
 
-    MENU_ICON: 'menu',
+    MENU_ICON: '',
     CHEVRON_LEFT: 'chevron_left',
     CHEVRON_RIGHT: 'chevron_right'
   };
 
+  /**
+   * Keycodes, for code readability.
+   *
+   * @enum {number}
+   * @private
+   */
+  MaterialLayout.prototype.Keycodes_ = {
+    ENTER: 13,
+    ESCAPE: 27,
+    SPACE: 32
+  };
+
   /**
    * Modes.
    *
@@ -138,6 +150,18 @@
     }
   };
 
+  /**
+   * Handles a keyboard event on the drawer.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialLayout.prototype.keyboardEventHandler_ = function(evt) {
+    if (evt.keyCode === this.Keycodes_.ESCAPE) {
+      this.toggleDrawer();
+    }
+  };
+
   /**
    * Handles changes in screen size.
    *
@@ -157,13 +181,23 @@
   };
 
   /**
-   * Handles toggling of the drawer.
+   * Handles events of drawer button.
    *
+   * @param {Event} evt The event that fired.
    * @private
    */
-  MaterialLayout.prototype.drawerToggleHandler_ = function() {
-    this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
-    this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+  MaterialLayout.prototype.drawerToggleHandler_ = function(evt) {
+    if (evt && (evt.type === 'keydown')) {
+      if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+        // prevent scrolling in drawer nav
+        evt.preventDefault();
+      } else {
+        // prevent other keys
+        return;
+      }
+    }
+
+    this.toggleDrawer();
   };
 
   /**
@@ -209,6 +243,28 @@
     }
   };
 
+  /**
+  * Toggle drawer state
+  *
+  * @public
+  */
+  MaterialLayout.prototype.toggleDrawer = function() {
+    var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+    this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+    this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+
+    // Set accessibility properties.
+    if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+      this.drawer_.setAttribute('aria-hidden', 'false');
+      drawerButton.setAttribute('aria-expanded', 'true');
+    } else {
+      this.drawer_.setAttribute('aria-hidden', 'true');
+      drawerButton.setAttribute('aria-expanded', 'false');
+    }
+  };
+  MaterialLayout.prototype['toggleDrawer'] =
+      MaterialLayout.prototype.toggleDrawer;
+
   /**
    * Initialize element.
    */
@@ -240,6 +296,16 @@
         }
       }
 
+      window.addEventListener('pageshow', function(e) {
+        if (e.persisted) { // when page is loaded from back/forward cache
+          // trigger repaint to let layout scroll in safari
+          this.element_.style.overflowY = 'hidden';
+          requestAnimationFrame(function() {
+            this.element_.style.overflowY = '';
+          }.bind(this));
+        }
+      }.bind(this), false);
+
       if (this.header_) {
         this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
       }
@@ -288,11 +354,14 @@
           this.CssClasses_.DRAWER_BTN);
         if (!drawerButton) {
           drawerButton = document.createElement('div');
+          drawerButton.setAttribute('aria-expanded', 'false');
+          drawerButton.setAttribute('role', 'button');
+          drawerButton.setAttribute('tabindex', '0');
           drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
 
           var drawerButtonIcon = document.createElement('i');
           drawerButtonIcon.classList.add(this.CssClasses_.ICON);
-          drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
+          drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
           drawerButton.appendChild(drawerButtonIcon);
         }
 
@@ -307,6 +376,9 @@
         drawerButton.addEventListener('click',
             this.drawerToggleHandler_.bind(this));
 
+        drawerButton.addEventListener('keydown',
+            this.drawerToggleHandler_.bind(this));
+
         // Add a class if the layout has a drawer, for altering the left padding.
         // Adds the HAS_DRAWER to the elements since this.header_ may or may
         // not be present.
@@ -326,6 +398,9 @@
         obfuscator.addEventListener('click',
             this.drawerToggleHandler_.bind(this));
         this.obfuscator_ = obfuscator;
+
+        this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
+        this.drawer_.setAttribute('aria-hidden', 'true');
       }
 
       // Keep an eye on screen size, and add/remove auxiliary class for styling
@@ -417,6 +492,19 @@
    * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
    */
   function MaterialLayoutTab(tab, tabs, panels, layout) {
+
+    /**
+     * Auxiliary method to programmatically select a tab in the UI.
+     */
+    function selectTab() {
+      var href = tab.href.split('#')[1];
+      var panel = layout.content_.querySelector('#' + href);
+      layout.resetTabState_(tabs);
+      layout.resetPanelState_(panels);
+      tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+      panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+    }
+
     if (layout.tabBar_.classList.contains(
         layout.CssClasses_.JS_RIPPLE_EFFECT)) {
       var rippleContainer = document.createElement('span');
@@ -428,6 +516,15 @@
       tab.appendChild(rippleContainer);
     }
 
+    tab.addEventListener('click', function(e) {
+      if (tab.getAttribute('href').charAt(0) === '#') {
+        e.preventDefault();
+        selectTab();
+      }
+    });
+
+    tab.show = selectTab;
+
     tab.addEventListener('click', function(e) {
       e.preventDefault();
       var href = tab.href.split('#')[1];
@@ -438,6 +535,7 @@
       panel.classList.add(layout.CssClasses_.IS_ACTIVE);
     });
   }
+  window['MaterialLayoutTab'] = MaterialLayoutTab;
 
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.

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

@@ -91,7 +91,6 @@ componentHandler = (function() {
   /** @type {!Array<componentHandler.Component>} */
   var createdComponents_ = [];
 
-  var downgradeMethod_ = 'mdlDowngrade';
   var componentConfigProperty_ = 'mdlComponentConfigInternal_';
 
   /**
@@ -225,7 +224,7 @@ componentHandler = (function() {
         }
       } else {
         throw new Error(
-          'Unable to find a registered component for the given class.');
+            'Unable to find a registered component for the given class.');
       }
 
       var ev = document.createEvent('Events');
@@ -335,47 +334,25 @@ componentHandler = (function() {
     }
   }
 
-  /**
-   * Finds a created component by a given DOM node.
-   *
-   * @param {!Node} node
-   * @return {*}
-   */
-  function findCreatedComponentByNodeInternal(node) {
-    for (var n = 0; n < createdComponents_.length; n++) {
-      var component = createdComponents_[n];
-      if (component.element_ === node) {
-        return component;
-      }
-    }
-  }
-
   /**
    * Check the component for the downgrade method.
    * Execute if found.
    * Remove component from createdComponents list.
    *
-   * @param {*} component
+   * @param {?componentHandler.Component} component
    */
   function deconstructComponentInternal(component) {
-    if (component &&
-        component[componentConfigProperty_]
-          .classConstructor.prototype
-          .hasOwnProperty(downgradeMethod_)) {
-      component[downgradeMethod_]();
-      var componentIndex = createdComponents_.indexOf(component);
-      createdComponents_.splice(componentIndex, 1);
-
-      var upgrades = component.element_.getAttribute('data-upgraded').split(',');
-      var componentPlace = upgrades.indexOf(
-          component[componentConfigProperty_].classAsString);
-      upgrades.splice(componentPlace, 1);
-      component.element_.setAttribute('data-upgraded', upgrades.join(','));
+    var componentIndex = createdComponents_.indexOf(component);
+    createdComponents_.splice(componentIndex, 1);
 
-      var ev = document.createEvent('Events');
-      ev.initEvent('mdl-componentdowngraded', true, true);
-      component.element_.dispatchEvent(ev);
-    }
+    var upgrades = component.element_.getAttribute('data-upgraded').split(',');
+    var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
+    upgrades.splice(componentPlace, 1);
+    component.element_.setAttribute('data-upgraded', upgrades.join(','));
+
+    var ev = document.createEvent('Events');
+    ev.initEvent('mdl-componentdowngraded', true, true);
+    component.element_.dispatchEvent(ev);
   }
 
   /**
@@ -389,7 +366,9 @@ componentHandler = (function() {
      * @param  {!Node} node the node to be downgraded
      */
     var downgradeNode = function(node) {
-      deconstructComponentInternal(findCreatedComponentByNodeInternal(node));
+      createdComponents_.filter(function(item) {
+        return item.element_ === node;
+      }).forEach(deconstructComponentInternal);
     };
     if (nodes instanceof Array || nodes instanceof NodeList) {
       for (var n = 0; n < nodes.length; n++) {

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

@@ -112,7 +112,8 @@
       container.insertBefore(outline, this.element_);
 
       // Find the "for" element and bind events to it.
-      var forElId = this.element_.getAttribute('for');
+      var forElId = this.element_.getAttribute('for') ||
+                      this.element_.getAttribute('data-mdl-for');
       var forEl = null;
       if (forElId) {
         forEl = document.getElementById(forElId);
@@ -337,21 +338,25 @@
     }
   };
 
+  /**
+   * Cleanup function to remove animation listeners.
+   *
+   * @param {Event} evt
+   * @private
+   */
+
+  MaterialMenu.prototype.removeAnimationEndListener_ = function(evt) {
+    evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+  };
+
   /**
    * 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);
-
-    // Remove animation class once the transition is done.
-    this.element_.addEventListener('transitionend', cleanup);
-    this.element_.addEventListener('webkitTransitionEnd', cleanup);
+    this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+    this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
   };
 
   /**
@@ -432,7 +437,7 @@
 
       // Remove all transition delays; menu items fade out concurrently.
       for (var i = 0; i < items.length; i++) {
-        items[i].style.transitionDelay = null;
+        items[i].style.removeProperty('transition-delay');
       }
 
       // Measure the inner element.
@@ -466,31 +471,6 @@
   };
   MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
 
-  /**
-   * Downgrade the component.
-   *
-   * @private
-   */
-  MaterialMenu.prototype.mdlDowngrade_ = function() {
-    var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
-
-    for (var i = 0; i < items.length; i++) {
-      items[i].removeEventListener('click', this.boundItemClick_);
-      items[i].removeEventListener('keydown', this.boundItemKeydown_);
-    }
-  };
-
-  /**
-   * Public alias for the downgrade method.
-   *
-   * @public
-   */
-  MaterialMenu.prototype.mdlDowngrade =
-      MaterialMenu.prototype.mdlDowngrade_;
-
-  MaterialMenu.prototype['mdlDowngrade'] =
-      MaterialMenu.prototype.mdlDowngrade;
-
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({