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: |
(...skipping 22 matching lines...) Expand all Loading... |
33 /** | 33 /** |
34 * Whether or not the keyboard's input element should be numerical | 34 * Whether or not the keyboard's input element should be numerical |
35 * or password. | 35 * or password. |
36 */ | 36 */ |
37 enablePassword: { | 37 enablePassword: { |
38 type: Boolean, | 38 type: Boolean, |
39 value: false | 39 value: false |
40 }, | 40 }, |
41 | 41 |
42 /** | 42 /** |
43 * Whether or not the keyboard's submit button should be shown. | 43 * Whether or not the keyboard's input should be shown. |
44 */ | 44 */ |
45 enableSubmitButton: { | 45 hideInput: { |
46 type: Boolean, | 46 type: Boolean, |
47 value: false | 47 value: false |
48 }, | 48 }, |
49 | 49 |
50 /** The value stored in the keyboard's input element. */ | 50 /** The value stored in the keyboard's input element. */ |
51 value: { | 51 value: { |
52 type: String, | 52 type: String, |
53 notify: true, | 53 notify: true, |
54 value: '', | 54 value: '', |
55 observer: 'onPinValueChange_' | 55 observer: 'onPinValueChange_' |
(...skipping 14 matching lines...) Expand all Loading... |
70 }, | 70 }, |
71 | 71 |
72 /** | 72 /** |
73 * Called when a keypad number has been tapped. | 73 * Called when a keypad number has been tapped. |
74 * @param {!{target: !PaperButtonElement}} event | 74 * @param {!{target: !PaperButtonElement}} event |
75 * @private | 75 * @private |
76 */ | 76 */ |
77 onNumberTap_: function(event, detail) { | 77 onNumberTap_: function(event, detail) { |
78 var numberValue = event.target.getAttribute('value'); | 78 var numberValue = event.target.getAttribute('value'); |
79 this.value += numberValue; | 79 this.value += numberValue; |
80 | |
81 // If a number button is clicked, we do not want to switch focus to the | |
82 // button, therefore we transfer focus back to the input, but if a number | |
83 // button is tabbed into, it should keep focus, so users can use tab and | |
84 // spacebar/return to enter their PIN. | |
85 if (!event.target.receivedFocusFromKeyboard) | |
86 this.focus(); | |
87 }, | 80 }, |
88 | 81 |
89 /** Fires a submit event with the current PIN value. */ | 82 /** Fires a submit event with the current PIN value. */ |
90 firePinSubmitEvent_: function() { | 83 firePinSubmitEvent_: function() { |
91 this.fire('submit', { pin: this.value }); | 84 this.fire('submit', { pin: this.value }); |
92 }, | 85 }, |
93 | 86 |
94 /** | 87 /** |
95 * Fires an update event with the current PIN value. The event will only be | 88 * Fires an update event with the current PIN value. The event will only be |
96 * fired if the PIN value has actually changed. | 89 * fired if the PIN value has actually changed. |
97 * @param {string} value | 90 * @param {string} value |
98 * @param {string} previous | 91 * @param {string} previous |
99 */ | 92 */ |
100 onPinValueChange_: function(value, previous) { | 93 onPinValueChange_: function(value, previous) { |
101 if (value != previous) | 94 if (value != previous) |
102 this.fire('pin-change', { pin: value }); | 95 this.fire('pin-change', { pin: value }); |
103 }, | 96 }, |
104 | 97 |
105 /** Called when the user wants to erase the last character of the entered | 98 /** |
| 99 * Called when the user wants to erase the last character of the entered |
106 * PIN value. | 100 * PIN value. |
107 */ | 101 */ |
108 onPinClear_: function() { | 102 onPinClear_: function() { |
109 this.value = this.value.substring(0, this.value.length - 1); | 103 this.value = this.value.substring(0, this.value.length - 1); |
110 }, | 104 }, |
111 | 105 |
112 /** Called when a key event is pressed while the input element has focus. */ | 106 /** Called when a key event is pressed while the input element has focus. */ |
113 onInputKeyDown_: function(event) { | 107 onInputKeyDown_: function(event) { |
114 // Up/down pressed, swallow the event to prevent the input value from | 108 // Up/down pressed, swallow the event to prevent the input value from |
115 // being incremented or decremented. | 109 // being incremented or decremented. |
116 if (event.keyCode == 38 || event.keyCode == 40) { | 110 if (event.keyCode == 38 || event.keyCode == 40) { |
117 event.preventDefault(); | 111 event.preventDefault(); |
118 return; | 112 return; |
119 } | 113 } |
120 | 114 |
121 // Enter pressed. | 115 // Enter pressed. |
122 if (event.keyCode == 13) { | 116 if (event.keyCode == 13) { |
123 this.firePinSubmitEvent_(); | 117 this.firePinSubmitEvent_(); |
124 event.preventDefault(); | 118 event.preventDefault(); |
125 return; | 119 return; |
126 } | 120 } |
127 }, | 121 }, |
128 | 122 |
129 /** | 123 /** |
| 124 * Keypress does not handle backspace but handles the char codes nicely, so we |
| 125 * have a seperate event to process the backspaces. |
| 126 * @param {Event} event Keypress Event object. |
| 127 * @private |
| 128 */ |
| 129 onKeyDown_: function(event) { |
| 130 // Backspace pressed. |
| 131 if (event.keyCode == 8) { |
| 132 this.onPinClear_(); |
| 133 event.preventDefault(); |
| 134 return; |
| 135 } |
| 136 }, |
| 137 |
| 138 /** |
| 139 * Called when a key press event is fired while the number button is focused. |
| 140 * Ideally we would want to pass focus back to the input element, but the we |
| 141 * cannot or the virtual keyboard will keep poping up. |
| 142 * @param {Event} event Keypress Event object. |
| 143 * @private |
| 144 */ |
| 145 onKeyPress_: function(event) { |
| 146 var code = event.keyCode; |
| 147 |
| 148 // Enter pressed. |
| 149 if (code == 13) { |
| 150 this.firePinSubmitEvent_(); |
| 151 event.preventDefault(); |
| 152 return; |
| 153 } |
| 154 |
| 155 this.value += String.fromCharCode(code); |
| 156 }, |
| 157 |
| 158 /** |
130 * Disables the submit and backspace button if nothing is entered. | 159 * Disables the submit and backspace button if nothing is entered. |
131 * @param {string} value | 160 * @param {string} value |
132 * @private | 161 * @private |
133 */ | 162 */ |
134 hasInput_: function(value) { | 163 hasInput_: function(value) { |
135 return value.length > 0; | 164 return value.length > 0; |
136 }, | 165 }, |
137 | 166 |
138 /** | 167 /** |
139 * Computes whether the input type for the pin input should be password or | 168 * Computes whether the input type for the pin input should be password or |
(...skipping 25 matching lines...) Expand all Loading... |
165 // possible. Number.isInteger will verify the value is not a NaN and that it | 194 // possible. Number.isInteger will verify the value is not a NaN and that it |
166 // does not contain decimals. | 195 // does not contain decimals. |
167 // This heuristic will fail for inputs like '1.0'. | 196 // This heuristic will fail for inputs like '1.0'. |
168 // | 197 // |
169 // Since we still support users entering their passwords through the PIN | 198 // Since we still support users entering their passwords through the PIN |
170 // keyboard, we swap the input box to rtl when we think it is a password | 199 // keyboard, we swap the input box to rtl when we think it is a password |
171 // (just numbers), if the document direction is rtl. | 200 // (just numbers), if the document direction is rtl. |
172 return (document.dir == 'rtl') && !Number.isInteger(+password); | 201 return (document.dir == 'rtl') && !Number.isInteger(+password); |
173 }, | 202 }, |
174 }); | 203 }); |
OLD | NEW |