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 115 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 currentTarget of event, which is neccessary in
+      // showPopupKeyboard, because |evt| can be modified before
+      // |keyLongHandler| is called.
+      var evt2 = {};

[bryeung, 2011/09/20 19:30:50]

nit: evtCopy instead of evt2?

[mazda, 2011/09/22 08:40:38]

Done.

+      evt2.currentTarget = evt.currentTarget;
       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 18 matching lines @@
     if (repeatKey.key == key) {
       repeatKey.cancel();
     }
 
     if (keyUpHandler) {
       keyUpHandler();
     }
   };
 
   var outHandler = function(evt) {
+    // Key element contains a div that holds text like this.
+    //
+    // <div class="key r1">
+    //   <div class="text-key">a</div>
+    // </div>
+    //
+    // We are interested in mouseout event sent when mouse cursor moves out of
+    // the external div, but mouseout event is sent when mouse cursor moves out
+    // of the internal div or moves into the internal div, too.
+    // Filter out the last two cases here.
+    if (evt.target != evt.currentTarget ||
+        evt.toElement.parentNode == evt.fromElement) {
+      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.
+ * touchpointmove events are dispatched responding to a touchmove and

[bryeung, 2011/09/20 19:30:50]

nit: make the name more obvious (e.g. touchmove_popup/touchend_popup, or
something like that)

[mazda, 2011/09/22 08:40:38]

Done.

+ * touchpointend events responding to a touchend event respectively.
+ * @param {UIEvent} evt The touch event that contains touch points information.
+ * @return {void}
+ */
+function dispatchTouchPointEvent(evt) {

[bryeung, 2011/09/20 19:30:50]

nit: make the name more obvious (e.g. dispatchCustomPopupEvents)

[mazda, 2011/09/22 08:40:38]

Done.

+  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.

[bryeung, 2011/09/20 19:30:50]

missing evt param doc

[mazda, 2011/09/22 08:40:38]

Done.

+ * @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() {

[bryeung, 2011/09/20 19:30:50]

Is it worth moving the clean-up code (that removes child elements) to hide? 
Would that provide better performance when showing the popup keyboard?

[mazda, 2011/09/22 08:40:38]

That would provide better performance if the popup keyboard is shown again for
another key.
Probably such use cases are more frequent than the cases showing the popup key
for one key consecutively, so I moved the clean-up code from showPopupKeyboard
to 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.
+ * @param {string} display The display for the created Character.
+ * @param {string} opt_id The id for the created Character.
+ * @return {Character} A character that contains display and opt_id. If
+ *     opt_id is omitted, display is used as the id.
  */
-function C(display) {
-  return new Character(display, display);
+function C(display, opt_id) {
+  var id = opt_id || display;
+  return new Character(display, id);
 }
 
 /**
+ * Convenience function to make the keyboard data more readable.
+ * @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 CP(display, opt_id, opt_popupName) {
+  var result = { character: C(display, opt_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 = {
   /**
    * The cell type of this key.  Determines the background colour.
    * @type {string}
    */
@@ skipping 48 matching lines @@
    * @param {string} mode The keyboard mode to create elements for.
    * @return {Element} The top-level DOM Element for the key.
    */
   makeDOM: function(mode) {
     throw new Error('makeDOM not implemented in BaseKey');
   },
 };
 
 /**
  * A simple key which displays Characters.
+ * @param {Object} key The Character and the popup name for KEY_MODE.
+ * @param {Object} shift The Character and the popup name for SHIFT_MODE.
+ * @param {Object} num The Character and the popup name for NUMBER_MODE.
+ * @param {Object} symbol The Character and the popup name for SYMBOL_MODE.
+ * @constructor
+ * @extends {BaseKey}
+ */
+function Key(key, shift, num, symbol) {
+  this.modeElements_ = {};
+  this.cellType_ = '';
+
+  this.modes_ = {};
+  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');
+    var element = this.modeElements_[mode];
+    element.className = 'key';
+
+    addContent(element, this.modes_[mode].display);
+
+    var longHandler = this.popupNames_[mode] ?
+        showPopupKeyboardFunction(this.popupNames_[mode]) : null;
+    setupKeyEventHandlers(this, element,
+        { 'up': sendKeyFunction(this.modes_[mode].keyIdentifier),
+          'long': longHandler });
+    return element;
+  }
+};
+
+/**
+ * A simple key which displays Characters on the popup keyboard.
  * @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 PopupKey(key, shift, num, symbol) {
   this.modeElements_ = {};
   this.cellType_ = '';
 
   this.modes_ = {};
   this.modes_[KEY_MODE] = key;
   this.modes_[SHIFT_MODE] = shift;
   this.modes_[NUMBER_MODE] = num;
   this.modes_[SYMBOL_MODE] = symbol;
 }
 
-Key.prototype = {
+PopupKey.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 popupkey';
 
-    // 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);
+    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');
+      });
+    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 251 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;
+  }
 };