Treeview¶

Methods¶

add()¶

The element can be either .tree-view or .tree-view-item. Target element = .tree-view or .tree-view-item.

SDB.Treeview.add( element, 'string' ); // returns the added element.

You can also feed it an array, in which case it adds multiple items. Target element = .tree-view or .tree-view-item.

SDB.Treeview.add( element, ['string 1', 'string 2'] ); // returns the added element.

Exported .tree-view-item elements will have all kinds of data-attributes but this method doesn't add any of them.

Note

Each item is given a new: data-tree-item-id attribute so you can hook into that if necessary. This is is unique in the scope of the .tree-view. Meaning that you can have any number of .tree-view items with identical amount of items and they all contains the same ids. So be sure to target the specific .tree-view when using these IDs.

remove()¶

Target element = .tree-view-item.

SDB.Treeview.remove( element );

expand()¶

Show child elements. Target element = .tree-view-item.

SDB.Treeview.expand( element );

collapse()¶

Hide child elements. Target element = .tree-view-item.

SDB.Treeview.collapse( element );

text()¶

Retrieve text from the specified item. Target element = .tree-view-item.

SDB.Treeview.collapse( element );

empty()¶

Empties the whole treeview or node, so the target element can be either .tree-view or .tree-node.

SDB.Treeview.empty( element );

expandAll()¶

Target element can be .tree-view or .tree-view-item;

SDB.TreeView.expandAll( element ); // Returns an array with the expanded nodes

collapseAll()¶

Target element can be .tree-view or .tree-view-item;

SDB.TreeView.collapseAll( element ); // Returns an array with the collapsed nodes

onClick eventListener¶

Always attached to the .tree-view element. Never to .tree-view-item.

element.addEventListener('onClick', function( e ) {
  console.log( e.detail );
});

Real world examples¶

Add new item & expand¶

Tree view items can be expanded before any child items are added...

var treeview = SDB.id(1);
var node = SDB.Treeview.add( treeview, 'New item');
SDB.Treeview.expand( node );

Add new item inside another¶

In this case, since the add() method returns the added item, we are using the variable defined in the previous code block above. To make an item a parent (node), you don't need to prepare it in any way. Just add a new item.

Also in this example I added a new class...

The node variable is defined in the first example under the heading: Add new item & expand.

SDB.Treeview.add( node, 'Another item)').classList.add('remove-on-click');

Custom `onClick` event¶

This can only be attached to the treeview element: .tree-view. It can't be attached to .tree-view-item elements. Continuing from the last 2 examples, we check if the clicked item has a class remove-on-click and if it does, the item is removed when clicked.

Here I'm using item.remove(); instead of SDB.Treeview.remove( item );. Either one will work just fine. The latter method has an added check to see it is a .tree-view-item, but otherwise it's the same.

The treeview is defined in the first example under the heading: Add new item & expand.

treeview.addEventListener('onClick', function( e ) {
  var item =  e.detail.element;
  if ( item.classList.contains('remove-on-click') ) {
    item.remove();
  }
});

Remove item¶

Each tree item has a unique id data-tree-item-id within the scope of its parent treeview. This probably your best bet if you need to target a specific node and you didn't get a chance to store it in a variable when added.

pick('[data-tree-item-id="1"]', treeview).remove();

Data-attribute¶

Each tree item has a unique id data-tree-item-id within the scope of its parent treeview. This probably your best bet if you need to target a specific node and you didn't get a chance to store it in a variable when added.

SDB.Treeview.add( pick('[data-tree-item-id="3"]', treeview), 'New item');

Populating with an array¶

First item of each array becomes a parent (tree-node). This is the output.

var itemList = [
  'List (A)', // This becomes a node
  'List (A1)',
  [
    'List (A2)',  // This becomes a node
    'List (B1)',
    'List (B2)',
    [
      'List (B3)',  // This becomes a node
      'List (C1)',
      'List (C2)',
      'List (C3)',
      'List (C4)',
      'List (C5)',
      'List (C6)',
      'List (C7)',
      'List (C8)'
    ]
  ],
  'List (A3)'
];

var treeview = SDB.id(1);
SDB.Treeview.add( treeview, itemList);

Populating with an array #2¶

Same thing as before except to preserve the first level, each item of that first level is added separately using for loop. First item of each array becomes a parent (tree-node), but doing it this way makes an exception for the first level. This is the output.

var itemList = [
  'List (A1)',
  'List (A2)',
  [
    'List (A3)', // This becomes a node
    'List (B1)',
    'List (B2)',
    [
      'List (B3)', // This becomes a node
      'List (C1)',
      'List (C2)',
      'List (C3)',
      'List (C4)',
      'List (C5)',
      'List (C6)',
      'List (C7)',
      'List (C8)'
    ]
  ],
  'List (A4)'
];

var treeview = SDB.id(1);
for ( var text of itemList ) {
  SDB.Treeview.add( treeview, text);
}

Expand Everything¶

Target element can be .tree-view or .tree-view-item;

var treeview = SDB.id(1);
var expandedNodes = SDB.Treeview.expandAll( treeview );

Collapse at a specific node¶

var treeview = SDB.id(1);
var node = pick('[data-tree-item-id="1"]', treeview);
var collapsedNodes = SDB.Treeview.collapseAll( node );

Empty a node¶

When a node is emptied, it loses the little chevron.

SDB.Treeview.empty( pick('[data-tree-item-id="2"]') );

HTML structure¶

I made some manual changes to the HTML to make it more readable. All parent tree items are marked with (node) in the comments.

