material_design_lite-sass 1.0.2.1 → 1.0.3

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

@@ -15,138 +15,140 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for Tabs 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 MaterialTabs(element) {
-  'use strict';
-
-  // Stores the HTML element.
-  this.element_ = element;
-
-  // Initialize instance.
-  this.init();
-}
-
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string}
- * @private
- */
-MaterialTabs.prototype.Constant_ = {
-  // None at the moment.
-};
-
-/**
- * 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
- */
-MaterialTabs.prototype.CssClasses_ = {
-  TAB_CLASS: 'mdl-tabs__tab',
-  PANEL_CLASS: 'mdl-tabs__panel',
-  ACTIVE_CLASS: 'is-active',
-  UPGRADED_CLASS: 'is-upgraded',
-
-  MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
-  MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
-  MDL_RIPPLE: 'mdl-ripple',
-  MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
-};
-
-/**
- * Handle clicks to a tabs component
- * @private
- */
-MaterialTabs.prototype.initTabs_ = function(e) {
-  'use strict';
-
-  if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
-    this.element_.classList.add(
-      this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
-  }
-
-  // Select element tabs, document panels
-  this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
-  this.panels_ =
-      this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
-
-  // Create new tabs for each tab element
-  for (var i = 0; i < this.tabs_.length; i++) {
-    new MaterialTab(this.tabs_[i], this);
-  }
-
-  this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
-};
-
-/**
- * Reset tab state, dropping active classes
- * @private
- */
-MaterialTabs.prototype.resetTabState_ = function() {
+(function() {
   'use strict';
 
-  for (var k = 0; k < this.tabs_.length; k++) {
-    this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
-  }
-};
-
-/**
- * Reset panel state, droping active classes
- * @private
- */
-MaterialTabs.prototype.resetPanelState_ = function() {
-  'use strict';
-
-  for (var j = 0; j < this.panels_.length; j++) {
-    this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
-  }
-};
-
-MaterialTabs.prototype.init = function() {
-  'use strict';
-
-  if (this.element_) {
-    this.initTabs_();
-  }
-};
+  /**
+   * Class constructor for Tabs 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 MaterialTabs = function MaterialTabs(element) {
+    // Stores the HTML element.
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialTabs = MaterialTabs;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String}
+   * @private
+   */
+  MaterialTabs.prototype.Constant_ = {
+    // None at the moment.
+  };
+
+  /**
+   * 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
+   */
+  MaterialTabs.prototype.CssClasses_ = {
+    TAB_CLASS: 'mdl-tabs__tab',
+    PANEL_CLASS: 'mdl-tabs__panel',
+    ACTIVE_CLASS: 'is-active',
+    UPGRADED_CLASS: 'is-upgraded',
+
+    MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
+    MDL_RIPPLE: 'mdl-ripple',
+    MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+  };
+
+  /**
+   * Handle clicks to a tabs component
+   *
+   * @private
+   */
+  MaterialTabs.prototype.initTabs_ = function() {
+    if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+      this.element_.classList.add(
+        this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+    }
 
-function MaterialTab(tab, ctx) {
-  'use strict';
+    // Select element tabs, document panels
+    this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
+    this.panels_ =
+        this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
 
-  if (tab) {
-    if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
-      var rippleContainer = document.createElement('span');
-      rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
-      rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
-      var ripple = document.createElement('span');
-      ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
-      rippleContainer.appendChild(ripple);
-      tab.appendChild(rippleContainer);
+    // Create new tabs for each tab element
+    for (var i = 0; i < this.tabs_.length; i++) {
+      new MaterialTab(this.tabs_[i], this);
     }
 
-    tab.addEventListener('click', function(e) {
-      e.preventDefault();
-      var href = tab.href.split('#')[1];
-      var panel = ctx.element_.querySelector('#' + href);
-      ctx.resetTabState_();
-      ctx.resetPanelState_();
-      tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
-      panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
-    });
+    this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
+  };
+
+  /**
+   * Reset tab state, dropping active classes
+   *
+   * @private
+   */
+  MaterialTabs.prototype.resetTabState_ = function() {
+    for (var k = 0; k < this.tabs_.length; k++) {
+      this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+    }
+  };
+
+  /**
+   * Reset panel state, droping active classes
+   *
+   * @private
+   */
+  MaterialTabs.prototype.resetPanelState_ = function() {
+    for (var j = 0; j < this.panels_.length; j++) {
+      this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+    }
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialTabs.prototype.init = function() {
+    if (this.element_) {
+      this.initTabs_();
+    }
+  };
+
+  function MaterialTab(tab, ctx) {
+    if (tab) {
+      if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+        var rippleContainer = document.createElement('span');
+        rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
+        rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
+        var ripple = document.createElement('span');
+        ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
+        rippleContainer.appendChild(ripple);
+        tab.appendChild(rippleContainer);
+      }
+
+      tab.addEventListener('click', function(e) {
+        e.preventDefault();
+        var href = tab.href.split('#')[1];
+        var panel = ctx.element_.querySelector('#' + href);
+        ctx.resetTabState_();
+        ctx.resetPanelState_();
+        tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+        panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+      });
 
+    }
   }
-}
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialTabs,
-  classAsString: 'MaterialTabs',
-  cssClass: 'mdl-js-tabs'
-});
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialTabs,
+    classAsString: 'MaterialTabs',
+    cssClass: 'mdl-js-tabs'
+  });
+})();

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

