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 107 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
118 }, | 118 }, |
119 }, | 119 }, |
120 | 120 |
121 /** | 121 /** |
122 * Called when a password element is attached to the pin keyboard. | 122 * Called when a password element is attached to the pin keyboard. |
123 * @param {HTMLInputElement} inputElement The PIN keyboard's input element. | 123 * @param {HTMLInputElement} inputElement The PIN keyboard's input element. |
124 * @private | 124 * @private |
125 */ | 125 */ |
126 onPasswordElementAttached_: function(inputElement) { | 126 onPasswordElementAttached_: function(inputElement) { |
127 this.showPinInput_ = inputElement == this.$.pinInput.inputElement; | 127 this.showPinInput_ = inputElement == this.$.pinInput.inputElement; |
128 inputElement.addEventListener('input', | 128 inputElement.addEventListener('input', this.handleInputChanged_.bind(this)); |
129 this.handleInputChanged_.bind(this)); | |
130 }, | 129 }, |
131 | 130 |
132 /** | 131 /** |
133 * Called when the user uses the keyboard to enter a value into the input | 132 * Called when the user uses the keyboard to enter a value into the input |
134 * element. | 133 * element. |
135 * @param {Event} event The event object. | 134 * @param {Event} event The event object. |
136 * @private | 135 * @private |
137 */ | 136 */ |
138 handleInputChanged_: function(event) { | 137 handleInputChanged_: function(event) { |
139 this.value = event.target.value; | 138 this.value = event.target.value; |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
200 // button, therefore we transfer focus back to the input, but if a number | 199 // button, therefore we transfer focus back to the input, but if a number |
201 // button is tabbed into, it should keep focus, so users can use tab and | 200 // button is tabbed into, it should keep focus, so users can use tab and |
202 // spacebar/return to enter their PIN. | 201 // spacebar/return to enter their PIN. |
203 if (!event.target.receivedFocusFromKeyboard) | 202 if (!event.target.receivedFocusFromKeyboard) |
204 this.focus(); | 203 this.focus(); |
205 event.preventDefault(); | 204 event.preventDefault(); |
206 }, | 205 }, |
207 | 206 |
208 /** Fires a submit event with the current PIN value. */ | 207 /** Fires a submit event with the current PIN value. */ |
209 firePinSubmitEvent_: function() { | 208 firePinSubmitEvent_: function() { |
210 this.fire('submit', { pin: this.value }); | 209 this.fire('submit', {pin: this.value}); |
211 }, | 210 }, |
212 | 211 |
213 /** | 212 /** |
214 * Fires an update event with the current PIN value. The event will only be | 213 * Fires an update event with the current PIN value. The event will only be |
215 * fired if the PIN value has actually changed. | 214 * fired if the PIN value has actually changed. |
216 * @param {string} value | 215 * @param {string} value |
217 * @param {string} previous | 216 * @param {string} previous |
218 */ | 217 */ |
219 onPinValueChange_: function(value, previous) { | 218 onPinValueChange_: function(value, previous) { |
220 if (value != previous) { | 219 if (value != previous) { |
221 this.passwordElement.value = this.value; | 220 this.passwordElement.value = this.value; |
222 this.fire('pin-change', { pin: value }); | 221 this.fire('pin-change', {pin: value}); |
223 } | 222 } |
224 }, | 223 }, |
225 | 224 |
226 /** | 225 /** |
227 * Called when the user wants to erase the last character of the entered | 226 * Called when the user wants to erase the last character of the entered |
228 * PIN value. | 227 * PIN value. |
229 * @private | 228 * @private |
230 */ | 229 */ |
231 onPinClear_: function() { | 230 onPinClear_: function() { |
232 // If the input is shown, clear the text based on the caret location or | 231 // If the input is shown, clear the text based on the caret location or |
(...skipping 14 matching lines...) Expand all Loading... |
247 | 246 |
248 /** | 247 /** |
249 * Called when the user presses or touches the backspace button. Starts a | 248 * Called when the user presses or touches the backspace button. Starts a |
250 * timer which starts an interval to repeatedly backspace the pin value until | 249 * timer which starts an interval to repeatedly backspace the pin value until |
251 * the interval is cleared. | 250 * the interval is cleared. |
252 * @param {Event} event The event object. | 251 * @param {Event} event The event object. |
253 * @private | 252 * @private |
254 */ | 253 */ |
255 onBackspacePointerDown_: function(event) { | 254 onBackspacePointerDown_: function(event) { |
256 this.startAutoBackspaceId_ = setTimeout(function() { | 255 this.startAutoBackspaceId_ = setTimeout(function() { |
257 this.repeatBackspaceIntervalId_ = setInterval( | 256 this.repeatBackspaceIntervalId_ = |
258 this.onPinClear_.bind(this), REPEAT_BACKSPACE_DELAY_MS); | 257 setInterval(this.onPinClear_.bind(this), REPEAT_BACKSPACE_DELAY_MS); |
259 }.bind(this), INITIAL_BACKSPACE_DELAY_MS); | 258 }.bind(this), INITIAL_BACKSPACE_DELAY_MS); |
260 | 259 |
261 if (!event.target.receivedFocusFromKeyboard) | 260 if (!event.target.receivedFocusFromKeyboard) |
262 this.focus(); | 261 this.focus(); |
263 event.preventDefault(); | 262 event.preventDefault(); |
264 }, | 263 }, |
265 | 264 |
266 /** | 265 /** |
267 * Helper function which clears the timer / interval ids and resets them. | 266 * Helper function which clears the timer / interval ids and resets them. |
268 * @private | 267 * @private |
(...skipping 122 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
391 // does not contain decimals. | 390 // does not contain decimals. |
392 // This heuristic will fail for inputs like '1.0'. | 391 // This heuristic will fail for inputs like '1.0'. |
393 // | 392 // |
394 // Since we still support users entering their passwords through the PIN | 393 // Since we still support users entering their passwords through the PIN |
395 // keyboard, we swap the input box to rtl when we think it is a password | 394 // keyboard, we swap the input box to rtl when we think it is a password |
396 // (just numbers), if the document direction is rtl. | 395 // (just numbers), if the document direction is rtl. |
397 return (document.dir == 'rtl') && !Number.isInteger(+password); | 396 return (document.dir == 'rtl') && !Number.isInteger(+password); |
398 }, | 397 }, |
399 }); | 398 }); |
400 })(); | 399 })(); |
OLD | NEW |