Tree

OGX.Tree is a component to display and edit trees such as, but not limited to, a folder and file structure. It supports custom icons and separated operating modes, meaning any type of item can act as a folder and have children. In editable mode, tree items are drag-n-drop-able into one another.

OGX.Tree requires OGX.Templater.

Instantiate

 let tree = new OGX.Tree({
      container:_SELECTOR_, //HTML element containing the tree
      editable:_BOOLEAN_, //Editable (drag-n-drop)
      reorder:_BOOLEAN_, //Sort by label once a modification has occured
      toggle:_BOOLEAN_, //Selection mode, if enabled, items can be unselected once selected
      icon_path:_STRING_, //The path to your image folder where icons are stored,
      types:_ARRAY_, //Array of icon types, see types subsection,
      tree:_OBJECT_ //Optional, The actual tree data/structure
 });

Item Types

OGX.Tree can handle a virtually unlimited amount of different icons. The operating modes are dissociated from the display. For instance, you could have a file that act as a folder. The base object structure for a type is as follow:

 {  
      type:_STRING_, 
      mode:_OPERATING_MODE_, //Either _file_ (doesn't have children) or _folder_
      icons:{open:_FILENAME_, close:_FILENAME_}}, //Either icons or icon, read bellow
      icon:_FILENAME_
 }

If you item is operating as a folder, meaning it can have children, you can either use the icons property to store the icons for this item for its two different states, open or close. If you wish to use the same icon, or don't change the icon based on the state, use icon instead. Note that if your operating mode is file then you must use icon and not icons since the file operating mode only has one state.

Here is a basic types configuration for a simple folder and files tree.

 let types = [
      {type:"folder", mode:"folder", icons:{open:"folder_opened.png", close:"folder_closed.png"}},
      {type:"file", mode:"file", icon:"file.png"}
 ];

Tree data format

Here is the data format of a node of tree. If you wish to store custom data, use the data property to do so.

 {
      type:_STRING_, //The type of node, must be an existing type as declared in _types_ 
      label:_STRING_, //The label of the node
      state:_STRING_, //An optional state, either "open" or "close" 
      data:*, //Optional data, can be of any type (object, array, number etc.)
      items:[] //An array of nodes representing its children
 }