Treelist UI Component
This component can render a hierarchical list from a given model which is a tree of objects. It also supports user interactions to control the view (e.g. collapsing/expanding nodes) and fires events for all user interactions detected on the list. Each list item can have different states where each if these pre-defined states influences both the visual representation as well as the user interactions and events triggered. That said, the component is an EventEmitter using the Ember.Evented mixin. The treelist component uses local storage capabilities to preserve the collapse/expand state for a given instance across page views and sessions.
Node Model
A tree node is represented with the following properties:
{ id: "unique identifier of the node", html: "html content of the list item", link-to: "route name this item links to", className: "css class names", collapsed: true|false, selected: true|false, virtual: true|false, children: [ /* list of node objects */ ], }
List Properties / Constructor Arguments
TBD.
Node States
- Default
- Selected
- Collapsed
- Virtual - not selectable, does not fire click events
Events triggered
- click
- select
- collapse
- expand
HTML representation
The DOM representation shall use nested <ul> and <li> elements which comply with the WAI ARIA standards to provide the necessary information to assistive technologies. This means the addition of proper role, aria-expanded, aria-selected etc. attributes.
- Last Author
- bruederli
- Last Edited
- Dec 8 2015, 10:33 PM