menu.elm

module Widget.Menu exposing (..)

{-| Recreating the menu found here: <https://github.com/nashvail/ReactPathMenu>
Make using:
elm-make FlowerMenu.elm --output elm.js
open index.html
-}

import Time exposing (second, Time)
import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (..)
import Animation exposing (turn)
import Animation.Messenger
import Color
import FontAwesome exposing (..)
import Widget.Login exposing (..)
import Style exposing (..)
import Debug


type Msg
    = MenuHoverIn
    | MenuHoverOut
    | ClickItem String
    | Clicked
    | OpenMenu
    | Animate Animation.Msg


type MenuStatus
    = Opened
    | Closed


type Menu
    = FlashCard
    | None

hoverStyle model scl time options =
    Animation.interrupt
        [ Animation.toWith
            (Animation.easing
                { duration = time * second
                , ease = (\x -> x)
                }
            )
            ([ Animation.scale scl ]
                ++ options
            )
        ]
        model.openBtnStyle


hoverStyle2 model scl time options =
    Animation.interrupt
        [ Animation.wait (second * 1)
        , Animation.toWith
            (Animation.easing
                { duration = time * second
                , ease = (\x -> x)
                }
            )
            ([ Animation.scale 1, Animation.display Animation.flex ])
        ]
        model
        

update.elm

update : Msg -> Model -> ( Model, Cmd Msg )
update action model =
    case action of
        MenuHoverIn ->
            let
                newStyle =
                    hoverStyle model 1.1 0.2 []

                m =
                    if model.status == Opened then
                        { model | openBtnStyle = newStyle, output = "checked" }
                    else
                        { model | openBtnStyle = newStyle }

                d =
                    Debug.log "hovered in: " m
            in
                ( m
                , Cmd.none
                )

        MenuHoverOut ->
            let
                newStyle =
                    hoverStyle model 1 0.2 []

                m =
                    if model.status == Opened then
                        { model | openBtnStyle = newStyle }
                    else
                        model
            in
                ( m
                , Cmd.none
                )

        Clicked ->
            let
                newM =
                    updateBtnClicked model

                newModel =
                    { newM | output = "clicked" }
            in
                ( newModel, Cmd.none )

        OpenMenu ->
            let
                closeBtn =
                    hoverStyle2 model.closedBtnStyle 5 0.2 [ Animation.display Animation.flex ]

                m =
                    { model | closedBtnStyle = closeBtn }

                d =
                    Debug.log "open " m
            in
                ( m, Cmd.none )

        ClickItem itm ->
            let
                m =
                    updateItem itm model
            in
                ( m, Cmd.none )

        Animate animMsg ->
            let
                ( n, c ) =
                    Animation.Messenger.update animMsg model.openBtnStyle

                ( n1, c2 ) =
                    Animation.Messenger.update animMsg model.closedBtnStyle
            in
                ( { model
                    | openBtnStyle = n
                    , closedBtnStyle = n1
                  }
                , c
                )
updateBtnClicked model =
    case model.status of
        Opened ->
            let
                newOpenedBtnStyle =
                    hoverStyle model 0 0.2 [ Animation.display Animation.none ]

                newClose =
                    hoverStyle2 model.closedBtnStyle 1 0.2 [ Animation.display Animation.flex ]

                m =
                    { model
                        | openBtnStyle = newOpenedBtnStyle
                        , closedBtnStyle = newClose
                        , status = Closed
                    }

                d =
                    Debug.log "check2 " m
            in
                m

        Closed ->
            let
                newOpenedBtnStyle =
                    hoverStyle model 1 0.2 [ Animation.display Animation.flex ]
            in
                { model
                    | openBtnStyle = newOpenedBtnStyle
                    , status = Opened
                }


init : Model
init =
    { openBtnStyle = Animation.style [ Animation.display Animation.flex, Animation.scale 1 ]
    , closedBtnStyle = Animation.style [ Animation.scale 0, Animation.display Animation.none ]
    , output = "nothing"
    , status = Opened
    , selected = None
    }

view.elm

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ Animation.subscription Animate [ model.openBtnStyle ]
        , Animation.subscription Animate [ model.closedBtnStyle ]
        ]


view model =
    case model.selected of
        None ->
            mainView model

        FlashCard ->
            mainView model


mainView model =
    div []
        [ openMenu model
        , closeMenu
            model

        ]


openMenu model =
    label (Animation.render model.openBtnStyle ++ [ style (menuContainerStyle 110), onMouseEnter MenuHoverIn, onMouseLeave MenuHoverOut, onClick Clicked ]) [ bars (Color.rgb 0 0 0) 50 ]


closeMenu model =
    let
        d =
            Debug.log "close style: " model.closedBtnStyle
    in
        label (Animation.render model.closedBtnStyle ++ [ style (menuContainerStyle 80), onClick Clicked ]) [ times (Color.rgb 0 0 0) 20 ]