| 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 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 168 | 168 |
| 169 /** | 169 /** |
| 170 * Sets the selection end of the input field. | 170 * Sets the selection end of the input field. |
| 171 * @param {number} end The new selection end of the input element. | 171 * @param {number} end The new selection end of the input element. |
| 172 * @private | 172 * @private |
| 173 */ | 173 */ |
| 174 set selectionEnd_(end) { | 174 set selectionEnd_(end) { |
| 175 this.passwordElement.selectionEnd = end; | 175 this.passwordElement.selectionEnd = end; |
| 176 }, | 176 }, |
| 177 | 177 |
| 178 /** Transfers focus to the input element. */ | 178 /** |
| 179 focus: function() { | 179 * Transfers focus to the input element. This should not bring up the virtual |
| 180 this.passwordElement.focus(); | 180 * keyboard, if it is enabled. After focus, moves the caret to the correct |
| 181 * location if specified. |
| 182 * @param {number=} opt_selectionStart |
| 183 * @param {number=} opt_selectionEnd |
| 184 */ |
| 185 focus: function(opt_selectionStart, opt_selectionEnd) { |
| 186 setTimeout(function() { |
| 187 this.passwordElement.focus(); |
| 188 if (opt_selectionStart) |
| 189 this.selectionStart_ = opt_selectionStart; |
| 190 if (opt_selectionEnd) |
| 191 this.selectionEnd_ = opt_selectionEnd; |
| 192 }.bind(this), 0); |
| 181 }, | 193 }, |
| 182 | 194 |
| 183 /** | 195 /** |
| 184 * Called when a keypad number has been tapped. | 196 * Called when a keypad number has been tapped. |
| 185 * @param {Event} event The event object. | 197 * @param {Event} event The event object. |
| 186 * @private | 198 * @private |
| 187 */ | 199 */ |
| 188 onNumberTap_: function(event) { | 200 onNumberTap_: function(event) { |
| 189 var numberValue = event.target.getAttribute('value'); | 201 var numberValue = event.target.getAttribute('value'); |
| 190 | 202 |
| 191 // Add the number where the caret is, then update the selection range of the | 203 // Add the number where the caret is, then update the selection range of the |
| 192 // input element. | 204 // input element. |
| 193 var selectionStart = this.selectionStart_; | 205 var selectionStart = this.selectionStart_; |
| 194 this.value = this.value.substring(0, this.selectionStart_) + numberValue + | 206 this.value = this.value.substring(0, this.selectionStart_) + numberValue + |
| 195 this.value.substring(this.selectionEnd_); | 207 this.value.substring(this.selectionEnd_); |
| 196 this.selectionStart_ = selectionStart + 1; | |
| 197 this.selectionEnd_ = this.selectionStart_; | |
| 198 | 208 |
| 199 // If a number button is clicked, we do not want to switch focus to the | 209 // If a number button is clicked, we do not want to switch focus to the |
| 200 // button, therefore we transfer focus back to the input, but if a number | 210 // 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 | 211 // button is tabbed into, it should keep focus, so users can use tab and |
| 202 // spacebar/return to enter their PIN. | 212 // spacebar/return to enter their PIN. |
| 203 if (!event.target.receivedFocusFromKeyboard) | 213 if (!event.target.receivedFocusFromKeyboard) |
| 204 this.focus(); | 214 this.focus(selectionStart + 1, selectionStart + 1); |
| 205 event.preventDefault(); | 215 event.preventDefault(); |
| 206 }, | 216 }, |
| 207 | 217 |
| 208 /** Fires a submit event with the current PIN value. */ | 218 /** Fires a submit event with the current PIN value. */ |
| 209 firePinSubmitEvent_: function() { | 219 firePinSubmitEvent_: function() { |
| 210 this.fire('submit', { pin: this.value }); | 220 this.fire('submit', { pin: this.value }); |
| 211 }, | 221 }, |
| 212 | 222 |
| 213 /** | 223 /** |
| 214 * Fires an update event with the current PIN value. The event will only be | 224 * Fires an update event with the current PIN value. The event will only be |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 251 * the interval is cleared. | 261 * the interval is cleared. |
| 252 * @param {Event} event The event object. | 262 * @param {Event} event The event object. |
| 253 * @private | 263 * @private |
| 254 */ | 264 */ |
| 255 onBackspacePointerDown_: function(event) { | 265 onBackspacePointerDown_: function(event) { |
| 256 this.startAutoBackspaceId_ = setTimeout(function() { | 266 this.startAutoBackspaceId_ = setTimeout(function() { |
| 257 this.repeatBackspaceIntervalId_ = setInterval( | 267 this.repeatBackspaceIntervalId_ = setInterval( |
| 258 this.onPinClear_.bind(this), REPEAT_BACKSPACE_DELAY_MS); | 268 this.onPinClear_.bind(this), REPEAT_BACKSPACE_DELAY_MS); |
| 259 }.bind(this), INITIAL_BACKSPACE_DELAY_MS); | 269 }.bind(this), INITIAL_BACKSPACE_DELAY_MS); |
| 260 | 270 |
| 261 if (!event.target.receivedFocusFromKeyboard) | 271 // TODO(sammiequon): Investigate how we can keep the caret shown when |
| 262 this.focus(); | 272 // holding the backspace button down. (Adding a this.focus(); call here will |
| 263 event.preventDefault(); | 273 // bring the virtual keyboard up when it is enabled.) |
| 264 }, | 274 }, |
| 265 | 275 |
| 266 /** | 276 /** |
| 267 * Helper function which clears the timer / interval ids and resets them. | 277 * Helper function which clears the timer / interval ids and resets them. |
| 268 * @private | 278 * @private |
| 269 */ | 279 */ |
| 270 clearAndReset_: function() { | 280 clearAndReset_: function() { |
| 271 clearInterval(this.repeatBackspaceIntervalId_); | 281 clearInterval(this.repeatBackspaceIntervalId_); |
| 272 this.repeatBackspaceIntervalId_ = 0; | 282 this.repeatBackspaceIntervalId_ = 0; |
| 273 clearTimeout(this.startAutoBackspaceId_); | 283 clearTimeout(this.startAutoBackspaceId_); |
| (...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 391 // does not contain decimals. | 401 // does not contain decimals. |
| 392 // This heuristic will fail for inputs like '1.0'. | 402 // This heuristic will fail for inputs like '1.0'. |
| 393 // | 403 // |
| 394 // Since we still support users entering their passwords through the PIN | 404 // 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 | 405 // keyboard, we swap the input box to rtl when we think it is a password |
| 396 // (just numbers), if the document direction is rtl. | 406 // (just numbers), if the document direction is rtl. |
| 397 return (document.dir == 'rtl') && !Number.isInteger(+password); | 407 return (document.dir == 'rtl') && !Number.isInteger(+password); |
| 398 }, | 408 }, |
| 399 }); | 409 }); |
| 400 })(); | 410 })(); |
| OLD | NEW |