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
}
{ 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:
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 } }
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
]
]
Node is an item of treeview.
Each node has:
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 clickableopened
: True
if the children are visiblesdisabled
: to disable the node (children handle and node selection)visible
: to hide the nodechecked
: to select the node (required Config.checkbox.enable = true
).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"
]
{ name : StyleName
, icon : Icon
, class : Class
}
Define the style of node.
Options:
name
: a unique id of styleicon
: icon when the node is closed and when the node is openedclass
: 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 {...}
}
Sort the node from the title:
None
= no sortAsc
= ascending orderDesc
= descending orderdefault : 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 of treeview:
Toggle Key
: open / close a nodeSelect Key
: click on the title of nodeSearch String
: filter searchToggleCheck Multiple Cascade Key Value
: check/uncheck a node checkbox.update : Msg -> Model -> Model
The treeview update function.
view : Config -> Model -> Html Msg
Tree treeview view function.