OLD | NEW |
1 /** | 1 /** |
2 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | 2 * 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 | 3 * 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 | 4 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your |
5 * template. | 5 * template. |
6 * | 6 * |
7 * The input element can be accessed by the `inputElement` property if you nee
d to access | 7 * The input element can be accessed by the `inputElement` property if you nee
d to access |
8 * properties or methods that are not exposed. | 8 * properties or methods that are not exposed. |
9 * @polymerBehavior Polymer.PaperInputBehavior | 9 * @polymerBehavior Polymer.PaperInputBehavior |
10 */ | 10 */ |
(...skipping 332 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
343 | 343 |
344 _ariaLabelledBy: { | 344 _ariaLabelledBy: { |
345 type: String, | 345 type: String, |
346 value: '' | 346 value: '' |
347 } | 347 } |
348 | 348 |
349 }, | 349 }, |
350 | 350 |
351 listeners: { | 351 listeners: { |
352 'addon-attached': '_onAddonAttached', | 352 'addon-attached': '_onAddonAttached', |
353 'focus': '_onFocus' | |
354 }, | 353 }, |
355 | 354 |
356 observers: [ | |
357 '_focusedControlStateChanged(focused)' | |
358 ], | |
359 | |
360 keyBindings: { | 355 keyBindings: { |
361 'shift+tab:keydown': '_onShiftTabDown' | 356 'shift+tab:keydown': '_onShiftTabDown' |
362 }, | 357 }, |
363 | 358 |
364 hostAttributes: { | 359 hostAttributes: { |
365 tabindex: 0 | 360 tabindex: 0 |
366 }, | 361 }, |
367 | 362 |
368 /** | 363 /** |
369 * Returns a reference to the input element. | 364 * Returns a reference to the input element. |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
418 /** | 413 /** |
419 * Validates the input element and sets an error style if needed. | 414 * Validates the input element and sets an error style if needed. |
420 * | 415 * |
421 * @return {boolean} | 416 * @return {boolean} |
422 */ | 417 */ |
423 validate: function() { | 418 validate: function() { |
424 return this.inputElement.validate(); | 419 return this.inputElement.validate(); |
425 }, | 420 }, |
426 | 421 |
427 /** | 422 /** |
428 * Forward focus to inputElement | 423 * Forward focus to inputElement. Overriden from IronControlState. |
429 */ | 424 */ |
430 _onFocus: function() { | 425 _focusBlurHandler: function(event) { |
431 if (!this._shiftTabPressed) { | 426 if (this._shiftTabPressed) |
| 427 return; |
| 428 |
| 429 Polymer.IronControlState._focusBlurHandler.call(this, event); |
| 430 |
| 431 // Forward the focus to the nested input. |
| 432 if (this.focused) |
432 this._focusableElement.focus(); | 433 this._focusableElement.focus(); |
433 } | |
434 }, | 434 }, |
435 | 435 |
436 /** | 436 /** |
437 * Handler that is called when a shift+tab keypress is detected by the menu. | 437 * Handler that is called when a shift+tab keypress is detected by the menu. |
438 * | 438 * |
439 * @param {CustomEvent} event A key combination event. | 439 * @param {CustomEvent} event A key combination event. |
440 */ | 440 */ |
441 _onShiftTabDown: function(event) { | 441 _onShiftTabDown: function(event) { |
442 var oldTabIndex = this.getAttribute('tabindex'); | 442 var oldTabIndex = this.getAttribute('tabindex'); |
443 this._shiftTabPressed = true; | 443 this._shiftTabPressed = true; |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
475 } catch (e) { | 475 } catch (e) { |
476 // Just set the value and give up on the caret. | 476 // Just set the value and give up on the caret. |
477 this.value = newValue; | 477 this.value = newValue; |
478 } | 478 } |
479 }, | 479 }, |
480 | 480 |
481 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | 481 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
482 return placeholder || alwaysFloatLabel; | 482 return placeholder || alwaysFloatLabel; |
483 }, | 483 }, |
484 | 484 |
485 _focusedControlStateChanged: function(focused) { | |
486 // IronControlState stops the focus and blur events in order to redispatch
them on the host | |
487 // element, but paper-input-container listens to those events. Since there
are more | |
488 // pending work on focus/blur in IronControlState, I'm putting in this hac
k to get the | |
489 // input focus state working for now. | |
490 if (!this.$.container) { | |
491 this.$.container = Polymer.dom(this.root).querySelector('paper-input-con
tainer'); | |
492 if (!this.$.container) { | |
493 return; | |
494 } | |
495 } | |
496 if (focused) { | |
497 this.$.container._onFocus(); | |
498 } else { | |
499 this.$.container._onBlur(); | |
500 } | |
501 }, | |
502 | |
503 _updateAriaLabelledBy: function() { | 485 _updateAriaLabelledBy: function() { |
504 var label = Polymer.dom(this.root).querySelector('label'); | 486 var label = Polymer.dom(this.root).querySelector('label'); |
505 if (!label) { | 487 if (!label) { |
506 this._ariaLabelledBy = ''; | 488 this._ariaLabelledBy = ''; |
507 return; | 489 return; |
508 } | 490 } |
509 var labelledBy; | 491 var labelledBy; |
510 if (label.id) { | 492 if (label.id) { |
511 labelledBy = label.id; | 493 labelledBy = label.id; |
512 } else { | 494 } else { |
(...skipping 16 matching lines...) Expand all Loading... |
529 } | 511 } |
530 } | 512 } |
531 }; | 513 }; |
532 | 514 |
533 /** @polymerBehavior */ | 515 /** @polymerBehavior */ |
534 Polymer.PaperInputBehavior = [ | 516 Polymer.PaperInputBehavior = [ |
535 Polymer.IronControlState, | 517 Polymer.IronControlState, |
536 Polymer.IronA11yKeysBehavior, | 518 Polymer.IronA11yKeysBehavior, |
537 Polymer.PaperInputBehaviorImpl | 519 Polymer.PaperInputBehaviorImpl |
538 ]; | 520 ]; |
OLD | NEW |