Complete tree keyboard navigation

[hahamed]

Hello,
Use and reply. I think it has not bug.
Improved:

Code:

$.extend($.fn.tree.methods, {
    nav: function (jq, dir) {
        return jq.each(function () {
            var nodes = $(this).tree('getChildren');
            if (!nodes.length) return;
            var node = $(this).tree('getSelected');
            if (!node) { $(this).tree('select', dir == 'down' ? nodes[0].target : nodes[nodes.length - 1].target); }
            else {
                if (dir == 'left') {
                    if (!$(this).tree('isLeaf', node.target) && node.state == "open") $(this).tree('collapse', node.target);
                    else {
                        var parent = $(this).tree('getParent', node.target);
                        if (parent) $(this).tree('select', parent.target);
                    }
                } else if (dir == 'right') {
                    if (!$(this).tree('isLeaf', node.target)) $(this).tree('expand', node.target);
                } else {
                    var index = 0;
                    for (var i = 0; i < nodes.length; i++) if (nodes[i].target == node.target) { index = i; break; }
                    if (dir == 'down') { if (index == nodes.length - 1) index = 0; else while (index < nodes.length - 1) { index++; if ($(nodes[index].target).is(':visible')) break; } }
                    else if (dir == 'up') { if (index == 0) index = nodes.length - 1; else while (index > 0) { index--; if ($(nodes[index].target).is(':visible')) break; } }
                    if ($(nodes[index].target).is(':visible')) $(this).tree('select', nodes[index].target);
                }
            }
        });
    }
});

and call nav:

Code:

tree.attr('tabindex', 1).bind('keydown', function (e) {
        var selected = tree.tree('getSelected');
        switch (e.keyCode) {
            case 13: // Enter
                if (selected) $(selected.target).trigger('click');
                break;
            case 38: // up
                tree.tree('nav', 'up');
                break;
            case 40: // down
                $(this).tree('nav', 'down');
                break;
            case 37: // right
                $(this).tree('nav', 'right');
                break;
            case 39: // left
                $(this).tree('nav', 'left');
                break;
        }
});

thanks from msg4344

[xarn]

Please note that the left/right keycodes were inverted. It should be:

Code:

            case 39: // right
                $(this).tree('nav', 'right');
                break;
            case 37: // left
                $(this).tree('nav', 'left');
                break;