ui/keyboard/resources/elements/kb-key.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 Polymer('kb-key', {
   6   /**
   7    * The background image to display on this key. Does not display an
   8    * image if this is the empty string.
   9    * @type {string}
  10    */
  11   image: "",
  12
  13   /**
  14    * The background image size to use if an image is specified. The size
  15    * is provided as a string, for example, "50%".
  16    * @type {string}
  17    */
  18   imageSize: "",
  19
  20   /**
  21    * Key codes have been deprecated in DOM3 key events, but are required
  22    * for legacy web content. The key codes depend on the position of the
  23    * key on the keyboard and is independent of which modifier keys (shift,
  24    *  alt, ...) are active.
  25    * @type {number|undefined}
  26    */
  27   keyCode: undefined,
  28
  29   /**
  30    * Name of the key as defined in the DOM3 specification for key events.
  31    * Like the keyCode, the keyName is independent of the state of the
  32    * modifier keys.
  33    * @type {string|undefined}
  34    */
  35   keyName: undefined,
  36
  37   /**
  38    * Whether the shift key is pressed when producing the key value.
  39    * @type {boolean}
  40    */
  41   shiftModifier: false,
  42
  43   /**
  44    * The sound to play when this key is pressed.
  45    * @type {Sound}
  46    */
  47   sound: Sound.DEFAULT,
  48
  49   /**
  50    * Whether the key can be stretched to accomodate pixel rounding errors.
  51    */
  52   stretch: false,
  53
  54   /**
  55    * Weighting to use for layout in order to properly size the key.
  56    * Keys with a high weighting are wider than normal keys.
  57    * @type {number}
  58    */
  59   weight: DEFAULT_KEY_WEIGHT,
  60
  61   /**
  62    * Called when the image attribute changes. This is used to set the
  63    * background image of the key.
  64    * TODO(rsadam): Remove when polymer {{}} syntax regression is fixed.
  65    */
  66   imageChanged: function() {
  67     if (!this.image) {
  68       this.$.key.style.backgroundImage = "none";
  69     } else {
  70       // If no extension provided, default to svg.
  71       var image =
  72           this.image.split('.').length > 1 ? this.image : this.image + ".svg";
  73       this.$.key.style.backgroundImage =
  74           "url(images/" + image + ")";
  75     }
  76   },
  77
  78   /**
  79    * Returns a subset of the key attributes.
  80    * @param {string} caller The id of the function that called
  81    *     populateDetails.
  82    * @return {Object} Mapping of attributes for the key element.
  83    */
  84   populateDetails: function(caller) {
  85     var details = this.super([caller]);
  86     details.keyCode = this.keyCode;
  87     details.keyName = this.keyName;
  88     details.shiftModifier = this.shiftModifier;
  89     details.sound = this.sound;
  90     return details;
  91   },
  92 });
  93 ;
  94
  95 Polymer('kb-abc-key', {
  96   populateDetails: function(caller) {
  97     var detail = this.super([caller]);
  98     switch (caller) {
  99       case ('down'):
 100         detail.relegateToShift = true;
 101         break;
 102       default:
 103         break;
 104     }
 105     return detail;
 106   }
 107 });
 108 ;
 109
 110 Polymer('kb-hide-keyboard-key', {
 111   up: function(event) {
 112     hideKeyboard();
 113   },
 114 });