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

   1 <!--
   2   -- Copyright (c) 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 <element name="kb-key" on-pointerdown="down" on-pointerup="up" on-pointerout="out"
   8     attributes="accents char invert repeat superscript toKeyset">
   9   <template>
  10     <style>
  11       @host {
  12         * {
  13           -webkit-box-flex: 1;
  14           display: -webkit-box;
  15           position: relative;
  16           background-position: center center;
  17           background-repeat: no-repeat;
  18           background-size: contain;
  19         }
  20       }
  21       .key {
  22         bottom: 0;
  23         left: 0;
  24         height: 1.2em;
  25         margin: auto;
  26         position: absolute;
  27         right: 0;
  28         top: 0;
  29         padding-left: 10px;
  30         padding-right: 10px;
  31       }
  32       .superscript {
  33         color: #7c7c7c;
  34         font-size: 70%;
  35         position: absolute;
  36         right: 7%;
  37         top: 5%;
  38       }
  39       div.key[inverted] {
  40         color: #7c7c7c;
  41       }
  42       div.superscript[inverted] {
  43         color: #ffffff;
  44       }
  45     </style>
  46     <div id="key" class="key" inverted?={{invert}}>
  47       <content></content>
  48     </div>
  49     <div class="superscript" inverted?={{invert}}>{{superscript}}</div>
  50   </template>
  51   <script>
  52     /**
  53      * The long-press delay in milliseconds before long-press handler is
  54      * invoked.
  55      * @type {number}
  56      */
  57     var LONGPRESS_DELAY_MSEC = 500;
  58
  59     Polymer.register(this, {
  60       repeat: false,
  61       invert: false,
  62       longPressTimer: null,
  63       down: function(event) {
  64         var detail = {
  65             char: this.char || this.textContent,
  66             toKeyset: this.toKeyset,
  67             repeat: this.repeat
  68         };
  69         this.send('key-down', detail);
  70         if (this.accents) {
  71           this.longPressTimer = this.asyncMethod(function() {
  72             var detail = {
  73               char: this.char || this.textContent,
  74               accents: this.accents
  75             };
  76             this.classList.remove('active');
  77             this.send('key-longpress', detail);
  78           }, null, LONGPRESS_DELAY_MSEC);
  79         }
  80       },
  81       out: function(event) {
  82         clearTimeout(this.longPressTimer);
  83       },
  84       up: function(event) {
  85         clearTimeout(this.longPressTimer);
  86         var detail = {
  87             char: this.char || this.textContent,
  88             toKeyset: this.toKeyset
  89         };
  90         this.send('key-up', detail);
  91       }
  92     });
  93   </script>
  94 </element>