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

<!--
  -- Copyright 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-altkey" attributes="char" on-pointerover="{{over}}"
    on-pointerout="{{out}}" on-pointerup="{{up}}">
  <template>
    <style>
      :host {
        -webkit-box-flex: 1;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        border-left: 1px solid rgba(0, 0, 0, 0.15);
        border-top: 2px solid #4b4b4e;
        display: -webkit-box;
        position: relative;
      }

      :host.active {
        background-color: #848490;
        border-top: 1px solid #848490;
      }

      :host:first-child {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      :host:last-child {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      ::part(key) {
        bottom: 0;
        color: #ffffff;
        font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
        font-weight: 100;
        height: 1.2em;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
      }
    </style>
    <div part="key">
      <content></content>
    </div>
  </template>
  <script>
    /**
     * Filter out mouse/touch movements internal to this node. When moving
     * inside a node, the event should be filter out.
     * @param {Node} node The accent key node which receives event.
     * @param {event} event A pointer move event.
     * @return {boolean} True if event is external to node.
     */
    function isRelevantEvent(node, event) {
      return !(node.compareDocumentPosition(event.relatedTarget)
          & Node.DOCUMENT_POSITION_CONTAINED_BY);
    };
    Polymer('kb-altkey', {
      over: function(event) {
        if (isRelevantEvent(this, event)) {
          // Dragging over an accent key is equivalent to pressing on the accent
          // key.
          this.fire('key-down', {});
        }
      },

      out: function(event) {
        if (isRelevantEvent(this, event)) {
          this.classList.remove('active');
        }
      },

      up: function(event) {
        var detail = {
            char: this.charValue
        };
        this.fire('key-up', detail);
      },

      // TODO(bshe): kb-altkey should extend from kb-key-base.
      autoRelease: function() {
      },

      /**
       * Character value associated with the key. Typically, the value is a
       * single character, but may be multi-character in cases like a ".com"
       * button.
       * @return {string}
       */
      get charValue() {
        return this.char || this.textContent;
      }
    });
  </script>
</polymer-element>