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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +2562 -2993
- data/vendor/assets/javascripts/material/button.js +114 -112
- data/vendor/assets/javascripts/material/checkbox.js +255 -260
- data/vendor/assets/javascripts/material/data-table.js +140 -124
- data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
- data/vendor/assets/javascripts/material/layout.js +392 -388
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
- data/vendor/assets/javascripts/material/menu.js +430 -414
- data/vendor/assets/javascripts/material/progress.js +110 -97
- data/vendor/assets/javascripts/material/radio.js +244 -247
- data/vendor/assets/javascripts/material/ripple.js +220 -211
- data/vendor/assets/javascripts/material/slider.js +228 -228
- data/vendor/assets/javascripts/material/spinner.js +122 -119
- data/vendor/assets/javascripts/material/switch.js +246 -250
- data/vendor/assets/javascripts/material/tabs.js +129 -127
- data/vendor/assets/javascripts/material/textfield.js +221 -222
- data/vendor/assets/javascripts/material/tooltip.js +126 -122
- data/vendor/assets/stylesheets/material/_badge.scss +1 -1
- data/vendor/assets/stylesheets/material/_button.scss +15 -8
- data/vendor/assets/stylesheets/material/_card.scss +1 -1
- data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
- data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
- data/vendor/assets/stylesheets/material/_functions.scss +16 -0
- data/vendor/assets/stylesheets/material/_grid.scss +11 -20
- data/vendor/assets/stylesheets/material/_layout.scss +7 -5
- data/vendor/assets/stylesheets/material/_menu.scss +4 -1
- data/vendor/assets/stylesheets/material/_radio.scss +1 -1
- data/vendor/assets/stylesheets/material/_slider.scss +1 -0
- data/vendor/assets/stylesheets/material/_switch.scss +1 -1
- data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
- data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
- data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
- data/vendor/assets/stylesheets/material/_variables.scss +18 -43
- data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
- 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
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
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
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
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
|
-
}
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
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
|
-
|
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
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
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
|
-
*
|
148
|
-
*
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
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
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
this.
|
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
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
*
|
245
|
-
*/
|
246
|
-
MaterialIconToggle.prototype.
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
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
|
+
})();
|