-
Notifications
You must be signed in to change notification settings - Fork 932
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
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you and great job!
assets/js/phoenix_live_view.js
Outdated
@@ -507,6 +507,9 @@ export class LiveSocket { | |||
pageY: e.pageY, | |||
screenX: e.screenX, | |||
screenY: e.screenY, | |||
offsetX: e.offsetX, | |||
offsetY: e.offsetY, | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✂️ extra space pleaze!
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✂️ extra space pleaze!
done :-)
ad720d3
to
5e280e4
Compare
❤️❤️❤️🐥🔥 |
I've just published an article on how to use these coordinates with an SVG element. |
Ironically, two months after alvies article, meta-data for phx-click became opt-in and must be defined in LiveSocket.see here |
Thanks @robergperez for your helpful comment! For posterity's sake, the following update to before: after:
|
resolves #493
It adds
offsetX
andoffsetY
to click event metadata inphoenix_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.