elm-inline-hover's Introduction

DEPRECATED

This library is only available for Elm 0.18 or less.

I'm not going to port this library for 0.19 for some reasons.

The implementation used in this library is not allowed in 0.19 world.
This is a kind of hack! (not good for Elm ecosystem in the long run)
I'm not using this now, just using CSS.

elm-inline-hover

An utility for using :hover by inline style.

How to use

Just insert hover [("whatever", "styles"), ("you", "like")] before Html nodes.

import InlineHover exposing(hover)

main =
  ul []
    [ hover styles li [] [ text "Hello" ]
    , hover styles li [] [ text "World" ]
    ]

styles =
  [("background", "#abd")]

That's it!

License

BSD3

elm-inline-hover's People

Stargazers

Watchers

elm-inline-hover's Issues

Another implementation

In case there is some trouble by using onMouseEnter or onMouseLeave.

hover'
   : String
  -> List (String, String)
  -> (List (Attribute msg) -> List (Html msg) -> Html msg)
  -> List (Attribute msg)
  -> List (Html msg)
  -> Html msg
hover' key styles tag attrs children =
  let
    s =
      String.join ";" <|
        List.map (\(key, value) -> key ++ ":" ++ value ++ " !important") styles
    styleNode =
      node "style" []
        [ text ("*[data-hover=\"" ++ key ++ "\"]:hover{" ++ s ++ "}") ]
  in
    tag
      (attribute "data-hover" key :: attrs)
      (styleNode :: children)

Need a workaround for Elm 0.19

I tried upgrading your package to support Elm 0.19 but ran into a problem. The VirtualDom package now guards against attributes such as onmouseenter by prefixing them with "data-" (link). This prevents the browser from invoking your hooks to control the hover styling.

Here's what your example app outputs in Chrome when compiled with Elm 0.19:

<li data-onmouseenter="this.setAttribute('data-hover-background-color', this.style.backgroundColor||'');this.style.backgroundColor='#abd';this.setAttribute('data-hover-font-weight', this.style.fontWeight||'');this.style.fontWeight='bold';this.setAttribute('data-hover-undefined-style', this.style.undefinedStyle||'');this.style.undefinedStyle='foo';this.setAttribute('data-hover-font-family', this.style.fontFamily||'');this.style.fontFamily='&quot;游ゴシック&quot;, &quot;Yu Gothic&quot;, sans-serif;';this.setAttribute('data-hover-color', this.style.color||'');this.style.color='&quot;';this.setAttribute('data-hover-color', this.style.color||'');this.style.color='&quot;'" data-onmouseleave="this.style.backgroundColor=this.getAttribute('data-hover-background-color')||'';;this.style.fontWeight=this.getAttribute('data-hover-font-weight')||'';;this.style.undefinedStyle=this.getAttribute('data-hover-undefined-style')||'';;this.style.fontFamily=this.getAttribute('data-hover-font-family')||'';;this.style.color=this.getAttribute('data-hover-color')||'';;this.style.color=this.getAttribute('data-hover-color')||'';" style="background-color: rgb(238, 221, 204); color: green;">World</li>

And here's the output from Elm 0.18:

<li onmouseenter="this.setAttribute('data-hover-background-color', this.style.backgroundColor||'');this.style.backgroundColor='#abd';this.setAttribute('data-hover-font-weight', this.style.fontWeight||'');this.style.fontWeight='bold';this.setAttribute('data-hover-undefined-style', this.style.undefinedStyle||'');this.style.undefinedStyle='foo';this.setAttribute('data-hover-font-family', this.style.fontFamily||'');this.style.fontFamily='&quot;游ゴシック&quot;, &quot;Yu Gothic&quot;, sans-serif;';this.setAttribute('data-hover-color', this.style.color||'');this.style.color='&quot;';this.setAttribute('data-hover-color', this.style.color||'');this.style.color='&quot;'" onmouseleave="this.style.backgroundColor=this.getAttribute('data-hover-background-color')||'';;this.style.fontWeight=this.getAttribute('data-hover-font-weight')||'';;this.style.undefinedStyle=this.getAttribute('data-hover-undefined-style')||'';;this.style.fontFamily=this.getAttribute('data-hover-font-family')||'';;this.style.color=this.getAttribute('data-hover-color')||'';;this.style.color=this.getAttribute('data-hover-color')||'';" style="background-color: rgb(238, 221, 204); color: green;" data-hover-background-color="rgb(238, 221, 204)" data-hover-font-weight="" data-hover-undefined-style="" data-hover-font-family="" data-hover-color="green">World</li>

Maybe elm-css has some other trick for hover?

Recommend Projects