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,135 +15,151 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Data Table Card 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 MaterialDataTable(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
- MaterialDataTable.prototype.Constant_ = {
39
- // None at the moment.
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
- MaterialDataTable.prototype.CssClasses_ = {
50
- DATA_TABLE: 'mdl-data-table',
51
- SELECTABLE: 'mdl-data-table--selectable',
52
- IS_SELECTED: 'is-selected',
53
- IS_UPGRADED: 'is-upgraded'
54
- };
55
-
56
- MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) {
18
+ (function() {
57
19
  'use strict';
58
20
 
59
- if (row) {
60
- return function() {
61
- if (checkbox.checked) {
62
- row.classList.add(this.CssClasses_.IS_SELECTED);
63
- } else {
64
- row.classList.remove(this.CssClasses_.IS_SELECTED);
65
- }
66
- }.bind(this);
67
- }
21
+ /**
22
+ * Class constructor for Data Table Card 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 MaterialDataTable = function MaterialDataTable(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialDataTable = MaterialDataTable;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialDataTable.prototype.Constant_ = {
43
+ // None at the moment.
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
+ MaterialDataTable.prototype.CssClasses_ = {
55
+ DATA_TABLE: 'mdl-data-table',
56
+ SELECTABLE: 'mdl-data-table--selectable',
57
+ IS_SELECTED: 'is-selected',
58
+ IS_UPGRADED: 'is-upgraded'
59
+ };
60
+
61
+ /**
62
+ * Generates and returns a function that toggles the selection state of a
63
+ * single row (or multiple rows).
64
+ *
65
+ * @param {HTMLElement} checkbox Checkbox that toggles the selection state.
66
+ * @param {HTMLElement} row Row to toggle when checkbox changes.
67
+ * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
68
+ * @private
69
+ */
70
+ MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) {
71
+ if (row) {
72
+ return function() {
73
+ if (checkbox.checked) {
74
+ row.classList.add(this.CssClasses_.IS_SELECTED);
75
+ } else {
76
+ row.classList.remove(this.CssClasses_.IS_SELECTED);
77
+ }
78
+ }.bind(this);
79
+ }
68
80
 
69
- if (rows) {
70
- return function() {
71
- var i;
72
- var el;
73
- if (checkbox.checked) {
74
- for (i = 0; i < rows.length; i++) {
75
- el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
76
- el.MaterialCheckbox.check();
77
- rows[i].classList.add(this.CssClasses_.IS_SELECTED);
81
+ if (rows) {
82
+ return function() {
83
+ var i;
84
+ var el;
85
+ if (checkbox.checked) {
86
+ for (i = 0; i < rows.length; i++) {
87
+ el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
88
+ el.MaterialCheckbox.check();
89
+ rows[i].classList.add(this.CssClasses_.IS_SELECTED);
90
+ }
91
+ } else {
92
+ for (i = 0; i < rows.length; i++) {
93
+ el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
94
+ el.MaterialCheckbox.uncheck();
95
+ rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
96
+ }
78
97
  }
79
- } else {
80
- for (i = 0; i < rows.length; i++) {
81
- el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
82
- el.MaterialCheckbox.uncheck();
83
- rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
98
+ }.bind(this);
99
+ }
100
+ };
101
+
102
+ /**
103
+ * Creates a checkbox for a single or or multiple rows and hooks up the
104
+ * event handling.
105
+ *
106
+ * @param {HTMLElement} row Row to toggle when checkbox changes.
107
+ * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
108
+ * @private
109
+ */
110
+ MaterialDataTable.prototype.createCheckbox_ = function(row, rows) {
111
+ var label = document.createElement('label');
112
+ label.classList.add('mdl-checkbox');
113
+ label.classList.add('mdl-js-checkbox');
114
+ label.classList.add('mdl-js-ripple-effect');
115
+ label.classList.add('mdl-data-table__select');
116
+ var checkbox = document.createElement('input');
117
+ checkbox.type = 'checkbox';
118
+ checkbox.classList.add('mdl-checkbox__input');
119
+ if (row) {
120
+ checkbox.addEventListener('change', this.selectRow_(checkbox, row));
121
+ } else if (rows) {
122
+ checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
123
+ }
124
+ label.appendChild(checkbox);
125
+ componentHandler.upgradeElement(label, 'MaterialCheckbox');
126
+ return label;
127
+ };
128
+
129
+ /**
130
+ * Initialize element.
131
+ */
132
+ MaterialDataTable.prototype.init = function() {
133
+ if (this.element_) {
134
+ var firstHeader = this.element_.querySelector('th');
135
+ var rows = this.element_.querySelector('tbody').querySelectorAll('tr');
136
+
137
+ if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
138
+ var th = document.createElement('th');
139
+ var headerCheckbox = this.createCheckbox_(null, rows);
140
+ th.appendChild(headerCheckbox);
141
+ firstHeader.parentElement.insertBefore(th, firstHeader);
142
+
143
+ for (var i = 0; i < rows.length; i++) {
144
+ var firstCell = rows[i].querySelector('td');
145
+ if (firstCell) {
146
+ var td = document.createElement('td');
147
+ var rowCheckbox = this.createCheckbox_(rows[i]);
148
+ td.appendChild(rowCheckbox);
149
+ rows[i].insertBefore(td, firstCell);
150
+ }
84
151
  }
85
152
  }
86
- }.bind(this);
87
- }
88
- };
89
-
90
- MaterialDataTable.prototype.createCheckbox_ = function(row, rows) {
91
- 'use strict';
92
-
93
- var label = document.createElement('label');
94
- label.classList.add('mdl-checkbox');
95
- label.classList.add('mdl-js-checkbox');
96
- label.classList.add('mdl-js-ripple-effect');
97
- label.classList.add('mdl-data-table__select');
98
- var checkbox = document.createElement('input');
99
- checkbox.type = 'checkbox';
100
- checkbox.classList.add('mdl-checkbox__input');
101
- if (row) {
102
- checkbox.addEventListener('change', this.selectRow_(checkbox, row));
103
- } else if (rows) {
104
- checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
105
- }
106
- label.appendChild(checkbox);
107
- componentHandler.upgradeElement(label, 'MaterialCheckbox');
108
- return label;
109
- };
110
-
111
- /**
112
- * Initialize element.
113
- */
114
- MaterialDataTable.prototype.init = function() {
115
- 'use strict';
116
153
 
117
- if (this.element_) {
118
-
119
- var firstHeader = this.element_.querySelector('th');
120
- var rows = this.element_.querySelector('tbody').querySelectorAll('tr');
121
-
122
- if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
123
- var th = document.createElement('th');
124
- var headerCheckbox = this.createCheckbox_(null, rows);
125
- th.appendChild(headerCheckbox);
126
- firstHeader.parentElement.insertBefore(th, firstHeader);
127
-
128
- for (var i = 0; i < rows.length; i++) {
129
- var firstCell = rows[i].querySelector('td');
130
- if (firstCell) {
131
- var td = document.createElement('td');
132
- var rowCheckbox = this.createCheckbox_(rows[i]);
133
- td.appendChild(rowCheckbox);
134
- rows[i].insertBefore(td, firstCell);
135
- }
136
- }
154
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
137
155
  }
138
-
139
- this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
140
- }
141
- };
142
-
143
- // The component registers itself. It can assume componentHandler is available
144
- // in the global scope.
145
- componentHandler.register({
146
- constructor: MaterialDataTable,
147
- classAsString: 'MaterialDataTable',
148
- cssClass: 'mdl-js-data-table'
149
- });
156
+ };
157
+
158
+ // The component registers itself. It can assume componentHandler is available
159
+ // in the global scope.
160
+ componentHandler.register({
161
+ constructor: MaterialDataTable,
162
+ classAsString: 'MaterialDataTable',
163
+ cssClass: 'mdl-js-data-table'
164
+ });
165
+ })();
@@ -15,250 +15,246 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for icon toggle 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 MaterialIconToggle(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
- MaterialIconToggle.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
- MaterialIconToggle.prototype.CssClasses_ = {
50
- INPUT: 'mdl-icon-toggle__input',
51
- JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
52
- RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
53
- RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
54
- RIPPLE_CENTER: 'mdl-ripple--center',
55
- RIPPLE: 'mdl-ripple',
56
- IS_FOCUSED: 'is-focused',
57
- IS_DISABLED: 'is-disabled',
58
- IS_CHECKED: 'is-checked'
59
- };
60
-
61
- /**
62
- * Handle change of state.
63
- * @param {Event} event The event that fired.
64
- * @private
65
- */
66
- MaterialIconToggle.prototype.onChange_ = function(event) {
67
- 'use strict';
68
-
69
- this.updateClasses_();
70
- };
71
-
72
- /**
73
- * Handle focus of element.
74
- * @param {Event} event The event that fired.
75
- * @private
76
- */
77
- MaterialIconToggle.prototype.onFocus_ = function(event) {
78
- 'use strict';
79
-
80
- this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
81
- };
82
-
83
- /**
84
- * Handle lost focus of element.
85
- * @param {Event} event The event that fired.
86
- * @private
87
- */
88
- MaterialIconToggle.prototype.onBlur_ = function(event) {
89
- 'use strict';
90
-
91
- this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
92
- };
93
-
94
- /**
95
- * Handle mouseup.
96
- * @param {Event} event The event that fired.
97
- * @private
98
- */
99
- MaterialIconToggle.prototype.onMouseUp_ = function(event) {
100
- 'use strict';
101
-
102
- this.blur_();
103
- };
104
-
105
- /**
106
- * Handle class updates.
107
- * @param {HTMLElement} button The button whose classes we should update.
108
- * @param {HTMLElement} label The label whose classes we should update.
109
- * @private
110
- */
111
- MaterialIconToggle.prototype.updateClasses_ = function() {
112
- 'use strict';
113
- this.checkDisabled();
114
- this.checkToggleState();
115
- };
116
-
117
- /**
118
- * Add blur.
119
- * @private
120
- */
121
- MaterialIconToggle.prototype.blur_ = function(event) {
122
- 'use strict';
123
-
124
- // TODO: figure out why there's a focus event being fired after our blur,
125
- // so that we can avoid this hack.
126
- window.setTimeout(function() {
127
- this.inputElement_.blur();
128
- }.bind(this), this.Constant_.TINY_TIMEOUT);
129
- };
130
-
131
- // Public methods.
132
-
133
- /**
134
- * Check the inputs toggle state and update display.
135
- * @public
136
- */
137
- MaterialIconToggle.prototype.checkToggleState = function() {
18
+ (function() {
138
19
  'use strict';
139
- if (this.inputElement_.checked) {
140
- this.element_.classList.add(this.CssClasses_.IS_CHECKED);
141
- } else {
142
- this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
143
- }
144
- };
145
20
 
146
- /**
147
- * Check the inputs disabled state and update display.
148
- * @public
149
- */
150
- MaterialIconToggle.prototype.checkDisabled = function() {
151
- 'use strict';
152
- if (this.inputElement_.disabled) {
153
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
154
- } else {
155
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
156
- }
157
- };
158
-
159
- /**
160
- * Disable icon toggle.
161
- * @public
162
- */
163
- MaterialIconToggle.prototype.disable = function() {
164
- 'use strict';
165
-
166
- this.inputElement_.disabled = true;
167
- this.updateClasses_();
168
- };
169
-
170
- /**
171
- * Enable icon toggle.
172
- * @public
173
- */
174
- MaterialIconToggle.prototype.enable = function() {
175
- 'use strict';
176
-
177
- this.inputElement_.disabled = false;
178
- this.updateClasses_();
179
- };
180
-
181
- /**
182
- * Check icon toggle.
183
- * @public
184
- */
185
- MaterialIconToggle.prototype.check = function() {
186
- 'use strict';
187
-
188
- this.inputElement_.checked = true;
189
- this.updateClasses_();
190
- };
191
-
192
- /**
193
- * Uncheck icon toggle.
194
- * @public
195
- */
196
- MaterialIconToggle.prototype.uncheck = function() {
197
- 'use strict';
198
-
199
- this.inputElement_.checked = false;
200
- this.updateClasses_();
201
- };
202
-
203
- /**
204
- * Initialize element.
205
- */
206
- MaterialIconToggle.prototype.init = function() {
207
- 'use strict';
208
-
209
- if (this.element_) {
210
- this.inputElement_ =
211
- this.element_.querySelector('.' + this.CssClasses_.INPUT);
212
-
213
- if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
214
- this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
215
- this.rippleContainerElement_ = document.createElement('span');
216
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
217
- this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
218
- this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
219
- this.boundRippleMouseUp = this.onMouseUp_.bind(this);
220
- this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
221
-
222
- var ripple = document.createElement('span');
223
- ripple.classList.add(this.CssClasses_.RIPPLE);
224
-
225
- this.rippleContainerElement_.appendChild(ripple);
226
- this.element_.appendChild(this.rippleContainerElement_);
21
+ /**
22
+ * Class constructor for icon toggle 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 MaterialIconToggle = function MaterialIconToggle(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialIconToggle = MaterialIconToggle;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialIconToggle.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
+ MaterialIconToggle.prototype.CssClasses_ = {
55
+ INPUT: 'mdl-icon-toggle__input',
56
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
57
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
58
+ RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
59
+ RIPPLE_CENTER: 'mdl-ripple--center',
60
+ RIPPLE: 'mdl-ripple',
61
+ IS_FOCUSED: 'is-focused',
62
+ IS_DISABLED: 'is-disabled',
63
+ IS_CHECKED: 'is-checked'
64
+ };
65
+
66
+ /**
67
+ * Handle change of state.
68
+ *
69
+ * @param {Event} event The event that fired.
70
+ * @private
71
+ */
72
+ MaterialIconToggle.prototype.onChange_ = function(event) {
73
+ this.updateClasses_();
74
+ };
75
+
76
+ /**
77
+ * Handle focus of element.
78
+ *
79
+ * @param {Event} event The event that fired.
80
+ * @private
81
+ */
82
+ MaterialIconToggle.prototype.onFocus_ = function(event) {
83
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
84
+ };
85
+
86
+ /**
87
+ * Handle lost focus of element.
88
+ *
89
+ * @param {Event} event The event that fired.
90
+ * @private
91
+ */
92
+ MaterialIconToggle.prototype.onBlur_ = function(event) {
93
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
94
+ };
95
+
96
+ /**
97
+ * Handle mouseup.
98
+ *
99
+ * @param {Event} event The event that fired.
100
+ * @private
101
+ */
102
+ MaterialIconToggle.prototype.onMouseUp_ = function(event) {
103
+ this.blur_();
104
+ };
105
+
106
+ /**
107
+ * Handle class updates.
108
+ *
109
+ * @private
110
+ */
111
+ MaterialIconToggle.prototype.updateClasses_ = function() {
112
+ this.checkDisabled();
113
+ this.checkToggleState();
114
+ };
115
+
116
+ /**
117
+ * Add blur.
118
+ *
119
+ * @param {Event} event The event that fired.
120
+ * @private
121
+ */
122
+ MaterialIconToggle.prototype.blur_ = function(event) {
123
+ // TODO: figure out why there's a focus event being fired after our blur,
124
+ // so that we can avoid this hack.
125
+ window.setTimeout(function() {
126
+ this.inputElement_.blur();
127
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
128
+ };
129
+
130
+ // Public methods.
131
+
132
+ /**
133
+ * Check the inputs toggle state and update display.
134
+ *
135
+ * @public
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);
227
142
  }
228
-
229
- this.boundInputOnChange = this.onChange_.bind(this);
230
- this.boundInputOnFocus = this.onFocus_.bind(this);
231
- this.boundInputOnBlur = this.onBlur_.bind(this);
232
- this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
233
- this.inputElement_.addEventListener('change', this.boundInputOnChange);
234
- this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
235
- this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
236
- this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
237
-
143
+ };
144
+
145
+ /**
146
+ * Check the inputs disabled state and update display.
147
+ *
148
+ * @public
149
+ */
150
+ MaterialIconToggle.prototype.checkDisabled = function() {
151
+ if (this.inputElement_.disabled) {
152
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
153
+ } else {
154
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
155
+ }
156
+ };
157
+
158
+ /**
159
+ * Disable icon toggle.
160
+ *
161
+ * @public
162
+ */
163
+ MaterialIconToggle.prototype.disable = function() {
164
+ this.inputElement_.disabled = true;
238
165
  this.updateClasses_();
239
- this.element_.classList.add('is-upgraded');
240
- }
241
- };
242
-
243
- /*
244
- * Downgrade the component
245
- */
246
- MaterialIconToggle.prototype.mdlDowngrade_ = function() {
247
- 'use strict';
248
- if (this.rippleContainerElement_) {
249
- this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
250
- }
251
- this.inputElement_.removeEventListener('change', this.boundInputOnChange);
252
- this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
253
- this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
254
- this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
255
- };
256
-
257
- // The component registers itself. It can assume componentHandler is available
258
- // in the global scope.
259
- componentHandler.register({
260
- constructor: MaterialIconToggle,
261
- classAsString: 'MaterialIconToggle',
262
- cssClass: 'mdl-js-icon-toggle',
263
- widget: true
264
- });
166
+ };
167
+
168
+ /**
169
+ * Enable icon toggle.
170
+ *
171
+ * @public
172
+ */
173
+ MaterialIconToggle.prototype.enable = function() {
174
+ this.inputElement_.disabled = false;
175
+ this.updateClasses_();
176
+ };
177
+
178
+ /**
179
+ * Check icon toggle.
180
+ *
181
+ * @public
182
+ */
183
+ MaterialIconToggle.prototype.check = function() {
184
+ this.inputElement_.checked = true;
185
+ this.updateClasses_();
186
+ };
187
+
188
+ /**
189
+ * Uncheck icon toggle.
190
+ *
191
+ * @public
192
+ */
193
+ MaterialIconToggle.prototype.uncheck = function() {
194
+ this.inputElement_.checked = false;
195
+ this.updateClasses_();
196
+ };
197
+
198
+ /**
199
+ * Initialize element.
200
+ */
201
+ MaterialIconToggle.prototype.init = function() {
202
+
203
+ if (this.element_) {
204
+ this.inputElement_ =
205
+ this.element_.querySelector('.' + this.CssClasses_.INPUT);
206
+
207
+ if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
208
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
209
+ this.rippleContainerElement_ = document.createElement('span');
210
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
211
+ this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
212
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
213
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
214
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
215
+
216
+ var ripple = document.createElement('span');
217
+ ripple.classList.add(this.CssClasses_.RIPPLE);
218
+
219
+ this.rippleContainerElement_.appendChild(ripple);
220
+ this.element_.appendChild(this.rippleContainerElement_);
221
+ }
222
+
223
+ this.boundInputOnChange = this.onChange_.bind(this);
224
+ this.boundInputOnFocus = this.onFocus_.bind(this);
225
+ this.boundInputOnBlur = this.onBlur_.bind(this);
226
+ this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
227
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
228
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
229
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
230
+ this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
231
+
232
+ this.updateClasses_();
233
+ this.element_.classList.add('is-upgraded');
234
+ }
235
+ };
236
+
237
+ /**
238
+ * Downgrade the component
239
+ *
240
+ * @private
241
+ */
242
+ MaterialIconToggle.prototype.mdlDowngrade_ = function() {
243
+ if (this.rippleContainerElement_) {
244
+ this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
245
+ }
246
+ this.inputElement_.removeEventListener('change', this.boundInputOnChange);
247
+ this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
248
+ this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
249
+ this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
250
+ };
251
+
252
+ // The component registers itself. It can assume componentHandler is available
253
+ // in the global scope.
254
+ componentHandler.register({
255
+ constructor: MaterialIconToggle,
256
+ classAsString: 'MaterialIconToggle',
257
+ cssClass: 'mdl-js-icon-toggle',
258
+ widget: true
259
+ });
260
+ })();