Web Component Virtual Keyboard

ui/keyboard/resources/elements/kb-keyboard.html

+<!--
+  -- Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  -- Use of this source code is governed by a BSD-style license that can be
+  -- found in the LICENSE file.
+  -->
+
+<element name="kb-keyboard" on-key-over="keyOver" on-key-up="keyUp"
+    on-key-down="keyDown" attributes="keyset rows">
+  <template>
+    <content select="#{{keyset}}"></content>
+  </template>
+  <script>
+    /**
+     * The long-press delay in milliseconds before long-press handler is
+     * invoked.
+     * @type {number}
+     */
+    var LONGPRESS_DELAY_MSEC = 500;
+
+    /**
+     * The repeat delay in milliseconds before a key starts repeating. Use the
+     * same rate as Chromebook.
+     * (See chrome/browser/chromeos/language_preferences.cc)
+     * @type {number}
+     */
+    var REPEAT_DELAY_MSEC = 500;
+
+    /**
+     * The repeat interval or number of milliseconds between subsequent
+     * keypresses. Use the same rate as Chromebook.
+     * @type {number}
+     */
+    var REPEAT_INTERVAL_MSEC = 50;
+
+    /**
+     * The boolean to decide if keyboard should transit to upper case keyset
+     * when spacebar is pressed. If a closing punctuation is followed by a
+     * spacebar, keyboard should automatically transit to upper case.
+     * @type {boolean}
+     */
+    var enterUpperOnSpace = false;
+
+    /**
+     * A structure to track the currently repeating key on the keyboard.
+     */
+    var repeatKey = {
+      /**
+        * The timer for the delay before repeating behaviour begins.
+        * @type {number|undefined}
+        */
+      timer: undefined,
+
+      /**
+       * The interval timer for issuing keypresses of a repeating key.
+       * @type {number|undefined}
+       */
+      interval: undefined,
+
+      /**
+       * The key which is currently repeating.
+       * @type {BaseKey|undefined}
+       */
+      key: undefined,
+
+      /**
+       * Cancel the repeat timers of the currently active key.
+       */
+      cancel: function() {
+        clearTimeout(this.timer);
+        clearInterval(this.interval);
+        this.timer = undefined;
+        this.interval = undefined;
+        this.key = undefined;
+      }
+    };
+
+    Polymer.register(this, {
+      lastPressedKey: null,
+      voiceInput_: null,
+
+      ready: function() {
+        this.voiceInput_ = new VoiceInput(this);
+      },
+
+      /**
+       * Handles key-down event that is sent by kb-key.
+       * @param {CustomEvent} event The key-down event dispatched by kb-key.
+       * @param {Object} detail The detail of pressed kb-key.
+       */
+      keyDown: function(event, detail) {
+        var to = detail.to;
+        if (this.lastPressedKey)
+          this.lastPressedKey.classList.remove('active');
+        this.lastPressedKey = event.target;
+        this.lastPressedKey.classList.add('active');
+        repeatKey.cancel();
+        if (detail.char == "Mic") {

[bryeung, 2013/05/23 21:39:28]

is there any way we can push this out of the general keyDown function?

[bshe, 2013/05/24 14:43:50]

I imagine this would merge to the "to" below in the future. When mic key is
pressed, we will transit to a voice input keyset. So this is a temporary
solution for now as we dont have voice input keyset yet.
I could be wrong. In that case, I agree we should move it out. Maybe just move
it to the switch statement in key up handler? Since we dont have keyset
transition, we can just use key up handler like other keys.

On 2013/05/23 21:39:28, bryeung wrote:

+          this.voiceInput_.onDown();
+          return;
+        }
+        // Keyset transtion key.
+        if (to) {

[bryeung, 2013/05/23 21:39:28]

can we rename "to" to something a bit more descriptive?

[bshe, 2013/05/24 14:43:50]

renamed to "toKeyset", but I am not sure if this is a good one either. Do you
have suggestion?

On 2013/05/23 21:39:28, bryeung wrote:

+          this.keyset = to;
+          return;
+        }
+        if (detail.repeat) {
+          var char = detail.char;
+          var keyEvent = {
+            keyIdentifier: char
+          };
+          sendKeyEvent(keyEvent);
+          repeatKey.key = this.lastPressedKey;
+          repeatKey.timer = setTimeout(function() {
+            repeatKey.timer = undefined;
+            repeatKey.interval = setInterval(function() {
+               sendKeyEvent(keyEvent);
+            }, REPEAT_INTERVAL_MSEC);
+          }, Math.max(0, REPEAT_DELAY_MSEC - REPEAT_INTERVAL_MSEC));
+        }
+      },
+
+      /**
+       * Handles key-up event that is sent by kb-key.
+       * @param {CustomEvent} event The key-up event dispatched by kb-key.
+       * @param {Object} detail The detail of pressed kb-key.
+       */
+      keyUp: function(event, detail) {
+        this.lastPressedKey.classList.remove('active');
+        if (this.lastPressedKey != event.target)
+          return;
+        if (repeatKey.key == event.target) {
+          repeatKey.cancel();
+          return;
+        }
+        var to = detail.to;
+        // Keyset transtion key.
+        if (to) {
+          this.keyset = to;

[bryeung, 2013/05/23 21:39:28]

why are we doing this on up and down?  I must not understand what this does...

[bshe, 2013/05/24 14:43:50]

This is mainly for upper case keys. When an upper case key is pressed, keyboard
should transit back to lower case. The same code in keyDown is for transit to
"symbol" or "more" mode.

I tried android keyboard, and it works the same way as ours for upper case mode.
Although, when symbol key is down, android keyboard do not immediately transit
to symbol keyboard. It waits for key up event to transit.

I dont know if there is any specific reason that we use keydown for transition.
But it seems we can make the code easier/less confusing if we only transit on
keyUp like android? what do you think?
 
On 2013/05/23 21:39:28, bryeung wrote:

[bryeung, 2013/05/24 19:33:47]

I'm fine with transitioning only on keyUp.  Let's implement it that way for now,
and UX can ask us to change it later if they feel strongly about it :-)

[bshe, 2013/05/29 16:35:01]

Done. Please see the latest patchset, the main files that I change are:
ui/keyboard/resources/elements/kb-keyboard.html
ui/keyboard/resources/api_adapter.js
ui/keyboard/resources/voice_input.js

Other files are result from rebase.

On 2013/05/24 19:33:47, bryeung wrote:

+        }
+        var char = detail.char;
+        if (enterUpperOnSpace) {
+          enterUpperOnSpace = false;
+          if (char == 'Spacebar')
+            this.keyset = 'upper';
+        }
+        switch(char) {
+          case 'Shift':
+          case 'Symbol':
+          case 'More':
+          case 'Mic':
+            return;
+          case '.':
+          case '?':
+          case '!':
+            enterUpperOnSpace = true;
+            break;
+          case 'Tab':
+          case 'Spacebar':
+          case 'Enter':
+            sendKeyEvent({keyIdentifier: char});
+            return;
+          default:
+            break;
+        }
+        for (var i = 0; i < char.length; i++) {
+          var keyEvent = {
+              keyIdentifier: char.charAt(i)
+          };
+          sendKeyEvent(keyEvent);
+        }
+      }
+    });
+  </script>
+</element>
+