miyamoen / elm-command-pallet

Command Pallet

This package is TEA component. A Command pallet is a Msg selector like Atom, VSCode, Sublime Text 3 and so on...

sample

How to use

First, init command pallet and put it into your Model.

init : ( Model, Cmd Msg )
init =
    ( { commandPallet =
            CommandPallet.init CommandPalletMsg
                [ ( "Increment", Increment )
                , ( "Decrement", Decrement )
                ]
      , ...
      }
    , Cmd.none
    )

Second, use update in your update.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        CommandPalletMsg subMsg ->
            let
                ( cp, cmd ) =
                    CommandPallet.update subMsg model.commandPallet
            in
                ({ model | commandPallet = cp }, cmd)

        ...

Third, startup a command pallet. Type p key to startup with default.

subscriptions : Model -> Sub Msg
subscriptions { commandPallet } =
    CommandPallet.subscriptions commandPallet

Last, command pallet view in your view function.

view : Model -> Html Msg
view { commandPallet, ... } =
    div []
        [ CommandPallet.html commandPallet
        , p []
            [ button [] [ text "<" ]
            , text <| String.fromInt num
            , button [] [ text ">" ]
            ]
        ]