Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User Alerts
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 ]
]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.