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

Fixed downgrading to always remove internal references.

master
Jonathan Garbee 2015-12-14 13:28:34 -05:00
parent a2ae0208a1
commit c4c8427c61
14 changed files with 24 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/button/button.js
View File

@ -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({

26
src/checkbox/checkbox.js
View File

@ -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({

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

@ -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({

48
src/mdlComponentHandler.js
View File

@ -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++) {

25
src/menu/menu.js
View File

@ -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({

22
src/progress/progress.js
View File

@ -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({

28
src/radio/radio.js
View File

@ -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({

28
src/ripple/ripple.js
View File

@ -250,34 +250,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({

23
src/slider/slider.js
View File

@ -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({

26
src/switch/switch.js
View File

@ -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({

26
src/textfield/textfield.js
View File

@ -264,32 +264,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({

25
src/tooltip/tooltip.js
View File

@ -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({

14
test/unit/componentHandler.js
View File

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

9
test/unit/radio.js
View File

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