Home | History | Annotate | Download | only in elements 
      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         -webkit-box-flex: 1;
     13         background-position: center center;
     14         background-repeat: no-repeat;
     15         background-size: contain;
     16         border-left: 1px solid rgba(0, 0, 0, 0.15);
     17         border-top: 2px solid #4b4b4e;
     18         display: -webkit-box;
     19         position: relative;
     20       }
     21 
     22       :host.active {
     23         background-color: #848490;
     24         border-top: 1px solid #848490;
     25       }
     26 
     27       :host:first-child {
     28         border-top-left-radius: 2px;
     29         border-bottom-left-radius: 2px;
     30       }
     31 
     32       :host:last-child {
     33         border-top-right-radius: 2px;
     34         border-bottom-right-radius: 2px;
     35       }
     36 
     37       ::part(key) {
     38         bottom: 0;
     39         color: #ffffff;
     40         font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
     41         font-weight: 100;
     42         height: 1.2em;
     43         left: 0;
     44         margin: auto;
     45         position: absolute;
     46         right: 0;
     47         top: 0;
     48         text-align: center;
     49       }
     50     </style>
     51     <div part="key">
     52       <content></content>
     53     </div>
     54   </template>
     55   <script>
     56     /**
     57      * Filter out mouse/touch movements internal to this node. When moving
     58      * inside a node, the event should be filter out.
     59      * @param {Node} node The accent key node which receives event.
     60      * @param {event} event A pointer move event.
     61      * @return {boolean} True if event is external to node.
     62      */
     63     function isRelevantEvent(node, event) {
     64       return !(node.compareDocumentPosition(event.relatedTarget)
     65           & Node.DOCUMENT_POSITION_CONTAINED_BY);
     66     };
     67     Polymer('kb-altkey', {
     68       over: function(event) {
     69         if (isRelevantEvent(this, event)) {
     70           // Dragging over an accent key is equivalent to pressing on the accent
     71           // key.
     72           this.fire('key-down', {});
     73         }
     74       },
     75 
     76       out: function(event) {
     77         if (isRelevantEvent(this, event)) {
     78           this.classList.remove('active');
     79         }
     80       },
     81 
     82       up: function(event) {
     83         var detail = {
     84             char: this.charValue
     85         };
     86         this.fire('key-up', detail);
     87       },
     88 
     89       // TODO(bshe): kb-altkey should extend from kb-key-base.
     90       autoRelease: function() {
     91       },
     92 
     93       /**
     94        * Character value associated with the key. Typically, the value is a
     95        * single character, but may be multi-character in cases like a ".com"
     96        * button.
     97        * @return {string}
     98        */
     99       get charValue() {
    100         return this.char || this.textContent;
    101       }
    102     });
    103   </script>
    104 </polymer-element>
    105