Classes	Description
`.tree-node`	Every time `.tree-view-item` has the class `.tree-node` it has at least one child item.
`.expanded`	Children are hidden by default. This class makes them visible.

Simplified HTML¶

Where it says Item text lives here, there's actually two child span elements there.

<div class="panel tree-view">
  <div class="padding-box">

    <!-- Item 1 -->
    <div class="tree-view-item">
      <div class="item-wrap"><!-- Item text lives here --></div>
      <div class="padding-box"></div>
    </div>

    <!-- Item 2 (node)-->
    <div class="tree-view-item tree-node expanded">
      <div class="item-wrap"><!-- Item text lives here --></div>
      <div class="padding-box">

        <!-- Item 3-->
        <div class="tree-view-item">
          <div class="item-wrap"><!-- Item text lives here --></div>
          <div class="padding-box"></div>
        </div>

      </div> <!-- / .padding-box-->
    </div> <!-- / Item 2 (node)-->

  </div> <!-- / .padding-box-->
</div> <!-- / Treeview-->

Full HTML¶

Expand code here

<div class="panel tree-view" data-parent="true" data-item-type="treeview" data-item-name="treeView1" data-item-id="1" data-item-parent-id="0">
  <div class="padding-box">

    <!-- Tree item 1 (node)-->
    <div class="tree-view-item tree-node expanded" data-parent="true" data-item-type="treeitem" data-item-name="tvItem1" data-item-id="2" data-item-parent-id="1">
      <div class="item-wrap">
        <span class="tree-view-arrow"><svg></svg></span>
        <span class="text-container" contenteditable="false">TreeItem</span>
      </div>
      <div class="padding-box">

        <!-- Tree item 2 (node)-->
        <div class="tree-view-item tree-node" data-parent="true" data-item-type="treeitem" data-item-name="tvItem2" data-item-id="4" data-item-parent-id="2">
          <div class="item-wrap">
            <span class="tree-view-arrow"><svg></svg></span>
            <span class="text-container" contenteditable="false">TreeItem</span></div>
          <div class="padding-box">

            <!-- Tree item 3 -->
            <div class="tree-view-item" data-parent="true" data-item-type="treeitem" data-item-name="tvItem3" data-item-id="5" data-item-parent-id="4">
              <div class="item-wrap">
                <span class="tree-view-arrow"><svg></svg></span>
                <span class="text-container" contenteditable="false">TreeItem</span>
              </div>
              <div class="padding-box"></div>
            </div>
            <!-- Tree item 4 (node)-->
            <div class="tree-view-item tree-node expanded" data-parent="true" data-item-type="treeitem" data-item-name="tvItem4" data-item-id="6" data-item-parent-id="4">
              <div class="item-wrap">
                <span class="tree-view-arrow"><svg></svg></span>
                <span class="text-container" contenteditable="false">TreeItem</span>
              </div>
              <div class="padding-box">

                <!-- Tree item 5 -->
                <div class="tree-view-item active" data-parent="true" data-item-type="treeitem" data-item-name="tvItem5" data-item-id="9" data-item-parent-id="4">
                  <div class="item-wrap">
                    <span class="tree-view-arrow"><svg></svg></span>
                    <span class="text-container" contenteditable="false">TreeItem</span>
                  </div>
                  <div class="padding-box"></div>
                </div>

              </div> <!-- / .padding-box-->
            </div> <!-- / Tree item 4 (node)-->

          </div> <!-- / .padding-box-->
        </div> <!-- / Tree item 2 (node)-->

      </div> <!-- / .padding-box-->
    </div> <!-- / Tree item 1 (node)-->

    <!-- Tree item 6 (node)-->
    <div class="tree-view-item tree-node expanded" data-parent="true" data-item-type="treeitem" data-item-name="tvItem6" data-item-id="3" data-item-parent-id="1">
      <div class="item-wrap">
        <span class="tree-view-arrow"><svg></svg></span>
        <span class="text-container" contenteditable="false">TreeItem</span>
      </div>
      <div class="padding-box">

        <!-- Tree item 7 -->
        <div class="tree-view-item" data-parent="true" data-item-type="treeitem" data-item-name="tvItem7" data-item-id="7" data-item-parent-id="3">
          <div class="item-wrap">
            <span class="tree-view-arrow"><svg></svg></span>
            <span class="text-container" contenteditable="false">TreeItem</span>
          </div>
          <div class="padding-box"></div>
        </div>
        <!-- Tree item 8 -->
        <div class="tree-view-item" data-parent="true" data-item-type="treeitem" data-item-name="tvItem8" data-item-id="8" data-item-parent-id="7">
          <div class="item-wrap">
            <span class="tree-view-arrow"><svg></svg></span>
            <span class="text-container" contenteditable="false">TreeItem</span>
          </div>
          <div class="padding-box"></div>
        </div>

      </div> <!-- / .padding-box-->
    </div> <!-- / Tree item 6 (node) -->

  </div> <!-- / .padding-box-->
</div> <!-- / Treeview -->

Treeview¶

Methods¶

add()¶

remove()¶

expand()¶

collapse()¶

text()¶

empty()¶

expandAll()¶

collapseAll()¶

onClick eventListener¶

Real world examples¶

Add new item & expand¶

Add new item inside another¶

Custom onClick event¶

Remove item¶

Data-attribute¶

Populating with an array¶

Populating with an array #2¶

Expand Everything¶

Collapse at a specific node¶

Empty a node¶

HTML structure¶

Simplified HTML¶

Full HTML¶

Custom `onClick` event¶