Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FeatureRequest: Append to targetElement #7

Open
betaboon opened this issue Mar 19, 2021 · 15 comments
Open

FeatureRequest: Append to targetElement #7

betaboon opened this issue Mar 19, 2021 · 15 comments

Comments

@betaboon
Copy link

would it be possible to add the feature to append the ripple to the events targetElement?
@luncheon
Copy link
Owner

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

@betaboon
Copy link
Author

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
Copy link
Owner

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

@luncheon
Copy link
Owner

luncheon commented Mar 27, 2021 •
edited
Loading

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
Copy link
Author

@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
Copy link

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
Copy link
Owner

luncheon commented Mar 29, 2021 •
edited
Loading

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

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

@evantishuk
Copy link

@luncheon

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

@luncheon
Copy link
Owner

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

@betaboon
Copy link
Author

@luncheon works like a charm :)

@betaboon
Copy link
Author

betaboon commented Apr 1, 2021

@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

@luncheon
Copy link
Owner

luncheon commented Apr 1, 2021

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

@betaboon
Copy link
Author

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

@luncheon
Copy link
Owner

@betaboon Oops😅 Please update to 0.5.4. Thanks.

@luncheon
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@evantishuk @betaboon @luncheon