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 |
]; |