ElmContentEditable.elm

module Main exposing (..)

import Html exposing (Html, text, div, button, input)
import Html.Events exposing (onClick, onInput)
import Html.Attributes exposing (value)


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- TYPES


type alias Model =
    { message : String
    , state : ModelModes
    }


type Msg
    = Edit
    | Change String
    | Save


type ModelModes
    = Editing
    | Displaying



-- MODEL


init : ( Model, Cmd Msg )
init =
    ( { message = "Elm program is ready. Get started!"
      , state = Displaying
      }
    , Cmd.none
    )



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Edit ->
            ( { model | state = Editing }, Cmd.none )

        Save ->
            ( { model | state = Displaying }
            , Cmd.none
            )

        Change string ->
            ( { model
                | message = string
              }
            , Cmd.none
            )



-- VIEW


view : Model -> Html Msg
view model =
    case model.state of
        Displaying ->
            div [ onClick Edit ] [ text model.message ]

        Editing ->
            div []
                [ input [ value model.message, onInput Change ] []
                , button [ onClick Save ] [ text "save" ]
                ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none