Cancel previous ripple on click

[MattiasBuelens]

Steps to reproduce

1. Go to the demo page.
2. Click the big "Click me!" button. The ripple effect starts.
3. Before the ripple finishes, click the same button again.

Expected results

The current ripple stops and a new ripple starts. After 1 second, the new ripple fills the entire button and then disappears.

Actual results

The current ripple stops and a new ripple starts. However, the new ripple disappears before it fills the entire button. In fact, it disappears when the first ripple would have finished its animation.

Solution

When starting a new ripple effect, cancel any pending previous effect using cancelAnimationFrame. (And add a polyfill for this function if it's not supported natively.)

I also noticed that the requestAnimationFrame "polyfill" was incorrect: the setTimeout call was missing the delay. However, this is still not enough to get the demo working on IE11... 😕

[MattiasBuelens]

Okay, since IE11 does not support CSS custom properties, it'll just remove any property starting with -- (since it doesn't recognize them). As a result, the worklet cannot see those properties... 😞

[developit]

Could just return the rAF/timer ID here and avoid the cancellation proxy altogether.

[developit]

Actually that could let this be re-collapsed to a single method:

addEventListener('click', function(e) {
  if (this.ripple) cancelAnimationFrame(this.ripple)

  ...
  this.ripple = requestAnimationFrame(rAF)
})

[MattiasBuelens]

Could just return the rAF/timer ID here and avoid the cancellation proxy altogether.

ripple() can't return a request ID, because that ID changes after every rAF call.

Actually that could let this be re-collapsed to a single method: [...]

We could indeed store the ID in a property on button, rather than keeping it inside a closure. However, I'm not really a fan of expando properties. 😛

---

I tried to keep my changes minimal to focus on solving just this one problem. But if you're okay with it, we can definitely think about refactoring it a bit. 😄

Personally, I would lean towards using a class and have one instance per element to (re)start the ripple effect. It'd be very similar to the current solution, except that all state moves from closures into class instances. For example:

[].forEach.call(document.querySelectorAll('.ripple'), function (el) {
    var rippler = new Rippler(el);
    el.addEventListener('click', function (evt) {
    	rippler.start(evt); // (re)-start animation
    });
});

[developit]

Yes - polyfillng custom properties on IE11 would probably fall into the realm of another polyfill. It should be possible to inject support for them into CSSStyleDeclaration, which would give us style.setProperty() and cssText support. However, it is unlinkely to work with getComputedStyle unless there is some way to hijack other known properties (maybe prefixing with *?).

It's probably my worth mentioning thst without a hack specifically to optimize IE versions, this polyfill might perform poorly there. I had investigated using CSS Behaviors for this, but the fact that it was removed in Edge made it less valuable to me.

[MattiasBuelens]

I agree, it's not very realistic to expect decent performance on IE11 with this polyfill.

I'm not aware of a way to properly polyfill CSS custom properties, where you can introduce any number of variables at any element with the full CSS cascade. Existing "polyfills" such as css-variables-polyfill only work at the :root level and rely on manually parsing the original CSS.