From 2e4b2de33c9947fd79a82bd36e9d1064c3dfa5f8 Mon Sep 17 00:00:00 2001
From: Joel <waylaidwanderer@live.com>
Date: Fri, 19 Sep 2014 01:03:54 -0700
Subject: [PATCH] Fixes #18 by removing old ripple when creating new ripple

---
 scripts/ripples.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/scripts/ripples.js b/scripts/ripples.js
index 29782630..d9e669f2 100644
--- a/scripts/ripples.js
+++ b/scripts/ripples.js
@@ -34,8 +34,12 @@ var ripples = {
                 elPos           = $el.getBoundingClientRect(),
                 mousePos        = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale           = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
+                rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
                 refreshElementStyle;
 
+            // Clear all previous ripple animations
+            $rippleWrapper.innerHTML = "";
+
             // Set ripple class
             $ripple.className = "ripple";
 
@@ -56,7 +60,7 @@ var ripples = {
             $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
             // Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
-            if (/firefox/i.test(navigator.userAgent)) {
+            if (e.buttons == 1 && /firefox/i.test(navigator.userAgent)) {
                 $el.click();
             }
 
@@ -65,7 +69,7 @@ var ripples = {
 
                 // Let know to other functions that this element has finished the animation
                 $ripple.dataset.animating = 0;
-                rippleOut($ripple);
+                document.dispatchEvent(rippleEnd);
 
             }, rippleStartTime);
 
@@ -109,7 +113,12 @@ var ripples = {
 
         // start ripple effect on mousedown
         bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
-
+        // if animation ends and user is not holding mouse then destroy the ripple
+        bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
+            if (!mouseDown) {
+                rippleOut($ripple);
+            }
+        });
         // Destroy ripple when mouse is not holded anymore if the ripple still exists
         bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
             if ($ripple.dataset.animating != 1) {