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 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.

Messages

type Msg

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/1.0.0

Treeview

Model

Messages

View

Modules