material_design_lite-sass 1.0.5 → 1.0.6

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

@@ -125,6 +125,17 @@
     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

@@ -273,6 +273,17 @@
     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

@@ -56,6 +56,7 @@
   MaterialDataTable.prototype.CssClasses_ = {
     DATA_TABLE: 'mdl-data-table',
     SELECTABLE: 'mdl-data-table--selectable',
+    SELECT_ELEMENT: 'mdl-data-table__select',
     IS_SELECTED: 'is-selected',
     IS_UPGRADED: 'is-upgraded'
   };
@@ -111,19 +112,18 @@
    */
   MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
     var label = document.createElement('label');
-    label.classList.add('mdl-checkbox');
-    label.classList.add('mdl-js-checkbox');
-    label.classList.add('mdl-js-ripple-effect');
-    label.classList.add('mdl-data-table__select');
+    var labelClasses = [
+      'mdl-checkbox',
+      'mdl-js-checkbox',
+      'mdl-js-ripple-effect',
+      this.CssClasses_.SELECT_ELEMENT
+    ];
+    label.className = labelClasses.join(' ');
     var checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.classList.add('mdl-checkbox__input');
-    if (row) {
-      checkbox.addEventListener('change', this.selectRow_(checkbox, row));
-    } else if (opt_rows) {
-      checkbox.addEventListener('change',
-          this.selectRow_(checkbox, null, opt_rows));
-    }
+    checkbox.addEventListener('change',
+        this.selectRow_(checkbox, row, opt_rows));
 
     label.appendChild(checkbox);
     componentHandler.upgradeElement(label, 'MaterialCheckbox');

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

@@ -259,6 +259,17 @@
     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

@@ -151,6 +151,7 @@
       // 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);
       }
     }
   };
@@ -162,6 +163,7 @@
    */
   MaterialLayout.prototype.drawerToggleHandler_ = function() {
     this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+    this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
   };
 
   /**
@@ -219,7 +221,8 @@
       container.appendChild(this.element_);
 
       var directChildren = this.element_.childNodes;
-      for (var c = 0; c < directChildren.length; c++) {
+      var numChildren = directChildren.length;
+      for (var c = 0; c < numChildren; c++) {
         var child = directChildren[c];
         if (child.classList &&
             child.classList.contains(this.CssClasses_.HEADER)) {
@@ -243,13 +246,6 @@
 
       var mode = this.Mode_.STANDARD;
 
-      // Keep an eye on screen size, and add/remove auxiliary class for styling
-      // of small screens.
-      this.screenSizeMediaQuery_ = window.matchMedia(
-          /** @type {string} */ (this.Constant_.MAX_WIDTH));
-      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
-      this.screenSizeHandler_();
-
       if (this.header_) {
         if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
           mode = this.Mode_.SEAMED;
@@ -286,19 +282,11 @@
         }
       }
 
