Hi Elm folks,
I'm having trouble performing some programmatic UI adjustments on DOM
elements *immediately after* Elm inserts them.
How do you perform effects such as these:
- After a popover/dropdown is inserted into the DOM, then align it to an
arbitrary button (the popover element is positioned absolutely in the root
of the Elm app).
- After a long list of items is inserted into the DOM, then scroll the nth
item into view.
I know how to use ports to tell JS to do something. But if I update my Elm
app's model (and thereby view) to include a list of 1000 divs and at the
same time send a message on that port, then the port message will be
handled before my DOM has been updated.
Example:
Elm:
update msg model =
case msg of
ActivateLongList ->
({model | longListActive = True}, scrollIntoView
".list-item:nth-child(42)")
port scrollIntoView : String -> Cmd msg
JS:
app.ports.scrollIntoView.subscribe(selector => {
let el = document.body.querySelector(selector)
if (!el) {
throw new Error(`scrollintoView error: Element not found by selector
'${selector}'.`)
}
el.scrollIntoView()
})
The error will always be thrown . Does Elm have a "render callback" or
something, which can be hooked into? Am I missing something completely else?
Thanks for any inputs!
Sebastian
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
