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