| 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 |