abinayasudhir / elm-treeview / 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 : Basics.Bool
, multiple : Basics.Bool
, cascade : Basics.Bool }
, search : { enable : Basics.Bool }
, sort : Sort
, look : { theme : String
, styles : Styles } 
}

Configure the treeview component.

Options:

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:


type alias Options =
{ style : StyleName
, selectable : Selectable
, opened : Opened
, disabled : Disabled
, visible : Visible
, checked : Checked 
}

Define the option of current node.

Options:


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:

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:

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 Basics.Bool Basics.Bool Key Basics.Bool

Messages of treeview:

update : Msg -> Model -> Model

The treeview update function.

View

view : Config -> Model -> Html Msg

Tree treeview view function.