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