Adding public methods to elements.

This is the preferred way of making changes to elements, so that
visual status is updated to reflect logical status.

src/button/button.js

@@ -43,12 +43,33 @@ MaterialButton.prototype.CssClasses_ = {
 MaterialButton.prototype.blurHandler = function(event) {
   'use strict';
 
-  // Don't fire for the artificial "mouseup" generated by a double-click.
+  if (event) {
-  if (event && event.detail !== 2) {
     this.element_.blur();
   }
 };
 
+// Public methods.
+
+/**
+ * Disable button.
+ * @public
+ */
+MaterialButton.prototype.disable = function() {
+  'use strict';
+
+  this.element_.disabled = true;
+};
+
+/**
+ * Enable button.
+ * @public
+ */
+MaterialButton.prototype.enable = function() {
+  'use strict';
+
+  this.element_.disabled = false;
+};
+
 /**
  * Initialize element.
  */

src/checkbox/checkbox.js

@@ -125,6 +125,52 @@ MaterialCheckbox.prototype.blur_ = function(event) {
   }.bind(this), this.Constant_.TINY_TIMEOUT);
 };
 
+// Public methods.
+
+/**
+ * Disable checkbox.
+ * @public
+ */
+MaterialCheckbox.prototype.disable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = true;
+  this.updateClasses_();
+};
+
+/**
+ * Enable checkbox.
+ * @public
+ */
+MaterialCheckbox.prototype.enable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = false;
+  this.updateClasses_();
+};
+
+/**
+ * Check checkbox.
+ * @public
+ */
+MaterialCheckbox.prototype.check = function() {
+  'use strict';
+
+  this.btnElement_.checked = true;
+  this.updateClasses_();
+};
+
+/**
+ * Uncheck checkbox.
+ * @public
+ */
+MaterialCheckbox.prototype.uncheck = function() {
+  'use strict';
+
+  this.btnElement_.checked = false;
+  this.updateClasses_();
+};
+
 /**
  * Initialize element.
  */

src/icon-toggle/icon-toggle.js

@@ -121,6 +121,52 @@ MaterialIconToggle.prototype.blur_ = function(event) {
   }.bind(this), this.Constant_.TINY_TIMEOUT);
 };
 
+// Public methods.
+
+/**
+ * Disable icon toggle.
+ * @public
+ */
+MaterialIconToggle.prototype.disable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = true;
+  this.updateClasses_();
+};
+
+/**
+ * Enable icon toggle.
+ * @public
+ */
+MaterialIconToggle.prototype.enable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = false;
+  this.updateClasses_();
+};
+
+/**
+ * Check icon toggle.
+ * @public
+ */
+MaterialIconToggle.prototype.check = function() {
+  'use strict';
+
+  this.btnElement_.checked = true;
+  this.updateClasses_();
+};
+
+/**
+ * Uncheck icon toggle.
+ * @public
+ */
+MaterialIconToggle.prototype.uncheck = function() {
+  'use strict';
+
+  this.btnElement_.checked = false;
+  this.updateClasses_();
+};
+
 /**
  * Initialize element.
  */

src/radio/radio.js

