behavior:tree-checkmarks

Behavior of hierarchical <select> lists with checkmarks. It can be applied to any block level container.

Elements

These elements have behavior:select applied by default:

• <select|tree multiple=checkmarks></select>

Model

The behavior recoginizes two types <option>s:

• "Leaf" <option>'s that do not contain other <option>s;
• "Node" <option>s that contain textual element followed by other <option>s.

<option>
    <caption>Node caption</caption>
    <option>Leaf 1</option>
    <option>Leaf 2</option>
</option>

Selected option will have :current  state flag set.

Node <option> gets :node runtime flag set (and corresponding CSS pseudo-class) on it by the runtime. Therefore selectors:

• option:node - match all node options;
• option:not(:node) - match all leaf nodes.

Each leaf can be marked as :checked  and each node can have one of following state slags:

• option:node:incomplete - the node contains mix of :checked and :not(:checked) leafs.
• option:node:checked - the node contains only :checked leafs.
• option:node:not(:checked) - the node contains only :not(:checked) leafs.

option:node may have either :expanded or :collapsed runtime flag set in response to UI events (mouse and keyboard events).

The behavior supports so called "virtual tree" mode. Initially the tree may have all node options collapsed and empty and populate them upon ELEMENT_EXPANDED event receiving. And clear on ELEMENT_COLLAPSED event to minimize memory needed to represent the tree. See sdk/samples/ideas/virtual-tree/ sample.

Attributes

• expanded on <option> - <option expanded> will get :expanded state by default.

Events

Other than standard set of events (mouse, keyboard, focus) behavior:tree-checkmarks generates:

• SELECT_SELECTION_CHANGED event, generated when user changes selection of the select (click on one of options). Posted event;
• SELECT_SELECTION_CHANGING event, selection is about to change. Synchronous event;
• SELECT_STATE_CHANGED event, :checked state of some option has changed by the user;
• ELEMENT_EXPANDED event, is sent to node option that gets expanded;
• ELEMENT_COLLAPSED event, is sent to node option that gets collapsed.

Methods

N/A - behavior:tree-checkmarks does not introduce any specific methods.

Value

any, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined.

Tree events handling in script

raw onControlEvent handler

var btn = $(select#some);
btn.onControlEvent = function(evt)
{
  switch(evt.type) {
    case Event.SELECT_SELECTION_CHANGED: /* current option was changed */ break;
    case Event.ELEMENT_EXPANDED: /* evt.target is expanded */ break;
    case Event.ELEMENT_COLLAPSED: /* evt.target is collapsed */ break;
  }
}

on() subscription

var sel = $(select#some);
sel.on("change", function() { ... event handling code ... });
sel.on("expand", "option", function() { ... event handling code ... });
sel.on("collapse", "option", function() { ... event handling code ... });

decorators.tis handler

include "decorators.tis";
@when Event.ELEMENT_EXPANDED @on "select#some" :: ... event handling code ...;
@when Event.ELEMENT_COLLAPSED @on "select#some" :: ... event handling code ...;