javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): add a mode agnostic css class (#9133)

Browse Source 
Fixes #8545
This commit is contained in:
Alan
2016-11-14 13:50:01 -05:00
committed by Brandy Carney
parent d3ef28d3ec
commit 025c5cc646
30 changed files with 148 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ion.ts
View File

@ -26,10 +26,19 @@ export class Ion {
/** @private */
_mode: string;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
/** @private */
_componentName: string;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, componentName?: string) {
this._config = config;
this._elementRef = elementRef;
this._renderer = renderer;
this._componentName = componentName;
if (componentName) {
this._setComponentName();
this._setMode(config.get('mode'));
}
}
/** @private */
@ -48,32 +57,41 @@ export class Ion {
}
/** @private */
_setColor(componentName: string, newColor: string) {
_setColor(newColor: string, componentName?: string) {
if (componentName) {
// This is needed for the item-radio
this._componentName = componentName;
}
if (this._color) {
this.setElementClass(`${componentName}-${this._mode}-${this._color}`, false);
this.setElementClass(`${this._componentName}-${this._mode}-${this._color}`, false);
}
if (newColor) {
this.setElementClass(`${componentName}-${this._mode}-${newColor}`, true);
this.setElementClass(`${this._componentName}-${this._mode}-${newColor}`, true);
this._color = newColor;
}
}
/** @private */
_setMode(componentName: string, newMode: string) {
_setMode(newMode: string) {
if (this._mode) {
this.setElementClass(`${componentName}-${this._mode}`, false);
this.setElementClass(`${this._componentName}-${this._mode}`, false);
}
if (newMode) {
this.setElementClass(`${componentName}-${newMode}`, true);
this.setElementClass(`${this._componentName}-${newMode}`, true);
// Remove the color class associated with the previous mode,
// change the mode, then add the new color class
this._setColor(componentName, null);
this._setColor(null);
this._mode = newMode;
this._setColor(componentName, this._color);
this._setColor(this._color);
}
}
/** @private */
_setComponentName() {
this.setElementClass(this._componentName, true);
}
/** @private */
getElementRef(): ElementRef {
return this._elementRef;
@ -85,7 +103,7 @@ export class Ion {
}
/** @private */
getDimensions(): { width: number, height: number, left: number, top: number} {
getDimensions(): { width: number, height: number, left: number, top: number } {
return getDimensions(this.getNativeElement(), this._getId());
}