src/ui/keyboard/resources/elements/kb-keyset.html

   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"
   8     attributes="align isDefault nextKeyset pitch weightRight
   9         weightTop weightBottom"
  10     on-key-up="{{keyUp}}" on-key-longpress="{{keyLongpress}}">
  11   <template>
  12     <style>
  13       :host {
  14       }
  15       :host:not(.activeKeyset) {
  16         display: none;
  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       align: "center",
  27       isDefault: false,
  28       nextKeyset: undefined,
  29       // Weight offsets for positioning the keyset.
  30       weightBottom: 15,
  31       weightLeft: 10,
  32       weightRight: 10,
  33       weightTop: 15,
  34
  35       /**
  36        * Weight assigned to space between keys, of the form "xPitch yPitch".
  37        * Defaults to xPitch = yPitch if it's only a single number.
  38        * @type {string}
  39        */
  40       pitch: "10",
  41
  42       // TODO(bshe): support select keyset on down, long and dbl events.
  43       keyUp: function(event, detail) {
  44         switch (detail.char) {
  45           case 'Shift':
  46           case 'Alt':
  47           case 'Ctrl':
  48           case 'Invalid':
  49             return;
  50           default:
  51             break;
  52         }
  53         if (!detail.toKeyset)
  54           detail.toKeyset = this.nextKeyset;
  55       },
  56       keyLongpress: function(event, detail) {
  57         if (!detail.char)
  58           return;
  59
  60         var altkeyContainer = this.$.altkeyContainer.getDistributedNodes()[0];
  61         if (!altkeyContainer)
  62           return;
  63
  64         var altkeyMetadata = this.$.altkeyMetadata;
  65         var altkeys = altkeyMetadata.getAltkeys(detail.char,
  66                                                 !!detail.hintText);
  67         if (!altkeys)
  68           return;
  69
  70         var id = altkeys.id;
  71         var activeAltKeySet = altkeyContainer.querySelector('#' + id);
  72         if (!activeAltKeySet) {
  73           var keyWidth = event.target.clientWidth;
  74           var leftMargin = event.target.offsetLeft;
  75           var maxLeftOffset = Math.round(leftMargin / keyWidth);
  76           var rightMargin = this.clientWidth - leftMargin - keyWidth;
  77           var maxRightOffset = Math.round(rightMargin / keyWidth);
  78           activeAltKeySet = altkeyMetadata.createAltkeySet(detail.char,
  79                                                            maxLeftOffset,
  80                                                            maxRightOffset,
  81                                                            detail.hintText);
  82           altkeyContainer.appendChild(activeAltKeySet);
  83         }
  84
  85         altkeyContainer.keyset = id;
  86         event.target.dropKey();
  87         activeAltKeySet.style.width = event.target.clientWidth *
  88             activeAltKeySet.childElementCount + 'px';
  89         activeAltKeySet.style.height = event.target.clientHeight + 'px';
  90         activeAltKeySet.style.top = event.target.offsetTop + 'px';
  91         var leftOffset = activeAltKeySet.offset * event.target.clientWidth;
  92         activeAltKeySet.style.left = event.target.offsetLeft - leftOffset +
  93             'px';
  94         var nodes = activeAltKeySet.childNodes;
  95         nodes[activeAltKeySet.offset].classList.add('active');
  96         altkeyContainer.hidden = false;
  97       },
  98
  99       show: function() {
 100         var old = $('keyboard').querySelector('.activeKeyset');
 101         if (old && old != this)
 102           old.classList.remove('activeKeyset');
 103         this.classList.add('activeKeyset');
 104         this.fire('stateChange', {
 105           state: 'keysetChanged',
 106           value: this.id
 107         });
 108       },
 109
 110       enteredView: function() {
 111         var self = this;
 112         Platform.endOfMicrotask(function(){
 113           self.fire('realign');
 114           if (self.isDefault)
 115             self.show();
 116         });
 117       }
 118     });
 119   </script>
 120 </polymer-element>