Gary Sharp
c846fa053a
Provide better support for lower resolution devices (buttons became hidden in tall dialogs). Remove references to JavaScript minification source maps which aren't deployed and caused confusion.
5284 lines
157 KiB
JavaScript
5284 lines
157 KiB
JavaScript
/*!
|
|
* jquery.fancytree.js
|
|
* Dynamic tree view control, with support for lazy loading of branches.
|
|
* https://github.com/mar10/fancytree/
|
|
*
|
|
* Copyright (c) 2006-2013, Martin Wendt (http://wwWendt.de)
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version 2.0.0-2
|
|
* @date 2013-09-15T18:55
|
|
*/
|
|
|
|
// Start of local namespace
|
|
;(function($, window, document, undefined) {
|
|
// relax some jslint checks:
|
|
/*globals alert */
|
|
|
|
"use strict";
|
|
|
|
// prevent duplicate loading
|
|
if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
|
$.ui.fancytree.warn("Fancytree: ignored duplicate include");
|
|
return;
|
|
}
|
|
|
|
|
|
/* *****************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
|
|
function _raiseNotImplemented(msg){
|
|
msg = msg || "";
|
|
$.error("Not implemented: " + msg);
|
|
}
|
|
|
|
function _assert(cond, msg){
|
|
// TODO: see qunit.js extractStacktrace()
|
|
msg = ": " + msg || "";
|
|
if(!cond){
|
|
$.error("Assertion failed" + msg);
|
|
}
|
|
}
|
|
|
|
function consoleApply(method, args){
|
|
var i, s,
|
|
fn = window.console ? window.console[method] : null;
|
|
|
|
if(fn){
|
|
if(fn.apply){
|
|
fn.apply(window.console, args);
|
|
}else{
|
|
// IE?
|
|
s = "";
|
|
for( i=0; i<args.length; i++){
|
|
s += args[i];
|
|
}
|
|
fn(s);
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Return true if dotted version string is equal or higher than requested version.
|
|
*
|
|
* See http://jsfiddle.net/mar10/FjSAN/
|
|
*/
|
|
function isVersionAtLeast(dottedVersion, major, minor, patch){
|
|
var i, v, t,
|
|
verParts = $.map($.trim(dottedVersion).split("."), function(e){ return parseInt(e, 10); }),
|
|
testParts = $.map(Array.prototype.slice.call(arguments, 1), function(e){ return parseInt(e, 10); });
|
|
|
|
for( i = 0; i < testParts.length; i++ ){
|
|
v = verParts[i] || 0;
|
|
t = testParts[i] || 0;
|
|
if( v !== t ){
|
|
return ( v > t );
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
/** Return a wrapper that calls sub.fn() and exposes base.fn() as _super(). */
|
|
function _makeVirtualFunction(methodName, base, sub){
|
|
var _super = base[methodName],
|
|
func = sub[methodName];
|
|
// if(rexTestSuper && !rexTestSuper.test(func)){
|
|
// // sub.methodName() doesn't call _super(), so no wrapper required
|
|
// return func;
|
|
// }
|
|
return function(){
|
|
try{
|
|
base._super = function(){
|
|
return _super.apply(base, arguments);
|
|
};
|
|
// sub._base = base;
|
|
return func.apply(base, arguments);
|
|
}finally{
|
|
base._super = null;
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Subclass `base` by creating proxy functions
|
|
*/
|
|
function _subclassObject(tree, base, extension, extName){
|
|
// $.ui.fancytree.debug("_subclassObject", base, extension, extName);
|
|
for(var attrName in extension){
|
|
if(typeof extension[attrName] === "function"){
|
|
if(typeof tree[attrName] === "function"){
|
|
// override existing method
|
|
tree[attrName] = _makeVirtualFunction(attrName, tree, extension);
|
|
}else if(attrName.charAt(0) === "_"){
|
|
// Create private methods in tree.EXTENSION namespace
|
|
tree[extName][attrName] = $.proxy(extension[attrName], tree);
|
|
}else{
|
|
$.error("Could not override tree." + attrName + ". Use prefix '_' to create tree." + extName + "._" + attrName);
|
|
}
|
|
}else{
|
|
// Create member variables in tree.EXTENSION namespace
|
|
if(attrName !== "options"){
|
|
tree[extName][attrName] = base[attrName];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function _getResolvedPromise(context, argArray){
|
|
if(context === undefined){
|
|
return $.Deferred(function(){this.resolve();}).promise();
|
|
}else{
|
|
return $.Deferred(function(){this.resolveWith(context, argArray);}).promise();
|
|
}
|
|
}
|
|
|
|
|
|
function _getRejectedPromise(context, argArray){
|
|
if(context === undefined){
|
|
return $.Deferred(function(){this.reject();}).promise();
|
|
}else{
|
|
return $.Deferred(function(){this.rejectWith(context, argArray);}).promise();
|
|
}
|
|
}
|
|
|
|
|
|
function _makeResolveFunc(deferred, context){
|
|
return function(){
|
|
deferred.resolveWith(context);
|
|
};
|
|
}
|
|
|
|
|
|
// TODO: use currying
|
|
function _makeNodeTitleMatcher(s){
|
|
s = s.toLowerCase();
|
|
return function(node){
|
|
return node.title.toLowerCase().indexOf(s) >= 0;
|
|
};
|
|
}
|
|
|
|
var i,
|
|
FT = null, // initialized below
|
|
//Boolean attributes that can be set with equivalent class names in the LI tags
|
|
CLASS_ATTRS = "active expanded focus folder lazy selected unselectable".split(" "),
|
|
CLASS_ATTR_MAP = {},
|
|
// Top-level Fancytree node attributes, that can be set by dict
|
|
NODE_ATTRS = "expanded extraClasses folder hideCheckbox key lazy selected title tooltip unselectable".split(" "),
|
|
NODE_ATTR_MAP = {},
|
|
// Attribute names that should NOT be added to node.data
|
|
NONE_NODE_DATA_MAP = {"active": true, "children": true, "data": true, "focus": true};
|
|
|
|
for(i=0; i<CLASS_ATTRS.length; i++){ CLASS_ATTR_MAP[CLASS_ATTRS[i]] = true; }
|
|
for(i=0; i<NODE_ATTRS.length; i++){ NODE_ATTR_MAP[NODE_ATTRS[i]] = true; }
|
|
|
|
|
|
/* *****************************************************************************
|
|
* FancytreeNode
|
|
*/
|
|
|
|
|
|
/**
|
|
* Creates a new node
|
|
* @class Represents the hierarchical data model and operations.
|
|
* @name FancytreeNode
|
|
* @constructor
|
|
* @param {FancytreeNode} parent
|
|
* @param {NodeData} data
|
|
*
|
|
* @property {Fancytree} tree
|
|
* @property {FancytreeNode} parent Parent node
|
|
* @property {String} key
|
|
* @property {String} title
|
|
* @property {object} data Contains all extra data that was passed on node creation
|
|
* @property {FancytreeNode[] | null | undefined} children list of child nodes
|
|
* @property {Boolean} isStatusNode
|
|
* @property {Boolean} expanded
|
|
* @property {Boolean} folder
|
|
* @property {Boolean} href
|
|
* @property {String} extraClasses
|
|
* @property {Boolean} lazy
|
|
* @property {Boolean} nolink OBSOLETE
|
|
* @property {Boolean} selected
|
|
* @property {String} target
|
|
* @property {String} tooltip
|
|
*/
|
|
function FancytreeNode(parent, obj){
|
|
var i, l, name, cl;
|
|
|
|
this.parent = parent;
|
|
this.tree = parent.tree;
|
|
this.ul = null;
|
|
this.li = null; // <li id='key' ftnode=this> tag
|
|
this.isStatusNode = false;
|
|
this.data = {};
|
|
|
|
// TODO: merge this code with node.toDict()
|
|
// copy attributes from obj object
|
|
for(i=0, l=NODE_ATTRS.length; i<l; i++){
|
|
name = NODE_ATTRS[i];
|
|
this[name] = obj[name];
|
|
}
|
|
// node.data += obj.data
|
|
if(obj.data){
|
|
$.extend(this.data, obj.data);
|
|
}
|
|
// copy all other attributes to this.data.NAME
|
|
for(name in obj){
|
|
if(!NODE_ATTR_MAP[name] && !$.isFunction(obj[name]) && !NONE_NODE_DATA_MAP[name]){
|
|
// node.data.NAME = obj.NAME
|
|
this.data[name] = obj[name];
|
|
}
|
|
}
|
|
|
|
// Fix missing key
|
|
if( this.key == null ){ // test for null OR undefined
|
|
this.key = "_" + (FT._nextNodeKey++);
|
|
}
|
|
// Fix tree.activeNode
|
|
// TODO: not elegant: we use obj.active as marker to set tree.activeNode
|
|
// when loading from a dictionary.
|
|
if(obj.active){
|
|
_assert(this.tree.activeNode === null, "only one active node allowed");
|
|
this.tree.activeNode = this;
|
|
}
|
|
// TODO: handle obj.focus = true
|
|
// Create child nodes
|
|
this.children = null;
|
|
cl = obj.children;
|
|
if(cl && cl.length){
|
|
this._setChildren(cl);
|
|
}
|
|
}
|
|
|
|
|
|
FancytreeNode.prototype = /**@lends FancytreeNode*/{
|
|
/* Return the direct child FancytreeNode with a given key, index. */
|
|
_findDirectChild: function(ptr){
|
|
var i, l,
|
|
cl = this.children;
|
|
|
|
if(cl){
|
|
if(typeof ptr === "string"){
|
|
for(i=0, l=cl.length; i<l; i++){
|
|
if(cl[i].key === ptr){
|
|
return cl[i];
|
|
}
|
|
}
|
|
}else if(typeof ptr === "number"){
|
|
return this.children[ptr];
|
|
}else if(ptr.parent === this){
|
|
return ptr;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
// TODO: activate()
|
|
// TODO: activateSilently()
|
|
/* Internal helper called in recursive addChildren sequence.*/
|
|
_setChildren: function(children){
|
|
_assert(children && (!this.children || this.children.length === 0), "only init supported");
|
|
this.children = [];
|
|
for(var i=0, l=children.length; i<l; i++){
|
|
this.children.push(new FancytreeNode(this, children[i]));
|
|
}
|
|
},
|
|
/**
|
|
* Append (or insert) a list of child nodes.
|
|
*
|
|
* @param {NodeData[]} children array of child node definitions (also single child accepted)
|
|
* @param {FancytreeNode | String | Integer} [insertBefore] child node (or key or index of such).
|
|
* If omitted, the new children are appended.
|
|
* @returns {FancytreeNode} first child added
|
|
*
|
|
* @see applyPatch to modify existing child nodes.
|
|
* @see FanctreeNode.applyPatch to modify existing child nodes.
|
|
* @see FanctreeNode#applyPatch to modify existing child nodes.
|
|
* @see applyPatch
|
|
* @see FanctreeNode.applyPatch
|
|
* @see FanctreeNode#applyPatch
|
|
*/
|
|
addChildren: function(children, insertBefore){
|
|
var i, l, pos,
|
|
firstNode = null,
|
|
nodeList = [];
|
|
|
|
if($.isPlainObject(children) ){
|
|
children = [children];
|
|
}
|
|
if(!this.children){
|
|
this.children = [];
|
|
}
|
|
for(i=0, l=children.length; i<l; i++){
|
|
nodeList.push(new FancytreeNode(this, children[i]));
|
|
}
|
|
firstNode = nodeList[0];
|
|
if(insertBefore == null){
|
|
this.children = this.children.concat(nodeList);
|
|
}else{
|
|
insertBefore = this._findDirectChild(insertBefore);
|
|
pos = $.inArray(insertBefore, this.children);
|
|
_assert(pos >= 0, "insertBefore must be an existing child");
|
|
// insert nodeList after children[pos]
|
|
this.children.splice.apply(this.children, [pos, 0].concat(nodeList));
|
|
}
|
|
if(!this.parent || this.parent.ul){
|
|
// render if the parent was rendered (or this is a root node)
|
|
this.render();
|
|
}
|
|
if( this.tree.options.selectMode === 3 ){
|
|
this.fixSelection3FromEndNodes();
|
|
}
|
|
return firstNode;
|
|
},
|
|
/**
|
|
* Append or prepend a node, or append a child node.
|
|
*
|
|
* @param {NodeData} node node definition
|
|
* @param {String} [mode] 'before', 'after', or 'child'
|
|
* @returns {FancytreeNode} new node
|
|
*/
|
|
addNode: function(node, mode){
|
|
if(mode === undefined || mode === "over"){
|
|
mode = "child";
|
|
}
|
|
switch(mode){
|
|
case "after":
|
|
return this.getParent().addChildren(node, this.getNextSibling());
|
|
case "before":
|
|
return this.getParent().addChildren(node, this);
|
|
case "child":
|
|
case "over":
|
|
return this.addChildren(node);
|
|
}
|
|
_assert(false, "Invalid mode: " + mode);
|
|
},
|
|
/**
|
|
*
|
|
* @param {NodePatch} patch
|
|
* @returns {$.Promise}
|
|
* @see {@link applyPatch} to modify existing child nodes.
|
|
* @see FancytreeNode#addChildren
|
|
*/
|
|
applyPatch: function(patch) {
|
|
// patch [key, null] means 'remove'
|
|
if(patch === null){
|
|
this.remove();
|
|
return _getResolvedPromise(this);
|
|
}
|
|
// TODO: make sure that root node is not collapsed or modified
|
|
// copy (most) attributes to node.ATTR or node.data.ATTR
|
|
var name, promise, v,
|
|
IGNORE_MAP = { children: true, expanded: true, parent: true }; // TODO: should be global
|
|
|
|
for(name in patch){
|
|
v = patch[name];
|
|
if( !IGNORE_MAP[name] && !$.isFunction(v)){
|
|
if(NODE_ATTR_MAP[name]){
|
|
this[name] = v;
|
|
}else{
|
|
this.data[name] = v;
|
|
}
|
|
}
|
|
}
|
|
// Remove and/or create children
|
|
if(patch.hasOwnProperty("children")){
|
|
this.removeChildren();
|
|
if(patch.children){ // only if not null and not empty list
|
|
// TODO: addChildren instead?
|
|
this._setChildren(patch.children);
|
|
}
|
|
// TODO: how can we APPEND or INSERT child nodes?
|
|
}
|
|
if(this.isVisible()){
|
|
this.renderTitle();
|
|
this.renderStatus();
|
|
}
|
|
// Expand collapse (final step, since this may be async)
|
|
if(patch.hasOwnProperty("expanded")){
|
|
promise = this.setExpanded(patch.expanded);
|
|
}else{
|
|
promise = _getResolvedPromise(this);
|
|
}
|
|
return promise;
|
|
},
|
|
/**
|
|
* @returns {$.Promise}
|
|
*/
|
|
collapseSiblings: function() {
|
|
return this.tree._callHook("nodeCollapseSiblings", this);
|
|
},
|
|
/** Copy this node as sibling or child of `node`.
|
|
*
|
|
* @param {FancytreeNode} node source node
|
|
* @param {String} mode 'before' | 'after' | 'child'
|
|
* @param {Function} [map] callback function(NodeData) that could modify the new node
|
|
* @returns {FancytreeNode} new
|
|
*/
|
|
copyTo: function(node, mode, map) {
|
|
return node.addNode(this.toDict(true, map), mode);
|
|
},
|
|
/** Count direct and indirect children.
|
|
*
|
|
* @param {Boolean} [deep=true] pass 'false' to only count direct children
|
|
* @returns {int} number of child nodes
|
|
*/
|
|
countChildren: function(deep) {
|
|
var cl = this.children, i, l, n;
|
|
if( !cl ){
|
|
return 0;
|
|
}
|
|
n = cl.length;
|
|
if(deep !== false){
|
|
for(i=0, l=n; i<l; i++){
|
|
n += cl[i].countChildren();
|
|
}
|
|
}
|
|
return n;
|
|
},
|
|
// TODO: deactivate()
|
|
/** Write to browser console if debugLevel >= 2 (prepending node info)
|
|
*
|
|
* @param {*} msg string or object or array of such
|
|
*/
|
|
debug: function(msg){
|
|
if( this.tree.options.debugLevel >= 2 ) {
|
|
Array.prototype.unshift.call(arguments, this.toString());
|
|
consoleApply("debug", arguments);
|
|
}
|
|
},
|
|
/** Remove all children of a lazy node and collapse.*/
|
|
discard: function(){
|
|
if(this.lazy && $.isArray(this.children)){
|
|
this.removeChildren();
|
|
return this.setExpanded(false);
|
|
}
|
|
},
|
|
// TODO: expand(flag)
|
|
/**Find all nodes that contain `match` in the title.
|
|
*
|
|
* @param {String | function(node)} match string to search for, of a function that
|
|
* returns `true` if a node is matched.
|
|
* @returns {FancytreeNode[]} array of nodes (may be empty)
|
|
* @see FancytreeNode#findAll
|
|
*/
|
|
findAll: function(match) {
|
|
match = $.isFunction(match) ? match : _makeNodeTitleMatcher(match);
|
|
var res = [];
|
|
this.visit(function(n){
|
|
if(match(n)){
|
|
res.push(n);
|
|
}
|
|
});
|
|
return res;
|
|
},
|
|
/**Find first node that contains `match` in the title (not including self).
|
|
*
|
|
* @param {String | function(node)} match string to search for, of a function that
|
|
* returns `true` if a node is matched.
|
|
* @returns {FancytreeNode} matching node or null
|
|
* @example
|
|
* <b>fat</b> text
|
|
*/
|
|
findFirst: function(match) {
|
|
match = $.isFunction(match) ? match : _makeNodeTitleMatcher(match);
|
|
var res = null;
|
|
this.visit(function(n){
|
|
if(match(n)){
|
|
res = n;
|
|
return false;
|
|
}
|
|
});
|
|
return res;
|
|
},
|
|
/* Apply selection state (internal use only) */
|
|
_changeSelectStatusAttrs: function (state) {
|
|
var changed = false;
|
|
|
|
switch(state){
|
|
case false:
|
|
changed = ( this.selected || this.partsel );
|
|
this.selected = false;
|
|
this.partsel = false;
|
|
break;
|
|
case true:
|
|
changed = ( !this.selected || !this.partsel );
|
|
this.selected = true;
|
|
this.partsel = true;
|
|
break;
|
|
case undefined:
|
|
changed = ( this.selected || !this.partsel );
|
|
this.selected = false;
|
|
this.partsel = true;
|
|
break;
|
|
default:
|
|
_assert(false, "invalid state: " + state);
|
|
}
|
|
this.debug("fixSelection3AfterLoad() _changeSelectStatusAttrs()", state, changed);
|
|
if( changed ){
|
|
this.renderStatus();
|
|
}
|
|
return changed;
|
|
},
|
|
/**
|
|
* Fix selection status, after this node was (de)selected in multi-hier mode.
|
|
* This includes (de)selecting all children.
|
|
*/
|
|
fixSelection3AfterClick: function() {
|
|
var flag = this.isSelected();
|
|
|
|
// this.debug("fixSelection3AfterClick()");
|
|
|
|
this.visit(function(node){
|
|
node._changeSelectStatusAttrs(flag);
|
|
});
|
|
this.fixSelection3FromEndNodes();
|
|
},
|
|
/**
|
|
* Fix selection status for multi-hier mode.
|
|
* Only end-nodes are considered to update the descendants branch and parents.
|
|
* Should be called after this node has loaded new children or after
|
|
* children have been modified using the API.
|
|
*/
|
|
fixSelection3FromEndNodes: function() {
|
|
// this.debug("fixSelection3FromEndNodes()");
|
|
_assert(this.tree.options.selectMode === 3, "expected selectMode 3");
|
|
|
|
// Visit all end nodes and adjust their parent's `selected` and `partsel`
|
|
// attributes. Return selection state true, false, or undefined.
|
|
function _walk(node){
|
|
var i, l, child, s, state, allSelected,someSelected,
|
|
children = node.children;
|
|
|
|
if( children ){
|
|
// check all children recursively
|
|
allSelected = true;
|
|
someSelected = false;
|
|
|
|
for( i=0, l=children.length; i<l; i++ ){
|
|
child = children[i];
|
|
// the selection state of a node is not relevant; we need the end-nodes
|
|
s = _walk(child);
|
|
if( s !== false ) {
|
|
someSelected = true;
|
|
}
|
|
if( s !== true ) {
|
|
allSelected = false;
|
|
}
|
|
}
|
|
state = allSelected ? true : (someSelected ? undefined : false);
|
|
}else{
|
|
// This is an end-node: simply report the status
|
|
// state = ( node.unselectable ) ? undefined : !!node.selected;
|
|
state = !!node.selected;
|
|
}
|
|
node._changeSelectStatusAttrs(state);
|
|
return state;
|
|
}
|
|
_walk(this);
|
|
|
|
// Update parent's state
|
|
this.visitParents(function(node){
|
|
var i, l, child, state,
|
|
children = node.children,
|
|
allSelected = true,
|
|
someSelected = false;
|
|
|
|
for( i=0, l=children.length; i<l; i++ ){
|
|
child = children[i];
|
|
// When fixing the parents, we trust the sibling status (i.e.
|
|
// we don't recurse)
|
|
if( child.selected || child.partsel ) {
|
|
someSelected = true;
|
|
}
|
|
if( !child.unselectable && !child.selected ) {
|
|
allSelected = false;
|
|
}
|
|
}
|
|
state = allSelected ? true : (someSelected ? undefined : false);
|
|
node._changeSelectStatusAttrs(state);
|
|
});
|
|
},
|
|
// TODO: focus()
|
|
/**
|
|
* Update node data. If dict contains 'children', then also replace
|
|
* the hole sub tree.
|
|
* @param {NodeData} dict
|
|
*
|
|
* @see FancytreeNode#addChildren
|
|
* @see FancytreeNode#applyPatch
|
|
*/
|
|
fromDict: function(dict) {
|
|
// copy all other attributes to this.data.xxx
|
|
for(var name in dict){
|
|
if(NODE_ATTR_MAP[name]){
|
|
// node.NAME = dict.NAME
|
|
this[name] = dict[name];
|
|
}else if(name === "data"){
|
|
// node.data += dict.data
|
|
$.extend(this.data, dict.data);
|
|
}else if(!$.isFunction(dict[name]) && !NONE_NODE_DATA_MAP[name]){
|
|
// node.data.NAME = dict.NAME
|
|
this.data[name] = dict[name];
|
|
}
|
|
}
|
|
if(dict.children){
|
|
// recursively set children and render
|
|
this.removeChildren();
|
|
this.addChildren(dict.children);
|
|
}else{
|
|
this.renderTitle();
|
|
}
|
|
/*
|
|
var children = dict.children;
|
|
if(children === undefined){
|
|
this.data = $.extend(this.data, dict);
|
|
this.render();
|
|
return;
|
|
}
|
|
dict = $.extend({}, dict);
|
|
dict.children = undefined;
|
|
this.data = $.extend(this.data, dict);
|
|
this.removeChildren();
|
|
this.addChild(children);
|
|
*/
|
|
},
|
|
/** @returns {FancytreeNode[] | undefined} list of child nodes (undefined for unexpanded lazy nodes).*/
|
|
getChildren: function() {
|
|
if(this.hasChildren() === undefined){ // TODO: only required for lazy nodes?
|
|
return undefined; // Lazy node: unloaded, currently loading, or load error
|
|
}
|
|
return this.children;
|
|
},
|
|
/** @returns {FancytreeNode | null}*/
|
|
getFirstChild: function() {
|
|
return this.children ? this.children[0] : null;
|
|
},
|
|
/** @returns {int} 0-based child index.*/
|
|
getIndex: function() {
|
|
// return this.parent.children.indexOf(this);
|
|
return $.inArray(this, this.parent.children); // indexOf doesn't work in IE7
|
|
},
|
|
/**@returns {String} hierarchical child index (1-based: '3.2.4').*/
|
|
getIndexHier: function(separator) {
|
|
separator = separator || ".";
|
|
var res = [];
|
|
$.each(this.getParentList(false, true), function(i, o){
|
|
res.push(o.getIndex() + 1);
|
|
});
|
|
return res.join(separator);
|
|
},
|
|
/**
|
|
* @param {Boolean} [excludeSelf=false]
|
|
* @returns {String} parent keys separated by options.keyPathSeparator
|
|
*/
|
|
getKeyPath: function(excludeSelf) {
|
|
var path = [],
|
|
sep = this.tree.options.keyPathSeparator;
|
|
this.visitParents(function(n){
|
|
if(n.parent){
|
|
path.unshift(n.key);
|
|
}
|
|
}, !excludeSelf);
|
|
return sep + path.join(sep);
|
|
},
|
|
/**@returns {FancytreeNode | null} last child of this node.*/
|
|
getLastChild: function() {
|
|
return this.children ? this.children[this.children.length - 1] : null;
|
|
},
|
|
/** @returns {int} node depth. 0: System root node, 1: visible top-level node, 2: first sub-level, .... */
|
|
getLevel: function() {
|
|
var level = 0,
|
|
dtn = this.parent;
|
|
while( dtn ) {
|
|
level++;
|
|
dtn = dtn.parent;
|
|
}
|
|
return level;
|
|
},
|
|
/** @returns {FancytreeNode | null} */
|
|
getNextSibling: function() {
|
|
// TODO: use indexOf, if available: (not in IE6)
|
|
if( this.parent ){
|
|
var i, l,
|
|
ac = this.parent.children;
|
|
|
|
for(i=0, l=ac.length-1; i<l; i++){ // up to length-2, so next(last) = null
|
|
if( ac[i] === this ){
|
|
return ac[i+1];
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
/** @returns {FancytreeNode | null} returns null for the system root node*/
|
|
getParent: function() {
|
|
// TODO: return null for top-level nodes?
|
|
return this.parent;
|
|
},
|
|
/**
|
|
* @param {Boolean} [includeRoot=false]
|
|
* @param {Boolean} [includeSelf=false]
|
|
* @returns {FancytreeNode[]}
|
|
*/
|
|
getParentList: function(includeRoot, includeSelf) {
|
|
var l = [],
|
|
dtn = includeSelf ? this : this.parent;
|
|
while( dtn ) {
|
|
if( includeRoot || dtn.parent ){
|
|
l.unshift(dtn);
|
|
}
|
|
dtn = dtn.parent;
|
|
}
|
|
return l;
|
|
},
|
|
/** @returns {FancytreeNode | null} */
|
|
getPrevSibling: function() {
|
|
if( this.parent ){
|
|
var i, l,
|
|
ac = this.parent.children;
|
|
|
|
for(i=1, l=ac.length; i<l; i++){ // start with 1, so prev(first) = null
|
|
if( ac[i] === this ){
|
|
return ac[i-1];
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
/** @returns {boolean | undefined} Check if node has children (returns undefined, if not sure). */
|
|
hasChildren: function() {
|
|
if(this.lazy){
|
|
if(this.children === null || this.children === undefined){
|
|
// Not yet loaded
|
|
return undefined;
|
|
}else if(this.children.length === 0){
|
|
// Loaded, but response was empty
|
|
return false;
|
|
}else if(this.children.length === 1 && this.children[0].isStatusNode ){
|
|
// Currently loading or load error
|
|
return undefined;
|
|
}
|
|
return true;
|
|
}
|
|
return !!this.children;
|
|
},
|
|
/**@returns {Boolean} true, if node has keyboard focus*/
|
|
hasFocus: function() {
|
|
return (this.tree.hasFocus() && this.tree.focusNode === this);
|
|
},
|
|
/**@returns {Boolean} true, if node is active*/
|
|
isActive: function() {
|
|
return (this.tree.activeNode === this);
|
|
},
|
|
/**
|
|
* @param {FancytreeNode} otherNode
|
|
* @returns {Boolean} true, if node is a direct child of otherNode
|
|
*/
|
|
isChildOf: function(otherNode) {
|
|
return (this.parent && this.parent === otherNode);
|
|
},
|
|
/**
|
|
* @param {FancytreeNode} otherNode
|
|
* @returns {Boolean} true, if node is a sub node of otherNode
|
|
*/
|
|
isDescendantOf: function(otherNode) {
|
|
if(!otherNode || otherNode.tree !== this.tree){
|
|
return false;
|
|
}
|
|
var p = this.parent;
|
|
while( p ) {
|
|
if( p === otherNode ){
|
|
return true;
|
|
}
|
|
p = p.parent;
|
|
}
|
|
return false;
|
|
},
|
|
/** @returns {Boolean} true, if node is expanded*/
|
|
isExpanded: function() {
|
|
return !!this.expanded;
|
|
},
|
|
/** @returns {Boolean}*/
|
|
isFirstSibling: function() {
|
|
var p = this.parent;
|
|
return !p || p.children[0] === this;
|
|
},
|
|
/** @returns {Boolean}*/
|
|
isFolder: function() {
|
|
return !!this.folder;
|
|
},
|
|
/** @returns {Boolean}*/
|
|
isLastSibling: function() {
|
|
var p = this.parent;
|
|
return !p || p.children[p.children.length-1] === this;
|
|
},
|
|
/** @returns {Boolean} true, if node is lazy (even if data was already loaded)*/
|
|
isLazy: function() {
|
|
return !!this.lazy;
|
|
},
|
|
/** @returns {Boolean} true, if children are currently beeing loaded*/
|
|
isLoading: function() {
|
|
_raiseNotImplemented(); // TODO: implement
|
|
},
|
|
/**@returns {Boolean} true, if node is the (invisible) system root node*/
|
|
isRoot: function() {
|
|
return (this.tree.rootNode === this);
|
|
},
|
|
/** @returns {Boolean} true, if node is selected (e.g. has a checkmark set)*/
|
|
isSelected: function() {
|
|
return !!this.selected;
|
|
},
|
|
// TODO: use _isStatusNode as class attribute name
|
|
// isStatusNode: function() {
|
|
// return (this.data.isStatusNode === true);
|
|
// },
|
|
/** Return true, if all parents are expanded. */
|
|
isVisible: function() {
|
|
var i, l,
|
|
parents = this.getParentList(false, false);
|
|
|
|
for(i=0, l=parents.length; i<l; i++){
|
|
if( ! parents[i].expanded ){ return false; }
|
|
}
|
|
return true;
|
|
},
|
|
/** Expand all parents and optionally scroll into visible area as neccessary (async).
|
|
*
|
|
*/
|
|
makeVisible: function() {
|
|
// TODO: implement scolling (http://www.w3.org/TR/wai-aria-practices/#visualfocus)
|
|
// TODO: return $.promise
|
|
var i, l,
|
|
parents = this.getParentList(false, false);
|
|
|
|
for(i=0, l=parents.length; i<l; i++){
|
|
parents[i].setExpanded(true);
|
|
}
|
|
},
|
|
/** Move this node to targetNode.
|
|
* @param {FancytreeNode} targetNode
|
|
* @param {String} mode
|
|
* 'child': append this node as last child of targetNode.
|
|
* This is the default. To be compatble with the D'n'd
|
|
* hitMode, we also accept 'over'.
|
|
* 'before': add this node as sibling before targetNode.
|
|
* 'after': add this node as sibling after targetNode.
|
|
* @param [map] optional callback(FancytreeNode) to allow modifcations
|
|
*/
|
|
moveTo: function(targetNode, mode, map) {
|
|
if(mode === undefined || mode === "over"){
|
|
mode = "child";
|
|
}
|
|
var pos,
|
|
prevParent = this.parent,
|
|
targetParent = (mode === "child") ? targetNode : targetNode.parent;
|
|
|
|
if(this === targetNode){
|
|
return;
|
|
}else if( !this.parent ){
|
|
throw "Cannot move system root";
|
|
}else if( targetParent.isDescendantOf(this) ){
|
|
throw "Cannot move a node to it's own descendant";
|
|
}
|
|
// Unlink this node from current parent
|
|
if( this.parent.children.length === 1 ) {
|
|
this.parent.children = this.parent.lazy ? [] : null;
|
|
this.parent.expanded = false;
|
|
} else {
|
|
pos = $.inArray(this, this.parent.children);
|
|
_assert(pos >= 0);
|
|
this.parent.children.splice(pos, 1);
|
|
}
|
|
// Remove from source DOM parent
|
|
// if(this.parent.ul){
|
|
// this.parent.ul.removeChild(this.li);
|
|
// }
|
|
|
|
// Insert this node to target parent's child list
|
|
this.parent = targetParent;
|
|
if( targetParent.hasChildren() ) {
|
|
switch(mode) {
|
|
case "child":
|
|
// Append to existing target children
|
|
targetParent.children.push(this);
|
|
break;
|
|
case "before":
|
|
// Insert this node before target node
|
|
pos = $.inArray(targetNode, targetParent.children);
|
|
_assert(pos >= 0);
|
|
targetParent.children.splice(pos, 0, this);
|
|
break;
|
|
case "after":
|
|
// Insert this node after target node
|
|
pos = $.inArray(targetNode, targetParent.children);
|
|
_assert(pos >= 0);
|
|
targetParent.children.splice(pos+1, 0, this);
|
|
break;
|
|
default:
|
|
throw "Invalid mode " + mode;
|
|
}
|
|
} else {
|
|
targetParent.children = [ this ];
|
|
}
|
|
// Parent has no <ul> tag yet:
|
|
// if( !targetParent.ul ) {
|
|
// // This is the parent's first child: create UL tag
|
|
// // (Hidden, because it will be
|
|
// targetParent.ul = document.createElement("ul");
|
|
// targetParent.ul.style.display = "none";
|
|
// targetParent.li.appendChild(targetParent.ul);
|
|
// }
|
|
// // Issue 319: Add to target DOM parent (only if node was already rendered(expanded))
|
|
// if(this.li){
|
|
// targetParent.ul.appendChild(this.li);
|
|
// }^
|
|
|
|
// Let caller modify the nodes
|
|
if( map ){
|
|
targetNode.visit(map, true);
|
|
}
|
|
// Handle cross-tree moves
|
|
if( this.tree !== targetNode.tree ) {
|
|
// Fix node.tree for all source nodes
|
|
// _assert(false, "Cross-tree move is not yet implemented.");
|
|
this.warn("Cross-tree moveTo is experimantal!");
|
|
this.visit(function(n){
|
|
// TODO: fix selection state and activation, ...
|
|
n.tree = targetNode.tree;
|
|
}, true);
|
|
}
|
|
// Update HTML markup
|
|
if( !prevParent.isDescendantOf(targetParent)) {
|
|
prevParent.render();
|
|
}
|
|
if( !targetParent.isDescendantOf(prevParent) && targetParent !== prevParent) {
|
|
targetParent.render();
|
|
}
|
|
// TODO: fix selection state
|
|
// TODO: fix active state
|
|
|
|
/*
|
|
var tree = this.tree;
|
|
var opts = tree.options;
|
|
var pers = tree.persistence;
|
|
|
|
|
|
// Always expand, if it's below minExpandLevel
|
|
// tree.logDebug ("%s._addChildNode(%o), l=%o", this, ftnode, ftnode.getLevel());
|
|
if ( opts.minExpandLevel >= ftnode.getLevel() ) {
|
|
// tree.logDebug ("Force expand for %o", ftnode);
|
|
this.bExpanded = true;
|
|
}
|
|
|
|
// In multi-hier mode, update the parents selection state
|
|
// issue #82: only if not initializing, because the children may not exist yet
|
|
// if( !ftnode.data.isStatusNode && opts.selectMode==3 && !isInitializing )
|
|
// ftnode._fixSelectionState();
|
|
|
|
// In multi-hier mode, update the parents selection state
|
|
if( ftnode.bSelected && opts.selectMode==3 ) {
|
|
var p = this;
|
|
while( p ) {
|
|
if( !p.hasSubSel )
|
|
p._setSubSel(true);
|
|
p = p.parent;
|
|
}
|
|
}
|
|
// render this node and the new child
|
|
if ( tree.bEnableUpdate )
|
|
this.render();
|
|
|
|
return ftnode;
|
|
|
|
*/
|
|
},
|
|
/**
|
|
* Discard and reload all children of a lazy node.
|
|
* @param {Boolean} [discard=false]
|
|
* @returns $.Promise
|
|
*/
|
|
lazyLoad: function(discard) {
|
|
if(discard){
|
|
this.discard();
|
|
}else{
|
|
_assert(!$.isArray(this.children));
|
|
}
|
|
var source = this.tree._triggerNodeEvent("lazyload", this);
|
|
_assert(typeof source !== "boolean", "lazyload event must return source in data.result");
|
|
return this.tree._callHook("nodeLoadChildren", this, source);
|
|
},
|
|
/**
|
|
* @see Fancytree#nodeRender
|
|
*/
|
|
render: function(force, deep) {
|
|
return this.tree._callHook("nodeRender", this, force, deep);
|
|
},
|
|
/**
|
|
* @see Fancytree#nodeRenderTitle
|
|
*/
|
|
renderTitle: function() {
|
|
return this.tree._callHook("nodeRenderTitle", this);
|
|
},
|
|
/**
|
|
* @see Fancytree#nodeRenderStatus
|
|
*/
|
|
renderStatus: function() {
|
|
return this.tree._callHook("nodeRenderStatus", this);
|
|
},
|
|
/** Remove this node (not allowed for root).*/
|
|
remove: function() {
|
|
return this.parent.removeChild(this);
|
|
},
|
|
/**Remove childNode from list of direct children.*/
|
|
removeChild: function(childNode) {
|
|
return this.tree._callHook("nodeRemoveChild", this, childNode);
|
|
},
|
|
/**Remove all child nodes (and descendents).*/
|
|
removeChildren: function() {
|
|
return this.tree._callHook("nodeRemoveChildren", this);
|
|
},
|
|
// TODO: resetLazy()
|
|
/** Schedule activity for delayed execution (cancel any pending request).
|
|
* scheduleAction('cancel') will cancel the request.
|
|
*/
|
|
scheduleAction: function(mode, ms) {
|
|
if( this.tree.timer ) {
|
|
clearTimeout(this.tree.timer);
|
|
// this.tree.debug("clearTimeout(%o)", this.tree.timer);
|
|
}
|
|
this.tree.timer = null;
|
|
var self = this; // required for closures
|
|
switch (mode) {
|
|
case "cancel":
|
|
// Simply made sure that timer was cleared
|
|
break;
|
|
case "expand":
|
|
this.tree.timer = setTimeout(function(){
|
|
self.tree.debug("setTimeout: trigger expand");
|
|
self.setExpanded(true);
|
|
}, ms);
|
|
break;
|
|
case "activate":
|
|
this.tree.timer = setTimeout(function(){
|
|
self.tree.debug("setTimeout: trigger activate");
|
|
self.setActive(true);
|
|
}, ms);
|
|
break;
|
|
default:
|
|
throw "Invalid mode " + mode;
|
|
}
|
|
// this.tree.debug("setTimeout(%s, %s): %s", mode, ms, this.tree.timer);
|
|
},
|
|
/**
|
|
*
|
|
* @param {Boolean | PlainObject} [effects=false] animation options.
|
|
* @param {FancytreeNode} [topNode=null] this node will remain visible in
|
|
* any case, even if `this` is outside the scroll pane.
|
|
* @returns $.Promise
|
|
*/
|
|
scrollIntoView: function(effects, topNode) {
|
|
effects = (effects === true) ? {duration: 200, queue: false} : effects;
|
|
var topNodeY,
|
|
dfd = new $.Deferred(),
|
|
nodeY = $(this.span).position().top,
|
|
nodeHeight = $(this.span).height(),
|
|
$container = this.tree.$container,
|
|
scrollTop = $container[0].scrollTop,
|
|
horzScrollHeight = Math.max(0, ($container.innerHeight() - $container[0].clientHeight)),
|
|
// containerHeight = $container.height(),
|
|
containerHeight = $container.height() - horzScrollHeight,
|
|
newScrollTop = null;
|
|
|
|
// console.log("horzScrollHeight: " + horzScrollHeight);
|
|
// console.log("$container[0].scrollTop: " + $container[0].scrollTop);
|
|
// console.log("$container[0].scrollHeight: " + $container[0].scrollHeight);
|
|
// console.log("$container[0].clientHeight: " + $container[0].clientHeight);
|
|
// console.log("$container.innerHeight(): " + $container.innerHeight());
|
|
// console.log("$container.height(): " + $container.height());
|
|
|
|
if(nodeY < 0){
|
|
newScrollTop = scrollTop + nodeY;
|
|
}else if((nodeY + nodeHeight) > containerHeight){
|
|
newScrollTop = scrollTop + nodeY - containerHeight + nodeHeight;
|
|
// If a topNode was passed, make sure that it is never scrolled
|
|
// outside the upper border
|
|
if(topNode){
|
|
topNodeY = topNode ? $(topNode.span).position().top : 0;
|
|
if((nodeY - topNodeY) > containerHeight){
|
|
newScrollTop = scrollTop + nodeY;
|
|
}
|
|
}
|
|
}
|
|
if(newScrollTop !== null){
|
|
if(effects){
|
|
// TODO: resolve dfd after animation
|
|
// var that = this;
|
|
$container.animate({scrollTop: newScrollTop}, effects);
|
|
}else{
|
|
$container[0].scrollTop = newScrollTop;
|
|
dfd.resolveWith(this);
|
|
}
|
|
}else{
|
|
dfd.resolveWith(this);
|
|
}
|
|
return dfd.promise();
|
|
/* from jQuery.menu:
|
|
var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
|
|
if ( this._hasScroll() ) {
|
|
borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) || 0;
|
|
paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) || 0;
|
|
offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
|
|
scroll = this.activeMenu.scrollTop();
|
|
elementHeight = this.activeMenu.height();
|
|
itemHeight = item.height();
|
|
|
|
if ( offset < 0 ) {
|
|
this.activeMenu.scrollTop( scroll + offset );
|
|
} else if ( offset + itemHeight > elementHeight ) {
|
|
this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight );
|
|
}
|
|
}
|
|
*/
|
|
},
|
|
|
|
/**Activate this node.
|
|
* @param {Boolean} [flag=true] pass false to deactivate
|
|
*/
|
|
setActive: function(flag){
|
|
return this.tree._callHook("nodeSetActive", this, flag);
|
|
},
|
|
/**Expand this node.
|
|
* @param {Boolean} [flag=true] pass false to collapse
|
|
*/
|
|
setExpanded: function(flag){
|
|
return this.tree._callHook("nodeSetExpanded", this, flag);
|
|
},
|
|
/**Set keyboard focus to this node.
|
|
* @param {Boolean} [flag=true] pass false to blur
|
|
* @see Fancytree#setFocus
|
|
*/
|
|
setFocus: function(flag){
|
|
return this.tree._callHook("nodeSetFocus", this, flag);
|
|
},
|
|
// TODO: setLazyNodeStatus
|
|
/**Select this node.
|
|
* @param {Boolean} [flag=true] pass false to deselect
|
|
*/
|
|
setSelected: function(flag){
|
|
return this.tree._callHook("nodeSetSelected", this, flag);
|
|
},
|
|
setTitle: function(title){
|
|
this.title = title;
|
|
this.renderTitle();
|
|
},
|
|
/**Sort child list by title.
|
|
* @param {function} [cmd] custom compare function.
|
|
* @param {Boolean} [deep] pass true to sort all descendant nodes
|
|
*/
|
|
sortChildren: function(cmp, deep) {
|
|
var i,l,
|
|
cl = this.children;
|
|
|
|
if( !cl ){
|
|
return;
|
|
}
|
|
cmp = cmp || function(a, b) {
|
|
var x = a.title.toLowerCase(),
|
|
y = b.title.toLowerCase();
|
|
return x === y ? 0 : x > y ? 1 : -1;
|
|
};
|
|
cl.sort(cmp);
|
|
if( deep ){
|
|
for(i=0, l=cl.length; i<l; i++){
|
|
if( cl[i].children ){
|
|
cl[i].sortChildren(cmp, "$norender$");
|
|
}
|
|
}
|
|
}
|
|
if( deep !== "$norender$" ){
|
|
this.render();
|
|
}
|
|
},
|
|
/** Convert node (or whole branch) into a dictionary.
|
|
*
|
|
* The result is compatible with node.addChildren().
|
|
*
|
|
* @param {Boolean} recursive
|
|
* @param {function} callback callback(dict) is called for every dict (), in order to allow modifications
|
|
* @returns {NodePatch}
|
|
*/
|
|
toDict: function(recursive, callback) {
|
|
var i, l, node,
|
|
dict = {},
|
|
self = this;
|
|
|
|
$.each(NODE_ATTRS, function(i, a){
|
|
// if(self[a] !== undefined && self[a] !== null){
|
|
if(self[a] || self[a] === false){
|
|
dict[a] = self[a];
|
|
}
|
|
});
|
|
if(!$.isEmptyObject(this.data)){
|
|
dict.data = $.extend({}, this.data);
|
|
if($.isEmptyObject(dict.data)){
|
|
delete dict.data;
|
|
}
|
|
}
|
|
if( callback ){
|
|
callback(dict);
|
|
}
|
|
if( recursive ) {
|
|
if(this.hasChildren()){
|
|
dict.children = [];
|
|
for(i=0, l=this.children.length; i<l; i++ ){
|
|
node = this.children[i];
|
|
if( !node.isStatusNode ){
|
|
dict.children.push(node.toDict(true, callback));
|
|
}
|
|
}
|
|
}else{
|
|
// dict.children = null;
|
|
}
|
|
}
|
|
return dict;
|
|
},
|
|
/** Flip expanded status. */
|
|
toggleExpanded: function(){
|
|
return this.tree._callHook("nodeToggleExpanded", this);
|
|
},
|
|
/** Flip selection status. */
|
|
toggleSelected: function(){
|
|
return this.tree._callHook("nodeToggleSelected", this);
|
|
},
|
|
toString: function() {
|
|
return "<FancytreeNode(#" + this.key + ", '" + this.title + "')>";
|
|
},
|
|
/** Call fn(node) for all child nodes. Stop iteration, if fn() returns false.
|
|
* Skip current branch, if fn() returns 'skip'.
|
|
* @param {function} fn the callback function.
|
|
* Return false to stop iteration, return "skip" to skip this node and children only.
|
|
* @param {Boolean} [includeSelf=false]
|
|
* @returns {Boolean} false, if the iterator was stopped.
|
|
*/
|
|
visit: function(fn, includeSelf) {
|
|
var i, l,
|
|
res = true,
|
|
children = this.children;
|
|
|
|
if( includeSelf === true ) {
|
|
res = fn(this);
|
|
if( res === false || res === "skip" ){
|
|
return res;
|
|
}
|
|
}
|
|
if(children){
|
|
for(i=0, l=children.length; i<l; i++){
|
|
res = children[i].visit(fn, true);
|
|
if( res === false ){
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return res;
|
|
},
|
|
/**
|
|
*
|
|
* @param fn
|
|
* @param includeSelf
|
|
* @returns {Boolean}
|
|
*/
|
|
visitParents: function(fn, includeSelf) {
|
|
// Visit parent nodes (bottom up)
|
|
if(includeSelf && fn(this) === false){
|
|
return false;
|
|
}
|
|
var p = this.parent;
|
|
while( p ) {
|
|
if(fn(p) === false){
|
|
return false;
|
|
}
|
|
p = p.parent;
|
|
}
|
|
return true;
|
|
},
|
|
/** Write warning to browser console (prepending node info)
|
|
*
|
|
* @param {*} msg string or object or array of such
|
|
*/
|
|
warn: function(msg){
|
|
Array.prototype.unshift.call(arguments, this.toString());
|
|
consoleApply("warn", arguments);
|
|
}
|
|
};
|
|
|
|
|
|
/* *****************************************************************************
|
|
* Fancytree
|
|
*/
|
|
/**
|
|
* Construct a new tree.
|
|
* @class The controller behind a fancytree.
|
|
* @name Fancytree
|
|
* @constructor
|
|
* @param {Widget} widget
|
|
*
|
|
* @property {FancytreeOptions} options
|
|
* @property {FancytreeNode} rootNode
|
|
* @property {FancytreeNode} activeNode
|
|
* @property {FancytreeNode} focusNode
|
|
* @property {jQueryObject} $div
|
|
* @property {object} widget
|
|
* @property {String} _id
|
|
* @property {String} statusClassPropName
|
|
* @property {String} ariaPropName
|
|
* @property {String} nodeContainerAttrName
|
|
* @property {FancytreeNode} lastSelectedNode
|
|
*/
|
|
function Fancytree(widget){
|
|
// TODO: rename widget to widget (it's not a jQuery object)
|
|
this.widget = widget;
|
|
this.$div = widget.element;
|
|
this.options = widget.options;
|
|
this._id = $.ui.fancytree._nextId++;
|
|
this._ns = ".fancytree-" + this._id; // append for namespaced events
|
|
this.activeNode = null;
|
|
this.focusNode = null;
|
|
this.lastSelectedNode = null;
|
|
this.systemFocusElement = null,
|
|
|
|
this.statusClassPropName = "span";
|
|
this.ariaPropName = "li";
|
|
this.nodeContainerAttrName = "li";
|
|
|
|
// Remove previous markup if any
|
|
this.$div.find(">ul.fancytree-container").remove();
|
|
|
|
// Create a node without parent.
|
|
var fakeParent = { tree: this },
|
|
$ul;
|
|
this.rootNode = new FancytreeNode(fakeParent, {
|
|
title: "root",
|
|
key: "root_" + this._id,
|
|
children: null
|
|
});
|
|
this.rootNode.parent = null;
|
|
|
|
// Create root markup
|
|
$ul = $("<ul>", {
|
|
"class": "ui-fancytree fancytree-container"
|
|
}).appendTo(this.$div);
|
|
this.$container = $ul;
|
|
this.rootNode.ul = $ul[0];
|
|
|
|
if(this.options.debugLevel == null){
|
|
this.options.debugLevel = FT.debugLevel;
|
|
}
|
|
// Add container to the TAB chain
|
|
// See http://www.w3.org/TR/wai-aria-practices/#focus_activedescendant
|
|
if(this.options.tabbable){
|
|
this.$container.attr("tabindex", "0");
|
|
}
|
|
if(this.options.aria){
|
|
this.$container.attr("role", "tree")
|
|
.attr("aria-multiselectable", true);
|
|
}
|
|
}
|
|
|
|
|
|
Fancytree.prototype = /**@lends Fancytree*/{
|
|
/** Return a context object that can be re-used for _callHook().
|
|
* @param {Fancytree | FancytreeNode | EventData} obj
|
|
* @param {Event} originalEvent
|
|
* @returns {EventData}
|
|
*/
|
|
_makeHookContext: function(obj, originalEvent) {
|
|
if(obj.node !== undefined){
|
|
// obj is already a context object
|
|
if(originalEvent && obj.originalEvent !== originalEvent){
|
|
$.error("invalid args");
|
|
}
|
|
return obj;
|
|
}else if(obj.tree){
|
|
// obj is a FancytreeNode
|
|
var tree = obj.tree;
|
|
return { node: obj, tree: tree, widget: tree.widget, options: tree.widget.options, originalEvent: originalEvent };
|
|
}else if(obj.widget){
|
|
// obj is a Fancytree
|
|
return { node: null, tree: obj, widget: obj.widget, options: obj.widget.options, originalEvent: originalEvent };
|
|
}
|
|
$.error("invalid args");
|
|
},
|
|
/** Trigger a hook function: funcName(ctx, [...]).
|
|
*
|
|
* @param {String} funcName
|
|
* @param {Fancytree|FancytreeNode|EventData} contextObject
|
|
* @param {any, ...} [_extraArgs] optional additional arguments
|
|
* @returns {any}
|
|
*/
|
|
_callHook: function(funcName, contextObject, _extraArgs) {
|
|
var ctx = this._makeHookContext(contextObject),
|
|
fn = this[funcName],
|
|
args = Array.prototype.slice.call(arguments, 2);
|
|
if(!$.isFunction(fn)){
|
|
$.error("_callHook('" + funcName + "') is not a function");
|
|
}
|
|
args.unshift(ctx);
|
|
// this.debug("_hook", funcName, ctx.node && ctx.node.toString() || ctx.tree.toString(), args);
|
|
return fn.apply(this, args);
|
|
},
|
|
/** Activate node with a given key.
|
|
*
|
|
* A prevously activated node will be deactivated.
|
|
* Pass key = false, to deactivate the current node only.
|
|
* @param {String} key
|
|
* @returns {FancytreeNode} activated node (null, if not found)
|
|
*/
|
|
activateKey: function(key) {
|
|
var node = this.getNodeByKey(key);
|
|
if(node){
|
|
node.setActive();
|
|
}else if(this.activeNode){
|
|
this.activeNode.setActive(false);
|
|
}
|
|
return node;
|
|
},
|
|
/**
|
|
*
|
|
* @param {Array} patchList array of [key, NodePatch] arrays
|
|
* @returns {$.Promise} resolved, when all patches have been applied
|
|
* @see TreePatch
|
|
*/
|
|
applyPatch: function(patchList) {
|
|
var dfd, i, p2, key, patch, node,
|
|
patchCount = patchList.length,
|
|
deferredList = [];
|
|
|
|
for(i=0; i<patchCount; i++){
|
|
p2 = patchList[i];
|
|
_assert(p2.length === 2, "patchList must be an array of length-2-arrays");
|
|
key = p2[0];
|
|
patch = p2[1];
|
|
node = (key === null) ? this.rootNode : this.getNodeByKey(key);
|
|
if(node){
|
|
dfd = new $.Deferred();
|
|
deferredList.push(dfd);
|
|
node.applyPatch(patch).always(_makeResolveFunc(dfd, node));
|
|
}else{
|
|
this.warn("could not find node with key '" + key + "'");
|
|
}
|
|
}
|
|
// Return a promise that is resovled, when ALL patches were applied
|
|
return $.when.apply($, deferredList).promise();
|
|
},
|
|
/* TODO: implement in dnd extension
|
|
cancelDrag: function() {
|
|
var dd = $.ui.ddmanager.current;
|
|
if(dd){
|
|
dd.cancel();
|
|
}
|
|
},
|
|
*/
|
|
count: function() {
|
|
return this.rootNode.countChildren();
|
|
},
|
|
/** Write to browser console if debugLevel >= 2 (prepending tree info)
|
|
*
|
|
* @param {*} msg string or object or array of such
|
|
*/
|
|
debug: function(msg){
|
|
if( this.options.debugLevel >= 2 ) {
|
|
Array.prototype.unshift.call(arguments, this.toString());
|
|
consoleApply("debug", arguments);
|
|
}
|
|
},
|
|
// TODO: disable()
|
|
// TODO: enable()
|
|
// TODO: enableUpdate()
|
|
// TODO: fromDict
|
|
/**
|
|
* Generate INPUT elements that can be submitted with html forms.
|
|
*
|
|
* In selectMode 3 only the topmost selected nodes are considered.
|
|
*
|
|
* @param {Boolean | String} [selected=true]
|
|
* @param {Boolean | String} [active=true]
|
|
*/
|
|
generateFormElements: function(selected, active) {
|
|
// TODO: test case
|
|
var nodeList,
|
|
selectedName = (selected !== false) ? "ft_" + this._id : selected,
|
|
activeName = (active !== false) ? "ft_" + this._id + "_active" : active,
|
|
id = "fancytree_result_" + this._id,
|
|
$result = this.$container.find("div#" + id);
|
|
|
|
if($result.length){
|
|
$result.empty();
|
|
}else{
|
|
$result = $("<div>", {
|
|
id: id
|
|
}).hide().appendTo(this.$container);
|
|
}
|
|
if(selectedName){
|
|
nodeList = this.getSelectedNodes( this.options.selectMode === 3 );
|
|
$.each(nodeList, function(idx, node){
|
|
$result.append($("<input>", {
|
|
type: "checkbox",
|
|
name: selectedName,
|
|
value: node.key,
|
|
checked: true
|
|
}));
|
|
});
|
|
}
|
|
if(activeName && this.activeNode){
|
|
$result.append($("<input>", {
|
|
type: "radio",
|
|
name: activeName,
|
|
value: this.activeNode.key,
|
|
checked: true
|
|
}));
|
|
}
|
|
},
|
|
/**
|
|
* Return node that is active.
|
|
* @returns {FancytreeNode}
|
|
*/
|
|
getActiveNode: function() {
|
|
return this.activeNode;
|
|
},
|
|
/** @returns {FancytreeNode | null}*/
|
|
getFirstChild: function() {
|
|
return this.rootNode.getFirstChild();
|
|
},
|
|
/**
|
|
* Return node that has keyboard focus.
|
|
* @param {Boolean} [ifTreeHasFocus=false]
|
|
* @returns {FancytreeNode}
|
|
*/
|
|
getFocusNode: function(ifTreeHasFocus) {
|
|
// TODO: implement ifTreeHasFocus
|
|
return this.focusNode;
|
|
},
|
|
getNodeByKey: function(key, searchRoot) {
|
|
// Search the DOM by element ID (assuming this is faster than traversing all nodes).
|
|
// $("#...") has problems, if the key contains '.', so we use getElementById()
|
|
var el, match;
|
|
if(!searchRoot){
|
|
el = document.getElementById(this.options.idPrefix + key);
|
|
if( el ){
|
|
return el.ftnode ? el.ftnode : null;
|
|
}
|
|
}
|
|
// Not found in the DOM, but still may be in an unrendered part of tree
|
|
// TODO: optimize with specialized loop
|
|
// TODO: consider keyMap?
|
|
searchRoot = searchRoot || this.rootNode;
|
|
match = null;
|
|
searchRoot.visit(function(node){
|
|
// window.console.log("getNodeByKey(" + key + "): ", node.key);
|
|
if(node.key === key) {
|
|
match = node;
|
|
return false;
|
|
}
|
|
}, true);
|
|
return match;
|
|
},
|
|
// TODO: getRoot()
|
|
/**
|
|
* Return a list of selected nodes.
|
|
* @param {Boolean} [stopOnParents=false] only return the topmost selected
|
|
* node (useful with selectMode 3)
|
|
* @returns {FancytreeNode[]}
|
|
*/
|
|
getSelectedNodes: function(stopOnParents) {
|
|
var nodeList = [];
|
|
this.rootNode.visit(function(node){
|
|
if( node.selected ) {
|
|
nodeList.push(node);
|
|
if( stopOnParents === true ){
|
|
return "skip"; // stop processing this branch
|
|
}
|
|
}
|
|
});
|
|
return nodeList;
|
|
},
|
|
/**
|
|
* @returns {Boolean} true if the tree control has keyboard focus
|
|
*/
|
|
hasFocus: function(){
|
|
return FT.focusTree === this;
|
|
},
|
|
/** Write to browser console if debugLevel >= 1 (prepending tree info)
|
|
*
|
|
* @param {*} msg string or object or array of such
|
|
*/
|
|
info: function(msg){
|
|
if( this.options.debugLevel >= 1 ) {
|
|
Array.prototype.unshift.call(arguments, this.toString());
|
|
consoleApply("info", arguments);
|
|
}
|
|
},
|
|
/*
|
|
TODO: isInitializing: function() {
|
|
return ( this.phase=="init" || this.phase=="postInit" );
|
|
},
|
|
TODO: isReloading: function() {
|
|
return ( this.phase=="init" || this.phase=="postInit" ) && this.options.persist && this.persistence.cookiesFound;
|
|
},
|
|
TODO: isUserEvent: function() {
|
|
return ( this.phase=="userEvent" );
|
|
},
|
|
*/
|
|
/**
|
|
* Expand all parents of one or more nodes.
|
|
* Calls
|
|
* @param {String | String[]} keyPath one or more key paths (e.g. '/3/2_1/7')
|
|
* @param {function} callback callbeck(mode) is called for every visited node
|
|
* @returns {$.Promise}
|
|
*/
|
|
/*
|
|
_loadKeyPath: function(keyPath, callback) {
|
|
var tree = this.tree;
|
|
tree.logDebug("%s._loadKeyPath(%s)", this, keyPath);
|
|
if(keyPath === ""){
|
|
throw "Key path must not be empty";
|
|
}
|
|
var segList = keyPath.split(tree.options.keyPathSeparator);
|
|
if(segList[0] === ""){
|
|
throw "Key path must be relative (don't start with '/')";
|
|
}
|
|
var seg = segList.shift();
|
|
|
|
for(var i=0, l=this.childList.length; i < l; i++){
|
|
var child = this.childList[i];
|
|
if( child.data.key === seg ){
|
|
if(segList.length === 0) {
|
|
// Found the end node
|
|
callback.call(tree, child, "ok");
|
|
|
|
}else if(child.data.isLazy && (child.childList === null || child.childList === undefined)){
|
|
tree.logDebug("%s._loadKeyPath(%s) -> reloading %s...", this, keyPath, child);
|
|
var self = this;
|
|
child.reloadChildren(function(node, isOk){
|
|
// After loading, look for direct child with that key
|
|
if(isOk){
|
|
tree.logDebug("%s._loadKeyPath(%s) -> reloaded %s.", node, keyPath, node);
|
|
callback.call(tree, child, "loaded");
|
|
node._loadKeyPath(segList.join(tree.options.keyPathSeparator), callback);
|
|
}else{
|
|
tree.logWarning("%s._loadKeyPath(%s) -> reloadChildren() failed.", self, keyPath);
|
|
callback.call(tree, child, "error");
|
|
}
|
|
}); // Note: this line gives a JSLint warning (Don't make functions within a loop)
|
|
// we can ignore it, since it will only be exectuted once, the the loop is ended
|
|
// See also http://stackoverflow.com/questions/3037598/how-to-get-around-the-jslint-error-dont-make-functions-within-a-loop
|
|
} else {
|
|
callback.call(tree, child, "loaded");
|
|
// Look for direct child with that key
|
|
child._loadKeyPath(segList.join(tree.options.keyPathSeparator), callback);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
// Could not find key
|
|
tree.logWarning("Node not found: " + seg);
|
|
return;
|
|
},
|
|
|
|
*/
|
|
loadKeyPath: function(keyPathList, callback, _rootNode) {
|
|
var deferredList, dfd, i, path, key, loadMap, node, segList,
|
|
root = _rootNode || this.rootNode,
|
|
sep = this.options.keyPathSeparator,
|
|
self = this;
|
|
|
|
if(!$.isArray(keyPathList)){
|
|
keyPathList = [keyPathList];
|
|
}
|
|
// Pass 1: handle all path segments for nodes that are already loaded
|
|
// Collect distinct top-most lazy nodes in a map
|
|
loadMap = {};
|
|
|
|
for(i=0; i<keyPathList.length; i++){
|
|
path = keyPathList[i];
|
|
// strip leading slash
|
|
if(path.charAt(0) === sep){
|
|
path = path.substr(1);
|
|
}
|
|
// traverse and strip keys, until we hit a lazy, unloaded node
|
|
segList = path.split(sep);
|
|
while(segList.length){
|
|
key = segList.shift();
|
|
// node = _findDirectChild(root, key);
|
|
node = root._findDirectChild(key);
|
|
if(!node){
|
|
this.warn("loadKeyPath: key not found: " + key + " (parent: " + root + ")");
|
|
callback.call(this, key, "error");
|
|
break;
|
|
}else if(segList.length === 0){
|
|
callback.call(this, node, "ok");
|
|
break;
|
|
}else if(!node.lazy || (node.hasChildren() !== undefined )){
|
|
callback.call(this, node, "loaded");
|
|
root = node;
|
|
}else{
|
|
callback.call(this, node, "loaded");
|
|
// segList.unshift(key);
|
|
if(loadMap[key]){
|
|
loadMap[key].push(segList.join(sep));
|
|
}else{
|
|
loadMap[key] = [segList.join(sep)];
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
// alert("loadKeyPath: loadMap=" + JSON.stringify(loadMap));
|
|
// Now load all lazy nodes and continue itearation for remaining paths
|
|
deferredList = [];
|
|
// Avoid jshint warning 'Don't make functions within a loop.':
|
|
function __lazyload(key, node, dfd){
|
|
callback.call(self, node, "loading");
|
|
node.lazyLoad().done(function(){
|
|
self.loadKeyPath.call(self, loadMap[key], callback, node).always(_makeResolveFunc(dfd, self));
|
|
}).fail(function(errMsg){
|
|
self.warn("loadKeyPath: error loading: " + key + " (parent: " + root + ")");
|
|
callback.call(self, node, "error");
|
|
dfd.reject();
|
|
});
|
|
}
|
|
for(key in loadMap){
|
|
node = root._findDirectChild(key);
|
|
// alert("loadKeyPath: lazy node(" + key + ") = " + node);
|
|
dfd = new $.Deferred();
|
|
deferredList.push(dfd);
|
|
__lazyload(key, node, dfd);
|
|
}
|
|
// Return a promise that is resovled, when ALL paths were loaded
|
|
return $.when.apply($, deferredList).promise();
|
|
},
|
|
/** _Default handling for mouse click events. */
|
|
nodeClick: function(ctx) {
|
|
// this.tree.logDebug("ftnode.onClick(" + event.type + "): ftnode:" + this + ", button:" + event.button + ", which: " + event.which);
|
|
var activate, expand,
|
|
event = ctx.originalEvent,
|
|
targetType = ctx.targetType,
|
|
node = ctx.node;
|
|
|
|
// TODO: use switch
|
|
// TODO: make sure clicks on embedded <input> doesn't steal focus (see table sample)
|
|
if( targetType === "expander" ) {
|
|
// Clicking the expander icon always expands/collapses
|
|
this._callHook("nodeToggleExpanded", ctx);
|
|
// this._callHook("nodeSetFocus", ctx, true); // issue 95
|
|
} else if( targetType === "checkbox" ) {
|
|
// Clicking the checkbox always (de)selects
|
|
this._callHook("nodeToggleSelected", ctx);
|
|
this._callHook("nodeSetFocus", ctx, true); // issue 95
|
|
} else {
|
|
// Honor `clickFolderMode` for
|
|
expand = false;
|
|
activate = true;
|
|
if( node.folder ) {
|
|
switch( ctx.options.clickFolderMode ) {
|
|
case 2: // expand only
|
|
expand = true;
|
|
activate = false;
|
|
break;
|
|
case 3: // expand and activate
|
|
activate = true;
|
|
expand = true; //!node.isExpanded();
|
|
break;
|
|
// else 1 or 4: just activate
|
|
}
|
|
}
|
|
if( activate ) {
|
|
this.nodeSetFocus(ctx);
|
|
this._callHook("nodeSetActive", ctx, true);
|
|
}
|
|
if( expand ) {
|
|
if(!activate){
|
|
// this._callHook("nodeSetFocus", ctx);
|
|
}
|
|
// this._callHook("nodeSetExpanded", ctx, true);
|
|
this._callHook("nodeToggleExpanded", ctx);
|
|
}
|
|
}
|
|
// Make sure that clicks stop, otherwise <a href='#'> jumps to the top
|
|
if(event.target.localName === "a" && event.target.className === "fancytree-title"){
|
|
event.preventDefault();
|
|
}
|
|
// TODO: return promise?
|
|
},
|
|
nodeCollapseSiblings: function(ctx) {
|
|
// TODO: return promise?
|
|
var ac, i, l,
|
|
node = ctx.node;
|
|
|
|
if( node.parent ){
|
|
ac = node.parent.children;
|
|
for (i=0, l=ac.length; i<l; i++) {
|
|
if ( ac[i] !== node && ac[i].expanded ){
|
|
this._callHook("nodeSetExpanded", ac[i], false);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
nodeDblclick: function(ctx) {
|
|
// TODO: return promise?
|
|
if( ctx.targetType === "title" && ctx.options.clickFolderMode === 4) {
|
|
// this.nodeSetFocus(ctx);
|
|
// this._callHook("nodeSetActive", ctx, true);
|
|
this._callHook("nodeToggleExpanded", ctx);
|
|
}
|
|
// TODO: prevent text selection on dblclicks
|
|
if( ctx.targetType === "title" ) {
|
|
ctx.originalEvent.preventDefault();
|
|
}
|
|
},
|
|
/** Default handling for mouse keydown events.
|
|
*
|
|
* NOTE: this may be called with node == null if tree (but no node) has focus.
|
|
*/
|
|
nodeKeydown: function(ctx) {
|
|
// TODO: return promise?
|
|
var i, parents,
|
|
event = ctx.originalEvent,
|
|
node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
handled = true,
|
|
KC = $.ui.keyCode,
|
|
sib = null;
|
|
|
|
// node.debug("ftnode.nodeKeydown(" + event.type + "): ftnode:" + this + ", charCode:" + event.charCode + ", keyCode: " + event.keyCode + ", which: " + event.which);
|
|
|
|
// Set focus to first node, if no other node has the focus yet
|
|
if( !node ){
|
|
this.rootNode.getFirstChild().setFocus();
|
|
node = ctx.node = this.focusNode;
|
|
node.debug("Keydown force focus on first node");
|
|
}
|
|
// Navigate to node
|
|
function _goto(n){
|
|
if( n ){
|
|
n.makeVisible();
|
|
return (event.ctrlKey || !opts.autoActivate ) ? n.setFocus() : n.setActive();
|
|
}
|
|
}
|
|
|
|
switch( event.which ) {
|
|
// charCodes:
|
|
case KC.NUMPAD_ADD: //107: // '+'
|
|
case 187: // '+' @ Chrome, Safari
|
|
tree.nodeSetExpanded(ctx, true);
|
|
break;
|
|
case KC.NUMPAD_SUBTRACT: // '-'
|
|
case 189: // '-' @ Chrome, Safari
|
|
tree.nodeSetExpanded(ctx, false);
|
|
break;
|
|
case KC.SPACE:
|
|
if(opts.checkbox){
|
|
tree.nodeToggleSelected(ctx);
|
|
}else{
|
|
tree.nodeSetActive(ctx, true);
|
|
}
|
|
break;
|
|
case KC.ENTER:
|
|
tree.nodeSetActive(ctx, true);
|
|
break;
|
|
case KC.BACKSPACE:
|
|
_goto(node.parent);
|
|
break;
|
|
case KC.LEFT:
|
|
if( node.expanded ) {
|
|
tree.nodeSetExpanded(ctx, false);
|
|
// tree.nodeSetFocus(ctx);
|
|
_goto(node);
|
|
} else if( node.parent && node.parent.parent ) {
|
|
// node.parent.setFocus();
|
|
_goto(node.parent);
|
|
}
|
|
break;
|
|
case KC.RIGHT:
|
|
if( !node.expanded && (node.children || node.lazy) ) {
|
|
tree.nodeSetExpanded(ctx, true);
|
|
// tree.nodeSetFocus(ctx);
|
|
_goto(node);
|
|
} else if( node.children ) {
|
|
// node.children[0].setFocus();
|
|
_goto(node.children[0]);
|
|
}
|
|
break;
|
|
case KC.UP:
|
|
sib = node.getPrevSibling();
|
|
while( sib && sib.expanded && sib.children ){
|
|
sib = sib.children[sib.children.length - 1];
|
|
}
|
|
if( !sib && node.parent && node.parent.parent ){
|
|
sib = node.parent;
|
|
}
|
|
_goto(sib);
|
|
break;
|
|
case KC.DOWN:
|
|
if( node.expanded && node.children ) {
|
|
sib = node.children[0];
|
|
} else {
|
|
parents = node.getParentList(false, true);
|
|
for(i=parents.length-1; i>=0; i--) {
|
|
sib = parents[i].getNextSibling();
|
|
if( sib ){ break; }
|
|
}
|
|
}
|
|
_goto(sib);
|
|
break;
|
|
default:
|
|
handled = false;
|
|
}
|
|
if(handled){
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
|
|
// /** Default handling for mouse keypress events. */
|
|
// nodeKeypress: function(ctx) {
|
|
// var event = ctx.originalEvent;
|
|
// },
|
|
|
|
// /** Trigger lazyload event (async). */
|
|
// nodeLazyLoad: function(ctx) {
|
|
// var node = ctx.node;
|
|
// if(this._triggerNodeEvent())
|
|
// },
|
|
/** Load children (async).
|
|
* source may be
|
|
* - an array of children
|
|
* - a node object
|
|
* - an Ajax options object
|
|
* - an Ajax.promise
|
|
*
|
|
* @param {object} ctx
|
|
* @param {object[]|object|string|$.Promise|function} source
|
|
* @returns {$.Promise} The deferred will be resolved as soon as the (ajax)
|
|
* data was rendered.
|
|
*/
|
|
nodeLoadChildren: function(ctx, source) {
|
|
var ajax, children, delay, dfd,
|
|
tree = ctx.tree,
|
|
node = ctx.node,
|
|
self = this;
|
|
|
|
if($.isFunction(source)){
|
|
source = source();
|
|
}
|
|
if(source.url || $.isFunction(source.done)){
|
|
tree.nodeSetStatus(ctx, "loading");
|
|
if(source.url){
|
|
// `source` is an Ajax options object
|
|
ajax = $.extend({}, ctx.options.ajax, source);
|
|
if(ajax.debugLazyDelay){
|
|
// simulate a slow server
|
|
delay = ajax.debugLazyDelay;
|
|
if($.isArray(delay)){ // random delay range [min..max]
|
|
delay = delay[0] + Math.random() * (delay[1] - delay[0]);
|
|
}
|
|
node.debug("nodeLoadChildren waiting debug delay " + Math.round(delay) + "ms");
|
|
dfd = $.Deferred();
|
|
setTimeout(function(){
|
|
ajax.debugLazyDelay = false;
|
|
self.nodeLoadChildren(ctx, ajax).complete(function(){
|
|
dfd.resolve.apply(this, arguments);
|
|
});
|
|
}, delay);
|
|
return dfd;
|
|
}else{
|
|
dfd = $.ajax(ajax);
|
|
}
|
|
}else{
|
|
// `source` is a promise, as returned by a $.ajax call
|
|
dfd = source;
|
|
}
|
|
dfd.done(function(data, textStatus, jqXHR){
|
|
var res;
|
|
tree.nodeSetStatus(ctx, "ok");
|
|
if(typeof data === "string"){ $.error("Ajax request returned a string (did you get the JSON dataType wrong?)."); }
|
|
// postProcess is similar to the standard dataFilter hook,
|
|
// but it is also called for JSONP
|
|
if( ctx.options.postProcess ){
|
|
res = tree._triggerNodeEvent("postProcess", ctx, ctx.originalEvent, {response: data, dataType: this.dataType});
|
|
data = $.isArray(res) ? res : data;
|
|
} else if (data && data.hasOwnProperty("d") && ctx.options.enableAspx ) {
|
|
// Process ASPX WebMethod JSON object inside "d" property
|
|
data = (typeof data.d === "string") ? $.parseJSON(data.d) : data.d;
|
|
}
|
|
children = data;
|
|
|
|
}).fail(function(jqXHR, textStatus, errorThrown){
|
|
tree.nodeSetStatus(ctx, "error", textStatus, jqXHR.status + ": " + errorThrown);
|
|
alert("error: " + textStatus + " (" + jqXHR.status + ": " + (errorThrown.message || errorThrown) + ")");
|
|
});
|
|
}else{
|
|
// `source` is an array of child objects
|
|
dfd = $.Deferred();
|
|
children = source;
|
|
dfd.resolve();
|
|
}
|
|
dfd.done(function(){
|
|
_assert($.isArray(children), "expected array of children");
|
|
node._setChildren(children);
|
|
if(node.parent){
|
|
// if nodeLoadChildren was called for rootNode, the caller must
|
|
// use tree.render() instead
|
|
if(node.isVisible()){
|
|
tree.nodeRender(ctx);
|
|
}
|
|
// trigger fancytreeloadchildren (except for tree-reload)
|
|
tree._triggerNodeEvent("loadChildren", node);
|
|
}
|
|
}).fail(function(){
|
|
tree.nodeRender(ctx);
|
|
});
|
|
return dfd;
|
|
},
|
|
// isVisible: function() {
|
|
// // Return true, if all parents are expanded.
|
|
// var parents = ctx.node.getParentList(false, false);
|
|
// for(var i=0, l=parents.length; i<l; i++){
|
|
// if( ! parents[i].expanded ){ return false; }
|
|
// }
|
|
// return true;
|
|
// },
|
|
/** Expand all keys that */
|
|
nodeLoadKeyPath: function(ctx, keyPathList) {
|
|
// TODO: implement and improve
|
|
// http://code.google.com/p/fancytree/issues/detail?id=222
|
|
},
|
|
/** Expand all parents.*/
|
|
nodeMakeVisible: function(ctx) {
|
|
// TODO: also scroll as neccessary: http://stackoverflow.com/questions/8938352/fancytree-how-to-scroll-to-active-node
|
|
// Do we need an extra parameter?
|
|
var i, l,
|
|
parents = ctx.node.getParentList(false, false);
|
|
for(i=0, l=parents.length; i<l; i++){
|
|
parents[i].setExpanded(true);
|
|
}
|
|
},
|
|
// /** Handle focusin/focusout events.*/
|
|
// nodeOnFocusInOut: function(ctx) {
|
|
// if(ctx.originalEvent.type === "focusin"){
|
|
// this.nodeSetFocus(ctx);
|
|
// // if(ctx.tree.focusNode){
|
|
// // $(ctx.tree.focusNode.li).removeClass("fancytree-focused");
|
|
// // }
|
|
// // ctx.tree.focusNode = ctx.node;
|
|
// // $(ctx.node.li).addClass("fancytree-focused");
|
|
// }else{
|
|
// _assert(ctx.originalEvent.type === "focusout");
|
|
// // ctx.tree.focusNode = null;
|
|
// // $(ctx.node.li).removeClass("fancytree-focused");
|
|
// }
|
|
// // $(ctx.node.li).toggleClass("fancytree-focused", ctx.originalEvent.type === "focus");
|
|
// },
|
|
/**
|
|
* Remove a single direct child of ctx.node.
|
|
* @param ctx
|
|
* @param {FancytreeNode} childNode dircect child of ctx.node
|
|
*/
|
|
nodeRemoveChild: function(ctx, childNode) {
|
|
var idx,
|
|
node = ctx.node,
|
|
opts = ctx.options,
|
|
subCtx = $.extend({}, ctx, {node: childNode}),
|
|
children = node.children;
|
|
|
|
FT.debug("nodeRemoveChild()", node.toString(), childNode.toString());
|
|
|
|
if( children.length === 1 ) {
|
|
_assert(childNode === children[0]);
|
|
return this.nodeRemoveChildren(ctx);
|
|
}
|
|
if( this.activeNode && (childNode === this.activeNode || this.activeNode.isDescendantOf(childNode))){
|
|
this.activeNode.setActive(false); // TODO: don't fire events
|
|
}
|
|
if( this.focusNode && (childNode === this.focusNode || this.focusNode.isDescendantOf(childNode))){
|
|
this.focusNode = null;
|
|
}
|
|
// TODO: persist must take care to clear select and expand cookies
|
|
this.nodeRemoveMarkup(subCtx);
|
|
this.nodeRemoveChildren(subCtx);
|
|
idx = $.inArray(childNode, children);
|
|
_assert(idx >= 0);
|
|
// Unlink to support GC
|
|
childNode.visit(function(n){
|
|
n.parent = null;
|
|
}, true);
|
|
if ( opts.removeNode ){
|
|
opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
|
|
}
|
|
// remove from child list
|
|
children.splice(idx, 1);
|
|
},
|
|
/**Remove HTML markup for all descendents of ctx.node.
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeRemoveChildMarkup: function(ctx) {
|
|
var node = ctx.node;
|
|
|
|
FT.debug("nodeRemoveChildMarkup()", node.toString());
|
|
// TODO: Unlink attr.ftnode to support GC
|
|
if(node.ul){
|
|
$(node.ul).remove();
|
|
node.visit(function(n){
|
|
n.li = n.ul = null;
|
|
});
|
|
node.ul = null;
|
|
}
|
|
},
|
|
/**Remove all descendants of ctx.node.
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeRemoveChildren: function(ctx) {
|
|
var subCtx,
|
|
node = ctx.node,
|
|
children = node.children,
|
|
opts = ctx.options;
|
|
|
|
FT.debug("nodeRemoveChildren()", node.toString());
|
|
if(!children){
|
|
return;
|
|
}
|
|
if( this.activeNode && this.activeNode.isDescendantOf(node)){
|
|
this.activeNode.setActive(false); // TODO: don't fire events
|
|
}
|
|
if( this.focusNode && this.focusNode.isDescendantOf(node)){
|
|
this.focusNode = null;
|
|
}
|
|
// TODO: persist must take care to clear select and expand cookies
|
|
this.nodeRemoveChildMarkup(ctx);
|
|
// Unlink children to support GC
|
|
// TODO: also delete this.children (not possible using visit())
|
|
subCtx = $.extend({}, ctx);
|
|
node.visit(function(n){
|
|
n.parent = null;
|
|
if ( opts.removeNode ){
|
|
subCtx.node = n;
|
|
opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
|
|
}
|
|
});
|
|
// Set to 'undefined' which is interpreted as 'not yet loaded' for lazy nodes
|
|
node.children = undefined;
|
|
// TODO: ? this._isLoading = false;
|
|
this.nodeRenderStatus(ctx);
|
|
},
|
|
/**Remove HTML markup for ctx.node and all its descendents.
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeRemoveMarkup: function(ctx) {
|
|
var node = ctx.node;
|
|
FT.debug("nodeRemoveMarkup()", node.toString());
|
|
// TODO: Unlink attr.ftnode to support GC
|
|
if(node.li){
|
|
$(node.li).remove();
|
|
node.li = null;
|
|
}
|
|
this.nodeRemoveChildMarkup(ctx);
|
|
},
|
|
/**
|
|
* 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 it's 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.
|
|
*
|
|
* Note: if a node was created/removed, nodeRender() must be called for the
|
|
* parent!
|
|
* <code>
|
|
* <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>
|
|
* </code>
|
|
*
|
|
* @param: {EventData} ctx
|
|
* @param: {Boolean} [force=false] re-render, even if html markup was already created
|
|
* @param: {Boolean} [deep=false] also render all descendants, even if parent is collapsed
|
|
* @param: {Boolean} [collapsed=false] force root node to be collapsed, so we can apply animated expand later
|
|
*/
|
|
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
|
/* This method must take care of all cases where the current data mode
|
|
* (i.e. node hierarchy) does not match the current markup.
|
|
*
|
|
* - node was not yet rendered:
|
|
* create markup
|
|
* - node was rendered: exit fast
|
|
* - children have been added
|
|
* - childern have been removed
|
|
*/
|
|
var childLI, childNode1, childNode2, i, l, subCtx,
|
|
node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
aria = opts.aria,
|
|
firstTime = false,
|
|
parent = node.parent,
|
|
isRootNode = !parent,
|
|
children = node.children;
|
|
// FT.debug("nodeRender(" + !!force + ", " + !!deep + ")", node.toString());
|
|
|
|
_assert(isRootNode || parent.ul, "parent UL must exist");
|
|
|
|
// Render the node
|
|
if( !isRootNode ){
|
|
// Discard markup on force-mode, or if it is not linked to parent <ul>
|
|
if(node.li && (force || (node.li.parentNode !== node.parent.ul) ) ){
|
|
if(node.li.parentNode !== node.parent.ul){
|
|
// alert("unlink " + node + " (must be child of " + node.parent + ")");
|
|
this.warn("unlink " + node + " (must be child of " + node.parent + ")");
|
|
}
|
|
// this.debug("nodeRemoveMarkup...");
|
|
this.nodeRemoveMarkup(ctx);
|
|
}
|
|
// Create <li><span /> </li>
|
|
// node.debug("render...");
|
|
if( !node.li ) {
|
|
// node.debug("render... really");
|
|
firstTime = true;
|
|
node.li = document.createElement("li");
|
|
node.li.ftnode = node;
|
|
if(aria){
|
|
// TODO: why doesn't this work:
|
|
// node.li.role = "treeitem";
|
|
// $(node.li).attr("role", "treeitem")
|
|
// .attr("aria-labelledby", "ftal_" + node.key);
|
|
}
|
|
if( node.key && opts.generateIds ){
|
|
node.li.id = opts.idPrefix + node.key;
|
|
}
|
|
node.span = document.createElement("span");
|
|
node.span.className = "fancytree-node";
|
|
if(aria){
|
|
$(node.span).attr("aria-labelledby", "ftal_" + node.key);
|
|
}
|
|
node.li.appendChild(node.span);
|
|
// Note: we don't add the LI to the DOM know, but only after we
|
|
// added all sub elements (hoping that this performs better since
|
|
// the browser only have to render once)
|
|
// TODO: benchmarks to prove this
|
|
// parent.ul.appendChild(node.li);
|
|
|
|
// Create inner HTML for the <span> (expander, checkbox, icon, and title)
|
|
this.nodeRenderTitle(ctx);
|
|
|
|
// Allow tweaking and binding, after node was created for the first time
|
|
// tree._triggerNodeEvent("createNode", ctx);
|
|
if ( opts.createNode ){
|
|
opts.createNode.call(tree, {type: "createNode"}, ctx);
|
|
}
|
|
}else{
|
|
// this.nodeRenderTitle(ctx);
|
|
}
|
|
// Allow tweaking after node state was rendered
|
|
// tree._triggerNodeEvent("renderNode", ctx);
|
|
if ( opts.renderNode ){
|
|
opts.renderNode.call(tree, {type: "renderNode"}, ctx);
|
|
}
|
|
}
|
|
|
|
// Visit child nodes
|
|
if( children ){
|
|
if( isRootNode || node.expanded || deep === true ) {
|
|
// Create a UL to hold the children
|
|
if( !node.ul ){
|
|
node.ul = document.createElement("ul");
|
|
if((collapsed === true && !_recursive) || !node.expanded){
|
|
// hide top UL, so we can use an animation to show it later
|
|
node.ul.style.display = "none";
|
|
}
|
|
if(aria){
|
|
$(node.ul).attr("role", "group");
|
|
}
|
|
node.li.appendChild(node.ul);
|
|
}
|
|
// Add child markup
|
|
for(i=0, l=children.length; i<l; i++) {
|
|
subCtx = $.extend({}, ctx, {node: children[i]});
|
|
this.nodeRender(subCtx, force, deep, false, true);
|
|
}
|
|
// Make sure, that <li> order matches node.children order.
|
|
// this.nodeFixOrder(ctx);
|
|
childLI = node.ul.firstChild;
|
|
for(i=0, l=children.length-1; i<l; i++) {
|
|
childNode1 = children[i];
|
|
childNode2 = childLI.ftnode;
|
|
if( childNode1 !== childNode2 ) {
|
|
node.debug("_fixOrder: mismatch at index " + i + ": " + childNode1 + " != " + childNode2);
|
|
node.ul.insertBefore(childNode1.li, childNode2.li);
|
|
} else {
|
|
childLI = childLI.nextSibling;
|
|
}
|
|
}
|
|
// TODO: need to check, if node.ul has <li>s, that are not in node.children[] ?
|
|
}
|
|
}else{
|
|
// No children: remove markup if any
|
|
if( node.ul ){
|
|
// alert("remove child markup for " + node);
|
|
this.warn("remove child markup for " + node);
|
|
this.nodeRemoveChildMarkup(ctx);
|
|
}
|
|
}
|
|
if( !isRootNode ){
|
|
// Update element classes according to node state
|
|
this.nodeRenderStatus(ctx);
|
|
// Finally add the whole structure to the DOM, so the browser can render
|
|
if(firstTime){
|
|
parent.ul.appendChild(node.li);
|
|
}
|
|
}
|
|
return;
|
|
},
|
|
/** Create HTML for the node's outer <span> (expander, checkbox, icon, and title).
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeRenderTitle: function(ctx, title) {
|
|
// set node connector images, links and text
|
|
var id, imageSrc, nodeTitle, role, tooltip,
|
|
node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
aria = opts.aria,
|
|
level = node.getLevel(),
|
|
ares = [],
|
|
icon = node.data.icon;
|
|
|
|
if(title !== undefined){
|
|
node.title = title;
|
|
}
|
|
if(!node.span){
|
|
// Silently bail out if node was not rendered yet, assuming
|
|
// node.render() will be called as the node becomes visible
|
|
return;
|
|
}
|
|
// connector (expanded, expandable or simple)
|
|
// TODO: optiimize this if clause
|
|
if( level < opts.minExpandLevel ) {
|
|
if(level > 1){
|
|
if(aria){
|
|
ares.push("<span role='button' class='fancytree-expander'></span>");
|
|
}else{
|
|
ares.push("<span class='fancytree-expander'></span>");
|
|
}
|
|
}
|
|
// .. else (i.e. for root level) skip expander/connector alltogether
|
|
} else {
|
|
if(aria){
|
|
ares.push("<span role='button' class='fancytree-expander'></span>");
|
|
}else{
|
|
ares.push("<span class='fancytree-expander'></span>");
|
|
}
|
|
}
|
|
// Checkbox mode
|
|
if( opts.checkbox && node.hideCheckbox !== true && !node.isStatusNode ) {
|
|
if(aria){
|
|
ares.push("<span role='checkbox' class='fancytree-checkbox'></span>");
|
|
}else{
|
|
ares.push("<span class='fancytree-checkbox'></span>");
|
|
}
|
|
}
|
|
// folder or doctype icon
|
|
role = aria ? " role='img'" : "";
|
|
if ( icon && typeof icon === "string" ) {
|
|
imageSrc = (icon.charAt(0) === "/") ? icon : (opts.imagePath + icon);
|
|
ares.push("<img src='" + imageSrc + "' alt='' />");
|
|
} else if ( node.data.iconclass ) {
|
|
// TODO: review and test and document
|
|
ares.push("<span " + role + " class='fancytree-custom-icon" + " " + node.data.iconclass + "'></span>");
|
|
} else if ( icon === true || (icon !== false && opts.icons !== false) ) {
|
|
// opts.icons defines the default behavior.
|
|
// node.icon == true/false can override this
|
|
ares.push("<span " + role + " class='fancytree-icon'></span>");
|
|
}
|
|
// node title
|
|
nodeTitle = "";
|
|
// TODO: currently undocumented; may be removed?
|
|
if ( opts.renderTitle ){
|
|
nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || "";
|
|
}
|
|
if(!nodeTitle){
|
|
// TODO: escape tooltip string
|
|
tooltip = node.tooltip ? " title='" + node.tooltip.replace(/\"/g, """) + "'" : "";
|
|
id = aria ? " id='ftal_" + node.key + "'" : "";
|
|
role = aria ? " role='treeitem'" : "";
|
|
// href = node.data.href || "#";
|
|
// if( opts.nolink || node.nolink ) {
|
|
// nodeTitle = "<span role='treeitem' tabindex='-1' class='fancytree-title'" + id + tooltip + ">" + node.title + "</span>";
|
|
nodeTitle = "<span " + role + " class='fancytree-title'" + id + tooltip + ">" + node.title + "</span>";
|
|
// } else {
|
|
// nodeTitle = "<a href='" + href + "' tabindex='-1' class='fancytree-title'" + tooltip + ">" + node.title + "</a>";
|
|
// }
|
|
}
|
|
ares.push(nodeTitle);
|
|
// Note: this will trigger focusout, if node had the focus
|
|
node.span.innerHTML = ares.join("");
|
|
},
|
|
/** Update element classes according to node state.
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeRenderStatus: function(ctx) {
|
|
// Set classes for current status
|
|
var node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
// nodeContainer = node[tree.nodeContainerAttrName],
|
|
hasChildren = node.hasChildren(),
|
|
isLastSib = node.isLastSibling(),
|
|
aria = opts.aria,
|
|
// $ariaElem = aria ? $(node[tree.ariaPropName]) : null,
|
|
$ariaElem = $(node.span).find(".fancytree-title"),
|
|
cn = opts._classNames,
|
|
cnList = [],
|
|
statusElem = node[tree.statusClassPropName];
|
|
|
|
if( !statusElem ){
|
|
// if this function is called for an unrendered node, ignore it (will be updated on nect render anyway)
|
|
return;
|
|
}
|
|
// Build a list of class names that we will add to the node <span>
|
|
cnList.push(cn.node);
|
|
if( tree.activeNode === node ){
|
|
cnList.push(cn.active);
|
|
// $(">span.fancytree-title", statusElem).attr("tabindex", "0");
|
|
// tree.$container.removeAttr("tabindex");
|
|
}else{
|
|
// $(">span.fancytree-title", statusElem).removeAttr("tabindex");
|
|
// tree.$container.attr("tabindex", "0");
|
|
}
|
|
if( tree.focusNode === node ){
|
|
cnList.push(cn.focused);
|
|
if(aria){
|
|
// $(">span.fancytree-title", statusElem).attr("tabindex", "0");
|
|
// $(">span.fancytree-title", statusElem).attr("tabindex", "-1");
|
|
// TODO: is this the right element for this attribute?
|
|
$ariaElem
|
|
.attr("aria-activedescendant", true);
|
|
// .attr("tabindex", "-1");
|
|
}
|
|
}else if(aria){
|
|
// $(">span.fancytree-title", statusElem).attr("tabindex", "-1");
|
|
$ariaElem
|
|
.removeAttr("aria-activedescendant");
|
|
// .removeAttr("tabindex");
|
|
}
|
|
if( node.expanded ){
|
|
cnList.push(cn.expanded);
|
|
if(aria){
|
|
$ariaElem.attr("aria-expanded", true);
|
|
}
|
|
}else if(aria){
|
|
$ariaElem.removeAttr("aria-expanded");
|
|
}
|
|
if( node.folder ){
|
|
cnList.push(cn.folder);
|
|
}
|
|
if( hasChildren !== false ){
|
|
cnList.push(cn.hasChildren);
|
|
}
|
|
// TODO: required?
|
|
if( isLastSib ){
|
|
cnList.push(cn.lastsib);
|
|
}
|
|
if( node.lazy && node.children === null ){
|
|
cnList.push(cn.lazy);
|
|
}
|
|
if( node.partsel ){
|
|
cnList.push(cn.partsel);
|
|
}
|
|
if( node.selected ){
|
|
cnList.push(cn.selected);
|
|
if(aria){
|
|
$ariaElem.attr("aria-selected", true);
|
|
}
|
|
}else if(aria){
|
|
$ariaElem.attr("aria-selected", false);
|
|
}
|
|
if( node.extraClasses ){
|
|
cnList.push(node.extraClasses);
|
|
}
|
|
// IE6 doesn't correctly evaluate multiple class names,
|
|
// so we create combined class names that can be used in the CSS
|
|
if( hasChildren === false ){
|
|
cnList.push(cn.combinedExpanderPrefix + "n" +
|
|
(isLastSib ? "l" : "")
|
|
);
|
|
}else{
|
|
cnList.push(cn.combinedExpanderPrefix +
|
|
(node.expanded ? "e" : "c") +
|
|
(node.lazy && node.children === null ? "d" : "") +
|
|
(isLastSib ? "l" : "")
|
|
);
|
|
}
|
|
cnList.push(cn.combinedIconPrefix +
|
|
(node.expanded ? "e" : "c") +
|
|
(node.folder ? "f" : "")
|
|
);
|
|
// node.span.className = cnList.join(" ");
|
|
node[tree.statusClassPropName].className = cnList.join(" ");
|
|
|
|
// TODO: we should not set this in the <span> tag also, if we set it here:
|
|
// Maybe most (all) of the classes should be set in LI instead of SPAN?
|
|
if(node.li){
|
|
node.li.className = isLastSib ? cn.lastsib : "";
|
|
}
|
|
},
|
|
/** 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)
|
|
* @param {EventData} ctx
|
|
* @param {Boolean} [flag=true]
|
|
*/
|
|
nodeSetActive: function(ctx, flag) {
|
|
// Handle user click / [space] / [enter], according to clickFolderMode.
|
|
var subCtx,
|
|
node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
// userEvent = !!ctx.originalEvent,
|
|
isActive = (node === tree.activeNode);
|
|
// flag defaults to true
|
|
flag = (flag !== false);
|
|
node.debug("nodeSetActive", flag);
|
|
|
|
if(isActive === flag){
|
|
// Nothing to do
|
|
return _getResolvedPromise(node);
|
|
}else if(flag && this._triggerNodeEvent("beforeActivate", node, ctx.originalEvent) === false ){
|
|
// Callback returned false
|
|
return _getRejectedPromise(node, ["rejected"]);
|
|
}
|
|
if(flag){
|
|
if(tree.activeNode){
|
|
_assert(tree.activeNode !== node, "node was active (inconsistency)");
|
|
subCtx = $.extend({}, ctx, {node: tree.activeNode});
|
|
tree.nodeSetActive(subCtx, false);
|
|
_assert(tree.activeNode === null, "deactivate was out of sync?");
|
|
}
|
|
if(opts.activeVisible){
|
|
tree.nodeMakeVisible(ctx);
|
|
}
|
|
tree.activeNode = node;
|
|
tree.nodeRenderStatus(ctx);
|
|
tree.nodeSetFocus(ctx);
|
|
tree._triggerNodeEvent("activate", node);
|
|
}else{
|
|
_assert(tree.activeNode === node, "node was not active (inconsistency)");
|
|
tree.activeNode = null;
|
|
this.nodeRenderStatus(ctx);
|
|
ctx.tree._triggerNodeEvent("deactivate", node);
|
|
}
|
|
},
|
|
/** Expand or collapse node, return Deferred.promise.
|
|
*
|
|
* @param {EventData} ctx
|
|
* @param {Boolean} [flag=true]
|
|
* @returns {$.Promise} The deferred will be resolved as soon as the (lazy)
|
|
* data was retrieved, rendered, and the expand animation finshed.
|
|
*/
|
|
nodeSetExpanded: function(ctx, flag) {
|
|
var _afterLoad, dfd, i, l, parents, prevAC,
|
|
node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options;
|
|
// flag defaults to true
|
|
flag = (flag !== false);
|
|
|
|
node.debug("nodeSetExpanded(" + flag + ")");
|
|
// TODO: !!node.expanded is nicer, but doesn't pass jshint
|
|
// https://github.com/jshint/jshint/issues/455
|
|
// if( !!node.expanded === !!flag){
|
|
if((node.expanded && flag) || (!node.expanded && !flag)){
|
|
// Nothing to do
|
|
node.debug("nodeSetExpanded(" + flag + "): nothing to do");
|
|
return _getResolvedPromise(node);
|
|
}else if(flag && !node.lazy && !node.hasChildren() ){
|
|
// Prevent expanding of empty nodes
|
|
return _getRejectedPromise(node, ["empty"]);
|
|
}else if( !flag && node.getLevel() < opts.minExpandLevel ) {
|
|
// Prevent collapsing locked levels
|
|
return _getRejectedPromise(node, ["locked"]);
|
|
}else if ( this._triggerNodeEvent("beforeExpand", node, ctx.originalEvent) === false ){
|
|
// Callback returned false
|
|
return _getRejectedPromise(node, ["rejected"]);
|
|
}
|
|
//
|
|
dfd = new $.Deferred();
|
|
|
|
// Auto-collapse mode: collapse all siblings
|
|
if( flag && !node.expanded && opts.autoCollapse ) {
|
|
parents = node.getParentList(false, true);
|
|
prevAC = opts.autoCollapse;
|
|
try{
|
|
opts.autoCollapse = false;
|
|
for(i=0, l=parents.length; i<l; i++){
|
|
// TODO: should return promise?
|
|
this._callHook("nodeCollapseSiblings", parents[i]);
|
|
}
|
|
}finally{
|
|
opts.autoCollapse = prevAC;
|
|
}
|
|
}
|
|
// Trigger expand/collapse after expanding
|
|
dfd.done(function(){
|
|
ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
|
|
if(opts.autoScroll){
|
|
// Scroll down to last child, but keep current node visible
|
|
node.getLastChild().scrollIntoView(true, node);
|
|
}
|
|
});
|
|
|
|
// vvv Code below is executed after loading finished:
|
|
_afterLoad = function(){
|
|
var duration, easing, isVisible, isExpanded;
|
|
|
|
node.expanded = flag;
|
|
// Create required markup, but make sure the top UL is hidden, so we
|
|
// can animate later
|
|
tree._callHook("nodeRender", ctx, false, false, true);
|
|
|
|
// If the currently active node is now hidden, deactivate it
|
|
// if( opts.activeVisible && this.activeNode && ! this.activeNode.isVisible() ) {
|
|
// this.activeNode.deactivate();
|
|
// }
|
|
|
|
// Expanding a lazy node: set 'loading...' and call callback
|
|
// if( bExpand && this.data.isLazy && this.childList === null && !this._isLoading ) {
|
|
// this._loadContent();
|
|
// return;
|
|
// }
|
|
// Hide children, if node is collapsed
|
|
if( node.ul ) {
|
|
isVisible = (node.ul.style.display !== "none");
|
|
isExpanded = !!node.expanded;
|
|
// _assert(isVisible !== isExpanded);
|
|
if( isVisible === isExpanded ) {
|
|
node.warn("nodeSetExpanded: UL.style.display already set");
|
|
dfd.resolveWith(node);
|
|
} else if( opts.fx ) {
|
|
duration = opts.fx.duration || 200;
|
|
easing = opts.fx.easing;
|
|
node.debug("nodeSetExpanded: animate start...");
|
|
$(node.ul).animate(opts.fx, duration, easing, function(){
|
|
node.debug("nodeSetExpanded: animate done");
|
|
dfd.resolveWith(node);
|
|
});
|
|
} else {
|
|
node.ul.style.display = ( node.expanded || !parent ) ? "" : "none";
|
|
dfd.resolveWith(node);
|
|
}
|
|
}else{
|
|
dfd.resolveWith(node);
|
|
}
|
|
};
|
|
// ^^^ Code above is executed after loading finshed.
|
|
|
|
// Load lazy nodes, if any. Then continue with _afterLoad()
|
|
if(flag && node.lazy && node.hasChildren() === undefined){
|
|
node.debug("nodeSetExpanded: load start...");
|
|
node.lazyLoad().done(function(){
|
|
node.debug("nodeSetExpanded: load done");
|
|
if(dfd.notifyWith){ // requires jQuery 1.6+
|
|
dfd.notifyWith(node, ["loaded"]);
|
|
}
|
|
_afterLoad.call(tree);
|
|
}).fail(function(errMsg){
|
|
dfd.rejectWith(node, ["load failed (" + errMsg + ")"]);
|
|
});
|
|
/*
|
|
var source = tree._triggerNodeEvent("lazyload", node, ctx.originalEvent);
|
|
_assert(typeof source !== "boolean", "lazyload event must return source in data.result");
|
|
node.debug("nodeSetExpanded: load start...");
|
|
this._callHook("nodeLoadChildren", ctx, source).done(function(){
|
|
node.debug("nodeSetExpanded: load done");
|
|
if(dfd.notifyWith){ // requires jQuery 1.6+
|
|
dfd.notifyWith(node, ["loaded"]);
|
|
}
|
|
_afterLoad.call(tree);
|
|
}).fail(function(errMsg){
|
|
dfd.rejectWith(node, ["load failed (" + errMsg + ")"]);
|
|
});
|
|
*/
|
|
}else{
|
|
_afterLoad();
|
|
}
|
|
node.debug("nodeSetExpanded: returns");
|
|
return dfd.promise();
|
|
},
|
|
/**
|
|
* @param {EventData} ctx
|
|
* @param {Boolean} [flag=true]
|
|
*/
|
|
nodeSetFocus: function(ctx, flag) {
|
|
ctx.node.debug("nodeSetFocus(" + flag + ")");
|
|
var ctx2,
|
|
tree = ctx.tree,
|
|
node = ctx.node;
|
|
|
|
flag = (flag !== false);
|
|
|
|
// Blur previous node if any
|
|
if(tree.focusNode){
|
|
if(tree.focusNode === node && flag){
|
|
node.debug("nodeSetFocus(" + flag + "): nothing to do");
|
|
return;
|
|
}
|
|
ctx2 = $.extend({}, ctx, {node: tree.focusNode});
|
|
tree.focusNode = null;
|
|
this._triggerNodeEvent("blur", ctx2);
|
|
this._callHook("nodeRenderStatus", ctx2);
|
|
}
|
|
// Set focus to container and node
|
|
if(flag){
|
|
if(FT.focusTree !== tree){
|
|
node.debug("nodeSetFocus: forcing container focus");
|
|
// Note: we pass _calledByNodeSetFocus=true
|
|
this._callHook("treeSetFocus", ctx, true, true);
|
|
}
|
|
this.nodeMakeVisible(ctx);
|
|
tree.focusNode = node;
|
|
// node.debug("FOCUS...");
|
|
// $(node.span).find(".fancytree-title").focus();
|
|
this._triggerNodeEvent("focus", ctx);
|
|
// if(ctx.options.autoActivate){
|
|
// tree.nodeSetActive(ctx, true);
|
|
// }
|
|
if(ctx.options.autoScroll){
|
|
node.scrollIntoView();
|
|
}
|
|
this._callHook("nodeRenderStatus", ctx);
|
|
}
|
|
},
|
|
/** (De)Select node, return new status (sync).
|
|
*
|
|
* @param {EventData} ctx
|
|
* @param {Boolean} [flag=true]
|
|
*/
|
|
nodeSetSelected: function(ctx, flag) {
|
|
var node = ctx.node,
|
|
tree = ctx.tree,
|
|
opts = ctx.options;
|
|
// flag defaults to true
|
|
flag = (flag !== false);
|
|
|
|
node.debug("nodeSetSelected(" + flag + ")", ctx);
|
|
if( node.unselectable){
|
|
return;
|
|
}
|
|
// TODO: !!node.expanded is nicer, but doesn't pass jshint
|
|
// https://github.com/jshint/jshint/issues/455
|
|
// if( !!node.expanded === !!flag){
|
|
if((node.selected && flag) || (!node.selected && !flag)){
|
|
return !!node.selected;
|
|
}else if ( this._triggerNodeEvent("beforeSelect", node, ctx.originalEvent) === false ){
|
|
return !!node.selected;
|
|
}
|
|
if(flag && opts.selectMode === 1){
|
|
// single selection mode
|
|
if(tree.lastSelectedNode){
|
|
tree.lastSelectedNode.setSelected(false);
|
|
}
|
|
}else if(opts.selectMode === 3){
|
|
// multi.hier selection mode
|
|
node.selected = flag;
|
|
// this._fixSelectionState(node);
|
|
node.fixSelection3AfterClick();
|
|
}
|
|
node.selected = flag;
|
|
this.nodeRenderStatus(ctx);
|
|
tree.lastSelectedNode = flag ? node : null;
|
|
tree._triggerNodeEvent("select", ctx);
|
|
},
|
|
/** Show node status (ok, loading, error) using styles and a dummy child node.
|
|
*
|
|
* @param {EventData} ctx
|
|
* @param status
|
|
* @param message
|
|
* @param details
|
|
*/
|
|
nodeSetStatus: function(ctx, status, message, details) {
|
|
var _clearStatusNode, _setStatusNode,
|
|
node = ctx.node,
|
|
tree = ctx.tree;
|
|
|
|
_clearStatusNode = function() {
|
|
var firstChild = ( node.children ? node.children[0] : null );
|
|
if ( firstChild && firstChild.isStatusNode ) {
|
|
try{
|
|
// I've seen exceptions here with loadKeyPath...
|
|
if(node.ul){
|
|
node.ul.removeChild(firstChild.li);
|
|
firstChild.li = null; // avoid leaks (issue 215)
|
|
}
|
|
}catch(e){}
|
|
if( node.children.length === 1 ){
|
|
node.children = [];
|
|
}else{
|
|
node.children.shift();
|
|
}
|
|
}
|
|
return;
|
|
};
|
|
_setStatusNode = function(data) {
|
|
var firstChild = ( node.children ? node.children[0] : null );
|
|
if ( firstChild && firstChild.isStatusNode ) {
|
|
$.extend(firstChild, data);
|
|
tree._callHook("nodeRender", firstChild);
|
|
} else {
|
|
data.key = "_statusNode";
|
|
node._setChildren([data]);
|
|
node.children[0].isStatusNode = true;
|
|
tree.render();
|
|
}
|
|
return node.children[0];
|
|
};
|
|
switch(status){
|
|
case "ok":
|
|
_clearStatusNode();
|
|
$(node.span).removeClass("fancytree-loading");
|
|
break;
|
|
case "loading":
|
|
$(node.span).addClass("fancytree-loading");
|
|
if(!node.parent){
|
|
_setStatusNode({
|
|
title: tree.options.strings.loading +
|
|
(message ? " (" + message + ") " : ""),
|
|
tooltip: details,
|
|
extraClasses: "fancytree-statusnode-wait"
|
|
});
|
|
}
|
|
break;
|
|
case "error":
|
|
$(node.span).addClass("fancytree-error");
|
|
_setStatusNode({
|
|
title: tree.options.strings.loadError + " (" + message + ")",
|
|
tooltip: details,
|
|
extraClasses: "fancytree-statusnode-error"
|
|
});
|
|
break;
|
|
default:
|
|
$.error("invalid status " + status);
|
|
}
|
|
},
|
|
/**
|
|
*
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeToggleExpanded: function(ctx) {
|
|
return this.nodeSetExpanded(ctx, !ctx.node.expanded);
|
|
},
|
|
/**
|
|
* @param {EventData} ctx
|
|
*/
|
|
nodeToggleSelected: function(ctx) {
|
|
return this.nodeSetSelected(ctx, !ctx.node.selected);
|
|
},
|
|
/** Remove all nodes.
|
|
* @param {EventData} ctx
|
|
*/
|
|
treeClear: function(ctx) {
|
|
var tree = ctx.tree;
|
|
tree.activeNode = null;
|
|
tree.focusNode = null;
|
|
tree.$div.find(">ul.fancytree-container").empty();
|
|
// TODO: call destructors and remove reference loops
|
|
tree.rootNode.children = null;
|
|
},
|
|
/** Widget was created (called only once, even it re-initialized).
|
|
* @param {EventData} ctx
|
|
*/
|
|
treeCreate: function(ctx) {
|
|
},
|
|
/** Widget was destroyed.
|
|
* @param {EventData} ctx
|
|
*/
|
|
treeDestroy: function(ctx) {
|
|
},
|
|
/** Widget was (re-)initialized.
|
|
* @param {EventData} ctx
|
|
*/
|
|
treeInit: function(ctx) {
|
|
this.treeLoad(ctx);
|
|
},
|
|
/** Parse Fancytree from source, as configured in the options.
|
|
* @param {EventData} ctx
|
|
* @param {object} [source] new source
|
|
*/
|
|
treeLoad: function(ctx, source) {
|
|
var type, $ul,
|
|
tree = ctx.tree,
|
|
$container = ctx.widget.element,
|
|
dfd,
|
|
// calling context for root node
|
|
rootCtx = $.extend({}, ctx, {node: this.rootNode});
|
|
|
|
if(tree.rootNode.children){
|
|
this.treeClear(ctx);
|
|
}
|
|
source = source || this.options.source;
|
|
|
|
if(!source){
|
|
type = $container.data("type") || "html";
|
|
switch(type){
|
|
case "html":
|
|
$ul = $container.find(">ul:first");
|
|
$ul.addClass("ui-fancytree-source ui-helper-hidden");
|
|
source = $.ui.fancytree.parseHtml($ul);
|
|
break;
|
|
case "json":
|
|
// $().addClass("ui-helper-hidden");
|
|
source = $.parseJSON($container.text());
|
|
if(source.children){
|
|
if(source.title){tree.title = source.title;}
|
|
source = source.children;
|
|
}
|
|
break;
|
|
default:
|
|
$.error("Invalid data-type: " + type);
|
|
}
|
|
}else if(typeof source === "string"){
|
|
// TODO: source is an element ID
|
|
_raiseNotImplemented();
|
|
}
|
|
|
|
// $container.addClass("ui-widget ui-widget-content ui-corner-all");
|
|
// Trigger fancytreeinit after nodes have been loaded
|
|
dfd = this.nodeLoadChildren(rootCtx, source).done(function(){
|
|
tree.render();
|
|
if( ctx.options.selectMode === 3 ){
|
|
tree.rootNode.fixSelection3FromEndNodes();
|
|
}
|
|
tree._triggerTreeEvent("init", true);
|
|
}).fail(function(){
|
|
tree.render();
|
|
tree._triggerTreeEvent("init", false);
|
|
});
|
|
return dfd;
|
|
},
|
|
/* Handle focus and blur events for the container (also fired for child elements). */
|
|
treeOnFocusInOut: function(event) {
|
|
var flag = (event.type === "focusin"),
|
|
node = $.ui.fancytree.getNode(event);
|
|
|
|
try{
|
|
this.debug("treeOnFocusInOut(" + flag + "), node=", node);
|
|
_assert(!this._inFocusHandler, "Focus handler recursion");
|
|
this.systemFocusElement = flag ? event.target : null;
|
|
this._inFocusHandler = true;
|
|
if(node){
|
|
// For example clicking into an <input> that is part of a node
|
|
this._callHook("nodeSetFocus", node, flag);
|
|
}else{
|
|
this._callHook("treeSetFocus", this, flag);
|
|
}
|
|
}finally{
|
|
this._inFocusHandler = false;
|
|
}
|
|
},
|
|
/* */
|
|
treeSetFocus: function(ctx, flag, _calledByNodeSetFocus) {
|
|
flag = (flag !== false);
|
|
|
|
this.debug("treeSetFocus(" + flag + "), _calledByNodeSetFocus: " + _calledByNodeSetFocus);
|
|
this.debug(" focusNode: " + this.focusNode);
|
|
this.debug(" activeNode: " + this.activeNode);
|
|
// Blur previous tree if any
|
|
if(FT.focusTree){
|
|
if(this !== FT.focusTree || !flag ){
|
|
// prev. node looses focus, if prev. tree blurs
|
|
if(FT.focusTree.focusNode){
|
|
FT.focusTree.focusNode.setFocus(false);
|
|
}
|
|
FT.focusTree.$container.removeClass("fancytree-focused");
|
|
this._triggerTreeEvent("blurTree");
|
|
FT.focusTree = null;
|
|
}
|
|
}
|
|
//
|
|
if( flag && FT.focusTree !== this ){
|
|
FT.focusTree = this;
|
|
this.$container.addClass("fancytree-focused");
|
|
// Make sure container gets `:focus` when we clicked inside
|
|
if( !this.systemFocusElement ){
|
|
this.debug("Set `:focus` to container");
|
|
this.$container.focus();
|
|
}
|
|
// Set focus to a node
|
|
if( ! this.focusNode && !_calledByNodeSetFocus){
|
|
if( this.activeNode ){
|
|
this.activeNode.setFocus();
|
|
}else if( this.rootNode.hasChildren()){
|
|
this.warn("NOT setting focus to first child");
|
|
// this.rootNode.getFirstChild().setFocus();
|
|
}
|
|
}
|
|
this._triggerTreeEvent("focusTree");
|
|
}else{
|
|
FT.focusTree = null;
|
|
}
|
|
|
|
},
|
|
/** Re-fire beforeActivate and activate events. */
|
|
reactivate: function(setFocus) {
|
|
var node = this.activeNode;
|
|
if( node ) {
|
|
this.activeNode = null; // Force re-activating
|
|
node.setActive();
|
|
if( setFocus ){
|
|
node.setFocus();
|
|
}
|
|
}
|
|
},
|
|
// TODO: redraw()
|
|
/** Reload tree from source and return a promise.
|
|
* @param source
|
|
* @returns {$.Promise}
|
|
*/
|
|
reload: function(source) {
|
|
this._callHook("treeClear", this);
|
|
return this._callHook("treeLoad", this, source);
|
|
},
|
|
/**Render tree (i.e. all top-level nodes).
|
|
* @param {Boolean} [force=false]
|
|
* @param {Boolean} [deep=false]
|
|
*/
|
|
render: function(force, deep) {
|
|
return this.rootNode.render(force, deep);
|
|
},
|
|
// TODO: selectKey: function(key, select)
|
|
// TODO: serializeArray: function(stopOnParents)
|
|
/**
|
|
* @param {Boolean} [flag=true]
|
|
*/
|
|
setFocus: function(flag) {
|
|
// _assert(false, "Not implemented");
|
|
return this._callHook("treeSetFocus", this, flag);
|
|
},
|
|
/**
|
|
* Return all nodes as nested list of {@link NodeData}.
|
|
*
|
|
* @param {Boolean} [includeRoot=false] Returns the hidden system root node (and it's children)
|
|
* @param {function} [callback] Called for every node
|
|
* @returns {Array | object}
|
|
* @see FancytreeNode#toDict
|
|
*/
|
|
toDict: function(includeRoot, callback){
|
|
var res = this.rootNode.toDict(true, callback);
|
|
return includeRoot ? res : res.children;
|
|
},
|
|
/**Implicitly called for string conversions.
|
|
* @returns {String}
|
|
*/
|
|
toString: function(){
|
|
return "<Fancytree(#" + this._id + ")>";
|
|
},
|
|
/** _trigger a widget event with additional node ctx.
|
|
* @see EventData
|
|
*/
|
|
_triggerNodeEvent: function(type, node, originalEvent, extra) {
|
|
// this.debug("_trigger(" + type + "): '" + ctx.node.title + "'", ctx);
|
|
var res,
|
|
ctx = this._makeHookContext(node, originalEvent);
|
|
if( extra ) {
|
|
$.extend(ctx, extra);
|
|
}
|
|
res = this.widget._trigger(type, originalEvent, ctx);
|
|
|
|
if(res !== false && ctx.result !== undefined){
|
|
return ctx.result;
|
|
}
|
|
return res;
|
|
},
|
|
/** _trigger a widget event with additional tree data. */
|
|
_triggerTreeEvent: function(type, originalEvent) {
|
|
// this.debug("_trigger(" + type + ")", ctx);
|
|
var ctx = this._makeHookContext(this, originalEvent),
|
|
res = this.widget._trigger(type, originalEvent, ctx);
|
|
|
|
if(res !== false && ctx.result !== undefined){
|
|
return ctx.result;
|
|
}
|
|
return res;
|
|
},
|
|
/**
|
|
*
|
|
* @param {function} fn
|
|
*/
|
|
visit: function(fn) {
|
|
return this.rootNode.visit(fn, false);
|
|
},
|
|
/** Write warning to browser console (prepending tree info)
|
|
*
|
|
* @param {*} msg string or object or array of such
|
|
*/
|
|
warn: function(msg){
|
|
Array.prototype.unshift.call(arguments, this.toString());
|
|
consoleApply("warn", arguments);
|
|
}
|
|
};
|
|
|
|
|
|
/* ******************************************************************************
|
|
* jQuery UI widget boilerplate
|
|
* @ name ui_fancytree
|
|
* @ class The jQuery.ui.fancytree widget
|
|
*/
|
|
/* * @namespace ui */
|
|
/* * @namespace ui.fancytree */
|
|
/** @namespace $.ui.fancytree */
|
|
$.widget("ui.fancytree",
|
|
/** @lends $.ui.fancytree.prototype */
|
|
{
|
|
/**These options will be used as defaults
|
|
* @type {FancytreeOptions}
|
|
*/
|
|
options:
|
|
{
|
|
/** @type {Boolean} Make sure, active nodes are visible (expanded). */
|
|
activeVisible: true,
|
|
ajax: {
|
|
type: "GET",
|
|
cache: false, // false: Append random '_' argument to the request url to prevent caching.
|
|
// timeout: 0, // >0: Make sure we get an ajax error if server is unreachable
|
|
dataType: "json" // Expect json format and pass json object to callbacks.
|
|
}, //
|
|
aria: false, // TODO: default to true
|
|
autoActivate: true,
|
|
autoCollapse: false,
|
|
// autoFocus: false,
|
|
autoScroll: false,
|
|
checkbox: false,
|
|
/**defines click behavior*/
|
|
clickFolderMode: 4,
|
|
debugLevel: null, // 0..2 (null: use global setting $.ui.fancytree.debugInfo)
|
|
disabled: false, // TODO: required anymore?
|
|
enableAspx: true, // TODO: document
|
|
extensions: [],
|
|
fx: { height: "toggle", duration: 200 },
|
|
generateIds: false,
|
|
icons: true,
|
|
idPrefix: "ft_",
|
|
keyboard: true,
|
|
keyPathSeparator: "/",
|
|
minExpandLevel: 1,
|
|
selectMode: 2,
|
|
strings: {
|
|
loading: "Loading…",
|
|
loadError: "Load error!"
|
|
},
|
|
tabbable: true,
|
|
_classNames: {
|
|
// container: "fancytree-container",
|
|
node: "fancytree-node",
|
|
folder: "fancytree-folder",
|
|
// empty: "fancytree-empty",
|
|
// vline: "fancytree-vline",
|
|
// expander: "fancytree-expander",
|
|
// connector: "fancytree-connector",
|
|
// checkbox: "fancytree-checkbox",
|
|
// icon: "fancytree-icon",
|
|
// title: "fancytree-title",
|
|
// noConnector: "fancytree-no-connector",
|
|
// statusnodeError: "fancytree-statusnode-error",
|
|
// statusnodeWait: "fancytree-statusnode-wait",
|
|
// hidden: "fancytree-hidden",
|
|
combinedExpanderPrefix: "fancytree-exp-",
|
|
combinedIconPrefix: "fancytree-ico-",
|
|
// loading: "fancytree-loading",
|
|
hasChildren: "fancytree-has-children",
|
|
active: "fancytree-active",
|
|
selected: "fancytree-selected",
|
|
expanded: "fancytree-expanded",
|
|
lazy: "fancytree-lazy",
|
|
focused: "fancytree-focused ui-state-focus",
|
|
partsel: "fancytree-partsel",
|
|
lastsib: "fancytree-lastsib"
|
|
},
|
|
// events
|
|
lazyload: null,
|
|
postProcess: null
|
|
},
|
|
/* Set up the widget, Called on first $().fancytree() */
|
|
_create: function() {
|
|
this.tree = new Fancytree(this);
|
|
|
|
this.$source = this.source || this.element.data("type") === "json" ? this.element
|
|
: this.element.find(">ul:first");
|
|
// Subclass Fancytree instance with all enabled extensions
|
|
var extension, extName, i,
|
|
extensions = this.options.extensions,
|
|
base = this.tree;
|
|
|
|
for(i=0; i<extensions.length; i++){
|
|
extName = extensions[i];
|
|
extension = $.ui.fancytree._extensions[extName];
|
|
if(!extension){
|
|
$.error("Could not apply extension '" + extName + "' (it is not registered, did you forget to include it?)");
|
|
}
|
|
// Add extension options as tree.options.EXTENSION
|
|
// _assert(!this.tree.options[extName], "Extension name must not exist as option name: " + extName);
|
|
this.tree.options[extName] = $.extend(true, {}, extension.options, this.tree.options[extName]);
|
|
// Add a namespace tree.EXTENSION, to hold instance data
|
|
_assert(!this.tree[extName], "Extension name must not exist as Fancytree attribute: " + extName);
|
|
// this.tree[extName] = extension;
|
|
this.tree[extName] = {};
|
|
// Subclass Fancytree methods using proxies.
|
|
_subclassObject(this.tree, base, extension, extName);
|
|
// current extension becomes base for the next extension
|
|
base = extension;
|
|
}
|
|
//
|
|
this.tree._callHook("treeCreate", this.tree);
|
|
// Note: 'fancytreecreate' event is fired by widget base class
|
|
// this.tree._triggerTreeEvent("create");
|
|
},
|
|
|
|
/* Called on every $().fancytree() */
|
|
_init: function() {
|
|
this.tree._callHook("treeInit", this.tree);
|
|
// TODO: currently we call bind after treeInit, because treeInit
|
|
// might change tree.$container.
|
|
// It would be better, to move ebent binding into hooks altogether
|
|
this._bind();
|
|
},
|
|
|
|
/* Use the _setOption method to respond to changes to options */
|
|
_setOption: function(key, value) {
|
|
var callDefault = true,
|
|
rerender = false;
|
|
switch( key ) {
|
|
case "aria":
|
|
case "checkbox":
|
|
case "icons":
|
|
case "minExpandLevel":
|
|
case "tabbable":
|
|
// case "nolink":
|
|
this.tree._callHook("treeCreate", this.tree);
|
|
rerender = true;
|
|
break;
|
|
case "source":
|
|
callDefault = false;
|
|
this.tree._callHook("treeLoad", this.tree, value);
|
|
break;
|
|
}
|
|
this.tree.debug("set option " + key + "=" + value + " <" + typeof(value) + ">");
|
|
if(callDefault){
|
|
// In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
|
|
$.Widget.prototype._setOption.apply(this, arguments);
|
|
// TODO: In jQuery UI 1.9 and above, you use the _super method instead
|
|
// this._super( "_setOption", key, value );
|
|
}
|
|
if(rerender){
|
|
this.tree.render(true, false); // force, not-deep
|
|
}
|
|
},
|
|
|
|
/** Use the destroy method to clean up any modifications your widget has made to the DOM */
|
|
destroy: function() {
|
|
this._unbind();
|
|
this.tree._callHook("treeDestroy", this.tree);
|
|
// this.element.removeClass("ui-widget ui-widget-content ui-corner-all");
|
|
this.tree.$div.find(">ul.fancytree-container").remove();
|
|
this.$source && this.$source.removeClass("ui-helper-hidden");
|
|
// In jQuery UI 1.8, you must invoke the destroy method from the base widget
|
|
$.Widget.prototype.destroy.call(this);
|
|
// TODO: delete tree and nodes to make garbage collect easier?
|
|
// TODO: In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
|
|
},
|
|
|
|
// -------------------------------------------------------------------------
|
|
|
|
/* Remove all event handlers for our namespace */
|
|
_unbind: function() {
|
|
var ns = this.tree._ns;
|
|
this.element.unbind(ns);
|
|
this.tree.$container.unbind(ns);
|
|
$(document).unbind(ns);
|
|
},
|
|
/* Add mouse and kyboard handlers to the container */
|
|
_bind: function() {
|
|
var that = this,
|
|
opts = this.options,
|
|
tree = this.tree,
|
|
ns = tree._ns,
|
|
selstartEvent = ( $.support.selectstart ? "selectstart" : "mousedown" );
|
|
|
|
// Remove all previuous handlers for this tree
|
|
this._unbind();
|
|
|
|
//alert("keydown" + ns + "foc=" + tree.hasFocus() + tree.$container);
|
|
tree.debug("bind events; container: ", tree.$container);
|
|
tree.$container.bind("focusin" + ns + " focusout" + ns, function(event){
|
|
tree.debug("Tree container got event " + event.type);
|
|
tree.treeOnFocusInOut.call(tree, event);
|
|
}).delegate("span.fancytree-title", selstartEvent + ns, function(event){
|
|
// prevent mouse-drags to select text ranges
|
|
tree.debug("<span> got event " + event.type);
|
|
event.preventDefault();
|
|
});
|
|
// keydown must be bound to document, because $container might not
|
|
// receive these events
|
|
$(document).bind("keydown" + ns, function(event){
|
|
// TODO: also bind keyup and keypress
|
|
tree.debug("doc got event " + event.type + ", hasFocus:" + tree.hasFocus());
|
|
if(opts.disabled || opts.keyboard === false || !tree.hasFocus()){
|
|
return true;
|
|
}
|
|
var node = tree.focusNode,
|
|
// node may be null
|
|
ctx = tree._makeHookContext(node || tree, event),
|
|
prevPhase = tree.phase;
|
|
try {
|
|
tree.phase = "userEvent";
|
|
if(node){
|
|
return ( tree._triggerNodeEvent("keydown", node, event) === false ) ? false : tree._callHook("nodeKeydown", ctx);
|
|
}else{
|
|
return ( tree._triggerTreeEvent("keydown", event) === false ) ? false : tree._callHook("nodeKeydown", ctx);
|
|
}
|
|
} finally {
|
|
tree.phase = prevPhase;
|
|
}
|
|
});
|
|
this.element.bind("click" + ns + " dblclick" + ns, function(event){
|
|
if(opts.disabled){
|
|
return true;
|
|
}
|
|
var ctx,
|
|
et = FT.getEventTarget(event),
|
|
node = et.node,
|
|
tree = that.tree,
|
|
prevPhase = tree.phase;
|
|
|
|
if( !node ){
|
|
return true; // Allow bubbling of other events
|
|
}
|
|
ctx = tree._makeHookContext(node, event);
|
|
// that.tree.debug("event(" + event.type + "): node: ", node);
|
|
try {
|
|
tree.phase = "userEvent";
|
|
switch(event.type) {
|
|
case "click":
|
|
ctx.targetType = et.type;
|
|
return ( tree._triggerNodeEvent("click", ctx, event) === false ) ? false : tree._callHook("nodeClick", ctx);
|
|
case "dblclick":
|
|
ctx.targetType = et.type;
|
|
return ( tree._triggerNodeEvent("dblclick", ctx, event) === false ) ? false : tree._callHook("nodeDblclick", ctx);
|
|
}
|
|
// } catch(e) {
|
|
// // var _ = null; // issue 117 // TODO
|
|
// $.error(e);
|
|
} finally {
|
|
tree.phase = prevPhase;
|
|
}
|
|
});
|
|
},
|
|
/** @returns {FancytreeNode} the active node or null */
|
|
getActiveNode: function() {
|
|
return this.tree.activeNode;
|
|
},
|
|
/**
|
|
* @param {String} key
|
|
* @returns {FancytreeNode} the matching node or null
|
|
*/
|
|
getNodeByKey: function(key) {
|
|
return this.tree.getNodeByKey(key);
|
|
},
|
|
/** @returns {FancytreeNode} the invisible system root node */
|
|
getRootNode: function() {
|
|
return this.tree.rootNode;
|
|
},
|
|
/** @returns {Fancytree} the current tree instance */
|
|
getTree: function() {
|
|
return this.tree;
|
|
}
|
|
});
|
|
|
|
// $.ui.fancytree was created by the widget factory. Create a local shortcut:
|
|
FT = $.ui.fancytree;
|
|
|
|
/**
|
|
* Static members in the `$.ui.fancytree` namespace.
|
|
* @ name $.ui.fancytree
|
|
* @example:
|
|
* alert(""version: " + $.ui.fancytree.version);
|
|
* var node = $.ui.fancytree.()
|
|
*/
|
|
$.extend($.ui.fancytree,
|
|
/** @lends $.ui.fancytree */
|
|
{
|
|
/** @type {String} */
|
|
version: "development",
|
|
/** @type {String} */
|
|
buildType: "release",
|
|
/** @type {int} */
|
|
debugLevel: 1, // used by $.ui.fancytree.debug() and as default for tree.options.debugLevel
|
|
|
|
_nextId: 1,
|
|
_nextNodeKey: 1,
|
|
_extensions: {},
|
|
focusTree: null,
|
|
|
|
/** Expose class object as $.ui.fancytree._FancytreeClass */
|
|
_FancytreeClass: Fancytree,
|
|
/** Expose class object as $.ui.fancytree._FancytreeNodeClass */
|
|
_FancytreeNodeClass: FancytreeNode,
|
|
/* Feature checks to provide backwards compatibility */
|
|
jquerySupports: {
|
|
// http://jqueryui.com/upgrade-guide/1.9/#deprecated-offset-option-merged-into-my-and-at
|
|
positionMyOfs: isVersionAtLeast($.ui.version, 1, 9)
|
|
},
|
|
debug: function(msg){
|
|
/*jshint expr:true */
|
|
($.ui.fancytree.debugLevel >= 2) && consoleApply("log", arguments);
|
|
},
|
|
error: function(msg){
|
|
consoleApply("error", arguments);
|
|
},
|
|
/** Return a {node: FancytreeNode, type: TYPE} object for a mouse event.
|
|
*
|
|
* @static
|
|
* @param {Event} event Mouse event, e.g. click, ...
|
|
* @returns {String} 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
|
|
*/
|
|
getEventTargetType: function(event){
|
|
return this.getEventTarget(event).type;
|
|
},
|
|
/** Return a {node: FancytreeNode, type: TYPE} object for a mouse event.
|
|
*
|
|
* @param {Event} event Mouse event, e.g. click, ...
|
|
* @returns {object} Return a {node: FancytreeNode, type: TYPE} object
|
|
* TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
|
|
*/
|
|
getEventTarget: function(event){
|
|
var tcn = event && event.target ? event.target.className : "",
|
|
res = {node: this.getNode(event.target), type: undefined};
|
|
// TODO: use map for fast lookup
|
|
// FIXME: cannot work, when tcn also contains UI themeroller classes
|
|
// Use $(res.node).hasClass() instead
|
|
if( tcn === "fancytree-title" ){
|
|
res.type = "title";
|
|
}else if( tcn === "fancytree-expander" ){
|
|
res.type = (res.node.hasChildren() === false ? "prefix" : "expander");
|
|
}else if( tcn === "fancytree-checkbox" ){
|
|
res.type = "checkbox";
|
|
}else if( tcn === "fancytree-icon" ){
|
|
res.type = "icon";
|
|
}else if( tcn.indexOf("fancytree-node") >= 0 ){
|
|
// TODO: issue #93 (http://code.google.com/p/fancytree/issues/detail?id=93)
|
|
// res.type = this._getTypeForOuterNodeEvent(event);
|
|
res.type = "title";
|
|
}
|
|
return res;
|
|
},
|
|
/** Return a FancytreeNode instance from element.
|
|
*
|
|
* @param {Element | jQueryObject | Event} el
|
|
* @returns {FancytreeNode} matching node or null
|
|
*/
|
|
getNode: function(el){
|
|
if(el instanceof FancytreeNode){
|
|
return el; // el already was a FancytreeNode
|
|
}else if(el.selector !== undefined){
|
|
el = el[0]; // el was a jQuery object: use the DOM element
|
|
}else if(el.originalEvent !== undefined){
|
|
el = el.target; // el was an Event
|
|
}
|
|
while( el ) {
|
|
if(el.ftnode) {
|
|
return el.ftnode;
|
|
}
|
|
el = el.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
/* Return a Fancytree instance from element.
|
|
* TODO: this function could help to get around the data('fancytree') / data('ui-fancytree') problem
|
|
* @param {Element | jQueryObject | Event} el
|
|
* @returns {Fancytree} matching tree or null
|
|
* /
|
|
getTree: function(el){
|
|
if(el instanceof Fancytree){
|
|
return el; // el already was a Fancytree
|
|
}else if(el.selector !== undefined){
|
|
el = el[0]; // el was a jQuery object: use the DOM element
|
|
}else if(el.originalEvent !== undefined){
|
|
el = el.target; // el was an Event
|
|
}
|
|
...
|
|
return null;
|
|
},
|
|
*/
|
|
info: function(msg){
|
|
/*jshint expr:true */
|
|
($.ui.fancytree.debugLevel >= 1) && consoleApply("info", arguments);
|
|
},
|
|
/**
|
|
* Parse tree data from HTML <ul> markup
|
|
*
|
|
* @param {jQueryObject} $ul
|
|
* @returns {NodeData[]}
|
|
*/
|
|
parseHtml: function($ul) {
|
|
// TODO: understand this:
|
|
/*jshint validthis:true */
|
|
var $children = $ul.find(">li"),
|
|
extraClasses, i, l, iPos, tmp, classes, className,
|
|
children = [];
|
|
// that = this;
|
|
|
|
$children.each(function() {
|
|
var allData, jsonData,
|
|
$li = $(this),
|
|
$liSpan = $li.find(">span:first", this),
|
|
$liA = $liSpan.length ? null : $li.find(">a:first"),
|
|
d = { tooltip: null, data: {} };
|
|
|
|
if( $liSpan.length ) {
|
|
d.title = $liSpan.html();
|
|
|
|
} else if( $liA && $liA.length ) {
|
|
// If a <li><a> tag is specified, use it literally and extract href/target.
|
|
d.title = $liA.html();
|
|
d.data.href = $liA.attr("href");
|
|
d.data.target = $liA.attr("target");
|
|
d.tooltip = $liA.attr("title");
|
|
|
|
} else {
|
|
// If only a <li> tag is specified, use the trimmed string up to
|
|
// the next child <ul> tag.
|
|
d.title = $li.html();
|
|
iPos = d.title.search(/<ul/i);
|
|
if( iPos >= 0 ){
|
|
d.title = d.title.substring(0, iPos);
|
|
}
|
|
}
|
|
d.title = $.trim(d.title);
|
|
|
|
// Make sure all fields exist
|
|
for(i=0, l=CLASS_ATTRS.length; i<l; i++){
|
|
d[CLASS_ATTRS[i]] = undefined;
|
|
}
|
|
// Initialize to `true`, if class is set and collect extraClasses
|
|
classes = this.className.split(" ");
|
|
extraClasses = [];
|
|
for(i=0, l=classes.length; i<l; i++){
|
|
className = classes[i];
|
|
if(CLASS_ATTR_MAP[className]){
|
|
d[className] = true;
|
|
}else{
|
|
extraClasses.push(className);
|
|
}
|
|
}
|
|
d.extraClasses = extraClasses.join(" ");
|
|
|
|
// Parse node options from ID, title and class attributes
|
|
tmp = $li.attr("title");
|
|
if( tmp ){
|
|
d.tooltip = tmp; // overrides <a title='...'>
|
|
}
|
|
tmp = $li.attr("id");
|
|
if( tmp ){
|
|
d.key = tmp;
|
|
}
|
|
// Add <li data-NAME='...'> as node.data.NAME
|
|
// See http://api.jquery.com/data/#data-html5
|
|
allData = $li.data();
|
|
// alert("d: " + JSON.stringify(allData));
|
|
if(allData && !$.isEmptyObject(allData)) {
|
|
// Special handling for <li data-json='...'>
|
|
jsonData = allData.json;
|
|
delete allData.json;
|
|
$.extend(d.data, allData);
|
|
// If a 'data-json' attribute is present, evaluate and add to node.data
|
|
if(jsonData) {
|
|
// alert("$li.data()" + JSON.stringify(jsonData));
|
|
// <li data-json='...'> is already returned as object
|
|
// see http://api.jquery.com/data/#data-html5
|
|
$.extend(d.data, jsonData);
|
|
}
|
|
}
|
|
// that.debug("parse ", d);
|
|
// var childNode = parentTreeNode.addChild(data);
|
|
// Recursive reading of child nodes, if LI tag contains an UL tag
|
|
$ul = $li.find(">ul:first");
|
|
if( $ul.length ) {
|
|
d.children = $.ui.fancytree.parseHtml($ul);
|
|
}else{
|
|
d.children = d.lazy ? undefined : null;
|
|
}
|
|
children.push(d);
|
|
// FT.debug("parse ", d, children);
|
|
});
|
|
return children;
|
|
},
|
|
/** Add Fancytree extension definition to the list of globally available extensions.
|
|
*
|
|
* @param name
|
|
* @param definition
|
|
*/
|
|
registerExtension: function(name, definition){
|
|
$.ui.fancytree._extensions[name] = definition;
|
|
},
|
|
warn: function(msg){
|
|
consoleApply("warn", arguments);
|
|
}
|
|
});
|
|
|
|
// Use $.ui.fancytree.debugLevel as default for tree.options.debugLevel
|
|
//$.ui.fancytree.debug($.ui.fancytree.prototype);
|
|
//$.ui.fancytree.prototype.options.debugLevel = $.ui.fancytree.debugLevel;
|
|
|
|
|
|
/* *****************************************************************************
|
|
* Register AMD
|
|
*/
|
|
// http://stackoverflow.com/questions/10918063/how-to-make-a-jquery-plugin-loadable-with-requirejs
|
|
|
|
// if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
|
|
// define( "jquery", [], function () { return jQuery; } );
|
|
// }
|
|
|
|
// TODO: maybe like so:?
|
|
// https://raw.github.com/malsup/blockui/master/jquery.blockUI.js
|
|
/*
|
|
if( typeof define === "function" && define.amd ) {
|
|
define( ["jquery"], function () {
|
|
return jQuery.ui.fancytree;
|
|
});
|
|
}
|
|
*/
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.columnview.js
|
|
*
|
|
* Render tree like a Mac Finder's column view.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
// prevent duplicate loading
|
|
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
|
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
|
// return;
|
|
// }
|
|
|
|
|
|
/*******************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
/*
|
|
function _assert(cond, msg){
|
|
msg = msg || "";
|
|
if(!cond){
|
|
$.error("Assertion failed " + msg);
|
|
}
|
|
}
|
|
*/
|
|
|
|
/*******************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
$.ui.fancytree.registerExtension("columnview", {
|
|
// Default options for this extension.
|
|
options: {
|
|
},
|
|
// Overide virtual methods for this extension.
|
|
// `this` : is this extension object
|
|
// `this._base` : the Fancytree instance
|
|
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
var $tdFirst, $ul,
|
|
tree = ctx.tree,
|
|
$table = tree.widget.element;
|
|
|
|
tree.tr = $("tbody tr", $table)[0];
|
|
tree.columnCount = $(">td", tree.tr).length;
|
|
// Perform default behavior
|
|
this._super(ctx);
|
|
// Standard Fancytree created a root <ul>. Now move this into first table cell
|
|
$ul = $(tree.rootNode.ul);
|
|
$tdFirst = $(">td", tree.tr).eq(0);
|
|
|
|
$ul.removeClass("fancytree-container");
|
|
$ul.removeAttr("tabindex");
|
|
tree.$container = $table;
|
|
$table.addClass("fancytree-container fancytree-ext-columnview");
|
|
$table.attr("tabindex", "0");
|
|
|
|
$tdFirst.empty();
|
|
$ul.detach().appendTo($tdFirst);
|
|
|
|
// Force some required options
|
|
tree.widget.options.autoCollapse = true;
|
|
// tree.widget.options.autoActivate = true;
|
|
tree.widget.options.fx = false;
|
|
tree.widget.options.clickFolderMode = 1;
|
|
|
|
// Make sure that only active path is expanded when a node is activated:
|
|
$table.bind("fancytreeactivate", function(e, data){
|
|
var i, tdList,
|
|
node = data.node,
|
|
tree = data.tree,
|
|
level = node.getLevel();
|
|
|
|
tree._callHook("nodeCollapseSiblings", node);
|
|
// Clear right neighbours
|
|
if(level <= tree.columnCount){
|
|
tdList = $(">td", tree.tr);
|
|
for(i=level; i<tree.columnCount; i++){
|
|
tdList.eq(i).empty();
|
|
}
|
|
}
|
|
// Expand nodes on activate, so we populate the right neighbor cell
|
|
if(!node.expanded && (node.children || node.lazy)) {
|
|
node.setExpanded();
|
|
}
|
|
// Adjust keyboard behaviour:
|
|
}).bind("fancytreekeydown", function(e, data){
|
|
var next = null;
|
|
switch(e.which){
|
|
case $.ui.keyCode.DOWN:
|
|
next = data.node.getNextSibling();
|
|
if( next ){
|
|
next.setFocus();
|
|
}
|
|
return false;
|
|
case $.ui.keyCode.LEFT:
|
|
next = data.node.getParent();
|
|
if( next ){
|
|
next.setFocus();
|
|
}
|
|
return false;
|
|
case $.ui.keyCode.UP:
|
|
next = data.node.getPrevSibling();
|
|
if( next ){
|
|
next.setFocus();
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
|
// Render standard nested <ul> - <li> hierarchy
|
|
this._super(ctx, force, deep, collapsed, _recursive);
|
|
// Remove expander and add a trailing triangle instead
|
|
var level, $tdChild, $ul,
|
|
tree = ctx.tree,
|
|
node = ctx.node,
|
|
$span = $(node.span);
|
|
|
|
$span.find("span.fancytree-expander").remove();
|
|
if(node.hasChildren() !== false && !$span.find("span.fancytree-cv-right").length){
|
|
$span.append($("<span class='fancytree-icon fancytree-cv-right'>"));
|
|
}
|
|
// Move <ul> with children into the appropriate <td>
|
|
if(node.ul){
|
|
node.ul.style.display = ""; // might be hidden if RIGHT was pressed
|
|
level = node.getLevel();
|
|
if(level < tree.columnCount){
|
|
$tdChild = $(">td", tree.tr).eq(level);
|
|
$ul = $(node.ul).detach();
|
|
$tdChild.empty().append($ul);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.dnd.js
|
|
*
|
|
* Drag'N'drop support.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
/* *****************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
var logMsg = $.ui.fancytree.debug,
|
|
didRegisterDnd = false;
|
|
|
|
/* Convert number to string and prepend +/-; return empty string for 0.*/
|
|
function offsetString(n){
|
|
return n === 0 ? "" : (( n > 0 ) ? ("+" + n) : ("" + n));
|
|
}
|
|
|
|
/* *****************************************************************************
|
|
* Drag and drop support
|
|
*/
|
|
function _initDragAndDrop(tree) {
|
|
var dnd = tree.options.dnd || null;
|
|
// Register 'connectToFancytree' option with ui.draggable
|
|
if(dnd /*&& (dnd.onDragStart || dnd.onDrop)*/) {
|
|
_registerDnd();
|
|
}
|
|
// Attach ui.draggable to this Fancytree instance
|
|
if(dnd && dnd.onDragStart ) {
|
|
tree.widget.element.draggable({
|
|
addClasses: false,
|
|
appendTo: "body",
|
|
containment: false,
|
|
delay: 0,
|
|
distance: 4,
|
|
// TODO: merge Dynatree issue 419
|
|
revert: false,
|
|
scroll: true, // issue 244: enable scrolling (if ul.fancytree-container)
|
|
scrollSpeed: 7,
|
|
scrollSensitivity: 10,
|
|
// Delegate draggable.start, drag, and stop events to our handler
|
|
connectToFancytree: true,
|
|
// Let source tree create the helper element
|
|
helper: function(event) {
|
|
var sourceNode = $.ui.fancytree.getNode(event.target);
|
|
if(!sourceNode){ // issue 211
|
|
// TODO: remove this hint, when we understand when it happens
|
|
return "<div>ERROR?: helper requested but sourceNode not found</div>";
|
|
}
|
|
return sourceNode.tree.dnd._onDragEvent("helper", sourceNode, null, event, null, null);
|
|
},
|
|
start: function(event, ui) {
|
|
// var sourceNode = $.ui.fancytree.getNode(event.target);
|
|
// don't return false if sourceNode == null (see issue 268)
|
|
}
|
|
});
|
|
}
|
|
// Attach ui.droppable to this Fancytree instance
|
|
if(dnd && dnd.onDrop) {
|
|
tree.widget.element.droppable({
|
|
addClasses: false,
|
|
tolerance: "intersect",
|
|
greedy: false
|
|
/*
|
|
,
|
|
activate: function(event, ui) {
|
|
logMsg("droppable - activate", event, ui, this);
|
|
},
|
|
create: function(event, ui) {
|
|
logMsg("droppable - create", event, ui);
|
|
},
|
|
deactivate: function(event, ui) {
|
|
logMsg("droppable - deactivate", event, ui);
|
|
},
|
|
drop: function(event, ui) {
|
|
logMsg("droppable - drop", event, ui);
|
|
},
|
|
out: function(event, ui) {
|
|
logMsg("droppable - out", event, ui);
|
|
},
|
|
over: function(event, ui) {
|
|
logMsg("droppable - over", event, ui);
|
|
}
|
|
*/
|
|
});
|
|
}
|
|
}
|
|
|
|
//--- Extend ui.draggable event handling --------------------------------------
|
|
|
|
function _registerDnd() {
|
|
if(didRegisterDnd){
|
|
return;
|
|
}
|
|
|
|
// Register proxy-functions for draggable.start/drag/stop
|
|
|
|
$.ui.plugin.add("draggable", "connectToFancytree", {
|
|
start: function(event, ui) {
|
|
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
|
var draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
|
sourceNode = ui.helper.data("ftSourceNode") || null;
|
|
// logMsg("draggable-connectToFancytree.start, %s", sourceNode);
|
|
// logMsg(" this: %o", this);
|
|
// logMsg(" event: %o", event);
|
|
// logMsg(" draggable: %o", draggable);
|
|
// logMsg(" ui: %o", ui);
|
|
|
|
if(sourceNode) {
|
|
// Adjust helper offset, so cursor is slightly outside top/left corner
|
|
draggable.offset.click.top = -2;
|
|
draggable.offset.click.left = + 16;
|
|
// logMsg(" draggable2: %o", draggable);
|
|
// logMsg(" draggable.offset.click FIXED: %s/%s", draggable.offset.click.left, draggable.offset.click.top);
|
|
// Trigger onDragStart event
|
|
// TODO: when called as connectTo..., the return value is ignored(?)
|
|
return sourceNode.tree.dnd._onDragEvent("start", sourceNode, null, event, ui, draggable);
|
|
}
|
|
},
|
|
drag: function(event, ui) {
|
|
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
|
var isHelper,
|
|
draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
|
sourceNode = ui.helper.data("ftSourceNode") || null,
|
|
prevTargetNode = ui.helper.data("ftTargetNode") || null,
|
|
targetNode = $.ui.fancytree.getNode(event.target);
|
|
// logMsg("$.ui.fancytree.getNode(%o): %s", event.target, targetNode);
|
|
// logMsg("connectToFancytree.drag: helper: %o", ui.helper[0]);
|
|
if(event.target && !targetNode){
|
|
// We got a drag event, but the targetNode could not be found
|
|
// at the event location. This may happen,
|
|
// 1. if the mouse jumped over the drag helper,
|
|
// 2. or if a non-fancytree element is dragged
|
|
// We ignore it:
|
|
isHelper = $(event.target).closest("div.fancytree-drag-helper,#fancytree-drop-marker").length > 0;
|
|
if(isHelper){
|
|
logMsg("Drag event over helper: ignored.");
|
|
return;
|
|
}
|
|
}
|
|
// logMsg("draggable-connectToFancytree.drag: targetNode(from event): %s, ftTargetNode: %s", targetNode, ui.helper.data("ftTargetNode"));
|
|
ui.helper.data("ftTargetNode", targetNode);
|
|
// Leaving a tree node
|
|
if(prevTargetNode && prevTargetNode !== targetNode ) {
|
|
prevTargetNode.tree.dnd._onDragEvent("leave", prevTargetNode, sourceNode, event, ui, draggable);
|
|
}
|
|
if(targetNode){
|
|
if(!targetNode.tree.options.dnd.onDrop) {
|
|
// not enabled as drop target
|
|
} else if(targetNode === prevTargetNode) {
|
|
// Moving over same node
|
|
targetNode.tree.dnd._onDragEvent("over", targetNode, sourceNode, event, ui, draggable);
|
|
}else{
|
|
// Entering this node first time
|
|
targetNode.tree.dnd._onDragEvent("enter", targetNode, sourceNode, event, ui, draggable);
|
|
}
|
|
}
|
|
// else go ahead with standard event handling
|
|
},
|
|
stop: function(event, ui) {
|
|
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
|
var draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
|
sourceNode = ui.helper.data("ftSourceNode") || null,
|
|
targetNode = ui.helper.data("ftTargetNode") || null,
|
|
// mouseDownEvent = draggable._mouseDownEvent,
|
|
eventType = event.type,
|
|
dropped = (eventType === "mouseup" && event.which === 1);
|
|
// logMsg("draggable-connectToFancytree.stop: targetNode(from event): %s, ftTargetNode: %s", targetNode, ui.helper.data("ftTargetNode"));
|
|
// logMsg("draggable-connectToFancytree.stop, %s", sourceNode);
|
|
// logMsg(" type: %o, downEvent: %o, upEvent: %o", eventType, mouseDownEvent, event);
|
|
// logMsg(" targetNode: %o", targetNode);
|
|
if(!dropped){
|
|
logMsg("Drag was cancelled");
|
|
}
|
|
if(targetNode) {
|
|
if(dropped){
|
|
targetNode.tree.dnd._onDragEvent("drop", targetNode, sourceNode, event, ui, draggable);
|
|
}
|
|
targetNode.tree.dnd._onDragEvent("leave", targetNode, sourceNode, event, ui, draggable);
|
|
}
|
|
if(sourceNode){
|
|
sourceNode.tree.dnd._onDragEvent("stop", sourceNode, null, event, ui, draggable);
|
|
}
|
|
}
|
|
});
|
|
|
|
didRegisterDnd = true;
|
|
}
|
|
|
|
|
|
/* *****************************************************************************
|
|
*
|
|
*/
|
|
/** @namespace $.ui.fancytree.dnd */
|
|
$.ui.fancytree.registerExtension("dnd",
|
|
/** @scope ui_fancytree
|
|
* @lends $.ui.fancytree.dnd.prototype
|
|
*/
|
|
{
|
|
// Default options for this extension.
|
|
options: {
|
|
// Make tree nodes draggable:
|
|
onDragStart: null, // Callback(sourceNode), return true, to enable dnd
|
|
onDragStop: null, // Callback(sourceNode)
|
|
// helper: null,
|
|
// Make tree nodes accept draggables
|
|
autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
|
|
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
|
|
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
|
|
onDragEnter: null, // Callback(targetNode, sourceNode)
|
|
onDragOver: null, // Callback(targetNode, sourceNode, hitMode)
|
|
onDrop: null, // Callback(targetNode, sourceNode, hitMode)
|
|
onDragLeave: null // Callback(targetNode, sourceNode)
|
|
},
|
|
// Override virtual methods for this extension.
|
|
// `this` : Fancytree instance
|
|
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
var tree = ctx.tree;
|
|
this._super(ctx);
|
|
_initDragAndDrop(tree);
|
|
},
|
|
/* Override key handler in order to cancel dnd on escape.*/
|
|
nodeKeydown: function(ctx) {
|
|
var event = ctx.originalEvent;
|
|
if( event.which === $.ui.keyCode.ESCAPE) {
|
|
this.dnd._cancelDrag();
|
|
}
|
|
this._super(ctx);
|
|
},
|
|
/* Display drop marker according to hitMode ('after', 'before', 'over', 'out', 'start', 'stop'). */
|
|
_setDndStatus: function(sourceNode, targetNode, helper, hitMode, accept) {
|
|
var posOpts,
|
|
markerOffsetX = 0,
|
|
markerAt = "center",
|
|
instData = this.dnd,
|
|
$source = sourceNode ? $(sourceNode.span) : null,
|
|
$target = $(targetNode.span);
|
|
|
|
if( !instData.$dropMarker ) {
|
|
instData.$dropMarker = $("<div id='fancytree-drop-marker'></div>")
|
|
.hide()
|
|
.css({"z-index": 1000})
|
|
.prependTo($(this.$div).parent());
|
|
// .prependTo("body");
|
|
// logMsg("Creating marker: %o", this.$dropMarker);
|
|
}
|
|
/*
|
|
if(hitMode === "start"){
|
|
}
|
|
if(hitMode === "stop"){
|
|
// sourceNode.removeClass("fancytree-drop-target");
|
|
}
|
|
*/
|
|
// this.$dropMarker.attr("class", hitMode);
|
|
if(hitMode === "after" || hitMode === "before" || hitMode === "over"){
|
|
// $source && $source.addClass("fancytree-drag-source");
|
|
|
|
// $target.addClass("fancytree-drop-target");
|
|
|
|
switch(hitMode){
|
|
case "before":
|
|
instData.$dropMarker.removeClass("fancytree-drop-after fancytree-drop-over");
|
|
instData.$dropMarker.addClass("fancytree-drop-before");
|
|
markerAt = "top";
|
|
break;
|
|
case "after":
|
|
instData.$dropMarker.removeClass("fancytree-drop-before fancytree-drop-over");
|
|
instData.$dropMarker.addClass("fancytree-drop-after");
|
|
markerAt = "bottom";
|
|
break;
|
|
default:
|
|
instData.$dropMarker.removeClass("fancytree-drop-after fancytree-drop-before");
|
|
instData.$dropMarker.addClass("fancytree-drop-over");
|
|
$target.addClass("fancytree-drop-target");
|
|
markerOffsetX = 8;
|
|
}
|
|
|
|
if( $.ui.fancytree.jquerySupports.positionMyOfs ){
|
|
posOpts = {
|
|
my: "left" + offsetString(markerOffsetX) + " center",
|
|
at: "left " + markerAt,
|
|
of: $target
|
|
};
|
|
} else {
|
|
posOpts = {
|
|
my: "left center",
|
|
at: "left " + markerAt,
|
|
of: $target,
|
|
offset: "" + markerOffsetX + " 0"
|
|
};
|
|
}
|
|
instData.$dropMarker
|
|
.show()
|
|
.position(posOpts);
|
|
// helper.addClass("fancytree-drop-hover");
|
|
} else {
|
|
// $source && $source.removeClass("fancytree-drag-source");
|
|
$target.removeClass("fancytree-drop-target");
|
|
instData.$dropMarker.hide();
|
|
// helper.removeClass("fancytree-drop-hover");
|
|
}
|
|
if(hitMode === "after"){
|
|
$target.addClass("fancytree-drop-after");
|
|
} else {
|
|
$target.removeClass("fancytree-drop-after");
|
|
}
|
|
if(hitMode === "before"){
|
|
$target.addClass("fancytree-drop-before");
|
|
} else {
|
|
$target.removeClass("fancytree-drop-before");
|
|
}
|
|
if(accept === true){
|
|
if($source){
|
|
$source.addClass("fancytree-drop-accept");
|
|
}
|
|
$target.addClass("fancytree-drop-accept");
|
|
helper.addClass("fancytree-drop-accept");
|
|
}else{
|
|
if($source){
|
|
$source.removeClass("fancytree-drop-accept");
|
|
}
|
|
$target.removeClass("fancytree-drop-accept");
|
|
helper.removeClass("fancytree-drop-accept");
|
|
}
|
|
if(accept === false){
|
|
if($source){
|
|
$source.addClass("fancytree-drop-reject");
|
|
}
|
|
$target.addClass("fancytree-drop-reject");
|
|
helper.addClass("fancytree-drop-reject");
|
|
}else{
|
|
if($source){
|
|
$source.removeClass("fancytree-drop-reject");
|
|
}
|
|
$target.removeClass("fancytree-drop-reject");
|
|
helper.removeClass("fancytree-drop-reject");
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Handles drag'n'drop functionality.
|
|
*
|
|
* A standard jQuery drag-and-drop process may generate these calls:
|
|
*
|
|
* draggable helper():
|
|
* _onDragEvent("helper", sourceNode, null, event, null, null);
|
|
* start:
|
|
* _onDragEvent("start", sourceNode, null, event, ui, draggable);
|
|
* drag:
|
|
* _onDragEvent("leave", prevTargetNode, sourceNode, event, ui, draggable);
|
|
* _onDragEvent("over", targetNode, sourceNode, event, ui, draggable);
|
|
* _onDragEvent("enter", targetNode, sourceNode, event, ui, draggable);
|
|
* stop:
|
|
* _onDragEvent("drop", targetNode, sourceNode, event, ui, draggable);
|
|
* _onDragEvent("leave", targetNode, sourceNode, event, ui, draggable);
|
|
* _onDragEvent("stop", sourceNode, null, event, ui, draggable);
|
|
*/
|
|
_onDragEvent: function(eventName, node, otherNode, event, ui, draggable) {
|
|
if(eventName !== "over"){
|
|
logMsg("tree.dnd._onDragEvent(%s, %o, %o) - %o", eventName, node, otherNode, this);
|
|
}
|
|
var $helper, nodeOfs, relPos, relPos2,
|
|
enterResponse, hitMode, r,
|
|
opts = this.options,
|
|
dnd = opts.dnd,
|
|
res = null,
|
|
nodeTag = $(node.span);
|
|
|
|
switch (eventName) {
|
|
case "helper":
|
|
// Only event and node argument is available
|
|
$helper = $("<div class='fancytree-drag-helper'><span class='fancytree-drag-helper-img' /></div>")
|
|
// .append($(event.target).closest("a").clone());
|
|
.append($(event.target).closest("span.fancytree-title").clone());
|
|
// issue 244: helper should be child of scrollParent
|
|
$("ul.fancytree-container", node.tree.$div).append($helper);
|
|
// $(node.tree.divTree).append($helper);
|
|
// Attach node reference to helper object
|
|
$helper.data("ftSourceNode", node);
|
|
logMsg("helper=%o", $helper);
|
|
logMsg("helper.sourceNode=%o", $helper.data("ftSourceNode"));
|
|
res = $helper;
|
|
break;
|
|
case "start":
|
|
if( node.isStatusNode ) {
|
|
res = false;
|
|
} else if(dnd.onDragStart) {
|
|
res = dnd.onDragStart(node);
|
|
}
|
|
if(res === false) {
|
|
this.debug("tree.onDragStart() cancelled");
|
|
//draggable._clear();
|
|
// NOTE: the return value seems to be ignored (drag is not canceled, when false is returned)
|
|
// TODO: call this._cancelDrag()?
|
|
ui.helper.trigger("mouseup");
|
|
ui.helper.hide();
|
|
} else {
|
|
nodeTag.addClass("fancytree-drag-source");
|
|
}
|
|
break;
|
|
case "enter":
|
|
if(dnd.preventRecursiveMoves && node.isDescendantOf(otherNode)){
|
|
r = false;
|
|
}else{
|
|
r = dnd.onDragEnter ? dnd.onDragEnter(node, otherNode, ui, draggable) : null;
|
|
}
|
|
if(!r){
|
|
// convert null, undefined, false to false
|
|
res = false;
|
|
}else if ( $.isArray(r) ) {
|
|
// TODO: also accept passing an object of this format directly
|
|
res = {
|
|
over: ($.inArray("over", r) >= 0),
|
|
before: ($.inArray("before", r) >= 0),
|
|
after: ($.inArray("after", r) >= 0)
|
|
};
|
|
}else{
|
|
res = {
|
|
over: ((r === true) || (r === "over")),
|
|
before: ((r === true) || (r === "before")),
|
|
after: ((r === true) || (r === "after"))
|
|
};
|
|
}
|
|
ui.helper.data("enterResponse", res);
|
|
logMsg("helper.enterResponse: %o", res);
|
|
break;
|
|
case "over":
|
|
enterResponse = ui.helper.data("enterResponse");
|
|
hitMode = null;
|
|
if(enterResponse === false){
|
|
// Don't call onDragOver if onEnter returned false.
|
|
// break;
|
|
} else if(typeof enterResponse === "string") {
|
|
// Use hitMode from onEnter if provided.
|
|
hitMode = enterResponse;
|
|
} else {
|
|
// Calculate hitMode from relative cursor position.
|
|
nodeOfs = nodeTag.offset();
|
|
relPos = { x: event.pageX - nodeOfs.left,
|
|
y: event.pageY - nodeOfs.top };
|
|
relPos2 = { x: relPos.x / nodeTag.width(),
|
|
y: relPos.y / nodeTag.height() };
|
|
|
|
if( enterResponse.after && relPos2.y > 0.75 ){
|
|
hitMode = "after";
|
|
} else if(!enterResponse.over && enterResponse.after && relPos2.y > 0.5 ){
|
|
hitMode = "after";
|
|
} else if(enterResponse.before && relPos2.y <= 0.25) {
|
|
hitMode = "before";
|
|
} else if(!enterResponse.over && enterResponse.before && relPos2.y <= 0.5) {
|
|
hitMode = "before";
|
|
} else if(enterResponse.over) {
|
|
hitMode = "over";
|
|
}
|
|
// Prevent no-ops like 'before source node'
|
|
// TODO: these are no-ops when moving nodes, but not in copy mode
|
|
if( dnd.preventVoidMoves ){
|
|
if(node === otherNode){
|
|
logMsg(" drop over source node prevented");
|
|
hitMode = null;
|
|
}else if(hitMode === "before" && otherNode && node === otherNode.getNextSibling()){
|
|
logMsg(" drop after source node prevented");
|
|
hitMode = null;
|
|
}else if(hitMode === "after" && otherNode && node === otherNode.getPrevSibling()){
|
|
logMsg(" drop before source node prevented");
|
|
hitMode = null;
|
|
}else if(hitMode === "over" && otherNode && otherNode.parent === node && otherNode.isLastSibling() ){
|
|
logMsg(" drop last child over own parent prevented");
|
|
hitMode = null;
|
|
}
|
|
}
|
|
// logMsg("hitMode: %s - %s - %s", hitMode, (node.parent === otherNode), node.isLastSibling());
|
|
ui.helper.data("hitMode", hitMode);
|
|
}
|
|
// Auto-expand node (only when 'over' the node, not 'before', or 'after')
|
|
if(hitMode === "over" && dnd.autoExpandMS && node.hasChildren() !== false && !node.expanded) {
|
|
node.scheduleAction("expand", dnd.autoExpandMS);
|
|
}
|
|
if(hitMode && dnd.onDragOver){
|
|
// TODO: http://code.google.com/p/dynatree/source/detail?r=625
|
|
res = dnd.onDragOver(node, otherNode, hitMode, ui, draggable);
|
|
}
|
|
// issue 332
|
|
// this._setDndStatus(otherNode, node, ui.helper, hitMode, res!==false);
|
|
this.dnd._setDndStatus(otherNode, node, ui.helper, hitMode, res!==false && hitMode !== null);
|
|
break;
|
|
case "drop":
|
|
hitMode = ui.helper.data("hitMode");
|
|
if(hitMode && dnd.onDrop){
|
|
dnd.onDrop(node, otherNode, hitMode, ui, draggable);
|
|
}
|
|
break;
|
|
case "leave":
|
|
// Cancel pending expand request
|
|
node.scheduleAction("cancel");
|
|
ui.helper.data("enterResponse", null);
|
|
ui.helper.data("hitMode", null);
|
|
this.dnd._setDndStatus(otherNode, node, ui.helper, "out", undefined);
|
|
if(dnd.onDragLeave){
|
|
dnd.onDragLeave(node, otherNode, ui, draggable);
|
|
}
|
|
break;
|
|
case "stop":
|
|
nodeTag.removeClass("fancytree-drag-source");
|
|
if(dnd.onDragStop){
|
|
dnd.onDragStop(node);
|
|
}
|
|
break;
|
|
default:
|
|
throw "Unsupported drag event: " + eventName;
|
|
}
|
|
return res;
|
|
},
|
|
|
|
_cancelDrag: function() {
|
|
var dd = $.ui.ddmanager.current;
|
|
if(dd){
|
|
dd.cancel();
|
|
}
|
|
}
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.filter.js
|
|
*
|
|
* Remove or highlight tree nodes, based on a filter.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
|
|
/*******************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
|
|
function _escapeRegex(str){
|
|
/*jshint regexdash:true */
|
|
return (str + "").replace(/([.?*+\^\$\[\]\\(){}|-])/g, "\\$1");
|
|
}
|
|
|
|
|
|
/**
|
|
* Dimm or hide nodes.
|
|
*
|
|
* @param {function | string} filter
|
|
* @returns {integer} count
|
|
* @lends Fancytree.prototype
|
|
* @requires jquery.fancytree.filter.js
|
|
*/
|
|
$.ui.fancytree._FancytreeClass.prototype.applyFilter = function(filter){
|
|
var match, re,
|
|
count = 0;
|
|
// Reset current filter
|
|
this.visit(function(node){
|
|
delete node.match;
|
|
delete node.subMatch;
|
|
});
|
|
|
|
// Default to 'match title substring (not case sensitive)'
|
|
if(typeof filter === "string"){
|
|
match = _escapeRegex(filter); // make sure a '.' is treated literally
|
|
re = new RegExp(".*" + match + ".*", "i");
|
|
filter = function(node){
|
|
return !!re.exec(node.title);
|
|
};
|
|
}
|
|
|
|
this.enableFilter = true;
|
|
this.$div.addClass("fancytree-ext-filter");
|
|
this.visit(function(node){
|
|
if(filter(node)){
|
|
count++;
|
|
node.match = true;
|
|
node.visitParents(function(p){
|
|
p.subMatch = true;
|
|
});
|
|
}
|
|
});
|
|
this.render();
|
|
return count;
|
|
};
|
|
|
|
/**
|
|
* Reset the filter.
|
|
*
|
|
* @lends Fancytree.prototype
|
|
* @requires jquery.fancytree.filter.js
|
|
*/
|
|
$.ui.fancytree._FancytreeClass.prototype.clearFilter = function(){
|
|
this.visit(function(node){
|
|
delete node.match;
|
|
delete node.subMatch;
|
|
$(node.li).show();
|
|
});
|
|
|
|
this.enableFilter = false;
|
|
this.render();
|
|
this.$div.removeClass("fancytree-ext-filter");
|
|
};
|
|
|
|
|
|
/*******************************************************************************
|
|
* Extension code
|
|
*/
|
|
$.ui.fancytree.registerExtension("filter", {
|
|
// Default options for this extension.
|
|
options: {
|
|
mode: "dimm"
|
|
},
|
|
// Override virtual methods for this extension.
|
|
// `this` : is this extension object
|
|
// `this._base` : the Fancytree instance
|
|
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
this._super(ctx);
|
|
ctx.tree.filter = false;
|
|
},
|
|
treeDestroy: function(ctx){
|
|
this._super(ctx);
|
|
},
|
|
nodeRenderStatus: function(ctx) {
|
|
// Set classes for current status
|
|
var visible,
|
|
node = ctx.node,
|
|
opts = ctx.options,
|
|
tree = ctx.tree,
|
|
$span = $(node[tree.statusClassPropName]);
|
|
|
|
if(!$span.length){
|
|
return; // nothing to do, if node was not yet rendered
|
|
}
|
|
this._super(ctx);
|
|
if(!tree.enableFilter){
|
|
return;
|
|
}
|
|
if( node.match ){
|
|
$span.addClass("fancytree-match");
|
|
}else{
|
|
$span.removeClass("fancytree-match");
|
|
}
|
|
if( node.subMatch ){
|
|
$span.addClass("fancytree-submatch");
|
|
}else{
|
|
$span.removeClass("fancytree-submatch");
|
|
}
|
|
if(opts.filter.mode === "hide"){
|
|
visible = !!(node.match || node.subMatch);
|
|
node.debug(node.title + ": visible=" + visible);
|
|
$(node.li).toggle(visible);
|
|
}
|
|
}
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.menu.js
|
|
*
|
|
* Enable jQuery UI Menu as context menu for tree nodes.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* @see http://api.jqueryui.com/menu/
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
// prevent duplicate loading
|
|
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
|
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
|
// return;
|
|
// }
|
|
|
|
$.ui.fancytree.registerExtension("menu", {
|
|
version: "1.0.0pre",
|
|
// Default options for this extension.
|
|
options: {
|
|
enable: true,
|
|
selector: null, //
|
|
position: {}, //
|
|
// Events:
|
|
create: $.noop, //
|
|
beforeOpen: $.noop, //
|
|
open: $.noop, //
|
|
focus: $.noop, //
|
|
select: $.noop, //
|
|
close: $.noop //
|
|
},
|
|
// Override virtual methods for this extension.
|
|
// `this` : is this extension object
|
|
// `this._base` : the Fancytree instance
|
|
// `this._super`: the virtual function that was overridden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
var opts = ctx.options,
|
|
tree = ctx.tree;
|
|
|
|
this._super(ctx);
|
|
|
|
// Prepare an object that will be passed with menu events
|
|
tree.menu.data = {
|
|
tree: tree,
|
|
node: null,
|
|
$menu: null,
|
|
menuId: null
|
|
};
|
|
|
|
// tree.$container[0].oncontextmenu = function() {return false;};
|
|
// Replace the standard browser context menu with out own
|
|
tree.$container.delegate("span.fancytree-node", "contextmenu", function(event) {
|
|
var node = $.ui.fancytree.getNode(event),
|
|
ctx = {node: node, tree: node.tree, originalEvent: event, options: tree.options};
|
|
tree.menu._openMenu(ctx);
|
|
return false;
|
|
});
|
|
|
|
// Use jquery.ui.menu
|
|
$(opts.menu.selector).menu({
|
|
create: function(event, ui){
|
|
tree.menu.data.$menu = $(this).menu("widget");
|
|
var data = $.extend({}, tree.menu.data);
|
|
opts.menu.create.call(tree, event, data);
|
|
},
|
|
focus: function(event, ui){
|
|
var data = $.extend({}, tree.menu.data, {
|
|
menuItem: ui.item,
|
|
menuId: ui.item.find(">a").attr("href")
|
|
});
|
|
opts.menu.focus.call(tree, event, data);
|
|
},
|
|
select: function(event, ui){
|
|
var data = $.extend({}, tree.menu.data, {
|
|
menuItem: ui.item,
|
|
menuId: ui.item.find(">a").attr("href")
|
|
});
|
|
if( opts.menu.select.call(tree, event, data) !== false){
|
|
tree.menu._closeMenu(ctx);
|
|
}
|
|
}
|
|
}).hide();
|
|
},
|
|
treeDestroy: function(ctx){
|
|
this._super(ctx);
|
|
},
|
|
_openMenu: function(ctx){
|
|
var data,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
$menu = $(opts.menu.selector);
|
|
|
|
tree.menu.data.node = ctx.node;
|
|
data = $.extend({}, tree.menu.data);
|
|
|
|
if( opts.menu.beforeOpen.call(tree, ctx.originalEvent, data) === false){
|
|
return;
|
|
}
|
|
|
|
$(document).bind("keydown.fancytree", function(event){
|
|
if( event.which === $.ui.keyCode.ESCAPE ){
|
|
tree.menu._closeMenu(ctx);
|
|
}
|
|
}).bind("mousedown.fancytree", function(event){
|
|
// Close menu when clicked outside menu
|
|
if( $(event.target).closest(".ui-menu-item").length === 0 ){
|
|
tree.menu._closeMenu(ctx);
|
|
}
|
|
});
|
|
// $menu.position($.extend({my: "left top", at: "left bottom", of: event}, opts.menu.position));
|
|
$menu
|
|
.css("position", "absolute")
|
|
.show()
|
|
.position({my: "left top", at: "right top", of: ctx.originalEvent, collision: "fit"})
|
|
.focus();
|
|
|
|
opts.menu.open.call(tree, ctx.originalEvent, data);
|
|
},
|
|
_closeMenu: function(ctx){
|
|
var $menu,
|
|
tree = ctx.tree,
|
|
opts = ctx.options,
|
|
data = $.extend({}, tree.menu.data);
|
|
if( opts.menu.close.call(tree, ctx.originalEvent, data) === false){
|
|
return;
|
|
}
|
|
$menu = $(opts.menu.selector);
|
|
$(document).unbind("keydown.fancytree, mousedown.fancytree");
|
|
$menu.hide();
|
|
tree.menu.data.node = null;
|
|
}
|
|
// ,
|
|
// nodeClick: function(ctx) {
|
|
// var event = ctx.originalEvent;
|
|
// if(event.which === 2 || (event.which === 1 && event.ctrlKey)){
|
|
// event.preventDefault();
|
|
// ctx.tree.menu._openMenu(ctx);
|
|
// return false;
|
|
// }
|
|
// this._super(ctx);
|
|
// }
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.persist.js
|
|
*
|
|
* Persist tree status in cookiesRemove or highlight tree nodes, based on a filter.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* @depends: jquery.cookie.js
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
// prevent duplicate loading
|
|
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
|
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
|
// return;
|
|
// }
|
|
|
|
|
|
/*******************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
function _assert(cond, msg){
|
|
msg = msg || "";
|
|
if(!cond){
|
|
$.error("Assertion failed " + msg);
|
|
}
|
|
}
|
|
|
|
var ACTIVE = "active",
|
|
EXPANDED = "expanded",
|
|
FOCUS = "focus",
|
|
SELECTED = "selected";
|
|
|
|
/**
|
|
*
|
|
* Called like
|
|
* $("#tree").fancytree("getTree").clearCookies("active expanded focus selected");
|
|
*
|
|
* @lends Fancytree.prototype
|
|
* @requires jquery.fancytree.persist.js
|
|
*/
|
|
$.ui.fancytree._FancytreeClass.prototype.clearCookies = function(types){
|
|
var cookiePrefix = this.persist.cookiePrefix;
|
|
types = types || "active expanded focus selected";
|
|
// TODO: optimize
|
|
if(types.indexOf(ACTIVE) >= 0){
|
|
$.cookie(cookiePrefix + ACTIVE, null);
|
|
}
|
|
if(types.indexOf(EXPANDED) >= 0){
|
|
$.cookie(cookiePrefix + EXPANDED, null);
|
|
}
|
|
if(types.indexOf(FOCUS) >= 0){
|
|
$.cookie(cookiePrefix + FOCUS, null);
|
|
}
|
|
if(types.indexOf(SELECTED) >= 0){
|
|
$.cookie(cookiePrefix + SELECTED, null);
|
|
}
|
|
};
|
|
|
|
|
|
/* TODO:
|
|
DynaTreeStatus._getTreePersistData = function(cookieId, cookieOpts) {
|
|
// Static member: Return persistence information from cookies
|
|
var ts = new DynaTreeStatus(cookieId, cookieOpts);
|
|
ts.read();
|
|
return ts.toDict();
|
|
};
|
|
*/
|
|
|
|
/* *****************************************************************************
|
|
* Extension code
|
|
*/
|
|
$.ui.fancytree.registerExtension("persist", {
|
|
// Default options for this extension.
|
|
options: {
|
|
cookieDelimiter: "~",
|
|
cookiePrefix: undefined, // 'fancytree-<treeId>-' by default
|
|
cookie: {
|
|
raw: false,
|
|
expires: "",
|
|
path: "",
|
|
domain: "",
|
|
secure: false
|
|
},
|
|
overrideSource: false, // true: cookie takes precedence over `source` data attributes.
|
|
types: "active expanded focus selected"
|
|
},
|
|
|
|
/* Append `key` to a cookie. */
|
|
_setKey: function(type, key, flag){
|
|
var instData = this.persist,
|
|
instOpts = this.options.persist,
|
|
cookieName = instData.cookiePrefix + type,
|
|
cookie = $.cookie(cookieName),
|
|
cookieList = cookie ? cookie.split(instOpts.cookieDelimiter) : [],
|
|
idx = $.inArray(key, cookieList);
|
|
// Remove, even if we add a key, so the key is always the last entry
|
|
if(idx >= 0){
|
|
cookieList.splice(idx, 1);
|
|
}
|
|
// Append key to cookie
|
|
if(flag){
|
|
cookieList.push(key);
|
|
}
|
|
$.cookie(cookieName, cookieList.join(instOpts.cookieDelimiter), instOpts.cookie);
|
|
},
|
|
// Overide virtual methods for this extension.
|
|
// `this` : is this Fancytree object
|
|
// `this._super`: the virtual function that was overridden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
var tree = ctx.tree,
|
|
opts = ctx.options,
|
|
instData = this.persist,
|
|
instOpts = this.options.persist;
|
|
|
|
_assert($.cookie, "Missing required plugin for 'persist' extension: jquery.cookie.js");
|
|
|
|
instData.cookiePrefix = instOpts.cookiePrefix || "fancytree-" + tree._id + "-";
|
|
instData.storeActive = instOpts.types.indexOf(ACTIVE) >= 0;
|
|
instData.storeExpanded = instOpts.types.indexOf(EXPANDED) >= 0;
|
|
instData.storeSelected = instOpts.types.indexOf(SELECTED) >= 0;
|
|
instData.storeFocus = instOpts.types.indexOf(FOCUS) >= 0;
|
|
|
|
// Bind init-handler to apply cookie state
|
|
tree.$div.bind("fancytreeinit", function(e){
|
|
var cookie,
|
|
keyList,
|
|
i,
|
|
prevFocus = $.cookie(instData.cookiePrefix + FOCUS), // record this before node.setActive() overrides it
|
|
node;
|
|
|
|
tree.debug("COOKIE " + document.cookie);
|
|
|
|
if(instData.storeExpanded){
|
|
cookie = $.cookie(instData.cookiePrefix + EXPANDED);
|
|
if(cookie){
|
|
keyList = cookie.split(instOpts.cookieDelimiter);
|
|
for(i=0; i<keyList.length; i++){
|
|
node = tree.getNodeByKey(keyList[i]);
|
|
if(node){
|
|
if(node.expanded === undefined || instOpts.overrideSource && (node.expanded === false)){
|
|
// node.setExpanded();
|
|
node.expanded = true;
|
|
node.render();
|
|
}
|
|
}else{
|
|
// node is no longer member of the tree: remove from cookie
|
|
instData._setKey(EXPANDED, keyList[i], false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(instData.storeSelected){
|
|
cookie = $.cookie(instData.cookiePrefix + SELECTED);
|
|
if(cookie){
|
|
keyList = cookie.split(instOpts.cookieDelimiter);
|
|
for(i=0; i<keyList.length; i++){
|
|
node = tree.getNodeByKey(keyList[i]);
|
|
if(node){
|
|
if(node.selected === undefined || instOpts.overrideSource && (node.selected === false)){
|
|
// node.setSelected();
|
|
node.selected = true;
|
|
node.renderStatus();
|
|
}
|
|
}else{
|
|
// node is no longer member of the tree: remove from cookie also
|
|
instData._setKey(SELECTED, keyList[i], false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(instData.storeActive){
|
|
cookie = $.cookie(instData.cookiePrefix + ACTIVE);
|
|
if(cookie && (opts.persist.overrideSource || !tree.activeNode)){
|
|
node = tree.getNodeByKey(cookie);
|
|
if(node){
|
|
node.setActive();
|
|
}
|
|
}
|
|
}
|
|
if(instData.storeFocus && prevFocus){
|
|
node = tree.getNodeByKey(prevFocus);
|
|
if(node){
|
|
node.setFocus();
|
|
}
|
|
}
|
|
});
|
|
// Init the tree
|
|
this._super(ctx);
|
|
},
|
|
// treeDestroy: function(ctx){
|
|
// this._super(ctx);
|
|
// },
|
|
nodeSetActive: function(ctx, flag) {
|
|
var instData = this.persist,
|
|
instOpts = this.options.persist;
|
|
this._super(ctx, flag);
|
|
if(instData.storeActive){
|
|
$.cookie(instData.cookiePrefix + ACTIVE,
|
|
this.activeNode ? this.activeNode.key : null,
|
|
instOpts.cookie);
|
|
}
|
|
},
|
|
nodeSetExpanded: function(ctx, flag) {
|
|
var node = ctx.node,
|
|
instData = this.persist;
|
|
|
|
this._super(ctx, flag);
|
|
|
|
if(instData.storeExpanded){
|
|
instData._setKey(EXPANDED, node.key, flag);
|
|
}
|
|
},
|
|
nodeSetFocus: function(ctx) {
|
|
var instData = this.persist,
|
|
instOpts = this.options.persist;
|
|
|
|
this._super(ctx);
|
|
|
|
if(instData.storeFocus){
|
|
$.cookie(this.cookiePrefix + FOCUS,
|
|
this.focusNode ? this.focusNode.key : null,
|
|
instOpts.cookie);
|
|
}
|
|
},
|
|
nodeSetSelected: function(ctx, flag) {
|
|
var node = ctx.node,
|
|
instData = this.persist;
|
|
|
|
this._super(ctx, flag);
|
|
|
|
if(instData.storeSelected){
|
|
instData._setKey(SELECTED, node.key, flag);
|
|
}
|
|
}
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.table.js
|
|
*
|
|
* Render tree as table (aka 'treegrid', 'tabletree').
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
// prevent duplicate loading
|
|
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
|
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
|
// return;
|
|
// }
|
|
|
|
|
|
/* *****************************************************************************
|
|
* Private functions and variables
|
|
*/
|
|
function _assert(cond, msg){
|
|
msg = msg || "";
|
|
if(!cond){
|
|
$.error("Assertion failed " + msg);
|
|
}
|
|
}
|
|
|
|
function insertSiblingAfter(referenceNode, newNode) {
|
|
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
|
}
|
|
|
|
/* Show/hide all rows that are structural descendants of `parent`. */
|
|
function setChildRowVisibility(parent, flag) {
|
|
parent.visit(function(node){
|
|
var tr = node.tr;
|
|
if(tr){
|
|
tr.style.display = flag ? "" : "none";
|
|
}
|
|
if(!node.expanded){
|
|
return "skip";
|
|
}
|
|
});
|
|
}
|
|
|
|
/* Find node that is rendered in previous row. */
|
|
function findPrevRowNode(node){
|
|
var i, last, prev,
|
|
parent = node.parent,
|
|
siblings = parent ? parent.children : null;
|
|
|
|
if(siblings && siblings.length > 1 && siblings[0] !== node){
|
|
// use the lowest descendant of the preceeding sibling
|
|
i = $.inArray(node, siblings);
|
|
prev = siblings[i - 1];
|
|
_assert(prev.tr);
|
|
// descend to lowest child (with a <tr> tag)
|
|
while(prev.children){
|
|
last = prev.children[prev.children.length - 1];
|
|
if(!last.tr){
|
|
break;
|
|
}
|
|
prev = last;
|
|
}
|
|
}else{
|
|
// if there is no preceding sibling, use the direct parent
|
|
prev = parent;
|
|
}
|
|
return prev;
|
|
}
|
|
|
|
|
|
$.ui.fancytree.registerExtension("table", {
|
|
// Default options for this extension.
|
|
options: {
|
|
indentation: 16, // indent every node level by 16px
|
|
nodeColumnIdx: 0, // render node expander, icon, and title to column #0
|
|
checkboxColumnIdx: null // render the checkboxes into the 1st column
|
|
},
|
|
// Overide virtual methods for this extension.
|
|
// `this` : is this extension object
|
|
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
var i, $row, tdRole,
|
|
tree = ctx.tree,
|
|
$table = tree.widget.element;
|
|
|
|
$table.addClass("fancytree-container fancytree-ext-table");
|
|
tree.tbody = $table.find("> tbody")[0];
|
|
tree.columnCount = $("thead >tr >th", $table).length;
|
|
$(tree.tbody).empty();
|
|
|
|
tree.rowFragment = document.createDocumentFragment();
|
|
$row = $("<tr>");
|
|
tdRole = "";
|
|
if(ctx.options.aria){
|
|
$row.attr("role", "row");
|
|
tdRole = " role='gridcell'";
|
|
}
|
|
for(i=0; i<tree.columnCount; i++) {
|
|
if(ctx.options.table.nodeColumnIdx === i){
|
|
$row.append("<td" + tdRole + "><span class='fancytree-node'></span></td>");
|
|
}else{
|
|
$row.append("<td" + tdRole + ">");
|
|
}
|
|
}
|
|
tree.rowFragment.appendChild($row.get(0));
|
|
|
|
this._super(ctx);
|
|
// standard Fancytree created a root UL
|
|
$(tree.rootNode.ul).remove();
|
|
tree.rootNode.ul = null;
|
|
tree.$container = $table;
|
|
// Add container to the TAB chain
|
|
tree.$container.attr("tabindex", "0");
|
|
if(this.options.aria){
|
|
tree.$container
|
|
.attr("role", "treegrid")
|
|
.attr("aria-readonly", true);
|
|
}
|
|
// Make sure that status classes are set on the node's <tr> elements
|
|
tree.statusClassPropName = "tr";
|
|
tree.ariaPropName = "tr";
|
|
},
|
|
/* Called by nodeRender to sync node order with tag order.*/
|
|
// nodeFixOrder: function(ctx) {
|
|
// },
|
|
nodeRemoveChildMarkup: function(ctx) {
|
|
var node = ctx.node;
|
|
// DT.debug("nodeRemoveChildMarkup()", node.toString());
|
|
node.visit(function(n){
|
|
if(n.tr){
|
|
$(n.tr).remove();
|
|
n.tr = null;
|
|
}
|
|
});
|
|
},
|
|
nodeRemoveMarkup: function(ctx) {
|
|
var node = ctx.node;
|
|
// DT.debug("nodeRemoveMarkup()", node.toString());
|
|
if(node.tr){
|
|
$(node.tr).remove();
|
|
node.tr = null;
|
|
}
|
|
this.nodeRemoveChildMarkup(ctx);
|
|
},
|
|
/* Override standard render. */
|
|
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
|
var $cb, children, firstTr, i, l, newRow, prevNode, prevTr, subCtx,
|
|
tree = ctx.tree,
|
|
node = ctx.node,
|
|
opts = ctx.options,
|
|
isRootNode = !node.parent;
|
|
// firstTime = false;
|
|
if( !_recursive ){
|
|
ctx.hasCollapsedParents = node.parent && !node.parent.expanded;
|
|
}
|
|
if( !isRootNode ){
|
|
if(!node.tr){
|
|
// Create new <tr> after previous row
|
|
newRow = tree.rowFragment.firstChild.cloneNode(true);
|
|
prevNode = findPrevRowNode(node);
|
|
// firstTime = true;
|
|
// $.ui.fancytree.debug("*** nodeRender " + node + ": prev: " + prevNode.key);
|
|
_assert(prevNode);
|
|
if(collapsed === true && _recursive){
|
|
// hide all child rows, so we can use an animation to show it later
|
|
newRow.style.display = "none";
|
|
}else if(deep && ctx.hasCollapsedParents){
|
|
// also hide this row if deep === true but any parent is collapsed
|
|
newRow.style.display = "none";
|
|
// newRow.style.color = "red";
|
|
}
|
|
if(!prevNode.tr){
|
|
_assert(!prevNode.parent, "prev. row must have a tr, or is system root");
|
|
tree.tbody.appendChild(newRow);
|
|
}else{
|
|
insertSiblingAfter(prevNode.tr, newRow);
|
|
}
|
|
node.tr = newRow;
|
|
if( node.key && opts.generateIds ){
|
|
node.tr.id = opts.idPrefix + node.key;
|
|
}
|
|
node.tr.ftnode = node;
|
|
if(opts.aria){
|
|
// TODO: why doesn't this work:
|
|
// node.li.role = "treeitem";
|
|
$(node.tr).attr("aria-labelledby", "ftal_" + node.key);
|
|
}
|
|
node.span = $("span.fancytree-node", node.tr).get(0);
|
|
// Set icon, link, and title (normally this is only required on initial render)
|
|
this.nodeRenderTitle(ctx);
|
|
// move checkbox to custom column
|
|
if(opts.checkbox && opts.table.checkboxColumnIdx != null){
|
|
// $("span.fancytree-node", node.tr).get(0);
|
|
$cb = $("span.fancytree-checkbox", node.span).detach();
|
|
$(node.tr).find("td:first").append($cb);
|
|
}
|
|
// Allow tweaking, binding, after node was created for the first time
|
|
tree._triggerNodeEvent("createNode", ctx);
|
|
}
|
|
}
|
|
// Allow tweaking after node state was rendered
|
|
tree._triggerNodeEvent("renderNode", ctx);
|
|
// Visit child nodes
|
|
// Add child markup
|
|
children = node.children;
|
|
if(children && (isRootNode || deep || node.expanded)){
|
|
for(i=0, l=children.length; i<l; i++) {
|
|
subCtx = $.extend({}, ctx, {node: children[i]});
|
|
subCtx.hasCollapsedParents = subCtx.hasCollapsedParents || !node.expanded;
|
|
this.nodeRender(subCtx, force, deep, collapsed, true);
|
|
}
|
|
}
|
|
// Make sure, that <tr> order matches node.children order.
|
|
if(children && !_recursive){ // we only have to do it once, for the root branch
|
|
prevTr = node.tr || null;
|
|
firstTr = tree.tbody.firstChild;
|
|
// Iterate over all descendants
|
|
node.visit(function(n){
|
|
if(n.tr){
|
|
if(!node.expanded && !isRootNode && n.tr.style.display !== "none"){
|
|
// fix after a node was dropped over a sibling.
|
|
// In this case it must be hidden
|
|
n.tr.style.display = "none";
|
|
}
|
|
if(n.tr.previousSibling !== prevTr){
|
|
node.debug("_fixOrder: mismatch at node: " + n);
|
|
var nextTr = prevTr ? prevTr.nextSibling : firstTr;
|
|
tree.tbody.insertBefore(n.tr, nextTr);
|
|
}
|
|
prevTr = n.tr;
|
|
}
|
|
});
|
|
}
|
|
// Update element classes according to node state
|
|
if(!isRootNode){
|
|
this.nodeRenderStatus(ctx);
|
|
}
|
|
// Finally add the whole structure to the DOM, so the browser can render
|
|
// if(firstTime){
|
|
// parent.ul.appendChild(node.li);
|
|
// }
|
|
// TODO: just for debugging
|
|
// this._super(ctx);
|
|
},
|
|
nodeRenderTitle: function(ctx, title) {
|
|
var node = ctx.node;
|
|
this._super(ctx);
|
|
// let user code write column content
|
|
ctx.tree._triggerNodeEvent("renderColumns", node);
|
|
},
|
|
nodeRenderStatus: function(ctx) {
|
|
var indent,
|
|
node = ctx.node,
|
|
opts = ctx.options;
|
|
|
|
this._super(ctx);
|
|
// indent
|
|
indent = (node.getLevel() - 1) * opts.table.indentation;
|
|
if(indent){
|
|
$(node.span).css({marginLeft: indent + "px"});
|
|
}
|
|
},
|
|
/* Expand node, return Deferred.promise. */
|
|
nodeSetExpanded: function(ctx, flag) {
|
|
var node = ctx.node,
|
|
dfd = new $.Deferred();
|
|
this._super(ctx, flag).done(function(){
|
|
flag = (flag !== false);
|
|
setChildRowVisibility(ctx.node, flag);
|
|
dfd.resolveWith(node);
|
|
});
|
|
return dfd;
|
|
},
|
|
nodeSetStatus: function(ctx, status, message, details) {
|
|
if(status === "ok"){
|
|
var node = ctx.node,
|
|
firstChild = ( node.children ? node.children[0] : null );
|
|
if ( firstChild && firstChild.isStatusNode ) {
|
|
$(firstChild.tr).remove();
|
|
}
|
|
}
|
|
this._super(ctx, status, message, details);
|
|
}/*,
|
|
treeSetFocus: function(ctx, flag) {
|
|
// alert("treeSetFocus" + ctx.tree.$container);
|
|
ctx.tree.$container.focus();
|
|
$.ui.fancytree.focusTree = ctx.tree;
|
|
}*/
|
|
});
|
|
}(jQuery, window, document));
|
|
|
|
/*!
|
|
* jquery.fancytree.themeroller.js
|
|
*
|
|
* Enable jQuery UI ThemeRoller styles.
|
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
|
*
|
|
* @see http://jqueryui.com/themeroller/
|
|
*
|
|
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de)
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
|
*
|
|
* @version DEVELOPMENT
|
|
* @date DEVELOPMENT
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
"use strict";
|
|
|
|
/*******************************************************************************
|
|
* Extension code
|
|
*/
|
|
$.ui.fancytree.registerExtension("themeroller", {
|
|
// Default options for this extension.
|
|
options: {
|
|
activeClass: "ui-state-active",
|
|
foccusClass: "ui-state-focus",
|
|
hoverClass: "ui-state-hover",
|
|
selectedClass: "ui-state-highlight"
|
|
},
|
|
// Overide virtual methods for this extension.
|
|
// `this` : is this extension object
|
|
// `this._base` : the Fancytree instance
|
|
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
|
treeInit: function(ctx){
|
|
this._super(ctx);
|
|
var $el = ctx.widget.element;
|
|
|
|
if($el[0].nodeName === "TABLE"){
|
|
$el.addClass("ui-widget ui-corner-all");
|
|
$el.find(">thead tr").addClass("ui-widget-header");
|
|
$el.find(">tbody").addClass("ui-widget-conent");
|
|
}else{
|
|
$el.addClass("ui-widget ui-widget-content ui-corner-all");
|
|
}
|
|
|
|
$el.delegate(".fancytree-node", "mouseenter mouseleave", function(event){
|
|
var node = $.ui.fancytree.getNode(event.target),
|
|
flag = (event.type === "mouseenter");
|
|
node.debug("hover: " + flag);
|
|
$(node.span).toggleClass("ui-state-hover ui-corner-all", flag);
|
|
});
|
|
},
|
|
treeDestroy: function(ctx){
|
|
this._super(ctx);
|
|
ctx.widget.element.removeClass("ui-widget ui-widget-content ui-corner-all");
|
|
},
|
|
nodeRenderStatus: function(ctx){
|
|
var node = ctx.node,
|
|
$el = $(node.span);
|
|
this._super(ctx);
|
|
/*
|
|
.ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
|
|
.ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
|
|
.ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
|
|
|
|
.ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
|
|
.ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
|
|
.ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
|
|
.ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
|
|
*/
|
|
$el.toggleClass("ui-state-active", node.isActive());
|
|
$el.toggleClass("ui-state-focus", node.hasFocus());
|
|
$el.toggleClass("ui-state-highlight", node.isSelected());
|
|
// node.debug("ext-themeroller.nodeRenderStatus: ", node.span.className);
|
|
}
|
|
});
|
|
}(jQuery, window, document));
|
|
|