ui/keyboard/resources/elements/kb-keyset.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 Polymer('kb-keyset', {
   6   align: "center",
   7   // Propagate flick gestures to keys in this keyset.
   8   flick: true,
   9   isDefault: false,
  10   nextKeyset: undefined,
  11   // Weight offsets for positioning the keyset.
  12   weightBottom: 15,
  13   weightLeft: 10,
  14   weightRight: 10,
  15   weightTop: 6,
  16
  17   /**
  18    * Weight assigned to space between keys, of the form "xPitch yPitch".
  19    * Defaults to xPitch = yPitch if it's only a single number.
  20    * @type {string}
  21    */
  22   pitch: "10",
  23
  24   /**
  25    * Expands kb-key-sequences into individual keys.
  26    */
  27   flattenKeyset: function() {
  28     var keySequences = this.querySelectorAll('kb-key-sequence');
  29     if (keySequences.length != 0) {
  30       keySequences.array().forEach(function(element) {
  31         var generatedDom = element.generateDom();
  32         element.parentNode.replaceChild(generatedDom, element);
  33       });
  34     }
  35   },
  36
  37   // TODO(bshe): support select keyset on down, long and dbl events.
  38   keyUp: function(event, detail) {
  39     switch (detail.char) {
  40       case 'Shift':
  41       case 'Alt':
  42       case 'Ctrl':
  43       case 'Invalid':
  44         return;
  45       default:
  46         break;
  47     }
  48     if (!detail.toKeyset)
  49       detail.toKeyset = this.nextKeyset;
  50   },
  51   keyLongpress: function(event, detail) {
  52     if (!detail.char)
  53       return;
  54
  55     var altkeyContainer = this.$.altkeyContainer.getDistributedNodes()[0];
  56     if (!altkeyContainer)
  57       return;
  58
  59     var altkeyMetadata = this.$.altkeyMetadata;
  60     var altkeys = altkeyMetadata.getAltkeys(detail.char,
  61                                             !!detail.hintText);
  62     if (!altkeys)
  63       return;
  64
  65     var id = altkeys.id;
  66     var activeAltKeySet = altkeyContainer.querySelector('#' + id);
  67     if (!activeAltKeySet) {
  68       var keyWidth = event.target.clientWidth;
  69       var leftMargin = event.target.offsetLeft;
  70       var maxLeftOffset = Math.round(leftMargin / keyWidth);
  71       var rightMargin = this.clientWidth - leftMargin - keyWidth;
  72       var maxRightOffset = Math.round(rightMargin / keyWidth);
  73       activeAltKeySet = altkeyMetadata.createAltkeySet(detail.char,
  74                                                        maxLeftOffset,
  75                                                        maxRightOffset,
  76                                                        detail.hintText);
  77       altkeyContainer.appendChild(activeAltKeySet);
  78     }
  79
  80     altkeyContainer.keyset = id;
  81     event.target.dropKey();
  82     activeAltKeySet.style.width = event.target.clientWidth *
  83         activeAltKeySet.childElementCount + 'px';
  84     activeAltKeySet.style.height = event.target.clientHeight + 'px';
  85     activeAltKeySet.style.top = event.target.offsetTop + 'px';
  86     var leftOffset = activeAltKeySet.offset * event.target.clientWidth;
  87     activeAltKeySet.style.left = event.target.offsetLeft - leftOffset +
  88         'px';
  89     var nodes = activeAltKeySet.childNodes;
  90     nodes[activeAltKeySet.offset].classList.add('active');
  91     altkeyContainer.hidden = false;
  92   },
  93
  94   show: function() {
  95     var old = $('keyboard').querySelector('.activeKeyset');
  96     if (old && old != this)
  97       old.classList.remove('activeKeyset');
  98     this.classList.add('activeKeyset');
  99     this.fire('stateChange', {
 100       state: 'keysetChanged',
 101       value: this.id
 102     });
 103   },
 104 });