ui/keyboard/resources/main.js

// Copyright 2014 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.
(function(exports) {
  /**
   * Alignment options for a keyset.
   * @param {Object=} opt_keyset The keyset to calculate the dimensions for.
   *    Defaults to the current active keyset.
   */
  var AlignmentOptions = function(opt_keyset) {
    var keyboard = document.getElementById('keyboard');
    var keyset = opt_keyset || keyboard.activeKeyset;
    this.calculate(keyset);
  }

  AlignmentOptions.prototype = {
    /**
     * The width of a regular key in logical pixels.
     * @type {number}
     */
    keyWidth: 0,

    /**
     * The horizontal space between two keys in logical pixels.
     * @type {number}
     */
    pitchX: 0,

    /**
     * The vertical space between two keys in logical pixels.
     * @type {number}
     */
    pitchY: 0,

    /**
     * The width in logical pixels the row should expand within.
     * @type {number}
     */
    availableWidth: 0,

    /**
     * The x-coordinate in logical pixels of the left most edge of the keyset.
     * @type {number}
     */
    offsetLeft: 0,

    /**
     * The x-coordinate of the right most edge in logical pixels of the keyset.
     * @type {number}
     */
    offsetRight: 0,

    /**
     * The height in logical pixels of all keys.
     * @type {number}
     */
    keyHeight: 0,

    /**
     * The height in logical pixels the keyset should stretch to fit.
     * @type {number}
     */
    availableHeight: 0,

    /**
     * The y-coordinate in logical pixels of the top most edge of the keyset.
     * @type {number}
     */
    offsetTop: 0,

    /**
     * The y-coordinate in logical pixels of the bottom most edge of the keyset.
     * @type {number}
     */
    offsetBottom: 0,

    /**
     * The ideal width of the keyboard container.
     * @type {number}
     */
    width: 0,

    /**
     * The ideal height of the keyboard container.
     * @type {number}
     */
    height: 0,

    /**
     * Recalculates the alignment options for a specific keyset.
     * @param {Object} keyset The keyset to align.
     */
    calculate: function (keyset) {
      var rows = keyset.querySelectorAll('kb-row').array();
      // Pick candidate row. This is the row with the most keys.
      var row = rows[0];
      var candidateLength = rows[0].childElementCount;
      for (var i = 1; i < rows.length; i++) {
        if (rows[i].childElementCount > candidateLength &&
            rows[i].align == RowAlignment.STRETCH) {
          row = rows[i];
          candidateLength = rows[i].childElementCount;
        }
      }
      var allKeys = row.children;

      // Calculates widths first.
      // Weight of a single interspace.
      var pitches = keyset.pitch.split();
      var pitchWeightX;
      var pitchWeightY;
      pitchWeightX = parseFloat(pitches[0]);
      pitchWeightY = pitches.length < 2 ? pitchWeightX : parseFloat(pitch[1]);

      // Sum of all keys in the current row.
      var keyWeightSumX = 0;
      for (var i = 0; i < allKeys.length; i++) {
        keyWeightSumX += allKeys[i].weight;
      }

      var interspaceWeightSumX = (allKeys.length -1) * pitchWeightX;
      // Total weight of the row in X.
      var totalWeightX = keyWeightSumX + interspaceWeightSumX +
          keyset.weightLeft + keyset.weightRight;
      var keyAspectRatio = getKeyAspectRatio();
      var totalWeightY = (pitchWeightY * (rows.length - 1)) +
                         keyset.weightTop +
                         keyset.weightBottom;
      for (var i = 0; i < rows.length; i++) {
        totalWeightY += rows[i].weight / keyAspectRatio;
      }
      // Calculate width and height of the window.
      var bounds = exports.getKeyboardBounds();

      this.width = bounds.width;
      this.height = bounds.height;
      var pixelPerWeightX = bounds.width/totalWeightX;
      var pixelPerWeightY = bounds.height/totalWeightY;

      if (keyset.align == LayoutAlignment.CENTER) {
        if (totalWeightX/bounds.width < totalWeightY/bounds.height) {
          pixelPerWeightY = bounds.height/totalWeightY;
          pixelPerWeightX = pixelPerWeightY;
          this.width = Math.floor(pixelPerWeightX * totalWeightX)
        } else {
          pixelPerWeightX = bounds.width/totalWeightX;
          pixelPerWeightY = pixelPerWeightX;
          this.height = Math.floor(pixelPerWeightY * totalWeightY);
        }
      }
      // Calculate pitch.
      this.pitchX = Math.floor(pitchWeightX * pixelPerWeightX);
      this.pitchY = Math.floor(pitchWeightY * pixelPerWeightY);

      // Convert weight to pixels on x axis.
      this.keyWidth = Math.floor(DEFAULT_KEY_WEIGHT * pixelPerWeightX);
      var offsetLeft = Math.floor(keyset.weightLeft * pixelPerWeightX);
      var offsetRight = Math.floor(keyset.weightRight * pixelPerWeightX);
      this.availableWidth = this.width - offsetLeft - offsetRight;

      // Calculates weight to pixels on the y axis.
      var weightY = Math.floor(DEFAULT_KEY_WEIGHT / keyAspectRatio);
      this.keyHeight = Math.floor(weightY * pixelPerWeightY);
      var offsetTop = Math.floor(keyset.weightTop * pixelPerWeightY);
      var offsetBottom = Math.floor(keyset.weightBottom * pixelPerWeightY);
      this.availableHeight = this.height - offsetTop - offsetBottom;

      var dX = bounds.width - this.width;
      this.offsetLeft = offsetLeft + Math.floor(dX/2);
      this.offsetRight = offsetRight + Math.ceil(dX/2)

      var dY = bounds.height - this.height;
      this.offsetBottom = offsetBottom + dY;
      this.offsetTop = offsetTop;
    },
  };

  /**
   * A simple binary search.
   * @param {Array} array The array to search.
   * @param {number} start The start index.
   * @param {number} end The end index.
   * @param {Function<Object>:number} The test function used for searching.
   * @private
   * @return {number} The index of the search, or -1 if it was not found.
   */
  function binarySearch_(array, start, end, testFn) {
      if (start > end) {
        // No match found.
        return -1;
      }
      var mid = Math.floor((start+end)/2);
      var result = testFn(mid);
      if (result == 0)
        return mid;
      if (result < 0)
        return binarySearch_(array, start, mid - 1, testFn);
      else
        return binarySearch_(array, mid + 1, end, testFn);
  }

  /**
   * Calculate width and height of the window.
   * @private
   * @return {Array.<String, number>} The bounds of the keyboard container.
   */
  function getKeyboardBounds_() {
    return {
      "width": screen.width,
      "height": screen.height * DEFAULT_KEYBOARD_ASPECT_RATIO
    };
  }

  /**
   * Calculates the desired key aspect ratio based on screen size.
   * @return {number} The aspect ratio to use.
   */
  function getKeyAspectRatio() {
    return (screen.width > screen.height) ?
        KEY_ASPECT_RATIO_LANDSCAPE : KEY_ASPECT_RATIO_PORTRAIT;
  }

  /**
   * Callback function for when the window is resized.
   */
  var onResize = function() {
    var keyboard = $('keyboard');
    keyboard.stale = true;
    var keyset = keyboard.activeKeyset;
    if (keyset)
      realignAll();
  };

  /**
   * Updates a specific key to the position specified.
   * @param {Object} key The key to update.
   * @param {number} width The new width of the key.
   * @param {number} height The new height of the key.
   * @param {number} left The left corner of the key.
   * @param {number} top The top corner of the key.
   */
  function updateKey(key, width, height, left, top) {
    key.style.position = 'absolute';
    key.style.width = width + 'px';
    key.style.height = (height - KEY_PADDING_TOP - KEY_PADDING_BOTTOM) + 'px';
    key.style.left = left + 'px';
    key.style.top = (top + KEY_PADDING_TOP) + 'px';
  }

  /**
   * Returns the key closest to given x-coordinate
   * @param {Array.<kb-key>} allKeys Sorted array of all possible key
   *     candidates.
   * @param {number} x The x-coordinate.
   * @param {number} pitch The pitch of the row.
   * @param {boolean} alignLeft whether to search with respect to the left or
   *   or right edge.
   * @return {?kb-key}
   */
  function findClosestKey(allKeys, x, pitch, alignLeft) {
    // Test function.
    var testFn = function(i) {
      var ERROR_THRESH = 1;
      var key = allKeys[i];
      var left = parseFloat(key.style.left);
      if (!alignLeft)
        left += parseFloat(key.style.width);
      var deltaRight = 0.5*(parseFloat(key.style.width) + pitch)
      deltaLeft = 0.5 * pitch;
      if (i > 0)
        deltaLeft += 0.5*parseFloat(allKeys[i-1].style.width);
      var high = Math.ceil(left + deltaRight) + ERROR_THRESH;
      var low = Math.floor(left - deltaLeft) - ERROR_THRESH;
      if (x <= high && x >= low)
        return 0;
      return x >= high? 1 : -1;
    }
    var index = exports.binarySearch(allKeys, 0, allKeys.length -1, testFn);
    return index > 0 ? allKeys[index] : null;
  }

  /**
   * Redistributes the total width amongst the keys in the range provided.
   * @param {Array.<kb-key>} allKeys Ordered list of keys to stretch.
   * @param {AlignmentOptions} params Options for aligning the keyset.
   * @param {number} xOffset The x-coordinate of the key who's index is start.
   * @param {number} width The total extraneous width to distribute.
   * @param {number} keyHeight The height of each key.
   * @param {number} yOffset The y-coordinate of the top edge of the row.
   */
  function redistribute(allKeys, params, xOffset, width, keyHeight, yOffset) {
    var availableWidth = width - (allKeys.length - 1) * params.pitchX;
    var stretchWeight = 0;
    var nStretch = 0;
    for (var i = 0; i < allKeys.length; i++) {
      var key = allKeys[i];
      if (key.stretch) {
        stretchWeight += key.weight;
        nStretch++;
      } else if (key.weight == DEFAULT_KEY_WEIGHT) {
        availableWidth -= params.keyWidth;
      } else {
        availableWidth -=
            Math.floor(key.weight/DEFAULT_KEY_WEIGHT * params.keyWidth);
      }
    }
    if (stretchWeight <= 0)
      console.error("Cannot stretch row without a stretchable key");
    // Rounding error to distribute.
    var pixelsPerWeight = availableWidth / stretchWeight;
    for (var i = 0; i < allKeys.length; i++) {
      var key = allKeys[i];
      var keyWidth = params.keyWidth;
      if (key.weight != DEFAULT_KEY_WEIGHT) {
        keyWidth =
            Math.floor(key.weight/DEFAULT_KEY_WEIGHT * params.keyWidth);
      }
      if (key.stretch) {
        nStretch--;
        if (nStretch > 0) {
          keyWidth = Math.floor(key.weight * pixelsPerWeight);
          availableWidth -= keyWidth;
        } else {
          keyWidth = availableWidth;
        }
      }
      updateKey(key, keyWidth, keyHeight, xOffset, yOffset)
      xOffset += keyWidth + params.pitchX;
    }
  }

  /**
   * Aligns a row such that the spacebar is perfectly aligned with the row above
   * it. A precondition is that all keys in this row can be stretched as needed.
   * @param {!kb-row} row The current row to be aligned.
   * @param {!kb-row} prevRow The row above the current row.
   * @param {!AlignmentOptions} params Options for aligning the keyset.
   * @param {number} keyHeight The height of the keys in this row.
   * @param {number} heightOffset The height offset caused by the rows above.
   */
  function realignSpacebarRow(row, prevRow, params, keyHeight, heightOffset) {
    var allKeys = row.children;
    var stretchWeightBeforeSpace = 0;
    var stretchBefore = 0;
    var stretchWeightAfterSpace = 0;
    var stretchAfter = 0;
    var spaceIndex = -1;

    for (var i=0; i< allKeys.length; i++) {
      if (spaceIndex == -1) {
        if (allKeys[i].classList.contains('space')) {
          spaceIndex = i;
          continue;
        } else {
          stretchWeightBeforeSpace += allKeys[i].weight;
          stretchBefore++;
        }
      } else {
        stretchWeightAfterSpace += allKeys[i].weight;
        stretchAfter++;
      }
    }
    if (spaceIndex == -1) {
      console.error("No spacebar found in this row.");
      return;
    }
    var totalWeight = stretchWeightBeforeSpace +
                      stretchWeightAfterSpace +
                      allKeys[spaceIndex].weight;
    var widthForKeys = params.availableWidth -
                       (params.pitchX * (allKeys.length - 1 ))
    // Number of pixels to assign per unit weight.
    var pixelsPerWeight = widthForKeys/totalWeight;
    // Predicted left edge of the space bar.
    var spacePredictedLeft = params.offsetLeft +
                          (spaceIndex * params.pitchX) +
                          (stretchWeightBeforeSpace * pixelsPerWeight);
    var prevRowKeys = prevRow.children;
    // Find closest keys to the spacebar in order to align it to them.
    var leftKey =
        findClosestKey(prevRowKeys, spacePredictedLeft, params.pitchX, true);

    var spacePredictedRight = spacePredictedLeft +
        allKeys[spaceIndex].weight * (params.keyWidth/100);

    var rightKey =
        findClosestKey(prevRowKeys, spacePredictedRight, params.pitchX, false);

    var yOffset = params.offsetTop + heightOffset;
    // Fix left side.
    var leftEdge = parseFloat(leftKey.style.left);
    var leftWidth = leftEdge - params.offsetLeft - params.pitchX;
    var leftKeys = allKeys.array().slice(0, spaceIndex);
    redistribute(leftKeys,
                 params,
                 params.offsetLeft,
                 leftWidth,
                 keyHeight,
                 yOffset);
    // Fix right side.
    var rightEdge = parseFloat(rightKey.style.left) +
        parseFloat(rightKey.style.width);
    var spacebarWidth = rightEdge - leftEdge;
    updateKey(allKeys[spaceIndex],
              spacebarWidth,
              keyHeight,
              leftEdge,
              yOffset);
    var rightWidth =
        params.availableWidth - (rightEdge - params.offsetLeft + params.pitchX);
    var rightKeys = allKeys.array().slice(spaceIndex + 1);
    redistribute(rightKeys,
                 params,
                 rightEdge + params.pitchX,//xOffset.
                 rightWidth,
                 keyHeight,
                 yOffset);
  }

  /**
   * Realigns a given row based on the parameters provided.
   * @param {!kb-row} row The row to realign.
   * @param {!AlignmentOptions} params The parameters used to align the keyset.
   * @param {number} The height of the keys.
   * @param {number} heightOffset The offset caused by rows above it.
   */
  function realignRow(row, params, keyHeight, heightOffset) {
    var all = row.children;
    var nStretch = 0;
    var stretchWeightSum = 0;
    var allSum = 0;
    // Keeps track of where to distribute pixels caused by round off errors.
    var deltaWidth = [];
    for (var i = 0; i < all.length; i++) {
      deltaWidth.push(0)
      var key = all[i];
      if (key.weight == DEFAULT_KEY_WEIGHT){
        allSum += params.keyWidth;
      } else {
        var width =
          Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT) * key.weight);
        allSum += width;
      }
      if (!key.stretch)
        continue;
      nStretch++;
      stretchWeightSum += key.weight;
    }
    var nRegular = all.length - nStretch;
    // Extra space.
    var extra = params.availableWidth -
                allSum -
                (params.pitchX * (all.length -1));
    var xOffset = params.offsetLeft;

    var alignment = row.align;
    switch (alignment) {
      case RowAlignment.STRETCH:
        var extraPerWeight = extra/stretchWeightSum;
        for (var i = 0; i < all.length; i++) {
          if (!all[i].stretch)
            continue;
          var delta = Math.floor(all[i].weight * extraPerWeight);
          extra -= delta;
          deltaWidth[i] = delta;
          // All left-over pixels assigned to right most stretchable key.
          nStretch--;
          if (nStretch == 0)
            deltaWidth[i] += extra;
        }
        break;
      case RowAlignment.CENTER:
        xOffset += Math.floor(extra/2)
        break;
      case RowAlignment.RIGHT:
        xOffset += extra;
        break;
      default:
        break;
    };

    var yOffset = params.offsetTop + heightOffset;
    var left = xOffset;
    for (var i = 0; i < all.length; i++) {
      var key = all[i];
      var width = params.keyWidth;
      if (key.weight != DEFAULT_KEY_WEIGHT)
        width = Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT) * key.weight)
      width += deltaWidth[i];
      updateKey(key, width, keyHeight, left, yOffset)
      left += (width + params.pitchX);
    }
  }

  /**
   * Realigns the keysets in all layouts of the keyboard.
   */
  function realignAll() {
    resizeKeyboardContainer()
    var keyboard = $('keyboard');
    var layoutParams = {};
    var idToLayout = function(id) {
      var parts = id.split('-');
      parts.pop();
      return parts.join('-');
    }

    var keysets = keyboard.querySelectorAll('kb-keyset').array();
    for (var i=0; i< keysets.length; i++) {
      var keyset = keysets[i];
      var layout = idToLayout(keyset.id);
      // Caches the layouts size parameters since all keysets in the same layout
      // will have the same specs.
      if (!(layout in layoutParams))
        layoutParams[layout] = new AlignmentOptions(keyset);
      realignKeyset(keyset, layoutParams[layout]);
    }
    exports.recordKeysets();
  }

  /**
   * Realigns the keysets in the current layout of the keyboard.
   */
  function realign() {
    var keyboard = $('keyboard');
    var params = new AlignmentOptions();
    // Check if current window bounds are accurate.
    resizeKeyboardContainer(params)
    var layout = keyboard.layout;
    var keysets =
        keyboard.querySelectorAll('kb-keyset[id^=' + layout + ']').array();
    for (var i = 0; i<keysets.length ; i++) {
      realignKeyset(keysets[i], params);
    }
    keyboard.stale = false;
    exports.recordKeysets();
  }

  /*
   * Realigns a given keyset.
   * @param {Object} keyset The keyset to realign.
   * @param {!AlignmentOptions} params The parameters used to align the keyset.
   */
  function realignKeyset(keyset, params) {
    var rows = keyset.querySelectorAll('kb-row').array();
    keyset.style.fontSize = (params.availableHeight /
      FONT_SIZE_RATIO / rows.length) + 'px';
    var heightOffset  = 0;
    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      var rowHeight =
          Math.floor(params.keyHeight * (row.weight / DEFAULT_KEY_WEIGHT));
      if (row.querySelector('.space') && (i > 1)) {
        realignSpacebarRow(row, rows[i-1], params, rowHeight, heightOffset)
      } else {
        realignRow(row, params, rowHeight, heightOffset);
      }
      heightOffset += (rowHeight + params.pitchY);
    }
  }

  /**
   * Resizes the keyboard container if needed.
   * @params {AlignmentOptions=} opt_params Optional parameters to use. Defaults
   *   to the parameters of the current active keyset.
   */
  function resizeKeyboardContainer(opt_params) {
    var params = opt_params ? opt_params : new AlignmentOptions();
    if (Math.abs(window.innerHeight - params.height) > RESIZE_THRESHOLD) {
      // Cannot resize more than 50% of screen height due to crbug.com/338829.
      window.resizeTo(params.width, params.height);
    }
  }

  addEventListener('resize', onResize);
  addEventListener('load', onResize);

  exports.getKeyboardBounds = getKeyboardBounds_;
  exports.binarySearch = binarySearch_;
  exports.realignAll = realignAll;
})(this);

