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 }); 58 </script> 59 </polymer-element> 60
