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

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!

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

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

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

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 December 13, 2019 17:12
@chrismccord chrismccord merged commit 01851fe into phoenixframework:master Jan 7, 2020
@chrismccord
Copy link
Member

❤️❤️❤️🐥🔥

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

@robergperez
Copy link

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

@codeanpeace
Copy link
Contributor

codeanpeace commented Jan 10, 2023

Thanks @robergperez for your helpful comment!

For posterity's sake, the following update to assets/js/app.js restored offsetX & offsetY in the handle_event/3 callback.

before:
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})

after:

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  metadata: {
    click: (e, _el) => { return {offsetX: e.offsetX, offsetY: e.offsetY} }  
  }
})

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.

Add offsetX and offsetY to click events
5 participants