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,126 +15,129 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Spinner 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
- * @constructor
24
- */
25
- function MaterialSpinner(element) {
26
- 'use strict';
27
-
28
- this.element_ = element;
29
-
30
- // Initialize instance.
31
- this.init();
32
- }
33
-
34
- /**
35
- * Store constants in one place so they can be updated easily.
36
- * @enum {string | number}
37
- * @private
38
- */
39
- MaterialSpinner.prototype.Constant_ = {
40
- MDL_SPINNER_LAYER_COUNT: 4
41
- };
42
-
43
- /**
44
- * Store strings for class names defined by this component that are used in
45
- * JavaScript. This allows us to simply change it in one place should we
46
- * decide to modify at a later date.
47
- * @enum {string}
48
- * @private
49
- */
50
- MaterialSpinner.prototype.CssClasses_ = {
51
- MDL_SPINNER_LAYER: 'mdl-spinner__layer',
52
- MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
53
- MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
54
- MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
55
- MDL_SPINNER_LEFT: 'mdl-spinner__left',
56
- MDL_SPINNER_RIGHT: 'mdl-spinner__right'
57
- };
58
-
59
- /**
60
- * Auxiliary method to create a spinner layer.
61
- */
62
- MaterialSpinner.prototype.createLayer = function(index) {
63
- 'use strict';
64
-
65
- var layer = document.createElement('div');
66
- layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
67
- layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
68
-
69
- var leftClipper = document.createElement('div');
70
- leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
71
- leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
72
-
73
- var gapPatch = document.createElement('div');
74
- gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
75
-
76
- var rightClipper = document.createElement('div');
77
- rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
78
- rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
79
-
80
- var circleOwners = [leftClipper, gapPatch, rightClipper];
81
-
82
- for (var i = 0; i < circleOwners.length; i++) {
83
- var circle = document.createElement('div');
84
- circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
85
- circleOwners[i].appendChild(circle);
86
- }
87
-
88
- layer.appendChild(leftClipper);
89
- layer.appendChild(gapPatch);
90
- layer.appendChild(rightClipper);
91
-
92
- this.element_.appendChild(layer);
93
- };
94
-
95
- /**
96
- * Stops the spinner animation.
97
- * Public method for users who need to stop the spinner for any reason.
98
- * @public
99
- */
100
- MaterialSpinner.prototype.stop = function() {
18
+ (function() {
101
19
  'use strict';
102
20
 
103
- this.element_.classList.remove('is-active');
104
- };
105
-
106
- /**
107
- * Starts the spinner animation.
108
- * Public method for users who need to manually start the spinner for any reason
109
- * (instead of just adding the 'is-active' class to their markup).
110
- * @public
111
- */
112
- MaterialSpinner.prototype.start = function() {
113
- 'use strict';
114
-
115
- this.element_.classList.add('is-active');
116
- };
117
-
118
- /**
119
- * Initialize element.
120
- */
121
- MaterialSpinner.prototype.init = function() {
122
- 'use strict';
123
-
124
- if (this.element_) {
125
- for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
126
- this.createLayer(i);
21
+ /**
22
+ * Class constructor for Spinner 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
+ * @constructor
28
+ */
29
+ var MaterialSpinner = function MaterialSpinner(element) {
30
+ this.element_ = element;
31
+
32
+ // Initialize instance.
33
+ this.init();
34
+ };
35
+ window.MaterialSpinner = MaterialSpinner;
36
+
37
+ /**
38
+ * Store constants in one place so they can be updated easily.
39
+ *
40
+ * @enum {String | Number}
41
+ * @private
42
+ */
43
+ MaterialSpinner.prototype.Constant_ = {
44
+ MDL_SPINNER_LAYER_COUNT: 4
45
+ };
46
+
47
+ /**
48
+ * Store strings for class names defined by this component that are used in
49
+ * JavaScript. This allows us to simply change it in one place should we
50
+ * decide to modify at a later date.
51
+ *
52
+ * @enum {String}
53
+ * @private
54
+ */
55
+ MaterialSpinner.prototype.CssClasses_ = {
56
+ MDL_SPINNER_LAYER: 'mdl-spinner__layer',
57
+ MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
58
+ MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
59
+ MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
60
+ MDL_SPINNER_LEFT: 'mdl-spinner__left',
61
+ MDL_SPINNER_RIGHT: 'mdl-spinner__right'
62
+ };
63
+
64
+ /**
65
+ * Auxiliary method to create a spinner layer.
66
+ *
67
+ * @param {Number} index Index of the layer to be created.
68
+ * @public
69
+ */
70
+ MaterialSpinner.prototype.createLayer = function(index) {
71
+ var layer = document.createElement('div');
72
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
73
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
74
+
75
+ var leftClipper = document.createElement('div');
76
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
77
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
78
+
79
+ var gapPatch = document.createElement('div');
80
+ gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
81
+
82
+ var rightClipper = document.createElement('div');
83
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
84
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
85
+
86
+ var circleOwners = [leftClipper, gapPatch, rightClipper];
87
+
88
+ for (var i = 0; i < circleOwners.length; i++) {
89
+ var circle = document.createElement('div');
90
+ circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
91
+ circleOwners[i].appendChild(circle);
127
92
  }
128
93
 
129
- this.element_.classList.add('is-upgraded');
130
- }
131
- };
132
-
133
- // The component registers itself. It can assume componentHandler is available
134
- // in the global scope.
135
- componentHandler.register({
136
- constructor: MaterialSpinner,
137
- classAsString: 'MaterialSpinner',
138
- cssClass: 'mdl-js-spinner',
139
- widget: true
140
- });
94
+ layer.appendChild(leftClipper);
95
+ layer.appendChild(gapPatch);
96
+ layer.appendChild(rightClipper);
97
+
98
+ this.element_.appendChild(layer);
99
+ };
100
+
101
+ /**
102
+ * Stops the spinner animation.
103
+ * Public method for users who need to stop the spinner for any reason.
104
+ *
105
+ * @public
106
+ */
107
+ MaterialSpinner.prototype.stop = function() {
108
+ this.element_.classList.remove('is-active');
109
+ };
110
+
111
+ /**
112
+ * Starts the spinner animation.
113
+ * Public method for users who need to manually start the spinner for any reason
114
+ * (instead of just adding the 'is-active' class to their markup).
115
+ *
116
+ * @public
117
+ */
118
+ MaterialSpinner.prototype.start = function() {
119
+ this.element_.classList.add('is-active');
120
+ };
121
+
122
+ /**
123
+ * Initialize element.
124
+ */
125
+ MaterialSpinner.prototype.init = function() {
126
+ if (this.element_) {
127
+ for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
128
+ this.createLayer(i);
129
+ }
130
+
131
+ this.element_.classList.add('is-upgraded');
132
+ }
133
+ };
134
+
135
+ // The component registers itself. It can assume componentHandler is available
136
+ // in the global scope.
137
+ componentHandler.register({
138
+ constructor: MaterialSpinner,
139
+ classAsString: 'MaterialSpinner',
140
+ cssClass: 'mdl-js-spinner',
141
+ widget: true
142
+ });
143
+ })();
@@ -15,269 +15,265 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Checkbox 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 MaterialSwitch(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
- MaterialSwitch.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
- MaterialSwitch.prototype.CssClasses_ = {
50
- INPUT: 'mdl-switch__input',
51
- TRACK: 'mdl-switch__track',
52
- THUMB: 'mdl-switch__thumb',
53
- FOCUS_HELPER: 'mdl-switch__focus-helper',
54
- RIPPLE_EFFECT: 'mdl-js-ripple-effect',
55
- RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
56
- RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
57
- RIPPLE_CENTER: 'mdl-ripple--center',
58
- RIPPLE: 'mdl-ripple',
59
- IS_FOCUSED: 'is-focused',
60
- IS_DISABLED: 'is-disabled',
61
- IS_CHECKED: 'is-checked'
62
- };
63
-
64
- /**
65
- * Handle change of state.
66
- * @param {Event} event The event that fired.
67
- * @private
68
- */
69
- MaterialSwitch.prototype.onChange_ = function(event) {
70
- 'use strict';
71
-
72
- this.updateClasses_();
73
- };
74
-
75
- /**
76
- * Handle focus of element.
77
- * @param {Event} event The event that fired.
78
- * @private
79
- */
80
- MaterialSwitch.prototype.onFocus_ = function(event) {
81
- 'use strict';
82
-
83
- this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
84
- };
85
-
86
- /**
87
- * Handle lost focus of element.
88
- * @param {Event} event The event that fired.
89
- * @private
90
- */
91
- MaterialSwitch.prototype.onBlur_ = function(event) {
92
- 'use strict';
93
-
94
- this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
95
- };
96
-
97
- /**
98
- * Handle mouseup.
99
- * @param {Event} event The event that fired.
100
- * @private
101
- */
102
- MaterialSwitch.prototype.onMouseUp_ = function(event) {
103
- 'use strict';
104
-
105
- this.blur_();
106
- };
107
-
108
- /**
109
- * Handle class updates.
110
- * @private
111
- */
112
- MaterialSwitch.prototype.updateClasses_ = function() {
113
- 'use strict';
114
- this.checkDisabled();
115
- this.checkToggleState();
116
- };
117
-
118
- /**
119
- * Add blur.
120
- * @private
121
- */
122
- MaterialSwitch.prototype.blur_ = function(event) {
18
+ (function() {
123
19
  'use strict';
124
20
 
125
- // TODO: figure out why there's a focus event being fired after our blur,
126
- // so that we can avoid this hack.
127
- window.setTimeout(function() {
128
- this.inputElement_.blur();
129
- }.bind(this), this.Constant_.TINY_TIMEOUT);
130
- };
131
-
132
- // Public methods.
133
-
134
- /**
135
- * Check the components disabled state.
136
- * @public
137
- */
138
- MaterialSwitch.prototype.checkDisabled = function() {
139
- 'use strict';
140
- if (this.inputElement_.disabled) {
141
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
142
- } else {
143
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
144
- }
145
- };
146
-
147
- /**
148
- * Check the components toggled state.
149
- * @public
150
- */
151
- MaterialSwitch.prototype.checkToggleState = function() {
152
- 'use strict';
153
- if (this.inputElement_.checked) {
154
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
155
- } else {
156
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
157
- }
158
- };
159
-
160
- /**
161
- * Disable switch.
162
- * @public
163
- */
164
- MaterialSwitch.prototype.disable = function() {
165
- 'use strict';
166
-
167
- this.inputElement_.disabled = true;
168
- this.updateClasses_();
169
- };
170
-
171
- /**
172
- * Enable switch.
173
- * @public
174
- */
175
- MaterialSwitch.prototype.enable = function() {
176
- 'use strict';
177
-
178
- this.inputElement_.disabled = false;
179
- this.updateClasses_();
180
- };
181
-
182
- /**
183
- * Activate switch.
184
- * @public
185
- */
186
- MaterialSwitch.prototype.on = function() {
187
- 'use strict';
188
-
189
- this.inputElement_.checked = true;
190
- this.updateClasses_();
191
- };
21
+ /**
22
+ * Class constructor for Checkbox 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 MaterialSwitch = function MaterialSwitch(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialSwitch = MaterialSwitch;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialSwitch.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
+ MaterialSwitch.prototype.CssClasses_ = {
55
+ INPUT: 'mdl-switch__input',
56
+ TRACK: 'mdl-switch__track',
57
+ THUMB: 'mdl-switch__thumb',
58
+ FOCUS_HELPER: 'mdl-switch__focus-helper',
59
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
60
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
61
+ RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
62
+ RIPPLE_CENTER: 'mdl-ripple--center',
63
+ RIPPLE: 'mdl-ripple',
64
+ IS_FOCUSED: 'is-focused',
65
+ IS_DISABLED: 'is-disabled',
66
+ IS_CHECKED: 'is-checked'
67
+ };
68
+
69
+ /**
70
+ * Handle change of state.
71
+ *
72
+ * @param {Event} event The event that fired.
73
+ * @private
74
+ */
75
+ MaterialSwitch.prototype.onChange_ = function(event) {
76
+ this.updateClasses_();
77
+ };
78
+
79
+ /**
80
+ * Handle focus of element.
81
+ *
82
+ * @param {Event} event The event that fired.
83
+ * @private
84
+ */
85
+ MaterialSwitch.prototype.onFocus_ = function(event) {
86
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
87
+ };
88
+
89
+ /**
90
+ * Handle lost focus of element.
91
+ *
92
+ * @param {Event} event The event that fired.
93
+ * @private
94
+ */
95
+ MaterialSwitch.prototype.onBlur_ = function(event) {
96
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
97
+ };
98
+
99
+ /**
100
+ * Handle mouseup.
101
+ *
102
+ * @param {Event} event The event that fired.
103
+ * @private
104
+ */
105
+ MaterialSwitch.prototype.onMouseUp_ = function(event) {
106
+ this.blur_();
107
+ };
108
+
109
+ /**
110
+ * Handle class updates.
111
+ *
112
+ * @private
113
+ */
114
+ MaterialSwitch.prototype.updateClasses_ = function() {
115
+ this.checkDisabled();
116
+ this.checkToggleState();
117
+ };
118
+
119
+ /**
120
+ * Add blur.
121
+ *
122
+ * @private
123
+ */
124
+ MaterialSwitch.prototype.blur_ = function(event) {
125
+ // TODO: figure out why there's a focus event being fired after our blur,
126
+ // so that we can avoid this hack.
127
+ window.setTimeout(function() {
128
+ this.inputElement_.blur();
129
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
130
+ };
131
+
132
+ // Public methods.
133
+
134
+ /**
135
+ * Check the components disabled state.
136
+ *
137
+ * @public
138
+ */
139
+ MaterialSwitch.prototype.checkDisabled = function() {
140
+ if (this.inputElement_.disabled) {
141
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
142
+ } else {
143
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
144
+ }
145
+ };
146
+
147
+ /**
148
+ * Check the components toggled state.
149
+ *
150
+ * @public
151
+ */
152
+ MaterialSwitch.prototype.checkToggleState = function() {
153
+ if (this.inputElement_.checked) {
154
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
155
+ } else {
156
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
157
+ }
158
+ };
159
+
160
+ /**
161
+ * Disable switch.
162
+ *
163
+ * @public
164
+ */
165
+ MaterialSwitch.prototype.disable = function() {
166
+ this.inputElement_.disabled = true;
167
+ this.updateClasses_();
168
+ };
169
+
170
+ /**
171
+ * Enable switch.
172
+ *
173
+ * @public
174
+ */
175
+ MaterialSwitch.prototype.enable = function() {
176
+ this.inputElement_.disabled = false;
177
+ this.updateClasses_();
178
+ };
179
+
180
+ /**
181
+ * Activate switch.
182
+ *
183
+ * @public
184
+ */
185
+ MaterialSwitch.prototype.on = function() {
186
+ this.inputElement_.checked = true;
187
+ this.updateClasses_();
188
+ };
189
+
190
+ /**
191
+ * Deactivate switch.
192
+ *
193
+ * @public
194
+ */
195
+ MaterialSwitch.prototype.off = function() {
196
+ this.inputElement_.checked = false;
197
+ this.updateClasses_();
198
+ };
192
199
 
193
- /**
194
- * Deactivate switch.
195
- * @public
196
- */
197
- MaterialSwitch.prototype.off = function() {
198
- 'use strict';
200
+ /**
201
+ * Initialize element.
202
+ */
203
+ MaterialSwitch.prototype.init = function() {
204
+ if (this.element_) {
205
+ this.inputElement_ = this.element_.querySelector('.' +
206
+ this.CssClasses_.INPUT);
199
207
 
200
- this.inputElement_.checked = false;
201
- this.updateClasses_();
202
- };
208
+ var track = document.createElement('div');
209
+ track.classList.add(this.CssClasses_.TRACK);
203
210
 
204
- /**
205
- * Initialize element.
206
- */
207
- MaterialSwitch.prototype.init = function() {
208
- 'use strict';
211
+ var thumb = document.createElement('div');
212
+ thumb.classList.add(this.CssClasses_.THUMB);
209
213
 
210
- if (this.element_) {
211
- this.inputElement_ = this.element_.querySelector('.' +
212
- this.CssClasses_.INPUT);
214
+ var focusHelper = document.createElement('span');
215
+ focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
213
216
 
214
- var track = document.createElement('div');
215
- track.classList.add(this.CssClasses_.TRACK);
217
+ thumb.appendChild(focusHelper);
216
218
 
217
- var thumb = document.createElement('div');
218
- thumb.classList.add(this.CssClasses_.THUMB);
219
+ this.element_.appendChild(track);
220
+ this.element_.appendChild(thumb);
219
221
 
220
- var focusHelper = document.createElement('span');
221
- focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
222
+ this.boundMouseUpHandler = this.onMouseUp_.bind(this);
222
223
 
223
- thumb.appendChild(focusHelper);
224
+ if (this.element_.classList.contains(
225
+ this.CssClasses_.RIPPLE_EFFECT)) {
226
+ this.element_.classList.add(
227
+ this.CssClasses_.RIPPLE_IGNORE_EVENTS);
228
+ this.rippleContainerElement_ = document.createElement('span');
229
+ this.rippleContainerElement_.classList.add(
230
+ this.CssClasses_.RIPPLE_CONTAINER);
231
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
232
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
233
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
224
234
 
225
- this.element_.appendChild(track);
226
- this.element_.appendChild(thumb);
235
+ var ripple = document.createElement('span');
236
+ ripple.classList.add(this.CssClasses_.RIPPLE);
227
237
 
228
- this.boundMouseUpHandler = this.onMouseUp_.bind(this);
238
+ this.rippleContainerElement_.appendChild(ripple);
239
+ this.element_.appendChild(this.rippleContainerElement_);
240
+ }
229
241
 
230
- if (this.element_.classList.contains(
231
- this.CssClasses_.RIPPLE_EFFECT)) {
232
- this.element_.classList.add(
233
- this.CssClasses_.RIPPLE_IGNORE_EVENTS);
234
- this.rippleContainerElement_ = document.createElement('span');
235
- this.rippleContainerElement_.classList.add(
236
- this.CssClasses_.RIPPLE_CONTAINER);
237
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
238
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
239
- this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
242
+ this.boundChangeHandler = this.onChange_.bind(this);
243
+ this.boundFocusHandler = this.onFocus_.bind(this);
244
+ this.boundBlurHandler = this.onBlur_.bind(this);
240
245
 
241
- var ripple = document.createElement('span');
242
- ripple.classList.add(this.CssClasses_.RIPPLE);
246
+ this.inputElement_.addEventListener('change', this.boundChangeHandler);
247
+ this.inputElement_.addEventListener('focus', this.boundFocusHandler);
248
+ this.inputElement_.addEventListener('blur', this.boundBlurHandler);
249
+ this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
243
250
 
244
- this.rippleContainerElement_.appendChild(ripple);
245
- this.element_.appendChild(this.rippleContainerElement_);
251
+ this.updateClasses_();
252
+ this.element_.classList.add('is-upgraded');
246
253
  }
247
-
248
- this.boundChangeHandler = this.onChange_.bind(this);
249
- this.boundFocusHandler = this.onFocus_.bind(this);
250
- this.boundBlurHandler = this.onBlur_.bind(this);
251
-
252
- this.inputElement_.addEventListener('change', this.boundChangeHandler);
253
- this.inputElement_.addEventListener('focus', this.boundFocusHandler);
254
- this.inputElement_.addEventListener('blur', this.boundBlurHandler);
255
- this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
256
-
257
- this.updateClasses_();
258
- this.element_.classList.add('is-upgraded');
259
- }
260
- };
261
-
262
- /*
263
- * Downgrade the component.
264
- */
265
- MaterialSwitch.prototype.mdlDowngrade_ = function() {
266
- 'use strict';
267
- if (this.rippleContainerElement_) {
268
- this.rippleContainerElement_.removeEventListener('mouseup', this.boundMouseUpHandler);
269
- }
270
- this.inputElement_.removeEventListener('change', this.boundChangeHandler);
271
- this.inputElement_.removeEventListener('focus', this.boundFocusHandler);
272
- this.inputElement_.removeEventListener('blur', this.boundBlurHandler);
273
- this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
274
- };
275
-
276
- // The component registers itself. It can assume componentHandler is available
277
- // in the global scope.
278
- componentHandler.register({
279
- constructor: MaterialSwitch,
280
- classAsString: 'MaterialSwitch',
281
- cssClass: 'mdl-js-switch',
282
- widget: true
283
- });
254
+ };
255
+
256
+ /**
257
+ * Downgrade the component.
258
+ *
259
+ * @private
260
+ */
261
+ MaterialSwitch.prototype.mdlDowngrade_ = function() {
262
+ if (this.rippleContainerElement_) {
263
+ this.rippleContainerElement_.removeEventListener('mouseup', this.boundMouseUpHandler);
264
+ }
265
+ this.inputElement_.removeEventListener('change', this.boundChangeHandler);
266
+ this.inputElement_.removeEventListener('focus', this.boundFocusHandler);
267
+ this.inputElement_.removeEventListener('blur', this.boundBlurHandler);
268
+ this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
269
+ };
270
+
271
+ // The component registers itself. It can assume componentHandler is available
272
+ // in the global scope.
273
+ componentHandler.register({
274
+ constructor: MaterialSwitch,
275
+ classAsString: 'MaterialSwitch',
276
+ cssClass: 'mdl-js-switch',
277
+ widget: true
278
+ });
279
+ })();