Elm-Font-Awesome-5-problem.elm

module Main exposing (..)

import Html exposing (Html, text, div, ol, li)
import Html.Attributes exposing (style)
import Html.Events exposing (onMouseEnter, onMouseLeave)
import FontAwesome exposing (..)


type alias Model =
    { t1 : Bool
    , t2 : Bool
    , t3 : Bool
    , t4 : Bool
    }


init : ( Model, Cmd Msg )
init =
    ( { t1 = False
      , t2 = False
      , t3 = False
      , t4 = False
      }
    , Cmd.none
    )


type Msg
    = T1 Bool
    | T2 Bool
    | T3 Bool
    | T4 Bool


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        T1 t ->
            ( { model | t1 = t }, Cmd.none )

        T2 t ->
            ( { model | t2 = t }, Cmd.none )

        T3 t ->
            ( { model | t3 = t }, Cmd.none )

        T4 t ->
            ( { model | t4 = t }, Cmd.none )


view : Model -> Html Msg
view model =
    let
        alignLeft =
            style [ ( "text-align", "left" ) ]
    in
        div [ alignLeft ]
            [ text "Hover mouse over an icon to toggle its change"
            , ol []
                [ li []
                    [ div
                        [ alignLeft ]
                        [ text "Runtime error, because 'Icon' is not keyed." ]
                    , Html.span
                        [ onMouseEnter <| T1 True
                        , onMouseLeave <| T1 False
                        , alignLeft
                        ]
                        [ if model.t1 then
                            iconWithOptions angry Solid [] []
                          else
                            iconWithOptions copy Solid [] []
                        ]
                    ]
                , li []
                    [ div
                        [ alignLeft ]
                        [ text "Runtime error, because 'Style' is not keyed" ]
                    , Html.span
                        [ onMouseEnter <| T2 True
                        , onMouseLeave <| T2 False
                        , alignLeft
                        ]
                        [ if model.t2 then
                            iconWithOptions adjust Solid [] []
                          else
                            iconWithOptions adjust Regular [] []
                        ]
                    ]
                , li []
                    [ div
                        [ alignLeft ]
                        [ text "Runtime error, because 'Options' that are rendered as classes are not keyed" ]
                    , Html.span
                        [ onMouseEnter <| T3 True
                        , onMouseLeave <| T3 False
                        , alignLeft
                        ]
                        [ if model.t3 then
                            iconWithOptions spinner Solid [ Animation Spin ] []
                          else
                            iconWithOptions spinner Solid [] []
                        ]
                    ]
                , li []
                    [ div
                        [ alignLeft ]
                        [ text "This one is fine, 'Options' that are rendered as HTML attributes don't seem to be a problem" ]
                    , Html.span
                        [ onMouseEnter <| T4 True
                        , onMouseLeave <| T4 False
                        , alignLeft
                        ]
                        [ if model.t4 then
                            iconWithOptions spinner Solid [ Transform [ Grow 10 ] ] []
                          else
                            iconWithOptions spinner Solid [ Mask comment Solid ] []
                        ]
                    ]
                ]
            ]


main : Program Never Model Msg
main =
    Html.program
        { view = view
        , init = init
        , update = update
        , subscriptions = always Sub.none
        }