OLD | NEW |
1 | 1 |
2 | 2 |
3 /** | 3 /** |
4 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | 4 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This |
5 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | 5 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from |
6 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | 6 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your |
7 * template. | 7 * template. |
8 * | 8 * |
9 * The input element can be accessed by the `inputElement` property if you nee
d to access | 9 * The input element can be accessed by the `inputElement` property if you nee
d to access |
10 * properties or methods that are not exposed. | 10 * properties or methods that are not exposed. |
11 * @polymerBehavior | 11 * @polymerBehavior Polymer.PaperInputBehavior |
12 */ | 12 */ |
13 Polymer.PaperInputBehavior = { | 13 Polymer.PaperInputBehaviorImpl = { |
14 | 14 |
15 properties: { | 15 properties: { |
16 | 16 |
17 /** | 17 /** |
18 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. | 18 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. |
19 */ | 19 */ |
20 label: { | 20 label: { |
21 type: String | 21 type: String |
22 }, | 22 }, |
23 | 23 |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 | 66 |
67 /** | 67 /** |
68 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this | 68 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this |
69 * to the `<input is="iron-input">`'s `type` property. | 69 * to the `<input is="iron-input">`'s `type` property. |
70 */ | 70 */ |
71 type: { | 71 type: { |
72 type: String | 72 type: String |
73 }, | 73 }, |
74 | 74 |
75 /** | 75 /** |
| 76 * The datalist of the input (if any). This should match the id of an exis
ting <datalist>. Bind this |
| 77 * to the `<input is="iron-input">`'s `list` property. |
| 78 */ |
| 79 list: { |
| 80 type: String |
| 81 }, |
| 82 |
| 83 /** |
76 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s | 84 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s |
77 * `pattern` property. | 85 * `pattern` property. |
78 */ | 86 */ |
79 pattern: { | 87 pattern: { |
80 type: String | 88 type: String |
81 }, | 89 }, |
82 | 90 |
83 /** | 91 /** |
84 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s | 92 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s |
85 * `required` property. | 93 * `required` property. |
(...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
203 value: false | 211 value: false |
204 }, | 212 }, |
205 | 213 |
206 /** | 214 /** |
207 * Bind this to the `<input is="iron-input">`'s `size` property. | 215 * Bind this to the `<input is="iron-input">`'s `size` property. |
208 */ | 216 */ |
209 size: { | 217 size: { |
210 type: Number | 218 type: Number |
211 }, | 219 }, |
212 | 220 |
| 221 // Nonstandard attributes for binding if needed |
| 222 |
| 223 /** |
| 224 * Bind this to the `<input is="iron-input">`'s `autocapitalize` property. |
| 225 */ |
| 226 autocapitalize: { |
| 227 type: String, |
| 228 value: 'none' |
| 229 }, |
| 230 |
| 231 /** |
| 232 * Bind this to the `<input is="iron-input">`'s `autocorrect` property. |
| 233 */ |
| 234 autocorrect: { |
| 235 type: String, |
| 236 value: 'off' |
| 237 }, |
| 238 |
213 _ariaDescribedBy: { | 239 _ariaDescribedBy: { |
214 type: String, | 240 type: String, |
215 value: '' | 241 value: '' |
216 } | 242 } |
217 | 243 |
218 }, | 244 }, |
219 | 245 |
220 listeners: { | 246 listeners: { |
221 'addon-attached': '_onAddonAttached' | 247 'addon-attached': '_onAddonAttached' |
222 }, | 248 }, |
223 | 249 |
| 250 observers: [ |
| 251 '_focusedControlStateChanged(focused)' |
| 252 ], |
| 253 |
224 /** | 254 /** |
225 * Returns a reference to the input element. | 255 * Returns a reference to the input element. |
226 */ | 256 */ |
227 get inputElement() { | 257 get inputElement() { |
228 return this.$.input; | 258 return this.$.input; |
229 }, | 259 }, |
230 | 260 |
231 attached: function() { | 261 attached: function() { |
232 this._updateAriaLabelledBy(); | 262 this._updateAriaLabelledBy(); |
233 }, | 263 }, |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
278 } catch (e) { | 308 } catch (e) { |
279 // Just set the value and give up on the caret. | 309 // Just set the value and give up on the caret. |
280 this.value = newValue; | 310 this.value = newValue; |
281 } | 311 } |
282 }, | 312 }, |
283 | 313 |
284 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | 314 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
285 return placeholder || alwaysFloatLabel; | 315 return placeholder || alwaysFloatLabel; |
286 }, | 316 }, |
287 | 317 |
| 318 _focusedControlStateChanged: function(focused) { |
| 319 // IronControlState stops the focus and blur events in order to redispatch
them on the host |
| 320 // element, but paper-input-container listens to those events. Since there
are more |
| 321 // pending work on focus/blur in IronControlState, I'm putting in this hac
k to get the |
| 322 // input focus state working for now. |
| 323 if (!this.$.container) { |
| 324 this.$.container = Polymer.dom(this.root).querySelector('paper-input-con
tainer'); |
| 325 if (!this.$.container) { |
| 326 return; |
| 327 } |
| 328 } |
| 329 if (focused) { |
| 330 this.$.container._onFocus(); |
| 331 } else { |
| 332 this.$.container._onBlur(); |
| 333 } |
| 334 }, |
| 335 |
288 _updateAriaLabelledBy: function() { | 336 _updateAriaLabelledBy: function() { |
289 var label = Polymer.dom(this.root).querySelector('label'); | 337 var label = Polymer.dom(this.root).querySelector('label'); |
290 if (!label) { | 338 if (!label) { |
291 this._ariaLabelledBy = ''; | 339 this._ariaLabelledBy = ''; |
292 return; | 340 return; |
293 } | 341 } |
294 var labelledBy; | 342 var labelledBy; |
295 if (label.id) { | 343 if (label.id) { |
296 labelledBy = label.id; | 344 labelledBy = label.id; |
297 } else { | 345 } else { |
298 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | 346 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); |
299 label.id = labelledBy; | 347 label.id = labelledBy; |
300 } | 348 } |
301 this._ariaLabelledBy = labelledBy; | 349 this._ariaLabelledBy = labelledBy; |
302 } | 350 } |
303 | 351 |
304 }; | 352 }; |
305 | 353 |
| 354 /** @polymerBehavior */ |
| 355 Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBeha
viorImpl]; |
| 356 |
OLD | NEW |