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,138 +15,140 @@
|
|
15
15
|
* limitations under the License.
|
16
16
|
*/
|
17
17
|
|
18
|
-
|
19
|
-
* Class constructor for Tabs 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 MaterialTabs(element) {
|
25
|
-
'use strict';
|
26
|
-
|
27
|
-
// Stores the HTML element.
|
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}
|
37
|
-
* @private
|
38
|
-
*/
|
39
|
-
MaterialTabs.prototype.Constant_ = {
|
40
|
-
// None at the moment.
|
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
|
-
MaterialTabs.prototype.CssClasses_ = {
|
51
|
-
TAB_CLASS: 'mdl-tabs__tab',
|
52
|
-
PANEL_CLASS: 'mdl-tabs__panel',
|
53
|
-
ACTIVE_CLASS: 'is-active',
|
54
|
-
UPGRADED_CLASS: 'is-upgraded',
|
55
|
-
|
56
|
-
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
57
|
-
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
|
58
|
-
MDL_RIPPLE: 'mdl-ripple',
|
59
|
-
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
|
60
|
-
};
|
61
|
-
|
62
|
-
/**
|
63
|
-
* Handle clicks to a tabs component
|
64
|
-
* @private
|
65
|
-
*/
|
66
|
-
MaterialTabs.prototype.initTabs_ = function(e) {
|
67
|
-
'use strict';
|
68
|
-
|
69
|
-
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
|
70
|
-
this.element_.classList.add(
|
71
|
-
this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
|
72
|
-
}
|
73
|
-
|
74
|
-
// Select element tabs, document panels
|
75
|
-
this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
|
76
|
-
this.panels_ =
|
77
|
-
this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
|
78
|
-
|
79
|
-
// Create new tabs for each tab element
|
80
|
-
for (var i = 0; i < this.tabs_.length; i++) {
|
81
|
-
new MaterialTab(this.tabs_[i], this);
|
82
|
-
}
|
83
|
-
|
84
|
-
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
|
85
|
-
};
|
86
|
-
|
87
|
-
/**
|
88
|
-
* Reset tab state, dropping active classes
|
89
|
-
* @private
|
90
|
-
*/
|
91
|
-
MaterialTabs.prototype.resetTabState_ = function() {
|
18
|
+
(function() {
|
92
19
|
'use strict';
|
93
20
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
21
|
+
/**
|
22
|
+
* Class constructor for Tabs 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 MaterialTabs = function MaterialTabs(element) {
|
29
|
+
// Stores the HTML element.
|
30
|
+
this.element_ = element;
|
31
|
+
|
32
|
+
// Initialize instance.
|
33
|
+
this.init();
|
34
|
+
};
|
35
|
+
window.MaterialTabs = MaterialTabs;
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Store constants in one place so they can be updated easily.
|
39
|
+
*
|
40
|
+
* @enum {String}
|
41
|
+
* @private
|
42
|
+
*/
|
43
|
+
MaterialTabs.prototype.Constant_ = {
|
44
|
+
// None at the moment.
|
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
|
+
MaterialTabs.prototype.CssClasses_ = {
|
56
|
+
TAB_CLASS: 'mdl-tabs__tab',
|
57
|
+
PANEL_CLASS: 'mdl-tabs__panel',
|
58
|
+
ACTIVE_CLASS: 'is-active',
|
59
|
+
UPGRADED_CLASS: 'is-upgraded',
|
60
|
+
|
61
|
+
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
62
|
+
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
|
63
|
+
MDL_RIPPLE: 'mdl-ripple',
|
64
|
+
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
|
65
|
+
};
|
66
|
+
|
67
|
+
/**
|
68
|
+
* Handle clicks to a tabs component
|
69
|
+
*
|
70
|
+
* @private
|
71
|
+
*/
|
72
|
+
MaterialTabs.prototype.initTabs_ = function() {
|
73
|
+
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
|
74
|
+
this.element_.classList.add(
|
75
|
+
this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
|
76
|
+
}
|
118
77
|
|
119
|
-
|
120
|
-
|
78
|
+
// Select element tabs, document panels
|
79
|
+
this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
|
80
|
+
this.panels_ =
|
81
|
+
this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
|
121
82
|
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
|
126
|
-
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
|
127
|
-
var ripple = document.createElement('span');
|
128
|
-
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
|
129
|
-
rippleContainer.appendChild(ripple);
|
130
|
-
tab.appendChild(rippleContainer);
|
83
|
+
// Create new tabs for each tab element
|
84
|
+
for (var i = 0; i < this.tabs_.length; i++) {
|
85
|
+
new MaterialTab(this.tabs_[i], this);
|
131
86
|
}
|
132
87
|
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
88
|
+
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
|
89
|
+
};
|
90
|
+
|
91
|
+
/**
|
92
|
+
* Reset tab state, dropping active classes
|
93
|
+
*
|
94
|
+
* @private
|
95
|
+
*/
|
96
|
+
MaterialTabs.prototype.resetTabState_ = function() {
|
97
|
+
for (var k = 0; k < this.tabs_.length; k++) {
|
98
|
+
this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
99
|
+
}
|
100
|
+
};
|
101
|
+
|
102
|
+
/**
|
103
|
+
* Reset panel state, droping active classes
|
104
|
+
*
|
105
|
+
* @private
|
106
|
+
*/
|
107
|
+
MaterialTabs.prototype.resetPanelState_ = function() {
|
108
|
+
for (var j = 0; j < this.panels_.length; j++) {
|
109
|
+
this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
110
|
+
}
|
111
|
+
};
|
112
|
+
|
113
|
+
/**
|
114
|
+
* Initialize element.
|
115
|
+
*/
|
116
|
+
MaterialTabs.prototype.init = function() {
|
117
|
+
if (this.element_) {
|
118
|
+
this.initTabs_();
|
119
|
+
}
|
120
|
+
};
|
121
|
+
|
122
|
+
function MaterialTab(tab, ctx) {
|
123
|
+
if (tab) {
|
124
|
+
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
|
125
|
+
var rippleContainer = document.createElement('span');
|
126
|
+
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
|
127
|
+
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
|
128
|
+
var ripple = document.createElement('span');
|
129
|
+
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
|
130
|
+
rippleContainer.appendChild(ripple);
|
131
|
+
tab.appendChild(rippleContainer);
|
132
|
+
}
|
133
|
+
|
134
|
+
tab.addEventListener('click', function(e) {
|
135
|
+
e.preventDefault();
|
136
|
+
var href = tab.href.split('#')[1];
|
137
|
+
var panel = ctx.element_.querySelector('#' + href);
|
138
|
+
ctx.resetTabState_();
|
139
|
+
ctx.resetPanelState_();
|
140
|
+
tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
|
141
|
+
panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
|
142
|
+
});
|
142
143
|
|
144
|
+
}
|
143
145
|
}
|
144
|
-
|
145
|
-
|
146
|
-
//
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
});
|
146
|
+
|
147
|
+
// The component registers itself. It can assume componentHandler is available
|
148
|
+
// in the global scope.
|
149
|
+
componentHandler.register({
|
150
|
+
constructor: MaterialTabs,
|
151
|
+
classAsString: 'MaterialTabs',
|
152
|
+
cssClass: 'mdl-js-tabs'
|
153
|
+
});
|
154
|
+
})();
|
@@ -15,233 +15,232 @@
|
|
15
15
|
* limitations under the License.
|
16
16
|
*/
|
17
17
|
|
18
|
-
|
19
|
-
* Class constructor for Textfield 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 MaterialTextfield(element) {
|
25
|
-
'use strict';
|
26
|
-
|
27
|
-
this.element_ = element;
|
28
|
-
this.maxRows = this.Constant_.NO_MAX_ROWS;
|
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
|
-
MaterialTextfield.prototype.Constant_ = {
|
39
|
-
NO_MAX_ROWS: -1,
|
40
|
-
MAX_ROWS_ATTRIBUTE: 'maxrows'
|
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
|
-
MaterialTextfield.prototype.CssClasses_ = {
|
51
|
-
LABEL: 'mdl-textfield__label',
|
52
|
-
INPUT: 'mdl-textfield__input',
|
53
|
-
IS_DIRTY: 'is-dirty',
|
54
|
-
IS_FOCUSED: 'is-focused',
|
55
|
-
IS_DISABLED: 'is-disabled',
|
56
|
-
IS_INVALID: 'is-invalid',
|
57
|
-
IS_UPGRADED: 'is-upgraded'
|
58
|
-
};
|
59
|
-
|
60
|
-
/**
|
61
|
-
* Handle input being entered.
|
62
|
-
* @param {Event} event The event that fired.
|
63
|
-
* @private
|
64
|
-
*/
|
65
|
-
MaterialTextfield.prototype.onKeyDown_ = function(event) {
|
18
|
+
(function() {
|
66
19
|
'use strict';
|
67
20
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
21
|
+
/**
|
22
|
+
* Class constructor for Textfield 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 MaterialTextfield = function MaterialTextfield(element) {
|
29
|
+
this.element_ = element;
|
30
|
+
this.maxRows = this.Constant_.NO_MAX_ROWS;
|
31
|
+
// Initialize instance.
|
32
|
+
this.init();
|
33
|
+
};
|
34
|
+
window.MaterialTextfield = MaterialTextfield;
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Store constants in one place so they can be updated easily.
|
38
|
+
*
|
39
|
+
* @enum {String | Number}
|
40
|
+
* @private
|
41
|
+
*/
|
42
|
+
MaterialTextfield.prototype.Constant_ = {
|
43
|
+
NO_MAX_ROWS: -1,
|
44
|
+
MAX_ROWS_ATTRIBUTE: 'maxrows'
|
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
|
+
MaterialTextfield.prototype.CssClasses_ = {
|
56
|
+
LABEL: 'mdl-textfield__label',
|
57
|
+
INPUT: 'mdl-textfield__input',
|
58
|
+
IS_DIRTY: 'is-dirty',
|
59
|
+
IS_FOCUSED: 'is-focused',
|
60
|
+
IS_DISABLED: 'is-disabled',
|
61
|
+
IS_INVALID: 'is-invalid',
|
62
|
+
IS_UPGRADED: 'is-upgraded'
|
63
|
+
};
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Handle input being entered.
|
67
|
+
*
|
68
|
+
* @param {Event} event The event that fired.
|
69
|
+
* @private
|
70
|
+
*/
|
71
|
+
MaterialTextfield.prototype.onKeyDown_ = function(event) {
|
72
|
+
var currentRowCount = event.target.value.split('\n').length;
|
73
|
+
if (event.keyCode === 13) {
|
74
|
+
if (currentRowCount >= this.maxRows) {
|
75
|
+
event.preventDefault();
|
76
|
+
}
|
72
77
|
}
|
73
|
-
}
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
MaterialTextfield.prototype.onFocus_ = function(event) {
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
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
|
-
|
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
|
-
|
78
|
+
};
|
79
|
+
|
80
|
+
/**
|
81
|
+
* Handle focus.
|
82
|
+
*
|
83
|
+
* @param {Event} event The event that fired.
|
84
|
+
* @private
|
85
|
+
*/
|
86
|
+
MaterialTextfield.prototype.onFocus_ = function(event) {
|
87
|
+
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
|
88
|
+
};
|
89
|
+
|
90
|
+
/**
|
91
|
+
* Handle lost focus.
|
92
|
+
*
|
93
|
+
* @param {Event} event The event that fired.
|
94
|
+
* @private
|
95
|
+
*/
|
96
|
+
MaterialTextfield.prototype.onBlur_ = function(event) {
|
97
|
+
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
|
98
|
+
};
|
99
|
+
|
100
|
+
/**
|
101
|
+
* Handle class updates.
|
102
|
+
*
|
103
|
+
* @private
|
104
|
+
*/
|
105
|
+
MaterialTextfield.prototype.updateClasses_ = function() {
|
106
|
+
this.checkDisabled();
|
107
|
+
this.checkValidity();
|
108
|
+
this.checkDirty();
|
109
|
+
};
|
110
|
+
|
111
|
+
// Public methods.
|
112
|
+
|
113
|
+
/**
|
114
|
+
* Check the disabled state and update field accordingly.
|
115
|
+
*
|
116
|
+
* @public
|
117
|
+
*/
|
118
|
+
MaterialTextfield.prototype.checkDisabled = function() {
|
119
|
+
if (this.input_.disabled) {
|
120
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
121
|
+
} else {
|
122
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
123
|
+
}
|
124
|
+
};
|
125
|
+
|
126
|
+
/**
|
127
|
+
* Check the validity state and update field accordingly.
|
128
|
+
*
|
129
|
+
* @public
|
130
|
+
*/
|
131
|
+
MaterialTextfield.prototype.checkValidity = function() {
|
132
|
+
if (this.input_.validity.valid) {
|
133
|
+
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
|
134
|
+
} else {
|
135
|
+
this.element_.classList.add(this.CssClasses_.IS_INVALID);
|
136
|
+
}
|
137
|
+
};
|
138
|
+
|
139
|
+
/**
|
140
|
+
* Check the dirty state and update field accordingly.
|
141
|
+
*
|
142
|
+
* @public
|
143
|
+
*/
|
144
|
+
MaterialTextfield.prototype.checkDirty = function() {
|
145
|
+
if (this.input_.value && this.input_.value.length > 0) {
|
146
|
+
this.element_.classList.add(this.CssClasses_.IS_DIRTY);
|
147
|
+
} else {
|
148
|
+
this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
|
149
|
+
}
|
150
|
+
};
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Disable text field.
|
154
|
+
*
|
155
|
+
* @public
|
156
|
+
*/
|
157
|
+
MaterialTextfield.prototype.disable = function() {
|
158
|
+
this.input_.disabled = true;
|
159
|
+
this.updateClasses_();
|
160
|
+
};
|
161
|
+
|
162
|
+
/**
|
163
|
+
* Enable text field.
|
164
|
+
*
|
165
|
+
* @public
|
166
|
+
*/
|
167
|
+
MaterialTextfield.prototype.enable = function() {
|
168
|
+
this.input_.disabled = false;
|
169
|
+
this.updateClasses_();
|
170
|
+
};
|
171
|
+
|
172
|
+
/**
|
173
|
+
* Update text field value.
|
174
|
+
*
|
175
|
+
* @param {String} value The value to which to set the control (optional).
|
176
|
+
* @public
|
177
|
+
*/
|
178
|
+
MaterialTextfield.prototype.change = function(value) {
|
179
|
+
|
180
|
+
if (value) {
|
181
|
+
this.input_.value = value;
|
182
|
+
}
|
183
|
+
this.updateClasses_();
|
184
|
+
};
|
185
|
+
|
186
|
+
/**
|
187
|
+
* Initialize element.
|
188
|
+
*/
|
189
|
+
MaterialTextfield.prototype.init = function() {
|
190
|
+
|
191
|
+
if (this.element_) {
|
192
|
+
this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
|
193
|
+
this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
|
194
|
+
|
195
|
+
if (this.input_) {
|
196
|
+
if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
|
197
|
+
this.maxRows = parseInt(this.input_.getAttribute(
|
198
|
+
this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
|
199
|
+
if (isNaN(this.maxRows)) {
|
200
|
+
this.maxRows = this.Constant_.NO_MAX_ROWS;
|
201
|
+
}
|
202
|
+
}
|
197
203
|
|
198
|
-
|
199
|
-
|
200
|
-
this.
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
+
this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
|
205
|
+
this.boundFocusHandler = this.onFocus_.bind(this);
|
206
|
+
this.boundBlurHandler = this.onBlur_.bind(this);
|
207
|
+
this.input_.addEventListener('input', this.boundUpdateClassesHandler);
|
208
|
+
this.input_.addEventListener('focus', this.boundFocusHandler);
|
209
|
+
this.input_.addEventListener('blur', this.boundBlurHandler);
|
210
|
+
|
211
|
+
if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
|
212
|
+
// TODO: This should handle pasting multi line text.
|
213
|
+
// Currently doesn't.
|
214
|
+
this.boundKeyDownHandler = this.onKeyDown_.bind(this);
|
215
|
+
this.input_.addEventListener('keydown', this.boundKeyDownHandler);
|
204
216
|
}
|
205
|
-
}
|
206
217
|
|
207
|
-
|
208
|
-
|
209
|
-
this.boundBlurHandler = this.onBlur_.bind(this);
|
210
|
-
this.input_.addEventListener('input', this.boundUpdateClassesHandler);
|
211
|
-
this.input_.addEventListener('focus', this.boundFocusHandler);
|
212
|
-
this.input_.addEventListener('blur', this.boundBlurHandler);
|
213
|
-
|
214
|
-
if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
|
215
|
-
// TODO: This should handle pasting multi line text.
|
216
|
-
// Currently doesn't.
|
217
|
-
this.boundKeyDownHandler = this.onKeyDown_.bind(this);
|
218
|
-
this.input_.addEventListener('keydown', this.boundKeyDownHandler);
|
218
|
+
this.updateClasses_();
|
219
|
+
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
219
220
|
}
|
220
|
-
|
221
|
-
this.updateClasses_();
|
222
|
-
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
223
221
|
}
|
224
|
-
}
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
*
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
};
|
239
|
-
|
240
|
-
// The component registers itself. It can assume componentHandler is available
|
241
|
-
// in the global scope.
|
242
|
-
componentHandler.register({
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
});
|
222
|
+
};
|
223
|
+
|
224
|
+
/**
|
225
|
+
* Downgrade the component
|
226
|
+
*
|
227
|
+
* @private
|
228
|
+
*/
|
229
|
+
MaterialTextfield.prototype.mdlDowngrade_ = function() {
|
230
|
+
this.input_.removeEventListener('input', this.boundUpdateClassesHandler);
|
231
|
+
this.input_.removeEventListener('focus', this.boundFocusHandler);
|
232
|
+
this.input_.removeEventListener('blur', this.boundBlurHandler);
|
233
|
+
if (this.boundKeyDownHandler) {
|
234
|
+
this.input_.removeEventListener('keydown', this.boundKeyDownHandler);
|
235
|
+
}
|
236
|
+
};
|
237
|
+
|
238
|
+
// The component registers itself. It can assume componentHandler is available
|
239
|
+
// in the global scope.
|
240
|
+
componentHandler.register({
|
241
|
+
constructor: MaterialTextfield,
|
242
|
+
classAsString: 'MaterialTextfield',
|
243
|
+
cssClass: 'mdl-js-textfield',
|
244
|
+
widget: true
|
245
|
+
});
|
246
|
+
})();
|