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

third_party/polymer/v0_8/components-chromium/paper-ripple/paper-ripple-extracted.js

 
   (function() {
     var Utility = {
       cssColorWithAlpha: function(cssColor, alpha) {
         var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 
         if (typeof alpha == 'undefined') {
           alpha = 1;
         }
 
@@ skipping 65 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();
         }
       }
     });
   })();