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,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
|
-
|
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
|
-
MaterialButton.prototype.
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
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
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
MaterialButton.prototype.
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
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
|
-
|
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
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
MaterialCheckbox.prototype.
|
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
|
-
|
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
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
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
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
*
|
262
|
-
*/
|
263
|
-
MaterialCheckbox.prototype.
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
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
|
+
})();
|