material_design_lite-sass 1.0.2.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +6 -0
  3. data/lib/material_design_lite/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material.js +2562 -2993
  5. data/vendor/assets/javascripts/material/button.js +114 -112
  6. data/vendor/assets/javascripts/material/checkbox.js +255 -260
  7. data/vendor/assets/javascripts/material/data-table.js +140 -124
  8. data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
  9. data/vendor/assets/javascripts/material/layout.js +392 -388
  10. data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
  11. data/vendor/assets/javascripts/material/menu.js +430 -414
  12. data/vendor/assets/javascripts/material/progress.js +110 -97
  13. data/vendor/assets/javascripts/material/radio.js +244 -247
  14. data/vendor/assets/javascripts/material/ripple.js +220 -211
  15. data/vendor/assets/javascripts/material/slider.js +228 -228
  16. data/vendor/assets/javascripts/material/spinner.js +122 -119
  17. data/vendor/assets/javascripts/material/switch.js +246 -250
  18. data/vendor/assets/javascripts/material/tabs.js +129 -127
  19. data/vendor/assets/javascripts/material/textfield.js +221 -222
  20. data/vendor/assets/javascripts/material/tooltip.js +126 -122
  21. data/vendor/assets/stylesheets/material/_badge.scss +1 -1
  22. data/vendor/assets/stylesheets/material/_button.scss +15 -8
  23. data/vendor/assets/stylesheets/material/_card.scss +1 -1
  24. data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
  25. data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
  26. data/vendor/assets/stylesheets/material/_functions.scss +16 -0
  27. data/vendor/assets/stylesheets/material/_grid.scss +11 -20
  28. data/vendor/assets/stylesheets/material/_layout.scss +7 -5
  29. data/vendor/assets/stylesheets/material/_menu.scss +4 -1
  30. data/vendor/assets/stylesheets/material/_radio.scss +1 -1
  31. data/vendor/assets/stylesheets/material/_slider.scss +1 -0
  32. data/vendor/assets/stylesheets/material/_switch.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
  34. data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
  35. data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
  36. data/vendor/assets/stylesheets/material/_variables.scss +18 -43
  37. data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
  38. metadata +1 -1
