Anim.elm

module Main exposing (main)

import Browser
import Element exposing (Attribute, centerX, column, el, padding, spacing, text)
import Element.Border as Border
import Element.Input as Input
import Html exposing (Html, button, div)
import Html.Attributes


styles : String
styles =
    """
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pop {
  from {
    transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
  }
}
"""


type alias Model =
    { lines : List String }


type Msg
    = Add


fadeIn : Float -> List (Attribute msg) -> List (Attribute msg)
fadeIn secs =
    (++)
        [ inlineStyle
            "animation-name"
            "fadeIn"
        , inlineStyle
            "animation-duration"
            (String.fromFloat secs ++ "s")
        ]


pop : Float -> List (Attribute msg) -> List (Attribute msg)
pop secs =
    (++)
        [ inlineStyle
            "transform-origin"
            "center center"
        , inlineStyle
            "animation-name"
            "pop"
        , inlineStyle
            "animation-duration"
            (String.fromFloat secs ++ "s")
        ]


both : Float -> List (Attribute msg) -> List (Attribute msg)
both secs =
    let
        t =
            String.fromFloat secs ++ "s"
    in
    (++)
        [ inlineStyle
            "transform-origin"
            "center center"
        , inlineStyle
            "animation"
            ("pop " ++ t ++ ", fadeIn " ++ t)
        ]


inlineStyle : String -> String -> Attribute msg
inlineStyle k v =
    Html.Attributes.style k v
        |> Element.htmlAttribute


update : Msg -> Model -> Model
update msg model =
    case msg of
        Add ->
            { model | lines = "yeah" :: model.lines }


view : Model -> Html Msg
view model =
    column [ spacing 20, centerX, Element.centerY ]
        [ model.lines
            |> List.map
                (text
                    >> el
                        ([ Border.width 2
                         , padding 5
                         , centerX
                         ]
                            --|> fadeIn 0.5
                            --|> pop 0.5
                            |> both 1
                        )
                )
            |> column [ spacing 5, centerX ]
        , Input.button [ Element.centerX, padding 10, Border.width 2 ]
            { onPress = Just Add
            , label = text "click"
            }
        ]
        |> Element.layout
            [ styles
                |> Html.text
                |> List.singleton
                |> Html.node "style" []
                |> Element.html
                |> Element.behindContent
            ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = { lines = [] }
        , view = view
        , update = update
        }