elm-html modify attributes of an Html after it's created

[Scott Robertson]

Are there any examples of modifying an Html types attributes after it's been created?

Specifically I'm looking to write a function that appends an additional class to an Html element something like this:

highlight : Html -> Html

highlight el = addclass("highligted", el)

i.e. if I had <div class="foo">...</div> the results of highlight would produce the element <div class="foo highlighted">...</div>

But I'm unsure how to write the addclass function since the Html.Attribute type is opaque to me. Looking at the source code it maps to a Native type which I don't know how  to pattern match against.

[Rehno Lindeque]

There's a little bit of discussion in https://github.com/evancz/elm-html/issues/25 and https://github.com/evancz/elm-html/issues/16. It's not possible to access internals of virtual-dom nodes right now; would be interesting to see if someone can figure out a really fast way of doing it. I suspect this constructor-only pattern might be contributing to elm-html's amazing performance at the moment.

[Scott Robertson]

Is there away to introspect the Attributes prior to them being converted into a virtual-dom?

This approach would be useful.

scrollbox : List Attribute -> List Html

scrollbox attributes children = div (addclass "scrollbox"  attributes) children

otherWidget : List Attribute -> List Html

otherWidget = scrollbox [class "other-widget"], [div [] [], ...]

addclass : String -> List Attribute -> List Attribute

-- how do you pattern match an Attribute?

And the resulting output would be

<div class="other-widget scrollbox">...</div>

Still not sure how I'd go about picking apart the list of attributes to locate the class and append to it since it's a native type.

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/KHoBr1me8_4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rehno Lindeque]

 

Is there away to introspect the Attributes prior to them being converted into a virtual-dom? 

 

addclass : String -> List Attribute -> List Attribute

-- how do you pattern match an Attribute?

Attributes like class don't stack right now, you have to write your logic inline:

type alias ScrollboxParam = { class : String }

scrollbox : ScrollboxParam -> List Html

scrollbox param children = div [ class (param.class ++ " scrollbox")  ] children

I did something like that for Bootstrap.Html.btn as well (I'll probably change most of our shorthand code to work this way).