I'm not a fan of javascript being used for the clicky handlers, even if the element being clicked is a natural clicky element like an anchor tag.
It's much better to rely on a toggle like input type=checkbox and CSS to visualize tree expand and collapse based on checkbox states than to install click handlers in javascript. I suspect you could make such an arrangement more accessible and keyboard navigable as well (via grouping.)
Javascript should only be used to dynamically load/unload subtrees on click in the case of especially huge or costly trees.
As a blind screen reader user, I rely on keyboard accessibility for navigating any type of tree.
Now I know not to checkout your project as it would be of no use to me.
Yours is much cleaner code though; this was my first venture in javascript (and really programming) when I wrote it and am planning on refactoring it soon(tm). Great work with Kapok, the demo page is well done.
You should consider removing all the other functions from the global scope, especially because they have relatively generic names like "generateTree", "toArray", "depth", and "toggleClass".
Consider using an actual class or a closure perhaps?
25 comments
[ 3.6 ms ] story [ 95.0 ms ] threadHere's an example of a tree widget that can be navigated by keyboard: https://www.jstree.com/docs/html/
It's much better to rely on a toggle like input type=checkbox and CSS to visualize tree expand and collapse based on checkbox states than to install click handlers in javascript. I suspect you could make such an arrangement more accessible and keyboard navigable as well (via grouping.)
Javascript should only be used to dynamically load/unload subtrees on click in the case of especially huge or costly trees.
https://developer.mozilla.org/en/docs/Web/CSS/cursor
https://github.com/cheezmeister/kapok
[I think it does most of what yours does](https://github.com/Cheezmeister/kapok/blob/master/tst/kapok....) (EDIT: Nope, missing URL loading and XSS cleaning!)
Consider using an actual class or a closure perhaps?