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

FeatureRequest: Append to targetElement #7

Open betaboon opened 3 years ago

betaboon commented 3 years ago

would it be possible to add the feature to append the ripple to the events targetElement?

luncheon commented 3 years ago

Ah, probably. But first, could you tell me your motivation or use case?

betaboon commented 3 years ago

I'm working on a component library and am using storybook for "documentation" of components. storybook has a zoom-in function. when zoomed in neither appendTo = body nor appendTo = parent work properly. example (Zoom-in-button in the top-bar)

luncheon commented 3 years ago

It's a bug... I'll try to fix it.

luncheon commented 3 years ago

Please try v0.5.2. Appending to the target element is not implemented, but it is aware of the zoom CSS property of the <body>.

betaboon commented 3 years ago

@luncheon for browsers that support zoom (eg chrome) it works. for browsers that do not support zoom (eg firefox) storybook is using transform (see here) which ofc is not covered by your fix. great progress already tho :)

evantishuk commented 3 years ago

could you tell me your motivation or use case

Let's say I have a checklist. And each item on the list has a toggling checkbox to the left. Perhaps when a user clicks/taps on the list item, you'd want to make it so that the ripple emanates from the center of checkbox, rather than the label. An example of that exact behavior can be found here (click on the label "TWA Member locations.xlsx").

luncheon commented 3 years ago

@evantishuk Like this? https://codepen.io/luncheon/pen/ExZyMwe

or this? https://codepen.io/luncheon/pen/ZELOPvx

evantishuk commented 3 years ago

@luncheon

At quick glance, those seem to behave identically. So, yeah, that's the gist of it!

luncheon commented 3 years ago

@betaboon Added support for the transform: scale() of the body in v0.5.3.

betaboon commented 3 years ago

@luncheon works like a charm :)

betaboon commented 3 years ago

@luncheon i think i just came across a use-case for this feature request:

demo: https://svelte.dev/repl/5ee97c4d0b78427bb52aeb1a2d2f6819?version=3.37.0

luncheon commented 3 years ago

@betaboon Indeed. I'd like to consider (and implement) it when I have time.

betaboon commented 3 years ago

@luncheon i just noticed that 0.5.3 breaks my setup when doing SSR :/

luncheon commented 3 years ago

@betaboon Oops😅 Please update to 0.5.4. Thanks.

luncheon commented 3 years ago

Now added support for appendTo: "target", and made it the default. The original reason for making appendTo: "body" the default was for IE, and IE is already obsolete. I found appendTo: "target" to be just right for the default.

With this breaking change, the version is now 1.0.0.