From e43f04db57b363de9bfb80fcd2d638bbc71dc5df Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Sat, 19 May 2018 23:35:03 +0200 Subject: [PATCH 1/3] Cancel previous ripple on click --- demo/demo.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index 8b29f36..0e372bc 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -31,14 +31,14 @@ if (!window.performance) window.performance = { now: Date.now.bind(Date) }; if (!window.requestAnimationFrame) window.requestAnimationFrame = function(cb) { return setTimeout(doAnim, cb); }; function doAnim(cb) { cb(performance.now()); } -function ripple(evt) { - var button = this, +function ripple(button, evt) { + var request, rect = button.getBoundingClientRect(), x = evt.clientX - rect.left, y = evt.clientY - rect.top, start = performance.now(); button.classList.add('animating'); - requestAnimationFrame(function raf(now) { + request = requestAnimationFrame(function raf(now) { var count = Math.floor(now - start); button.style.cssText = '--ripple-x: ' + x + '; --ripple-y: ' + y + '; --animation-tick: ' + count + ';'; if (count > 1000) { @@ -46,9 +46,18 @@ function ripple(evt) { button.style.cssText = '--animation-tick: 0;'; return; } - requestAnimationFrame(raf); - }) + request = requestAnimationFrame(raf); + }); + return function () { + cancelAnimationFrame(request); + } } [].forEach.call(document.querySelectorAll('.ripple'), function (el) { - el.addEventListener('click', ripple); -}); \ No newline at end of file + var cancelRipple; + el.addEventListener('click', function (evt) { + if (cancelRipple) { + cancelRipple(); + } + cancelRipple = ripple(this, evt); + }); +}); From e6e40baf8edf06b6e05a3b2b30b7f5e6e78dab6b Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Sat, 19 May 2018 23:36:20 +0200 Subject: [PATCH 2/3] Fix requestAnimationFrame polyfill --- demo/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/demo.js b/demo/demo.js index 0e372bc..263f97a 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -28,7 +28,7 @@ CSS.paintWorklet.addModule('./ripple-worklet.js'); if (!window.performance) window.performance = { now: Date.now.bind(Date) }; -if (!window.requestAnimationFrame) window.requestAnimationFrame = function(cb) { return setTimeout(doAnim, cb); }; +if (!window.requestAnimationFrame) window.requestAnimationFrame = function(cb) { return setTimeout(doAnim, 16, cb); }; function doAnim(cb) { cb(performance.now()); } function ripple(button, evt) { From 45985b5ed3ef71b9a2324ddbd80ff4fe1e3a5ad6 Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Sat, 19 May 2018 23:36:59 +0200 Subject: [PATCH 3/3] Polyfill cancelAnimationFrame --- demo/demo.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/demo/demo.js b/demo/demo.js index 263f97a..d308104 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -28,7 +28,10 @@ CSS.paintWorklet.addModule('./ripple-worklet.js'); if (!window.performance) window.performance = { now: Date.now.bind(Date) }; -if (!window.requestAnimationFrame) window.requestAnimationFrame = function(cb) { return setTimeout(doAnim, 16, cb); }; +if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(cb) { return setTimeout(doAnim, 16, cb); }; + window.cancelAnimationFrame = function(req) { clearTimeout(req); } +} function doAnim(cb) { cb(performance.now()); } function ripple(button, evt) {