polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

data/app/assets/components/paper-ripple/paper-ripple.html

@@ -7,6 +7,9 @@ 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
@@ -16,11 +19,11 @@ Example:
 
     <paper-ripple></paper-ripple>
 
-`paper-ripple` listens to "down" and "up" events so it would display 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 downAction() you will have to make sure to call upAction()
-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:
 
@@ -44,10 +47,14 @@ Styling ripple effect:
   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 `recenteringTouch` 
-class to have the ripple grow toward the center of its container.
+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 class="recenteringTouch"></paper-ripple>
+    <paper-ripple center></paper-ripple>
 
 Apply `circle` class to make the rippling effect within a circle.
 
@@ -55,37 +62,53 @@ Apply `circle` class to make the rippling effect within a circle.
 
 @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.
-
-@event core-transitionend
-@param {Object} detail
-@param {Object} detail.node The animated node
--->
+<dom-module id="paper-ripple">
 
-<link rel="import" href="../polymer/polymer.html" >
+  <!--
+  Fired when the animation finishes. This is useful if you want to wait until the ripple
+  animation finishes to perform some action.
 
-<polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelocity">
-<template>
+  @event transitionend
+  @param {Object} detail
+  @param {Object} detail.node The animated node
+  -->
 
   <style>
-
     :host {
       display: block;
-      position: relative;
+      position: absolute;
       border-radius: inherit;
       overflow: hidden;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
     }
 
-    :host-context([noink]) {
+    :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
+
+         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;
     }
 
-    #bg, #waves, .wave-container, .wave {
+    #background,
+    #waves,
+    .wave-container,
+    .wave {
       pointer-events: none;
       position: absolute;
       top: 0;
@@ -94,19 +117,22 @@ animation finishes to perform some action.
       height: 100%;
     }
 
-    #bg, .wave {
+    #background,
+    .wave {
       opacity: 0;
     }
 
-    #waves, .wave {
+    #waves,
+    .wave {
       overflow: hidden;
     }
 
-    .wave-container, .wave {
+    .wave-container,
+    .wave {
       border-radius: 50%;
     }
 
-    :host(.circle) #bg,
+    :host(.circle) #background,
     :host(.circle) #waves {
       border-radius: 50%;
     }
@@ -116,362 +142,573 @@ animation finishes to perform some action.
     }
 
   </style>
-
-  <div id="bg"></div>
-  <div id="waves">
-  </div>
-
-</template>
+  <template>
+    <div id="background"></div>
+    <div id="waves"></div>
+  </template>
+</dom-module>
 <script>
