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