search

luncheon / ripplet.js

Fully controllable vanilla-js material design ripple effect generator.
https://luncheon.github.io/ripplet.js/demo/
Do What The F*ck You Want To Public License
78 stars 7 forks source link

Do not despawn ripple element until mouseup is triggered #3

Closed TheComputerM closed 4 years ago

TheComputerM commented 4 years ago

As per the material design guidelines, the ripple effect should not be removed until the mouse is lifted.

Example: https://vuetifyjs.com/en/directives/ripples/#ripple-directive

luncheon commented 4 years ago

Indeed. Thank you.

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

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

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 commented 4 years ago

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.

luncheon commented 4 years ago

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.

TheComputerM commented 4 years ago

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 commented 4 years ago

v0.3.0 has been released.

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 commented 4 years ago

Nice

luncheon commented 4 years ago

@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.