@@ -31,33 +31,20 @@ MaterialRadio.prototype.Constant_ = {
  */
 MaterialRadio.prototype.CssClasses_ = {
   IS_FOCUSED: 'is-focused',
-
   IS_DISABLED: 'is-disabled',
-
   IS_CHECKED: 'is-checked',
-
   IS_UPGRADED: 'is-upgraded',
-
+  JS_RADIO: 'wsk-js-radio',
-  WSK_JS_RADIO: 'wsk-js-radio',
+  RADIO_BTN: 'wsk-radio__button',
-
+  RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
-  WSK_RADIO_BTN: 'wsk-radio__button',
+  RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
-
+  RIPPLE_EFFECT: 'wsk-js-ripple-effect',
-  WSK_RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
+  RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
-
+  RIPPLE_CONTAINER: 'wsk-radio__ripple-container',
-  WSK_RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
+  RIPPLE_CENTER: 'wsk-ripple--center',
-
+  RIPPLE: 'wsk-ripple'
-  WSK_JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
-
-  WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
-
-  WSK_RADIO_RIPPLE_CONTAINER: 'wsk-radio__ripple-container',
-
-  WSK_RIPPLE_CENTER: 'wsk-ripple--center',
-
-  WSK_RIPPLE: 'wsk-ripple'
 };
 
-
 /**
  * Handle change of state.
  * @param {Event} event The event that fired.
@@ -70,9 +57,9 @@ MaterialRadio.prototype.onChange_ = function(event) {
 
   // Since other radio buttons don't get change events, we need to look for
   // them to update their classes.
-  var radios = document.getElementsByClassName(this.CssClasses_.WSK_JS_RADIO);
+  var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
   for (var i = 0; i < radios.length; i++) {
-    var button = radios[i].querySelector('.' + this.CssClasses_.WSK_RADIO_BTN);
+    var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
     // Different name == different group, so no point updating those.
     if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
       this.updateClasses_(button, radios[i]);
@@ -80,7 +67,6 @@ MaterialRadio.prototype.onChange_ = function(event) {
   }
 };
 
-
 /**
  * Handle focus.
  * @param {Event} event The event that fired.
@@ -92,7 +78,6 @@ MaterialRadio.prototype.onFocus_ = function(event) {
   this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
 };
 
-
 /**
  * Handle lost focus.
  * @param {Event} event The event that fired.
@@ -104,7 +89,6 @@ MaterialRadio.prototype.onBlur_ = function(event) {
   this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
 };
 
-
 /**
  * Handle mouseup.
  * @param {Event} event The event that fired.
@@ -116,7 +100,6 @@ MaterialRadio.prototype.onMouseup_ = function(event) {
   this.blur_();
 };
 
-
 /**
  * Update classes.
  * @param {HTMLElement} button The button whose classes we should update.
@@ -139,7 +122,6 @@ MaterialRadio.prototype.updateClasses_ = function(button, label) {
   }
 };
 
-
 /**
  * Add blur.
  * @private
@@ -154,6 +136,51 @@ MaterialRadio.prototype.blur_ = function(event) {
   }.bind(this), this.Constant_.TINY_TIMEOUT);
 };
 
+// Public methods.
+
+/**
+ * Disable radio.
+ * @public
+ */
+MaterialRadio.prototype.disable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = true;
+  this.updateClasses_();
+};
+
+/**
+ * Enable radio.
+ * @public
+ */
+MaterialRadio.prototype.enable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = false;
+  this.updateClasses_();
+};
+
+/**
+ * Check radio.
+ * @public
+ */
+MaterialRadio.prototype.check = function() {
+  'use strict';
+
+  this.btnElement_.checked = true;
+  this.updateClasses_();
+};
+
+/**
+ * Uncheck radio.
+ * @public
+ */
+MaterialRadio.prototype.uncheck = function() {
+  'use strict';
+
+  this.btnElement_.checked = false;
+  this.updateClasses_();
+};
 
 /**
  * Initialize element.
@@ -163,51 +190,46 @@ MaterialRadio.prototype.init = function() {
 
   if (this.element_) {
     this.btnElement_ = this.element_.querySelector('.' +
-        this.CssClasses_.WSK_RADIO_BTN);
+        this.CssClasses_.RADIO_BTN);
 
     var outerCircle = document.createElement('span');
-    outerCircle.classList.add(this.CssClasses_.WSK_RADIO_OUTER_CIRCLE);
+    outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
 
     var innerCircle = document.createElement('span');
-    innerCircle.classList.add(this.CssClasses_.WSK_RADIO_INNER_CIRCLE);
+    innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
 
     this.element_.appendChild(outerCircle);
     this.element_.appendChild(innerCircle);
 
     var rippleContainer;
     if (this.element_.classList.contains(
-        this.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
+        this.CssClasses_.RIPPLE_EFFECT)) {
       this.element_.classList.add(
-          this.CssClasses_.WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+          this.CssClasses_.RIPPLE_IGNORE_EVENTS);
       rippleContainer = document.createElement('span');
       rippleContainer.classList.add(
-          this.CssClasses_.WSK_RADIO_RIPPLE_CONTAINER);
+          this.CssClasses_.RIPPLE_CONTAINER);
-      rippleContainer.classList.add(this.CssClasses_.WSK_JS_RIPPLE_EFFECT);
+      rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
-      rippleContainer.classList.add(this.CssClasses_.WSK_RIPPLE_CENTER);
+      rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
       rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
 
       var ripple = document.createElement('span');
-      ripple.classList.add(this.CssClasses_.WSK_RIPPLE);
+      ripple.classList.add(this.CssClasses_.RIPPLE);
 
       rippleContainer.appendChild(ripple);
       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.updateClasses_(this.btnElement_, this.element_);
     this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
   }
 };
 
-
 // The component registers itself. It can assume componentHandler is available
 // in the global scope.
 componentHandler.register({

src/slider/slider.js

@@ -48,7 +48,7 @@ MaterialSlider.prototype.CssClasses_ = {
 MaterialSlider.prototype.onInput_ = function(event) {
   'use strict';
 
-  this.updateValue_();
+  this.updateValueStyles_();
 };
 
 /**
@@ -59,7 +59,7 @@ MaterialSlider.prototype.onInput_ = function(event) {
 MaterialSlider.prototype.onChange_ = function(event) {
   'use strict';
 
-  this.updateValue_();
+  this.updateValueStyles_();
 };
 
 /**
@@ -78,7 +78,7 @@ MaterialSlider.prototype.onMouseUp_ = function(event) {
  * @param {Event} event The event that fired.
  * @private
  */
