SpecMarkup - mar10/fancytree GitHub Wiki

Vision

Fancytree should generate clean html markup.

Status

This feature is already implemented.

Yet there are still open questions, so this feature is open for discussion and the API is subject to change.

Please discuss here: https://github.com/mar10/fancytree/issues/16

Requirements

As simple as possible.
Element structure and class names should provide maximum flexibility for CSS styles, etc.

Discussion

Resources

Problems

Fancytree should behave like a single control, i.e. it should be 'tabbable'.
It must be possible to use [TAB] to enter the tree control and set focus to the currently active node. A second [TAB] press will then leave the tree control.
We don't use <a> tags anymore (which are tabbable by default). Instead tabindex="0" is set on the container only.
This has to be tested with 'tabbable' on and off.
Still issues with ARIA (SpecAria).
This may require changes to the standard markup.

Proposal

Current Specification

A node 'item 1' with one sub node 'Sub item 1.1' is rendered like this (assuming no Aria and checkboxes):

<div id="tree">
  <ul class="ui-fancytree fancytree-container" tabindex="0" >
    <li class="">  <!-- A reference to the FancytreeNode instance is stored in the li.ftnode property. -->
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
        <span class="fancytree-expander"></span>
        <span class="fancytree-icon"></span>
        <span class="fancytree-title" title="Look, a tool tip!">Item1 with tooltip</span>
      </span>
      <ul>
        <li class="">  <!-- A reference to the FancytreeNode instance is stored in the li.ftnode property. -->
          <span class="fancytree-node fancytree-active fancytree-has-children focused fancytree-exp-c fancytree-ico-c">
            <span class="fancytree-expander"></span>
            <span class="fancytree-icon"></span>
            <span class="fancytree-title">Sub-item 1.1</span>
          </span>
        </li>
      </ul>
    </li>
  </ul>
</div>