@@ -15,102 +15,115 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Progress MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialProgress(element) {
25
- 'use strict';
26
-
27
- this.element_ = element;
28
-
29
- // Initialize instance.
30
- this.init();
31
- }
32
-
33
- /**
34
- * Store constants in one place so they can be updated easily.
35
- * @enum {string | number}
36
- * @private
37
- */
38
- MaterialProgress.prototype.Constant_ = {
39
- };
40
-
41
- /**
42
- * Store strings for class names defined by this component that are used in
43
- * JavaScript. This allows us to simply change it in one place should we
44
- * decide to modify at a later date.
45
- * @enum {string}
46
- * @private
47
- */
48
- MaterialProgress.prototype.CssClasses_ = {
49
- INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
50
- };
51
-
52
- MaterialProgress.prototype.setProgress = function(p) {
53
- 'use strict';
54
-
55
- if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
56
- return;
57
- }
58
-
59
- this.progressbar_.style.width = p + '%';
60
- };
61
-
62
- MaterialProgress.prototype.setBuffer = function(p) {
63
- 'use strict';
64
-
65
- this.bufferbar_.style.width = p + '%';
66
- this.auxbar_.style.width = (100 - p) + '%';
67
- };
68
-
69
- /**
70
- * Initialize element.
71
- */
72
- MaterialProgress.prototype.init = function() {
73
- 'use strict';
74
-
75
- if (this.element_) {
76
- var el = document.createElement('div');
77
- el.className = 'progressbar bar bar1';
78
- this.element_.appendChild(el);
79
- this.progressbar_ = el;
80
-
81
- el = document.createElement('div');
82
- el.className = 'bufferbar bar bar2';
83
- this.element_.appendChild(el);
84
- this.bufferbar_ = el;
85
-
86
- el = document.createElement('div');
87
- el.className = 'auxbar bar bar3';
88
- this.element_.appendChild(el);
89
- this.auxbar_ = el;
90
-
91
- this.progressbar_.style.width = '0%';
92
- this.bufferbar_.style.width = '100%';
93
- this.auxbar_.style.width = '0%';
94
-
95
- this.element_.classList.add('is-upgraded');
96
- }
97
- };
98
-
99
- /*
100
- * Downgrade the component
101
- */
102
- MaterialProgress.prototype.mdlDowngrade_ = function() {
18
+ (function() {
103
19
  'use strict';
104
- while (this.element_.firstChild) {
105
- this.element_.removeChild(this.element_.firstChild);
106
- }
107
- };
108
20
 
109
- // The component registers itself. It can assume componentHandler is available
110
- // in the global scope.
111
- componentHandler.register({
112
- constructor: MaterialProgress,
113
- classAsString: 'MaterialProgress',
114
- cssClass: 'mdl-js-progress',
115
- widget: true
116
- });
21
+ /**
22
+ * Class constructor for Progress MDL component.
23
+ * Implements MDL component design pattern defined at:
24
+ * https://github.com/jasonmayes/mdl-component-design-pattern
25
+ *
26
+ * @param {HTMLElement} element The element that will be upgraded.
27
+ */
28
+ var MaterialProgress = function MaterialProgress(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialProgress = MaterialProgress;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialProgress.prototype.Constant_ = {
43
+ };
44
+
45
+ /**
46
+ * Store strings for class names defined by this component that are used in
47
+ * JavaScript. This allows us to simply change it in one place should we
48
+ * decide to modify at a later date.
49
+ *
50
+ * @enum {String}
51
+ * @private
52
+ */
53
+ MaterialProgress.prototype.CssClasses_ = {
54
+ INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
55
+ };
56
+
57
+ /**
58
+ * Set the current progress of the progressbar.
59
+ *
60
+ * @param {Number} p Percentage of the progress (0-100)
61
+ * @public
62
+ */
63
+ MaterialProgress.prototype.setProgress = function(p) {
64
+ if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
65
+ return;
66
+ }
67
+
68
+ this.progressbar_.style.width = p + '%';
69
+ };
70
+
71
+ /**
72
+ * Set the current progress of the buffer.
73
+ *
74
+ * @param {Number} p Percentage of the buffer (0-100)
75
+ * @public
76
+ */
77
+ MaterialProgress.prototype.setBuffer = function(p) {
78
+ this.bufferbar_.style.width = p + '%';
79
+ this.auxbar_.style.width = (100 - p) + '%';
80
+ };
81
+
82
+ /**
83
+ * Initialize element.
84
+ */
85
+ MaterialProgress.prototype.init = function() {
86
+ if (this.element_) {
87
+ var el = document.createElement('div');
88
+ el.className = 'progressbar bar bar1';
89
+ this.element_.appendChild(el);
90
+ this.progressbar_ = el;
91
+
92
+ el = document.createElement('div');
93
+ el.className = 'bufferbar bar bar2';
94
+ this.element_.appendChild(el);
95
+ this.bufferbar_ = el;
96
+
97
+ el = document.createElement('div');
98
+ el.className = 'auxbar bar bar3';
99
+ this.element_.appendChild(el);
100
+ this.auxbar_ = el;
101
+
102
+ this.progressbar_.style.width = '0%';
103
+ this.bufferbar_.style.width = '100%';
104
+ this.auxbar_.style.width = '0%';
105
+
106
+ this.element_.classList.add('is-upgraded');
107
+ }
108
+ };
109
+
110
+ /**
111
+ * Downgrade the component
112
+ *
113
+ * @private
114
+ */
115
+ MaterialProgress.prototype.mdlDowngrade_ = function() {
116
+ while (this.element_.firstChild) {
117
+ this.element_.removeChild(this.element_.firstChild);
118
+ }
119
+ };
120
+
121
+ // The component registers itself. It can assume componentHandler is available
122
+ // in the global scope.
123
+ componentHandler.register({
124
+ constructor: MaterialProgress,
125
+ classAsString: 'MaterialProgress',
126
+ cssClass: 'mdl-js-progress',
127
+ widget: true
128
+ });
129
+ })();
@@ -15,255 +15,252 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Radio MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialRadio(element) {
18
+ (function() {
25
19
  'use strict';
26
20
 
27
- this.element_ = element;
28
-
29
- // Initialize instance.
30
- this.init();
31
- }
32
-
33
- /**
34
- * Store constants in one place so they can be updated easily.
35
- * @enum {string | number}
36
- * @private
37
- */
38
- MaterialRadio.prototype.Constant_ = {
39
- TINY_TIMEOUT: 0.001
40
- };
41
-
42
- /**
43
- * Store strings for class names defined by this component that are used in
44
- * JavaScript. This allows us to simply change it in one place should we
45
- * decide to modify at a later date.
46
- * @enum {string}
47
- * @private
48
- */
49
- MaterialRadio.prototype.CssClasses_ = {
50
- IS_FOCUSED: 'is-focused',
51
- IS_DISABLED: 'is-disabled',
52
- IS_CHECKED: 'is-checked',
53
- IS_UPGRADED: 'is-upgraded',
54
- JS_RADIO: 'mdl-js-radio',
55
- RADIO_BTN: 'mdl-radio__button',
56
- RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
57
- RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
58
- RIPPLE_EFFECT: 'mdl-js-ripple-effect',
59
- RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
60
- RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
61
- RIPPLE_CENTER: 'mdl-ripple--center',
62
- RIPPLE: 'mdl-ripple'
63
- };
64
-
65
- /**
66
- * Handle change of state.
67
- * @param {Event} event The event that fired.
68
- * @private
69
- */
70
- MaterialRadio.prototype.onChange_ = function(event) {
71
- 'use strict';
72
-
73
- // Since other radio buttons don't get change events, we need to look for
74
- // them to update their classes.
75
- var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
76
- for (var i = 0; i < radios.length; i++) {
77
- var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
78
- // Different name == different group, so no point updating those.
79
- if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
80
- radios[i].MaterialRadio.updateClasses_();
21
+ /**
22
+ * Class constructor for Radio MDL component.
23
+ * Implements MDL component design pattern defined at:
24
+ * https://github.com/jasonmayes/mdl-component-design-pattern
25
+ *
26
+ * @param {HTMLElement} element The element that will be upgraded.
27
+ */
28
+ var MaterialRadio = function MaterialRadio(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialRadio = MaterialRadio;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialRadio.prototype.Constant_ = {
43
+ TINY_TIMEOUT: 0.001
44
+ };
45
+
46
+ /**
47
+ * Store strings for class names defined by this component that are used in
48
+ * JavaScript. This allows us to simply change it in one place should we
49
+ * decide to modify at a later date.
50
+ *
51
+ * @enum {String}
52
+ * @private
53
+ */
54
+ MaterialRadio.prototype.CssClasses_ = {
55
+ IS_FOCUSED: 'is-focused',
56
+ IS_DISABLED: 'is-disabled',
57
+ IS_CHECKED: 'is-checked',
58
+ IS_UPGRADED: 'is-upgraded',
59
+ JS_RADIO: 'mdl-js-radio',
60
+ RADIO_BTN: 'mdl-radio__button',
61
+ RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
62
+ RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
63
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
64
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
65
+ RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
66
+ RIPPLE_CENTER: 'mdl-ripple--center',
67
+ RIPPLE: 'mdl-ripple'
68
+ };
69
+
70
+ /**
71
+ * Handle change of state.
72
+ *
73
+ * @param {Event} event The event that fired.
74
+ * @private
75
+ */
76
+ MaterialRadio.prototype.onChange_ = function(event) {
77
+ // Since other radio buttons don't get change events, we need to look for
78
+ // them to update their classes.
79
+ var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
80
+ for (var i = 0; i < radios.length; i++) {
81
+ var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
82
+ // Different name == different group, so no point updating those.
83
+ if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
84
+ radios[i].MaterialRadio.updateClasses_();
85
+ }
81
86
  }
82
- }
83
- };
84
-
85
- /**
86
- * Handle focus.
87
- * @param {Event} event The event that fired.
88
- * @private
89
- */
90
- MaterialRadio.prototype.onFocus_ = function(event) {
91
- 'use strict';
92
-
93
- this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
94
- };
95
-
96
- /**
97
- * Handle lost focus.
98
- * @param {Event} event The event that fired.
99
- * @private
100
- */
101
- MaterialRadio.prototype.onBlur_ = function(event) {
102
- 'use strict';
103
-
104
- this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
105
- };
106
-
107
- /**
108
- * Handle mouseup.
109
- * @param {Event} event The event that fired.
110
- * @private
111
- */
112
- MaterialRadio.prototype.onMouseup_ = function(event) {
113
- 'use strict';
114
-
115
- this.blur_();
116
- };
117
-
118
- /**
119
- * Update classes.
120
- * @private
121
- */
122
- MaterialRadio.prototype.updateClasses_ = function() {
123
- 'use strict';
124
- this.checkDisabled();
125
- this.checkToggleState();
126
- };
127
-
128
- /**
129
- * Add blur.
130
- * @private
131
- */
132
- MaterialRadio.prototype.blur_ = function(event) {
133
- 'use strict';
134
-
135
- // TODO: figure out why there's a focus event being fired after our blur,
136
- // so that we can avoid this hack.
137
- window.setTimeout(function() {
138
- this.btnElement_.blur();
139
- }.bind(this), this.Constant_.TINY_TIMEOUT);
140
- };
141
-
142
- // Public methods.
143
-
144
- /**
145
- * Check the components disabled state.
146
- * @public
147
- */
148
- MaterialRadio.prototype.checkDisabled = function() {
149
- 'use strict';
150
- if (this.btnElement_.disabled) {
151
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
152
- } else {
153
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
154
- }
155
- };
156
-
157
- /**
158
- * Check the components toggled state.
159
- * @public
160
- */
161
- MaterialRadio.prototype.checkToggleState = function() {
162
- 'use strict';
163
- if (this.btnElement_.checked) {
164
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
165
- } else {
166
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
167
- }
168
- };
169
-
170
- /**
171
- * Disable radio.
172
- * @public
173
- */
174
- MaterialRadio.prototype.disable = function() {
175
- 'use strict';
176
-
177
- this.btnElement_.disabled = true;
178
- this.updateClasses_();
179
- };
180
-
181
- /**
182
- * Enable radio.
183
- * @public
184
- */
185
- MaterialRadio.prototype.enable = function() {
186
- 'use strict';
187
-
188
- this.btnElement_.disabled = false;
189
- this.updateClasses_();
190
- };
191
-
192
- /**
193
- * Check radio.
194
- * @public
195
- */
196
- MaterialRadio.prototype.check = function() {
197
- 'use strict';
198
-
199
- this.btnElement_.checked = true;
200
- this.updateClasses_();
201
- };
202
-
203
- /**
204
- * Uncheck radio.
205
- * @public
206
- */
207
- MaterialRadio.prototype.uncheck = function() {
208
- 'use strict';
209
-
210
- this.btnElement_.checked = false;
211
- this.updateClasses_();
212
- };
213
-
214
- /**
215
- * Initialize element.
216
- */
217
- MaterialRadio.prototype.init = function() {
218
- 'use strict';
219
-
220
- if (this.element_) {
221
- this.btnElement_ = this.element_.querySelector('.' +
222
- this.CssClasses_.RADIO_BTN);
223
-
224
- var outerCircle = document.createElement('span');
225
- outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
226
-
227
- var innerCircle = document.createElement('span');
228
- innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
229
-
230
- this.element_.appendChild(outerCircle);
231
- this.element_.appendChild(innerCircle);
232
-
233
- var rippleContainer;
234
- if (this.element_.classList.contains(
235
- this.CssClasses_.RIPPLE_EFFECT)) {
236
- this.element_.classList.add(
237
- this.CssClasses_.RIPPLE_IGNORE_EVENTS);
238
- rippleContainer = document.createElement('span');
239
- rippleContainer.classList.add(
240
- this.CssClasses_.RIPPLE_CONTAINER);
241
- rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
242
- rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
243
- rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
244
-
245
- var ripple = document.createElement('span');
246
- ripple.classList.add(this.CssClasses_.RIPPLE);
247
-
248
- rippleContainer.appendChild(ripple);
249
- this.element_.appendChild(rippleContainer);
87
+ };
88
+
89
+ /**
90
+ * Handle focus.
91
+ *
92
+ * @param {Event} event The event that fired.
93
+ * @private
94
+ */
95
+ MaterialRadio.prototype.onFocus_ = function(event) {
96
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
97
+ };
98
+
99
+ /**
100
+ * Handle lost focus.
101
+ *
102
+ * @param {Event} event The event that fired.
103
+ * @private
104
+ */
105
+ MaterialRadio.prototype.onBlur_ = function(event) {
106
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
107
+ };
108
+
109
+ /**
110
+ * Handle mouseup.
111
+ *
112
+ * @param {Event} event The event that fired.
113
+ * @private
114
+ */
115
+ MaterialRadio.prototype.onMouseup_ = function(event) {
116
+ this.blur_();
117
+ };
118
+
119
+ /**
120
+ * Update classes.
121
+ *
122
+ * @private
123
+ */
124
+ MaterialRadio.prototype.updateClasses_ = function() {
125
+ this.checkDisabled();
126
+ this.checkToggleState();
127
+ };
128
+
129
+ /**
130
+ * Add blur.
131
+ *
132
+ * @param {Event} event The event that fired.
133
+ * @private
134
+ */
135
+ MaterialRadio.prototype.blur_ = function(event) {
136
+
137
+ // TODO: figure out why there's a focus event being fired after our blur,
138
+ // so that we can avoid this hack.
139
+ window.setTimeout(function() {
140
+ this.btnElement_.blur();
141
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
142
+ };
143
+
144
+ // Public methods.
145
+
146
+ /**
147
+ * Check the components disabled state.
148
+ *
149
+ * @public
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);
250
156
  }
251
-
252
- this.btnElement_.addEventListener('change', this.onChange_.bind(this));
253
- this.btnElement_.addEventListener('focus', this.onFocus_.bind(this));
254
- this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
255
- this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
256
-
157
+ };
158
+
159
+ /**
160
+ * Check the components toggled state.
161
+ *
162
+ * @public
163
+ */
164
+ MaterialRadio.prototype.checkToggleState = function() {
165
+ if (this.btnElement_.checked) {
166
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
167
+ } else {
168
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
169
+ }
170
+ };
171
+
172
+ /**
173
+ * Disable radio.
174
+ *
175
+ * @public
176
+ */
177
+ MaterialRadio.prototype.disable = function() {
178
+ this.btnElement_.disabled = true;
257
179
  this.updateClasses_();
258
- this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
259
- }
260
- };
261
-
262
- // The component registers itself. It can assume componentHandler is available
263
- // in the global scope.
264
- componentHandler.register({
265
- constructor: MaterialRadio,
266
- classAsString: 'MaterialRadio',
267
- cssClass: 'mdl-js-radio',
268
- widget: true
269
- });
180
+ };
181
+
182
+ /**
183
+ * Enable radio.
184
+ *
185
+ * @public
186
+ */
187
+ MaterialRadio.prototype.enable = function() {
188
+ this.btnElement_.disabled = false;
189
+ this.updateClasses_();
190
+ };
191
+
192
+ /**
193
+ * Check radio.
194
+ *
195
+ * @public
196
+ */
197
+ MaterialRadio.prototype.check = function() {
198
+ this.btnElement_.checked = true;
199
+ this.updateClasses_();
200
+ };
201
+
202
+ /**
203
+ * Uncheck radio.
204
+ *
205
+ * @public
206
+ */
207
+ MaterialRadio.prototype.uncheck = function() {
208
+ this.btnElement_.checked = false;
209
+ this.updateClasses_();
210
+ };
211
+
212
+ /**
213
+ * Initialize element.
214
+ */
215
+ MaterialRadio.prototype.init = function() {
216
+ if (this.element_) {
217
+ this.btnElement_ = this.element_.querySelector('.' +
218
+ this.CssClasses_.RADIO_BTN);
219
+
220
+ var outerCircle = document.createElement('span');
221
+ outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
222
+
223
+ var innerCircle = document.createElement('span');
224
+ innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
225
+
226
+ this.element_.appendChild(outerCircle);
227
+ this.element_.appendChild(innerCircle);
228
+
229
+ var rippleContainer;
230
+ if (this.element_.classList.contains(
231
+ this.CssClasses_.RIPPLE_EFFECT)) {
232
+ this.element_.classList.add(
233
+ this.CssClasses_.RIPPLE_IGNORE_EVENTS);
234
+ rippleContainer = document.createElement('span');
235
+ rippleContainer.classList.add(
236
+ this.CssClasses_.RIPPLE_CONTAINER);
237
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
238
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
239
+ rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
240
+
241
+ var ripple = document.createElement('span');
242
+ ripple.classList.add(this.CssClasses_.RIPPLE);
243
+
244
+ rippleContainer.appendChild(ripple);
245
+ this.element_.appendChild(rippleContainer);
246
+ }
247
+
248
+ this.btnElement_.addEventListener('change', this.onChange_.bind(this));
249
+ this.btnElement_.addEventListener('focus', this.onFocus_.bind(this));
250
+ this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
251
+ this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
252
+
253
+ this.updateClasses_();
254
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
255
+ }
256
+ };
257
+
258
+ // The component registers itself. It can assume componentHandler is available
259
+ // in the global scope.
260
+ componentHandler.register({
261
+ constructor: MaterialRadio,
262
+ classAsString: 'MaterialRadio',
263
+ cssClass: 'mdl-js-radio',
264
+ widget: true
265
+ });
266
+ })();