Enable the keyboard to show the popup keyboard for inputting accented characters.

chrome/browser/resources/keyboard/common.js

 // Copyright (c) 2011 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.
 
 /**
  * @fileoverview A simple virtual keyboard implementation.
  */
 
 var KEY_MODE = 'key';
 var SHIFT_MODE = 'shift';
@@ skipping 29 matching lines @@
 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 keyboard layout name currently in use.
+ * @type {string}
+ */
+var currentKeyboardLayout = 'us';
+
+/**
+ * The popup keyboard layout name currently in use.
+ * @type {string}
+ */
+var currentPopupName = '';
+
+/**
  * 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,
 
     /**
@@ skipping 14 matching lines @@
     cancel: function() {
       clearTimeout(this.timer);
       clearInterval(this.interval);
       this.timer = undefined;
       this.interval = undefined;
       this.key = undefined;
     }
 };
 
 /**
+ * An array to track the currently touched keys on the popup keyboard.
+ */
+var touchedKeys = [];
+
+/**
+ * Set the keyboard mode.
+ * @param {string} mode The new mode.
+ * @return {void}
+ */
+function setMode(mode) {
+  var rows = KEYBOARDS[currentKeyboardLayout]['rows'];
+  for (var i = 0; i < rows.length; ++i) {
+    rows[i].showMode(mode);
+  }
+
+  if (!currentPopupName) {
+    return;
+  }
+  var popupRows = KEYBOARDS[currentPopupName]['rows'];
+  for (var i = 0; i < popupRows.length; ++i) {
+    popupRows[i].showMode(mode);
+  }
+}
+
+/**
  * Transition the mode according to the given transition.
  * @param {string} transition The transition to take.
  * @return {void}
  */
 function transitionMode(transition) {
   currentMode = MODE_TRANSITIONS[currentMode + transition];
   setMode(currentMode);
 }
 
 /**
@@ skipping 113 matching lines @@
       // at the correct time.
       repeatKey.timer = setTimeout(function() {
             repeatKey.timer = undefined;
             repeatKey.interval = setInterval(function() {
                   keyDownHandler();
                 }, REPEAT_INTERVAL_MSEC);
           }, Math.max(0, REPEAT_DELAY_MSEC - REPEAT_INTERVAL_MSEC));
     }
 
     if (keyLongHandler) {
+      // Copy the current state of event because |evt| can be modified before
+      // |keyLongHandler| is called.

[bryeung, 2011/09/08 19:22:35]

Where is the event being modified?

Also, can we copy only the keys that we actually need into the new event?

[mazda, 2011/09/12 14:33:48]

I'm not sure where it is modified, but evt.currentTarget is set to null before
keyLongHandler is called.
I think it's OK to copy a part of keys.
Does 'the keys that we actually need' mean the key currently in use
(evt.currentTarget) or all the key of Mouse Event including inherited ones?

[bryeung, 2011/09/13 23:53:04]

Sorry.  I think my use of the word "keys" was a poor choice.

I meant: can we only copy the properties of the event that we will actually need
into the object we are saving?

[mazda, 2011/09/16 13:16:37]

Yes, that's fine. But if we use keyLongHandler for purpose case at some point,
we need to remember to copy the properties that get additionally needed.
I changed the code to copy only currentTarget for now.

[bryeung, 2011/09/19 15:05:09]

I don't see that change in this patch.  Do you need to re-upload?

+      var evt2 = {};
+      for (var name in evt) {
+        evt2[name] = evt[name];
+      }
       key.longPressTimer = setTimeout(function() {
-          keyLongHandler(evt),
+          keyLongHandler(evt2),
           clearTimeout(key.longPressTimer);
           delete key.longPressTimer;
           key.pressed = false;
         }, LONGPRESS_DELAY_MSEC);
     }
   };
 
   /**
    * Handle a key up event on the virtual key.
    * @param {UIEvent} evt The UI event which triggered the key up.
@@ skipping 16 matching lines @@
       repeatKey.cancel();
     }
 
     if (keyUpHandler) {
       keyUpHandler();
     }
     evt.preventDefault();
   };
 
   var outHandler = function(evt) {
+    if (evt.target != evt.currentTarget) {

[bryeung, 2011/09/08 19:22:35]

Why is this needed now?

[mazda, 2011/09/12 14:33:48]

This kind of check should have been in the CL that added outHandler.

Key element contains a div that holds text like this.

<div class="key r1">
  <div class="text-key">a</div>
</div>

There are three cases where mouseout handler is invoked.
1. When mouse cursor moves out of the internal div
2. When mouse cursor moves into the internal div
3. When mouse cursor moves out of the external div

I intended to filter out case 1 and case 2 with this check.
But I noticed while writing this comment that this check cannot handle case 2.
I added a check for case 2.

[bryeung, 2011/09/13 23:53:04]

Thank you for the explanation.  I think maybe we should add a comment to this
code explaining why it is here.

[mazda, 2011/09/16 13:16:37]

Added a comment.

+      return;
+    }
     // Reset key press state if the point goes out of the element.
     key.pressed = false;
     // Reset long-press timer.
     if (key.longPressTimer) {
       clearTimeout(key.longPressTimer);
       delete key.longPressTimer
     }
   }
 
   // Setup mouse event handlers.
@@ skipping 13 matching lines @@
  * @param {string} key The key paramater to sendKey.
  * @return {function()} A function which calls sendKey(key).
  */
 function sendKeyFunction(key) {
   return function() {
     sendKey(key);
   };
 }
 
 /**
+ * Dispatch custom events to the elements at the touch points.

[bryeung, 2011/09/08 19:22:35]

It's not clear to me why we need to make custom events here.

[mazda, 2011/09/12 14:33:48]

touchmove and touchend events are not sent to the element located at touch
points but to the element to which touchstart event is sent wherever the touch
points move, so in order to highlight the keys located at the touch points, we
need to somehow obtain the div elements corresponding to that keys. I think
using custom event is handy rather than searching in the DOM tree.

[bryeung, 2011/09/13 23:53:04]

Is there a reason why we can't simulate regular events?  Why can't we just send
touchmove and touchend events?

[mazda, 2011/09/16 13:16:37]

touchmove and touchend events are sent to the element that touchstart is sent,
so they are not the events keys on the popup keyboard should handle. If we send
touchmove or touchend here, we need to check whether the event is dispatched
from here or ordinary touch event, and the event handler needs to change the
behavior based on the event source.
I do not think it is a good idea.

+ * touchpointmove events are dispatched responding to a touchmove and
+ * touchpointend events responding to a touchend event respectively.
+ * @param {UIEvent} evt The touch event that contains touch points information.
+ * @return {void}
+ */
+function dispatchTouchPointEvent(evt) {
+  var type = null;
+  var touches = null;
+  if (evt.type == 'touchmove') {
+    type = 'touchpointmove';
+    touches = evt.touches;
+  } else if (evt.type == 'touchend') {
+    type = 'touchpointend';
+    touches = evt.changedTouches;
+  } else {
+    return;
+  }
+
+  for (var i = 0; i < touches.length; ++i) {
+    var dispatchedEvent = document.createEvent('Event');
+    dispatchedEvent.initEvent(type, true, false);
+    var touch = touches[i];
+    var key = document.elementFromPoint(touch.screenX, touch.screenY);
+    if (key) {
+      key.dispatchEvent(dispatchedEvent);
+    }
+  }
+}
+
+/**
+ * Handle a touch move event on the key to make changes to the popup keyboard.
+ * @param {UIEvent} evt The UI event which triggered the touch move.
+ * @return {void}
+*/
+function trackTouchMoveForPopup(evt) {
+  var previous = touchedKeys;
+  touchedKeys = [];
+  dispatchTouchPointEvent(evt);
+  for (var i = 0; i < previous.length; ++i) {
+    if (touchedKeys.indexOf(previous[i]) == -1) {
+      previous[i].classList.remove('highlighted');
+    }
+  }
+  for (var i = 0; i < touchedKeys.length; ++i) {
+    touchedKeys[i].classList.add('highlighted');
+  }
+}
+
+/**
+ * Handle a touch end event on the key to make changes to the popup keyboard.
+ * @param {UIEvent} evt The UI event which triggered the touch end.
+ * @return {void}
+*/
+function trackTouchEndForPopup(evt) {
+  for (var i = 0; i < touchedKeys.length; ++i) {
+    touchedKeys[i].classList.remove('highlighted');
+  }
+  dispatchTouchPointEvent(evt);
+  hidePopupKeyboard();
+
+  touchedKeys = [];
+  evt.target.removeEventListener('touchmove', trackTouchMoveForPopup);
+  evt.target.removeEventListener('touchend', trackTouchEndForPopup);
+}
+
+/**
  * Show the popup keyboard.
  * @param {string} name The name of the popup keyboard.
+ * @return {void}
  */
