Import Polymer 0.8 and several key elements.

third_party/polymer/v0_8/components/iron-behaviors/iron-button-state.html

+<!--
+Copyright (c) 2015 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="iron-control-state.html">
+
+<script>
+
+  Polymer.IronButtonState = {
+
+    properties: {
+
+      /**
+       * If true, the user is currently holding down the button.
+       *
+       * @attribute pressed
+       * @type boolean
+       * @default false
+       */
+      pressed: {
+        type: Boolean,
+        readOnly: true,
+        reflectToAttribute: true,
+        observer: '_pressedChanged'
+      },
+
+      /**
+       * If true, the button toggles the active state with each tap or press
+       * of the spacebar.
+       *
+       * @attribute toggles
+       * @type boolean
+       * @default false
+       */
+      toggles: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+
+      /**
+       * If true, the button is a toggle and is currently in the active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: {
+        type: Boolean,
+        notify: true,
+        reflectToAttribute: true,
+        observer: '_activeChanged'
+      }
+
+    },
+
+    listeners: {
+      mousedown: '_downHandler',
+      mouseup: '_upHandler',
+      keydown: '_keyDownHandler',
+      keyup: '_keyUpHandler',
+      tap: '_tapHandler'
+    },
+
+    _tapHandler: function() {
+      if (this.toggles) {
+       // a tap is needed to toggle the active state
+        this._userActivate(!this.active);
+      } else {
+        this.active = false;
+      }
+    },
+
+    // to emulate native checkbox, (de-)activations from a user interaction fire
+    // 'change' events
+    _userActivate: function(active) {
+      this.active = active;
+      this.fire('change');
+    },
+
+    _downHandler: function() {
+      this._setPressed(true);
+    },
+
+    _upHandler: function(e) {
+      this._setPressed(false);
+    },
+
+    _keyDownHandler: function(e) {
+      switch(e.keyCode) {
+        case this.keyCodes.ENTER_KEY:
+          this._asyncClick();
+          break;
+
+        case this.keyCodes.SPACE:
+          this._setPressed(true);
+          break;
+
+      }
+    },
+
+    _keyUpHandler: function(e) {
+     if (e.keyCode == this.keyCodes.SPACE) {
+        if (this.pressed) {
+          this._asyncClick();
+        }
+        this._setPressed(false);
+      }
+    },
+
+    // trigger click asynchronously, the asynchrony is useful to allow one
+    // event handler to unwind before triggering another event
+    _asyncClick: function() {
+      this.async(function() {
+        this.click();
+      }, 1);
+    },
+
+    // any of these changes are considered a change to button state
+
+    _pressedChanged: function(pressed) {
+      this._changedButtonState();
+    },
+
+    _activeChanged: function(active) {
+      this.setAttribute('aria-pressed', active ? 'true' : 'false');
+      this._changedButtonState();
+    },
+
+    _controlStateChanged: function() {
+      if (this.disabled) {
+        this._setPressed(false);
+        this.active = false;
+      } else {
+        this._changedButtonState();
+      }
+    },
+
+    // provide hook for follow-on behaviors to react to button-state
+
+    _changedButtonState: function() {
+      if (this._buttonStateChanged) {
+        this._buttonStateChanged(); // abstract
+      }
+    }
+
+  };
+
+</script>