| OLD | NEW |
| 1 (function() { | 1 Polymer({ |
| 2 | |
| 3 Polymer({ | |
| 4 | |
| 5 is: 'paper-input-container', | 2 is: 'paper-input-container', |
| 6 | 3 |
| 7 properties: { | 4 properties: { |
| 8 | |
| 9 /** | 5 /** |
| 10 * 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 |
| 11 * not null. | 7 * not null. |
| 12 */ | 8 */ |
| 13 noLabelFloat: { | 9 noLabelFloat: { |
| 14 type: Boolean, | 10 type: Boolean, |
| 15 value: false | 11 value: false |
| 16 }, | 12 }, |
| 17 | 13 |
| 18 /** | 14 /** |
| (...skipping 29 matching lines...) Expand all Loading... |
| 48 type: Boolean, | 44 type: Boolean, |
| 49 value: false | 45 value: false |
| 50 }, | 46 }, |
| 51 | 47 |
| 52 /** | 48 /** |
| 53 * True if the input has focus. | 49 * True if the input has focus. |
| 54 */ | 50 */ |
| 55 focused: { | 51 focused: { |
| 56 readOnly: true, | 52 readOnly: true, |
| 57 type: Boolean, | 53 type: Boolean, |
| 58 value: false | 54 value: false, |
| 55 notify: true |
| 59 }, | 56 }, |
| 60 | 57 |
| 61 _addons: { | 58 _addons: { |
| 62 type: Array | 59 type: Array |
| 63 // do not set a default value here intentionally - it will be initialize
d lazily when a | 60 // do not set a default value here intentionally - it will be initialize
d lazily when a |
| 64 // distributed child is attached, which may occur before configuration f
or this element | 61 // distributed child is attached, which may occur before configuration f
or this element |
| 65 // in polyfill. | 62 // in polyfill. |
| 66 }, | 63 }, |
| 67 | 64 |
| 68 _inputHasContent: { | 65 _inputHasContent: { |
| (...skipping 26 matching lines...) Expand all Loading... |
| 95 return this._onInput.bind(this); | 92 return this._onInput.bind(this); |
| 96 } | 93 } |
| 97 }, | 94 }, |
| 98 | 95 |
| 99 _boundValueChanged: { | 96 _boundValueChanged: { |
| 100 type: Function, | 97 type: Function, |
| 101 value: function() { | 98 value: function() { |
| 102 return this._onValueChanged.bind(this); | 99 return this._onValueChanged.bind(this); |
| 103 } | 100 } |
| 104 } | 101 } |
| 105 | |
| 106 }, | 102 }, |
| 107 | 103 |
| 108 listeners: { | 104 listeners: { |
| 109 'addon-attached': '_onAddonAttached', | 105 'addon-attached': '_onAddonAttached', |
| 110 'iron-input-validate': '_onIronInputValidate' | 106 'iron-input-validate': '_onIronInputValidate' |
| 111 }, | 107 }, |
| 112 | 108 |
| 113 get _valueChangedEvent() { | 109 get _valueChangedEvent() { |
| 114 return this.attrForValue + '-changed'; | 110 return this.attrForValue + '-changed'; |
| 115 }, | 111 }, |
| 116 | 112 |
| 117 get _propertyForValue() { | 113 get _propertyForValue() { |
| 118 return Polymer.CaseMap.dashToCamelCase(this.attrForValue); | 114 return Polymer.CaseMap.dashToCamelCase(this.attrForValue); |
| 119 }, | 115 }, |
| 120 | 116 |
| 121 get _inputElement() { | 117 get _inputElement() { |
| 122 return Polymer.dom(this).querySelector(this._inputSelector); | 118 return Polymer.dom(this).querySelector(this._inputSelector); |
| 123 }, | 119 }, |
| 124 | 120 |
| 121 get _inputElementValue() { |
| 122 return this._inputElement[this._propertyForValue] || this._inputElement.va
lue; |
| 123 }, |
| 124 |
| 125 ready: function() { | 125 ready: function() { |
| 126 if (!this._addons) { | 126 if (!this._addons) { |
| 127 this._addons = []; | 127 this._addons = []; |
| 128 } | 128 } |
| 129 this.addEventListener('focus', this._boundOnFocus, true); | 129 this.addEventListener('focus', this._boundOnFocus, true); |
| 130 this.addEventListener('blur', this._boundOnBlur, true); | 130 this.addEventListener('blur', this._boundOnBlur, true); |
| 131 if (this.attrForValue) { | 131 if (this.attrForValue) { |
| 132 this._inputElement.addEventListener(this._valueChangedEvent, this._bound
ValueChanged); | 132 this._inputElement.addEventListener(this._valueChangedEvent, this._bound
ValueChanged); |
| 133 } else { | 133 } else { |
| 134 this.addEventListener('input', this._onInput); | 134 this.addEventListener('input', this._onInput); |
| 135 } | 135 } |
| 136 }, | 136 }, |
| 137 | 137 |
| 138 attached: function() { | 138 attached: function() { |
| 139 this._handleValue(this._inputElement); | 139 // Only validate when attached if the input already has a value. |
| 140 if (this._inputElementValue != '') { |
| 141 this._handleValueAndAutoValidate(this._inputElement); |
| 142 } else { |
| 143 this._handleValue(this._inputElement); |
| 144 } |
| 140 }, | 145 }, |
| 141 | 146 |
| 142 _onAddonAttached: function(event) { | 147 _onAddonAttached: function(event) { |
| 143 if (!this._addons) { | 148 if (!this._addons) { |
| 144 this._addons = []; | 149 this._addons = []; |
| 145 } | 150 } |
| 146 var target = event.target; | 151 var target = event.target; |
| 147 if (this._addons.indexOf(target) === -1) { | 152 if (this._addons.indexOf(target) === -1) { |
| 148 this._addons.push(target); | 153 this._addons.push(target); |
| 149 if (this.isAttached) { | 154 if (this.isAttached) { |
| 150 this._handleValue(this._inputElement); | 155 this._handleValue(this._inputElement); |
| 151 } | 156 } |
| 152 } | 157 } |
| 153 }, | 158 }, |
| 154 | 159 |
| 155 _onFocus: function() { | 160 _onFocus: function() { |
| 156 this._setFocused(true); | 161 this._setFocused(true); |
| 157 }, | 162 }, |
| 158 | 163 |
| 159 _onBlur: function() { | 164 _onBlur: function() { |
| 160 this._setFocused(false); | 165 this._setFocused(false); |
| 166 this._handleValueAndAutoValidate(this._inputElement); |
| 161 }, | 167 }, |
| 162 | 168 |
| 163 _onInput: function(event) { | 169 _onInput: function(event) { |
| 164 this._handleValue(event.target); | 170 this._handleValueAndAutoValidate(event.target); |
| 165 }, | 171 }, |
| 166 | 172 |
| 167 _onValueChanged: function(event) { | 173 _onValueChanged: function(event) { |
| 168 this._handleValue(event.target); | 174 this._handleValueAndAutoValidate(event.target); |
| 169 }, | 175 }, |
| 170 | 176 |
| 171 _handleValue: function(inputElement) { | 177 _handleValue: function(inputElement) { |
| 172 var value = inputElement[this._propertyForValue] || inputElement.value; | 178 var value = this._inputElementValue; |
| 173 | |
| 174 if (this.autoValidate) { | |
| 175 var valid; | |
| 176 if (inputElement.validate) { | |
| 177 valid = inputElement.validate(value); | |
| 178 } else { | |
| 179 valid = inputElement.checkValidity(); | |
| 180 } | |
| 181 this.invalid = !valid; | |
| 182 } | |
| 183 | 179 |
| 184 // type="number" hack needed because this.value is empty until it's valid | 180 // type="number" hack needed because this.value is empty until it's valid |
| 185 if (value || value === 0 || (inputElement.type === 'number' && !inputEleme
nt.checkValidity())) { | 181 if (value || value === 0 || (inputElement.type === 'number' && !inputEleme
nt.checkValidity())) { |
| 186 this._inputHasContent = true; | 182 this._inputHasContent = true; |
| 187 } else { | 183 } else { |
| 188 this._inputHasContent = false; | 184 this._inputHasContent = false; |
| 189 } | 185 } |
| 190 | 186 |
| 191 this.updateAddons({ | 187 this.updateAddons({ |
| 192 inputElement: inputElement, | 188 inputElement: inputElement, |
| 193 value: value, | 189 value: value, |
| 194 invalid: this.invalid | 190 invalid: this.invalid |
| 195 }); | 191 }); |
| 196 }, | 192 }, |
| 197 | 193 |
| 194 _handleValueAndAutoValidate: function(inputElement) { |
| 195 if (this.autoValidate) { |
| 196 var valid; |
| 197 if (inputElement.validate) { |
| 198 valid = inputElement.validate(this._inputElementValue); |
| 199 } else { |
| 200 valid = inputElement.checkValidity(); |
| 201 } |
| 202 this.invalid = !valid; |
| 203 } |
| 204 |
| 205 // Call this last to notify the add-ons. |
| 206 this._handleValue(inputElement); |
| 207 }, |
| 208 |
| 198 _onIronInputValidate: function(event) { | 209 _onIronInputValidate: function(event) { |
| 199 this.invalid = this._inputElement.invalid; | 210 this.invalid = this._inputElement.invalid; |
| 200 }, | 211 }, |
| 201 | 212 |
| 202 _invalidChanged: function() { | 213 _invalidChanged: function() { |
| 203 if (this._addons) { | 214 if (this._addons) { |
| 204 this.updateAddons({invalid: this.invalid}); | 215 this.updateAddons({invalid: this.invalid}); |
| 205 } | 216 } |
| 206 }, | 217 }, |
| 207 | 218 |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 259 | 270 |
| 260 _computeAddOnContentClass: function(focused, invalid) { | 271 _computeAddOnContentClass: function(focused, invalid) { |
| 261 var cls = 'add-on-content'; | 272 var cls = 'add-on-content'; |
| 262 if (invalid) { | 273 if (invalid) { |
| 263 cls += ' is-invalid'; | 274 cls += ' is-invalid'; |
| 264 } else if (focused) { | 275 } else if (focused) { |
| 265 cls += ' is-highlighted' | 276 cls += ' is-highlighted' |
| 266 } | 277 } |
| 267 return cls; | 278 return cls; |
| 268 } | 279 } |
| 269 | 280 }); |
| 270 }); | |
| 271 | |
| 272 })(); | |
| OLD | NEW |