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