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

<!--
  -- Copyright (c) 2013 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<polymer-element name="kb-keyset" attributes="nextKeyset isDefault"
    on-key-up="keyUp" on-key-longpress="keyLongpress">
  <template>
    <style>
      @host {
        * {
          -webkit-box-orient: vertical;
          -webkit-box-flex: 1;
          display: -webkit-box;
        }
      }
    </style>
    <content select="kb-row"></content>
    <content select="kb-accent-container" id="accentContainer"
        touch-action="none"></content>
  </template>
  <script>
    Polymer('kb-keyset', {
      isDefault: false,
      nextKeyset: undefined,
      // TODO(bshe): support select keyset on down, long and dbl events.
      keyUp: function(event, detail) {
        if (!detail.toKeyset)
          detail.toKeyset = this.nextKeyset;
      },
      keyLongpress: function(event, detail) {
        if (detail.accents) {
          var accentContainer = this.$.accentContainer.getDistributedNodes()[0];
          var activeAccentKeySet = accentContainer.querySelector('#' +
              detail.accents);
          if (!activeAccentKeySet)
            return;
          accentContainer.keyset = detail.accents;
          event.target.classList.remove('active');
          activeAccentKeySet.style.width = event.target.clientWidth *
              activeAccentKeySet.childElementCount + 'px';
          activeAccentKeySet.style.height = event.target.clientHeight + 'px';
          activeAccentKeySet.style.top = event.target.offsetTop + 'px';
          var leftOffset = activeAccentKeySet.offset * event.target.clientWidth;
          activeAccentKeySet.style.left = event.target.offsetLeft - leftOffset +
              'px';
          accentContainer.hidden = false;
        }
      }
    });
  </script>
</polymer-element>