- * Note: Also non-folders may have children. - * @property {string} statusNodeType null or type of temporarily generated system node like 'loading', or 'error'. - * @property {boolean} lazy True if this node is loaded on demand, i.e. on first expansion. - * @property {boolean} selected Use isSelected(), setSelected() to access this property. - * @property {string} tooltip Alternative description used as hover banner - */ -function FancytreeNode(parent, obj){ - var i, l, name, cl; + /** + * Creates a new FancytreeNode + * + * @class FancytreeNode + * @classdesc A FancytreeNode represents the hierarchical data model and operations. + * + * @param {FancytreeNode} parent + * @param {NodeData} obj + * + * @property {Fancytree} tree The tree instance + * @property {FancytreeNode} parent The parent node + * @property {string} key Node id (must be unique inside the tree) + * @property {string} title Display name (may contain HTML) + * @property {object} data Contains all extra data that was passed on node creation + * @property {FancytreeNode[] | null | undefined} children Array of child nodes.
+ * For lazy nodes, null or undefined means 'not yet loaded'. Use an empty array + * to define a node that has no children. + * @property {boolean} expanded Use isExpanded(), setExpanded() to access this property. + * @property {string} extraClasses Addtional CSS classes, added to the node's `<span>` + * @property {boolean} folder Folder nodes have different default icons and click behavior.
+ * Note: Also non-folders may have children. + * @property {string} statusNodeType null or type of temporarily generated system node like 'loading', or 'error'. + * @property {boolean} lazy True if this node is loaded on demand, i.e. on first expansion. + * @property {boolean} selected Use isSelected(), setSelected() to access this property. + * @property {string} tooltip Alternative description used as hover banner + */ + function FancytreeNode(parent, obj){ + var i, l, name, cl; - this.parent = parent; - this.tree = parent.tree; - this.ul = null; - this.li = null; //
- * '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 {function} [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; + // Expand bottom-up, so only the top node is animated + for(i = len - 1; i >= 0; i--){ + // that.debug("pushexpand" + parents[i]); + deferreds.push(parents[i].setExpanded(true, opts)); + } + $.when.apply($, deferreds).done(function(){ + // All expands have finished + // that.debug("expand DONE", scroll); + if( scroll ){ + that.scrollIntoView(effects).done(function(){ + // that.debug("scroll DONE"); + dfd.resolve(); + }); + } else { + dfd.resolve(); + } + }); + return dfd.promise(); + }, + /** 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 {function} [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 its own descendant"; - } - // Unlink this node from current parent - if( this.parent.children.length === 1 ) { - if( this.parent === targetParent ){ - return; // #258 - } - 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 === targetNode){ + return; + }else if( !this.parent ){ + throw "Cannot move system root"; + }else if( targetParent.isDescendantOf(this) ){ + throw "Cannot move a node to its own descendant"; + } + // Unlink this node from current parent + if( this.parent.children.length === 1 ) { + if( this.parent === targetParent ){ + return; // #258 + } + 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
- tag yet:
+ // 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
- It should only be neccessary to call this method after the node object - * was modified by direct access to its properties, because the common - * API methods (node.setTitle(), moveTo(), addChildren(), remove(), ...) - * already handle this. - *
- {@link FancytreeNode#renderTitle} and {@link FancytreeNode#renderStatus} - * are implied. If changes are more local, calling only renderTitle() or - * renderStatus() may be sufficient and faster. - *
- If a node was created/removed, node.render() must be called on the parent. - *
- It should only be neccessary to call this method after the node object + * was modified by direct access to its properties, because the common + * API methods (node.setTitle(), moveTo(), addChildren(), remove(), ...) + * already handle this. + *
- {@link FancytreeNode#renderTitle} and {@link FancytreeNode#renderStatus} + * are implied. If changes are more local, calling only renderTitle() or + * renderStatus() may be sufficient and faster. + *
- If a node was created/removed, node.render() must be called on the parent. + *
-
- *
- *
- // only present if node has children
- *
- child1 ... - *
- child2 ... - *
- * -
+ *
+ *
- // only present if node has children
+ *
- child1 ... + *
- child2 ... + *
+ * - + this.nodeRemoveMarkup(ctx); + } + // Create
- // node.debug("render..."); - if( !node.li ) { + 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: + 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); + } + 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); - // Create inner HTML for the (expander, checkbox, icon, and title) - this.nodeRenderTitle(ctx); + // Create inner HTML for the (expander, checkbox, icon, and title) + this.nodeRenderTitle(ctx); - // Allow tweaking and binding, after node was created for the first time - if ( opts.createNode ){ - opts.createNode.call(tree, {type: "createNode"}, ctx); - } - }else{ + // Allow tweaking and binding, after node was created for the first time + if ( opts.createNode ){ + opts.createNode.call(tree, {type: "createNode"}, ctx); + } + }else{ // this.nodeRenderTitle(ctx); - this.nodeRenderStatus(ctx); - } - // Allow tweaking after node state was rendered - if ( opts.renderNode ){ - opts.renderNode.call(tree, {type: "renderNode"}, ctx); - } - } + this.nodeRenderStatus(ctx); + } + // Allow tweaking after node state was rendered + 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"); - } - if ( node.li ) { // issue #67 - node.li.appendChild(node.ul); - } else { - node.tree.$div.append(node.ul); - } - } - // Add child markup - for(i=0, l=children.length; i
- order matches node.children order.
- childLI = node.ul.firstChild;
- for(i=0, l=children.length-1; i
- order matches node.children order. + childLI = node.ul.firstChild; + for(i=0, l=children.length-1; i
"); - } else if ( node.data.iconclass ) { - // TODO: review and test and document - ares.push(""); - } else if ( icon === true || (icon !== false && opts.icons !== false) ) { - // opts.icons defines the default behavior. - // node.icon == true/false can override this - ares.push(""); - } - // node title - nodeTitle = ""; - // TODO: currently undocumented; may be removed? - if ( opts.renderTitle ){ - nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || ""; - } - if(!nodeTitle){ - tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : ""; - id = aria ? " id='ftal_" + node.key + "'" : ""; - role = aria ? " role='treeitem'" : ""; - tabindex = opts.titlesTabbable ? " tabindex='0'" : ""; + 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( !node.lazy ) { + node.expanded = true; + } + if(aria){ + ares.push(""); + }else{ + ares.push(""); + } + } + // .. else (i.e. for root level) skip expander/connector alltogether + } else { + if(aria){ + ares.push(""); + }else{ + ares.push(""); + } + } + // Checkbox mode + if( opts.checkbox && node.hideCheckbox !== true && !node.isStatusNode() ) { + if(aria){ + ares.push(""); + }else{ + ares.push(""); + } + } + // folder or doctype icon + role = aria ? " role='img'" : ""; + if ( icon && typeof icon === "string" ) { + imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon); + ares.push("
-
- this.data = $.extend(this.data, _getElementDataAsDict($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();
- }
+ 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);
+ // allow to init tree.data.foo from
-
+ this.data = $.extend(this.data, _getElementDataAsDict($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;
- },
- /** Node was inserted into or removed from the tree.
- * @param {EventData} ctx
- * @param {boolean} add
- * @param {FancytreeNode} node
- */
- treeRegisterNode: function(ctx, add, node) {
- },
- /** Widget got focus.
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- */
- treeSetFocus: function(ctx, flag, _calledByNodeSetFocus) {
- flag = (flag !== false);
+ // $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;
+ },
+ /** Node was inserted into or removed from the tree.
+ * @param {EventData} ctx
+ * @param {boolean} add
+ * @param {FancytreeNode} node
+ */
+ treeRegisterNode: function(ctx, add, node) {
+ },
+ /** Widget got focus.
+ * @param {EventData} ctx
+ * @param {boolean} [flag=true]
+ */
+ treeSetFocus: function(ctx, flag, _calledByNodeSetFocus) {
+ flag = (flag !== false);
- // this.debug("treeSetFocus(" + flag + "), _calledByNodeSetFocus: " + _calledByNodeSetFocus);
- // this.debug(" focusNode: " + this.focusNode);
- // this.debug(" activeNode: " + this.activeNode);
- if( flag !== this.hasFocus() ){
- this._hasFocus = flag;
- this.$container.toggleClass("fancytree-treefocus", flag);
- this._triggerTreeEvent(flag ? "focusTree" : "blurTree");
- }
- }
-});
+ // this.debug("treeSetFocus(" + flag + "), _calledByNodeSetFocus: " + _calledByNodeSetFocus);
+ // this.debug(" focusNode: " + this.focusNode);
+ // this.debug(" activeNode: " + this.activeNode);
+ if( flag !== this.hasFocus() ){
+ this._hasFocus = flag;
+ this.$container.toggleClass("fancytree-treefocus", flag);
+ this._triggerTreeEvent(flag ? "focusTree" : "blurTree");
+ }
+ }
+ });
-/* ******************************************************************************
- * jQuery UI widget boilerplate
- */
+ /* ******************************************************************************
+ * jQuery UI widget boilerplate
+ */
-/**
- * The plugin (derrived from jQuery.Widget).
- * This constructor is not called directly. Use `$(selector).fancytree({})` - * to initialize the plugin instead.
- *// Access widget methods and members: - * var tree = $("#tree").fancytree("getTree"); - * var node = $("#tree").fancytree("getActiveNode", "1234"); - *- * - * @mixin Fancytree_Widget - */ + /** + * The plugin (derrived from jQuery.Widget).
+ * This constructor is not called directly. Use `$(selector).fancytree({})` + * to initialize the plugin instead.
+ *// Access widget methods and members: + * var tree = $("#tree").fancytree("getTree"); + * var node = $("#tree").fancytree("getActiveNode", "1234"); + *+ * + * @mixin Fancytree_Widget + */ -$.widget("ui.fancytree", - /** @lends Fancytree_Widget# */ - { - /**These options will be used as defaults - * @type {FancytreeOptions} - */ - options: - { - activeVisible: true, - ajax: { - type: "GET", - cache: false, // false: Append random '_' argument to the request url to prevent caching. + $.widget("ui.fancytree", + /** @lends Fancytree_Widget# */ + { + /**These options will be used as defaults + * @type {FancytreeOptions} + */ + options: + { + 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, + 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, - scrollOfs: {top: 0, bottom: 0}, - scrollParent: null, - selectMode: 2, - strings: { - loading: "Loading…", - loadError: "Load error!" - }, - tabbable: true, - titlesTabbable: false, - _classNames: { - node: "fancytree-node", - folder: "fancytree-folder", - combinedExpanderPrefix: "fancytree-exp-", - combinedIconPrefix: "fancytree-ico-", - hasChildren: "fancytree-has-children", - active: "fancytree-active", - selected: "fancytree-selected", - expanded: "fancytree-expanded", - lazy: "fancytree-lazy", - focused: "fancytree-focused", - partsel: "fancytree-partsel", - lastsib: "fancytree-lastsib", - loading: "fancytree-loading", - error: "fancytree-error" - }, - // events - lazyLoad: null, - postProcess: null - }, - /* Set up the widget, Called on first $().fancytree() */ - _create: function() { - this.tree = new Fancytree(this); + 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: false, + idPrefix: "ft_", + keyboard: true, + keyPathSeparator: "/", + minExpandLevel: 1, + scrollOfs: {top: 0, bottom: 0}, + scrollParent: null, + selectMode: 2, + strings: { + loading: "Loading…", + loadError: "Load error!" + }, + tabbable: true, + titlesTabbable: false, + _classNames: { + node: "fancytree-node", + folder: "fancytree-folder", + combinedExpanderPrefix: "fancytree-exp-", + combinedIconPrefix: "fancytree-ico-", + hasChildren: "fancytree-has-children", + active: "fancytree-active", + selected: "fancytree-selected", + expanded: "fancytree-expanded", + lazy: "fancytree-lazy", + focused: "fancytree-focused", + partsel: "fancytree-partsel", + lastsib: "fancytree-lastsib", + loading: "fancytree-loading", + error: "fancytree-error", + glyph: "glyphicon glyphicon-plus-sign" + }, + // 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; + 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
- *
- *// Access static members: - * var node = $.ui.fancytree.getNode(element); - * alert($.ui.fancytree.version); - *
- * - * @mixin Fancytree_Static - */ -$.extend($.ui.fancytree, - /** @lends Fancytree_Static# */ - { - /** @type {string} */ - version: "@VERSION", // Set to semver by 'grunt release' - /** @type {string} */ - buildType: "development", // Set to 'production' by 'grunt build' - /** @type {int} */ - debugLevel: 2, // Set to 1 by 'grunt build' - // Used by $.ui.fancytree.debug() and as default for tree.options.debugLevel + /** + * Static members in the `$.ui.fancytree` namespace.
+ *
+ *// Access static members: + * var node = $.ui.fancytree.getNode(element); + * alert($.ui.fancytree.version); + *
+ * + * @mixin Fancytree_Static + */ + $.extend($.ui.fancytree, + /** @lends Fancytree_Static# */ + { + /** @type {string} */ + version: "@VERSION", // Set to semver by 'grunt release' + /** @type {string} */ + buildType: "development", // Set to 'production' by 'grunt build' + /** @type {int} */ + debugLevel: 2, // Set to 1 by 'grunt build' + // Used by $.ui.fancytree.debug() and as default for tree.options.debugLevel - _nextId: 1, - _nextNodeKey: 1, - _extensions: {}, - // focusTree: null, + _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) - }, - /** Throw an error if condition fails (debug method). - * @param {boolean} cond - * @param {string} msg - */ - assert: function(cond, msg){ - return _assert(cond, msg); - }, - /** Return a function that executes *fn* at most every *timeout* ms. - * @param {integer} timeout - * @param {function} fn - * @param {boolean} [invokeAsap=false] - * @param {any} [ctx] - */ - debounce : function(timeout, fn, invokeAsap, ctx) { - var timer; - if(arguments.length === 3 && typeof invokeAsap !== "boolean") { - ctx = invokeAsap; - invokeAsap = false; - } - return function() { - var args = arguments; - ctx = ctx || this; - invokeAsap && !timer && fn.apply(ctx, args); - clearTimeout(timer); - timer = setTimeout(function() { - invokeAsap || fn.apply(ctx, args); - timer = null; - }, timeout); - }; - }, - /** Write message to console if debugLevel >= 2 - * @param {string} msg - */ - debug: function(msg){ - /*jshint expr:true */ - ($.ui.fancytree.debugLevel >= 2) && consoleApply("log", arguments); - }, - /** Write error message to console. - * @param {string} msg - */ - error: function(msg){ - consoleApply("error", arguments); - }, - /** Convert <, >, &, ", ', / to the equivalent entitites. - * - * @param {string} s - * @returns {string} - */ - escapeHtml: function(s){ - return ("" + s).replace(/[&<>"'\/]/g, function (s) { - return ENTITY_MAP[s]; - }); - }, - /** Inverse of escapeHtml(). - * - * @param {string} s - * @returns {string} - */ - unescapeHtml: function(s){ - var e = document.createElement("div"); - e.innerHTML = s; - return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; - }, - /** Return a {node: FancytreeNode, type: TYPE} object for a mouse event. - * - * @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}; - // We use a fast version of $(res.node).hasClass() - // See http://jsperf.com/test-for-classname/2 - if( /\bfancytree-title\b/.test(tcn) ){ - res.type = "title"; - }else if( /\bfancytree-expander\b/.test(tcn) ){ - res.type = (res.node.hasChildren() === false ? "prefix" : "expander"); - }else if( /\bfancytree-checkbox\b/.test(tcn) || /\bfancytree-radio\b/.test(tcn) ){ - res.type = "checkbox"; - }else if( /\bfancytree-icon\b/.test(tcn) ){ - res.type = "icon"; - }else if( /\bfancytree-node\b/.test(tcn) ){ - // Somewhere near the title - res.type = "title"; - }else if( event && event.target && $(event.target).closest(".fancytree-title").length ) { - // #228: clicking an embedded element inside a title - 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; - }, - */ - /** Write message to console if debugLevel >= 1 - * @param {string} msg - */ - info: function(msg){ - /*jshint expr:true */ - ($.ui.fancytree.debugLevel >= 1) && consoleApply("info", arguments); - }, - /** - * Parse tree data from HTML- markup
- *
- * @param {jQueryObject} $ul
- * @returns {NodeData[]}
- */
- parseHtml: function($ul) {
- // TODO: understand this:
- /*jshint validthis:true */
- var extraClasses, i, l, iPos, tmp, tmp2, classes, className,
- $children = $ul.find(">li"),
- children = [];
+ /** 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)
+ },
+ /** Throw an error if condition fails (debug method).
+ * @param {boolean} cond
+ * @param {string} msg
+ */
+ assert: function(cond, msg){
+ return _assert(cond, msg);
+ },
+ /** Return a function that executes *fn* at most every *timeout* ms.
+ * @param {integer} timeout
+ * @param {function} fn
+ * @param {boolean} [invokeAsap=false]
+ * @param {any} [ctx]
+ */
+ debounce : function(timeout, fn, invokeAsap, ctx) {
+ var timer;
+ if(arguments.length === 3 && typeof invokeAsap !== "boolean") {
+ ctx = invokeAsap;
+ invokeAsap = false;
+ }
+ return function() {
+ var args = arguments;
+ ctx = ctx || this;
+ invokeAsap && !timer && fn.apply(ctx, args);
+ clearTimeout(timer);
+ timer = setTimeout(function() {
+ invokeAsap || fn.apply(ctx, args);
+ timer = null;
+ }, timeout);
+ };
+ },
+ /** Write message to console if debugLevel >= 2
+ * @param {string} msg
+ */
+ debug: function(msg){
+ /*jshint expr:true */
+ ($.ui.fancytree.debugLevel >= 2) && consoleApply("log", arguments);
+ },
+ /** Write error message to console.
+ * @param {string} msg
+ */
+ error: function(msg){
+ consoleApply("error", arguments);
+ },
+ /** Convert <, >, &, ", ', / to the equivalent entitites.
+ *
+ * @param {string} s
+ * @returns {string}
+ */
+ escapeHtml: function(s){
+ return ("" + s).replace(/[&<>"'\/]/g, function (s) {
+ return ENTITY_MAP[s];
+ });
+ },
+ /** Inverse of escapeHtml().
+ *
+ * @param {string} s
+ * @returns {string}
+ */
+ unescapeHtml: function(s){
+ var e = document.createElement("div");
+ e.innerHTML = s;
+ return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+ },
+ /** Return a {node: FancytreeNode, type: TYPE} object for a mouse event.
+ *
+ * @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};
+ // We use a fast version of $(res.node).hasClass()
+ // See http://jsperf.com/test-for-classname/2
+ if( /\bfancytree-title\b/.test(tcn) ){
+ res.type = "title";
+ }else if( /\bfancytree-expander\b/.test(tcn) ){
+ res.type = (res.node.hasChildren() === false ? "prefix" : "expander");
+ }else if( /\bfancytree-checkbox\b/.test(tcn) || /\bfancytree-radio\b/.test(tcn) ){
+ res.type = "checkbox";
+ }else if( /\bfancytree-icon\b/.test(tcn) ){
+ res.type = "icon";
+ }else if( /\bfancytree-node\b/.test(tcn) ){
+ // Somewhere near the title
+ res.type = "title";
+ }else if( event && event.target && $(event.target).closest(".fancytree-title").length ) {
+ // #228: clicking an embedded element inside a title
+ 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;
+ },
+ */
+ /** Write message to console if debugLevel >= 1
+ * @param {string} msg
+ */
+ info: function(msg){
+ /*jshint expr:true */
+ ($.ui.fancytree.debugLevel >= 1) && consoleApply("info", arguments);
+ },
+ /**
+ * Parse tree data from HTML
- 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( $liA && $liA.length ) {
+ // If 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
- tag is specified, use the trimmed string up to - // the next child
- tag.
- d.title = $li.html();
- iPos = d.title.search(/
- tag is specified, use the trimmed string up to
+ // the next child
- tag.
+ d.title = $li.html();
+ iPos = d.title.search(/
- as node.data.NAME
- allData = _getElementDataAsDict($li);
- if(allData && !$.isEmptyObject(allData)) {
- // #56: Allow to set special node.attributes from data-...
- for(i=0, l=NODE_ATTRS.length; i
- as node.data.NAME + allData = _getElementDataAsDict($li); + if(allData && !$.isEmptyObject(allData)) { + // #56: Allow to set special node.attributes from data-... + for(i=0, l=NODE_ATTRS.length; i
- as node.data.NAME + allData = _getElementDataAsDict($li); + if(allData && !$.isEmptyObject(allData)) { + // #56: Allow to set special node.attributes from data-... + for(i=0, l=NODE_ATTRS.length; i
- = 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
- as node.data.NAME
- allData = _getElementDataAsDict($li);
- if(allData && !$.isEmptyObject(allData)) {
- // #56: Allow to set special node.attributes from data-...
- for(i=0, l=NODE_ATTRS.length; i
- = 0 ){
- d.title = d.title.substring(0, iPos);
- }
- }
- d.title = $.trim(d.title);
+ } else {
+ // If only 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
- markup
+ *
+ * @param {jQueryObject} $ul
+ * @returns {NodeData[]}
+ */
+ parseHtml: function($ul) {
+ // TODO: understand this:
+ /*jshint validthis:true */
+ var extraClasses, i, l, iPos, tmp, tmp2, classes, className,
+ $children = $ul.find(">li"),
+ children = [];
- $children.each(function() {
- var allData,
- $li = $(this),
- $liSpan = $li.find(">span:first", this),
- $liA = $liSpan.length ? null : $li.find(">a:first"),
- d = { tooltip: null, data: {} };
+ $children.each(function() {
+ var allData,
+ $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();
+ if( $liSpan.length ) {
+ d.title = $liSpan.html();
- } else if( $liA && $liA.length ) {
- // If a
- order matches node.children order. + childLI = node.ul.firstChild; + for(i=0, l=children.length-1; i
- tag yet:
// if( !targetParent.ul ) {
// // This is the parent's first child: create UL tag
// // (Hidden, because it will be
@@ -1129,1571 +1129,1571 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
// 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
+ // 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);
- }
+ this.warn("Cross-tree moveTo is experimantal!");
+ this.visit(function(n){
+ // TODO: fix selection state and activation, ...
+ n.tree = targetNode.tree;
+ }, true);
+ }
- // A collaposed node won't re-render children, so we have to remove it manually
- // if( !targetParent.expanded ){
- // prevParent.ul.removeChild(this.li);
- // }
+ // A collaposed node won't re-render children, so we have to remove it manually
+ // if( !targetParent.expanded ){
+ // prevParent.ul.removeChild(this.li);
+ // }
- // 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
+ // 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;
+ /*
+ 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;
- }
+ // 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
- // DT 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
+ // DT 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();
+ // 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;
+ return ftnode;
-*/
- },
- /** Set focus relative to this node and optionally activate.
- *
- * @param {number} where The keyCode that would normally trigger this move,
- * e.g. `$.ui.keyCode.LEFT` would collapse the node if it
- * is expanded or move to the parent oterwise.
- * @param {boolean} [activate=true]
- * @returns {$.Promise}
- */
- navigate: function(where, activate) {
- var i, parents,
- handled = true,
- KC = $.ui.keyCode,
- sib = null;
+ */
+ },
+ /** Set focus relative to this node and optionally activate.
+ *
+ * @param {number} where The keyCode that would normally trigger this move,
+ * e.g. `$.ui.keyCode.LEFT` would collapse the node if it
+ * is expanded or move to the parent oterwise.
+ * @param {boolean} [activate=true]
+ * @returns {$.Promise}
+ */
+ navigate: function(where, activate) {
+ var i, parents,
+ handled = true,
+ KC = $.ui.keyCode,
+ sib = null;
- // Navigate to node
- function _goto(n){
- if( n ){
- try { n.makeVisible(); } catch(e) {} // #272
- // Node may still be hidden by a filter
- if( ! $(n.span).is(":visible") ) {
- n.debug("Navigate: skipping hidden node");
- n.navigate(where, activate);
- return;
- }
- return activate === false ? n.setFocus() : n.setActive();
- }
- }
+ // Navigate to node
+ function _goto(n){
+ if( n ){
+ try { n.makeVisible(); } catch(e) {} // #272
+ // Node may still be hidden by a filter
+ if( ! $(n.span).is(":visible") ) {
+ n.debug("Navigate: skipping hidden node");
+ n.navigate(where, activate);
+ return;
+ }
+ return activate === false ? n.setFocus() : n.setActive();
+ }
+ }
- switch( where ) {
- case KC.BACKSPACE:
- if( this.parent && this.parent.parent ) {
- _goto(this.parent);
- }
- break;
- case KC.LEFT:
- if( this.expanded ) {
- this.setExpanded(false);
- _goto(this);
- } else if( this.parent && this.parent.parent ) {
- _goto(this.parent);
- }
- break;
- case KC.RIGHT:
- if( !this.expanded && (this.children || this.lazy) ) {
- this.setExpanded();
- _goto(this);
- } else if( this.children && this.children.length ) {
- _goto(this.children[0]);
- }
- break;
- case KC.UP:
- sib = this.getPrevSibling();
- while( sib && sib.expanded && sib.children && sib.children.length ){
- sib = sib.children[sib.children.length - 1];
- }
- if( !sib && this.parent && this.parent.parent ){
- sib = this.parent;
- }
- _goto(sib);
- break;
- case KC.DOWN:
- if( this.expanded && this.children && this.children.length ) {
- sib = this.children[0];
- } else {
- parents = this.getParentList(false, true);
- for(i=parents.length-1; i>=0; i--) {
- sib = parents[i].getNextSibling();
- if( sib ){ break; }
- }
- }
- _goto(sib);
- break;
- default:
- handled = false;
- }
- },
- /**
- * Remove this node (not allowed for system root).
- */
- remove: function() {
- return this.parent.removeChild(this);
- },
- /**
- * Remove childNode from list of direct children.
- * @param {FancytreeNode} childNode
- */
- removeChild: function(childNode) {
- return this.tree._callHook("nodeRemoveChild", this, childNode);
- },
- /**
- * Remove all child nodes and descendents. This converts the node into a leaf.
- * If this was a lazy node, it is still considered 'loaded'; call node.resetLazy() - * in order to trigger lazyLoad on next expand. - */ - removeChildren: function() { - return this.tree._callHook("nodeRemoveChildren", this); - }, - /** - * This method renders and updates all HTML markup that is required - * to display this node in its current state.
- * Note: - *
-
- *
+ * If this was a lazy node, it is still considered 'loaded'; call node.resetLazy() + * in order to trigger lazyLoad on next expand. + */ + removeChildren: function() { + return this.tree._callHook("nodeRemoveChildren", this); + }, + /** + * This method renders and updates all HTML markup that is required + * to display this node in its current state.
+ * Note: + *
-
+ *
- * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".
- * Return false if iteration was stopped. - * - * @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} - */ - visit: function(fn, includeSelf) { - var i, l, - res = true, - children = this.children; + } + } + 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 "
+ * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".
+ * Return false if iteration was stopped. + * + * @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} + */ + 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
- * Return false if iteration was stopped. - * - * @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} - */ - 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); - } -}; + if( includeSelf === true ) { + res = fn(this); + if( res === false || res === "skip" ){ + return res; + } + } + if(children){ + for(i=0, l=children.length; i
+ * Return false if iteration was stopped. + * + * @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} + */ + 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 object. - * - * @class Fancytree - * @classdesc The controller behind a fancytree. - * This class also contains 'hook methods': see {@link Fancytree_Hooks}. - * - * @param {Widget} widget - * - * @property {FancytreeOptions} options - * @property {FancytreeNode} rootNode - * @property {FancytreeNode} activeNode - * @property {FancytreeNode} focusNode - * @property {jQueryObject} $div - * @property {object} widget - * @property {object} ext - * @property {object} data - * @property {object} options - * @property {string} _id - * @property {string} statusClassPropName - * @property {string} ariaPropName - * @property {string} nodeContainerAttrName - * @property {string} $container - * @property {FancytreeNode} lastSelectedNode - */ -function Fancytree(widget) { - this.widget = widget; - this.$div = widget.element; - this.options = widget.options; - if( this.options && $.isFunction(this.options.lazyload) ) { - if( ! $.isFunction(this.options.lazyLoad ) ) { - this.options.lazyLoad = function() { - FT.warn("The 'lazyload' event is deprecated since 2014-02-25. Use 'lazyLoad' (with uppercase L) instead."); - widget.options.lazyload.apply(this, arguments); - }; - } - } - if( this.options && $.isFunction(this.options.loaderror) ) { - $.error("The 'loaderror' event was renamed since 2014-07-03. Use 'loadError' (with uppercase E) instead."); - } - this.ext = {}; // Active extension instances - // allow to init tree.data.foo from
- this.data = _getElementDataAsDict(this.$div);
- this._id = $.ui.fancytree._nextId++;
- this._ns = ".fancytree-" + this._id; // append for namespaced events
- this.activeNode = null;
- this.focusNode = null;
- this._hasFocus = null;
- this.lastSelectedNode = null;
- this.systemFocusElement = null;
+ /* *****************************************************************************
+ * Fancytree
+ */
+ /**
+ * Construct a new tree object.
+ *
+ * @class Fancytree
+ * @classdesc The controller behind a fancytree.
+ * This class also contains 'hook methods': see {@link Fancytree_Hooks}.
+ *
+ * @param {Widget} widget
+ *
+ * @property {FancytreeOptions} options
+ * @property {FancytreeNode} rootNode
+ * @property {FancytreeNode} activeNode
+ * @property {FancytreeNode} focusNode
+ * @property {jQueryObject} $div
+ * @property {object} widget
+ * @property {object} ext
+ * @property {object} data
+ * @property {object} options
+ * @property {string} _id
+ * @property {string} statusClassPropName
+ * @property {string} ariaPropName
+ * @property {string} nodeContainerAttrName
+ * @property {string} $container
+ * @property {FancytreeNode} lastSelectedNode
+ */
+ function Fancytree(widget) {
+ this.widget = widget;
+ this.$div = widget.element;
+ this.options = widget.options;
+ if( this.options && $.isFunction(this.options.lazyload) ) {
+ if( ! $.isFunction(this.options.lazyLoad ) ) {
+ this.options.lazyLoad = function() {
+ FT.warn("The 'lazyload' event is deprecated since 2014-02-25. Use 'lazyLoad' (with uppercase L) instead.");
+ widget.options.lazyload.apply(this, arguments);
+ };
+ }
+ }
+ if( this.options && $.isFunction(this.options.loaderror) ) {
+ $.error("The 'loaderror' event was renamed since 2014-07-03. Use 'loadError' (with uppercase E) instead.");
+ }
+ this.ext = {}; // Active extension instances
+ // allow to init tree.data.foo from
+ this.data = _getElementDataAsDict(this.$div);
+ this._id = $.ui.fancytree._nextId++;
+ this._ns = ".fancytree-" + this._id; // append for namespaced events
+ this.activeNode = null;
+ this.focusNode = null;
+ this._hasFocus = null;
+ this.lastSelectedNode = null;
+ this.systemFocusElement = null;
- this.statusClassPropName = "span";
- this.ariaPropName = "li";
- this.nodeContainerAttrName = "li";
+ this.statusClassPropName = "span";
+ this.ariaPropName = "li";
+ this.nodeContainerAttrName = "li";
- // Remove previous markup if any
- this.$div.find(">ul.fancytree-container").remove();
+ // 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,
- expanded: true
- });
- this.rootNode.parent = null;
+ // Create a node without parent.
+ var fakeParent = { tree: this },
+ $ul;
+ this.rootNode = new FancytreeNode(fakeParent, {
+ title: "root",
+ key: "root_" + this._id,
+ children: null,
+ expanded: true
+ });
+ this.rootNode.parent = null;
- // Create root markup
- $ul = $("
- ", {
- "class": "ui-fancytree fancytree-container"
- }).appendTo(this.$div);
- this.$container = $ul;
- this.rootNode.ul = $ul[0];
+ // Create root markup
+ $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
- this.$container.attr("tabindex", this.options.tabbable ? "0" : "-1");
- if(this.options.aria){
- this.$container
- .attr("role", "tree")
- .attr("aria-multiselectable", true);
- }
-}
+ 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
+ this.$container.attr("tabindex", this.options.tabbable ? "0" : "-1");
+ 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
- * @param {Object} extra
- * @returns {EventData}
- */
- _makeHookContext: function(obj, originalEvent, extra) {
- var ctx, tree;
- if(obj.node !== undefined){
- // obj is already a context object
- if(originalEvent && obj.originalEvent !== originalEvent){
- $.error("invalid args");
- }
- ctx = obj;
- }else if(obj.tree){
- // obj is a FancytreeNode
- tree = obj.tree;
- ctx = { node: obj, tree: tree, widget: tree.widget, options: tree.widget.options, originalEvent: originalEvent };
- }else if(obj.widget){
- // obj is a Fancytree
- ctx = { node: null, tree: obj, widget: obj.widget, options: obj.widget.options, originalEvent: originalEvent };
- }else{
- $.error("invalid args");
- }
- if(extra){
- $.extend(ctx, extra);
- }
- return ctx;
- },
- /* 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);
+ Fancytree.prototype = /** @lends Fancytree# */{
+ /* Return a context object that can be re-used for _callHook().
+ * @param {Fancytree | FancytreeNode | EventData} obj
+ * @param {Event} originalEvent
+ * @param {Object} extra
+ * @returns {EventData}
+ */
+ _makeHookContext: function(obj, originalEvent, extra) {
+ var ctx, tree;
+ if(obj.node !== undefined){
+ // obj is already a context object
+ if(originalEvent && obj.originalEvent !== originalEvent){
+ $.error("invalid args");
+ }
+ ctx = obj;
+ }else if(obj.tree){
+ // obj is a FancytreeNode
+ tree = obj.tree;
+ ctx = { node: obj, tree: tree, widget: tree.widget, options: tree.widget.options, originalEvent: originalEvent };
+ }else if(obj.widget){
+ // obj is a Fancytree
+ ctx = { node: null, tree: obj, widget: obj.widget, options: obj.widget.options, originalEvent: originalEvent };
+ }else{
+ $.error("invalid args");
+ }
+ if(extra){
+ $.extend(ctx, extra);
+ }
+ return ctx;
+ },
+ /* 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);
- },
- /* Check if current extensions dependencies are met and throw an error if not.
- *
- * This method may be called inside the `treeInit` hook for custom extensions.
- *
- * @param {string} extension name of the required extension
- * @param {boolean} [required=true] pass `false` if the extension is optional, but we want to check for order if it is present
- * @param {boolean} [before] `true` if `name` must be included before this, `false` otherwise (use `null` if order doesn't matter)
- * @param {string} [message] optional error message (defaults to a descriptve error message)
- */
- _requireExtension: function(name, required, before, message) {
- before = !!before;
- var thisName = this._local.name,
- extList = this.options.extensions,
- isBefore = $.inArray(name, extList) < $.inArray(thisName, extList),
- isMissing = required && this.ext[name] == null,
- badOrder = !isMissing && before != null && (before !== isBefore);
+ return fn.apply(this, args);
+ },
+ /* Check if current extensions dependencies are met and throw an error if not.
+ *
+ * This method may be called inside the `treeInit` hook for custom extensions.
+ *
+ * @param {string} extension name of the required extension
+ * @param {boolean} [required=true] pass `false` if the extension is optional, but we want to check for order if it is present
+ * @param {boolean} [before] `true` if `name` must be included before this, `false` otherwise (use `null` if order doesn't matter)
+ * @param {string} [message] optional error message (defaults to a descriptve error message)
+ */
+ _requireExtension: function(name, required, before, message) {
+ before = !!before;
+ var thisName = this._local.name,
+ extList = this.options.extensions,
+ isBefore = $.inArray(name, extList) < $.inArray(thisName, extList),
+ isMissing = required && this.ext[name] == null,
+ badOrder = !isMissing && before != null && (before !== isBefore);
- _assert(thisName && thisName !== name);
+ _assert(thisName && thisName !== name);
- if( isMissing || badOrder ){
- if( !message ){
- if( isMissing || required ){
- message = "'" + thisName + "' extension requires '" + name + "'";
- if( badOrder ){
- message += " to be registered " + (before ? "before" : "after") + " itself";
- }
- }else{
- message = "If used together, `" + name + "` must be registered " + (before ? "before" : "after") + " `" + thisName + "`";
- }
- }
- $.error(message);
- return false;
- }
- return true;
- },
- /** Activate node with a given key and fire focus and activate events.
- *
- * A prevously activated node will be deactivated.
- * If activeVisible option is set, all parents will be expanded as necessary.
- * 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;
- },
- /** (experimental)
- *
- * @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 = [];
+ if( isMissing || badOrder ){
+ if( !message ){
+ if( isMissing || required ){
+ message = "'" + thisName + "' extension requires '" + name + "'";
+ if( badOrder ){
+ message += " to be registered " + (before ? "before" : "after") + " itself";
+ }
+ }else{
+ message = "If used together, `" + name + "` must be registered " + (before ? "before" : "after") + " `" + thisName + "`";
+ }
+ }
+ $.error(message);
+ return false;
+ }
+ return true;
+ },
+ /** Activate node with a given key and fire focus and activate events.
+ *
+ * A prevously activated node will be deactivated.
+ * If activeVisible option is set, all parents will be expanded as necessary.
+ * 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;
+ },
+ /** (experimental)
+ *
+ * @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
", {
- id: id
- }).hide().insertAfter(this.$container);
- }
- if(selectedName){
- nodeList = this.getSelectedNodes( this.options.selectMode === 3 );
- $.each(nodeList, function(idx, node){
- $result.append($("", {
- type: "checkbox",
- name: selectedName,
- value: node.key,
- checked: true
- }));
- });
- }
- if(activeName && this.activeNode){
- $result.append($("", {
- type: "radio",
- name: activeName,
- value: this.activeNode.key,
- checked: true
- }));
- }
- },
- /**
- * Return the currently active node or null.
- * @returns {FancytreeNode}
- */
- getActiveNode: function() {
- return this.activeNode;
- },
- /** Return the first top level node if any (not the invisible root node).
- * @returns {FancytreeNode | null}
- */
- getFirstChild: function() {
- return this.rootNode.getFirstChild();
- },
- /**
- * Return node that has keyboard focus.
- * @param {boolean} [ifTreeHasFocus=false] (not yet implemented)
- * @returns {FancytreeNode}
- */
- getFocusNode: function(ifTreeHasFocus) {
- // TODO: implement ifTreeHasFocus
- return this.focusNode;
- },
- /**
- * Return node with a given key or null if not found.
- * @param {string} key
- * @param {FancytreeNode} [searchRoot] only search below this node
- * @returns {FancytreeNode | null}
- */
- 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){
+ if($result.length){
+ $result.empty();
+ }else{
+ $result = $("
", {
+ id: id
+ }).hide().insertAfter(this.$container);
+ }
+ if(selectedName){
+ nodeList = this.getSelectedNodes( this.options.selectMode === 3 );
+ $.each(nodeList, function(idx, node){
+ $result.append($("", {
+ type: "checkbox",
+ name: selectedName,
+ value: node.key,
+ checked: true
+ }));
+ });
+ }
+ if(activeName && this.activeNode){
+ $result.append($("", {
+ type: "radio",
+ name: activeName,
+ value: this.activeNode.key,
+ checked: true
+ }));
+ }
+ },
+ /**
+ * Return the currently active node or null.
+ * @returns {FancytreeNode}
+ */
+ getActiveNode: function() {
+ return this.activeNode;
+ },
+ /** Return the first top level node if any (not the invisible root node).
+ * @returns {FancytreeNode | null}
+ */
+ getFirstChild: function() {
+ return this.rootNode.getFirstChild();
+ },
+ /**
+ * Return node that has keyboard focus.
+ * @param {boolean} [ifTreeHasFocus=false] (not yet implemented)
+ * @returns {FancytreeNode}
+ */
+ getFocusNode: function(ifTreeHasFocus) {
+ // TODO: implement ifTreeHasFocus
+ return this.focusNode;
+ },
+ /**
+ * Return node with a given key or null if not found.
+ * @param {string} key
+ * @param {FancytreeNode} [searchRoot] only search below this node
+ * @returns {FancytreeNode | null}
+ */
+ 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;
- },
- /** Return the invisible system root node.
- * @returns {FancytreeNode}
- */
- getRootNode: function() {
- return this.rootNode;
- },
- /**
- * Return an array 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;
- },
- /** Return true if the tree control has keyboard focus
- * @returns {boolean}
- */
- hasFocus: function(){
- return !!this._hasFocus;
- },
- /** Write to browser console if debugLevel >= 1 (prepending tree name)
- * @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" );
- },
-*/
+ if(node.key === key) {
+ match = node;
+ return false;
+ }
+ }, true);
+ return match;
+ },
+ /** Return the invisible system root node.
+ * @returns {FancytreeNode}
+ */
+ getRootNode: function() {
+ return this.rootNode;
+ },
+ /**
+ * Return an array 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;
+ },
+ /** Return true if the tree control has keyboard focus
+ * @returns {boolean}
+ */
+ hasFocus: function(){
+ return !!this._hasFocus;
+ },
+ /** Write to browser console if debugLevel >= 1 (prepending tree name)
+ * @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" );
+ },
+ */
- /**
- * Make sure that a node with a given ID is loaded, by traversing - and
- * loading - its parents. This method is ment for lazy hierarchies.
- * A callback is executed for every node as we go.
- * @example
- * tree.loadKeyPath("/_3/_23/_26/_27", function(node, status){
+ /**
+ * Make sure that a node with a given ID is loaded, by traversing - and
+ * loading - its parents. This method is ment for lazy hierarchies.
+ * A callback is executed for every node as we go.
+ * @example
+ * tree.loadKeyPath("/_3/_23/_26/_27", function(node, status){
* if(status === "loaded") {
* console.log("loaded intermiediate node " + node);
* }else if(status === "ok") {
* node.activate();
* }
* });
- *
- * @param {string | string[]} keyPathList one or more key paths (e.g. '/3/2_1/7')
- * @param {function} callback callback(node, status) is called for every visited node ('loading', 'loaded', 'ok', 'error')
- * @returns {$.Promise}
- */
- loadKeyPath: function(keyPathList, callback, _rootNode) {
- var deferredList, dfd, i, path, key, loadMap, node, segList,
- root = _rootNode || this.rootNode,
- sep = this.options.keyPathSeparator,
- self = this;
+ *
+ * @param {string | string[]} keyPathList one or more key paths (e.g. '/3/2_1/7')
+ * @param {function} callback callback(node, status) is called for every visited node ('loading', 'loaded', 'ok', 'error')
+ * @returns {$.Promise}
+ */
+ 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 = {};
+ 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";
- },
- /* _trigger a widget event with additional node ctx.
- * @see EventData
- */
- _triggerNodeEvent: function(type, node, originalEvent, extra) {
+ 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();
+ },
+ /** 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();
+ }
+ }
+ },
+ /** Reload tree from source and return a promise.
+ * @param [source] optional new source (defaults to initial source data)
+ * @returns {$.Promise}
+ */
+ reload: function(source) {
+ this._callHook("treeClear", this);
+ return this._callHook("treeLoad", this, source);
+ },
+ /**Render tree (i.e. create DOM elements for all top-level nodes).
+ * @param {boolean} [force=false] create DOM elemnts, even is parent is collapsed
+ * @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) {
+ 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 its children)
+ * @param {function} [callback(node)] 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 "";
+ },
+ /* _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 ctx = this._makeHookContext(node, originalEvent, 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) {
+ var ctx = this._makeHookContext(node, originalEvent, 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);
+ var ctx = this._makeHookContext(this, originalEvent),
+ res = this.widget._trigger(type, originalEvent, ctx);
- if(res !== false && ctx.result !== undefined){
- return ctx.result;
- }
- return res;
- },
- /** Call fn(node) for all nodes.
- *
- * @param {function} fn the callback function.
- * Return false to stop iteration, return "skip" to skip this node and children only.
- * @returns {boolean} false, if the iterator was stopped.
- */
- 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);
- }
-};
+ if(res !== false && ctx.result !== undefined){
+ return ctx.result;
+ }
+ return res;
+ },
+ /** Call fn(node) for all nodes.
+ *
+ * @param {function} fn the callback function.
+ * Return false to stop iteration, return "skip" to skip this node and children only.
+ * @returns {boolean} false, if the iterator was stopped.
+ */
+ 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);
+ }
+ };
-/**
- * These additional methods of the {@link Fancytree} class are 'hook functions'
- * that can be used and overloaded by extensions.
- * (See writing extensions.)
- * @mixin Fancytree_Hooks
- */
-$.extend(Fancytree.prototype,
- /** @lends Fancytree_Hooks# */
- {
- /** Default handling for mouse click events.
- *
- * @param {EventData} ctx
- */
- nodeClick: function(ctx) {
+ /**
+ * These additional methods of the {@link Fancytree} class are 'hook functions'
+ * that can be used and overloaded by extensions.
+ * (See writing extensions.)
+ * @mixin Fancytree_Hooks
+ */
+ $.extend(Fancytree.prototype,
+ /** @lends Fancytree_Hooks# */
+ {
+ /** Default handling for mouse click events.
+ *
+ * @param {EventData} ctx
+ */
+ 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;
+ var activate, expand,
+ event = ctx.originalEvent,
+ targetType = ctx.targetType,
+ node = ctx.node;
- // TODO: use switch
- // TODO: make sure clicks on embedded doesn't steal focus (see table sample)
- if( targetType === "expander" ) {
- // Clicking the expander icon always expands/collapses
- this._callHook("nodeToggleExpanded", ctx);
+ // TODO: use switch
+ // TODO: make sure clicks on embedded 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); // DT issue 95
- } else if( targetType === "checkbox" ) {
- // Clicking the checkbox always (de)selects
- this._callHook("nodeToggleSelected", ctx);
- this._callHook("nodeSetFocus", ctx, true); // DT 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){
+ } else if( targetType === "checkbox" ) {
+ // Clicking the checkbox always (de)selects
+ this._callHook("nodeToggleSelected", ctx);
+ this._callHook("nodeSetFocus", ctx, true); // DT 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 jumps to the top
- if(event.target.localName === "a" && event.target.className === "fancytree-title"){
- event.preventDefault();
- }
- // TODO: return promise?
- },
- /** Collapse all other children of same parent.
- *
- * @param {EventData} ctx
- * @param {object} callOpts
- */
- nodeCollapseSiblings: function(ctx, callOpts) {
- // TODO: return promise?
- var ac, i, l,
- node = ctx.node;
+ this._callHook("nodeToggleExpanded", ctx);
+ }
+ }
+ // Make sure that clicks stop, otherwise jumps to the top
+ if(event.target.localName === "a" && event.target.className === "fancytree-title"){
+ event.preventDefault();
+ }
+ // TODO: return promise?
+ },
+ /** Collapse all other children of same parent.
+ *
+ * @param {EventData} ctx
+ * @param {object} callOpts
+ */
+ nodeCollapseSiblings: function(ctx, callOpts) {
+ // TODO: return promise?
+ var ac, i, l,
+ node = ctx.node;
- if( node.parent ){
- ac = node.parent.children;
- for (i=0, l=ac.length; i= 0);
- // Unlink to support GC
- childNode.visit(function(n){
- n.parent = null;
- }, true);
- this._callHook("treeRegisterNode", this, false, childNode);
- 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;
+ 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);
+ this._callHook("treeRegisterNode", this, false, childNode);
+ 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){
- if( node.isRoot() ) {
- $(node.ul).empty();
- } else {
- $(node.ul).remove();
- node.ul = null;
- }
- node.visit(function(n){
- n.li = n.ul = null;
- });
- }
- },
- /**Remove all descendants of ctx.node.
- * @param {EventData} ctx
- */
- nodeRemoveChildren: function(ctx) {
- var subCtx,
- tree = ctx.tree,
- node = ctx.node,
- children = node.children,
- opts = ctx.options;
+ // FT.debug("nodeRemoveChildMarkup()", node.toString());
+ // TODO: Unlink attr.ftnode to support GC
+ if(node.ul){
+ if( node.isRoot() ) {
+ $(node.ul).empty();
+ } else {
+ $(node.ul).remove();
+ node.ul = null;
+ }
+ node.visit(function(n){
+ n.li = n.ul = null;
+ });
+ }
+ },
+ /**Remove all descendants of ctx.node.
+ * @param {EventData} ctx
+ */
+ nodeRemoveChildren: function(ctx) {
+ var subCtx,
+ tree = ctx.tree,
+ 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;
- tree._callHook("treeRegisterNode", tree, false, n);
- if ( opts.removeNode ){
- subCtx.node = n;
- opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
- }
- });
- if( node.lazy ){
- // 'undefined' would be interpreted as 'not yet loaded' for lazy nodes
- node.children = [];
- } else{
- node.children = null;
- }
- 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.
- *
- *
- *
- * @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, next, 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());
+ // 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;
+ tree._callHook("treeRegisterNode", tree, false, n);
+ if ( opts.removeNode ){
+ subCtx.node = n;
+ opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
+ }
+ });
+ if( node.lazy ){
+ // 'undefined' would be interpreted as 'not yet loaded' for lazy nodes
+ node.children = [];
+ } else{
+ node.children = null;
+ }
+ 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.
+ *
+ *
+ *
+ * @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, next, 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());
- if( ! isRootNode && ! parent.ul ) {
- // Calling node.collapse on a deep, unrendered node
- return;
- }
- _assert(isRootNode || parent.ul, "parent UL must exist");
+ if( ! isRootNode && ! parent.ul ) {
+ // Calling node.collapse on a deep, unrendered node
+ return;
+ }
+ _assert(isRootNode || parent.ul, "parent UL must exist");
// if(node.li && (force || (node.li.parentNode !== node.parent.ul) ) ){
// if(node.li.parentNode !== node.parent.ul){
@@ -2703,1409 +2703,1412 @@ $.extend(Fancytree.prototype,
// // this.debug("nodeRemoveMarkup...");
// this.nodeRemoveMarkup(ctx);
// }
- // Render the node
- if( !isRootNode ){
- // Discard markup on force-mode, or if it is not linked to parent -
- if(node.li && (force || (node.li.parentNode !== node.parent.ul) ) ){
- if(node.li.parentNode !== node.parent.ul){
+ // Render the node
+ if( !isRootNode ){
+ // Discard markup on force-mode, or if it is not linked to parent
-
+ 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.warn("unlink " + node + " (must be child of " + node.parent + ")");
+ }
// this.debug("nodeRemoveMarkup...");
- this.nodeRemoveMarkup(ctx);
- }
- // Create