-MaterialSlider.prototype.updateValue_ = function(event) {
+MaterialSlider.prototype.updateValueStyles_ = function(event) {
   'use strict';
 
   // Calculate and apply percentages to div structure behind slider.
@@ -99,6 +99,42 @@ MaterialSlider.prototype.updateValue_ = function(event) {
   }
 };
 
+// Public methods.
+
+/**
+ * Disable slider.
+ * @public
+ */
+MaterialSlider.prototype.disable = function() {
+  'use strict';
+
+  this.element_.disabled = true;
+};
+
+/**
+ * Enable slider.
+ * @public
+ */
+MaterialSlider.prototype.enable = function() {
+  'use strict';
+
+  this.element_.disabled = false;
+};
+
+/**
+ * Update slider value.
+ * @param {Number} value The value to which to set the control (optional).
+ * @public
+ */
+MaterialSlider.prototype.change = function(value) {
+  'use strict';
+
+  if (value) {
+    this.element_.value = value;
+  }
+  this.updateValueStyles_();
+};
+
 /**
  * Initialize element.
  */
@@ -139,7 +175,7 @@ MaterialSlider.prototype.init = function() {
     this.element_.addEventListener('change', this.onChange_.bind(this));
     this.element_.addEventListener('mouseup', this.onMouseUp_.bind(this));
 
-    this.updateValue_();
+    this.updateValueStyles_();
     this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
   }
 };

src/switch/switch.js

