elm-contextmenu

Flexible context menu for Elm (Demo)

Warning

On the migration from Elm 0.18 to 0.19, the legacy Color type has changed to just a type alias of String like #aaa, rgb(100,100,200). Also, some icon libraries that uses Color type (i.e. FontAwesome, MaterialIcons) cannot be used anymore. So now you need to make a function typed as String -> Int -> Html msg. It should work but I haven’t tested yet.

I also think the implementation can be improved using new Browser API, but I cannot spend my time to try it. The styling method can be improved too. I would really appreciate if someone do that. Don’t hesitate to fork this package or make your own from scratch! (This article may help.)

How to use

This component works with The Elm Architecture.

1. Model

type alias Model =
  { contextMenu : ContextMenu Context
  , config : ContextMenu.Config
  , message : String
  }

2. Msg

type Msg
  = ContextMenuMsg (ContextMenu.Msg Context)
  | Item Int

3. Initialize

init : Flags -> (Model, Cmd Msg)
init flags =
  let
    (contextMenu, msg) = ContextMenu.init
  in
    ( { contextMenu = contextMenu
      }
    , Cmd.map ContextMenuMsg msg
    )

4. Update

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    ContextMenuMsg msg ->
      let
        (contextMenu, cmd) =
          ContextMenu.update msg model.contextMenu
      in
        ( { model | contextMenu = contextMenu }
        , Cmd.map ContextMenuMsg cmd
        )

5. Subscribe

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.map ContextMenuMsg (ContextMenu.subscriptions model.contextMenu)

6. View

view : Model -> Html Msg
view model =
  div
    [ ContextMenu.open ContextMenuMsg "context1" ]
    [ ContextMenu.view
        ContextMenu.defaultConfig
        ContextMenuMsg
        toItemGroups
        toItemGroups model.contextMenu
    ]
toItemGroups : String -> List (List Item)
toItemGroups context =
  if context == "context1" then
    [ [ (ContextMenu.item "Hey", Item 1)
      , (ContextMenu.item "Yo!", Item 2)
      ]
    ]
  else
    []

License

BSD-3-Clause