From e1b9f0d4b32005c00b9535e6151b7fb90a97a48c Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 28 Sep 2014 13:20:52 -0700 Subject: [PATCH 1/6] Removed extra blank line --- scripts/ripples.js | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 6be4ce47..0ceb755a 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -107,7 +107,6 @@ var ripples = { // Events handler // init RippleJS and start ripple effect on mousedown bind("mousedown", withRipple, rippleInit); - // 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 From 5a9b58a2dfb7d081ebccb325679a88a8953625a1 Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 28 Sep 2014 13:21:13 -0700 Subject: [PATCH 2/6] Corrected minor spelling error in comments --- scripts/ripples.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 0ceb755a..87c97dda 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -115,7 +115,7 @@ var ripples = { rippleOut($ripple); } }); - // Destroy ripple when mouse is not holded anymore if the ripple still exists + // Destroy ripple when mouse is not held anymore if the ripple still exists bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { if ($ripple.dataset.animating != 1) { rippleOut($ripple); From 85c8baf9051b9b8359eb8f2e30e0b4eaf0d223c6 Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 28 Sep 2014 13:33:37 -0700 Subject: [PATCH 3/6] Fixes #18 by removing old ripples when a new one is created --- scripts/ripples.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 87c97dda..805040a2 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -37,6 +37,9 @@ var ripples = { rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), refreshElementStyle; + // remove old ripples + $($rippleWrapper).find(".ripple").remove(); + // Set ripple class $ripple.className = "ripple"; @@ -78,7 +81,7 @@ var ripples = { // Let ripple fade out (with CSS) setTimeout(function() { - $ripple.remove(); + $ripple.remove(); }, rippleOutTime); }; From bc800df47d97154c60eb40786556823322f2fd4e Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 28 Sep 2014 14:34:19 -0700 Subject: [PATCH 4/6] Improved animation timing for ripples to more closely match the original --- css-compiled/ripples.css | 16 ++++++++++------ less/ripples.less | 20 ++++++++++++-------- scripts/ripples.js | 2 +- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/css-compiled/ripples.css b/css-compiled/ripples.css index a3c19300..05124b30 100644 --- a/css-compiled/ripples.css +++ b/css-compiled/ripples.css @@ -29,14 +29,18 @@ opacity: 0; } .ripple.ripple-on { - -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + visibility: visible; opacity: 1; + -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; } .ripple.ripple-out { - -webkit-transition: opacity 0.1s linear 0s !important; - transition: opacity 0.1s linear 0s !important; + visibility: hidden; opacity: 0; + -webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important; + -ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important; + -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important; + transition: visibility 0s 0.1s, opacity 0.1s linear !important; } diff --git a/less/ripples.less b/less/ripples.less index 5f22f1d7..cda32706 100644 --- a/less/ripples.less +++ b/less/ripples.less @@ -30,14 +30,18 @@ opacity: 0; } .ripple.ripple-on { - -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - opacity: 1; + visibility: visible; + opacity: 1; + -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; + transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; } .ripple.ripple-out { - -webkit-transition: opacity 0.1s linear 0s !important; - transition: opacity 0.1s linear 0s !important; - opacity: 0; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important; + -ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important; + -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important; + transition: visibility 0s 0.1s, opacity 0.1s linear !important; } diff --git a/scripts/ripples.js b/scripts/ripples.js index 805040a2..80e33c7b 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -12,7 +12,7 @@ var ripples = { // animations time var rippleOutTime = 100, - rippleStartTime = 500; + rippleStartTime = 400; // Helper to bind events on dynamically created elements var bind = function(event, selector, callback) { From 225ba46ce0bfd40ff5dd198c218da27c0c6dfd37 Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 28 Sep 2014 14:38:57 -0700 Subject: [PATCH 5/6] Don't trigger click when the left mouse is not the one doing the clicking --- scripts/ripples.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 80e33c7b..27854482 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -61,7 +61,10 @@ var ripples = { // Dirty fix for Firefox... seems like absolute elements inside tags do not trigger the "click" event if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) { - $el.click(); + var button = e.which || e.button; + if (button == 1) { + $el.click(); + } } // This function is called when the animation is finished From 5ef4d92569ae88e19dc4ec47cf71630c790bbabd Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 29 Sep 2014 14:57:32 -0700 Subject: [PATCH 6/6] Update to fix for #18 to allow multiple ripples to be animated --- scripts/ripples.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 27854482..db98a974 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -35,10 +35,7 @@ var ripples = { 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; - - // remove old ripples - $($rippleWrapper).find(".ripple").remove(); + refreshElementStyle; // Set ripple class $ripple.className = "ripple"; @@ -117,7 +114,7 @@ var ripples = { 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) { + if (!mouseDown || !$($ripple).is(":first-child")) { rippleOut($ripple); } });