mirror of
https://github.com/google/material-design-lite.git
synced 2024-10-26 13:11:30 +03:00
Merge pull request #2009 from google/garbee/hotfix/downgrade
Fixed downgrading to always remove internal references.
This commit is contained in:
commit
f797e47243
@ -112,30 +112,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Downgrade the element.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialButton.prototype.mdlDowngrade_ = function() {
|
||||
if (this.rippleElement_) {
|
||||
this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
|
||||
}
|
||||
this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
|
||||
this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialButton.prototype.mdlDowngrade =
|
||||
MaterialButton.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialButton.prototype['mdlDowngrade'] =
|
||||
MaterialButton.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
@ -258,32 +258,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Downgrade the component.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.mdlDowngrade_ = function() {
|
||||
if (this.rippleContainerElement_) {
|
||||
this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
|
||||
}
|
||||
this.inputElement_.removeEventListener('change', this.boundInputOnChange);
|
||||
this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
|
||||
this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
|
||||
this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.mdlDowngrade =
|
||||
MaterialCheckbox.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialCheckbox.prototype['mdlDowngrade'] =
|
||||
MaterialCheckbox.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
@ -244,32 +244,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Downgrade the component
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.mdlDowngrade_ = function() {
|
||||
if (this.rippleContainerElement_) {
|
||||
this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
|
||||
}
|
||||
this.inputElement_.removeEventListener('change', this.boundInputOnChange);
|
||||
this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
|
||||
this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
|
||||
this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.mdlDowngrade =
|
||||
MaterialIconToggle.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialIconToggle.prototype['mdlDowngrade'] =
|
||||
MaterialIconToggle.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
@ -91,7 +91,6 @@ componentHandler = (function() {
|
||||
/** @type {!Array<componentHandler.Component>} */
|
||||
var createdComponents_ = [];
|
||||
|
||||
var downgradeMethod_ = 'mdlDowngrade';
|
||||
var componentConfigProperty_ = 'mdlComponentConfigInternal_';
|
||||
|
||||
/**
|
||||
@ -225,7 +224,7 @@ componentHandler = (function() {
|
||||
}
|
||||
} else {
|
||||
throw new Error(
|
||||
'Unable to find a registered component for the given class.');
|
||||
'Unable to find a registered component for the given class.');
|
||||
}
|
||||
|
||||
var ev = document.createEvent('Events');
|
||||
@ -335,22 +334,6 @@ componentHandler = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds a created component by a given DOM node.
|
||||
*
|
||||
* @param {!Node} node
|
||||
* @return {?componentHandler.Component}
|
||||
*/
|
||||
function findCreatedComponentByNodeInternal(node) {
|
||||
for (var n = 0; n < createdComponents_.length; n++) {
|
||||
var component = createdComponents_[n];
|
||||
if (component.element_ === node) {
|
||||
return component;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check the component for the downgrade method.
|
||||
* Execute if found.
|
||||
@ -359,24 +342,17 @@ componentHandler = (function() {
|
||||
* @param {?componentHandler.Component} component
|
||||
*/
|
||||
function deconstructComponentInternal(component) {
|
||||
if (component &&
|
||||
component[componentConfigProperty_]
|
||||
.classConstructor.prototype
|
||||
.hasOwnProperty(downgradeMethod_)) {
|
||||
component[downgradeMethod_]();
|
||||
var componentIndex = createdComponents_.indexOf(component);
|
||||
createdComponents_.splice(componentIndex, 1);
|
||||
var componentIndex = createdComponents_.indexOf(component);
|
||||
createdComponents_.splice(componentIndex, 1);
|
||||
|
||||
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
||||
var componentPlace = upgrades.indexOf(
|
||||
component[componentConfigProperty_].classAsString);
|
||||
upgrades.splice(componentPlace, 1);
|
||||
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
||||
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
||||
var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
|
||||
upgrades.splice(componentPlace, 1);
|
||||
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
||||
|
||||
var ev = document.createEvent('Events');
|
||||
ev.initEvent('mdl-componentdowngraded', true, true);
|
||||
component.element_.dispatchEvent(ev);
|
||||
}
|
||||
var ev = document.createEvent('Events');
|
||||
ev.initEvent('mdl-componentdowngraded', true, true);
|
||||
component.element_.dispatchEvent(ev);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -390,7 +366,9 @@ componentHandler = (function() {
|
||||
* @param {!Node} node the node to be downgraded
|
||||
*/
|
||||
var downgradeNode = function(node) {
|
||||
deconstructComponentInternal(findCreatedComponentByNodeInternal(node));
|
||||
createdComponents_.filter(function(item) {
|
||||
return item.element_ === node;
|
||||
}).forEach(deconstructComponentInternal);
|
||||
};
|
||||
if (nodes instanceof Array || nodes instanceof NodeList) {
|
||||
for (var n = 0; n < nodes.length; n++) {
|
||||
|
@ -471,31 +471,6 @@
|
||||
};
|
||||
MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
|
||||
|
||||
/**
|
||||
* Downgrade the component.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialMenu.prototype.mdlDowngrade_ = function() {
|
||||
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
items[i].removeEventListener('click', this.boundItemClick_);
|
||||
items[i].removeEventListener('keydown', this.boundItemKeydown_);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialMenu.prototype.mdlDowngrade =
|
||||
MaterialMenu.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialMenu.prototype['mdlDowngrade'] =
|
||||
MaterialMenu.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
@ -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({
|
||||
|
@ -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({
|
||||
|
@ -249,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({
|
||||
|
@ -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({
|
||||
|
@ -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({
|
||||
|
@ -268,32 +268,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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);
|
||||
this.input_.removeEventListener('reset', this.boundResetHandler);
|
||||
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({
|
||||
|
@ -142,31 +142,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Downgrade the component
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialTooltip.prototype.mdlDowngrade_ = function() {
|
||||
if (this.forElement_) {
|
||||
this.forElement_.removeEventListener('mouseenter', this.boundMouseEnterHandler, false);
|
||||
this.forElement_.removeEventListener('touchend', this.boundMouseEnterHandler, false);
|
||||
this.forElement_.removeEventListener('mouseleave', this.boundMouseLeaveHandler, false);
|
||||
window.removeEventListener('touchstart', this.boundMouseLeaveHandler);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialTooltip.prototype.mdlDowngrade =
|
||||
MaterialTooltip.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialTooltip.prototype['mdlDowngrade'] =
|
||||
MaterialTooltip.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
@ -112,7 +112,7 @@ describe('componentHandler', function() {
|
||||
componentHandler.upgradeElement(el, 'MaterialButton');
|
||||
componentHandler.upgradeElement(el, 'MaterialRipple');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialButton,MaterialRipple');
|
||||
});
|
||||
});
|
||||
|
||||
it('should upgrade a single component to an element by using its CSS classes', function() {
|
||||
var el = document.createElement('button');
|
||||
@ -147,8 +147,8 @@ describe('componentHandler', function() {
|
||||
var checkbox = createCheckbox();
|
||||
|
||||
componentHandler.upgradeElements(checkbox);
|
||||
|
||||
var child = checkbox.lastChild;
|
||||
|
||||
var child = checkbox.lastChild;
|
||||
expect($(child)).to.have.data('upgraded', ',MaterialRipple');
|
||||
});
|
||||
|
||||
@ -179,4 +179,12 @@ describe('componentHandler', function() {
|
||||
}
|
||||
});
|
||||
|
||||
it('should downgrade multiple components at once', function() {
|
||||
var button = document.createElement('button');
|
||||
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
|
||||
componentHandler.upgradeElement(button);
|
||||
expect(button.dataset.upgraded).to.equal(',MaterialButton,MaterialRipple');
|
||||
componentHandler.downgradeElements(button);
|
||||
expect(button.dataset.upgraded).to.equal('');
|
||||
});
|
||||
});
|
||||
|
@ -130,13 +130,4 @@ describe('MaterialRadio', function () {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it('should downgrade successfully', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
expect(radio.dataset.upgraded).to.equal(',MaterialRadio');
|
||||
componentHandler.downgradeElements(radio);
|
||||
expect(radio.dataset.upgraded).to.equal('');
|
||||
});
|
||||
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user