@@ -15,233 +15,232 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for Textfield 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 MaterialTextfield(element) {
-  'use strict';
-
-  this.element_ = element;
-  this.maxRows = this.Constant_.NO_MAX_ROWS;
-  // Initialize instance.
-  this.init();
-}
-
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string | number}
- * @private
- */
-MaterialTextfield.prototype.Constant_ = {
-  NO_MAX_ROWS: -1,
-  MAX_ROWS_ATTRIBUTE: 'maxrows'
-};
-
-/**
- * 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
- */
-MaterialTextfield.prototype.CssClasses_ = {
-  LABEL: 'mdl-textfield__label',
-  INPUT: 'mdl-textfield__input',
-  IS_DIRTY: 'is-dirty',
-  IS_FOCUSED: 'is-focused',
-  IS_DISABLED: 'is-disabled',
-  IS_INVALID: 'is-invalid',
-  IS_UPGRADED: 'is-upgraded'
-};
-
-/**
- * Handle input being entered.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialTextfield.prototype.onKeyDown_ = function(event) {
+(function() {
   'use strict';
 
-  var currentRowCount = event.target.value.split('\n').length;
-  if (event.keyCode === 13) {
-    if (currentRowCount >= this.maxRows) {
-      event.preventDefault();
+  /**
+   * Class constructor for Textfield 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 MaterialTextfield = function MaterialTextfield(element) {
+    this.element_ = element;
+    this.maxRows = this.Constant_.NO_MAX_ROWS;
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialTextfield = MaterialTextfield;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String | Number}
+   * @private
+   */
+  MaterialTextfield.prototype.Constant_ = {
+    NO_MAX_ROWS: -1,
+    MAX_ROWS_ATTRIBUTE: 'maxrows'
+  };
+
+  /**
+   * 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
+   */
+  MaterialTextfield.prototype.CssClasses_ = {
+    LABEL: 'mdl-textfield__label',
+    INPUT: 'mdl-textfield__input',
+    IS_DIRTY: 'is-dirty',
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_INVALID: 'is-invalid',
+    IS_UPGRADED: 'is-upgraded'
+  };
+
+  /**
+   * Handle input being entered.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTextfield.prototype.onKeyDown_ = function(event) {
+    var currentRowCount = event.target.value.split('\n').length;
+    if (event.keyCode === 13) {
+      if (currentRowCount >= this.maxRows) {
+        event.preventDefault();
+      }
     }
-  }
-};
-
-/**
- * Handle focus.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialTextfield.prototype.onFocus_ = function(event) {
-  'use strict';
-
-  this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
-};
-
-/**
- * Handle lost focus.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialTextfield.prototype.onBlur_ = function(event) {
-  'use strict';
-
-  this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
-};
-
-/**
- * Handle class updates.
- * @param {HTMLElement} button The button whose classes we should update.
- * @param {HTMLElement} label The label whose classes we should update.
- * @private
- */
-MaterialTextfield.prototype.updateClasses_ = function() {
-  'use strict';
-  this.checkDisabled();
-  this.checkValidity();
-  this.checkDirty();
-};
-
-// Public methods.
-
-/**
- * Check the disabled state and update field accordingly.
- * @public
- */
-MaterialTextfield.prototype.checkDisabled = function() {
-  'use strict';
-  if (this.input_.disabled) {
-    this.element_.classList.add(this.CssClasses_.IS_DISABLED);
-  } else {
-    this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
-  }
-};
-
-/**
- * Check the validity state and update field accordingly.
- * @public
- */
-MaterialTextfield.prototype.checkValidity = function() {
-  'use strict';
-  if (this.input_.validity.valid) {
-    this.element_.classList.remove(this.CssClasses_.IS_INVALID);
-  } else {
-    this.element_.classList.add(this.CssClasses_.IS_INVALID);
-  }
-};
-
-/**
-* Check the dirty state and update field accordingly.
-* @public
-*/
-MaterialTextfield.prototype.checkDirty = function() {
-  'use strict';
-  if (this.input_.value && this.input_.value.length > 0) {
-    this.element_.classList.add(this.CssClasses_.IS_DIRTY);
-  } else {
-    this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
-  }
-};
-
-/**
- * Disable text field.
- * @public
- */
-MaterialTextfield.prototype.disable = function() {
-  'use strict';
-
-  this.input_.disabled = true;
-  this.updateClasses_();
-};
-
-/**
- * Enable text field.
- * @public
- */
-MaterialTextfield.prototype.enable = function() {
-  'use strict';
-
-  this.input_.disabled = false;
-  this.updateClasses_();
-};
-
-/**
- * Update text field value.
- * @param {String} value The value to which to set the control (optional).
- * @public
- */
-MaterialTextfield.prototype.change = function(value) {
-  'use strict';
-
-  if (value) {
-    this.input_.value = value;
-  }
-  this.updateClasses_();
-};
-
-/**
- * Initialize element.
- */
-MaterialTextfield.prototype.init = function() {
-  'use strict';
-
-  if (this.element_) {
-    this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
-    this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+  };
+
+  /**
+   * Handle focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTextfield.prototype.onFocus_ = function(event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+  };
+
+  /**
+   * Handle lost focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTextfield.prototype.onBlur_ = function(event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+  };
+
+  /**
+   * Handle class updates.
+   *
+   * @private
+   */
+  MaterialTextfield.prototype.updateClasses_ = function() {
+    this.checkDisabled();
+    this.checkValidity();
+    this.checkDirty();
+  };
+
+  // Public methods.
+
+  /**
+   * Check the disabled state and update field accordingly.
+   *
+   * @public
+   */
+  MaterialTextfield.prototype.checkDisabled = function() {
+    if (this.input_.disabled) {
+      this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+      this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+  };
+
+  /**
+   * Check the validity state and update field accordingly.
+   *
+   * @public
+   */
+  MaterialTextfield.prototype.checkValidity = function() {
+    if (this.input_.validity.valid) {
+      this.element_.classList.remove(this.CssClasses_.IS_INVALID);
+    } else {
+      this.element_.classList.add(this.CssClasses_.IS_INVALID);
+    }
+  };
+
+  /**
+   * Check the dirty state and update field accordingly.
+   *
+   * @public
+   */
+  MaterialTextfield.prototype.checkDirty = function() {
+    if (this.input_.value && this.input_.value.length > 0) {
+      this.element_.classList.add(this.CssClasses_.IS_DIRTY);
+    } else {
+      this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
+    }
+  };
+
+  /**
+   * Disable text field.
+   *
+   * @public
+   */
+  MaterialTextfield.prototype.disable = function() {
+    this.input_.disabled = true;
+    this.updateClasses_();
+  };
+
+  /**
+   * Enable text field.
+   *
+   * @public
+   */
+  MaterialTextfield.prototype.enable = function() {
+    this.input_.disabled = false;
+    this.updateClasses_();
+  };
+
+  /**
+   * Update text field value.
+   *
+   * @param {String} value The value to which to set the control (optional).
+   * @public
+   */
+  MaterialTextfield.prototype.change = function(value) {
+
+    if (value) {
+      this.input_.value = value;
+    }
+    this.updateClasses_();
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialTextfield.prototype.init = function() {
+
+    if (this.element_) {
+      this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
+      this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+
+      if (this.input_) {
+        if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
+          this.maxRows = parseInt(this.input_.getAttribute(
+              this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
+          if (isNaN(this.maxRows)) {
+            this.maxRows = this.Constant_.NO_MAX_ROWS;
+          }
+        }
 
-    if (this.input_) {
-      if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
-        this.maxRows = parseInt(this.input_.getAttribute(
-            this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
-        if (isNaN(this.maxRows)) {
-          this.maxRows = this.Constant_.NO_MAX_ROWS;
+        this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
+        this.boundFocusHandler = this.onFocus_.bind(this);
+        this.boundBlurHandler = this.onBlur_.bind(this);
+        this.input_.addEventListener('input', this.boundUpdateClassesHandler);
+        this.input_.addEventListener('focus', this.boundFocusHandler);
+        this.input_.addEventListener('blur', this.boundBlurHandler);
+
+        if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
+          // TODO: This should handle pasting multi line text.
+          // Currently doesn't.
+          this.boundKeyDownHandler = this.onKeyDown_.bind(this);
+          this.input_.addEventListener('keydown', this.boundKeyDownHandler);
         }
-      }
 
-      this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
-      this.boundFocusHandler = this.onFocus_.bind(this);
-      this.boundBlurHandler = this.onBlur_.bind(this);
-      this.input_.addEventListener('input', this.boundUpdateClassesHandler);
-      this.input_.addEventListener('focus', this.boundFocusHandler);
-      this.input_.addEventListener('blur', this.boundBlurHandler);
-
-      if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
-        // TODO: This should handle pasting multi line text.
-        // Currently doesn't.
-        this.boundKeyDownHandler = this.onKeyDown_.bind(this);
-        this.input_.addEventListener('keydown', this.boundKeyDownHandler);
+        this.updateClasses_();
+        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
       }
-
-      this.updateClasses_();
-      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
-  }
-};
-
-/*
-* Downgrade the component
-*/
-MaterialTextfield.prototype.mdlDowngrade_ = function() {
-  'use strict';
-  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);
-  }
-};
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialTextfield,
-  classAsString: 'MaterialTextfield',
-  cssClass: 'mdl-js-textfield',
-  widget: true
-});
+  };
+
+  /**
+   * 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);
+    }
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialTextfield,
+    classAsString: 'MaterialTextfield',
+    cssClass: 'mdl-js-textfield',
+    widget: true
+  });
+})();