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

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: 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 type: {
30 type: String,
31 notify: true,
32 value: 'number',
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 changeRTLIfNeeded_: function(password) {
jdufault 2016/06/28 18:38:47 What about updateRtlState? changeRTL implies a one
sammiequon 2016/06/28 20:59:31 Done.
62 var regex = /^([0-9]*)$/;
63 var shouldRtl = !regex.test(password);
jdufault 2016/06/28 18:38:47 What about Number.isInteger(+password)? +password
sammiequon 2016/06/28 20:59:31 Done.
64 this.$$('#pin-input').classList.toggle(
65 'pin-keyboard-input-non-pin', shouldRtl);
66 },
67
54 /** 68 /**
55 * Fires an update event with the current PIN value. The event will only be 69 * Fires an update event with the current PIN value. The event will only be
56 * fired if the PIN value has actually changed. 70 * fired if the PIN value has actually changed.
57 * @param {string} value 71 * @param {string} value
58 * @param {string} previous 72 * @param {string} previous
59 */ 73 */
60 onPinValueChange_: function(value, previous) { 74 onPinValueChange_: function(value, previous) {
61 if (value != previous) 75 if (value != previous) {
62 this.fire('pin-change', { pin: value }); 76 this.fire('pin-change', { pin: value });
77 this.changeRTLIfNeeded_(value);
78 }
63 }, 79 },
64 80
65 /** Called when the user wants to erase the last character of the entered 81 /** Called when the user wants to erase the last character of the entered
66 * PIN value. 82 * PIN value.
67 */ 83 */
68 onPinClear_: function() { 84 onPinClear_: function() {
69 this.value = this.value.substring(0, this.value.length - 1); 85 this.value = this.value.substring(0, this.value.length - 1);
70 }, 86 },
71 87
72 /** Called when a key event is pressed while the input element has focus. */ 88 /** Called when a key event is pressed while the input element has focus. */
73 onInputKeyDown_: function(event) { 89 onInputKeyDown_: function(event) {
74 // Up/down pressed, swallow the event to prevent the input value from 90 // Up/down pressed, swallow the event to prevent the input value from
75 // being incremented or decremented. 91 // being incremented or decremented.
76 if (event.keyCode == 38 || event.keyCode == 40) { 92 if (event.keyCode == 38 || event.keyCode == 40) {
77 event.preventDefault(); 93 event.preventDefault();
78 return; 94 return;
79 } 95 }
80 96
81 // Enter pressed. 97 // Enter pressed.
82 if (event.keyCode == 13) { 98 if (event.keyCode == 13) {
83 this.firePinSubmitEvent_(); 99 this.firePinSubmitEvent_();
84 event.preventDefault(); 100 event.preventDefault();
85 return; 101 return;
86 } 102 }
103 },
104
105 /**
106 * Changes the input type for the pin-keyboard input element, based on the
107 * input specified for the pin-keyboard.
108 * @param {string} value
109 * @param {string} previous
110 */
111 onInputTypeChange_: function(value, previous) {
112 if (value != previous) {
113 if (value == 'password' || value == 'number' ||
114 value == 'text') {
115 this.$$('#pin-input').type = value;
116 }
117 }
87 } 118 }
88 }); 119 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698