Page MenuHomePhorge

Treelist UI Component
Updated 3,032 Days AgoPublic

Version 1 of 3: You are viewing an older version of this document, as it appeared on Dec 8 2015, 10:26 PM.

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",
  className: "css class names",
  collapsed: true|false,
  virtual: true|false,
  children: [ /* list of node objects */ ],
}
NOTE: Do we even need the ability to provide custom templates to be used for rendering a list item? Think of a mailbox list showing badges with the unread messages count.

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:26 PM

Event Timeline

bruederli edited the content of this document. (Show Details)
bruederli edited the content of this document. (Show Details)