OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
| 11 <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
11 | 12 |
12 <script> | 13 <script> |
13 | 14 |
14 /** | 15 /** |
15 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | 16 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This |
16 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | 17 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from |
17 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | 18 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your |
18 * template. | 19 * template. |
19 * | 20 * |
20 * The input element can be accessed by the `inputElement` property if you nee
d to access | 21 * The input element can be accessed by the `inputElement` property if you nee
d to access |
21 * properties or methods that are not exposed. | 22 * properties or methods that are not exposed. |
22 * @polymerBehavior | 23 * @polymerBehavior Polymer.PaperInputBehavior |
23 */ | 24 */ |
24 Polymer.PaperInputBehavior = { | 25 Polymer.PaperInputBehaviorImpl = { |
25 | 26 |
26 properties: { | 27 properties: { |
27 | 28 |
28 /** | 29 /** |
29 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. | 30 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. |
30 */ | 31 */ |
31 label: { | 32 label: { |
32 type: String | 33 type: String |
33 }, | 34 }, |
34 | 35 |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
77 | 78 |
78 /** | 79 /** |
79 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this | 80 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this |
80 * to the `<input is="iron-input">`'s `type` property. | 81 * to the `<input is="iron-input">`'s `type` property. |
81 */ | 82 */ |
82 type: { | 83 type: { |
83 type: String | 84 type: String |
84 }, | 85 }, |
85 | 86 |
86 /** | 87 /** |
| 88 * The datalist of the input (if any). This should match the id of an exis
ting <datalist>. Bind this |
| 89 * to the `<input is="iron-input">`'s `list` property. |
| 90 */ |
| 91 list: { |
| 92 type: String |
| 93 }, |
| 94 |
| 95 /** |
87 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s | 96 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s |
88 * `pattern` property. | 97 * `pattern` property. |
89 */ | 98 */ |
90 pattern: { | 99 pattern: { |
91 type: String | 100 type: String |
92 }, | 101 }, |
93 | 102 |
94 /** | 103 /** |
95 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s | 104 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s |
96 * `required` property. | 105 * `required` property. |
(...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
214 value: false | 223 value: false |
215 }, | 224 }, |
216 | 225 |
217 /** | 226 /** |
218 * Bind this to the `<input is="iron-input">`'s `size` property. | 227 * Bind this to the `<input is="iron-input">`'s `size` property. |
219 */ | 228 */ |
220 size: { | 229 size: { |
221 type: Number | 230 type: Number |
222 }, | 231 }, |
223 | 232 |
| 233 // Nonstandard attributes for binding if needed |
| 234 |
| 235 /** |
| 236 * Bind this to the `<input is="iron-input">`'s `autocapitalize` property. |
| 237 */ |
| 238 autocapitalize: { |
| 239 type: String, |
| 240 value: 'none' |
| 241 }, |
| 242 |
| 243 /** |
| 244 * Bind this to the `<input is="iron-input">`'s `autocorrect` property. |
| 245 */ |
| 246 autocorrect: { |
| 247 type: String, |
| 248 value: 'off' |
| 249 }, |
| 250 |
224 _ariaDescribedBy: { | 251 _ariaDescribedBy: { |
225 type: String, | 252 type: String, |
226 value: '' | 253 value: '' |
227 } | 254 } |
228 | 255 |
229 }, | 256 }, |
230 | 257 |
231 listeners: { | 258 listeners: { |
232 'addon-attached': '_onAddonAttached' | 259 'addon-attached': '_onAddonAttached' |
233 }, | 260 }, |
234 | 261 |
| 262 observers: [ |
| 263 '_focusedControlStateChanged(focused)' |
| 264 ], |
| 265 |
235 /** | 266 /** |
236 * Returns a reference to the input element. | 267 * Returns a reference to the input element. |
237 */ | 268 */ |
238 get inputElement() { | 269 get inputElement() { |
239 return this.$.input; | 270 return this.$.input; |
240 }, | 271 }, |
241 | 272 |
242 attached: function() { | 273 attached: function() { |
243 this._updateAriaLabelledBy(); | 274 this._updateAriaLabelledBy(); |
244 }, | 275 }, |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
289 } catch (e) { | 320 } catch (e) { |
290 // Just set the value and give up on the caret. | 321 // Just set the value and give up on the caret. |
291 this.value = newValue; | 322 this.value = newValue; |
292 } | 323 } |
293 }, | 324 }, |
294 | 325 |
295 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | 326 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
296 return placeholder || alwaysFloatLabel; | 327 return placeholder || alwaysFloatLabel; |
297 }, | 328 }, |
298 | 329 |
| 330 _focusedControlStateChanged: function(focused) { |
| 331 // IronControlState stops the focus and blur events in order to redispatch
them on the host |
| 332 // element, but paper-input-container listens to those events. Since there
are more |
| 333 // pending work on focus/blur in IronControlState, I'm putting in this hac
k to get the |
| 334 // input focus state working for now. |
| 335 if (!this.$.container) { |
| 336 this.$.container = Polymer.dom(this.root).querySelector('paper-input-con
tainer'); |
| 337 if (!this.$.container) { |
| 338 return; |
| 339 } |
| 340 } |
| 341 if (focused) { |
| 342 this.$.container._onFocus(); |
| 343 } else { |
| 344 this.$.container._onBlur(); |
| 345 } |
| 346 }, |
| 347 |
299 _updateAriaLabelledBy: function() { | 348 _updateAriaLabelledBy: function() { |
300 var label = Polymer.dom(this.root).querySelector('label'); | 349 var label = Polymer.dom(this.root).querySelector('label'); |
301 if (!label) { | 350 if (!label) { |
302 this._ariaLabelledBy = ''; | 351 this._ariaLabelledBy = ''; |
303 return; | 352 return; |
304 } | 353 } |
305 var labelledBy; | 354 var labelledBy; |
306 if (label.id) { | 355 if (label.id) { |
307 labelledBy = label.id; | 356 labelledBy = label.id; |
308 } else { | 357 } else { |
309 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | 358 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); |
310 label.id = labelledBy; | 359 label.id = labelledBy; |
311 } | 360 } |
312 this._ariaLabelledBy = labelledBy; | 361 this._ariaLabelledBy = labelledBy; |
313 } | 362 } |
314 | 363 |
315 }; | 364 }; |
316 | 365 |
| 366 /** @polymerBehavior */ |
| 367 Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBeha
viorImpl]; |
| 368 |
317 </script> | 369 </script> |
OLD | NEW |