OLD | NEW |
1 Polymer({ | 1 Polymer({ |
2 is: 'paper-input-container', | 2 is: 'paper-input-container', |
3 | 3 |
4 properties: { | 4 properties: { |
5 /** | 5 /** |
6 * Set to true to disable the floating label. The label disappears when th
e input value is | 6 * Set to true to disable the floating label. The label disappears when th
e input value is |
7 * not null. | 7 * not null. |
8 */ | 8 */ |
9 noLabelFloat: { | 9 noLabelFloat: { |
10 type: Boolean, | 10 type: Boolean, |
(...skipping 124 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
135 } | 135 } |
136 }, | 136 }, |
137 | 137 |
138 attached: function() { | 138 attached: function() { |
139 // Only validate when attached if the input already has a value. | 139 // Only validate when attached if the input already has a value. |
140 if (this._inputElementValue != '') { | 140 if (this._inputElementValue != '') { |
141 this._handleValueAndAutoValidate(this._inputElement); | 141 this._handleValueAndAutoValidate(this._inputElement); |
142 } else { | 142 } else { |
143 this._handleValue(this._inputElement); | 143 this._handleValue(this._inputElement); |
144 } | 144 } |
145 | |
146 this._numberOfPrefixNodes = 0; | |
147 this._prefixObserver = Polymer.dom(this.$.prefix).observeNodes( | |
148 function(mutations) { | |
149 // Keep track whether there's at least one prefix node, since it | |
150 // affects laying out the floating label. | |
151 this._numberOfPrefixNodes += mutations.addedNodes.length - | |
152 mutations.removedNodes.length; | |
153 }.bind(this)); | |
154 }, | |
155 | |
156 detached: function() { | |
157 if (this._prefixObserver) { | |
158 Polymer.dom(this.$.prefix).unobserveNodes(this._prefixObserver); | |
159 } | |
160 }, | 145 }, |
161 | 146 |
162 _onAddonAttached: function(event) { | 147 _onAddonAttached: function(event) { |
163 if (!this._addons) { | 148 if (!this._addons) { |
164 this._addons = []; | 149 this._addons = []; |
165 } | 150 } |
166 var target = event.target; | 151 var target = event.target; |
167 if (this._addons.indexOf(target) === -1) { | 152 if (this._addons.indexOf(target) === -1) { |
168 this._addons.push(target); | 153 this._addons.push(target); |
169 if (this.isAttached) { | 154 if (this.isAttached) { |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
241 } | 226 } |
242 }, | 227 }, |
243 | 228 |
244 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { | 229 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { |
245 var cls = 'input-content'; | 230 var cls = 'input-content'; |
246 if (!noLabelFloat) { | 231 if (!noLabelFloat) { |
247 var label = this.querySelector('label'); | 232 var label = this.querySelector('label'); |
248 | 233 |
249 if (alwaysFloatLabel || _inputHasContent) { | 234 if (alwaysFloatLabel || _inputHasContent) { |
250 cls += ' label-is-floating'; | 235 cls += ' label-is-floating'; |
| 236 // If the label is floating, ignore any offsets that may have been |
| 237 // applied from a prefix element. |
| 238 this.$.labelAndInputContainer.style.position = 'static'; |
| 239 |
251 if (invalid) { | 240 if (invalid) { |
252 cls += ' is-invalid'; | 241 cls += ' is-invalid'; |
253 } else if (focused) { | 242 } else if (focused) { |
254 cls += " label-is-highlighted"; | 243 cls += " label-is-highlighted"; |
255 } | 244 } |
256 // If a prefix element exists, the label has a horizontal offset | |
257 // which needs to be undone when displayed as a floating label. | |
258 if (this._numberOfPrefixNodes > 0) { | |
259 this.$.labelAndInputContainer.style.position = 'static'; | |
260 } | |
261 } else { | 245 } else { |
262 // When the label is not floating, it should overlap the input element
. | 246 // When the label is not floating, it should overlap the input element
. |
263 if (label) { | 247 if (label) { |
264 this.$.labelAndInputContainer.style.position = 'relative'; | 248 this.$.labelAndInputContainer.style.position = 'relative'; |
265 } | 249 } |
266 } | 250 } |
267 } else { | 251 } else { |
268 if (_inputHasContent) { | 252 if (_inputHasContent) { |
269 cls += ' label-is-hidden'; | 253 cls += ' label-is-hidden'; |
270 } | 254 } |
(...skipping 14 matching lines...) Expand all Loading... |
285 _computeAddOnContentClass: function(focused, invalid) { | 269 _computeAddOnContentClass: function(focused, invalid) { |
286 var cls = 'add-on-content'; | 270 var cls = 'add-on-content'; |
287 if (invalid) { | 271 if (invalid) { |
288 cls += ' is-invalid'; | 272 cls += ' is-invalid'; |
289 } else if (focused) { | 273 } else if (focused) { |
290 cls += ' is-highlighted' | 274 cls += ' is-highlighted' |
291 } | 275 } |
292 return cls; | 276 return cls; |
293 } | 277 } |
294 }); | 278 }); |
OLD | NEW |