Elm `reusable views`

[enetsee]

Hi, 

I have been trying to create a `resuable view` following the structure outlined in evanczs `elm-sortable-table` and other examples, including:

• abadi199s `datetimepicker`
  
• thebriticans `elm-autocomplete`
  

I was attempting the reproduce the range slider from Palantir's BlueprintJS component library (example here). My Elm version is here, with a live version in Ellie here. 

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

[Peter Damoc]

You could try to use MutationObservers to ferry that information in Elm:
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. 

--
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 elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Mark Hamburg]

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

To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

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 email to elm-discuss...@googlegroups.com.

[Peter Damoc]

Indeed, adding a ResizeObserver polyfill allows for the expected behavior:
https://ellie-app.com/3VFHVxMsW2ya1/1

On Thu, Aug 3, 2017 at 7:18 PM, Mark Hamburg <mhamb...@gmail.com> wrote:

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

On Thu, Aug 3, 2017 at 3:53 AM Peter Damoc <pda...@gmail.com> wrote:

You could try to use MutationObservers to ferry that information in Elm:
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. 

On Thu, Aug 3, 2017 at 11:43 AM, enetsee <mthom...@gmail.com> wrote:

Hi, 

I have been trying to create a `resuable view` following the structure outlined in evanczs `elm-sortable-table` and other examples, including:

• abadi199s `datetimepicker`
  
• thebriticans `elm-autocomplete`
  

I was attempting the reproduce the range slider from Palantir's BlueprintJS component library (example here). My Elm version is here, with a live version in Ellie here. 

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` 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 an email to elm-discuss+unsubscribe@googlegroups.com.

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 email to elm-discuss+unsubscribe@googlegroups.com.

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 email to elm-discuss+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[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...

[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.