User Alerts

UserAlert.elm

module Shared.UserAlert exposing (UserAlert, Msg, show, startShowAlertAnimation, startHideAlertAnimation, default, update, view)

import Helpers exposing (classes)
import Shared.Animation as Animation
import Html exposing (Html, div, span, text)
import Html.Attributes exposing (class)
import Task


type UserAlert
    = NotShowing
    | Showing State


type alias State =
    { showState : Animation.ShowHideAnimation
    , text : String
    }


type Msg
    = AnimationTransition Animation.ShowHideAnimation
    | Show { text : String }


default : UserAlert
default =
    NotShowing


animationDelays : Animation.ShowHideStateAnimationDelays
animationDelays =
    { show = Animation.standardMediumDelays
    , hide = Animation.standardMediumDelays
    }


show : String -> Cmd Msg
show text =
    Show { text = text }
        |> Task.succeed
        |> Task.perform identity


startShowAlertAnimation : Cmd Msg
startShowAlertAnimation =
    Animation.startShowHideAnimation animationDelays Animation.hidden
        |> Cmd.map AnimationTransition


startHideAlertAnimation : Cmd Msg
startHideAlertAnimation =
    Animation.startShowHideAnimation { animationDelays | hide = { setup = 5000, animate = 300, done = 0 } } Animation.shown
        |> Cmd.map AnimationTransition


update : Msg -> { mdl | userAlert : UserAlert } -> ( UserAlert, Cmd Msg )
update msg { userAlert } =
    case userAlert of
        NotShowing ->
            case msg of
                Show { text } ->
                    ( Showing { text = text, showState = Animation.hidden }
                    , startShowAlertAnimation
                    )

                _ ->
                    ( userAlert, Cmd.none )

        Showing state ->
            case msg of
                AnimationTransition animation ->
                    case animation of
                        Animation.Done (Animation.Show) ->
                            ( userAlert
                            , startHideAlertAnimation
                            )

                        _ ->
                            Animation.transitionShowHideAnimationState animationDelays animation
                                |> Cmd.map AnimationTransition
                                |> (,) (Showing { state | showState = animation })

                Show { text } ->
                    ( Showing { text = text, showState = Animation.hidden }
                    , startShowAlertAnimation
                    )


view : { mdl | userAlert : UserAlert } -> Html msg
view { userAlert } =
    case userAlert of
        NotShowing ->
            text ""

        Showing state ->
            case state.showState of
                Animation.Done (Animation.Hide) ->
                    text ""

                showState ->
                    div [ classes [ "alert", Animation.classesForShowHideStateAnimations showState ] ]
                        [ span [ class "alert-content" ]
                            [ span [ class "content-text" ]
                                [ text state.text ]
                            ]
                        ]