Mixin: Fancytree_Hooks

Fancytree_Hooks

These additional methods of the Fancytree class are 'hook functions'
that can be used and overloaded by extensions.

Source:
See:

Method Summary

Return Type Name and Arguments Details
void nodeClick(ctx)

Default handling for mouse click events.

 Details
void nodeCollapseSiblings(ctx, callOpts)

Collapse all other children of same parent.

 Details
void nodeDblclick(ctx)

Default handling for mouse douleclick events.

 Details
void nodeKeydown(ctx)

Default handling for mouse keydown events.

NOTE: this may be called with node == null if tree (but no node) has focus.

 Details
$.Promise nodeLoadChildren(ctx, source)

Load child nodes (async).

 Details
void nodeLoadKeyPath()

[Not Implemented]

 Details
void nodeRemoveChild(ctx, childNode)

Remove a single direct child of ctx.node.

 Details
void nodeRemoveChildMarkup(ctx)

Remove HTML markup for all descendents of ctx.node.

 Details
void nodeRemoveChildren(ctx)

Remove all descendants of ctx.node.

 Details
void nodeRemoveMarkup(ctx)

Remove HTML markup for ctx.node and all its descendents.

 Details
void nodeRender(ctx, force=false, deep=false, collapsed=false)

Create <li><span>..</span> .. </li> tags for this node.

This method takes care that all HTML markup is created that is required
to display this node in its current state.

Call this method to create new nodes, or after the strucuture
was changed (e.g. after moving this node or adding/removing children)
nodeRenderTitle() and nodeRenderStatus() are implied.

<li id='KEY' ftnode=NODE>
    <span class='fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e'>
        <span class="fancytree-expander"></span>
        <span class="fancytree-checkbox"></span> // only present in checkbox mode
        <span class="fancytree-icon"></span>
        <a href="#" class="fancytree-title"> Node 1 </a>
    </span>
    <ul> // only present if node has children
        <li id='KEY' ftnode=NODE> child1 ... </li>
        <li id='KEY' ftnode=NODE> child2 ... </li>
    </ul>
</li>
Details
void nodeRenderStatus(ctx)

Update element classes according to node state.

 Details
void nodeRenderTitle(ctx, title)

Create HTML inside the node's outer <span> (i.e. expander, checkbox,
icon, and title).

nodeRenderStatus() is implied.

 Details
$.Promise nodeSetActive(ctx, flag=true, opts)

Activate node.
flag defaults to true.
If flag is true, the node is activated (must be a synchronous operation)
If flag is false, the node is deactivated (must be a synchronous operation)

 Details
$.Promise nodeSetExpanded(ctx, flag=true, opts)

Expand or collapse node, return Deferred.promise.

 Details
void nodeSetFocus(ctx, flag=true)

Focus or blur this node.

 Details
boolean nodeSetSelected(ctx, flag=true, opts)

(De)Select node, return new status (sync).

 Details
void nodeSetStatus(ctx, status, message, details)

Show node status (ok, loading, error, nodata) using styles and a dummy child node.

 Details
void nodeToggleExpanded(ctx) Details
void nodeToggleSelected(ctx) Details
void treeClear(ctx)

Remove all nodes.

 Details
void treeCreate(ctx)

Widget was created (called only once, even it re-initialized).

 Details
void treeDestroy(ctx)

Widget was destroyed.

 Details
void treeInit(ctx)

Widget was (re-)initialized.

 Details
void treeLoad(ctx, source)

Parse Fancytree from source, as configured in the options.

 Details
void treeRegisterNode(ctx, add, node)

Node was inserted into or removed from the tree.

 Details
void treeSetFocus(ctx, flag=true)

Widget got focus.

 Details
void treeSetOption(ctx, key, value)

Widget option was set using $().fancytree("option", "KEY", VALUE).

Note: key may reference a nested option, e.g. 'dnd5.scroll'.
In this case valuecontains the complete, modified dnd5 option hash.
We can check for changed values like
if( value.scroll !== tree.options.dnd5.scroll ) {...}

 Details
void treeStructureChanged(ctx)

A Node was added, removed, moved, or it's visibility changed.

 Details

Method Details

nodeClick(ctx)

Default handling for mouse click events.

Parameters:
Name Type Description
ctx EventData
Source:

nodeCollapseSiblings(ctx, callOpts)

Collapse all other children of same parent.

Parameters:
Name Type Description
ctx EventData
callOpts object
Source:

nodeDblclick(ctx)

Default handling for mouse douleclick events.

Parameters:
Name Type Description
ctx EventData
Source:

nodeKeydown(ctx)

Default handling for mouse keydown events.

NOTE: this may be called with node == null if tree (but no node) has focus.

Parameters:
Name Type Description
ctx EventData
Source:

nodeLoadChildren(ctx, source) → {$.Promise}

Load child nodes (async).

Parameters:
Name Type Description
ctx EventData
source Array.<object> | object | string | $.Promise | function
Source:
Returns:

The deferred will be resolved as soon as the (ajax)
data was rendered.

Type
$.Promise

nodeLoadKeyPath()

[Not Implemented]

Source:

nodeRemoveChild(ctx, childNode)

Remove a single direct child of ctx.node.

Parameters:
Name Type Description
ctx EventData
childNode FancytreeNode

dircect child of ctx.node
Source:

nodeRemoveChildMarkup(ctx)

Remove HTML markup for all descendents of ctx.node.

Parameters:
Name Type Description
ctx EventData
Source:

nodeRemoveChildren(ctx)

Remove all descendants of ctx.node.

Parameters:
Name Type Description
ctx EventData
Source:

nodeRemoveMarkup(ctx)

Remove HTML markup for ctx.node and all its descendents.

Parameters:
Name Type Description
ctx EventData
Source:

nodeRender(ctx, forceopt, deepopt, collapsedopt)

Create <li><span>..</span> .. </li> tags for this node.

This method takes care that all HTML markup is created that is required
to display this node in its current state.

Call this method to create new nodes, or after the strucuture
was changed (e.g. after moving this node or adding/removing children)
nodeRenderTitle() and nodeRenderStatus() are implied.

<li id='KEY' ftnode=NODE>
    <span class='fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e'>
        <span class="fancytree-expander"></span>
        <span class="fancytree-checkbox"></span> // only present in checkbox mode
        <span class="fancytree-icon"></span>
        <a href="#" class="fancytree-title"> Node 1 </a>
    </span>
    <ul> // only present if node has children
        <li id='KEY' ftnode=NODE> child1 ... </li>
        <li id='KEY' ftnode=NODE> child2 ... </li>
    </ul>
</li>
Parameters:
Name Type Attributes Default Description
ctx EventData
force boolean <optional>
 false

re-render, even if html markup was already created
deep boolean <optional>
 false

also render all descendants, even if parent is collapsed
collapsed boolean <optional>
 false

force root node to be collapsed, so we can apply animated expand later
Source:

nodeRenderStatus(ctx)

Update element classes according to node state.

Parameters:
Name Type Description
ctx EventData
Source:

nodeRenderTitle(ctx, titleopt)

Create HTML inside the node's outer <span> (i.e. expander, checkbox,
icon, and title).

nodeRenderStatus() is implied.

Parameters:
Name Type Attributes Description
ctx EventData
title string <optional>

optinal new title
Source:

nodeSetActive(ctx, flagopt, optsopt) → {$.Promise}

Activate node.
flag defaults to true.
If flag is true, the node is activated (must be a synchronous operation)
If flag is false, the node is deactivated (must be a synchronous operation)

Parameters:
Name Type Attributes Default Description
ctx EventData
flag boolean <optional>
 true
opts object <optional>

additional options. Defaults to {noEvents: false, noFocus: false}
Source:
Returns:
Type
$.Promise

nodeSetExpanded(ctx, flagopt, optsopt) → {$.Promise}

Expand or collapse node, return Deferred.promise.

Parameters:
Name Type Attributes Default Description
ctx EventData
flag boolean <optional>
 true
opts object <optional>

additional options. Defaults to {noAnimation: false, noEvents: false}
Source:
Returns:

The deferred will be resolved as soon as the (lazy)
data was retrieved, rendered, and the expand animation finished.

Type
$.Promise

nodeSetFocus(ctx, flagopt)

Focus or blur this node.

Parameters:
Name Type Attributes Default Description
ctx EventData
flag boolean <optional>
 true
Source:

nodeSetSelected(ctx, flagopt, optsopt) → {boolean}

(De)Select node, return new status (sync).

Parameters:
Name Type Attributes Default Description
ctx EventData
flag boolean <optional>
 true
opts object <optional>

additional options. Defaults to {noEvents: false,
propagateDown: null, propagateUp: null,
callback: null,
}
Source:
Returns:

previous status

Type
boolean

nodeSetStatus(ctx, status, message, details)

Show node status (ok, loading, error, nodata) using styles and a dummy child node.

Parameters:
Name Type Description
ctx EventData
status
message
details
Since:
  • 2.3
Source:

nodeToggleExpanded(ctx)

Parameters:
Name Type Description
ctx EventData
Source:

nodeToggleSelected(ctx)

Parameters:
Name Type Description
ctx EventData
Source:

treeClear(ctx)

Remove all nodes.

Parameters:
Name Type Description
ctx EventData
Source:

treeCreate(ctx)

Widget was created (called only once, even it re-initialized).

Parameters:
Name Type Description
ctx EventData
Source:

treeDestroy(ctx)

Widget was destroyed.

Parameters:
Name Type Description
ctx EventData
Source:

treeInit(ctx)

Widget was (re-)initialized.

Parameters:
Name Type Description
ctx EventData
Source:

treeLoad(ctx, sourceopt)

Parse Fancytree from source, as configured in the options.

Parameters:
Name Type Attributes Description
ctx EventData
source object <optional>

optional new source (use last data otherwise)
Source:

treeRegisterNode(ctx, add, node)

Node was inserted into or removed from the tree.

Parameters:
Name Type Description
ctx EventData
add boolean
node FancytreeNode
Source:

treeSetFocus(ctx, flagopt)

Widget got focus.

Parameters:
Name Type Attributes Default Description
ctx EventData
flag boolean <optional>
 true
Source:

treeSetOption(ctx, key, value)

Widget option was set using $().fancytree("option", "KEY", VALUE).

Note: key may reference a nested option, e.g. 'dnd5.scroll'.
In this case valuecontains the complete, modified dnd5 option hash.
We can check for changed values like
if( value.scroll !== tree.options.dnd5.scroll ) {...}

Parameters:
Name Type Description
ctx EventData
key string

option name
value any

option value
Source:

treeStructureChanged(ctx)

A Node was added, removed, moved, or it's visibility changed.

Parameters:
Name Type Description
ctx EventData
Source:

Fork me on GitHub