Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move tooltip to icon #624

Closed
davaus opened this issue Aug 9, 2016 · 1 comment
Closed

Move tooltip to icon #624

davaus opened this issue Aug 9, 2016 · 1 comment
Labels

Comments

@davaus
Copy link

davaus commented Aug 9, 2016

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);
@mar10
Copy link
Owner

mar10 commented Aug 9, 2016

I can't see any difference, did you forget to paste your changes?
edit:: sorry, I found it :-)

This issue tracker is for bug reports and feature requests.
Modifying the source code is discouraged, since it will become a nightmare for users to maintain, if they update Fancytree to a new version. But maybe you can describe your suggestions and requirements, so it may become a feature request here.

I think, you change is a bit too special for a common feature, since it does not cover the case that users may want to have different icons for label an title, etc..
The suggested way to tweak the html markup is using a callback, for example enhanceCalback().

Otherwise: Questions or hints can be posted in the forum.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants