forked from ionic-team/ionic-framework
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathion.ts
More file actions
129 lines (108 loc) · 3.28 KB
/
ion.ts
File metadata and controls
129 lines (108 loc) · 3.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { ElementRef, Input, Renderer } from '@angular/core';
import { Config } from '../config/config';
/**
* Base class for all Ionic components. Exposes some common functionality
* that all Ionic components need, such as accessing underlying native elements and
* sending/receiving app-level events.
*/
/** @hidden */
export class Ion {
/** @hidden */
_config: Config;
/** @hidden */
_elementRef: ElementRef;
/** @hidden */
_renderer: Renderer;
/** @hidden */
_color: string;
/** @hidden */
_mode: string;
/** @hidden */
_componentName: string;
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Input()
set color(val: string) {
this._setColor(val);
}
get color(): string {
return this._color;
}
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Input()
set mode(val: string) {
this._setMode(val);
}
get mode(): string {
return this._mode;
}
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'));
}
}
/** @hidden */
setElementClass(className: string, isAdd: boolean) {
this._renderer.setElementClass(this._elementRef.nativeElement, className, isAdd);
}
/** @hidden */
setElementAttribute(attributeName: string, attributeValue: any) {
this._renderer.setElementAttribute(this._elementRef.nativeElement, attributeName, attributeValue);
}
/** @hidden */
setElementStyle(property: string, value: string) {
this._renderer.setElementStyle(this._elementRef.nativeElement, property, value);
}
/** @hidden */
_setColor(newColor: string, componentName?: string) {
if (componentName) {
// This is needed for the item-radio
this._componentName = componentName;
}
if (this._color) {
this.setElementClass(`${this._componentName}-${this._mode}-${this._color}`, false);
}
if (newColor) {
this.setElementClass(`${this._componentName}-${this._mode}-${newColor}`, true);
this._color = newColor;
}
}
/** @hidden */
_setMode(newMode: string) {
if (this._mode) {
this.setElementClass(`${this._componentName}-${this._mode}`, false);
}
if (newMode) {
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(null);
this._mode = newMode;
this._setColor(this._color);
}
}
/** @hidden */
_setComponentName() {
this.setElementClass(this._componentName, true);
}
/** @hidden */
getElementRef(): ElementRef {
return this._elementRef;
}
/** @hidden */
getNativeElement(): any {
return this._elementRef.nativeElement;
}
}