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.