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 type: { | |
| 30 type: String, | |
| 31 notify: true, | |
| 32 value: 'number', | |
| 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 changeRTLIfNeeded_: function(password) { | |
|
jdufault
2016/06/28 18:38:47
What about updateRtlState? changeRTL implies a one
sammiequon
2016/06/28 20:59:31
Done.
| |
| 62 var regex = /^([0-9]*)$/; | |
| 63 var shouldRtl = !regex.test(password); | |
|
jdufault
2016/06/28 18:38:47
What about Number.isInteger(+password)?
+password
sammiequon
2016/06/28 20:59:31
Done.
| |
| 64 this.$$('#pin-input').classList.toggle( | |
| 65 'pin-keyboard-input-non-pin', shouldRtl); | |
| 66 }, | |
| 67 | |
| 54 /** | 68 /** |
| 55 * Fires an update event with the current PIN value. The event will only be | 69 * Fires an update event with the current PIN value. The event will only be |
| 56 * fired if the PIN value has actually changed. | 70 * fired if the PIN value has actually changed. |
| 57 * @param {string} value | 71 * @param {string} value |
| 58 * @param {string} previous | 72 * @param {string} previous |
| 59 */ | 73 */ |
| 60 onPinValueChange_: function(value, previous) { | 74 onPinValueChange_: function(value, previous) { |
| 61 if (value != previous) | 75 if (value != previous) { |
| 62 this.fire('pin-change', { pin: value }); | 76 this.fire('pin-change', { pin: value }); |
| 77 this.changeRTLIfNeeded_(value); | |
| 78 } | |
| 63 }, | 79 }, |
| 64 | 80 |
| 65 /** Called when the user wants to erase the last character of the entered | 81 /** Called when the user wants to erase the last character of the entered |
| 66 * PIN value. | 82 * PIN value. |
| 67 */ | 83 */ |
| 68 onPinClear_: function() { | 84 onPinClear_: function() { |
| 69 this.value = this.value.substring(0, this.value.length - 1); | 85 this.value = this.value.substring(0, this.value.length - 1); |
| 70 }, | 86 }, |
| 71 | 87 |
| 72 /** Called when a key event is pressed while the input element has focus. */ | 88 /** Called when a key event is pressed while the input element has focus. */ |
| 73 onInputKeyDown_: function(event) { | 89 onInputKeyDown_: function(event) { |
| 74 // Up/down pressed, swallow the event to prevent the input value from | 90 // Up/down pressed, swallow the event to prevent the input value from |
| 75 // being incremented or decremented. | 91 // being incremented or decremented. |
| 76 if (event.keyCode == 38 || event.keyCode == 40) { | 92 if (event.keyCode == 38 || event.keyCode == 40) { |
| 77 event.preventDefault(); | 93 event.preventDefault(); |
| 78 return; | 94 return; |
| 79 } | 95 } |
| 80 | 96 |
| 81 // Enter pressed. | 97 // Enter pressed. |
| 82 if (event.keyCode == 13) { | 98 if (event.keyCode == 13) { |
| 83 this.firePinSubmitEvent_(); | 99 this.firePinSubmitEvent_(); |
| 84 event.preventDefault(); | 100 event.preventDefault(); |
| 85 return; | 101 return; |
| 86 } | 102 } |
| 103 }, | |
| 104 | |
| 105 /** | |
| 106 * Changes the input type for the pin-keyboard input element, based on the | |
| 107 * input specified for the pin-keyboard. | |
| 108 * @param {string} value | |
| 109 * @param {string} previous | |
| 110 */ | |
| 111 onInputTypeChange_: function(value, previous) { | |
| 112 if (value != previous) { | |
| 113 if (value == 'password' || value == 'number' || | |
| 114 value == 'text') { | |
| 115 this.$$('#pin-input').type = value; | |
| 116 } | |
| 117 } | |
| 87 } | 118 } |
| 88 }); | 119 }); |
| OLD | NEW |