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 MaterialRadio = function MaterialRadio(element) {
|
30 | this.element_ = element;
|
31 |
|
32 |
|
33 | this.init();
|
34 | };
|
35 | window['MaterialRadio'] = MaterialRadio;
|
36 |
|
37 | |
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | MaterialRadio.prototype.Constant_ = {
|
44 | TINY_TIMEOUT: 0.001
|
45 | };
|
46 |
|
47 | |
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | MaterialRadio.prototype.CssClasses_ = {
|
56 | IS_FOCUSED: 'is-focused',
|
57 | IS_DISABLED: 'is-disabled',
|
58 | IS_CHECKED: 'is-checked',
|
59 | IS_UPGRADED: 'is-upgraded',
|
60 | JS_RADIO: 'mdl-js-radio',
|
61 | RADIO_BTN: 'mdl-radio__button',
|
62 | RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
|
63 | RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
|
64 | RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
65 | RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
66 | RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
|
67 | RIPPLE_CENTER: 'mdl-ripple--center',
|
68 | RIPPLE: 'mdl-ripple'
|
69 | };
|
70 |
|
71 | |
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | MaterialRadio.prototype.onChange_ = function(event) {
|
78 |
|
79 |
|
80 | var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
|
81 | for (var i = 0; i < radios.length; i++) {
|
82 | var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
|
83 |
|
84 | if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
|
85 | radios[i]['MaterialRadio'].updateClasses_();
|
86 | }
|
87 | }
|
88 | };
|
89 |
|
90 | |
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 | MaterialRadio.prototype.onFocus_ = function(event) {
|
97 | this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
98 | };
|
99 |
|
100 | |
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | MaterialRadio.prototype.onBlur_ = function(event) {
|
107 | this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
108 | };
|
109 |
|
110 | |
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | MaterialRadio.prototype.onMouseup_ = function(event) {
|
117 | this.blur_();
|
118 | };
|
119 |
|
120 | |
121 |
|
122 |
|
123 |
|
124 |
|
125 | MaterialRadio.prototype.updateClasses_ = function() {
|
126 | this.checkDisabled();
|
127 | this.checkToggleState();
|
128 | };
|
129 |
|
130 | |
131 |
|
132 |
|
133 |
|
134 |
|
135 | MaterialRadio.prototype.blur_ = function() {
|
136 |
|
137 |
|
138 |
|
139 | window.setTimeout(function() {
|
140 | this.btnElement_.blur();
|
141 | }.bind(this), (this.Constant_.TINY_TIMEOUT));
|
142 | };
|
143 |
|
144 |
|
145 |
|
146 | |
147 |
|
148 |
|
149 |
|
150 |
|
151 | MaterialRadio.prototype.checkDisabled = function() {
|
152 | if (this.btnElement_.disabled) {
|
153 | this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
154 | } else {
|
155 | this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
156 | }
|
157 | };
|
158 | MaterialRadio.prototype['checkDisabled'] =
|
159 | MaterialRadio.prototype.checkDisabled;
|
160 |
|
161 | |
162 |
|
163 |
|
164 |
|
165 |
|
166 | MaterialRadio.prototype.checkToggleState = function() {
|
167 | if (this.btnElement_.checked) {
|
168 | this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
169 | } else {
|
170 | this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
171 | }
|
172 | };
|
173 | MaterialRadio.prototype['checkToggleState'] =
|
174 | MaterialRadio.prototype.checkToggleState;
|
175 |
|
176 | |
177 |
|
178 |
|
179 |
|
180 |
|
181 | MaterialRadio.prototype.disable = function() {
|
182 | this.btnElement_.disabled = true;
|
183 | this.updateClasses_();
|
184 | };
|
185 | MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
|
186 |
|
187 | |
188 |
|
189 |
|
190 |
|
191 |
|
192 | MaterialRadio.prototype.enable = function() {
|
193 | this.btnElement_.disabled = false;
|
194 | this.updateClasses_();
|
195 | };
|
196 | MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
|
197 |
|
198 | |
199 |
|
200 |
|
201 |
|
202 |
|
203 | MaterialRadio.prototype.check = function() {
|
204 | this.btnElement_.checked = true;
|
205 | this.updateClasses_();
|
206 | };
|
207 | MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
|
208 |
|
209 | |
210 |
|
211 |
|
212 |
|
213 |
|
214 | MaterialRadio.prototype.uncheck = function() {
|
215 | this.btnElement_.checked = false;
|
216 | this.updateClasses_();
|
217 | };
|
218 | MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
|
219 |
|
220 | |
221 |
|
222 |
|
223 | MaterialRadio.prototype.init = function() {
|
224 | if (this.element_) {
|
225 | this.btnElement_ = this.element_.querySelector('.' +
|
226 | this.CssClasses_.RADIO_BTN);
|
227 |
|
228 | this.boundChangeHandler_ = this.onChange_.bind(this);
|
229 | this.boundFocusHandler_ = this.onChange_.bind(this);
|
230 | this.boundBlurHandler_ = this.onBlur_.bind(this);
|
231 | this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
|
232 |
|
233 | var outerCircle = document.createElement('span');
|
234 | outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
|
235 |
|
236 | var innerCircle = document.createElement('span');
|
237 | innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
|
238 |
|
239 | this.element_.appendChild(outerCircle);
|
240 | this.element_.appendChild(innerCircle);
|
241 |
|
242 | var rippleContainer;
|
243 | if (this.element_.classList.contains(
|
244 | this.CssClasses_.RIPPLE_EFFECT)) {
|
245 | this.element_.classList.add(
|
246 | this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
247 | rippleContainer = document.createElement('span');
|
248 | rippleContainer.classList.add(
|
249 | this.CssClasses_.RIPPLE_CONTAINER);
|
250 | rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
251 | rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
252 | rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
|
253 |
|
254 | var ripple = document.createElement('span');
|
255 | ripple.classList.add(this.CssClasses_.RIPPLE);
|
256 |
|
257 | rippleContainer.appendChild(ripple);
|
258 | this.element_.appendChild(rippleContainer);
|
259 | }
|
260 |
|
261 | this.btnElement_.addEventListener('change', this.boundChangeHandler_);
|
262 | this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
|
263 | this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
|
264 | this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
|
265 |
|
266 | this.updateClasses_();
|
267 | this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
268 | }
|
269 | };
|
270 |
|
271 |
|
272 |
|
273 | componentHandler.register({
|
274 | constructor: MaterialRadio,
|
275 | classAsString: 'MaterialRadio',
|
276 | cssClass: 'mdl-js-radio',
|
277 | widget: true
|
278 | });
|
279 | })();
|