OLD | NEW |
| (Empty) |
1 | |
2 (function() { | |
3 | |
4 Polymer({ | |
5 | |
6 is: 'paper-input-container', | |
7 | |
8 properties: { | |
9 | |
10 /** | |
11 * Set to true to disable the floating label. The label disappears when th
e input value is | |
12 * not null. | |
13 */ | |
14 noLabelFloat: { | |
15 type: Boolean, | |
16 value: false | |
17 }, | |
18 | |
19 /** | |
20 * Set to true to always float the floating label. | |
21 */ | |
22 alwaysFloatLabel: { | |
23 type: Boolean, | |
24 value: false | |
25 }, | |
26 | |
27 /** | |
28 * The attribute to listen for value changes on. | |
29 */ | |
30 attrForValue: { | |
31 type: String, | |
32 value: 'bind-value' | |
33 }, | |
34 | |
35 /** | |
36 * Set to true to auto-validate the input value when it changes. | |
37 */ | |
38 autoValidate: { | |
39 type: Boolean, | |
40 value: false | |
41 }, | |
42 | |
43 /** | |
44 * True if the input is invalid. This property is set automatically when t
he input value | |
45 * changes if auto-validating, or when the `iron-input-valid` event is hea
rd from a child. | |
46 */ | |
47 invalid: { | |
48 observer: '_invalidChanged', | |
49 type: Boolean, | |
50 value: false | |
51 }, | |
52 | |
53 /** | |
54 * True if the input has focus. | |
55 */ | |
56 focused: { | |
57 readOnly: true, | |
58 type: Boolean, | |
59 value: false | |
60 }, | |
61 | |
62 _addons: { | |
63 type: Array, | |
64 value: function() { | |
65 return []; | |
66 } | |
67 }, | |
68 | |
69 _inputHasContent: { | |
70 type: Boolean, | |
71 value: false | |
72 }, | |
73 | |
74 _inputSelector: { | |
75 type: String, | |
76 value: 'input,textarea,.paper-input-input' | |
77 }, | |
78 | |
79 _boundOnFocus: { | |
80 type: Function, | |
81 value: function() { | |
82 return this._onFocus.bind(this); | |
83 } | |
84 }, | |
85 | |
86 _boundOnBlur: { | |
87 type: Function, | |
88 value: function() { | |
89 return this._onBlur.bind(this); | |
90 } | |
91 }, | |
92 | |
93 _boundOnInput: { | |
94 type: Function, | |
95 value: function() { | |
96 this._onInput.bind(this) | |
97 } | |
98 }, | |
99 | |
100 _boundValueChanged: { | |
101 type: Function, | |
102 value: function() { | |
103 return this._onValueChanged.bind(this); | |
104 } | |
105 } | |
106 | |
107 }, | |
108 | |
109 listeners: { | |
110 'addon-attached': '_onAddonAttached', | |
111 'iron-input-validate': '_onIronInputValidate' | |
112 }, | |
113 | |
114 get _valueChangedEvent() { | |
115 return this.attrForValue + '-changed'; | |
116 }, | |
117 | |
118 get _propertyForValue() { | |
119 return Polymer.CaseMap.dashToCamelCase(this.attrForValue); | |
120 }, | |
121 | |
122 get _inputElement() { | |
123 return Polymer.dom(this).querySelector(this._inputSelector); | |
124 }, | |
125 | |
126 ready: function() { | |
127 this.addEventListener('focus', this._boundOnFocus, true); | |
128 this.addEventListener('blur', this._boundOnBlur, true); | |
129 if (this.attrForValue) { | |
130 this._inputElement.addEventListener(this._valueChangedEvent, this._bound
ValueChanged); | |
131 } else { | |
132 this.addEventListener('input', this._onInput); | |
133 } | |
134 }, | |
135 | |
136 attached: function() { | |
137 this._handleValue(this._inputElement); | |
138 }, | |
139 | |
140 _onAddonAttached: function(event) { | |
141 this._addons.push(event.target); | |
142 this._handleValue(this._inputElement); | |
143 }, | |
144 | |
145 _onFocus: function() { | |
146 this._setFocused(true); | |
147 }, | |
148 | |
149 _onBlur: function() { | |
150 this._setFocused(false); | |
151 }, | |
152 | |
153 _onInput: function(event) { | |
154 this._handleValue(event.target); | |
155 }, | |
156 | |
157 _onValueChanged: function(event) { | |
158 this._handleValue(event.target); | |
159 }, | |
160 | |
161 _handleValue: function(inputElement) { | |
162 var value = inputElement[this._propertyForValue] || inputElement.value; | |
163 | |
164 if (this.autoValidate) { | |
165 var valid; | |
166 if (inputElement.validate) { | |
167 valid = inputElement.validate(value); | |
168 } else { | |
169 valid = inputElement.checkValidity(); | |
170 } | |
171 this.invalid = !valid; | |
172 } | |
173 | |
174 // type="number" hack needed because this.value is empty until it's valid | |
175 if (value || (inputElement.type === 'number' && !inputElement.checkValidit
y())) { | |
176 this._inputHasContent = true; | |
177 } else { | |
178 this._inputHasContent = false; | |
179 } | |
180 | |
181 this.updateAddons({ | |
182 inputElement: inputElement, | |
183 value: value, | |
184 invalid: this.invalid | |
185 }); | |
186 }, | |
187 | |
188 _onIronInputValidate: function(event) { | |
189 this.invalid = this._inputElement.invalid; | |
190 }, | |
191 | |
192 _invalidChanged: function() { | |
193 if (this._addons) { | |
194 this.updateAddons({invalid: this.invalid}); | |
195 } | |
196 }, | |
197 | |
198 /** | |
199 * Call this to update the state of add-ons. | |
200 * @param {Object} state Add-on state. | |
201 */ | |
202 updateAddons: function(state) { | |
203 for (var addon, index = 0; addon = this._addons[index]; index++) { | |
204 addon.update(state); | |
205 } | |
206 }, | |
207 | |
208 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { | |
209 var cls = 'input-content'; | |
210 if (!noLabelFloat) { | |
211 if (alwaysFloatLabel || _inputHasContent) { | |
212 cls += ' label-is-floating'; | |
213 if (invalid) { | |
214 cls += ' is-invalid'; | |
215 } else if (focused) { | |
216 cls += " label-is-highlighted"; | |
217 } | |
218 } | |
219 } else { | |
220 if (_inputHasContent) { | |
221 cls += ' label-is-hidden'; | |
222 } | |
223 } | |
224 return cls; | |
225 }, | |
226 | |
227 _computeUnderlineClass: function(focused, invalid) { | |
228 var cls = 'underline'; | |
229 if (invalid) { | |
230 cls += ' is-invalid'; | |
231 } else if (focused) { | |
232 cls += ' is-highlighted' | |
233 } | |
234 return cls; | |
235 }, | |
236 | |
237 _computeAddOnContentClass: function(focused, invalid) { | |
238 var cls = 'add-on-content'; | |
239 if (invalid) { | |
240 cls += ' is-invalid'; | |
241 } else if (focused) { | |
242 cls += ' is-highlighted' | |
243 } | |
244 return cls; | |
245 } | |
246 | |
247 }); | |
248 | |
249 })(); | |
OLD | NEW |