Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(559)

Side by Side Diff: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

Issue 2108813002: Added strings of i18n and made the pin-keyboard work for rtl lang. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@lkgr
Patch Set: Fixed patch set 1 errors. Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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:
11 * value: The value of the PIN keyboard. Writing to this property will adjust 11 * value: The value of the PIN keyboard. Writing to this property will adjust
12 * the PIN keyboard's value. 12 * the PIN keyboard's value.
13 * 13 *
14 * Events: 14 * Events:
15 * pin-change: Fired when the PIN value has changed. The pin is available at 15 * pin-change: Fired when the PIN value has changed. The pin is available at
16 * event.detail.pin. 16 * event.detail.pin.
17 * submit: Fired when the PIN is submitted. The pin is available at 17 * submit: Fired when the PIN is submitted. The pin is available at
18 * event.detail.pin. 18 * event.detail.pin.
19 * 19 *
20 * Example: 20 * Example:
21 * <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit" 21 * <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit"
22 * value="{{pinValue}}"> 22 * value="{{pinValue}}">
23 * </pin-keyboard> 23 * </pin-keyboard>
24 */ 24 */
25 Polymer({ 25 Polymer({
26 is: 'pin-keyboard', 26 is: 'pin-keyboard',
27 27
28 properties: { 28 properties: {
29 enablepassword: {
30 type: Boolean,
31 notify: true,
32 value: false,
33 observer: 'onInputTypeChange_'
34 },
35
29 /** The value stored in the keyboard's input element. */ 36 /** The value stored in the keyboard's input element. */
30 value: { 37 value: {
31 type: String, 38 type: String,
32 notify: true, 39 notify: true,
33 value: '', 40 value: '',
34 observer: 'onPinValueChange_' 41 observer: 'onPinValueChange_'
35 } 42 }
36 }, 43 },
37 44
38 /** Transfers focus to the input element. */ 45 /** Transfers focus to the input element. */
39 focus: function() { 46 focus: function() {
40 this.$$('#pin-input').focus(); 47 this.$$('#pin-input').focus();
41 }, 48 },
42 49
43 /** Called when a keypad number has been tapped. */ 50 /** Called when a keypad number has been tapped. */
44 onNumberTap_: function(event, detail) { 51 onNumberTap_: function(event, detail) {
45 var numberValue = event.target.getAttribute('value'); 52 var numberValue = event.target.getAttribute('value');
46 this.value += numberValue; 53 this.value += numberValue;
47 }, 54 },
48 55
49 /** Fires a submit event with the current PIN value. */ 56 /** Fires a submit event with the current PIN value. */
50 firePinSubmitEvent_: function() { 57 firePinSubmitEvent_: function() {
51 this.fire('submit', { pin: this.value }); 58 this.fire('submit', { pin: this.value });
52 }, 59 },
53 60
61 updateRtlState_: function(password) {
62 var shouldRtl = !Number.isInteger(+password);
jdufault 2016/06/28 21:13:22 Add a comment describing this behavior. shouldRtl
sammiequon 2016/06/28 22:43:38 Done.
63 this.$$('#pin-input').classList.toggle(
64 'pin-keyboard-input-non-pin', shouldRtl);
65 },
66
54 /** 67 /**
55 * Fires an update event with the current PIN value. The event will only be 68 * Fires an update event with the current PIN value. The event will only be
56 * fired if the PIN value has actually changed. 69 * fired if the PIN value has actually changed.
57 * @param {string} value 70 * @param {string} value
58 * @param {string} previous 71 * @param {string} previous
59 */ 72 */
60 onPinValueChange_: function(value, previous) { 73 onPinValueChange_: function(value, previous) {
61 if (value != previous) 74 if (value != previous) {
62 this.fire('pin-change', { pin: value }); 75 this.fire('pin-change', { pin: value });
76 this.updateRtlState_(value);
77 }
63 }, 78 },
64 79
65 /** Called when the user wants to erase the last character of the entered 80 /** Called when the user wants to erase the last character of the entered
66 * PIN value. 81 * PIN value.
67 */ 82 */
68 onPinClear_: function() { 83 onPinClear_: function() {
69 this.value = this.value.substring(0, this.value.length - 1); 84 this.value = this.value.substring(0, this.value.length - 1);
70 }, 85 },
71 86
72 /** Called when a key event is pressed while the input element has focus. */ 87 /** Called when a key event is pressed while the input element has focus. */
73 onInputKeyDown_: function(event) { 88 onInputKeyDown_: function(event) {
74 // Up/down pressed, swallow the event to prevent the input value from 89 // Up/down pressed, swallow the event to prevent the input value from
75 // being incremented or decremented. 90 // being incremented or decremented.
76 if (event.keyCode == 38 || event.keyCode == 40) { 91 if (event.keyCode == 38 || event.keyCode == 40) {
77 event.preventDefault(); 92 event.preventDefault();
78 return; 93 return;
79 } 94 }
80 95
81 // Enter pressed. 96 // Enter pressed.
82 if (event.keyCode == 13) { 97 if (event.keyCode == 13) {
83 this.firePinSubmitEvent_(); 98 this.firePinSubmitEvent_();
84 event.preventDefault(); 99 event.preventDefault();
85 return; 100 return;
86 } 101 }
102 },
103
104 /**
105 * Changes the input type for the pin-keyboard input element, based on the
106 * input specified for the pin-keyboard.
107 * @param {string} value
108 * @param {string} previous
109 */
110 onInputTypeChange_: function(value, previous) {
111 if (value != previous && value != null) {
jdufault 2016/06/28 21:13:22 Why do you need this check? Do we need the value o
sammiequon 2016/06/28 22:43:38 Done.
112 if (value)
113 this.$$('#pin-input').type = 'password';
114 else
115 this.$$('#pin-input').type = 'number';
116 }
87 } 117 }
88 }); 118 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698