material_design_lite-sass 1.0.6.3 → 1.1.0

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

@@ -112,28 +112,6 @@
     }
   };
 
-  /**
-   * Downgrade the component
-   *
-   * @private
-   */
-  MaterialProgress.prototype.mdlDowngrade_ = function() {
-    while (this.element_.firstChild) {
-      this.element_.removeChild(this.element_.firstChild);
-    }
-  };
-
-  /**
-   * 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

@@ -268,34 +268,6 @@
     }
   };
 
-  /**
-   * 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

@@ -122,14 +122,13 @@
   MaterialRipple.prototype.upHandler_ = function(event) {
     // Don't fire for the artificial "mouseup" generated by a double-click.
     if (event && event.detail !== 2) {
-      this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+      // Allow a repaint to occur before removing this class, so the animation
+      // shows for tap events, which seem to trigger a mouseup too soon after
+      // mousedown.
+      window.setTimeout(function() {
+        this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+      }.bind(this), 0);
     }
-    // Allow a repaint to occur before removing this class, so the animation
-    // shows for tap events, which seem to trigger a mouseup too soon after
-    // mousedown.
-    window.setTimeout(function() {
-      this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
-    }.bind(this), 0);
   };
 
   /**
@@ -250,34 +249,6 @@
     }
   };
 
-  /**
-   * Downgrade the component
-   *
-   * @private
-   */
-  MaterialRipple.prototype.mdlDowngrade_ = function() {
-    this.element_.removeEventListener('mousedown',
-    this.boundDownHandler);
-    this.element_.removeEventListener('touchstart',
-        this.boundDownHandler);
-
-    this.element_.removeEventListener('mouseup', this.boundUpHandler);
-    this.element_.removeEventListener('mouseleave', this.boundUpHandler);
-    this.element_.removeEventListener('touchend', this.boundUpHandler);
-    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

@@ -233,29 +233,6 @@
     }
   };
 
-  /**
-   * Downgrade the component
-   *
-   * @private
-   */
-  MaterialSlider.prototype.mdlDowngrade_ = function() {
-    this.element_.removeEventListener('input', this.boundInputHandler);
-    this.element_.removeEventListener('change', this.boundChangeHandler);
-    this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
-    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/snackbar.js

@@ -0,0 +1,189 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+(function() {
+  'use strict';
+
+  /**
+   * Class constructor for Snackbar 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 MaterialSnackbar = function MaterialSnackbar(element) {
+    this.element_ = element;
+    this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
+    this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
+    if (!this.textElement_) {
+      throw new Error('There must be a message element for a snackbar.');
+    }
+    if (!this.actionElement_) {
+      throw new Error('There must be an action element for a snackbar.');
+    }
+    this.active = false;
+    this.actionHandler_ = undefined;
+    this.message_ = undefined;
+    this.actionText_ = undefined;
+    this.queuedNotifications_ = [];
+    this.setActionHidden_(true);
+  };
+  window['MaterialSnackbar'] = MaterialSnackbar;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+  MaterialSnackbar.prototype.Constant_ = {
+    // The duration of the snackbar show/hide animation, in ms.
+    ANIMATION_LENGTH: 250
+  };
+
+  /**
+   * 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
+   */
+  MaterialSnackbar.prototype.cssClasses_ = {
+    SNACKBAR: 'mdl-snackbar',
+    MESSAGE: 'mdl-snackbar__text',
+    ACTION: 'mdl-snackbar__action',
+    ACTIVE: 'mdl-snackbar--active'
+  };
+
+  /**
+   * Display the snackbar.
+   *
+   * @private
+   */
+  MaterialSnackbar.prototype.displaySnackbar_ = function() {
+    this.element_.setAttribute('aria-hidden', 'true');
+
+    if (this.actionHandler_) {
+      this.actionElement_.textContent = this.actionText_;
+      this.actionElement_.addEventListener('click', this.actionHandler_);
+      this.setActionHidden_(false);
+    }
+
+    this.textElement_.textContent = this.message_;
+    this.element_.classList.add(this.cssClasses_.ACTIVE);
+    this.element_.setAttribute('aria-hidden', 'false');
+    setTimeout(this.cleanup_.bind(this), this.timeout_);
+
+  };
+
+  /**
+   * Show the snackbar.
+   *
+   * @param {Object} data The data for the notification.
+   * @public
+   */
+  MaterialSnackbar.prototype.showSnackbar = function(data) {
+    if (data === undefined) {
+      throw new Error(
+        'Please provide a data object with at least a message to display.');
+    }
+    if (data['message'] === undefined) {
+      throw new Error('Please provide a message to be displayed.');
+    }
+    if (data['actionHandler'] && !data['actionText']) {
+      throw new Error('Please provide action text with the handler.');
+    }
+    if (this.active) {
+      this.queuedNotifications_.push(data);
+    } else {
+      this.active = true;
+      this.message_ = data['message'];
+      if (data['timeout']) {
+        this.timeout_ = data['timeout'];
+      } else {
+        this.timeout_ = 2750;
+      }
+      if (data['actionHandler']) {
+        this.actionHandler_ = data['actionHandler'];
+      }
+      if (data['actionText']) {
+        this.actionText_ = data['actionText'];
+      }
+      this.displaySnackbar_();
+    }
+  };
+  MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
+
+  /**
+   * Check if the queue has items within it.
+   * If it does, display the next entry.
+   *
+   * @private
+   */
+  MaterialSnackbar.prototype.checkQueue_ = function() {
+    if (this.queuedNotifications_.length > 0) {
+      this.showSnackbar(this.queuedNotifications_.shift());
+    }
+  };
+
+  /**
+   * Cleanup the snackbar event listeners and accessiblity attributes.
+   *
+   * @private
+   */
+  MaterialSnackbar.prototype.cleanup_ = function() {
+    this.element_.classList.remove(this.cssClasses_.ACTIVE);
+    setTimeout(function() {
+      this.element_.setAttribute('aria-hidden', 'true');
+      this.textElement_.textContent = '';
+      if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
+        this.setActionHidden_(true);
+        this.actionElement_.textContent = '';
+        this.actionElement_.removeEventListener('click', this.actionHandler_);
+      }
+      this.actionHandler_ = undefined;
+      this.message_ = undefined;
+      this.actionText_ = undefined;
+      this.active = false;
+      this.checkQueue_();
+    }.bind(this), /** @type {number} */ (this.Constant_.ANIMATION_LENGTH));
+  };
+
+  /**
+   * Set the action handler hidden state.
+   *
+   * @param {boolean} value
+   * @private
+   */
+  MaterialSnackbar.prototype.setActionHidden_ = function(value) {
+    if (value) {
+      this.actionElement_.setAttribute('aria-hidden', 'true');
+    } else {
+      this.actionElement_.removeAttribute('aria-hidden');
+    }
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialSnackbar,
+    classAsString: 'MaterialSnackbar',
+    cssClass: 'mdl-js-snackbar',
+    widget: true
+  });
+
+})();

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