-      /**
-       * Prevents an event from triggering the default behaviour.
-       * @param  {Event} ev the event to eat.
-       */
-      var eatEvent = function(ev) {
-        ev.preventDefault();
-      };
-
       // Add drawer toggling button to our layout, if we have an openable drawer.
       if (this.drawer_) {
         var drawerButton = this.element_.querySelector('.' +
           this.CssClasses_.DRAWER_BTN);
-        if (typeof(drawerButton) === 'undefined' || drawerButton === null) {
+        if (!drawerButton) {
           drawerButton = document.createElement('div');
           drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
 
@@ -324,8 +312,6 @@
         // not be present.
         this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
 
-        this.drawer_.addEventListener('mousewheel', eatEvent);
-
         // If we have a fixed header, add the button to the header rather than
         // the layout.
         if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
@@ -339,9 +325,16 @@
         this.element_.appendChild(obfuscator);
         obfuscator.addEventListener('click',
             this.drawerToggleHandler_.bind(this));
-        obfuscator.addEventListener('mousewheel', eatEvent);
+        this.obfuscator_ = obfuscator;
       }
 
+      // Keep an eye on screen size, and add/remove auxiliary class for styling
+      // of small screens.
+      this.screenSizeMediaQuery_ = window.matchMedia(
+          /** @type {string} */ (this.Constant_.MAX_WIDTH));
+      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+      this.screenSizeHandler_();
+
       // Initialize tabs, if any.
       if (this.header_ && this.tabBar_) {
         this.element_.classList.add(this.CssClasses_.HAS_TABS);
@@ -424,29 +417,26 @@
    * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
    */
   function MaterialLayoutTab(tab, tabs, panels, layout) {
-    if (tab) {
-      if (layout.tabBar_.classList.contains(
-          layout.CssClasses_.JS_RIPPLE_EFFECT)) {
-        var rippleContainer = document.createElement('span');
-        rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
-        rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
-        var ripple = document.createElement('span');
-        ripple.classList.add(layout.CssClasses_.RIPPLE);
-        rippleContainer.appendChild(ripple);
-        tab.appendChild(rippleContainer);
-      }
-
-      tab.addEventListener('click', function(e) {
-        e.preventDefault();
-        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');
+      rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
+      rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
+      var ripple = document.createElement('span');
+      ripple.classList.add(layout.CssClasses_.RIPPLE);
+      rippleContainer.appendChild(ripple);
+      tab.appendChild(rippleContainer);
     }
+
+    tab.addEventListener('click', function(e) {
+      e.preventDefault();
+      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);
+    });
   }
 
   // The component registers itself. It can assume componentHandler is available

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

@@ -91,7 +91,7 @@ componentHandler = (function() {
   /** @type {!Array<componentHandler.Component>} */
   var createdComponents_ = [];
 
-  var downgradeMethod_ = 'mdlDowngrade_';
+  var downgradeMethod_ = 'mdlDowngrade';
   var componentConfigProperty_ = 'mdlComponentConfigInternal_';
 
   /**

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

@@ -125,15 +125,15 @@
       }
 
       var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
-      this.boundItemKeydown = this.handleItemKeyboardEvent_.bind(this);
-      this.boundItemClick = this.handleItemClick_.bind(this);
+      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);
+        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);
+        items[i].addEventListener('keydown', this.boundItemKeydown_);
       }
 
       // Add ripple classes to each item, if the user has enabled ripples.
@@ -294,7 +294,7 @@
    * @private
    */
   MaterialMenu.prototype.handleItemClick_ = function(evt) {
-    if (evt.target.getAttribute('disabled') !== null) {
+    if (evt.target.hasAttribute('disabled')) {
       evt.stopPropagation();
     } else {
       // Wait some time before closing menu, so the user can see the ripple.
@@ -409,7 +409,9 @@
         // 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_) {
+        // Also check if the clicked element is a menu item
+        // if so, do nothing.
+        if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
           document.removeEventListener('click', callback);
           this.hide();
         }
@@ -434,8 +436,9 @@
       }
 
       // Measure the inner element.
-      var height = this.element_.getBoundingClientRect().height;
-      var width = this.element_.getBoundingClientRect().width;
+      var rect = this.element_.getBoundingClientRect();
+      var height = rect.height;
+      var width = rect.width;
 
       // Turn on animation, and apply the final clip. Also make invisible.
       // This triggers the transitions.
@@ -472,11 +475,22 @@
     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);
+      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({

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

@@ -123,6 +123,17 @@
     }
   };
 
+  /**
+   * Public alias for the downgrade method.
+   *
+   * @public
+   */
+  MaterialProgress.prototype.mdlDowngrade =
+      MaterialProgress.prototype.mdlDowngrade_;
+
+  MaterialProgress.prototype['mdlDowngrade'] =
+      MaterialProgress.prototype.mdlDowngrade;
+
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -225,6 +225,11 @@
       this.btnElement_ = this.element_.querySelector('.' +
           this.CssClasses_.RADIO_BTN);
 
+      this.boundChangeHandler_ = this.onChange_.bind(this);
+      this.boundFocusHandler_ = this.onChange_.bind(this);
+      this.boundBlurHandler_ = this.onBlur_.bind(this);
+      this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
+
       var outerCircle = document.createElement('span');
       outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
 
@@ -244,7 +249,7 @@
             this.CssClasses_.RIPPLE_CONTAINER);
         rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
         rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
-        rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
+        rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
 
         var ripple = document.createElement('span');
         ripple.classList.add(this.CssClasses_.RIPPLE);
@@ -253,16 +258,44 @@
         this.element_.appendChild(rippleContainer);
       }
 
-      this.btnElement_.addEventListener('change', this.onChange_.bind(this));
-      this.btnElement_.addEventListener('focus', this.onFocus_.bind(this));
-      this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
-      this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
+      this.btnElement_.addEventListener('change', this.boundChangeHandler_);
+      this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
+      this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
+      this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
 
       this.updateClasses_();
       this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
   };
 
+  /**
+   * Downgrade the element.
+   *
+   * @private
+   */
+  MaterialRadio.prototype.mdlDowngrade_ = function() {
+    var rippleContainer = this.element_.querySelector('.' +
+      this.CssClasses_.RIPPLE_CONTAINER);
+    this.btnElement_.removeEventListener('change', this.boundChangeHandler_);
+    this.btnElement_.removeEventListener('focus', this.boundFocusHandler_);
+    this.btnElement_.removeEventListener('blur', this.boundBlurHandler_);
+    this.element_.removeEventListener('mouseup', this.boundMouseUpHandler_);
+    if (rippleContainer) {
+      rippleContainer.removeEventListener('mouseup', this.boundMouseUpHandler_);
+      this.element_.removeChild(rippleContainer);
+    }
+  };
+
+  /**
+   * Public alias for the downgrade method.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.mdlDowngrade = MaterialRadio.prototype.mdlDowngrade_;
+
+  MaterialRadio.prototype['mdlDowngrade'] =
+      MaterialRadio.prototype.mdlDowngrade;
+
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -267,6 +267,17 @@
     this.element_.removeEventListener('blur', this.boundUpHandler);
   };
 
+  /**
+   * Public alias for the downgrade method.
+   *
+   * @public
+   */
+  MaterialRipple.prototype.mdlDowngrade =
+      MaterialRipple.prototype.mdlDowngrade_;
+
+  MaterialRipple.prototype['mdlDowngrade'] =
+      MaterialRipple.prototype.mdlDowngrade;
+
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -245,6 +245,17 @@
     this.element_.parentElement.removeEventListener('mousedown', this.boundContainerMouseDownHandler);
   };
 
+  /**
+   * Public alias for the downgrade method.
+   *
+   * @public
+   */
+  MaterialSlider.prototype.mdlDowngrade =
+      MaterialSlider.prototype.mdlDowngrade_;
+
+  MaterialSlider.prototype['mdlDowngrade'] =
+      MaterialSlider.prototype.mdlDowngrade;
+
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({

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

@@ -277,6 +277,17 @@
     this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
   };
 
+  /**
+   * Public alias for the downgrade method.
+   *
+   * @public
+   */
+  MaterialSwitch.prototype.mdlDowngrade =
+      MaterialSwitch.prototype.mdlDowngrade_;
+
+  MaterialSwitch.prototype['mdlDowngrade'] =
+      MaterialSwitch.prototype.mdlDowngrade;
+
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({