emulating an input element. How?

59 views
Skip to first unread message

Stéphane Payrard

unread,
Jan 12, 2015, 12:05:52 PM1/12/15
to elm-d...@googlegroups.com
My previous post was about a very early stage of an experiment.
And I thank Evan and Rehn for putting me back on the right track.
I want to emulate an input element by using  regular div elements
handling events. The tricky part will be positionning a cursor. This
should be done by positionning an opaque div that will act as the cursor on
top of the div containing the string .
To do so, I need to know where by somehow finding the bounding box
of the div containing the string. I think I could to that with jquery (a bold claim!)
and seeing atom code, I see something similar.
but I have no clue how to that in elm.
Am I again missing the obvious?

I can state that in more general terms, I want to create a DOM tree with one node depending
on other(s). or may be one DOM subtree depending on another.

Help!

Rehno Lindeque

unread,
Jan 12, 2015, 4:29:15 PM1/12/15
to elm-d...@googlegroups.com
I can state that in more general terms, I want to create a DOM tree with one node depending
on other(s). or may be one DOM subtree depending on another.

I'll give a quick hint if I may: You should always separate presentation from your data model. The positioning of the container and the cursor should probably be explicit in your data model. Admittedly I'm making this sound a bit easier than it is - you'd probably also need to use a monospaced font, beware of text wrapping and calculate the dimensions of the container yourself... no small task!

PS Implementing canvas-based text rendering in Elm might be a good project for someone and has the nice capability to measure text. (I think it should be faster too, I've run into performance issues with manually positioning lots of text elements in Elm)

Reply all
Reply to author
Forward
0 new messages