1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | (function() {
|
19 | 'use strict';
|
20 |
|
21 | |
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var MaterialIconToggle = function MaterialIconToggle(element) {
|
30 | this.element_ = element;
|
31 |
|
32 |
|
33 | this.init();
|
34 | };
|
35 | window['MaterialIconToggle'] = MaterialIconToggle;
|
36 |
|
37 | |
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | MaterialIconToggle.prototype.Constant_ = {
|
44 | TINY_TIMEOUT: 0.001
|
45 | };
|
46 |
|
47 | |
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | MaterialIconToggle.prototype.CssClasses_ = {
|
56 | INPUT: 'mdl-icon-toggle__input',
|
57 | JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
58 | RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
59 | RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
|
60 | RIPPLE_CENTER: 'mdl-ripple--center',
|
61 | RIPPLE: 'mdl-ripple',
|
62 | IS_FOCUSED: 'is-focused',
|
63 | IS_DISABLED: 'is-disabled',
|
64 | IS_CHECKED: 'is-checked'
|
65 | };
|
66 |
|
67 | |
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 | MaterialIconToggle.prototype.onChange_ = function(event) {
|
74 | this.updateClasses_();
|
75 | };
|
76 |
|
77 | |
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 | MaterialIconToggle.prototype.onFocus_ = function(event) {
|
84 | this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
85 | };
|
86 |
|
87 | |
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | MaterialIconToggle.prototype.onBlur_ = function(event) {
|
94 | this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
95 | };
|
96 |
|
97 | |
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 | MaterialIconToggle.prototype.onMouseUp_ = function(event) {
|
104 | this.blur_();
|
105 | };
|
106 |
|
107 | |
108 |
|
109 |
|
110 |
|
111 |
|
112 | MaterialIconToggle.prototype.updateClasses_ = function() {
|
113 | this.checkDisabled();
|
114 | this.checkToggleState();
|
115 | };
|
116 |
|
117 | |
118 |
|
119 |
|
120 |
|
121 |
|
122 | MaterialIconToggle.prototype.blur_ = function() {
|
123 |
|
124 |
|
125 | window.setTimeout(function() {
|
126 | this.inputElement_.blur();
|
127 | }.bind(this), (this.Constant_.TINY_TIMEOUT));
|
128 | };
|
129 |
|
130 |
|
131 |
|
132 | |
133 |
|
134 |
|
135 |
|
136 |
|
137 | MaterialIconToggle.prototype.checkToggleState = function() {
|
138 | if (this.inputElement_.checked) {
|
139 | this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
140 | } else {
|
141 | this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
142 | }
|
143 | };
|
144 | MaterialIconToggle.prototype['checkToggleState'] =
|
145 | MaterialIconToggle.prototype.checkToggleState;
|
146 |
|
147 | |
148 |
|
149 |
|
150 |
|
151 |
|
152 | MaterialIconToggle.prototype.checkDisabled = function() {
|
153 | if (this.inputElement_.disabled) {
|
154 | this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
155 | } else {
|
156 | this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
157 | }
|
158 | };
|
159 | MaterialIconToggle.prototype['checkDisabled'] =
|
160 | MaterialIconToggle.prototype.checkDisabled;
|
161 |
|
162 | |
163 |
|
164 |
|
165 |
|
166 |
|
167 | MaterialIconToggle.prototype.disable = function() {
|
168 | this.inputElement_.disabled = true;
|
169 | this.updateClasses_();
|
170 | };
|
171 | MaterialIconToggle.prototype['disable'] =
|
172 | MaterialIconToggle.prototype.disable;
|
173 |
|
174 | |
175 |
|
176 |
|
177 |
|
178 |
|
179 | MaterialIconToggle.prototype.enable = function() {
|
180 | this.inputElement_.disabled = false;
|
181 | this.updateClasses_();
|
182 | };
|
183 | MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
|
184 |
|
185 | |
186 |
|
187 |
|
188 |
|
189 |
|
190 | MaterialIconToggle.prototype.check = function() {
|
191 | this.inputElement_.checked = true;
|
192 | this.updateClasses_();
|
193 | };
|
194 | MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
|
195 |
|
196 | |
197 |
|
198 |
|
199 |
|
200 |
|
201 | MaterialIconToggle.prototype.uncheck = function() {
|
202 | this.inputElement_.checked = false;
|
203 | this.updateClasses_();
|
204 | };
|
205 | MaterialIconToggle.prototype['uncheck'] =
|
206 | MaterialIconToggle.prototype.uncheck;
|
207 |
|
208 | |
209 |
|
210 |
|
211 | MaterialIconToggle.prototype.init = function() {
|
212 |
|
213 | if (this.element_) {
|
214 | this.inputElement_ =
|
215 | this.element_.querySelector('.' + this.CssClasses_.INPUT);
|
216 |
|
217 | if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
|
218 | this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
219 | this.rippleContainerElement_ = document.createElement('span');
|
220 | this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
|
221 | this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
|
222 | this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
223 | this.boundRippleMouseUp = this.onMouseUp_.bind(this);
|
224 | this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
|
225 |
|
226 | var ripple = document.createElement('span');
|
227 | ripple.classList.add(this.CssClasses_.RIPPLE);
|
228 |
|
229 | this.rippleContainerElement_.appendChild(ripple);
|
230 | this.element_.appendChild(this.rippleContainerElement_);
|
231 | }
|
232 |
|
233 | this.boundInputOnChange = this.onChange_.bind(this);
|
234 | this.boundInputOnFocus = this.onFocus_.bind(this);
|
235 | this.boundInputOnBlur = this.onBlur_.bind(this);
|
236 | this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
|
237 | this.inputElement_.addEventListener('change', this.boundInputOnChange);
|
238 | this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
|
239 | this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
|
240 | this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
|
241 |
|
242 | this.updateClasses_();
|
243 | this.element_.classList.add('is-upgraded');
|
244 | }
|
245 | };
|
246 |
|
247 |
|
248 |
|
249 | componentHandler.register({
|
250 | constructor: MaterialIconToggle,
|
251 | classAsString: 'MaterialIconToggle',
|
252 | cssClass: 'mdl-js-icon-toggle',
|
253 | widget: true
|
254 | });
|
255 | })();
|