google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
master
Sérgio Gomes 2015-03-31 12:03:36 +01:00
parent 856f5dc1b0
commit dbda167b0f
7 changed files with 322 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/button/button.js
View File

@ -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 && event.detail !== 2) {
if (event) {
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.
*/

46
src/checkbox/checkbox.js
View File

@ -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.
*/

46
src/icon-toggle/icon-toggle.js
View File

@ -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.
*/

108
src/radio/radio.js
View File

@ -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',
WSK_JS_RADIO: 'wsk-js-radio',
WSK_RADIO_BTN: 'wsk-radio__button',
WSK_RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
WSK_RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
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'
JS_RADIO: 'wsk-js-radio',
RADIO_BTN: 'wsk-radio__button',
RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'wsk-radio__ripple-container',
RIPPLE_CENTER: 'wsk-ripple--center',
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);
rippleContainer.classList.add(this.CssClasses_.WSK_JS_RIPPLE_EFFECT);
rippleContainer.classList.add(this.CssClasses_.WSK_RIPPLE_CENTER);
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));
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({

44
src/slider/slider.js
View File

@ -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);
}
};

104
src/switch/switch.js
View File

@ -30,32 +30,20 @@ MaterialSwitch.prototype.Constant_ = {
* @private
*/
MaterialSwitch.prototype.CssClasses_ = {
WSK_SWITCH_INPUT: 'wsk-switch__input',
WSK_SWITCH_TRACK: 'wsk-switch__track',
WSK_SWITCH_THUMB: 'wsk-switch__thumb',
WSK_SWITCH_FOCUS_HELPER: 'wsk-switch__focus-helper',
WSK_JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
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',
INPUT: 'wsk-switch__input',
TRACK: 'wsk-switch__track',
THUMB: 'wsk-switch__thumb',
FOCUS_HELPER: 'wsk-switch__focus-helper',
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'wsk-switch__ripple-container',
RIPPLE_CENTER: 'wsk-ripple--center',
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);
rippleContainer.classList.add(this.CssClasses_.WSK_JS_RIPPLE_EFFECT);
rippleContainer.classList.add(this.CssClasses_.WSK_RIPPLE_CENTER);
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));
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');
}

38
src/textfield/textfield.js
View File

@ -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.
*/