Do not despawn ripple element until mouseup is triggered

[TheComputerM]

Do not despawn ripple element until mouseup is triggered

[luncheon]

Thank you. I will use it as a reference.

And can you recheck the official implementation, the ripple effect is still there until the mouse is not longer pressing the element.

Yes, but I was referring to the mouseleave event. Sorry for the confusion.
In other words, when you drag (mousedown -> mouseleave -> mouseup) the button, the official implementation removes the ripple effect on mouseleave event, and unofficial implementations don't.

[luncheon]

Indeed. Thank you.

And officially, the ripple effect doesn't disappear on mouseleave event.

• https://material.io/components/buttons

But in the unofficial implementations, the ripple effect disappears on mouseleave event.

• https://materializecss.com/buttons.html
• https://material-ui.com/components/buttons/
• https://material.angular.io/components/button/

I'll make the declarative (data-ripplet) edition behave the same as the unofficial implementations; the ripple effect remains until the pointerup or pointerleave event occurs.

# Next, I may consider an API for the developers to control.

[TheComputerM]

Thanks, I have also found a workaround:

export function StopRipple({ ripple, remover }) {
  ripple.addEventListener("transitionend", function (e) {
    if (e.propertyName === "opacity" && remover.parentElement) {
      remover.parentElement.removeChild(remover);
    }
  });
  ripple.style.opacity = "0";
}

and remove the above lines from the main function

export function StartRipple(e, options) {
  ...
  return { ripple, remover };
}

And can you recheck the official implementation, the ripple effect is still there until the mouse is not longer pressing the element.

[TheComputerM]

Can you take a look at https://github.com/TheComputerM/material-ripple-effect, can you spot any bugs? I would be happy to add you as a collaborator or transfer ownership to you.

[luncheon]

v0.3.0 has been released.

• added clearing option (default value is true for backward compatibility)
• added ripplet.clear(currentTarget?, generatedContainerElement?) API
• in declarative edition, the ripple effect remains until the pointerup or pointerleave event occurs

Example:

<button
  onpointerdown="ripplet(arguments[0], { clearing: false })"
  onpointerup="ripplet.clear(this)"
  onpointerleave="ripplet.clear(this)"
>Keep pressing!</button>

@TheComputerM Thank you very much!!

[TheComputerM]

Nice

[luncheon]

@TheComputerM

Can you take a look at https://github.com/TheComputerM/material-ripple-effect, can you spot any bugs?

Yeah, I took a look at your repository and I think RippleBind() is a good API. I haven't found any bugs so far.

I would be happy to add you as a collaborator or transfer ownership to you.

Thanks for the offer, but I'm full of my own repository and my (paid) work, really thanks.