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

Copy link
Contributor

@snewcomer snewcomer Dec 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✂️ extra space pleaze!

Copy link
Contributor

@snewcomer snewcomer Dec 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@alvises alvises Dec 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✂️ extra space pleaze!

done :-)

@alvises alvises force-pushed the master branch 2 times, most recently from ad720d3 to 5e280e4 Compare Dec 13, 2019
@chrismccord chrismccord merged commit 01851fe into phoenixframework:master Jan 7, 2020
10 checks passed
@chrismccord
Copy link
Member

@chrismccord chrismccord commented Jan 7, 2020

❤️❤️❤️🐥🔥

@alvises
Copy link
Contributor Author

@alvises alvises commented Mar 19, 2020

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

@robergperez
Copy link

@robergperez robergperez commented May 20, 2022

Ironically, two months after alvies article, meta-data for phx-click became opt-in and must be defined in LiveSocket.see here

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

Successfully merging this pull request may close these issues.

4 participants