update components

dashboard-ui/bower_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,19 @@ 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;
+        }
+        this.listen(this.keyEventTarget, 'up', 'uiUpAction');
+        this.listen(this.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 +624,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 +654,7 @@ Apply `circle` class to make the rippling effect within a circle.
           ripple.upAction(event);
         });
 
+        this._animating = true;
         this.animate();
       },
 
@@ -703,11 +693,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 +743,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>