| OLD | NEW |
| 1 /** | 1 // Generate unique, monotonically increasing IDs for labels (needed by |
| 2 // aria-labelledby) and add-ons. |
| 3 Polymer.PaperInputHelper = {}; |
| 4 Polymer.PaperInputHelper.NextLabelID = 1; |
| 5 Polymer.PaperInputHelper.NextAddonID = 1; |
| 6 |
| 7 /** |
| 2 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | 8 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This |
| 3 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | 9 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from |
| 4 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | 10 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your |
| 5 * template. | 11 * template. |
| 6 * | 12 * |
| 7 * The input element can be accessed by the `inputElement` property if you nee
d to access | 13 * The input element can be accessed by the `inputElement` property if you nee
d to access |
| 8 * properties or methods that are not exposed. | 14 * properties or methods that are not exposed. |
| 9 * @polymerBehavior Polymer.PaperInputBehavior | 15 * @polymerBehavior Polymer.PaperInputBehavior |
| 10 */ | 16 */ |
| 11 Polymer.PaperInputBehaviorImpl = { | 17 Polymer.PaperInputBehaviorImpl = { |
| 18 |
| 12 properties: { | 19 properties: { |
| 13 /** | 20 /** |
| 14 * Fired when the input changes due to user interaction. | 21 * Fired when the input changes due to user interaction. |
| 15 * | 22 * |
| 16 * @event change | 23 * @event change |
| 17 */ | 24 */ |
| 18 | 25 |
| 19 /** | 26 /** |
| 20 * The label for this input. If you're using PaperInputBehavior to | 27 * The label for this input. If you're using PaperInputBehavior to |
| 21 * implement your own paper-input-like element, bind this to | 28 * implement your own paper-input-like element, bind this to |
| (...skipping 375 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 397 str = more; | 404 str = more; |
| 398 } | 405 } |
| 399 return str; | 406 return str; |
| 400 }, | 407 }, |
| 401 | 408 |
| 402 _onAddonAttached: function(event) { | 409 _onAddonAttached: function(event) { |
| 403 var target = event.path ? event.path[0] : event.target; | 410 var target = event.path ? event.path[0] : event.target; |
| 404 if (target.id) { | 411 if (target.id) { |
| 405 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, target.id); | 412 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, target.id); |
| 406 } else { | 413 } else { |
| 407 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000)); | 414 var id = 'paper-input-add-on-' + Polymer.PaperInputHelper.NextAddonID++; |
| 408 target.id = id; | 415 target.id = id; |
| 409 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, id); | 416 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, id); |
| 410 } | 417 } |
| 411 }, | 418 }, |
| 412 | 419 |
| 413 /** | 420 /** |
| 414 * Validates the input element and sets an error style if needed. | 421 * Validates the input element and sets an error style if needed. |
| 415 * | 422 * |
| 416 * @return {boolean} | 423 * @return {boolean} |
| 417 */ | 424 */ |
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 485 _updateAriaLabelledBy: function() { | 492 _updateAriaLabelledBy: function() { |
| 486 var label = Polymer.dom(this.root).querySelector('label'); | 493 var label = Polymer.dom(this.root).querySelector('label'); |
| 487 if (!label) { | 494 if (!label) { |
| 488 this._ariaLabelledBy = ''; | 495 this._ariaLabelledBy = ''; |
| 489 return; | 496 return; |
| 490 } | 497 } |
| 491 var labelledBy; | 498 var labelledBy; |
| 492 if (label.id) { | 499 if (label.id) { |
| 493 labelledBy = label.id; | 500 labelledBy = label.id; |
| 494 } else { | 501 } else { |
| 495 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | 502 labelledBy = 'paper-input-label-' + Polymer.PaperInputHelper.NextLabelID
++; |
| 496 label.id = labelledBy; | 503 label.id = labelledBy; |
| 497 } | 504 } |
| 498 this._ariaLabelledBy = labelledBy; | 505 this._ariaLabelledBy = labelledBy; |
| 499 }, | 506 }, |
| 500 | 507 |
| 501 _onChange:function(event) { | 508 _onChange:function(event) { |
| 502 // In the Shadow DOM, the `change` event is not leaked into the | 509 // In the Shadow DOM, the `change` event is not leaked into the |
| 503 // ancestor tree, so we must do this manually. | 510 // ancestor tree, so we must do this manually. |
| 504 // See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-no
t-leaked-into-ancestor-trees. | 511 // See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-no
t-leaked-into-ancestor-trees. |
| 505 if (this.shadowRoot) { | 512 if (this.shadowRoot) { |
| 506 this.fire(event.type, {sourceEvent: event}, { | 513 this.fire(event.type, {sourceEvent: event}, { |
| 507 node: this, | 514 node: this, |
| 508 bubbles: event.bubbles, | 515 bubbles: event.bubbles, |
| 509 cancelable: event.cancelable | 516 cancelable: event.cancelable |
| 510 }); | 517 }); |
| 511 } | 518 } |
| 512 } | 519 } |
| 513 }; | 520 } |
| 514 | 521 |
| 515 /** @polymerBehavior */ | 522 /** @polymerBehavior */ |
| 516 Polymer.PaperInputBehavior = [ | 523 Polymer.PaperInputBehavior = [ |
| 517 Polymer.IronControlState, | 524 Polymer.IronControlState, |
| 518 Polymer.IronA11yKeysBehavior, | 525 Polymer.IronA11yKeysBehavior, |
| 519 Polymer.PaperInputBehaviorImpl | 526 Polymer.PaperInputBehaviorImpl |
| 520 ]; | 527 ]; |
| OLD | NEW |