-
   (function() {
+    var Utility = {
+      cssColorWithAlpha: function(cssColor, alpha) {
+        var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 
-    var waveMaxRadius = 150;
-    //
-    // INK EQUATIONS
-    //
-    function waveRadiusFn(touchDownMs, touchUpMs, anim) {
-      // Convert from ms to s
-      var touchDown = touchDownMs / 1000;
-      var touchUp = touchUpMs / 1000;
-      var totalElapsed = touchDown + touchUp;
-      var ww = anim.width, hh = anim.height;
-      // use diagonal size of container to avoid floating point math sadness
-      var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1.1 + 5;
-      var duration = 1.1 - .2 * (waveRadius / waveMaxRadius);
-      var tt = (totalElapsed / duration);
-
-      var size = waveRadius * (1 - Math.pow(80, -tt));
-      return Math.abs(size);
-    }
+        if (typeof alpha == 'undefined') {
+          alpha = 1;
+        }
 
-    function waveOpacityFn(td, tu, anim) {
-      // Convert from ms to s.
-      var touchDown = td / 1000;
-      var touchUp = tu / 1000;
-      var totalElapsed = touchDown + touchUp;
+        if (!parts) {
+          return 'rgba(255, 255, 255, ' + alpha + ')';
+        }
 
-      if (tu <= 0) {  // before touch up
-        return anim.initialOpacity;
-      }
-      return Math.max(0, anim.initialOpacity - touchUp * anim.opacityDecayVelocity);
-    }
+        return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')';
+      },
 
-    function waveOuterOpacityFn(td, tu, anim) {
-      // Convert from ms to s.
-      var touchDown = td / 1000;
-      var touchUp = tu / 1000;
+      distance: function(x1, y1, x2, y2) {
+        var xDelta = (x1 - x2);
+        var yDelta = (y1 - y2);
 
-      // Linear increase in background opacity, capped at the opacity
-      // of the wavefront (waveOpacity).
-      var outerOpacity = touchDown * 0.3;
-      var waveOpacity = waveOpacityFn(td, tu, anim);
-      return Math.max(0, Math.min(outerOpacity, waveOpacity));
-    }
+        return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
+      },
 
-    // Determines whether the wave should be completely removed.
-    function waveDidFinish(wave, radius, anim) {
-      var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp, anim);
+      now: (function() {
+        if (window.performance && window.performance.now) {
+          return window.performance.now.bind(window.performance);
+        }
 
-      // If the wave opacity is 0 and the radius exceeds the bounds
-      // of the element, then this is finished.
-      return waveOpacity < 0.01 && radius >= Math.min(wave.maxRadius, waveMaxRadius);
+        return Date.now;
+      })()
     };
 
-    function waveAtMaximum(wave, radius, anim) {
-      var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp, anim);
+    /**
+     * @param {HTMLElement} element
+     * @constructor
+     */
+    function ElementMetrics(element) {
+      this.element = element;
+      this.width = this.boundingRect.width;
+      this.height = this.boundingRect.height;
 
-      return waveOpacity >= anim.initialOpacity && radius >= Math.min(wave.maxRadius, waveMaxRadius);
+      this.size = Math.max(this.width, this.height);
     }
 
-    //
-    // DRAWING
-    //
-    function drawRipple(ctx, x, y, radius, innerAlpha, outerAlpha) {
-      // Only animate opacity and transform
-      if (outerAlpha !== undefined) {
-        ctx.bg.style.opacity = outerAlpha;
-      }
-      ctx.wave.style.opacity = innerAlpha;
+    ElementMetrics.prototype = {
+      get boundingRect () {
+        return this.element.getBoundingClientRect();
+      },
 
-      var s = radius / (ctx.containerSize / 2);
-      var dx = x - (ctx.containerWidth / 2);
-      var dy = y - (ctx.containerHeight / 2);
+      furthestCornerDistanceFrom: function(x, y) {
+        var topLeft = Utility.distance(x, y, 0, 0);
+        var topRight = Utility.distance(x, y, this.width, 0);
+        var bottomLeft = Utility.distance(x, y, 0, this.height);
+        var bottomRight = Utility.distance(x, y, this.width, this.height);
 
-      ctx.wc.style.webkitTransform = 'translate3d(' + dx + 'px,' + dy + 'px,0)';
-      ctx.wc.style.transform = 'translate3d(' + dx + 'px,' + dy + 'px,0)';
+        return Math.max(topLeft, topRight, bottomLeft, bottomRight);
+      }
+    };
 
-      // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
-      // https://bugs.webkit.org/show_bug.cgi?id=98538
-      ctx.wave.style.webkitTransform = 'scale(' + s + ',' + s + ')';
-      ctx.wave.style.transform = 'scale3d(' + s + ',' + s + ',1)';
+    /**
+     * @param {HTMLElement} element
+     * @constructor
+     */
+    function Ripple(element) {
+      this.element = element;
+      this.color = window.getComputedStyle(element).color;
+
+      this.wave = document.createElement('div');
+      this.waveContainer = document.createElement('div');
+      this.wave.style.backgroundColor = this.color;
+      this.wave.classList.add('wave');
+      this.waveContainer.classList.add('wave-container');
+      Polymer.dom(this.waveContainer).appendChild(this.wave);
+
+      this.resetInteractionState();
     }
 
-    //
-    // SETUP
-    //
-    function createWave(elem) {
-      var elementStyle = window.getComputedStyle(elem);
-      var fgColor = elementStyle.color;
-
-      var inner = document.createElement('div');
-      inner.style.backgroundColor = fgColor;
-      inner.classList.add('wave');
-
-      var outer = document.createElement('div');
-      outer.classList.add('wave-container');
-      outer.appendChild(inner);
-
-      var container = elem.$.waves;
-      container.appendChild(outer);
-
-      elem.$.bg.style.backgroundColor = fgColor;
-
-      var wave = {
-        bg: elem.$.bg,
-        wc: outer,
-        wave: inner,
-        waveColor: fgColor,
-        maxRadius: 0,
-        isMouseDown: false,
-        mouseDownStart: 0.0,
-        mouseUpStart: 0.0,
-        tDown: 0,
-        tUp: 0
-      };
-      return wave;
-    }
+    Ripple.MAX_RADIUS = 300;
 
-    function removeWaveFromScope(scope, wave) {
-      if (scope.waves) {
-        var pos = scope.waves.indexOf(wave);
-        scope.waves.splice(pos, 1);
-        // FIXME cache nodes
-        wave.wc.remove();
-      }
-    };
+    Ripple.prototype = {
+      get recenters() {
+        return this.element.recenters;
+      },
 
-    // Shortcuts.
-    var pow = Math.pow;
-    var now = Date.now;
-    if (window.performance && performance.now) {
-      now = performance.now.bind(performance);
-    }
+      get center() {
+        return this.element.center;
+      },
 
-    function cssColorWithAlpha(cssColor, alpha) {
-        var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-        if (typeof alpha == 'undefined') {
-            alpha = 1;
-        }
-        if (!parts) {
-          return 'rgba(255, 255, 255, ' + alpha + ')';
+      get mouseDownElapsed() {
+        var elapsed;
+
+        if (!this.mouseDownStart) {
+          return 0;
         }
-        return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')';
-    }
 
-    function dist(p1, p2) {
-      return Math.sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2));
-    }
+        elapsed = Utility.now() - this.mouseDownStart;
 
-    function distanceFromPointToFurthestCorner(point, size) {
-      var tl_d = dist(point, {x: 0, y: 0});
-      var tr_d = dist(point, {x: size.w, y: 0});
-      var bl_d = dist(point, {x: 0, y: size.h});
-      var br_d = dist(point, {x: size.w, y: size.h});
-      return Math.max(tl_d, tr_d, bl_d, br_d);
-    }
+        if (this.mouseUpStart) {
+          elapsed -= this.mouseUpElapsed;
+        }
 
-    Polymer('paper-ripple', {
+        return elapsed;
+      },
 
-      /**
-       * The initial opacity set on the wave.
-       *
-       * @attribute initialOpacity
-       * @type number
-       * @default 0.25
-       */
-      initialOpacity: 0.25,
+      get mouseUpElapsed() {
+        return this.mouseUpStart ?
+          Utility.now () - this.mouseUpStart : 0;
+      },
 
-      /**
-       * How fast (opacity per second) the wave fades out.
-       *
-       * @attribute opacityDecayVelocity
-       * @type number
-       * @default 0.8
-       */
-      opacityDecayVelocity: 0.8,
+      get mouseDownElapsedSeconds() {
+        return this.mouseDownElapsed / 1000;
+      },
 
-      backgroundFill: true,
-      pixelDensity: 2,
+      get mouseUpElapsedSeconds() {
+        return this.mouseUpElapsed / 1000;
+      },
 
-      eventDelegates: {
-        down: 'downAction',
-        up: 'upAction'
+      get mouseInteractionSeconds() {
+        return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
       },
 
-      ready: function() {
-        this.waves = [];
+      get initialOpacity() {
+        return this.element.initialOpacity;
       },
 
-      downAction: function(e) {
-        var wave = createWave(this);
+      get opacityDecayVelocity() {
+        return this.element.opacityDecayVelocity;
+      },
 
-        this.cancelled = false;
-        wave.isMouseDown = true;
-        wave.tDown = 0.0;
-        wave.tUp = 0.0;
-        wave.mouseUpStart = 0.0;
-        wave.mouseDownStart = now();
+      get radius() {
+        var width2 = this.containerMetrics.width * this.containerMetrics.width;
+        var height2 = this.containerMetrics.height * this.containerMetrics.height;
+        var waveRadius = Math.min(
+          Math.sqrt(width2 + height2),
+          Ripple.MAX_RADIUS
+        ) * 1.1 + 5;
 
-        var rect = this.getBoundingClientRect();
-        var width = rect.width;
-        var height = rect.height;
-        var touchX = e.x - rect.left;
-        var touchY = e.y - rect.top;
+        var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
+        var timeNow = this.mouseInteractionSeconds / duration;
+        var size = waveRadius * (1 - Math.pow(80, -timeNow));
 
-        wave.startPosition = {x:touchX, y:touchY};
+        return Math.abs(size);
+      },
 
-        if (this.classList.contains("recenteringTouch")) {
-          wave.endPosition = {x: width / 2,  y: height / 2};
-          wave.slideDistance = dist(wave.startPosition, wave.endPosition);
+      get opacity() {
+        if (!this.mouseUpStart) {
+          return this.initialOpacity;
         }
-        wave.containerSize = Math.max(width, height);
-        wave.containerWidth = width;
-        wave.containerHeight = height;
-        wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: width, h: height});
-
-        // The wave is circular so constrain its container to 1:1
-        wave.wc.style.top = (wave.containerHeight - wave.containerSize) / 2 + 'px';
-        wave.wc.style.left = (wave.containerWidth - wave.containerSize) / 2 + 'px';
-        wave.wc.style.width = wave.containerSize + 'px';
-        wave.wc.style.height = wave.containerSize + 'px';
-
-        this.waves.push(wave);
-
-        if (!this._loop) {
-          this._loop = this.animate.bind(this, {
-            width: width,
-            height: height
-          });
-          requestAnimationFrame(this._loop);
+
+        return Math.max(
+          0,
+          this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
+        );
+      },
+
+      get outerOpacity() {
+        // Linear increase in background opacity, capped at the opacity
+        // of the wavefront (waveOpacity).
+        var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
+        var waveOpacity = this.opacity;
+
+        return Math.max(
+          0,
+          Math.min(outerOpacity, waveOpacity)
+        );
+      },
+
+      get isOpacityFullyDecayed() {
+        return this.opacity < 0.01 &&
+          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
+      },
+
+      get isRestingAtMaxRadius() {
+        return this.opacity >= this.initialOpacity &&
+          this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
+      },
+
+      get isAnimationComplete() {
+        return this.mouseUpStart ?
+          this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
+      },
+
+      get translationFraction() {
+        return Math.min(
+          1,
+          this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
+        );
+      },
+
+      get xNow() {
+        if (this.xEnd) {
+          return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
         }
-        // else there is already a rAF
-      },
-
-      upAction: function() {
-        for (var i = 0; i < this.waves.length; i++) {
-          // Declare the next wave that has mouse down to be mouse'ed up.
-          var wave = this.waves[i];
-          if (wave.isMouseDown) {
-            wave.isMouseDown = false
-            wave.mouseUpStart = now();
-            wave.mouseDownStart = 0;
-            wave.tUp = 0.0;
-            break;
-          }
+
+        return this.xStart;
+      },
+
+      get yNow() {
+        if (this.yEnd) {
+          return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
         }
-        this._loop && requestAnimationFrame(this._loop);
+
+        return this.yStart;
+      },
+
+      get isMouseDown() {
+        return this.mouseDownStart && !this.mouseUpStart;
       },
 
-      cancel: function() {
-        this.cancelled = true;
+      resetInteractionState: function() {
+        this.maxRadius = 0;
+        this.mouseDownStart = 0;
+        this.mouseUpStart = 0;
+
+        this.xStart = 0;
+        this.yStart = 0;
+        this.xEnd = 0;
+        this.yEnd = 0;
+        this.slideDistance = 0;
+
+        this.containerMetrics = new ElementMetrics(this.element);
+      },
+
+      draw: function() {
+        var scale;
+        var translateString;
+        var dx;
+        var dy;
+
+        this.wave.style.opacity = this.opacity;
+
+        scale = this.radius / (this.containerMetrics.size / 2);
+        dx = this.xNow - (this.containerMetrics.width / 2);
+        dy = this.yNow - (this.containerMetrics.height / 2);
+
+
+        // 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)';
       },
 
-      animate: function(ctx) {
-        var shouldRenderNextFrame = false;
+      downAction: function(event) {
+        var xCenter = this.containerMetrics.width / 2;
+        var yCenter = this.containerMetrics.height / 2;
+
+        this.resetInteractionState();
+        this.mouseDownStart = Utility.now();
+
+        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';
+      },
 
-        var deleteTheseWaves = [];
-        // The oldest wave's touch down duration
-        var longestTouchDownDuration = 0;
-        var longestTouchUpDuration = 0;
-        // Save the last known wave color
-        var lastWaveColor = null;
-        // wave animation values
-        var anim = {
-          initialOpacity: this.initialOpacity,
-          opacityDecayVelocity: this.opacityDecayVelocity,
-          height: ctx.height,
-          width: ctx.width
+      upAction: function(event) {
+        if (!this.isMouseDown) {
+          return;
         }
 
-        for (var i = 0; i < this.waves.length; i++) {
-          var wave = this.waves[i];
+        this.mouseUpStart = Utility.now();
+      },
 
-          if (wave.mouseDownStart > 0) {
-            wave.tDown = now() - wave.mouseDownStart;
+      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,
+          value: 0.25
+        },
+
+        /**
+         * How fast (opacity per second) the wave fades out.
+         *
+         * @attribute opacityDecayVelocity
+         * @type number
+         * @default 0.8
+         */
+        opacityDecayVelocity: {
+          type: Number,
+          value: 0.8
+        },
+
+        /**
+         * If true, ripples will exhibit a gravitational pull towards
+         * the center of their container as they fade away.
+         *
+         * @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 [];
           }
-          if (wave.mouseUpStart > 0) {
-            wave.tUp = now() - wave.mouseUpStart;
+        },
+
+        /**
+         * 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);
           }
+        }
+      },
 
-          // Determine how long the touch has been up or down.
-          var tUp = wave.tUp;
-          var tDown = wave.tDown;
-          longestTouchDownDuration = Math.max(longestTouchDownDuration, tDown);
-          longestTouchUpDuration = Math.max(longestTouchUpDuration, tUp);
+      get target () {
+        var ownerRoot = Polymer.dom(this).getOwnerRoot();
+        var target;
 
-          // Obtain the instantenous size and alpha of the ripple.
-          var radius = waveRadiusFn(tDown, tUp, anim);
-          var waveAlpha =  waveOpacityFn(tDown, tUp, anim);
-          var waveColor = cssColorWithAlpha(wave.waveColor, waveAlpha);
-          lastWaveColor = wave.waveColor;
+        if (ownerRoot) {
+          target = ownerRoot.host;
+        }
 
-          // Position of the ripple.
-          var x = wave.startPosition.x;
-          var y = wave.startPosition.y;
+        if (!target) {
+          target = this.parentNode;
+        }
 
-          // Ripple gravitational pull to the center of the canvas.
-          if (wave.endPosition) {
+        return target;
+      },
 
-            // This translates from the origin to the center of the view  based on the max dimension of
-            var translateFraction = Math.min(1, radius / wave.containerSize * 2 / Math.sqrt(2) );
+      keyBindings: {
+        'enter:keydown': '_onEnterKeydown',
+        'space:keydown': '_onSpaceKeydown',
+        'space:keyup': '_onSpaceKeyup'
+      },
 
-            x += translateFraction * (wave.endPosition.x - wave.startPosition.x);
-            y += translateFraction * (wave.endPosition.y - wave.startPosition.y);
-          }
+      attached: function() {
+        this._listen(this.target, 'up', this.upAction.bind(this));
+        this._listen(this.target, 'down', this.downAction.bind(this));
 
-          // If we do a background fill fade too, work out the correct color.
-          var bgFillColor = null;
-          if (this.backgroundFill) {
-            var bgFillAlpha = waveOuterOpacityFn(tDown, tUp, anim);
-            bgFillColor = cssColorWithAlpha(wave.waveColor, bgFillAlpha);
-          }
+        if (!this.target.hasAttribute('noink')) {
+          this.keyEventTarget = this.target;
+        }
+      },
 
-          // Draw the ripple.
-          drawRipple(wave, x, y, radius, waveAlpha, bgFillAlpha);
-
-          // Determine whether there is any more rendering to be done.
-          var maximumWave = waveAtMaximum(wave, radius, anim);
-          var waveDissipated = waveDidFinish(wave, radius, anim);
-          var shouldKeepWave = !waveDissipated || maximumWave;
-          // keep rendering dissipating wave when at maximum radius on upAction
-          var shouldRenderWaveAgain = wave.mouseUpStart ? !waveDissipated : !maximumWave;
-          shouldRenderNextFrame = shouldRenderNextFrame || shouldRenderWaveAgain;
-          if (!shouldKeepWave || this.cancelled) {
-            deleteTheseWaves.push(wave);
+      get shouldKeepAnimating () {
+        for (var index = 0; index < this.ripples.length; ++index) {
+          if (!this.ripples[index].isAnimationComplete) {
+            return true;
           }
-       }
+        }
 
-        if (shouldRenderNextFrame) {
-          requestAnimationFrame(this._loop);
+        return false;
+      },
+
+      simulatedRipple: function() {
+        this.downAction(null);
+
+        // Please see polymer/polymer#1305
+        this.async(function() {
+          this.upAction();
+        }, 1);
+      },
+
+      downAction: function(event) {
+        if (this.holdDown && this.ripples.length > 0) {
+          return;
         }
 
-        for (var i = 0; i < deleteTheseWaves.length; ++i) {
-          var wave = deleteTheseWaves[i];
-          removeWaveFromScope(this, wave);
+        var ripple = this.addRipple();
+
+        ripple.downAction(event);
+
+        if (!this._animating) {
+          this.animate();
         }
+      },
 
-        if (!this.waves.length && this._loop) {
-          // clear the background color
-          this.$.bg.style.backgroundColor = null;
-          this._loop = null;
-          this.fire('core-transitionend');
+      upAction: function(event) {
+        if (this.holdDown) {
+          return;
         }
-      }
 
-    });
+        this.ripples.forEach(function(ripple) {
+          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 && this.ripples.length === 0) {
+          this.onAnimationComplete();
+        } else {
+          window.requestAnimationFrame(this._boundAnimate);
+        }
+      },
+
+      _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>
-</polymer-element>