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

   1 <!--
   2   -- Copyright 2013 The Chromium Authors. All rights reserved.
   3   -- Use of this source code is governed by a BSD-style license that can be
   4   -- found in the LICENSE file.
   5   -->
   6
   7 <polymer-element name="kb-key" extends="kb-key-base"
   8     attributes="keyCode shiftModifier weight">
   9   <template>
  10     <style>
  11       @host {
  12         * {
  13           -webkit-box-flex: {{weight}};
  14         }
  15       }
  16     </style>
  17     <div id="key" pseudo="x-key" inverted?={{invert}}>
  18       <content></content>
  19     </div>
  20     <div pseudo="x-hinttext" inverted?={{invert}}>{{hintText}}</div>
  21   </template>
  22   <script>
  23     Polymer('kb-key', {
  24       /**
  25        * Key codes have been deprecated in DOM3 key events, but are required
  26        * for legacy web content. The key codes depend on the position of the
  27        * key on the keyboard and is independent of which modifier keys (shift,
  28        *  alt, ...) are active.
  29        * @type {number|undefined}
  30        */
  31       keyCode: undefined,
  32       /**
  33        * Whether the shift key is pressed when producing the key value.
  34        * @type {boolean}
  35        */
  36       shiftModifier: false,
  37       /**
  38        * Weighting to use for layout in order to properly size the key.
  39        * Keys with a high weighting are wider than normal keys.
  40        * @type {number}
  41        */
  42       weight: 1,
  43
  44       /**
  45        * Returns a subset of the key attributes.
  46        * @param {string} caller The id of the function that called
  47        *     populateDetails.
  48        * @return {Object} Mapping of attributes for the key element.
  49        */
  50       populateDetails: function(caller) {
  51         var details = this.super([caller]);
  52         details.keyCode = this.keyCode;
  53         details.shiftModifier = this.shiftModifier;
  54         return details;
  55       },
  56     });
  57   </script>
  58 </polymer-element>
  59
  60 <!-- Special keys -->
  61 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
  62     extends="kb-key">
  63   <script>
  64     Polymer('kb-abc-key', {
  65       populateDetails: function(caller) {
  66         var detail = this.super([caller]);
  67         switch (caller) {
  68           case ('down'):
  69             detail.relegateToShift = true;
  70             break;
  71           default:
  72             break;
  73         }
  74         return detail;
  75       }
  76     });
  77   </script>
  78 </polymer-element>
  79
  80 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
  81     char="Invalid" extends="kb-key">
  82   <script>
  83     Polymer('kb-hide-keyboard-key', {
  84       /**
  85        * Timer for a long press event which triggers the display of a keyboard
  86        * options menu.
  87        * @type {?Function}
  88        */
  89       longPressTimer: undefined,
  90
  91       down: function(event) {
  92          var self = this;
  93          this.longPressTimer = this.asyncMethod(function() {
  94            if (self.longPressTimer) {
  95              clearTimeout(self.longPressTimer);
  96              self.longPressTimer = undefined;
  97              var details = {
  98                left: this.offsetLeft,
  99                top: this.offsetTop,
 100                width: this.clientWidth,
 101              };
 102              this.fire('show-options', details);
 103            }
 104          }, null, LONGPRESS_DELAY_MSEC);
 105       },
 106
 107       up: function(event) {
 108         if (this.longPressTimer) {
 109           clearTimeout(this.longPressTimer);
 110           hideKeyboard();
 111           this.longPressTimer = undefined;
 112         }
 113       }
 114     });
 115   </script>
 116 </polymer-element>