paper-calculator-key.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="paper-calculator-key">

  <style include="iron-flex iron-flex-alignment"></style>
  <style>

    :host {
      display: block;
      position: relative;
    }

    #keyLabel, .ink-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    #keyLabel {
      pointer-events: none;
    }


    #ink {
      --paper-button-ink-color: rgb(241, 250, 65);
      text-transform: none;
      pointer-events: none;
      min-width: 100%;
      width: 100%;
      height: 100%;
    }

    .small {
      font-size: smaller;
    }

  </style>
  <template>
    <div id="keyLabel" class="horizontal center-justified center layout">
      <paper-button id="ink">{{label}}</paper-button>
    </div>
  </template>

  <script>
    Polymer({

      is:"paper-calculator-key",

      properties:{
        label:{
          type:String,
          notify: true,
          reflectToAttribute: true,
          observer: "labelChanged"
        }
      },
      listeners: {
        down: 'downAction',
        up: 'upAction'
      },
      labelChanged: function () {
        Polymer.dom(this.$.ink).classList.toggle('small', this.label === 'DEL' || this.label === 'Clear');
      },

      downAction: function (e) {
        this.$.ink.getRipple().downAction(e);
      },
      upAction: function () {
        this.$.ink.getRipple().upAction();
      },

      //toFix! key has to be changed!
      cancelKey: function (e) {
        e.preventTap();
        this.resetInk();
      },
      //

      resetInk: function () {
        this.$.ink.getRipple().cancel();
      }

    });

  </script>

</dom-module>