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.

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

Add offsetX and offsetY to click event metadata #498

Merged
merged 2 commits into from Jan 7, 2020

Conversation

@alvises
Copy link
Contributor

alvises commented Nov 21, 2019

resolves #493

It adds offsetX and offsetY to click event metadata in phoenix_live_view.js, which are the click coordinates relative to the clicked element.

A use case: when clicking on a big rectangular div where we want to render new elements.

Copy link
Contributor

snewcomer left a comment

Thank you and great job!

@@ -507,6 +507,9 @@ export class LiveSocket {
pageY: e.pageY,
screenX: e.screenX,
screenY: e.screenY,
offsetX: e.offsetX,
offsetY: e.offsetY,

This comment has been minimized.

Copy link
@snewcomer

snewcomer Dec 12, 2019

Contributor

✂️ extra space pleaze!

This comment has been minimized.

Copy link
@snewcomer

snewcomer Dec 12, 2019

Contributor

For future readers - these are CSS pixels from various points

client is from the current viewport
page is the encompassing browser window
screen is relative to the physical monitor (likely not very useful)
offset is relative to a parent container.

This comment has been minimized.

Copy link
@alvises

alvises Dec 13, 2019

Author Contributor

✂️ extra space pleaze!

done :-)

@alvises alvises force-pushed the alvises:master branch 2 times, most recently from ad720d3 to 5e280e4 Dec 13, 2019
@chrismccord chrismccord merged commit 01851fe into phoenixframework:master Jan 7, 2020
10 checks passed
10 checks passed
mix test (OTP 21.x | Elixir 1.8.x)
Details
mix test (OTP 21.x | Elixir 1.8.x)
Details
mix test (OTP 21.x | Elixir 1.9.x)
Details
mix test (OTP 21.x | Elixir 1.9.x)
Details
mix test (OTP 22.x | Elixir 1.8.x)
Details
mix test (OTP 22.x | Elixir 1.8.x)
Details
mix test (OTP 22.x | Elixir 1.9.x)
Details
mix test (OTP 22.x | Elixir 1.9.x)
Details
npm test
Details
npm test
Details
@chrismccord

This comment has been minimized.

Copy link
Member

chrismccord commented Jan 7, 2020

❤️❤️❤️🐥🔥

@alvises

This comment has been minimized.

Copy link
Contributor Author

alvises commented Mar 19, 2020

I've just published an article on how to use these coordinates with an SVG element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

3 participants
You can’t perform that action at this time.