Font Awesome 5 expander icons do not change when clicked.

[bindrid]

I am using Font Awesome 5 in Script mode ( http://fontawesome.com/get-started/svg-with-js ).

In doing so, the script replaces the span node with a SVG node so I end up with HTML that looks like:

<span class="fancytree-node fancytree-folder fancytree-has-children fancytree-unselectable fancytree-exp-c fancytree-ico-cf">
    <svg role="img" class="svg-inline--fa fa-plus-square fa-w-14 fancytree-expander" aria-hidden="true" data-prefix="far" data-icon="plus-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">  (rest of the code not needed)

In jquery.fancytree.glyph.js nodeRenderStatus function reads:

span = $span.children("span.fancytree-expander").get(0);

Since the span is converted to SVG, the node is never found so its never updated.

[bindrid]

My fix for this cause a new problem and I was hoping you had an idea how to fix it.

In ext-glyph, I changed all occurrences of
span = $span.children("span.fancytree-expander").get(0);
to
span = $span.children("fancytree-expander").get(0);

in setIcon, I added a call for a function specifically for handling FA5 in script mode:

function setIcon(span, baseClass, opts, type, node) {
    if (span.tagName === "svg" && opts.preset === "awesome5") {
        // fa5 script converts <i> to <svg> so call a specific handler.
        setIconFA5(span, baseClass, opts, type, node);
    }
    else {
    ...

and my FA5 script mode handler:

function setIconFA5(span, baseClass, opts, type, node) {
     var map = opts.map,
		icon = map[type],
        $span = $(span),
        oldPrefix = $span.data("prefix"),
        oldIcon = "fa-" + $span.data("icon");

    // remove old icon
    if (typeof oldIcon === "string") {
        $span.removeClass(oldIcon);
    }

    // add new icon
    if ($.isFunction(icon)) {
        $span.addClass( icon.call(this, span, node));
    }
    else if (typeof icon === "string") {
        $span.addClass(icon);
    }
}

This all works except for the event handlers.
Now, if I click on any field outside the tree, I have to click twice or double click for the expander to work.
If I comment out the icon update ( the call to setIconFA5), the expander works as expected on the first click, but, of course, the icons now do not update.

Any ideas on how I should approach this?

[mar10]

Could you post the code (jsFiddle, CodePen, ...) of what you tried?

[bindrid]

I made to different versions. The first version is what happens when FancyTree is used unedited but the Font Awesome 5 in script mode is used:

https://jsfiddle.net/bindrid/504Lxerd/

This version has the jquery.fancytree.glyph.js inline and edited to handle a callback, and the specialized function for SVG-FA5. I put SGS by each change I made. This is what the Pull request was about until I closed it because of having to click twice on the tree to get the expanders to work after changing focus.

https://jsfiddle.net/bindrid/3umepv0x/75/

[mar10]

Please have a look at the demo example here:
http://wwwendt.de/tech/fancytree/demo/#sample-ext-glyph-svg.html

This approach seems to work, and should be more performant and efficient as well, because the SVG conversion is only done per icon type (not per icon occurrence).

[bindrid]

I am having some of the same issues with your example. My web site has to work with IE 11, Edge and Chrome.
I tried Edge on your example and had some of the same issues where I had to click twice when I click out. Also, with Edge, if I click directly on the arrows, it will not expand or collapse. I have to put the cursor between the arrow and the next icon over.

It works better in Chrome but I still have to put focus back on the tree (first click) then click on the arrow (second click) before something happens. That does not happen with other, non-svg, trees

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mar10]

Creating a new issue for the click-problem

[mar10]

The click problem is followed-up here: #1033