Upgrade to 1.0 and switch clients to dom-repeat where needed.

third_party/polymer/v0_8/components/paper-ripple/paper-ripple.html

 <!--
 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
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+
 <!--
 `paper-ripple` provides a visual effect that other paper elements can
 use to simulate a rippling effect emanating from the point of contact.  The
 effect can be visualized as a concentric circle with motion.
 
 Example:
 
     <paper-ripple></paper-ripple>
 
 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
 effect when touches on it.  You can also defeat the default behavior and
 manually route the down and up actions to the ripple element.  Note that it is
-important if you call mousedownAction() you will have to make sure to call
-mouseupAction() so that `paper-ripple` would end the animation loop.
+important if you call downAction() you will have to make sure to call
+upAction() so that `paper-ripple` would end the animation loop.
 
 Example:
 
     <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
     ...
     downAction: function(e) {
-      this.$.ripple.mousedownAction({x: e.x, y: e.y});
+      this.$.ripple.downAction({x: e.x, y: e.y});
     },
     upAction: function(e) {
-      this.$.ripple.mouseupAction();
+      this.$.ripple.upAction();
     }
 
 Styling ripple effect:
 
   Use CSS color property to style the ripple:
 
     paper-ripple {
       color: #4285f4;
     }
 
   Note that CSS color property is inherited so it is not required to set it on
   the `paper-ripple` element directly.
 
 By default, the ripple is centered on the point of contact.  Apply the `recenters`
 attribute to have the ripple grow toward the center of its container.
 
     <paper-ripple recenters></paper-ripple>
 
+You can also  center the ripple inside its container from the start.
+
+    <paper-ripple center></paper-ripple>
+
 Apply `circle` class to make the rippling effect within a circle.
 
     <paper-ripple class="circle"></paper-ripple>
 
 @group Paper Elements
 @element paper-ripple
-@homepage github.io
+@hero hero.svg
+@demo demo/index.html
 -->
 
-<!--
-Fired when the animation finishes. This is useful if you want to wait until the ripple
-animation finishes to perform some action.
+<dom-module id="paper-ripple">
 
-@event transitionend
-@param {Object} detail
-@param {Object} detail.node The animated node
--->
+  <!--
+  Fired when the animation finishes. This is useful if you want to wait until the ripple
+  animation finishes to perform some action.
 
-<link rel="import" href="../polymer/polymer.html">
+  @event transitionend
+  @param {Object} detail
+  @param {Object} detail.node The animated node
+  -->
 
-<dom-module id="paper-ripple">
   <style>
     :host {
       display: block;
       position: absolute;
       border-radius: inherit;
       overflow: hidden;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
+    }
 
-      /* This resolves a rendering issue in Chrome 40 where the
+    :host([animating]) {
+      /* This resolves a rendering issue in Chrome (as of 40) where the
          ripple is not properly clipped by its parent (which may have
-         rounded corners. See: http://jsbin.com/temexa/4 */
+         rounded corners). See: http://jsbin.com/temexa/4
+
+         Note: We only apply this style conditionally. Otherwise, the browser
+         will create a new compositing layer for every ripple element on the
+         page, and that would be bad. */
       -webkit-transform: translate(0, 0);
       transform: translate3d(0, 0, 0);
     }
 
     :host([noink]) {
       pointer-events: none;
     }
 
     #background,
     #waves,
