StackedTree

StackedTree is an object to display data with multi sub levels while only displaying one level at a time and a path to the previous (parent) level.

Stack

Extends

 Uxi, Touch

Requires

 DynamicList

OML

 {"selector:StackedTree":{CONFIG}}

Create

StackedTree can also be created on the fly, at runtime

 let config = {
      el:_SELECTOR_, //Required, selector
      scope:_ARRAY_, //Optional, array of scope
      enabled:true|false, //Optional, defaults to true
      speed:_INT_ //Optional, Transition speed, defaults to 200,
      list:_ARRAY_ //See below
 };

From an object extending Uxi

 let tree = this.create('StackedTree', config);

Independently

 let tree = OGX.Object.create('StackedTree', config);

Data structure

OGX.StackedTree accepts a virtually unlimited amount of nodes and sub nodes. The format per node is the following:

 {
      label:_STRING_, //Required, the label of the node,
      icon:_STRING_, //Optional, a CSS icon class
      scope:_ARRAY, //Optional, The array of scope for which this node is visible
      items:_ARRAY_ //Optional, sub nodes
 }

Here is a practical example

 {
      el:'#mydiv',...
      list:[
           {label:'Meat', icon:'meat', items:[
                 {label:'Beef', icon:'beef'},
                 {label:'Chicken', icon:'chicken'},
                 {label:'Pork', icon:'pork'}
           ]},
           {label:'Fish', icon:'fish', items:[
                 {label:'Salmon', icon:'salmon'},
                 {label:'Trout', icon:'trout'},
                 {label:'Sole', icon:'sole'}
           ]}
      ]
 }

Scope

OGX.StackedTree supports scoping, meaning that, depending on your user class, you can chose to hide certain nodes of the tree. For instance, if you wish to display a bigger tree with more information if a user is logged, such as

 {
      el:'#myDiv',
      scope:['public'],
      list:[
          {label:'Meat', icon:'meat', scope:['public', 'user']}, 
          {label:'Fish', icon:'meat', scope:['user']}
      ]
 }

In this case, the component is initiated with only one scope in its scope array, the public scope, so it will only display the nodes that have at least public in its scope array. In this example, only the Meat node will be displayed.

Now if your visitor logs in and you now wish to display the Meat node, you can update the scope of the component to reflect that, such as

 tree.setScope(['user']);

The component will display all nodes with the user scope in its scope array, or even do

 tree.setScope(['public', 'user']);

Now the component will display all nodes with public and/or user scope

Methods

 tree.enable();
 tree.disable();
 tree.setScope(_ARRAY_);
 tree.prev();
 tree.reset();
 tree.destroy();

Events

 OGX.StackedTree.CHANGE
 OGX.StackedTree.SELECT