vendor/assets/javascripts/material.js in material_design_lite-rails-1.0.1 vs vendor/assets/javascripts/material.js in material_design_lite-rails-1.0.2
- old
+ new
@@ -279,15 +279,15 @@
.hasOwnProperty(downgradeMethod_)) {
component[downgradeMethod_]();
var componentIndex = createdComponents_.indexOf(component);
createdComponents_.splice(componentIndex, 1);
- var upgrades = component.element_.dataset.upgraded.split(',');
+ var upgrades = component.element_.getAttribute('data-upgraded').split(',');
var componentPlace = upgrades.indexOf(
component[componentConfigProperty_].classAsString);
upgrades.splice(componentPlace, 1);
- component.element_.dataset.upgraded = upgrades.join(',');
+ component.element_.setAttribute('data-upgraded', upgrades.join(','));
var ev = document.createEvent('Events');
ev.initEvent('mdl-componentdowngraded', true, true);
component.element_.dispatchEvent(ev);
}
@@ -631,22 +631,12 @@
* @param {HTMLElement} label The label whose classes we should update.
* @private
*/
MaterialCheckbox.prototype.updateClasses_ = function() {
'use strict';
-
- if (this.inputElement_.disabled) {
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
- }
-
- if (this.inputElement_.checked) {
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
- }
+ this.checkDisabled();
+ this.checkToggleState();
};
/**
* Add blur.
* @private
@@ -662,10 +652,36 @@
};
// Public methods.
/**
+* Check the inputs toggle state and update display.
+* @public
+*/
+MaterialCheckbox.prototype.checkToggleState = function() {
+ 'use strict';
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+
+/**
+* Check the inputs disabled state and update display.
+* @public
+*/
+MaterialCheckbox.prototype.checkDisabled = function() {
+ 'use strict';
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+
+/**
* Disable checkbox.
* @public
*/
MaterialCheckbox.prototype.disable = function() {
'use strict';
@@ -893,22 +909,12 @@
* @param {HTMLElement} label The label whose classes we should update.
* @private
*/
MaterialIconToggle.prototype.updateClasses_ = function() {
'use strict';
-
- if (this.inputElement_.disabled) {
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
- }
-
- if (this.inputElement_.checked) {
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
- }
+ this.checkDisabled();
+ this.checkToggleState();
};
/**
* Add blur.
* @private
@@ -924,10 +930,36 @@
};
// Public methods.
/**
+* Check the inputs toggle state and update display.
+* @public
+*/
+MaterialIconToggle.prototype.checkToggleState = function() {
+ 'use strict';
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+
+/**
+* Check the inputs disabled state and update display.
+* @public
+*/
+MaterialIconToggle.prototype.checkDisabled = function() {
+ 'use strict';
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+
+/**
* Disable icon toggle.
* @public
*/
MaterialIconToggle.prototype.disable = function() {
'use strict';
@@ -1688,20 +1720,18 @@
* @private
*/
MaterialRadio.prototype.onChange_ = function(event) {
'use strict';
- this.updateClasses_(this.btnElement_, this.element_);
-
// 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_.JS_RADIO);
for (var i = 0; i < radios.length; i++) {
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]);
+ radios[i].MaterialRadio.updateClasses_();
}
}
};
/**
@@ -1737,28 +1767,16 @@
this.blur_();
};
/**
* Update classes.
- * @param {HTMLElement} button The button whose classes we should update.
- * @param {HTMLElement} label The label whose classes we should update.
* @private
*/
-MaterialRadio.prototype.updateClasses_ = function(button, label) {
+MaterialRadio.prototype.updateClasses_ = function() {
'use strict';
-
- if (button.disabled) {
- label.classList.add(this.CssClasses_.IS_DISABLED);
- } else {
- label.classList.remove(this.CssClasses_.IS_DISABLED);
- }
-
- if (button.checked) {
- label.classList.add(this.CssClasses_.IS_CHECKED);
- } else {
- label.classList.remove(this.CssClasses_.IS_CHECKED);
- }
+ this.checkDisabled();
+ this.checkToggleState();
};
/**
* Add blur.
* @private
@@ -1774,51 +1792,77 @@
};
// Public methods.
/**
+* Check the components disabled state.
+* @public
+*/
+MaterialRadio.prototype.checkDisabled = function() {
+ 'use strict';
+ if (this.btnElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+
+/**
+* Check the components toggled state.
+* @public
+*/
+MaterialRadio.prototype.checkToggleState = function() {
+ 'use strict';
+ if (this.btnElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+
+/**
* Disable radio.
* @public
*/
MaterialRadio.prototype.disable = function() {
'use strict';
this.btnElement_.disabled = true;
- this.updateClasses_(this.btnElement_, this.element_);
+ this.updateClasses_();
};
/**
* Enable radio.
* @public
*/
MaterialRadio.prototype.enable = function() {
'use strict';
this.btnElement_.disabled = false;
- this.updateClasses_(this.btnElement_, this.element_);
+ this.updateClasses_();
};
/**
* Check radio.
* @public
*/
MaterialRadio.prototype.check = function() {
'use strict';
this.btnElement_.checked = true;
- this.updateClasses_(this.btnElement_, this.element_);
+ this.updateClasses_();
};
/**
* Uncheck radio.
* @public
*/
MaterialRadio.prototype.uncheck = function() {
'use strict';
this.btnElement_.checked = false;
- this.updateClasses_(this.btnElement_, this.element_);
+ this.updateClasses_();
};
/**
* Initialize element.
*/
@@ -1860,11 +1904,11 @@
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.updateClasses_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
// The component registers itself. It can assume componentHandler is available
@@ -2377,28 +2421,16 @@
this.blur_();
};
/**
* Handle class updates.
- * @param {HTMLElement} button The button whose classes we should update.
- * @param {HTMLElement} label The label whose classes we should update.
* @private
*/
MaterialSwitch.prototype.updateClasses_ = function() {
'use strict';
-
- if (this.inputElement_.disabled) {
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
- }
-
- if (this.inputElement_.checked) {
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
- } else {
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
- }
+ this.checkDisabled();
+ this.checkToggleState();
};
/**
* Add blur.
* @private
@@ -2414,10 +2446,36 @@
};
// Public methods.
/**
+* Check the components disabled state.
+* @public
+*/
+MaterialSwitch.prototype.checkDisabled = function() {
+ 'use strict';
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+
+/**
+* Check the components toggled state.
+* @public
+*/
+MaterialSwitch.prototype.checkToggleState = function() {
+ 'use strict';
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+
+/**
* Disable switch.
* @public
*/
MaterialSwitch.prototype.disable = function() {
'use strict';
@@ -3124,10 +3182,10 @@
* Store constants in one place so they can be updated easily.
* @enum {string | number}
* @private
*/
MaterialLayout.prototype.Constant_ = {
- MAX_WIDTH: '(max-width: 850px)',
+ MAX_WIDTH: '(max-width: 1024px)',
TAB_SCROLL_PIXELS: 100,
MENU_ICON: 'menu',
CHEVRON_LEFT: 'chevron_left',
CHEVRON_RIGHT: 'chevron_right'