src/ui/keyboard/resources/elements/kb-altkey.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-altkey" attributes="char" on-pointerover="over"
   8     on-pointerout="out" on-pointerup="up">
   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     </style>
  22     <div pseudo="x-key">
  23       <content></content>
  24     </div>
  25   </template>
  26   <script>
  27     /**
  28      * Filter out mouse/touch movements internal to this node. When moving
  29      * inside a node, the event should be filter out.
  30      * @param {Node} node The accent key node which receives event.
  31      * @param {event} event A pointer move event.
  32      * @return {boolean} True if event is externla to node.
  33      */
  34     function isRelevantEvent(node, event) {
  35       return !(node.compareDocumentPosition(event.relatedTarget)
  36           & Node.DOCUMENT_POSITION_CONTAINED_BY);
  37     };
  38     Polymer('kb-altkey', {
  39       over: function(event) {
  40         if (isRelevantEvent(this, event)) {
  41           // Dragging over an accent key is equivalent to pressing on the accent
  42           // key.
  43           this.fire('key-down', {});
  44         }
  45       },
  46       out: function(event) {
  47         if (isRelevantEvent(this, event)) {
  48           this.classList.remove('active');
  49         }
  50       },
  51       up: function(event) {
  52         var detail = {
  53             char: this.char || this.textContent
  54         };
  55         this.fire('key-up', detail);
  56       },
  57       // TODO(bshe): kb-altkey should extend from kb-key-base.
  58       autoRelease: function() {
  59       }
  60     });
  61   </script>
  62 </polymer-element>