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,118 +15,120 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Button 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 MaterialButton(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
- MaterialButton.prototype.Constant_ = {
39
- // None for now.
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
- MaterialButton.prototype.CssClasses_ = {
50
- RIPPLE_EFFECT: 'mdl-js-ripple-effect',
51
- RIPPLE_CONTAINER: 'mdl-button__ripple-container',
52
- RIPPLE: 'mdl-ripple'
53
- };
54
-
55
- /**
56
- * Handle blur of element.
57
- * @param {HTMLElement} element The instance of a button we want to blur.
58
- * @private
59
- */
60
- MaterialButton.prototype.blurHandler = function(event) {
61
- 'use strict';
62
-
63
- if (event) {
64
- this.element_.blur();
65
- }
66
- };
67
-
68
- // Public methods.
69
-
70
- /**
71
- * Disable button.
72
- * @public
73
- */
74
- MaterialButton.prototype.disable = function() {
75
- 'use strict';
76
-
77
- this.element_.disabled = true;
78
- };
79
-
80
- /**
81
- * Enable button.
82
- * @public
83
- */
84
- MaterialButton.prototype.enable = function() {
85
- 'use strict';
86
-
87
- this.element_.disabled = false;
88
- };
89
-
90
- /**
91
- * Initialize element.
92
- */
93
- MaterialButton.prototype.init = function() {
94
- 'use strict';
95
-
96
- if (this.element_) {
97
- if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
98
- var rippleContainer = document.createElement('span');
99
- rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
100
- this.rippleElement_ = document.createElement('span');
101
- this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
102
- rippleContainer.appendChild(this.rippleElement_);
103
- this.boundRippleBlurHandler = this.blurHandler.bind(this);
104
- this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
105
- this.element_.appendChild(rippleContainer);
21
+ /**
22
+ * Class constructor for Button 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 MaterialButton = function MaterialButton(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialButton = MaterialButton;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialButton.prototype.Constant_ = {
43
+ // None for now.
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
+ MaterialButton.prototype.CssClasses_ = {
55
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
56
+ RIPPLE_CONTAINER: 'mdl-button__ripple-container',
57
+ RIPPLE: 'mdl-ripple'
58
+ };
59
+
60
+ /**
61
+ * Handle blur of element.
62
+ *
63
+ * @param {Event} event The event that fired.
64
+ * @private
65
+ */
66
+ MaterialButton.prototype.blurHandler_ = function(event) {
67
+ if (event) {
68
+ this.element_.blur();
106
69
  }
107
- this.boundButtonBlurHandler = this.blurHandler.bind(this);
108
- this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
109
- this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
110
- }
111
- };
112
-
113
- /**
114
- * Downgrade the element.
115
- */
116
- MaterialButton.prototype.mdlDowngrade_ = function() {
117
- 'use strict';
118
- if (this.rippleElement_) {
119
- this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
120
- }
121
- this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
122
- this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
123
- };
124
-
125
- // The component registers itself. It can assume componentHandler is available
126
- // in the global scope.
127
- componentHandler.register({
128
- constructor: MaterialButton,
129
- classAsString: 'MaterialButton',
130
- cssClass: 'mdl-js-button',
131
- widget: true
132
- });
70
+ };
71
+
72
+ // Public methods.
73
+
74
+ /**
75
+ * Disable button.
76
+ *
77
+ * @public
78
+ */
79
+ MaterialButton.prototype.disable = function() {
80
+ this.element_.disabled = true;
81
+ };
82
+
83
+ /**
84
+ * Enable button.
85
+ *
86
+ * @public
87
+ */
88
+ MaterialButton.prototype.enable = function() {
89
+ this.element_.disabled = false;
90
+ };
91
+
92
+ /**
93
+ * Initialize element.
94
+ */
95
+ MaterialButton.prototype.init = function() {
96
+ if (this.element_) {
97
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
98
+ var rippleContainer = document.createElement('span');
99
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
100
+ this.rippleElement_ = document.createElement('span');
101
+ this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
102
+ rippleContainer.appendChild(this.rippleElement_);
103
+ this.boundRippleBlurHandler = this.blurHandler_.bind(this);
104
+ this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
105
+ this.element_.appendChild(rippleContainer);
106
+ }
107
+ this.boundButtonBlurHandler = this.blurHandler_.bind(this);
108
+ this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
109
+ this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
110
+ }
111
+ };
112
+
113
+ /**
114
+ * Downgrade the element.
115
+ *
116
+ * @private
117
+ */
118
+ MaterialButton.prototype.mdlDowngrade_ = function() {
119
+ if (this.rippleElement_) {
120
+ this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
121
+ }
122
+ this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
123
+ this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
124
+ };
125
+
126
+ // The component registers itself. It can assume componentHandler is available
127
+ // in the global scope.
128
+ componentHandler.register({
129
+ constructor: MaterialButton,
130
+ classAsString: 'MaterialButton',
131
+ cssClass: 'mdl-js-button',
132
+ widget: true
133
+ });
134
+ })();
@@ -15,267 +15,262 @@
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 MaterialCheckbox(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
- MaterialCheckbox.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
- MaterialCheckbox.prototype.CssClasses_ = {
50
- INPUT: 'mdl-checkbox__input',
51
- BOX_OUTLINE: 'mdl-checkbox__box-outline',
52
- FOCUS_HELPER: 'mdl-checkbox__focus-helper',
53
- TICK_OUTLINE: 'mdl-checkbox__tick-outline',
54
- RIPPLE_EFFECT: 'mdl-js-ripple-effect',
55
- RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
56
- RIPPLE_CONTAINER: 'mdl-checkbox__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
- IS_UPGRADED: 'is-upgraded'
63
- };
64
-
65
- /**
66
- * Handle change of state.
67
- * @param {Event} event The event that fired.
68
- * @private
69
- */
70
- MaterialCheckbox.prototype.onChange_ = function(event) {
71
- 'use strict';
72
-
73
- this.updateClasses_();
74
- };
75
-
76
- /**
77
- * Handle focus of element.
78
- * @param {Event} event The event that fired.
79
- * @private
80
- */
81
- MaterialCheckbox.prototype.onFocus_ = function(event) {
82
- 'use strict';
83
-
84
- this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
85
- };
86
-
87
- /**
88
- * Handle lost focus of element.
89
- * @param {Event} event The event that fired.
90
- * @private
91
- */
92
- MaterialCheckbox.prototype.onBlur_ = function(event) {
93
- 'use strict';
94
-
95
- this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
96
- };
97
-
98
- /**
99
- * Handle mouseup.
100
- * @param {Event} event The event that fired.
101
- * @private
102
- */
103
- MaterialCheckbox.prototype.onMouseUp_ = function(event) {
104
- 'use strict';
105
-
106
- this.blur_();
107
- };
108
-
109
- /**
110
- * Handle class updates.
111
- * @param {HTMLElement} button The button whose classes we should update.
112
- * @param {HTMLElement} label The label whose classes we should update.
113
- * @private
114
- */
115
- MaterialCheckbox.prototype.updateClasses_ = function() {
116
- 'use strict';
117
- this.checkDisabled();
118
- this.checkToggleState();
119
- };
120
-
121
- /**
122
- * Add blur.
123
- * @private
124
- */
125
- MaterialCheckbox.prototype.blur_ = function(event) {
126
- 'use strict';
127
-
128
- // TODO: figure out why there's a focus event being fired after our blur,
129
- // so that we can avoid this hack.
130
- window.setTimeout(function() {
131
- this.inputElement_.blur();
132
- }.bind(this), this.Constant_.TINY_TIMEOUT);
133
- };
134
-
135
- // Public methods.
136
-
137
- /**
138
- * Check the inputs toggle state and update display.
139
- * @public
140
- */
141
- MaterialCheckbox.prototype.checkToggleState = function() {
142
- 'use strict';
143
- if (this.inputElement_.checked) {
144
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
145
- } else {
146
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
147
- }
148
- };
149
-
150
- /**
151
- * Check the inputs disabled state and update display.
152
- * @public
153
- */
154
- MaterialCheckbox.prototype.checkDisabled = function() {
155
- 'use strict';
156
- if (this.inputElement_.disabled) {
157
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
158
- } else {
159
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
160
- }
161
- };
162
-
163
- /**
164
- * Disable checkbox.
165
- * @public
166
- */
167
- MaterialCheckbox.prototype.disable = function() {
168
- 'use strict';
169
-
170
- this.inputElement_.disabled = true;
171
- this.updateClasses_();
172
- };
173
-
174
- /**
175
- * Enable checkbox.
176
- * @public
177
- */
178
- MaterialCheckbox.prototype.enable = function() {
179
- 'use strict';
180
-
181
- this.inputElement_.disabled = false;
182
- this.updateClasses_();
183
- };
184
-
185
- /**
186
- * Check checkbox.
187
- * @public
188
- */
189
- MaterialCheckbox.prototype.check = function() {
190
- 'use strict';
191
-
192
- this.inputElement_.checked = true;
193
- this.updateClasses_();
194
- };
195
-
196
- /**
197
- * Uncheck checkbox.
198
- * @public
199
- */
200
- MaterialCheckbox.prototype.uncheck = function() {
201
- 'use strict';
202
-
203
- this.inputElement_.checked = false;
204
- this.updateClasses_();
205
- };
206
-
207
- /**
208
- * Initialize element.
209
- */
210
- MaterialCheckbox.prototype.init = function() {
211
- 'use strict';
212
-
213
- if (this.element_) {
214
- this.inputElement_ = this.element_.querySelector('.' +
215
- this.CssClasses_.INPUT);
216
-
217
- var boxOutline = document.createElement('span');
218
- boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
219
-
220
- var tickContainer = document.createElement('span');
221
- tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
222
-
223
- var tickOutline = document.createElement('span');
224
- tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
225
-
226
- boxOutline.appendChild(tickOutline);
227
-
228
- this.element_.appendChild(tickContainer);
229
- this.element_.appendChild(boxOutline);
230
-
231
- if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
232
- this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
233
- this.rippleContainerElement_ = document.createElement('span');
234
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
235
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
236
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
237
- this.boundRippleMouseUp = this.onMouseUp_.bind(this);
238
- this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
239
-
240
- var ripple = document.createElement('span');
241
- ripple.classList.add(this.CssClasses_.RIPPLE);
242
-
243
- this.rippleContainerElement_.appendChild(ripple);
244
- this.element_.appendChild(this.rippleContainerElement_);
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 MaterialCheckbox = function MaterialCheckbox(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialCheckbox = MaterialCheckbox;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialCheckbox.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
+ MaterialCheckbox.prototype.CssClasses_ = {
55
+ INPUT: 'mdl-checkbox__input',
56
+ BOX_OUTLINE: 'mdl-checkbox__box-outline',
57
+ FOCUS_HELPER: 'mdl-checkbox__focus-helper',
58
+ TICK_OUTLINE: 'mdl-checkbox__tick-outline',
59
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
60
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
61
+ RIPPLE_CONTAINER: 'mdl-checkbox__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
+ IS_UPGRADED: 'is-upgraded'
68
+ };
69
+
70
+ /**
71
+ * Handle change of state.
72
+ *
73
+ * @param {Event} event The event that fired.
74
+ * @private
75
+ */
76
+ MaterialCheckbox.prototype.onChange_ = function(event) {
77
+ this.updateClasses_();
78
+ };
79
+
80
+ /**
81
+ * Handle focus of element.
82
+ *
83
+ * @param {Event} event The event that fired.
84
+ * @private
85
+ */
86
+ MaterialCheckbox.prototype.onFocus_ = function(event) {
87
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
88
+ };
89
+
90
+ /**
91
+ * Handle lost focus of element.
92
+ *
93
+ * @param {Event} event The event that fired.
94
+ * @private
95
+ */
96
+ MaterialCheckbox.prototype.onBlur_ = function(event) {
97
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
98
+ };
99
+
100
+ /**
101
+ * Handle mouseup.
102
+ *
103
+ * @param {Event} event The event that fired.
104
+ * @private
105
+ */
106
+ MaterialCheckbox.prototype.onMouseUp_ = function(event) {
107
+ this.blur_();
108
+ };
109
+
110
+ /**
111
+ * Handle class updates.
112
+ *
113
+ * @private
114
+ */
115
+ MaterialCheckbox.prototype.updateClasses_ = function() {
116
+ this.checkDisabled();
117
+ this.checkToggleState();
118
+ };
119
+
120
+ /**
121
+ * Add blur.
122
+ *
123
+ * @param {Event} event The event that fired.
124
+ * @private
125
+ */
126
+ MaterialCheckbox.prototype.blur_ = function(event) {
127
+ // TODO: figure out why there's a focus event being fired after our blur,
128
+ // so that we can avoid this hack.
129
+ window.setTimeout(function() {
130
+ this.inputElement_.blur();
131
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
132
+ };
133
+
134
+ // Public methods.
135
+
136
+ /**
137
+ * Check the inputs toggle state and update display.
138
+ *
139
+ * @public
140
+ */
141
+ MaterialCheckbox.prototype.checkToggleState = function() {
142
+ if (this.inputElement_.checked) {
143
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
144
+ } else {
145
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
245
146
  }
246
- this.boundInputOnChange = this.onChange_.bind(this);
247
- this.boundInputOnFocus = this.onFocus_.bind(this);
248
- this.boundInputOnBlur = this.onBlur_.bind(this);
249
- this.boundElementMouseUp = this.onMouseUp_.bind(this);
250
- this.inputElement_.addEventListener('change', this.boundInputOnChange);
251
- this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
252
- this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
253
- this.element_.addEventListener('mouseup', this.boundElementMouseUp);
254
-
147
+ };
148
+
149
+ /**
150
+ * Check the inputs disabled state and update display.
151
+ *
152
+ * @public
153
+ */
154
+ MaterialCheckbox.prototype.checkDisabled = function() {
155
+ if (this.inputElement_.disabled) {
156
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
157
+ } else {
158
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
159
+ }
160
+ };
161
+
162
+ /**
163
+ * Disable checkbox.
164
+ *
165
+ * @public
166
+ */
167
+ MaterialCheckbox.prototype.disable = function() {
168
+ this.inputElement_.disabled = true;
255
169
  this.updateClasses_();
256
- this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
257
- }
258
- };
259
-
260
- /*
261
- * Downgrade the component.
262
- */
263
- MaterialCheckbox.prototype.mdlDowngrade_ = function() {
264
- 'use strict';
265
- if (this.rippleContainerElement_) {
266
- this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
267
- }
268
- this.inputElement_.removeEventListener('change', this.boundInputOnChange);
269
- this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
270
- this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
271
- this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
272
- };
273
-
274
- // The component registers itself. It can assume componentHandler is available
275
- // in the global scope.
276
- componentHandler.register({
277
- constructor: MaterialCheckbox,
278
- classAsString: 'MaterialCheckbox',
279
- cssClass: 'mdl-js-checkbox',
280
- widget: true
281
- });
170
+ };
171
+
172
+ /**
173
+ * Enable checkbox.
174
+ *
175
+ * @public
176
+ */
177
+ MaterialCheckbox.prototype.enable = function() {
178
+ this.inputElement_.disabled = false;
179
+ this.updateClasses_();
180
+ };
181
+
182
+ /**
183
+ * Check checkbox.
184
+ *
185
+ * @public
186
+ */
187
+ MaterialCheckbox.prototype.check = function() {
188
+ this.inputElement_.checked = true;
189
+ this.updateClasses_();
190
+ };
191
+
192
+ /**
193
+ * Uncheck checkbox.
194
+ *
195
+ * @public
196
+ */
197
+ MaterialCheckbox.prototype.uncheck = function() {
198
+ this.inputElement_.checked = false;
199
+ this.updateClasses_();
200
+ };
201
+
202
+ /**
203
+ * Initialize element.
204
+ */
205
+ MaterialCheckbox.prototype.init = function() {
206
+ if (this.element_) {
207
+ this.inputElement_ = this.element_.querySelector('.' +
208
+ this.CssClasses_.INPUT);
209
+
210
+ var boxOutline = document.createElement('span');
211
+ boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
212
+
213
+ var tickContainer = document.createElement('span');
214
+ tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
215
+
216
+ var tickOutline = document.createElement('span');
217
+ tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
218
+
219
+ boxOutline.appendChild(tickOutline);
220
+
221
+ this.element_.appendChild(tickContainer);
222
+ this.element_.appendChild(boxOutline);
223
+
224
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
225
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
226
+ this.rippleContainerElement_ = document.createElement('span');
227
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
228
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
229
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
230
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
231
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
232
+
233
+ var ripple = document.createElement('span');
234
+ ripple.classList.add(this.CssClasses_.RIPPLE);
235
+
236
+ this.rippleContainerElement_.appendChild(ripple);
237
+ this.element_.appendChild(this.rippleContainerElement_);
238
+ }
239
+ this.boundInputOnChange = this.onChange_.bind(this);
240
+ this.boundInputOnFocus = this.onFocus_.bind(this);
241
+ this.boundInputOnBlur = this.onBlur_.bind(this);
242
+ this.boundElementMouseUp = this.onMouseUp_.bind(this);
243
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
244
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
245
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
246
+ this.element_.addEventListener('mouseup', this.boundElementMouseUp);
247
+
248
+ this.updateClasses_();
249
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
250
+ }
251
+ };
252
+
253
+ /**
254
+ * Downgrade the component.
255
+ *
256
+ * @private
257
+ */
258
+ MaterialCheckbox.prototype.mdlDowngrade_ = function() {
259
+ if (this.rippleContainerElement_) {
260
+ this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
261
+ }
262
+ this.inputElement_.removeEventListener('change', this.boundInputOnChange);
263
+ this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
264
+ this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
265
+ this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
266
+ };
267
+
268
+ // The component registers itself. It can assume componentHandler is available
269
+ // in the global scope.
270
+ componentHandler.register({
271
+ constructor: MaterialCheckbox,
272
+ classAsString: 'MaterialCheckbox',
273
+ cssClass: 'mdl-js-checkbox',
274
+ widget: true
275
+ });
276
+ })();