Skip to content

Instantly share code, notes, and snippets.

@coreyhaines
Created January 27, 2017 22:18
Show Gist options
  • Save coreyhaines/686c48da891d3babcf56daf6e739d629 to your computer and use it in GitHub Desktop.
Save coreyhaines/686c48da891d3babcf56daf6e739d629 to your computer and use it in GitHub Desktop.
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