Groot

A UI tree for working with nested content.

• Groot
  • Prerequisites
  • Installation
    • As an ES2015 module
    • As an ES5 script
    • Styles and fonts
  • Building the project
  • Usage
    • Creating your tree
    • Adding custom meta-data
    • Listening for events
  • The public Groot API
  • The public Leaf API
  • Special terms
  • TODO

Prerequisites

If you intend to use Groot as an ES2015 module, you will need:

1. a transpiler such as Webpack + babel to build your project,
2. an ES2015 polyfill library, such as babel-polyfill, and
3. a Handlebars template loader, such as handlebars-loader.

To see how these work together refer to the project's webpack.config.js file, specifically the entry and modules sections.

If you intend to use Groot as an ES5 script, no other prerequisites are necessary.

Installation

As an ES2015 module

Install Groot with npm.

$ npm install --save @enotes/groot

Import the Groot constructor into your own module.

import { Groot } from 'groot';

As an ES5 script

Copy the Groot assets in the dist/ folder to the appropriate vendor location in your project structure, e.g., scripts/vendor/groot/.

Reference the Groot assets in your HTML document.

<!-- creates window.Groot -->
<script src="scripts/vendor/groot/groot.es5.js"></script>
<script>console.log(window.Groot);</script>

Styles and fonts

The Groot style sheet and fonts are located in the dist/ folder. You can copy these artifacts to your own project, but be aware that the stylesheet assumes that its fonts are located in a sibling fonts/ directory. If this does not match your project structure you can:

• manually edit the groot.css file to suit your needs, or
• if you use Sass, you can:
  1. set the $icomoon-font-path variable to the path where your font files reside
  2. import the src/groot.scss file into your own stylesheet
  3. recompile your stylesheet

The core Groot css style selectors are:

Selector	Purpose
.groot-tree	Base unordered list. Contains .groot-leaf list items.
.groot-leaf	Individual list item. May contain neseted .groot-tree element.
.groot-icon	All icons.
.groot-leaf__toggle	The expand/collapse icon.
.groot-leaf__up	The up arrow icon.
.groot-leaf__down	The down arrow icon.
.groot-leaf__label	The text in a .groot-leaf element. Will have .active or .inactive classes. Will have .drag-target class on drag events. Has :hover pseudo-selector.
.groot-leaf__label-field	The input element for creating/editing leafs.
.groot-menu	The pop-up menu.
.groot-menu__label	Items on the pop-up menu.
.groot-menu__close	The pop-up menu close button.

Building the project

Install the Groot npm dependencies to ensure that the build tools are present.

$ npm install

The Groot distribution artifacts are pre-built and are located in the dist/ folder. These assets are re-built with the command:

$ npm run-script build

The build script relies on bash shell commands and will not work correctly in non-bash environments.

Usage

Creating your tree

Create a tree by iterating over some data and transforming it into instances of Groot.Leaf.

const rootLeaf = new Groot.Leaf('root leaf');
let child = rootLeaf.branch('child leaf 1');
child.branch('child leaf 1.1');
child.branch('child leaf 1.2');
rootLeaf.branch('child leaf 2');
child = rootLeaf.branch('child leaf 3');
child.branch('child leaf 3.1');
// etc.

const containerElement = document.querySelector('#some-container');
const tree = new Groot(containerElement, rootLeaf);
rootLeaf.expand(true);
tree.render();

See src/demo.js for a more complete example.

Adding custom meta-data

Leafs can contain custom meta-data in the form of attributes.

const leaf = tree.branch('child leaf');
leaf.setAttribute('myCustomID', 123);

Setting custom meta-data on a leaf allows you to dereference the leaf against your application's own data. Custom meta-data also plays a part in Groot events (discussed below) and may be changed during leaf creation, or when async events are raised.

Listening for events

Groot raises events for nearly every tree operation. Some of these will require you to commit to, or cancel an operation before it completes.

