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