ripplet.js FeatureRequest: Append to targetElement

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

Mar 19 '21 14:03 betaboon

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

Mar 20 '21 00:03 luncheon

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)

Mar 20 '21 10:03 betaboon

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

Mar 21 '21 23:03 luncheon

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

Mar 27 '21 23:03 luncheon

@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 :)

Mar 28 '21 09:03 betaboon

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").

Mar 29 '21 03:03 evantishuk

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

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

Mar 29 '21 04:03 luncheon

@luncheon

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

Mar 29 '21 06:03 evantishuk

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

Mar 30 '21 09:03 luncheon

@luncheon works like a charm :)

Mar 30 '21 10:03 betaboon

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

the position of the element to apply the ripple to changes position as effect of the interaction

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

Apr 01 '21 12:04 betaboon

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

Apr 01 '21 21:04 luncheon

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

Apr 11 '21 12:04 betaboon

@betaboon Oops😅 Please update to 0.5.4. Thanks.

Apr 12 '21 01:04 luncheon

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.

May 16 '21 02:05 luncheon