1

In js, when handling event with addEventListener('mousemove',handler), inside the handler, we get access to the this which holds reference to the dom element, which has important properties like offsetLeft.

How do I decode the this object in elm so i can get those properties?

Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
  • I think getting a state/value from DOM is not a Elm way. I think you should try to put it in your model and build DOM from the model. Event handler is used to obtain user action, not the DOM state. – Tosh Aug 06 '16 at 08:53
  • How do you put offsetLeft inside the model? Better yet, how do you put the browser width into the model : ) – Daniel Birowsky Popeski Aug 06 '16 at 09:03
  • I would use `port` to react with browser events. – Tosh Aug 06 '16 at 09:45

2 Answers2

2

I'm not sure what you get back from http://package.elm-lang.org/packages/elm-lang/html/1.1.0/Html-Events#onMouseUp but that might be enough

Otherwise you build your own event handler as follows:

http://package.elm-lang.org/packages/elm-lang/html/1.1.0/Html-Events#on

onMouseMove : msg -> Attribute msg
onMouseMove message =
  on "mousemove" (Json.map message (Json.at ["offsetLeft"] Json.int))
  -- on "mousemove" (Json.map message (Json.at ["target", "offsetLeft"] Json.int))
Simon H
  • 20,332
  • 14
  • 71
  • 128
  • I was aware of the `target` property inside the js event object, but unfortunately it is a reference to the dom element that captured the event, not the one that listens to it. I need a reference to the element that listens to that event, which is `this`. – Daniel Birowsky Popeski Aug 05 '16 at 15:46
2

Try this package, http://package.elm-lang.org/packages/debois/elm-dom/1.2.1/

It gives you to access the DOM properties in event handlers.

Trajche Shoposki
  • 221
  • 2
  • 7