Home | History | Annotate | Download | only in elements 
      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 });
    105