• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-behaviors/iron-button-state.html">
13<link rel="import" href="paper-ripple-behavior.html">
14
15<script>
16  /** @polymerBehavior Polymer.PaperButtonBehavior */
17  Polymer.PaperButtonBehaviorImpl = {
18    properties: {
19      /**
20       * The z-depth of this element, from 0-5. Setting to 0 will remove the
21       * shadow, and each increasing number greater than 0 will be "deeper"
22       * than the last.
23       *
24       * @attribute elevation
25       * @type number
26       * @default 1
27       */
28      elevation: {
29        type: Number,
30        reflectToAttribute: true,
31        readOnly: true
32      }
33    },
34
35    observers: [
36      '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
37      '_computeKeyboardClass(receivedFocusFromKeyboard)'
38    ],
39
40    hostAttributes: {
41      role: 'button',
42      tabindex: '0',
43      animated: true
44    },
45
46    _calculateElevation: function() {
47      var e = 1;
48      if (this.disabled) {
49        e = 0;
50      } else if (this.active || this.pressed) {
51        e = 4;
52      } else if (this.receivedFocusFromKeyboard) {
53        e = 3;
54      }
55      this._setElevation(e);
56    },
57
58    _computeKeyboardClass: function(receivedFocusFromKeyboard) {
59      this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
60    },
61
62    /**
63     * In addition to `IronButtonState` behavior, when space key goes down,
64     * create a ripple down effect.
65     *
66     * @param {!KeyboardEvent} event .
67     */
68    _spaceKeyDownHandler: function(event) {
69      Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
70      // Ensure that there is at most one ripple when the space key is held down.
71      if (this.hasRipple() && this.getRipple().ripples.length < 1) {
72        this._ripple.uiDownAction();
73      }
74    },
75
76    /**
77     * In addition to `IronButtonState` behavior, when space key goes up,
78     * create a ripple up effect.
79     *
80     * @param {!KeyboardEvent} event .
81     */
82    _spaceKeyUpHandler: function(event) {
83      Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
84      if (this.hasRipple()) {
85        this._ripple.uiUpAction();
86      }
87    }
88  };
89
90  /** @polymerBehavior */
91  Polymer.PaperButtonBehavior = [
92    Polymer.IronButtonState,
93    Polymer.IronControlState,
94    Polymer.PaperRippleBehavior,
95    Polymer.PaperButtonBehaviorImpl
96  ];
97</script>
98