Using variant large doesnt change much and it has very small click areas when using it on a phone

[Viktor Eriksson]

There seem to be two images in the theme folder

32px and 40px.

I thought that when using variant:"large" it would use big icons and bigger hit areas but 

it seems to still be using the 32px image.

The hit area is also not bigger,  when using this on a phone it's really hard to hit that little triangle.

Seems like as soon as i'm 1px outside the triangle it clicks one of the nodes instead.

Is there a script that checks where inside the <i class="jstree-icon jstree-ocl"></i> you click ?

Cant it be so that when clicking the whole <i> it will expand/collapse ?

Or at least somehow get  a bigger expand/collapse icon.

Thanks

[Ivan Bozhanov]

Set core.themes.responsive to true in your config - that will enable the experimental responsive theme (which is more suited for phones).

Best regards,
Ivan

[Viktor Eriksson]

I have tried that. There is not much of a difference.

I try to click on the arrow but 4 out of 5 times it will click the node instead.

I just noticed one thing though.

It seems like phones prefer a-tags before other click tags.

If I replace the arrow-tag <i> with a <a> instead it works much much much better.

[Ivan Bozhanov]

I will see what I can do. Thanks for the feedback and for digging into this. I will let you know if I come up with something - btw you can easily compile a bigger theme - it is all a question of setting a few variable (and possibly changing the icons sprite).

Best regards,
Ivan

[Viktor Eriksson]

Would you mind telling me what variables that might be or point me to a direction where it is explained ?

Would it be possible to change the <i> to a <a> in some event of jstree ?

It seems like if I just do it once it will be overwritten with an <i> again when i expand/collapse the node.

[Ivan Bozhanov]

If you want to replace a part of the UI you need to build a plugin - take a look at "src/misc.js" for examples, but keep in mind putting a link there might not be screen reader friendly.
As for the visual part - it is all in the .less files - make a copy of the default theme, change the name, and fiddle with the heights specified in "style.less".

Best regards,
Ivan

[Viktor Eriksson]

Created a plugin:

(function ($, undefined) {

    "use strict";

    $.jstree.plugins.replaceIwithA = function (options, parent) {

        this.redraw_node = function(obj, deep, callback) {

            obj = parent.redraw_node.call(this, obj, deep, callback);

            var $node = $(obj).find(".jstree-ocl")

            var newNode = $node[0].outerHTML.replace("<i", "<a").replace("i>", "a>")

            $node.replaceWith(newNode);

            return obj;

        };

    };

})(jQuery);

Works really good,the expand/collapse works every click.

Havent seen any issues yet and I havnt even changed the css.

[Ivan Bozhanov]

Great! :) Just keep in mind having jQuery code in the redraw_node method may be a performance issue on a large tree, but provided the tree is not very large it will work OK, if you run into issues - rewrite with vanilla JS and DOM methods.
Also outerHTML may be a problem with various browsers, but if you are targeting only a specific audience that may be fine.

Best regards,
Ivan