| 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 |