Tree JS

import Tree from "@natachah/vanilla-frontend/js/_tree"

WARNING

The role=tree and role=treeGrid are not accessible !

Syntax

The tree component make you able to make a tree view by adding the role="tree" attribute on a <ul> or <ol> tag.

The <li> must have a role="treeitem", and if nested the aria-expanded and aria-owns attributes.

html

<ul class="demo-tree">
    <li>1: Lorem, ipsum</li>
    <li>
        <button role="link" aria-controls="treelist" aria-expanded="false">
            1: Inventore, perspiciatis (Open)
        </button>
        <ul id="treelist" tabindex="0" hidden>
            <li>2: Lorem</li>
            <li>
                <button role="link" aria-controls="subtreelist" aria-expanded="false">
                    2: Adipisci (Open)
                </button>
                <ul id="subtreelist" tabindex="0" hidden>
                    <li>3: Lorem</li>
                    <li>3: Adipisci</li>
                    <li>3: Facilis</li>
                </ul>
            </li>
            <li>1: Facilis</li>
        </ul>
    </li>
    <li>1: Dolor, quis</li>
</ul>

js

import Tree from "@natachah/vanilla-frontend/js/_tree"
const trees = document.querySelectorAll('.demo-tree')
if (trees) trees.forEach(tree => new Tree(tree))

WARNING

Into a <li> you must add a <button> to toggle the children, otherwise it will toggle if you click on any child.

Options

Table

This can also be implemented on a <table> but it required the role="treegrid" attribute.

<table id="treeGrid" class="demo-tree" role="treegrid">
    <tbody>
        <tr aria-level="1">
            <td>1: Lorem, ipsum</td>
        </tr>
        <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
            <td>1: Cum, dolorum (open me)</td>
        </tr>
        <tr id="row1" aria-level="2" tabindex="0" hidden>
            <td>2: Lorem</td>
        </tr>
        <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
            <td>2: Quo (open me)</td>
        </tr>
        <tr id="row2-1" aria-level="3" tabindex="0" hidden>
            <td>2.1: Quo</td>
        </tr>
        <tr id="row2-2" aria-level="3" hidden>
            <td>2.2: Quo</td>
        </tr>
        <tr id="row3" aria-level="2" hidden>
            <td>2: Odio</td>
        </tr>
        <tr aria-level="1">
            <td>1: Perspiciatis, tenetur</td>
        </tr>
    </tbody>
</table>

Handles

You can decide which part of the item toggle the open/close method with the data-handle="tree" attribute

<table class="demo-tree">
    <tbody>
        <tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
            <td>
                <span data-handle="tree">
                    (open me)
                </span>
            </td>
            <td>1: Cum, dolorum</td>
        </tr>
        <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
            <td></td>
            <td>1.1: Lorem</td>
        </tr>
    </tbody>
</table>

If there is an <svg> as handle, the default style will provide an animation.

Javascript

Method	Description
resetEvents()	This method will reset the items and events

Events

Event name	Description	Value
tree:changed	This event is fired when an item is toggled	isOpen as a boolean

const myTree = document.getElementById('myTree')

myTree.addEventListener('tree:changed', (e) => {
    const isOpen = e.detail.isOpen
    ...
})