Index: third_party/polymer/components/paper-ripple/paper-ripple.html |
diff --git a/third_party/polymer/components/paper-ripple/paper-ripple.html b/third_party/polymer/components/paper-ripple/paper-ripple.html |
index d7652211958473cb9e4208ddd86062e3f6576dd2..c0d74e6e916cd6b87314333f9a1512d608156105 100644 |
--- a/third_party/polymer/components/paper-ripple/paper-ripple.html |
+++ b/third_party/polymer/components/paper-ripple/paper-ripple.html |
@@ -1,4 +1,5 @@ |
<!-- |
+@license |
Copyright (c) 2014 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 |
@@ -37,7 +38,7 @@ Example: |
<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
... |
downAction: function(e) { |
- this.$.ripple.downAction({x: e.x, y: e.y}); |
+ this.$.ripple.downAction({detail: {x: e.x, y: e.y}}); |
}, |
upAction: function(e) { |
this.$.ripple.upAction(); |
@@ -75,15 +76,6 @@ Apply `circle` class to make the rippling effect within a circle. |
<dom-module id="paper-ripple"> |
- <!-- |
- Fired when the animation finishes. This is useful if you want to wait until the ripple |
- animation finishes to perform some action. |
- |
- @event transitionend |
- @param {Object} detail |
- @param {Object} detail.node The animated node |
- --> |
- |
<template> |
<style> |
:host { |
@@ -559,16 +551,7 @@ Apply `circle` class to make the rippling effect within a circle. |
}, |
get target () { |
- var ownerRoot = Polymer.dom(this).getOwnerRoot(); |
- var target; |
- |
- if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE |
- target = ownerRoot.host; |
- } else { |
- target = this.parentNode; |
- } |
- |
- return target; |
+ return this.keyEventTarget; |
}, |
keyBindings: { |
@@ -581,14 +564,20 @@ Apply `circle` class to make the rippling effect within a circle. |
// Set up a11yKeysBehavior to listen to key events on the target, |
// so that space and enter activate the ripple even if the target doesn't |
// handle key events. The key handlers deal with `noink` themselves. |
- this.keyEventTarget = this.target; |
- this.listen(this.target, 'up', 'uiUpAction'); |
- this.listen(this.target, 'down', 'uiDownAction'); |
+ if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE |
+ this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host; |
+ } else { |
+ this.keyEventTarget = this.parentNode; |
+ } |
+ var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget); |
+ this.listen(keyEventTarget, 'up', 'uiUpAction'); |
+ this.listen(keyEventTarget, 'down', 'uiDownAction'); |
}, |
detached: function() { |
- this.unlisten(this.target, 'up', 'uiUpAction'); |
- this.unlisten(this.target, 'down', 'uiDownAction'); |
+ this.unlisten(this.keyEventTarget, 'up', 'uiUpAction'); |
+ this.unlisten(this.keyEventTarget, 'down', 'uiDownAction'); |
+ this.keyEventTarget = null; |
}, |
get shouldKeepAnimating () { |
@@ -636,6 +625,7 @@ Apply `circle` class to make the rippling effect within a circle. |
ripple.downAction(event); |
if (!this._animating) { |
+ this._animating = true; |
this.animate(); |
} |
}, |
@@ -665,6 +655,7 @@ Apply `circle` class to make the rippling effect within a circle. |
ripple.upAction(event); |
}); |
+ this._animating = true; |
this.animate(); |
}, |
@@ -703,11 +694,12 @@ Apply `circle` class to make the rippling effect within a circle. |
}, |
animate: function() { |
+ if (!this._animating) { |
+ return; |
+ } |
var index; |
var ripple; |
- this._animating = true; |
- |
for (index = 0; index < this.ripples.length; ++index) { |
ripple = this.ripples[index]; |
@@ -752,6 +744,15 @@ Apply `circle` class to make the rippling effect within a circle. |
this.upAction(); |
} |
} |
+ |
+ /** |
+ Fired when the animation finishes. |
+ This is useful if you want to wait until |
+ the ripple animation finishes to perform some action. |
+ |
+ @event transitionend |
+ @param {{node: Object}} detail Contains the animated node. |
+ */ |
}); |
})(); |
</script> |