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-keyset" attributes="nextKeyset isDefault" 8 on-key-up="{{keyUp}}" on-key-longpress="{{keyLongpress}}"> 9 <template> 10 <style> 11 :host { 12 -webkit-box-flex: 1; 13 -webkit-box-orient: vertical; 14 display: -webkit-box; 15 } 16 </style> 17 <content select="kb-row"></content> 18 <content select="kb-altkey-container" id="altkeyContainer" 19 touch-action="none"></content> 20 <kb-altkey-data id="altkeyMetadata"></kb-altkey-data> 21 </template> 22 <script> 23 Polymer('kb-keyset', { 24 isDefault: false, 25 nextKeyset: undefined, 26 // TODO(bshe): support select keyset on down, long and dbl events. 27 keyUp: function(event, detail) { 28 switch (detail.char) { 29 case 'Shift': 30 case 'Alt': 31 case 'Ctrl': 32 return; 33 default: 34 break; 35 } 36 if (!detail.toKeyset) 37 detail.toKeyset = this.nextKeyset; 38 }, 39 keyLongpress: function(event, detail) { 40 if (!detail.char) 41 return; 42 43 var altkeyContainer = this.$.altkeyContainer.getDistributedNodes()[0]; 44 if (!altkeyContainer) 45 return; 46 47 var altkeyMetadata = this.$.altkeyMetadata; 48 var altkeys = altkeyMetadata.getAltkeys(detail.char, 49 !!detail.hintText); 50 if (!altkeys) 51 return; 52 53 var id = altkeys.id; 54 var activeAltKeySet = altkeyContainer.querySelector('#' + id); 55 if (!activeAltKeySet) { 56 var keyWidth = event.target.clientWidth; 57 var leftMargin = event.target.offsetLeft; 58 var maxLeftOffset = Math.round(leftMargin / keyWidth); 59 var rightMargin = this.clientWidth - leftMargin - keyWidth; 60 var maxRightOffset = Math.round(rightMargin / keyWidth); 61 activeAltKeySet = altkeyMetadata.createAltkeySet(detail.char, 62 maxLeftOffset, 63 maxRightOffset, 64 detail.hintText); 65 altkeyContainer.appendChild(activeAltKeySet); 66 } 67 68 altkeyContainer.keyset = id; 69 event.target.dropKey(); 70 activeAltKeySet.style.width = event.target.clientWidth * 71 activeAltKeySet.childElementCount + 'px'; 72 activeAltKeySet.style.height = event.target.clientHeight + 'px'; 73 activeAltKeySet.style.top = event.target.offsetTop + 'px'; 74 var leftOffset = activeAltKeySet.offset * event.target.clientWidth; 75 activeAltKeySet.style.left = event.target.offsetLeft - leftOffset + 76 'px'; 77 var nodes = activeAltKeySet.childNodes; 78 nodes[activeAltKeySet.offset].classList.add('active'); 79 altkeyContainer.hidden = false; 80 } 81 }); 82 </script> 83</polymer-element> 84