jinjor / elm-contextmenu / ContextMenu

The ContextMenu component that follows the Elm Architecture.

See How to use.

TEA Parts

The boilerplace functions. See The Elm Architecture for more information.


type ContextMenu context

The Model. Put whatever context you like, which is used to create menu items.


type Msg context

The Message.

init : ( ContextMenu context, Platform.Cmd.Cmd (Msg context) )

The init function.

update : Msg context -> ContextMenu context -> ( ContextMenu context, Platform.Cmd.Cmd (Msg context) )

The update function.

subscriptions : ContextMenu context -> Platform.Sub.Sub (Msg context)

The Subscription.

Item


type Item

The menu item. You can construct it with pipe-friendly functions.

ContextMenu.item "Take photos"
    -- This library is outdated. See README.
    -- |> ContextMenu.icon FontAwesome.camera Color.green
    |> ContextMenu.disabled True

item : String -> Item

Creates a simple text item.

itemWithAnnotation : String -> String -> Item

Creates an item with annotation which will displayed just below the item name.

disabled : Basics.Bool -> Item -> Item

Disables the item. True = disabled, False = enabled.

icon : (String -> Basics.Int -> Html Basics.Never) -> String -> Item -> Item

Shows the icon.

The first argument is a function that creates an icon, given a color string(like #fff, rgb(100,200,200), etc.) and icon size (px).

shortcut : String -> Item -> Item

Displays the shortcut key at the right.

Config


type alias Config =
{ width : Basics.Int
, direction : Direction
, overflowX : Overflow
, overflowY : Overflow
, containerColor : Color
, hoverColor : Color
, invertText : Basics.Bool
, cursor : Cursor
, rounded : Basics.Bool
, fontFamily : String 
}

Defines the styles of the menu. See examples.


type Direction
    = LeftBottom
    | RightBottom

The default direction the menu will be shown at.


type Overflow
    = Shift
    | Mirror

The strategies how to show the menu when it goes out of window.


type Cursor
    = Arrow
    | Pointer

The shape of cursor during hovering on the menu.

defaultConfig : Config

The default config.

defaultConfig =
    { width = 300
    , direction = RightBottom
    , overflowX = Mirror
    , overflowY = Mirror
    , containerColor = "white"
    , hoverColor = "rgb(240 240 240)"
    , invertText = False
    , cursor = Pointer
    , rounded = False
    , fontFamily = "initial"
    }

View

view : Config -> (Msg context -> msg) -> (context -> List (List ( Item, msg ))) -> ContextMenu context -> Html msg

Shows the menu. This should be called at only one place.

Arguments:

  1. the Config
  2. function to transform component's message into user's message
  3. function to create item groups
  4. the Model

open : (Msg context -> msg) -> context -> Html.Attribute msg

Makes the attribute that triggers to open the menu. This attribute is passed for each element that needs a menu.

Arguments:

  1. function to transform component's message into user's message
  2. the context which is used to create items

openIf : Basics.Bool -> (Msg context -> msg) -> context -> Html.Attribute msg

Similar to open but only works under particular condition.

This is useful for debugging on browser.

Advanced

setOnDehover : Basics.Bool -> ContextMenu context -> ContextMenu context

This switches when the menu should be closed.