@@ skipping 115 matching lines @@
       this.resetInteractionState();
     }
 
     Ripple.MAX_RADIUS = 300;
 
     Ripple.prototype = {
       get recenters() {
         return this.element.recenters;
       },
 
+      get center() {
+        return this.element.center;
+      },
+
       get mouseDownElapsed() {
         var elapsed;
 
         if (!this.mouseDownStart) {
           return 0;
         }
 
         elapsed = Utility.now() - this.mouseDownStart;
 
         if (this.mouseUpStart) {
@@ skipping 136 matching lines @@
 
 
         // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
         // https://bugs.webkit.org/show_bug.cgi?id=98538
         this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
         this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
         this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
         this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
       },
 
-      mousedownAction: function(event) {
+      downAction: function(event) {
+        var xCenter = this.containerMetrics.width / 2;
+        var yCenter = this.containerMetrics.height / 2;
+
         this.resetInteractionState();
         this.mouseDownStart = Utility.now();
 
-        this.xStart = event ?
-          event.x - this.containerMetrics.boundingRect.left :
-          this.containerMetrics.width / 2;
-        this.yStart = event ?
-          event.y - this.containerMetrics.boundingRect.top :
-          this.containerMetrics.height / 2;
-
-        if (this.recenters) {
-          this.xEnd = this.containerMetrics.width / 2;
-          this.yEnd = this.containerMetrics.height / 2;
+        if (this.center) {
+          this.xStart = xCenter;
+          this.yStart = yCenter;
           this.slideDistance = Utility.distance(
             this.xStart, this.yStart, this.xEnd, this.yEnd
           );
+        } else {
+          this.xStart = event ?
+              event.detail.x - this.containerMetrics.boundingRect.left :
+              this.containerMetrics.width / 2;
+          this.yStart = event ?
+              event.detail.y - this.containerMetrics.boundingRect.top :
+              this.containerMetrics.height / 2;
+        }
+
+        if (this.recenters) {
+          this.xEnd = xCenter;
+          this.yEnd = yCenter;
+          this.slideDistance = Utility.distance(
+            this.xStart, this.yStart, this.xEnd, this.yEnd
+          );
         }
 
         this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
           this.xStart,
           this.yStart
         );
 
         this.waveContainer.style.top =
           (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
         this.waveContainer.style.left =
           (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
 
         this.waveContainer.style.width = this.containerMetrics.size + 'px';
         this.waveContainer.style.height = this.containerMetrics.size + 'px';
       },
 
-      mouseupAction: function(event) {
+      upAction: function(event) {
         if (!this.isMouseDown) {
           return;
         }
 
         this.mouseUpStart = Utility.now();
       },
 
       remove: function() {
         Polymer.dom(this.waveContainer.parentNode).removeChild(
           this.waveContainer
         );
       }
     };
 
     Polymer({
       is: 'paper-ripple',
 
+      behaviors: [
+        Polymer.IronA11yKeysBehavior
+      ],
+
       properties: {
         /**
          * The initial opacity set on the wave.
          *
          * @attribute initialOpacity
          * @type number
          * @default 0.25
          */
         initialOpacity: {
           type: Number,
@@ skipping 19 matching lines @@
          * @attribute recenters
          * @type boolean
          * @default false
          */
         recenters: {
           type: Boolean,
           value: false
         },
 
         /**
+         * If true, ripples will center inside its container
+         *
+         * @attribute recenters
+         * @type boolean
+         * @default false
+         */
+        center: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
          * A list of the visual ripples.
          *
          * @attribute ripples
          * @type Array
          * @default []
          */
         ripples: {
           type: Array,
           value: function() {
             return [];
           }
         },
 
+        /**
+         * True when there are visible ripples animating within the
+         * element.
+         */
+        animating: {
+          type: Boolean,
+          readOnly: true,
+          reflectToAttribute: true,
+          value: false
+        },
+
+        /**
+         * If true, the ripple will remain in the "down" state until `holdDown`
+         * is set to false again.
+         */
+        holdDown: {
+          type: Boolean,
+          value: false,
+          observer: '_holdDownChanged'
+        },
+
         _animating: {
           type: Boolean
         },
 
         _boundAnimate: {
           type: Function,
           value: function() {
             return this.animate.bind(this);
           }
-        },
-
-        _boundMousedownAction: {
-          type: Function,
-          value: function() {
-            return this.mousedownAction.bind(this);
-          }
-        },
-
-        _boundMouseupAction: {
-          type: Function,
-          value: function() {
-            return this.mouseupAction.bind(this);
-          }
         }
       },
 
       get target () {
-        return this.host || this.parentNode;
+        var ownerRoot = Polymer.dom(this).getOwnerRoot();
+        var target;
+
+        if (ownerRoot) {
+          target = ownerRoot.host;
+        }
+
+        if (!target) {
+          target = this.parentNode;
+        }
+
+        return target;
+      },
+
+      keyBindings: {
+        'enter:keydown': '_onEnterKeydown',
+        'space:keydown': '_onSpaceKeydown',
+        'space:keyup': '_onSpaceKeyup'
       },
 
       attached: function() {
-        this.target.addEventListener('mousedown', this._boundMousedownAction);
-        this.target.addEventListener('mouseup', this._boundMouseupAction);
+        this._listen(this.target, 'up', this.upAction.bind(this));
+        this._listen(this.target, 'down', this.downAction.bind(this));
+
+        if (!this.target.hasAttribute('noink')) {
+          this.keyEventTarget = this.target;
+        }
       },
 
-      detached: function() {
-        this.target.removeEventListener('mousedown', this._boundMousedownAction);
-        this.target.removeEventListener('mouseup', this._boundMouseupAction);
-      },
-
-      /* TODO(cdata): Replace the above attached / detached listeners when
-         PolymerGestures equivalent lands in 0.8.
-      listeners: {
-        mousedown: 'mousedownAction',
-        mouseup: 'mouseupAction'
-      },
-      */
-
       get shouldKeepAnimating () {
         for (var index = 0; index < this.ripples.length; ++index) {
           if (!this.ripples[index].isAnimationComplete) {
             return true;
           }
         }
 
         return false;
       },
 
       simulatedRipple: function() {
-        this.mousedownAction(null);
+        this.downAction(null);
 
         // Please see polymer/polymer#1305
         this.async(function() {
-          this.mouseupAction();
+          this.upAction();
         }, 1);
       },
 
-      mousedownAction: function(event) {
+      downAction: function(event) {
+        if (this.holdDown && this.ripples.length > 0) {
+          return;
+        }
+
         var ripple = this.addRipple();
 
-        ripple.mousedownAction(event);
+        ripple.downAction(event);
 
         if (!this._animating) {
           this.animate();
         }
       },
 
-      mouseupAction: function(event) {
+      upAction: function(event) {
+        if (this.holdDown) {
+          return;
+        }
+
         this.ripples.forEach(function(ripple) {
-          ripple.mouseupAction(event);
+          ripple.upAction(event);
         });
 
         this.animate();
       },
 
       onAnimationComplete: function() {
         this._animating = false;
         this.$.background.style.backgroundColor = null;
         this.fire('transitionend');
       },
 
       addRipple: function() {
         var ripple = new Ripple(this);
 
         Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
         this.$.background.style.backgroundColor = ripple.color;
         this.ripples.push(ripple);
 
+        this._setAnimating(true);
+
         return ripple;
       },
 
       removeRipple: function(ripple) {
         var rippleIndex = this.ripples.indexOf(ripple);
 
         if (rippleIndex < 0) {
           return;
         }
 
         this.ripples.splice(rippleIndex, 1);
 
         ripple.remove();
+
+        if (!this.ripples.length) {
+          this._setAnimating(false);
+        }
       },
 
       animate: function() {
         var index;
         var ripple;
 
         this._animating = true;
 
         for (index = 0; index < this.ripples.length; ++index) {
           ripple = this.ripples[index];
 
           ripple.draw();
 
           this.$.background.style.opacity = ripple.outerOpacity;
 
           if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
             this.removeRipple(ripple);
           }
         }
 
-        if (this.shouldKeepAnimating) {
+        if (!this.shouldKeepAnimating && this.ripples.length === 0) {
+          this.onAnimationComplete();
+        } else {
           window.requestAnimationFrame(this._boundAnimate);
-        } else if (this.ripples.length === 0) {
-          this.onAnimationComplete();
+        }
+      },
+
+      _onEnterKeydown: function() {
+        this.downAction();
+        this.async(this.upAction, 1);
+      },
+
+      _onSpaceKeydown: function() {
+        this.downAction();
+      },
+
+      _onSpaceKeyup: function() {
+        this.upAction();
+      },
+
+      _holdDownChanged: function(holdDown) {
+        if (holdDown) {
+          this.downAction();
+        } else {
+          this.upAction();
         }
       }
     });
   })();
 </script>