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,126 +15,129 @@
|
|
15
15
|
* limitations under the License.
|
16
16
|
*/
|
17
17
|
|
18
|
-
|
19
|
-
* Class constructor for Spinner 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
|
-
* @constructor
|
24
|
-
*/
|
25
|
-
function MaterialSpinner(element) {
|
26
|
-
'use strict';
|
27
|
-
|
28
|
-
this.element_ = element;
|
29
|
-
|
30
|
-
// Initialize instance.
|
31
|
-
this.init();
|
32
|
-
}
|
33
|
-
|
34
|
-
/**
|
35
|
-
* Store constants in one place so they can be updated easily.
|
36
|
-
* @enum {string | number}
|
37
|
-
* @private
|
38
|
-
*/
|
39
|
-
MaterialSpinner.prototype.Constant_ = {
|
40
|
-
MDL_SPINNER_LAYER_COUNT: 4
|
41
|
-
};
|
42
|
-
|
43
|
-
/**
|
44
|
-
* Store strings for class names defined by this component that are used in
|
45
|
-
* JavaScript. This allows us to simply change it in one place should we
|
46
|
-
* decide to modify at a later date.
|
47
|
-
* @enum {string}
|
48
|
-
* @private
|
49
|
-
*/
|
50
|
-
MaterialSpinner.prototype.CssClasses_ = {
|
51
|
-
MDL_SPINNER_LAYER: 'mdl-spinner__layer',
|
52
|
-
MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
|
53
|
-
MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
|
54
|
-
MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
|
55
|
-
MDL_SPINNER_LEFT: 'mdl-spinner__left',
|
56
|
-
MDL_SPINNER_RIGHT: 'mdl-spinner__right'
|
57
|
-
};
|
58
|
-
|
59
|
-
/**
|
60
|
-
* Auxiliary method to create a spinner layer.
|
61
|
-
*/
|
62
|
-
MaterialSpinner.prototype.createLayer = function(index) {
|
63
|
-
'use strict';
|
64
|
-
|
65
|
-
var layer = document.createElement('div');
|
66
|
-
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
|
67
|
-
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
|
68
|
-
|
69
|
-
var leftClipper = document.createElement('div');
|
70
|
-
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
|
71
|
-
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
|
72
|
-
|
73
|
-
var gapPatch = document.createElement('div');
|
74
|
-
gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
|
75
|
-
|
76
|
-
var rightClipper = document.createElement('div');
|
77
|
-
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
|
78
|
-
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
|
79
|
-
|
80
|
-
var circleOwners = [leftClipper, gapPatch, rightClipper];
|
81
|
-
|
82
|
-
for (var i = 0; i < circleOwners.length; i++) {
|
83
|
-
var circle = document.createElement('div');
|
84
|
-
circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
|
85
|
-
circleOwners[i].appendChild(circle);
|
86
|
-
}
|
87
|
-
|
88
|
-
layer.appendChild(leftClipper);
|
89
|
-
layer.appendChild(gapPatch);
|
90
|
-
layer.appendChild(rightClipper);
|
91
|
-
|
92
|
-
this.element_.appendChild(layer);
|
93
|
-
};
|
94
|
-
|
95
|
-
/**
|
96
|
-
* Stops the spinner animation.
|
97
|
-
* Public method for users who need to stop the spinner for any reason.
|
98
|
-
* @public
|
99
|
-
*/
|
100
|
-
MaterialSpinner.prototype.stop = function() {
|
18
|
+
(function() {
|
101
19
|
'use strict';
|
102
20
|
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
*
|
108
|
-
*
|
109
|
-
*
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
};
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
21
|
+
/**
|
22
|
+
* Class constructor for Spinner 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
|
+
* @constructor
|
28
|
+
*/
|
29
|
+
var MaterialSpinner = function MaterialSpinner(element) {
|
30
|
+
this.element_ = element;
|
31
|
+
|
32
|
+
// Initialize instance.
|
33
|
+
this.init();
|
34
|
+
};
|
35
|
+
window.MaterialSpinner = MaterialSpinner;
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Store constants in one place so they can be updated easily.
|
39
|
+
*
|
40
|
+
* @enum {String | Number}
|
41
|
+
* @private
|
42
|
+
*/
|
43
|
+
MaterialSpinner.prototype.Constant_ = {
|
44
|
+
MDL_SPINNER_LAYER_COUNT: 4
|
45
|
+
};
|
46
|
+
|
47
|
+
/**
|
48
|
+
* Store strings for class names defined by this component that are used in
|
49
|
+
* JavaScript. This allows us to simply change it in one place should we
|
50
|
+
* decide to modify at a later date.
|
51
|
+
*
|
52
|
+
* @enum {String}
|
53
|
+
* @private
|
54
|
+
*/
|
55
|
+
MaterialSpinner.prototype.CssClasses_ = {
|
56
|
+
MDL_SPINNER_LAYER: 'mdl-spinner__layer',
|
57
|
+
MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
|
58
|
+
MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
|
59
|
+
MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
|
60
|
+
MDL_SPINNER_LEFT: 'mdl-spinner__left',
|
61
|
+
MDL_SPINNER_RIGHT: 'mdl-spinner__right'
|
62
|
+
};
|
63
|
+
|
64
|
+
/**
|
65
|
+
* Auxiliary method to create a spinner layer.
|
66
|
+
*
|
67
|
+
* @param {Number} index Index of the layer to be created.
|
68
|
+
* @public
|
69
|
+
*/
|
70
|
+
MaterialSpinner.prototype.createLayer = function(index) {
|
71
|
+
var layer = document.createElement('div');
|
72
|
+
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
|
73
|
+
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
|
74
|
+
|
75
|
+
var leftClipper = document.createElement('div');
|
76
|
+
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
|
77
|
+
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
|
78
|
+
|
79
|
+
var gapPatch = document.createElement('div');
|
80
|
+
gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
|
81
|
+
|
82
|
+
var rightClipper = document.createElement('div');
|
83
|
+
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
|
84
|
+
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
|
85
|
+
|
86
|
+
var circleOwners = [leftClipper, gapPatch, rightClipper];
|
87
|
+
|
88
|
+
for (var i = 0; i < circleOwners.length; i++) {
|
89
|
+
var circle = document.createElement('div');
|
90
|
+
circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
|
91
|
+
circleOwners[i].appendChild(circle);
|
127
92
|
}
|
128
93
|
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
94
|
+
layer.appendChild(leftClipper);
|
95
|
+
layer.appendChild(gapPatch);
|
96
|
+
layer.appendChild(rightClipper);
|
97
|
+
|
98
|
+
this.element_.appendChild(layer);
|
99
|
+
};
|
100
|
+
|
101
|
+
/**
|
102
|
+
* Stops the spinner animation.
|
103
|
+
* Public method for users who need to stop the spinner for any reason.
|
104
|
+
*
|
105
|
+
* @public
|
106
|
+
*/
|
107
|
+
MaterialSpinner.prototype.stop = function() {
|
108
|
+
this.element_.classList.remove('is-active');
|
109
|
+
};
|
110
|
+
|
111
|
+
/**
|
112
|
+
* Starts the spinner animation.
|
113
|
+
* Public method for users who need to manually start the spinner for any reason
|
114
|
+
* (instead of just adding the 'is-active' class to their markup).
|
115
|
+
*
|
116
|
+
* @public
|
117
|
+
*/
|
118
|
+
MaterialSpinner.prototype.start = function() {
|
119
|
+
this.element_.classList.add('is-active');
|
120
|
+
};
|
121
|
+
|
122
|
+
/**
|
123
|
+
* Initialize element.
|
124
|
+
*/
|
125
|
+
MaterialSpinner.prototype.init = function() {
|
126
|
+
if (this.element_) {
|
127
|
+
for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
|
128
|
+
this.createLayer(i);
|
129
|
+
}
|
130
|
+
|
131
|
+
this.element_.classList.add('is-upgraded');
|
132
|
+
}
|
133
|
+
};
|
134
|
+
|
135
|
+
// The component registers itself. It can assume componentHandler is available
|
136
|
+
// in the global scope.
|
137
|
+
componentHandler.register({
|
138
|
+
constructor: MaterialSpinner,
|
139
|
+
classAsString: 'MaterialSpinner',
|
140
|
+
cssClass: 'mdl-js-spinner',
|
141
|
+
widget: true
|
142
|
+
});
|
143
|
+
})();
|
@@ -15,269 +15,265 @@
|
|
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 MaterialSwitch(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
|
-
MaterialSwitch.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
|
-
MaterialSwitch.prototype.CssClasses_ = {
|
50
|
-
INPUT: 'mdl-switch__input',
|
51
|
-
TRACK: 'mdl-switch__track',
|
52
|
-
THUMB: 'mdl-switch__thumb',
|
53
|
-
FOCUS_HELPER: 'mdl-switch__focus-helper',
|
54
|
-
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
55
|
-
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
56
|
-
RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
|
57
|
-
RIPPLE_CENTER: 'mdl-ripple--center',
|
58
|
-
RIPPLE: 'mdl-ripple',
|
59
|
-
IS_FOCUSED: 'is-focused',
|
60
|
-
IS_DISABLED: 'is-disabled',
|
61
|
-
IS_CHECKED: 'is-checked'
|
62
|
-
};
|
63
|
-
|
64
|
-
/**
|
65
|
-
* Handle change of state.
|
66
|
-
* @param {Event} event The event that fired.
|
67
|
-
* @private
|
68
|
-
*/
|
69
|
-
MaterialSwitch.prototype.onChange_ = function(event) {
|
70
|
-
'use strict';
|
71
|
-
|
72
|
-
this.updateClasses_();
|
73
|
-
};
|
74
|
-
|
75
|
-
/**
|
76
|
-
* Handle focus of element.
|
77
|
-
* @param {Event} event The event that fired.
|
78
|
-
* @private
|
79
|
-
*/
|
80
|
-
MaterialSwitch.prototype.onFocus_ = function(event) {
|
81
|
-
'use strict';
|
82
|
-
|
83
|
-
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
84
|
-
};
|
85
|
-
|
86
|
-
/**
|
87
|
-
* Handle lost focus of element.
|
88
|
-
* @param {Event} event The event that fired.
|
89
|
-
* @private
|
90
|
-
*/
|
91
|
-
MaterialSwitch.prototype.onBlur_ = function(event) {
|
92
|
-
'use strict';
|
93
|
-
|
94
|
-
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
95
|
-
};
|
96
|
-
|
97
|
-
/**
|
98
|
-
* Handle mouseup.
|
99
|
-
* @param {Event} event The event that fired.
|
100
|
-
* @private
|
101
|
-
*/
|
102
|
-
MaterialSwitch.prototype.onMouseUp_ = function(event) {
|
103
|
-
'use strict';
|
104
|
-
|
105
|
-
this.blur_();
|
106
|
-
};
|
107
|
-
|
108
|
-
/**
|
109
|
-
* Handle class updates.
|
110
|
-
* @private
|
111
|
-
*/
|
112
|
-
MaterialSwitch.prototype.updateClasses_ = function() {
|
113
|
-
'use strict';
|
114
|
-
this.checkDisabled();
|
115
|
-
this.checkToggleState();
|
116
|
-
};
|
117
|
-
|
118
|
-
/**
|
119
|
-
* Add blur.
|
120
|
-
* @private
|
121
|
-
*/
|
122
|
-
MaterialSwitch.prototype.blur_ = function(event) {
|
18
|
+
(function() {
|
123
19
|
'use strict';
|
124
20
|
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
}
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
MaterialSwitch
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
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
|
-
};
|
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 MaterialSwitch = function MaterialSwitch(element) {
|
29
|
+
this.element_ = element;
|
30
|
+
|
31
|
+
// Initialize instance.
|
32
|
+
this.init();
|
33
|
+
};
|
34
|
+
window.MaterialSwitch = MaterialSwitch;
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Store constants in one place so they can be updated easily.
|
38
|
+
*
|
39
|
+
* @enum {String | Number}
|
40
|
+
* @private
|
41
|
+
*/
|
42
|
+
MaterialSwitch.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
|
+
MaterialSwitch.prototype.CssClasses_ = {
|
55
|
+
INPUT: 'mdl-switch__input',
|
56
|
+
TRACK: 'mdl-switch__track',
|
57
|
+
THUMB: 'mdl-switch__thumb',
|
58
|
+
FOCUS_HELPER: 'mdl-switch__focus-helper',
|
59
|
+
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
60
|
+
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
61
|
+
RIPPLE_CONTAINER: 'mdl-switch__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
|
+
};
|
68
|
+
|
69
|
+
/**
|
70
|
+
* Handle change of state.
|
71
|
+
*
|
72
|
+
* @param {Event} event The event that fired.
|
73
|
+
* @private
|
74
|
+
*/
|
75
|
+
MaterialSwitch.prototype.onChange_ = function(event) {
|
76
|
+
this.updateClasses_();
|
77
|
+
};
|
78
|
+
|
79
|
+
/**
|
80
|
+
* Handle focus of element.
|
81
|
+
*
|
82
|
+
* @param {Event} event The event that fired.
|
83
|
+
* @private
|
84
|
+
*/
|
85
|
+
MaterialSwitch.prototype.onFocus_ = function(event) {
|
86
|
+
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
87
|
+
};
|
88
|
+
|
89
|
+
/**
|
90
|
+
* Handle lost focus of element.
|
91
|
+
*
|
92
|
+
* @param {Event} event The event that fired.
|
93
|
+
* @private
|
94
|
+
*/
|
95
|
+
MaterialSwitch.prototype.onBlur_ = function(event) {
|
96
|
+
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
97
|
+
};
|
98
|
+
|
99
|
+
/**
|
100
|
+
* Handle mouseup.
|
101
|
+
*
|
102
|
+
* @param {Event} event The event that fired.
|
103
|
+
* @private
|
104
|
+
*/
|
105
|
+
MaterialSwitch.prototype.onMouseUp_ = function(event) {
|
106
|
+
this.blur_();
|
107
|
+
};
|
108
|
+
|
109
|
+
/**
|
110
|
+
* Handle class updates.
|
111
|
+
*
|
112
|
+
* @private
|
113
|
+
*/
|
114
|
+
MaterialSwitch.prototype.updateClasses_ = function() {
|
115
|
+
this.checkDisabled();
|
116
|
+
this.checkToggleState();
|
117
|
+
};
|
118
|
+
|
119
|
+
/**
|
120
|
+
* Add blur.
|
121
|
+
*
|
122
|
+
* @private
|
123
|
+
*/
|
124
|
+
MaterialSwitch.prototype.blur_ = function(event) {
|
125
|
+
// TODO: figure out why there's a focus event being fired after our blur,
|
126
|
+
// so that we can avoid this hack.
|
127
|
+
window.setTimeout(function() {
|
128
|
+
this.inputElement_.blur();
|
129
|
+
}.bind(this), this.Constant_.TINY_TIMEOUT);
|
130
|
+
};
|
131
|
+
|
132
|
+
// Public methods.
|
133
|
+
|
134
|
+
/**
|
135
|
+
* Check the components disabled state.
|
136
|
+
*
|
137
|
+
* @public
|
138
|
+
*/
|
139
|
+
MaterialSwitch.prototype.checkDisabled = function() {
|
140
|
+
if (this.inputElement_.disabled) {
|
141
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
142
|
+
} else {
|
143
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
144
|
+
}
|
145
|
+
};
|
146
|
+
|
147
|
+
/**
|
148
|
+
* Check the components toggled state.
|
149
|
+
*
|
150
|
+
* @public
|
151
|
+
*/
|
152
|
+
MaterialSwitch.prototype.checkToggleState = function() {
|
153
|
+
if (this.inputElement_.checked) {
|
154
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
155
|
+
} else {
|
156
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
157
|
+
}
|
158
|
+
};
|
159
|
+
|
160
|
+
/**
|
161
|
+
* Disable switch.
|
162
|
+
*
|
163
|
+
* @public
|
164
|
+
*/
|
165
|
+
MaterialSwitch.prototype.disable = function() {
|
166
|
+
this.inputElement_.disabled = true;
|
167
|
+
this.updateClasses_();
|
168
|
+
};
|
169
|
+
|
170
|
+
/**
|
171
|
+
* Enable switch.
|
172
|
+
*
|
173
|
+
* @public
|
174
|
+
*/
|
175
|
+
MaterialSwitch.prototype.enable = function() {
|
176
|
+
this.inputElement_.disabled = false;
|
177
|
+
this.updateClasses_();
|
178
|
+
};
|
179
|
+
|
180
|
+
/**
|
181
|
+
* Activate switch.
|
182
|
+
*
|
183
|
+
* @public
|
184
|
+
*/
|
185
|
+
MaterialSwitch.prototype.on = function() {
|
186
|
+
this.inputElement_.checked = true;
|
187
|
+
this.updateClasses_();
|
188
|
+
};
|
189
|
+
|
190
|
+
/**
|
191
|
+
* Deactivate switch.
|
192
|
+
*
|
193
|
+
* @public
|
194
|
+
*/
|
195
|
+
MaterialSwitch.prototype.off = function() {
|
196
|
+
this.inputElement_.checked = false;
|
197
|
+
this.updateClasses_();
|
198
|
+
};
|
192
199
|
|
193
|
-
/**
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
200
|
+
/**
|
201
|
+
* Initialize element.
|
202
|
+
*/
|
203
|
+
MaterialSwitch.prototype.init = function() {
|
204
|
+
if (this.element_) {
|
205
|
+
this.inputElement_ = this.element_.querySelector('.' +
|
206
|
+
this.CssClasses_.INPUT);
|
199
207
|
|
200
|
-
|
201
|
-
|
202
|
-
};
|
208
|
+
var track = document.createElement('div');
|
209
|
+
track.classList.add(this.CssClasses_.TRACK);
|
203
210
|
|
204
|
-
|
205
|
-
|
206
|
-
*/
|
207
|
-
MaterialSwitch.prototype.init = function() {
|
208
|
-
'use strict';
|
211
|
+
var thumb = document.createElement('div');
|
212
|
+
thumb.classList.add(this.CssClasses_.THUMB);
|
209
213
|
|
210
|
-
|
211
|
-
|
212
|
-
this.CssClasses_.INPUT);
|
214
|
+
var focusHelper = document.createElement('span');
|
215
|
+
focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
|
213
216
|
|
214
|
-
|
215
|
-
track.classList.add(this.CssClasses_.TRACK);
|
217
|
+
thumb.appendChild(focusHelper);
|
216
218
|
|
217
|
-
|
218
|
-
|
219
|
+
this.element_.appendChild(track);
|
220
|
+
this.element_.appendChild(thumb);
|
219
221
|
|
220
|
-
|
221
|
-
focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
|
222
|
+
this.boundMouseUpHandler = this.onMouseUp_.bind(this);
|
222
223
|
|
223
|
-
|
224
|
+
if (this.element_.classList.contains(
|
225
|
+
this.CssClasses_.RIPPLE_EFFECT)) {
|
226
|
+
this.element_.classList.add(
|
227
|
+
this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
228
|
+
this.rippleContainerElement_ = document.createElement('span');
|
229
|
+
this.rippleContainerElement_.classList.add(
|
230
|
+
this.CssClasses_.RIPPLE_CONTAINER);
|
231
|
+
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
232
|
+
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
233
|
+
this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
|
224
234
|
|
225
|
-
|
226
|
-
|
235
|
+
var ripple = document.createElement('span');
|
236
|
+
ripple.classList.add(this.CssClasses_.RIPPLE);
|
227
237
|
|
228
|
-
|
238
|
+
this.rippleContainerElement_.appendChild(ripple);
|
239
|
+
this.element_.appendChild(this.rippleContainerElement_);
|
240
|
+
}
|
229
241
|
|
230
|
-
|
231
|
-
|
232
|
-
this.
|
233
|
-
this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
234
|
-
this.rippleContainerElement_ = document.createElement('span');
|
235
|
-
this.rippleContainerElement_.classList.add(
|
236
|
-
this.CssClasses_.RIPPLE_CONTAINER);
|
237
|
-
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
238
|
-
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
239
|
-
this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
|
242
|
+
this.boundChangeHandler = this.onChange_.bind(this);
|
243
|
+
this.boundFocusHandler = this.onFocus_.bind(this);
|
244
|
+
this.boundBlurHandler = this.onBlur_.bind(this);
|
240
245
|
|
241
|
-
|
242
|
-
|
246
|
+
this.inputElement_.addEventListener('change', this.boundChangeHandler);
|
247
|
+
this.inputElement_.addEventListener('focus', this.boundFocusHandler);
|
248
|
+
this.inputElement_.addEventListener('blur', this.boundBlurHandler);
|
249
|
+
this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
|
243
250
|
|
244
|
-
this.
|
245
|
-
this.element_.
|
251
|
+
this.updateClasses_();
|
252
|
+
this.element_.classList.add('is-upgraded');
|
246
253
|
}
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
this.
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
|
274
|
-
};
|
275
|
-
|
276
|
-
// The component registers itself. It can assume componentHandler is available
|
277
|
-
// in the global scope.
|
278
|
-
componentHandler.register({
|
279
|
-
constructor: MaterialSwitch,
|
280
|
-
classAsString: 'MaterialSwitch',
|
281
|
-
cssClass: 'mdl-js-switch',
|
282
|
-
widget: true
|
283
|
-
});
|
254
|
+
};
|
255
|
+
|
256
|
+
/**
|
257
|
+
* Downgrade the component.
|
258
|
+
*
|
259
|
+
* @private
|
260
|
+
*/
|
261
|
+
MaterialSwitch.prototype.mdlDowngrade_ = function() {
|
262
|
+
if (this.rippleContainerElement_) {
|
263
|
+
this.rippleContainerElement_.removeEventListener('mouseup', this.boundMouseUpHandler);
|
264
|
+
}
|
265
|
+
this.inputElement_.removeEventListener('change', this.boundChangeHandler);
|
266
|
+
this.inputElement_.removeEventListener('focus', this.boundFocusHandler);
|
267
|
+
this.inputElement_.removeEventListener('blur', this.boundBlurHandler);
|
268
|
+
this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
|
269
|
+
};
|
270
|
+
|
271
|
+
// The component registers itself. It can assume componentHandler is available
|
272
|
+
// in the global scope.
|
273
|
+
componentHandler.register({
|
274
|
+
constructor: MaterialSwitch,
|
275
|
+
classAsString: 'MaterialSwitch',
|
276
|
+
cssClass: 'mdl-js-switch',
|
277
|
+
widget: true
|
278
|
+
});
|
279
|
+
})();
|