OLD | NEW |
1 | |
2 (function() { | 1 (function() { |
3 | 2 |
4 Polymer({ | 3 Polymer({ |
5 | 4 |
6 is: 'paper-input-container', | 5 is: 'paper-input-container', |
7 | 6 |
8 properties: { | 7 properties: { |
9 | 8 |
10 /** | 9 /** |
11 * Set to true to disable the floating label. The label disappears when th
e input value is | 10 * Set to true to disable the floating label. The label disappears when th
e input value is |
(...skipping 164 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
176 var valid; | 175 var valid; |
177 if (inputElement.validate) { | 176 if (inputElement.validate) { |
178 valid = inputElement.validate(value); | 177 valid = inputElement.validate(value); |
179 } else { | 178 } else { |
180 valid = inputElement.checkValidity(); | 179 valid = inputElement.checkValidity(); |
181 } | 180 } |
182 this.invalid = !valid; | 181 this.invalid = !valid; |
183 } | 182 } |
184 | 183 |
185 // type="number" hack needed because this.value is empty until it's valid | 184 // type="number" hack needed because this.value is empty until it's valid |
186 if (value || (inputElement.type === 'number' && !inputElement.checkValidit
y())) { | 185 if (value || value === 0 || (inputElement.type === 'number' && !inputEleme
nt.checkValidity())) { |
187 this._inputHasContent = true; | 186 this._inputHasContent = true; |
188 } else { | 187 } else { |
189 this._inputHasContent = false; | 188 this._inputHasContent = false; |
190 } | 189 } |
191 | 190 |
192 this.updateAddons({ | 191 this.updateAddons({ |
193 inputElement: inputElement, | 192 inputElement: inputElement, |
194 value: value, | 193 value: value, |
195 invalid: this.invalid | 194 invalid: this.invalid |
196 }); | 195 }); |
(...skipping 15 matching lines...) Expand all Loading... |
212 */ | 211 */ |
213 updateAddons: function(state) { | 212 updateAddons: function(state) { |
214 for (var addon, index = 0; addon = this._addons[index]; index++) { | 213 for (var addon, index = 0; addon = this._addons[index]; index++) { |
215 addon.update(state); | 214 addon.update(state); |
216 } | 215 } |
217 }, | 216 }, |
218 | 217 |
219 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { | 218 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { |
220 var cls = 'input-content'; | 219 var cls = 'input-content'; |
221 if (!noLabelFloat) { | 220 if (!noLabelFloat) { |
| 221 var label = this.querySelector('label'); |
| 222 |
222 if (alwaysFloatLabel || _inputHasContent) { | 223 if (alwaysFloatLabel || _inputHasContent) { |
223 cls += ' label-is-floating'; | 224 cls += ' label-is-floating'; |
224 if (invalid) { | 225 if (invalid) { |
225 cls += ' is-invalid'; | 226 cls += ' is-invalid'; |
226 } else if (focused) { | 227 } else if (focused) { |
227 cls += " label-is-highlighted"; | 228 cls += " label-is-highlighted"; |
228 } | 229 } |
| 230 // The label might have a horizontal offset if a prefix element exists |
| 231 // which needs to be undone when displayed as a floating label. |
| 232 if (this.$.prefix && label && label.offsetParent && |
| 233 Polymer.dom(this.$.prefix).getDistributedNodes().length > 0) { |
| 234 label.style.left = -label.offsetParent.offsetLeft + 'px'; |
| 235 } |
| 236 } else { |
| 237 // When the label is not floating, it should overlap the input element
. |
| 238 if (label) { |
| 239 label.style.left = 0; |
| 240 } |
229 } | 241 } |
230 } else { | 242 } else { |
231 if (_inputHasContent) { | 243 if (_inputHasContent) { |
232 cls += ' label-is-hidden'; | 244 cls += ' label-is-hidden'; |
233 } | 245 } |
234 } | 246 } |
235 return cls; | 247 return cls; |
236 }, | 248 }, |
237 | 249 |
238 _computeUnderlineClass: function(focused, invalid) { | 250 _computeUnderlineClass: function(focused, invalid) { |
(...skipping 11 matching lines...) Expand all Loading... |
250 if (invalid) { | 262 if (invalid) { |
251 cls += ' is-invalid'; | 263 cls += ' is-invalid'; |
252 } else if (focused) { | 264 } else if (focused) { |
253 cls += ' is-highlighted' | 265 cls += ' is-highlighted' |
254 } | 266 } |
255 return cls; | 267 return cls; |
256 } | 268 } |
257 | 269 |
258 }); | 270 }); |
259 | 271 |
260 })(); | 272 })(); |
OLD | NEW |