Event	Description	Async?	Multisource?	Special Properties
rendering	the tree is about to be rendered in the DOM	no	no
rendered	the tree has been rendered in the DOM	no	no
leaf.moving	a leaf is moving	yes	yes	direction=up,down,first,last,to,parent,before,after
leaf.moved	a leaf has moved	no	yes	see: leaf.moving
leaf.clicking	a leaf is being clicked on	no	no	isRightClick={Boolean}
leaf.clicked	a leaf has been clicked on	no	no	see: leaf.clicking
leaf.dragging	a leaf is starting to be dragged	no	no
leaf.dragged	a leaf has been dragged	no	no
leaf.dropping	a leaf is starting to be dropped onto another leaf	no	yes
leaf.dropped	a leaf has been dropped onto another leaf	no	yes
leaf.renaming	a leaf is about to be renamed	yes	no	isNew={Boolean}, label={String}
leaf.renamed	a leaf has been renamed	no	no	see: leaf.renaming
leaf.unnamed	a leaf has been unnamed (pending rename is canceled)	no	no	see: leaf.renaming
leaf.expanding	a leaf is about to expand	no	no	deep={Boolean}
leaf.expanded	a leaf has expanded	no	no	see: leaf.expanding
leaf.collapsing	a leaf is about to collapse	no	no	deep={Boolean}
leaf.collapsed	a leaf has collapsed	no	no	see: leaf.collapsing
leaf.deleting	a leaf is about to be deleted	yes	no
leaf.deleted	a leaf has been deleted	no	no
leaf.creating	a leaf is about to be created	no	no	projectedPosition={Number}
leaf.created	a leaf has been created	no	no	see: leaf.creating
leaf.pruning	a leaf is about to be pruned	no	no
leaf.pruned	a leaf has been pruned	no	no
leaf.activating	a leaf is about to be activated	no	no	deep={Boolean}
leaf.activated	a leaf has been activated	no	no	see: leaf.activating
leaf.disabling	a leaf is about to be disabled	no	no	deep={Boolean}
leaf.disabled	a leaf has been disabled	no	no	see: leaf.disabling
menu.clicking	a menu item is about to be clicked	no	no	action=create,rename,delete,move-to,move-up,move-down,move-first,move-last,move-before,move-after,make-parent,activate-children,disable-children,close
menu.clicked	a menu item has been clicked	no	no	see: menu.clicking
menu.showing	the menu is about to show	no	no
menu.shown	the menu has been shown	no	no	(menu options)
menu.hiding	the menu is about to be hidden	no	no
menu.hidden	the menu has been hidden	no	no	(menu options)

For convenience, event names may be referenced by using the Groot.EVENTS object. For example:

Groot.EVENTS.RENDERED === 'rendered'
Groot.EVENTS.LEAF.DELETING === 'leaf.deleating'
Groot.EVENTS.MENU.HIDDEN === 'menu.hidden'
// etc.

Subscriptions to Groot events are established by calling its on() method with a callback.

tree.on(Groot.EVENTS.LEAF.MOVING, (eventArgs) => {
    // handle the event
});

All event callbacks will receive an eventArgs object. This will contain contextual information about the event. If a single node is involved, the eventArgs object will contain a source property with information about that node. If two nodes are involved (e.g.., drag-n-drop, or "Assign parent"), the event is deemed "multisource", and the eventArgs object will contain both source and target properties with information about the originator of the action (source) and the receiver of the action (target). These properties will also contain all of the custom meta-data added to their corresponding leafs.

Synchronous events cannot be stopped, but asynchronous events can be stopped. An asynchronous eventArgs object will contain two methods, commit() and cancel(), either of which must be called to finish the asynchronous operation. For example:

tree.on(Groot.EVENTS.LEAF.DELETING, (eventArgs) => {
    api.delete(eventArgs.source.myCustomID).then(() => {
        // success -- the tree node will be removed
        eventArgs.commit();
    }, (err) => {
        // failure -- the tree node will remain
        eventArgs.cancel();
    });
});

The public Groot API

After a Groot object is created the tree may be manipulated through the Groot public API, and through events that it raises. At present the public API is fairly terse but more functionality may be added later. The Groot object is designed to emit events, and perform its own internal operations as the application code responds to those events, so the public API is fairly limited.

Note that Groot methods are designed to locate leafs by custom attributes, which means that if you intend to manipulate the Groot instance through its public API, you will want to assign some unique attribute to each leaf as you are creating it (perhaps a database ID). See: Adding custom meta-data.