-function showPopupKeyboard(name) {
-  // TODO(mazda): Implement this function.
-  console.warn('Popup keyboard is not implemented yet.');
+function showPopupKeyboard(name, evt) {
+  var popupDiv = document.getElementById('popup');
+  if (popupDiv.style.visibility == 'visible') {
+    return;
+  }
+
+  // Reinitialize the rows of the popup keyboard
+  if (currentPopupName != name) {
+    while (popupDiv.firstChild) {
+      popupDiv.removeChild(popupDiv.firstChild);
+    }
+    if (currentPopupName in KEYBOARDS) {
+      delete KEYBOARDS[currentPopupName].rows;
+    }
+    initRows(name, popupDiv, true);
+    currentPopupName = name;
+  }
+
+  // Set the mode of the popup keyboard
+  var popupRows = KEYBOARDS[currentPopupName]['rows'];
+  for (var i = 0; i < popupRows.length; ++i) {
+    popupRows[i].showMode(currentMode);
+  }
+
+  // Calculate the size of popup keyboard based on the size of the key.
+  var keyElement = evt.currentTarget;
+  var keyboard = KEYBOARDS[name];
+  var rows = keyboard['definition'];
+  var height = keyElement.offsetHeight * rows.length;
+  var aspect = keyboard['aspect'];
+  var width = aspect * height;
+  popupDiv.style.width = width + 'px';
+  popupDiv.style.height = height + 'px';
+
+  // Place the popup keyboard above the key
+  var rect = keyElement.getBoundingClientRect();
+  var left = (rect.left + rect.right) / 2 - width / 2;
+  left = Math.min(Math.max(left, 0), window.innerWidth - width);
+  var top = rect.top - height;
+  top = Math.min(Math.max(top, 0), window.innerHeight - height);
+  popupDiv.style.left = left + 'px';
+  popupDiv.style.top = top + 'px';
+  popupDiv.style.visibility = 'visible';
+
+  keyElement.addEventListener('touchmove', trackTouchMoveForPopup);
+  keyElement.addEventListener('touchend', trackTouchEndForPopup);
 }
 
 /**
  * Create closure for the showPopupKeyboard function.
  * @param {string} name The name paramater to showPopupKeyboard.
  * @return {function()} A function which calls showPopupKeyboard(name).
  */
 function showPopupKeyboardFunction(name) {
-  return function () {
-    showPopupKeyboard(name);
+  return function (evt) {
+    showPopupKeyboard(name, evt);
   };
 }
 
 /**
+ * Hide the popup keyboard.
+ * @return {void}
+ */
+function hidePopupKeyboard() {
+  var popupDiv = document.getElementById('popup');
+  popupDiv.style.visibility = 'hidden';
+}
+
+/**
  * Plain-old-data class to represent a character.
  * @param {string} display The HTML to be displayed.
  * @param {string} id The key identifier for this Character.
  * @constructor
  */
 function Character(display, id) {
   this.display = display;
   this.keyIdentifier = id;
 }
 
 /**
  * Convenience function to make the keyboard data more readable.
- * @param {string} display Both the display and id for the created Character.
+ * If |opt_id| is omitted, |display| is used as the id.
+ * @param {string} display The display for the created Character.
+ * @param {string} opt_id The id for the created Character.
+ * @param {string} opt_popupName The popup keyboard name for this character.
+ * @return {Object} An object that contains a Character and the popup keyboard
+ *     name.
  */
-function C(display) {
-  return new Character(display, display);
+function C(display, opt_id, opt_popupName) {
+  var id = opt_id || display;
+  var result = { character: new Character(display, id)};
+  if (opt_popupName) {
+    result['popupName'] = opt_popupName;
+  }
+  return result;
 }
 
 /**
  * An abstract base-class for all keys on the keyboard.
  * @constructor
  */
 function BaseKey() {}
 
 BaseKey.prototype = {
   /**
@@ skipping 68 matching lines @@
 
 /**
  * A simple key which displays Characters.
  * @param {Character} key The Character for KEY_MODE.
  * @param {Character} shift The Character for SHIFT_MODE.
  * @param {Character} num The Character for NUMBER_MODE.
  * @param {Character} symbol The Character for SYMBOL_MODE.
  * @constructor
  * @extends {BaseKey}
  */
-function Key(key, shift, num, symbol) {
+function Key(key, shift, num, symbol, opt_className) {
   this.modeElements_ = {};
   this.cellType_ = '';
+  this.className_ = opt_className || "";
 
   this.modes_ = {};
-  this.modes_[KEY_MODE] = key;
-  this.modes_[SHIFT_MODE] = shift;
-  this.modes_[NUMBER_MODE] = num;
-  this.modes_[SYMBOL_MODE] = symbol;
+  this.modes_[KEY_MODE] = key ? key.character : null;
+  this.modes_[SHIFT_MODE] = shift ? shift.character : null;
+  this.modes_[NUMBER_MODE] = num ? num.character : null;
+  this.modes_[SYMBOL_MODE] = symbol ? symbol.character : null;
+
+  this.popupNames_ = {};
+  this.popupNames_[KEY_MODE] = key ? key.popupName : null;
+  this.popupNames_[SHIFT_MODE] = shift ? shift.popupName : null;
+  this.popupNames_[NUMBER_MODE] = num ? num.popupName : null;
+  this.popupNames_[SYMBOL_MODE] = symbol ? symbol.popupName : null;
 }
 
 Key.prototype = {
   __proto__: BaseKey.prototype,
 
   /** @inheritDoc */
   makeDOM: function(mode) {
     if (!this.modes_[mode]) {
       return null;
     }
 
     this.modeElements_[mode] = document.createElement('div');
-    this.modeElements_[mode].className = 'key';
-    addContent(this.modeElements_[mode], this.modes_[mode].display);
+    var element = this.modeElements_[mode];
+    element.className = 'key';
+    if (this.className_) {
+      element.classList.add(this.className_);
+    }
 
-    // TODO(mazda): Set the long-press handler only if the key has characters
-    // to show on the popup keyboard.
-    setupKeyEventHandlers(this, this.modeElements_[mode],
-        { 'up': sendKeyFunction(this.modes_[mode].keyIdentifier),
-          'long': showPopupKeyboardFunction('') });
+    addContent(element, this.modes_[mode].display);
 
-    return this.modeElements_[mode];
+    var upHandler = sendKeyFunction(this.modes_[mode].keyIdentifier);
+    if (this.className_ == 'popupkey') {

[bryeung, 2011/09/08 19:22:35]

I don't like giving the class name this semantic value as well.

Can we replace this with a different check?  e.g. checking if there are any
popupNames associated with any of the modes for this Key?

[mazda, 2011/09/12 14:33:48]

popupNames are added for the keys that invokes the popup keyboard. This check is
for the keys on the popup keyboard, so popupNames cannot be used for the check.

Instead, I modified the code to create and use PopupKey class for the keys on
the popup keyboard since the keys on the ordinary keyboard and the keys on the
popup keyboard are quite different.

Could you take another look at the code?

[bryeung, 2011/09/13 23:53:04]

I like this much better.  Thank you.

+      // Add handlers for keys on the popup keyboard
+      element.addEventListener('touchpointmove', function(evt) {
+          touchedKeys.push(element);
+        });
+      element.addEventListener('touchpointend', upHandler);
+      element.addEventListener('mouseup', upHandler);
+      element.addEventListener('mouseover', function(evt) {
+          element.classList.add('highlighted');
+        });
+      element.addEventListener('mouseout', function(evt) {
+          element.classList.remove('highlighted');
+        });
+    } else {
+      var longHandler = this.popupNames_[mode] ?
+          showPopupKeyboardFunction(this.popupNames_[mode]) : null;
+      setupKeyEventHandlers(this, element,
+          { 'up': upHandler,
+            'long': longHandler });
+    }
+    return element;
   }
 };
 
 /**
  * A key which displays an SVG image.
  * @param {string} className The class that provides the image.
  * @param {string} keyId The key identifier for the key.
  * @param {boolean} opt_repeat True if the key should repeat.
  * @constructor
  * @extends {BaseKey}
@@ skipping 255 matching lines @@
    * Shows the given mode.
    * @param {string} mode The mode to show.
    * @return {void}
    */
   showMode: function(mode) {
     for (var i = 0; i < MODES.length; ++i) {
       this.modeElements_[MODES[i]].style.display = 'none';
     }
     this.modeElements_[mode].style.display = '-webkit-box';
   },
+
+  /**
+   * Returns the size of keys this row contains.
+   * @return {number} The size of keys.
+   */
+  get length() {
+    return this.keys_.length;
+  }
 };