@@ -262,32 +262,6 @@
     }
   };
 
-  /**
-   * Downgrade the component.
-   *
-   * @private
-   */
-  MaterialSwitch.prototype.mdlDowngrade_ = function() {
-    if (this.rippleContainerElement_) {
-      this.rippleContainerElement_.removeEventListener('mouseup', this.boundMouseUpHandler);
-    }
-    this.inputElement_.removeEventListener('change', this.boundChangeHandler);
-    this.inputElement_.removeEventListener('focus', this.boundFocusHandler);
-    this.inputElement_.removeEventListener('blur', this.boundBlurHandler);
-    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({

data/vendor/assets/javascripts/material/tabs.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 MaterialTabs = function MaterialTabs(element) {
     // Stores the HTML element.
@@ -124,7 +124,7 @@
    * Constructor for an individual tab.
    *
    * @constructor
-   * @param {HTMLElement} tab The HTML element for the tab.
+   * @param {Element} tab The HTML element for the tab.
    * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
    */
   function MaterialTab(tab, ctx) {

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

@@ -98,6 +98,16 @@
     this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
   };
 
+  /**
+   * Handle reset event from out side.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTextfield.prototype.onReset_ = function(event) {
+    this.updateClasses_();
+  };
+
   /**
    * Handle class updates.
    *
@@ -107,6 +117,7 @@
     this.checkDisabled();
     this.checkValidity();
     this.checkDirty();
+    this.checkFocus();
   };
 
   // Public methods.
@@ -126,6 +137,21 @@
   MaterialTextfield.prototype['checkDisabled'] =
       MaterialTextfield.prototype.checkDisabled;
 
+  /**
+  * Check the focus state and update field accordingly.
+  *
+  * @public
+  */
+  MaterialTextfield.prototype.checkFocus = function() {
+    if (Boolean(this.element_.querySelector(':focus'))) {
+      this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    } else {
+      this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    }
+  };
+  MaterialTextfield.prototype['checkFocus'] =
+    MaterialTextfield.prototype.checkFocus;
+
   /**
    * Check the validity state and update field accordingly.
    *
@@ -215,9 +241,11 @@
         this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
         this.boundFocusHandler = this.onFocus_.bind(this);
         this.boundBlurHandler = this.onBlur_.bind(this);
+        this.boundResetHandler = this.onReset_.bind(this);
         this.input_.addEventListener('input', this.boundUpdateClassesHandler);
         this.input_.addEventListener('focus', this.boundFocusHandler);
         this.input_.addEventListener('blur', this.boundBlurHandler);
+        this.input_.addEventListener('reset', this.boundResetHandler);
 
         if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
           // TODO: This should handle pasting multi line text.
@@ -232,35 +260,14 @@
         if (invalid) {
           this.element_.classList.add(this.CssClasses_.IS_INVALID);
         }
+        if (this.input_.hasAttribute('autofocus')) {
+          this.element_.focus();
+          this.checkFocus();
+        }
       }
     }
   };
 
-  /**
-   * Downgrade the component
-   *
-   * @private
-   */
-  MaterialTextfield.prototype.mdlDowngrade_ = function() {
-    this.input_.removeEventListener('input', this.boundUpdateClassesHandler);
-    this.input_.removeEventListener('focus', this.boundFocusHandler);
-    this.input_.removeEventListener('blur', this.boundBlurHandler);
-    if (this.boundKeyDownHandler) {
-      this.input_.removeEventListener('keydown', this.boundKeyDownHandler);
-    }
-  };
-
-  /**
-   * Public alias for the downgrade method.
-   *
-   * @public
-   */
-  MaterialTextfield.prototype.mdlDowngrade =
-      MaterialTextfield.prototype.mdlDowngrade_;
-
-  MaterialTextfield.prototype['mdlDowngrade'] =
-      MaterialTextfield.prototype.mdlDowngrade;
-
   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   componentHandler.register({