| Index: lib/src/paper-behaviors/paper-button-behavior.html
|
| diff --git a/lib/src/paper-behaviors/paper-button-behavior.html b/lib/src/paper-behaviors/paper-button-behavior.html
|
| index 10ce9408fd3f17e7d8cce4cfb32ea309929640f8..bbb64038bb32d15a2ff3f22a92a7f00de7e2d821 100644
|
| --- a/lib/src/paper-behaviors/paper-button-behavior.html
|
| +++ b/lib/src/paper-behaviors/paper-button-behavior.html
|
| @@ -10,6 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
|
| <link rel="import" href="../polymer/polymer.html">
|
| <link rel="import" href="../iron-behaviors/iron-button-state.html">
|
| +<link rel="import" href="paper-ripple-behavior.html">
|
|
|
| <script>
|
|
|
| @@ -18,19 +19,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
|
| properties: {
|
|
|
| - _elevation: {
|
| - type: Number
|
| + /**
|
| + * The z-depth of this element, from 0-5. Setting to 0 will remove the
|
| + * shadow, and each increasing number greater than 0 will be "deeper"
|
| + * than the last.
|
| + *
|
| + * @attribute elevation
|
| + * @type number
|
| + * @default 1
|
| + */
|
| + elevation: {
|
| + type: Number,
|
| + reflectToAttribute: true,
|
| + readOnly: true
|
| }
|
|
|
| },
|
|
|
| observers: [
|
| - '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)'
|
| + '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
|
| + '_computeKeyboardClass(receivedFocusFromKeyboard)'
|
| ],
|
|
|
| hostAttributes: {
|
| role: 'button',
|
| - tabindex: '0'
|
| + tabindex: '0',
|
| + animated: true
|
| },
|
|
|
| _calculateElevation: function() {
|
| @@ -42,14 +56,46 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| } else if (this.receivedFocusFromKeyboard) {
|
| e = 3;
|
| }
|
| - this._elevation = e;
|
| + this._setElevation(e);
|
| + },
|
| +
|
| + _computeKeyboardClass: function(receivedFocusFromKeyboard) {
|
| + this.classList.toggle('keyboard-focus', receivedFocusFromKeyboard);
|
| + },
|
| +
|
| + /**
|
| + * In addition to `IronButtonState` behavior, when space key goes down,
|
| + * create a ripple down effect.
|
| + *
|
| + * @param {!KeyboardEvent} event .
|
| + */
|
| + _spaceKeyDownHandler: function(event) {
|
| + Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
|
| + if (this.hasRipple()) {
|
| + this._ripple.uiDownAction();
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * In addition to `IronButtonState` behavior, when space key goes up,
|
| + * create a ripple up effect.
|
| + *
|
| + * @param {!KeyboardEvent} event .
|
| + */
|
| + _spaceKeyUpHandler: function(event) {
|
| + Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
|
| + if (this.hasRipple()) {
|
| + this._ripple.uiUpAction();
|
| + }
|
| }
|
| +
|
| };
|
|
|
| - /** @polymerBehavior Polymer.PaperButtonBehavior */
|
| + /** @polymerBehavior */
|
| Polymer.PaperButtonBehavior = [
|
| Polymer.IronButtonState,
|
| Polymer.IronControlState,
|
| + Polymer.PaperRippleBehavior,
|
| Polymer.PaperButtonBehaviorImpl
|
| ];
|
|
|
|
|