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