/**
* @typedef {Object} Groot
* @property {Boolean} isEnabled
* @method {Function} prune
* @method {Function} remove
* @method {Function} rename
* @method {Function} expand
* @method {Function} disable
* @method {Function} enable
* @method {Function} render
* @method {Function} closeMenu
*/

The public Leaf API

Once a Groot object has been created with its initial tree of nodes, it will handle all interactions among its leafs. However, the initial tree must be created manually, so understanding the public Leaf API can be beneficial.

/**
* @typedef {Object} Leaf
* @augments {leafPrototype}
* @property {Number} id - unique, internal identifier
* @property {Leaf|null} parent
* @property {Array.<Leaf>} leafs
* @property {Number} leafCount
* @property {String} label
* @property {Number} level
* @property {Number} position
* @property {Boolean} isRoot
* @property {Boolean} isFirstSibling
* @property {Boolean} isLastSibling
* @property {Boolean} isExpanded
* @property {Boolean} isBeingRenamed
* @property {Boolean} isBeingGrafted
* @property {Boolean} isActive
* @property {Object} attributes
* @method {Function} moveBefore
* @method {Function} moveAfter
* @method {Function} makeParentOf
* @method {Function} makeChildOf
* @method {Function} remove
* @method {Function} move
* @method {Function} branch
* @method {Function} graft
* @method {Function} ungraft
* @method {Function} inosculate
* @method {Function} activate
* @method {Function} deactivate
* @method {Function} getParent
* @method {Function} hasChildren
* @method {Function} hasAnyActiveChildren
* @method {Function} hasAnyInactiveChildren
* @method {Function} getChildren
* @method {Function} getFirstChild
* @method {Function} getLastChild
* @method {Function} getSiblings
* @method {Function} getSiblingsBefore
* @method {Function} getSiblingsAfter
* @method {Function} get
* @method {Function} traverse
* @method {Function} find
* @method {Function} findByAttributes
* @method {Function} isParentOf
* @method {Function} isChildOf
* @method {Function} isAncestorOf
* @method {Function} isDescendantOf
* @method {Function} isSibling
* @method {Function} isBefore
* @method {Function} isAfter
* @method {Function} isLeftOf
* @method {Function} isRightOf
* @method {Function} expand
* @method {Function} expandChildren
* @method {Function} collapse
* @method {Function} collapseChildren
* @method {Function} toggle
* @method {Function} requestLabelChange
* @method {Function} cancelLabelChange
* @method {Function} commitLabelChange
* @method {Function} setAttributes
* @method {Function} setAttribute
* @method {Function} mergeAttributes
* @method {Function} hasAttribute
* @method {Function} anyChildHasAttribute
* @method {Function} equals
* @method {Function} length
* @method {Function} toString
*/

Special terms

Leaf.attributes

A leaf may have custom attributes, defined by application data but irrelevant to Groot itself. For example, in a tree of TV shows, each leaf might contain a tvShowID attribute that is associated with an entry in a TV show database. The public Groot API is designed to manipulate the tree by looking up leafs by attributes, not by using internal leaf identifiers.

Leaf.level and Leaf.position

The level of a leaf defines its depth in the leaf hierarchy. The root leaf exists at level 0, its children exist at level 1, and so on.

The position of a leaf defines its order within its siblings. The root leaf will have a position 0.

Groot.remove() and Groot.prune()

Removing a leaf from the tree will delete it and raise the asynchronous leaf.deleting event, which may be cancelled.

Pruning a leaf from the tree will delete it, but will raise the synchronous leaf.pruning event which may not be cancelled. Prune leafs when you do not care about confirmation or errors.

Leaf.graft(), Leaf.ungraft(), Leaf.inosculate(), and Leaf.isBeingGrafted

When a new leaf is created within the tree by choosing the "Create" option on the Groot menu, it exists as a "grafted" leaf; that is to say, it is not yet formally part of the tree. After the user enters a label for the leaf, the asynchronous leaf.creating event will be raised. If the event is committed, the leaf will officially be inosculated, and its grafted status (isBeingGrafted) will be revoked. If the event is cancelled the leaf will be ungrafted, which will remove it from the tree entirely.

Leaf.activate(), Leaf.disable(), and Leaf.isActive

The active status of a leaf is purely abstract and has no affect on tree operations other than to change the visual representation of a leaf in the DOM (it will be a lighter color).

TODO

• polish demo
• enhance documentation