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: |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 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_' |
| 56 }, | |
| 57 | |
| 58 /** | |
| 59 * The intervalID used for the backspace button set/clear interval. | |
| 60 */ | |
| 61 intervalId: { | |
|
jdufault
2016/08/31 19:28:55
Can we use this.async?
sammiequon
2016/08/31 22:30:32
Done.
| |
| 62 type: Number, | |
| 63 value: 0 | |
| 64 } | |
| 65 | |
| 66 /** | |
| 67 * When the backspace button is held down, it repeatly clears the last | |
| 68 * character of the input value every intervalMs. | |
| 69 */ | |
| 70 intervalMs: { | |
| 71 type: Number, | |
| 72 value: 150 | |
| 56 } | 73 } |
| 57 }, | 74 }, |
| 58 | 75 |
| 59 /** | 76 /** |
| 60 * Gets the container holding the password field. | 77 * Gets the container holding the password field. |
| 61 * @type {!HTMLInputElement} | 78 * @type {!HTMLInputElement} |
| 62 */ | 79 */ |
| 63 get inputElement() { | 80 get inputElement() { |
| 64 return this.$$('#pin-input'); | 81 return this.$$('#pin-input'); |
| 65 }, | 82 }, |
| (...skipping 24 matching lines...) Expand all Loading... | |
| 90 * @param {string} value | 107 * @param {string} value |
| 91 * @param {string} previous | 108 * @param {string} previous |
| 92 */ | 109 */ |
| 93 onPinValueChange_: function(value, previous) { | 110 onPinValueChange_: function(value, previous) { |
| 94 if (value != previous) | 111 if (value != previous) |
| 95 this.fire('pin-change', { pin: value }); | 112 this.fire('pin-change', { pin: value }); |
| 96 }, | 113 }, |
| 97 | 114 |
| 98 /** | 115 /** |
| 99 * Called when the user wants to erase the last character of the entered | 116 * Called when the user wants to erase the last character of the entered |
| 100 * PIN value. | 117 * PIN value. |
| 101 */ | 118 */ |
| 102 onPinClear_: function() { | 119 onPinClear_: function() { |
| 103 this.value = this.value.substring(0, this.value.length - 1); | 120 this.value = this.value.substring(0, this.value.length - 1); |
| 104 }, | 121 }, |
| 105 | 122 |
| 123 /** | |
| 124 * Called when the user presses the backspace button. Starts a interval | |
| 125 * callback to repeatedly clear the last pin value until the interval is | |
| 126 * cleared. | |
| 127 * @private | |
| 128 */ | |
| 129 onBackspaceMouseDown_: function() { | |
| 130 this.onPinClear_(); | |
| 131 intervalId = setInterval(function() { | |
|
jdufault
2016/08/31 19:28:55
this.intervalId_
sammiequon
2016/08/31 22:30:32
Done.
| |
| 132 this.onPinClear_(); | |
| 133 }.bind(this), this.intervalMs); | |
| 134 }, | |
| 135 | |
| 136 /** | |
| 137 * Called when the user unpresses the backspace button. Stops the interval | |
| 138 * callback. | |
| 139 * @private | |
| 140 */ | |
| 141 onBackspaceMouseUpLeave_: function() { | |
|
jdufault
2016/08/31 19:28:55
Does this work for tapping?
sammiequon
2016/08/31 22:30:32
Yes.
| |
| 142 clearInterval(intervalId); | |
|
jdufault
2016/08/31 19:28:55
this.intervalId_
sammiequon
2016/08/31 22:30:32
Done.
| |
| 143 }, | |
| 144 | |
| 106 /** Called when a key event is pressed while the input element has focus. */ | 145 /** Called when a key event is pressed while the input element has focus. */ |
| 107 onInputKeyDown_: function(event) { | 146 onInputKeyDown_: function(event) { |
| 108 // Up/down pressed, swallow the event to prevent the input value from | 147 // Up/down pressed, swallow the event to prevent the input value from |
| 109 // being incremented or decremented. | 148 // being incremented or decremented. |
| 110 if (event.keyCode == 38 || event.keyCode == 40) { | 149 if (event.keyCode == 38 || event.keyCode == 40) { |
| 111 event.preventDefault(); | 150 event.preventDefault(); |
| 112 return; | 151 return; |
| 113 } | 152 } |
| 114 | 153 |
| 115 // Enter pressed. | 154 // Enter pressed. |
| (...skipping 20 matching lines...) Expand all Loading... | |
| 136 }, | 175 }, |
| 137 | 176 |
| 138 /** | 177 /** |
| 139 * Called when a key press event is fired while the number button is focused. | 178 * 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 | 179 * 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. | 180 * cannot or the virtual keyboard will keep poping up. |
| 142 * @param {Event} event Keypress Event object. | 181 * @param {Event} event Keypress Event object. |
| 143 * @private | 182 * @private |
| 144 */ | 183 */ |
| 145 onKeyPress_: function(event) { | 184 onKeyPress_: function(event) { |
| 185 // If the active element is the input element, the input element itself will | |
| 186 // handle the keypresses, so we do not handle them here. | |
| 187 if (this.shadowRoot.activeElement == this.inputElement) | |
| 188 return; | |
| 189 | |
| 146 var code = event.keyCode; | 190 var code = event.keyCode; |
| 147 | 191 |
| 148 // Enter pressed. | 192 // Enter pressed. |
| 149 if (code == 13) { | 193 if (code == 13) { |
| 150 this.firePinSubmitEvent_(); | 194 this.firePinSubmitEvent_(); |
| 151 event.preventDefault(); | 195 event.preventDefault(); |
| 152 return; | 196 return; |
| 153 } | 197 } |
| 154 | 198 |
| 155 this.value += String.fromCharCode(code); | 199 this.value += String.fromCharCode(code); |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 194 // possible. Number.isInteger will verify the value is not a NaN and that it | 238 // possible. Number.isInteger will verify the value is not a NaN and that it |
| 195 // does not contain decimals. | 239 // does not contain decimals. |
| 196 // This heuristic will fail for inputs like '1.0'. | 240 // This heuristic will fail for inputs like '1.0'. |
| 197 // | 241 // |
| 198 // Since we still support users entering their passwords through the PIN | 242 // Since we still support users entering their passwords through the PIN |
| 199 // keyboard, we swap the input box to rtl when we think it is a password | 243 // keyboard, we swap the input box to rtl when we think it is a password |
| 200 // (just numbers), if the document direction is rtl. | 244 // (just numbers), if the document direction is rtl. |
| 201 return (document.dir == 'rtl') && !Number.isInteger(+password); | 245 return (document.dir == 'rtl') && !Number.isInteger(+password); |
| 202 }, | 246 }, |
| 203 }); | 247 }); |
| OLD | NEW |