From c2105c0599bf2f1fa9e0b1383f19c3e8d4a19c45 Mon Sep 17 00:00:00 2001
From: Andrew <andrewtjoslin@gmail.com>
Date: Mon, 8 Sep 2014 13:42:46 -0400
Subject: [PATCH] fix(ripple): fix bug with ripple and many clicks

---
 src/components/animate/inkCssRipple.js | 51 +++++++++++---------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/components/animate/inkCssRipple.js b/src/components/animate/inkCssRipple.js
index b64ee5a8296..edb5b5bdc0f 100644
--- a/src/components/animate/inkCssRipple.js
+++ b/src/components/animate/inkCssRipple.js
@@ -26,6 +26,11 @@ function InkRippleDirective($materialInkRipple) {
 
 function InkRippleService($window, $$rAF, $materialEffects, $timeout) {
 
+  // TODO fix this. doesn't support touch AND click devices (eg chrome pixel)
+  var hasTouch = !!('ontouchend' in document);
+  var POINTERDOWN_EVENT = hasTouch ? 'touchstart' : 'mousedown';
+  var POINTERUP_EVENT = hasTouch ? 'touchend touchcancel' : 'mouseup mouseleave';
+
   return {
     attachButtonBehavior: attachButtonBehavior,
     attachCheckboxBehavior: attachCheckboxBehavior,
@@ -77,45 +82,31 @@ function InkRippleService($window, $$rAF, $materialEffects, $timeout) {
       return !element.controller('noink') && !Util.isDisabled(element);
     }
 
-    var hasTouch = !!('ontouchend' in document);
     function enableMousedown() {
-      // TODO fix this. doesn't support touch AND click devices (eg chrome pixel)
-      var POINTERDOWN_EVENT = hasTouch ? 'touchstart' : 'mousedown';
-      var POINTERUP_EVENT = hasTouch ? 'touchend touchcancel' : 'mouseup mouseleave';
-
-      if (!rippleIsAllowed()) return;
-
       element.on(POINTERDOWN_EVENT, onPointerDown);
 
-      var pointerIsDown;
       function onPointerDown(ev) {
-        if (pointerIsDown) return;
-        pointerIsDown = true;
+        if (!rippleIsAllowed()) return;
 
-        element.one(POINTERUP_EVENT, function() {
-          pointerIsDown = false;
-        });
+        // Stop listening to pointer down for now, until the user lifts his finger/mouse
+        element.off(POINTERDOWN_EVENT, onPointerDown);
 
         var rippleEl = createRippleFromEvent(ev);
+        var ripplePauseTimeout = $timeout(pauseRipple, options.mousedownPauseTime, false);
+
+        rippleEl.on('$destroy', cancelRipplePause);
+        element.one(POINTERUP_EVENT, onPointerUp);
 
-        var pointerCheckTimeout = $timeout(
-          pauseRippleIfPointerDown,
-          options.mousedownPauseTime,
-          false
-        );
-
-        rippleEl.on('$destroy', cancelPointerCheck);
-
-        function pauseRippleIfPointerDown() {
-          if (pointerIsDown) {
-            rippleEl.css($materialEffects.ANIMATION_PLAY_STATE, 'paused');
-            element.one(POINTERUP_EVENT, function() {
-              rippleEl.css($materialEffects.ANIMATION_PLAY_STATE, 'running');
-            });
-          }
+        function onPointerUp() {
+          cancelRipplePause();
+          rippleEl.css($materialEffects.ANIMATION_PLAY_STATE, 'running');
+          element.on(POINTERDOWN_EVENT, onPointerDown);
+        }
+        function pauseRipple() {
+          rippleEl.css($materialEffects.ANIMATION_PLAY_STATE, 'paused');
         }
-        function cancelPointerCheck() {
-          $timeout.cancel(pointerCheckTimeout);
+        function cancelRipplePause() {
+          $timeout.cancel(ripplePauseTimeout);
         }
       }
     }