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 30 matching lines...) Expand all Loading... | |
| 41 | 41 |
| 42 /** The value stored in the keyboard's input element. */ | 42 /** The value stored in the keyboard's input element. */ |
| 43 value: { | 43 value: { |
| 44 type: String, | 44 type: String, |
| 45 notify: true, | 45 notify: true, |
| 46 value: '', | 46 value: '', |
| 47 observer: 'onPinValueChange_' | 47 observer: 'onPinValueChange_' |
| 48 } | 48 } |
| 49 }, | 49 }, |
| 50 | 50 |
| 51 /** | |
| 52 * Gets the container holding the password field. | |
| 53 * @type {!HTMLInputElement} | |
| 54 */ | |
| 55 get inputElement() { | |
| 56 return this.$$('#pin-input'); | |
| 57 }, | |
| 58 | |
| 59 /** | |
| 60 * Gets the submit button. | |
| 61 * @type {!HTMLElement} | |
| 62 */ | |
| 63 get submitButton() { | |
| 64 return this.$$('.submit-button'); | |
| 65 }, | |
| 66 | |
| 67 /** Clears the current input. */ | |
| 68 clear: function() { | |
| 69 this.value = ''; | |
| 70 }, | |
| 71 | |
| 51 /** Transfers focus to the input element. */ | 72 /** Transfers focus to the input element. */ |
| 52 focus: function() { | 73 focus: function() { |
| 53 this.$$('#pin-input').focus(); | 74 this.$$('#pin-input').focus(); |
| 54 }, | 75 }, |
| 55 | 76 |
| 56 /** Called when a keypad number has been tapped. */ | 77 /** Called when a keypad number has been tapped. */ |
| 57 onNumberTap_: function(event, detail) { | 78 onNumberTap_: function(event, detail) { |
| 58 var numberValue = event.target.getAttribute('value'); | 79 var numberValue = event.target.getAttribute('value'); |
| 59 this.value += numberValue; | 80 this.value += numberValue; |
| 60 }, | 81 }, |
| 61 | 82 |
| 62 /** Fires a submit event with the current PIN value. */ | |
| 63 firePinSubmitEvent_: function() { | |
| 64 this.fire('submit', { pin: this.value }); | |
| 65 }, | |
| 66 | |
| 67 /** | 83 /** |
| 68 * Fires an update event with the current PIN value. The event will only be | 84 * Fires an update event with the current PIN value. The event will only be |
|
jdufault
2016/07/11 22:35:08
The settings UI integration still listens for the
sammiequon
2016/07/11 23:13:23
Done.
| |
| 69 * fired if the PIN value has actually changed. | 85 * fired if the PIN value has actually changed. |
| 70 * @param {string} value | 86 * @param {string} value |
| 71 * @param {string} previous | 87 * @param {string} previous |
| 72 */ | 88 */ |
| 73 onPinValueChange_: function(value, previous) { | 89 onPinValueChange_: function(value, previous) { |
| 74 if (value != previous) | 90 if (value != previous) |
| 75 this.fire('pin-change', { pin: value }); | 91 this.fire('pin-change', { pin: value }); |
| 76 }, | 92 }, |
| 77 | 93 |
| 78 /** Called when the user wants to erase the last character of the entered | 94 /** Called when the user wants to erase the last character of the entered |
| 79 * PIN value. | 95 * PIN value. |
| 80 */ | 96 */ |
| 81 onPinClear_: function() { | 97 onPinClear_: function() { |
| 82 this.value = this.value.substring(0, this.value.length - 1); | 98 this.value = this.value.substring(0, this.value.length - 1); |
| 83 }, | 99 }, |
| 84 | 100 |
| 85 /** Called when a key event is pressed while the input element has focus. */ | 101 /** Called when a key event is pressed while the input element has focus. */ |
| 86 onInputKeyDown_: function(event) { | 102 onInputKeyDown_: function(event) { |
| 87 // Up/down pressed, swallow the event to prevent the input value from | 103 // Up/down pressed, swallow the event to prevent the input value from |
| 88 // being incremented or decremented. | 104 // being incremented or decremented. |
| 89 if (event.keyCode == 38 || event.keyCode == 40) { | 105 if (event.keyCode == 38 || event.keyCode == 40) { |
| 90 event.preventDefault(); | 106 event.preventDefault(); |
| 91 return; | 107 return; |
| 92 } | 108 } |
| 93 | |
| 94 // Enter pressed. | |
| 95 if (event.keyCode == 13) { | |
| 96 this.firePinSubmitEvent_(); | |
| 97 event.preventDefault(); | |
| 98 return; | |
| 99 } | |
| 100 }, | 109 }, |
| 101 | 110 |
| 102 /** | 111 /** |
| 103 * Changes the color of the submit button if PIN is ready. | 112 * Changes the color of the submit button if PIN is ready. |
| 104 * @param {string} value | 113 * @param {string} value |
| 105 */ | 114 */ |
| 106 computeSubmitClass_: function(value) { | 115 computeSubmitClass_: function(value) { |
| 107 return value.length > 0 ? 'ready-background' : ''; | 116 return value.length > 0 ? 'ready-background' : ''; |
| 108 }, | 117 }, |
| 109 | 118 |
| (...skipping 25 matching lines...) Expand all Loading... | |
| 135 // does not contain decimals. | 144 // does not contain decimals. |
| 136 // This heuristic will fail for inputs like '1.0'. | 145 // This heuristic will fail for inputs like '1.0'. |
| 137 // | 146 // |
| 138 // Since we still support users entering their passwords through the PIN | 147 // Since we still support users entering their passwords through the PIN |
| 139 // keyboard, we swap the input box to rtl when we think it is a password | 148 // keyboard, we swap the input box to rtl when we think it is a password |
| 140 // (just numbers), if the document direction is rtl. | 149 // (just numbers), if the document direction is rtl. |
| 141 var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password); | 150 var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password); |
| 142 return enableRtl ? 'input-non-pin' : ''; | 151 return enableRtl ? 'input-non-pin' : ''; |
| 143 } | 152 } |
| 144 }); | 153 }); |
| OLD | NEW |