@@ -30,32 +30,20 @@ MaterialSwitch.prototype.Constant_ = {
  * @private
  */
 MaterialSwitch.prototype.CssClasses_ = {
-  WSK_SWITCH_INPUT: 'wsk-switch__input',
+  INPUT: 'wsk-switch__input',
-
+  TRACK: 'wsk-switch__track',
-  WSK_SWITCH_TRACK: 'wsk-switch__track',
+  THUMB: 'wsk-switch__thumb',
-
+  FOCUS_HELPER: 'wsk-switch__focus-helper',
-  WSK_SWITCH_THUMB: 'wsk-switch__thumb',
+  RIPPLE_EFFECT: 'wsk-js-ripple-effect',
-
+  RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
-  WSK_SWITCH_FOCUS_HELPER: 'wsk-switch__focus-helper',
+  RIPPLE_CONTAINER: 'wsk-switch__ripple-container',
-
+  RIPPLE_CENTER: 'wsk-ripple--center',
-  WSK_JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
+  RIPPLE: 'wsk-ripple',
-
-  WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
-
-  WSK_SWITCH_RIPPLE_CONTAINER: 'wsk-switch__ripple-container',
-
-  WSK_RIPPLE_CENTER: 'wsk-ripple--center',
-
-  WSK_RIPPLE: 'wsk-ripple',
-
   IS_FOCUSED: 'is-focused',
-
   IS_DISABLED: 'is-disabled',
-
   IS_CHECKED: 'is-checked'
 };
 
-
 /**
  * Handle change of state.
  * @param {Event} event The event that fired.
@@ -67,7 +55,6 @@ MaterialSwitch.prototype.onChange_ = function(event) {
   this.updateClasses_(this.btnElement_, this.element_);
 };
 
-
 /**
  * Handle focus of element.
  * @param {Event} event The event that fired.
@@ -79,7 +66,6 @@ MaterialSwitch.prototype.onFocus_ = function(event) {
   this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
 };
 
-
 /**
  * Handle lost focus of element.
  * @param {Event} event The event that fired.
@@ -91,7 +77,6 @@ MaterialSwitch.prototype.onBlur_ = function(event) {
   this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
 };
 
-
 /**
  * Handle mouseup.
  * @param {Event} event The event that fired.
@@ -103,7 +88,6 @@ MaterialSwitch.prototype.onMouseUp_ = function(event) {
   this.blur_();
 };
 
-
 /**
  * Handle class updates.
  * @param {HTMLElement} button The button whose classes we should update.
@@ -126,7 +110,6 @@ MaterialSwitch.prototype.updateClasses_ = function(button, label) {
   }
 };
 
-
 /**
  * Add blur.
  * @private
@@ -141,6 +124,51 @@ MaterialSwitch.prototype.blur_ = function(event) {
   }.bind(this), this.Constant_.TINY_TIMEOUT);
 };
 
+// Public methods.
+
+/**
+ * Disable switch.
+ * @public
+ */
+MaterialSwitch.prototype.disable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = true;
+  this.updateClasses_();
+};
+
+/**
+ * Enable switch.
+ * @public
+ */
+MaterialSwitch.prototype.enable = function() {
+  'use strict';
+
+  this.btnElement_.disabled = false;
+  this.updateClasses_();
+};
+
+/**
+ * Activate switch.
+ * @public
+ */
+MaterialSwitch.prototype.on = function() {
+  'use strict';
+
+  this.btnElement_.checked = true;
+  this.updateClasses_();
+};
+
+/**
+ * Deactivate switch.
+ * @public
+ */
+MaterialSwitch.prototype.off = function() {
+  'use strict';
+
+  this.btnElement_.checked = false;
+  this.updateClasses_();
+};
 
 /**
  * Initialize element.
@@ -150,16 +178,16 @@ MaterialSwitch.prototype.init = function() {
 
   if (this.element_) {
     this.btnElement_ = this.element_.querySelector('.' +
-        this.CssClasses_.WSK_SWITCH_INPUT);
+        this.CssClasses_.INPUT);
 
     var track = document.createElement('div');
-    track.classList.add(this.CssClasses_.WSK_SWITCH_TRACK);
+    track.classList.add(this.CssClasses_.TRACK);
 
     var thumb = document.createElement('div');
-    thumb.classList.add(this.CssClasses_.WSK_SWITCH_THUMB);
+    thumb.classList.add(this.CssClasses_.THUMB);
 
     var focusHelper = document.createElement('span');
-    focusHelper.classList.add(this.CssClasses_.WSK_SWITCH_FOCUS_HELPER);
+    focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
 
     thumb.appendChild(focusHelper);
 
@@ -168,32 +196,28 @@ MaterialSwitch.prototype.init = function() {
 
     var rippleContainer;
     if (this.element_.classList.contains(
-        this.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
+        this.CssClasses_.RIPPLE_EFFECT)) {
       this.element_.classList.add(
-          this.CssClasses_.WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+          this.CssClasses_.RIPPLE_IGNORE_EVENTS);
       rippleContainer = document.createElement('span');
       rippleContainer.classList.add(
-          this.CssClasses_.WSK_SWITCH_RIPPLE_CONTAINER);
+          this.CssClasses_.RIPPLE_CONTAINER);
-      rippleContainer.classList.add(this.CssClasses_.WSK_JS_RIPPLE_EFFECT);
+      rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
-      rippleContainer.classList.add(this.CssClasses_.WSK_RIPPLE_CENTER);
+      rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
       rippleContainer.addEventListener('mouseup', this.onMouseUp_.bind(this));
 
       var ripple = document.createElement('span');
-      ripple.classList.add(this.CssClasses_.WSK_RIPPLE);
+      ripple.classList.add(this.CssClasses_.RIPPLE);
 
       rippleContainer.appendChild(ripple);
       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.updateClasses_(this.btnElement_, this.element_);
     this.element_.classList.add('is-upgraded');
   }

src/textfield/textfield.js

@@ -106,6 +106,44 @@ MaterialTextfield.prototype.updateClasses_ = function() {
   }
 };
 
+// Public methods.
+
+/**
+ * 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.updateValueStyles_();
+};
+
 /**
  * Initialize element.
  */