Expose some internal PIN keyboard state.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
index a5cbe3b7c5c1c5616a7a1ababb4cc36f279640c4..f6be68731568521bb1614107b841ffdd8af4e1e4 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -2,35 +2,80 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @fileoverview
+ * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally
+ * numeric values.
+ *
+ * Properties:
+ *    value: The value of the PIN keyboard. Writing to this property will adjust
+ *           the PIN keyboard's value.
+ *
+ * Events:
+ *    change: Fired when the PIN value has changed. The pin is available at

[xiyuan, 2016/06/23 01:16:54]

nit: update this to 'pin-change'?

[jdufault, 2016/06/23 17:52:27]

Done.

+ *            event.detail.pin.
+ *    submit: Fired when the PIN is submitted. The pin is available at
+ *            event.detail.pin.
+ *
+ * Example:
+ *    <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit"
+ *                  value="{{pinValue}}">
+ *    </pin-keyboard>
+ */
 Polymer({
   is: 'pin-keyboard',
 
-  // Called when a keypad number has been tapped.
+  properties: {
+    /** The value stored in the keyboard's input element. */
+    value: {
+      type: String,
+      notify: true,
+      value: '',
+      observer: 'onPinValueChange_'
+    }
+  },
+
+  /** Transfers focus to the input element. */
+  focus: function() {
+    this.$$('#pin-input').focus();
+  },
+
+  /** Called when a keypad number has been tapped. */
   onNumberTap_: function(event, detail) {
-    var target = event.target;
-    var value = target.getAttribute('value');
+    var numberValue = event.target.getAttribute('value');
+    this.value += numberValue;
+  },
 
-    var input = this.$$('#pin-input');
-    input.value += value;
+  /** Fires a submit event with the current PIN value. */
+  firePinSubmitEvent_: function() {
+    this.fire('submit', { pin: this.value });
   },
 
-  // Called when the user wants to submit the PIN.
-  onPinSubmit_: function() {
-    var pin = this.$$('#pin-input').value;
-    this.fire('submit', { pin: pin });
+  /**
+   * Fires an update event with the current PIN value. The event will only be
+   * fired if the PIN value has actually changed.
+   * @param {string} value
+   * @param {string} previous
+   */
+  onPinValueChange_: function(value, previous) {
+    if (value != previous)
+      this.fire('pin-change', { pin: value });
   },
 
-  // Called when a key event is pressed while the input element has focus.
+  /** Called when a key event is pressed while the input element has focus. */
   onInputKeyDown_: function(event) {
     // Up/down pressed, swallow the event to prevent the input value from
     // being incremented or decremented.
-    if (event.keyCode == 38 || event.keyCode == 40)
+    if (event.keyCode == 38 || event.keyCode == 40) {
       event.preventDefault();
+      return;
+    }
 
     // Enter pressed.
     if (event.keyCode == 13) {
-      this.onPinSubmit_();
+      this.firePinSubmitEvent_();
       event.preventDefault();
+      return;
     }
   }
 });