Treeview

A customizable ELM treeview component.

Usage example:

import Html
import Treeview exposing (..)


model : Model
model = ...     -- see Model documentation


styles : Styles
styles = ...    -- see Styles documentation


config : Config
config = default styles


main : Program Never Model Msg
main =
  Html.beginnerProgram
    { model = model
    , view = view config
    , update = update
    }

Model

type alias Config =

{ checkbox :

{ enable : Bool

, multiple : Bool

, cascade : Bool

}

, search : { enable : Bool }

, sort : Sort

, look :

{ theme : String

, styles : Styles

}

Configure the treeview component.

Options:

checkbox.enable: activate the checkbox selection for each node.
checkbox.multiple: multiple nodes can be selected.
checkbox.cascade: enable the cascading selection (the children node will selected if the parent is selected).
search.enable: activate the search toolbar.
sort: sort the nodes (see Sort for more details).
look.theme: apply the theme.
look.styles: define the styles (CSS class and icons) for nodes.

Use default to get a default configuration and set a specific options.

Example:

config : Config
config =
    let
        d =
            default styles
    in
    { d | search = { enable = True } }

type alias Model =

List Node

Model of treeview.

Example:

model : Model
model =
    [ T.node "pA" "Project A" "folder" False <|
        Just
            [ T.node "pAg1" "Report 1" "folder" False <|
                Just
                    [ T.node "pAg1f1" "report_1_revA.pdf" "pdf" True Nothing
                    , T.node "pAg1f2" "report_1_revB.pdf" "pdf" True Nothing
                    , T.node "pAg1f3" "report_1_revC.pdf" "pdf" True Nothing
                    ]
            , T.node "pAg2" "Report 2" "folder" False <|
                Just
                    [ T.node "pAg2f1" "report_2_revA.pdf" "pdf" True Nothing
                    , T.node "pAg2f2" "report_2_revB.pdf" "pdf" True Nothing
                    ]
            , T.node "pAf1" "lorem.doc" "word" True Nothing
            , T.node "pAf2" "ipsum.xls" "excel" True Nothing
            ]
    , T.node "pB" "Keynote" "folder" False <|
        Just
            [ T.node "pBf1" "workshop_part1.ppt" "powerpoint" True Nothing
            , T.node "pBf2" "workshop_part2.ppt" "powerpoint" True Nothing
            , T.node "pBf3" "image1.png" "image" True Nothing
            , T.node "pBf4" "image2.ppt" "image" True Nothing
            , T.node "pBf5" "image3.ppt" "image" True Nothing
            , T.node "pBf5" "image4.ppt" "image" True Nothing
            ]
    ]

type Node

= Node Key Title Options Children

Node is an item of treeview.

Each node has:

an unique key
a title
a list of options (see Options)
maybe list of children.

type alias Options =

{ style : StyleName

, selectable : Selectable

, opened : Opened

, disabled : Disabled

, visible : Visible

, checked : Checked

}

Define the option of current node.

Options:

style: node style defined in Config.look.styles
selectable: True if the node is clickable
opened: True if the children are visibles
disabled: to disable the node (children handle and node selection)
visible: to hide the node
checked: to select the node (required Config.checkbox.enable = true).

type alias Styles =

List Style

List of node's styles.

Example:

styles : Styles
styles =
    [ T.Style "folder" ( "folder yellow", "folder-open yellow" ) ""
    , T.Style "archive" ( "file-archive-o", "file-archive-o" ) ""
    , T.Style "word" ( "file-word-o", "file-word-o" ) "blue"
    , T.Style "image" ( "file-image-o", "file-image-o" ) ""
    , T.Style "pdf" ( "file-pdf-o", "file-pdf-o" ) "red"
    , T.Style "powerpoint" ( "file-powerpoint-o", "file-powerpoint-o" ) "orange"
    , T.Style "excel" ( "file-excel-o", "file-excel-o" ) "green"
    ]

type alias Style =

{ name : StyleName

, icon : Icon

, class : Class

}

Define the style of node.

Options:

name: a unique id of style
icon: icon when the node is closed and when the node is opened
class: CSS class of node.

Note: the CSS class opened is added when the node is opened thus you can defined a custom style in function of node state:

.myNodeStyle {
  ...
  .opened {...}
}

type Sort

= None

| Asc

| Desc

Sort the node from the title:

None = no sort
Asc = ascending order
Desc = descending order

default : Styles -> Config

Create a default Config in function of list of styles.

node : Key -> Title -> StyleName -> Selectable -> Children -> Node

Shortcut to create a new Node.

nodeKey : Node -> Key

Get the node key.

nodeChildren : Node -> Children

Get the node children.

setNodeChildren : Children -> Node -> Node

Set the node children.

nodeTitle : Node -> Title

Get the node title.

toggleNode : Node -> Node

Toggle the node opening.

setNodeVisible : Visible -> Node -> Node

Set the node visibility.

nodeVisible : Node -> Visible

Get the node visibility.

toggleAll : Model -> Model

Toggle all items.

toggle : Key -> Model -> Model

Toggle the opened options.

Messages

type Msg

= Toggle Key

| Select Key

| Search String

| ToggleCheck Bool Bool Key Bool

Messages of treeview:

Toggle Key: open / close a node
Select Key: click on the title of node
Search String: filter search
ToggleCheck Multiple Cascade Key Value: check/uncheck a node checkbox.

update : Msg -> Model -> Model

The treeview update function.

View

view : Config -> Model -> Html Msg

Tree treeview view function.

Modules

Treeview

gribouille/elm-treeview/2.0.2

Treeview

Model

Messages

View

Modules