elm-mdl/demo/Demo/Snackbar.elm

module Demo.Snackbar where

import Effects exposing (Effects, none)
import Html exposing (..)
import Html.Attributes exposing (class, style, key)
import Array exposing (Array)
import Time exposing (Time, millisecond)

import Material.Helpers exposing (map1st, map2nd, pure, delay)
import Material.Color as Color
import Material.Style as Style exposing (cs, css, Style)
import Material.Snackbar as Snackbar
import Material.Button as Button exposing (Action(..))
import Material.Grid exposing (..)
import Material.Elevation exposing (e2, e8)
import Material 

import Demo.Page as Page



-- MODEL



type alias Mdl = 
  Material.Model 


type Square' 
  = Appearing 
  | Waiting
  | Active
  | Idle
  | Disappearing


type alias Square = 
  (Int, Square')


type alias Model =
  { count : Int
  , squares : List Square
  , snackbar : Snackbar.Model Int
  , mdl : Mdl
  }


model : Model
model =
  { count = 0
  , squares = [] 
  , snackbar = Snackbar.model 
  , mdl = Material.model
  }


-- ACTION, UPDATE


type Action
  = AddSnackbar
  | AddToast
  | Appear Int
  | Gone Int
  | Snackbar (Snackbar.Action Int)
  | MDL (Material.Action Action)


add : (Int -> Snackbar.Contents Int) -> Model -> (Model, Effects Action)
add f model =
  let 
    (snackbar', fx) = 
      Snackbar.add (f model.count) model.snackbar
        |> map2nd (Effects.map Snackbar)
    model' = 
      { model 
      | snackbar = snackbar'
      , count = model.count + 1
      , squares = (model.count, Appearing) :: model.squares
      }
  in 
    ( model'
    , Effects.batch 
        [ Effects.tick (always (Appear model.count))
        , fx 
        ]
    )


mapSquare : Int -> (Square' -> Square') -> Model -> Model
mapSquare k f model = 
  { model 
  | squares = 
      List.map 
        ( \((k', sq) as s) -> if k /= k' then s else (k', f sq) )
        model.squares
  }


update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of
    AddSnackbar ->
      add (\k -> Snackbar.snackbar k ("Snackbar message #" ++ toString k) "UNDO") model

    AddToast -> 
      add (\k -> Snackbar.toast k <| "Toast message #" ++ toString k) model

    Appear k -> 
      model |> mapSquare k (\sq -> if sq == Appearing then Waiting else sq) |> pure

    Snackbar (Snackbar.Begin k) -> 
      model |> mapSquare k (always Active) |> pure

    Snackbar (Snackbar.End k) -> 
      model |> mapSquare k (always Idle) |> pure

    Snackbar (Snackbar.Click k) -> 
      ( model |> mapSquare k (always Disappearing)
      , delay transitionLength (Gone k) 
      )

    Gone k ->
      ({ model
       | squares = List.filter (fst >> (/=) k) model.squares
       }
      , none)

    Snackbar action' -> 
      Snackbar.update action' model.snackbar 
        |> map1st (\s -> { model | snackbar = s })
        |> map2nd (Effects.map Snackbar)

    MDL action' -> 
      Material.update MDL action' model.mdl
        |> map1st (\m -> { model | mdl = m })



-- VIEW



addSnackbarButton : Button.Instance Mdl Action 
addSnackbarButton = 
  Button.instance 0 MDL
    Button.raised (Button.model True)
    [ Button.fwdClick AddSnackbar ]


addToastButton : Button.Instance Mdl Action 
addToastButton = 
  Button.instance 1 MDL
    Button.raised (Button.model True)
    [ Button.fwdClick AddToast ]


boxHeight : String
boxHeight = "48px"


boxWidth : String
boxWidth = "64px"


transitionLength : Time 
transitionLength = 150 * millisecond


transitionInner : Style
transitionInner = 
  css "transition"
    <| "box-shadow 333ms ease-in-out 0s, " 
    ++ "width " ++ toString transitionLength ++ "ms, " 
    ++ "height " ++ toString transitionLength ++ "ms, "
    ++ "background-color " ++ toString transitionLength ++ "ms"


transitionOuter : Style
transitionOuter = 
  css "transition" 
    <| "width " ++ toString transitionLength ++ "ms ease-in-out 0s, "
    ++ "margin " ++ toString transitionLength ++ "ms ease-in-out 0s"


clickView : Model -> Square -> Html
clickView model (k, square) =
  let
    hue =
      Array.get ((k + 4) % Array.length Color.hues) Color.hues
        |> Maybe.withDefault Color.Teal

    shade = 
      case square of
        Idle -> 
          Color.S100

        _ -> 
          Color.S500

    color = 
      Color.color hue shade

    selected' =
      square == Active

    (width, height, margin, selected) = 
      if square == Appearing || square == Disappearing then
        ("0", "0", "16px 0", False)
      else
        (boxWidth, boxHeight, "16px 16px", selected')      

  in
    {- In order to get the box appearance and disappearance animations 
    to start in the lower-left corner, we render boxes as an outer div 
    (which animates only width, to cause reflow of surrounding boxes), 
    and an absolutely positioned inner div (to force animation to start
    in the lower-left corner. -}
    Style.div 
      [ css "height" boxHeight
      , css "width" width
      , css "position" "relative"
      , css "display" "inline-block"
      , css "margin" margin
      , css "z-index" "0"
      , transitionOuter
      , Style.attribute (key <| toString k)
        {- Interestingly, not setting key messes up CSS transitions in
        spectacular ways. -}
      ]
      [ Style.div
          [ Color.background color
          , Color.text Color.primaryContrast
          , if selected then e8 else e2
            -- Center contents
          , css "display" "inline-flex"
          , css "align-items" "center"
          , css "justify-content" "center"
          , css "flex" "0 0 auto"
             -- Sizing
          , css "height" height
          , css "width" width
          , css "border-radius" "2px"
          , css "box-sizing" "border-box"
             -- Force appearance/disapparenace to be from/to lower-left corner. 
          , css "position" "absolute"
          , css "bottom" "0"
          , css "left" "0"
             -- Transitions
          ,  transitionInner
          ]
          [ div [] [ text <| toString k ] ]
        ]



view : Signal.Address Action -> Model -> Html
view addr model =
  Page.body2 "Snackbar & Toast" srcUrl intro references
    [ p [] 
        [ text """Click the buttons below to generate toasts and snackbars. Note that 
                  multiple activations are automatically queued."""
        ]
    , grid [ ] 
        [ cell 
            [ size All 4, size Desktop 2]
            [ addSnackbarButton.view addr model.mdl 
                [ Button.colored
                , css "width" "8em"
                ] 
                [ text "Snackbar" ]
            ]
        , cell 
            [ size All 4, size Desktop 2]
            [ addToastButton.view addr model.mdl 
                [ Button.colored
                , css "width" "8em"
                ] 
                [ text "Toast" ]
            ]
        , cell
            [ size Desktop 10, offset Desktop 1 
            , size Tablet 6, offset Tablet 1
            , size Phone 4
            , align Top 
            , css "padding-top" "32px"
            ]
            (model.squares |> List.reverse |> List.map (clickView model))
        ]
    , Snackbar.view (Signal.forwardTo addr Snackbar) model.snackbar 
    ]


intro : Html
intro = 
  Page.fromMDL "https://www.getmdl.io/components/index.html#snackbar-section" """
> The Material Design Lite (MDL) __snackbar__ component is a container used to
> notify a user of an operation's status. It displays at the bottom of the
> screen. A snackbar may contain an action button to execute a command for the
> user. Actions should undo the committed action or retry it if it failed for
> example. Actions should not be to close the snackbar. By not providing an
> action, the snackbar becomes a __toast__ component.

""" 


srcUrl : String 
srcUrl =
  "https://github.com/debois/elm-mdl/blob/master/demo/Demo/Snackbar.elm"


references : List (String, String)
references = 
  [ Page.package "http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Snackbar"
  , Page.mds "https://www.google.com/design/spec/components/snackbars-toasts.html"
  , Page.mdl "https://www.getmdl.io/components/index.html#snackbar-section"
  ]