my-list-tree

What is this?

It renders a tree written by ul and li using lines.

Example

HTML:

<div class="tree">
  Root node
  <ul>
    <li>Child 1
      <ul>
        <li>
          <div>I'm grandson!<br>Oh my god</div>
          <ul>
            <li>Hidden child</li>
          </ul>
        </li>
        <li>Who am I?</li>
      </ul>
    </li>
    <li>
      Child 2
      <ul>
        <li>
          Another son
        </li>
      </ul>
    </li>
  </ul>
</div>

Rendering result:

Root node

Child 1
- I'm grandson!
  Oh my god
  - Hidden child
- Who am I?
Child 2
- Another son

Usage

<script src="path/to/my-list-tree.min.js"></script>
<script>
  MyListTree.run('.tree');
</script>

Advanced usage

No-branch child

A child with no horizontal branch rendered can be made by giving <li> a certain class:

<div class="tree">
  Root node
  <ul>
    <li>Child 1
      <ul>
        <li class="no-branch"> ← Here is something!</li>
        <li>First child</li>
        <li>Who am I?</li>
      </ul>
    </li>
    <li>
      Child 2
      <ul>
        <li>
          Another son
        </li>
      </ul>
    </li>
    <li class="no-branch">No more child!</li>
  </ul>
</div>

and by passing the corresponding option to MyListTree.run:

<script>
  MyListTree.run('.tree', {
    noBranchClass: 'no-branch',
  });
</script>

Rendering result

Root node

Child 1
- ← Here is something!
- First child
- Who am I?
Child 2
- Another son
No more child!

Options

There are several options passed to MyListTree.run. Most of them are to control class names attached to the generated tree structure.

See lib/types.ts for details.

How it works

MyListTree.run adds a new <style> for styling trees to the <head> element.

It also adds some <div>s to trees for styling, preserving their <ul> and <li> structure.