Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview | 6 * @fileoverview |
| 7 * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally | 7 * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally |
| 8 * numeric values. | 8 * numeric values. |
| 9 * | 9 * |
| 10 * Properties: | 10 * Properties: |
| 11 * value: The value of the PIN keyboard. Writing to this property will adjust | 11 * value: The value of the PIN keyboard. Writing to this property will adjust |
| 12 * the PIN keyboard's value. | 12 * the PIN keyboard's value. |
| 13 * | 13 * |
| 14 * Events: | 14 * Events: |
| 15 * pin-change: Fired when the PIN value has changed. The pin is available at | 15 * pin-change: Fired when the PIN value has changed. The pin is available at |
| 16 * event.detail.pin. | 16 * event.detail.pin. |
| 17 * submit: Fired when the PIN is submitted. The pin is available at | 17 * submit: Fired when the PIN is submitted. The pin is available at |
| 18 * event.detail.pin. | 18 * event.detail.pin. |
| 19 * | 19 * |
| 20 * Example: | 20 * Example: |
| 21 * <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit" | 21 * <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit" |
| 22 * value="{{pinValue}}"> | 22 * value="{{pinValue}}"> |
| 23 * </pin-keyboard> | 23 * </pin-keyboard> |
| 24 */ | 24 */ |
| 25 Polymer({ | 25 Polymer({ |
| 26 is: 'pin-keyboard', | 26 is: 'pin-keyboard', |
| 27 | 27 |
| 28 properties: { | 28 properties: { |
| 29 enablepassword: { | |
| 30 type: Boolean, | |
| 31 notify: true, | |
| 32 value: false, | |
| 33 observer: 'onInputTypeChange_' | |
| 34 }, | |
| 35 | |
| 29 /** The value stored in the keyboard's input element. */ | 36 /** The value stored in the keyboard's input element. */ |
| 30 value: { | 37 value: { |
| 31 type: String, | 38 type: String, |
| 32 notify: true, | 39 notify: true, |
| 33 value: '', | 40 value: '', |
| 34 observer: 'onPinValueChange_' | 41 observer: 'onPinValueChange_' |
| 35 } | 42 } |
| 36 }, | 43 }, |
| 37 | 44 |
| 38 /** Transfers focus to the input element. */ | 45 /** Transfers focus to the input element. */ |
| 39 focus: function() { | 46 focus: function() { |
| 40 this.$$('#pin-input').focus(); | 47 this.$$('#pin-input').focus(); |
| 41 }, | 48 }, |
| 42 | 49 |
| 43 /** Called when a keypad number has been tapped. */ | 50 /** Called when a keypad number has been tapped. */ |
| 44 onNumberTap_: function(event, detail) { | 51 onNumberTap_: function(event, detail) { |
| 45 var numberValue = event.target.getAttribute('value'); | 52 var numberValue = event.target.getAttribute('value'); |
| 46 this.value += numberValue; | 53 this.value += numberValue; |
| 47 }, | 54 }, |
| 48 | 55 |
| 49 /** Fires a submit event with the current PIN value. */ | 56 /** Fires a submit event with the current PIN value. */ |
| 50 firePinSubmitEvent_: function() { | 57 firePinSubmitEvent_: function() { |
| 51 this.fire('submit', { pin: this.value }); | 58 this.fire('submit', { pin: this.value }); |
| 52 }, | 59 }, |
| 53 | 60 |
| 61 updateRtlState_: function(password) { | |
| 62 var shouldRtl = !Number.isInteger(+password); | |
|
jdufault
2016/06/28 21:13:22
Add a comment describing this behavior.
shouldRtl
sammiequon
2016/06/28 22:43:38
Done.
| |
| 63 this.$$('#pin-input').classList.toggle( | |
| 64 'pin-keyboard-input-non-pin', shouldRtl); | |
| 65 }, | |
| 66 | |
| 54 /** | 67 /** |
| 55 * Fires an update event with the current PIN value. The event will only be | 68 * Fires an update event with the current PIN value. The event will only be |
| 56 * fired if the PIN value has actually changed. | 69 * fired if the PIN value has actually changed. |
| 57 * @param {string} value | 70 * @param {string} value |
| 58 * @param {string} previous | 71 * @param {string} previous |
| 59 */ | 72 */ |
| 60 onPinValueChange_: function(value, previous) { | 73 onPinValueChange_: function(value, previous) { |
| 61 if (value != previous) | 74 if (value != previous) { |
| 62 this.fire('pin-change', { pin: value }); | 75 this.fire('pin-change', { pin: value }); |
| 76 this.updateRtlState_(value); | |
| 77 } | |
| 63 }, | 78 }, |
| 64 | 79 |
| 65 /** Called when the user wants to erase the last character of the entered | 80 /** Called when the user wants to erase the last character of the entered |
| 66 * PIN value. | 81 * PIN value. |
| 67 */ | 82 */ |
| 68 onPinClear_: function() { | 83 onPinClear_: function() { |
| 69 this.value = this.value.substring(0, this.value.length - 1); | 84 this.value = this.value.substring(0, this.value.length - 1); |
| 70 }, | 85 }, |
| 71 | 86 |
| 72 /** Called when a key event is pressed while the input element has focus. */ | 87 /** Called when a key event is pressed while the input element has focus. */ |
| 73 onInputKeyDown_: function(event) { | 88 onInputKeyDown_: function(event) { |
| 74 // Up/down pressed, swallow the event to prevent the input value from | 89 // Up/down pressed, swallow the event to prevent the input value from |
| 75 // being incremented or decremented. | 90 // being incremented or decremented. |
| 76 if (event.keyCode == 38 || event.keyCode == 40) { | 91 if (event.keyCode == 38 || event.keyCode == 40) { |
| 77 event.preventDefault(); | 92 event.preventDefault(); |
| 78 return; | 93 return; |
| 79 } | 94 } |
| 80 | 95 |
| 81 // Enter pressed. | 96 // Enter pressed. |
| 82 if (event.keyCode == 13) { | 97 if (event.keyCode == 13) { |
| 83 this.firePinSubmitEvent_(); | 98 this.firePinSubmitEvent_(); |
| 84 event.preventDefault(); | 99 event.preventDefault(); |
| 85 return; | 100 return; |
| 86 } | 101 } |
| 102 }, | |
| 103 | |
| 104 /** | |
| 105 * Changes the input type for the pin-keyboard input element, based on the | |
| 106 * input specified for the pin-keyboard. | |
| 107 * @param {string} value | |
| 108 * @param {string} previous | |
| 109 */ | |
| 110 onInputTypeChange_: function(value, previous) { | |
| 111 if (value != previous && value != null) { | |
|
jdufault
2016/06/28 21:13:22
Why do you need this check? Do we need the value o
sammiequon
2016/06/28 22:43:38
Done.
| |
| 112 if (value) | |
| 113 this.$$('#pin-input').type = 'password'; | |
| 114 else | |
| 115 this.$$('#pin-input').type = 'number'; | |
| 116 } | |
| 87 } | 117 } |
| 88 }); | 118 }); |
| OLD | NEW |