[elm-discuss] Re: Elm `reusable views`

[Robert Woodhead]

I had to something similar in Elm-Life; it gets a message every time the
window changes in size, and reports the new size of a particular DOM
element. You can find the code here: https://github.com/RJWoodhead/elm-life

[Mark Hamburg]

Wow. If only this stuff were well supported...

https://ellie-app.com/3VFHVxMsW2ya1/1

We watch for resizing using some resize observation JavaScript code —
search on ResizeObserver and you can find a number of hits — and feed the
values back through a port tagged with the size of the observed entity.
Attaching the observer in a virtual DOM is an interesting problem because
elements can come in and out of existence based on what happens in the view
function. Our solution to that was to mark observed elements with a class
and use that to trigger an insanely fast animation and set up an observer
to watch for the notification for when that animation runs. This is the
sort of thing that leads to me saying "I hate the web."
Mark

https://ellie-app.com/3VFHVxMsW2ya1/0
Unfortunately, I don't know enough about them to provide a solution that
would actually monitors their resizing but maybe someone else could.

Hi,
I have been trying to create a `resuable view` following the structure
outlined in evanczs `elm-sortable-table`
<https://github.com/evancz/elm-sortable-table/> and other examples,
- abadi199s `datetimepicker`
<https://abadi199.github.io/datetimepicker/>
- thebriticans `elm-autocomplete`
<https://github.com/thebritican/elm-autocomplete>
I was attempting the reproduce the range slider from Palantir's
BlueprintJS component library (example here
<http://blueprintjs.com/docs/#core/components/sliders.range-slider>).
My Elm version is here <https://github.com/enetsee/rangeslider>, with a
live version in Ellie here
<https://embed.ellie-app.com/3twhtJfZNvya1/0>.
The Elm version extends the original by allowing the user to specify
the scale that should be used. The live demo shows both a linear and
logarithmic scale; the latter is particularly useful when asking users to
select values which have a heavily skewed distribution (common in finance
and insurance).
The main limitation of the Elm version compared with the original is
having to specify a fixed width. The react version seems to use `
clientWidth
<https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth>`
to determine the rendered width of the component and uses that when
positioning visual elements. As far as I'm aware there is no way to achieve
this with Elm.
I would really appreciate any pointers on my approach, particularly if
I have misunderstood the `reusable view` approach, and any ideas on how
overcome the fixed width limitation mentioned above.
Thanks,
Michael
--
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
For more options, visit https://groups.google.com/d/optout.

--
There is NO FATE, we are the creators.
blog: http://damoc.ro/
--
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
For more options, visit https://groups.google.com/d/optout.

--
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
For more options, visit https://groups.google.com/d/optout.

--
There is NO FATE, we are the creators.
blog: http://damoc.ro/
--
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
For more options, visit https://groups.google.com/d/optout.

[Matthieu Pizenberg]

Could the size be left to specify by the css of the user of the library?
You would need to enable user to give the class name they want for this.

Hi,
I have been trying to create a `resuable view` following the structure
outlined in evanczs `elm-sortable-table`
<https://github.com/evancz/elm-sortable-table/> and other examples,
- abadi199s `datetimepicker`
<https://abadi199.github.io/datetimepicker/>
- thebriticans `elm-autocomplete`
<https://github.com/thebritican/elm-autocomplete>
I was attempting the reproduce the range slider from Palantir's
BlueprintJS component library (example here
<http://blueprintjs.com/docs/#core/components/sliders.range-slider>). My
Elm version is here <https://github.com/enetsee/rangeslider>, with a live
version in Ellie here <https://embed.ellie-app.com/3twhtJfZNvya1/0>.
The Elm version extends the original by allowing the user to specify the
scale that should be used. The live demo shows both a linear and
logarithmic scale; the latter is particularly useful when asking users to
select values which have a heavily skewed distribution (common in finance
and insurance).
The main limitation of the Elm version compared with the original is
having to specify a fixed width. The react version seems to use `
clientWidth
<https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth>` to
determine the rendered width of the component and uses that when
positioning visual elements. As far as I'm aware there is no way to achieve
this with Elm.
I would really appreciate any pointers on my approach, particularly if I
have misunderstood the `reusable view` approach, and any ideas on how
overcome the fixed width limitation mentioned above.
Thanks,
Michael