Closed
Description
I am not an experience github user, so I have put this feature request here. I have many different sorts of nodes on the organisational tree that I am coding, so using the tooltip to describe the meaning of the custom icon for that type of node would be useful. I have hacked the code of the fancytree node to do this.
I figured that others may have the same requirement so I have posted the code here. It's quick and dirty 'cause I'm under a deadline. Hope it is useful to someone. It starts after the comment
"//folder or doctype icon"
THIS IS THE EXISTING CODE:
role = aria ? " role='img'" : "";
if ( icon && typeof icon === "string" ) {
imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon);
ares.push("<img src='" + imageSrc + "' class='fancytree-icon' 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){
tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : "";
id = aria ? " id='ftal_" + node.key + "'" : "";
role = aria ? " role='treeitem'" : "";
tabindex = opts.titlesTabbable ? " tabindex='0'" : "";
nodeTitle = "<span " + role + " class='fancytree-title'" + id + tooltip + tabindex + ">" + node.title + "</span>";
}
ares.push(nodeTitle);
THIS IS THE MODIFIED CODE:
role = aria ? " role='img'" : "";
if ( icon && typeof icon === "string" ) {
imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon);
_tooltip = node.tooltip || "";_
ares.push("<img src='" + imageSrc + "' " + " title='" + FT.escapeHtml(tooltip) + "' class='fancytree-icon' 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){
//tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : "";
id = aria ? " id='ftal_" + node.key + "'" : "";
role = aria ? " role='treeitem'" : "";
tabindex = opts.titlesTabbable ? " tabindex='0'" : "";
nodeTitle = "<span " + role + " class='fancytree-title'" + id + tabindex + ">" + node.title + "</span>";
}
ares.push(nodeTitle);