/**
 * Recursively replace all kb-key-import elements with imported documents.
 * @param {!Document} content Document to process.
 */
function importHTML(content) {
  var dom = content.querySelector('template').createInstance();
  var keyImports = dom.querySelectorAll('kb-key-import');
  if (keyImports.length != 0) {
    keyImports.array().forEach(function(element) {
      if (element.importDoc(content)) {
        var generatedDom = importHTML(element.importDoc(content));
        element.parentNode.replaceChild(generatedDom, element);
      }
    });
  }
  return dom;
}

/**
  * Flatten the keysets which represents a keyboard layout.
  */
function flattenKeysets() {
  var keysets = $('keyboard').querySelectorAll('kb-keyset');
  if (keysets.length > 0) {
    keysets.array().forEach(function(element) {
      element.flattenKeyset();
    });
  }
}

function resolveAudio() {
  var keyboard = $('keyboard');
  keyboard.addSound(Sound.DEFAULT);
  var nodes = keyboard.querySelectorAll('[sound]').array();
  // Get id's of all unique sounds.
  for (var i = 0; i < nodes.length; i++) {
    var id = nodes[i].getAttribute('sound');
    keyboard.addSound(id);
  }
}

// Prevents all default actions of touch. Keyboard should use its own gesture
// recognizer.
addEventListener('touchstart', function(e) { e.preventDefault() });
addEventListener('touchend', function(e) { e.preventDefault() });
addEventListener('touchmove', function(e) { e.preventDefault() });
addEventListener('polymer-ready', function(e) {
  flattenKeysets();
  resolveAudio();
});
addEventListener('stateChange', function(e) {
  if (e.detail.value == $('keyboard').activeKeysetId)
    realignAll();
})