Update to Keyboard Navigation

[bseddon]

After creating the keyboard navigation code and testing it with the demo page provided I applied it to my application. This revealed that I missed a use-case.

In my real application the zTree shown to the user is created and destroyed as the user selects different contexts but the zTree container element is not removed. This meant the keyboard navigation code should also be destroyed and the re-applied to the new zTree nodes. However, the original keyboard navigation code did not do this and, as a result, multiple keyboard events would be fired for each keystroke. The number of events being the number of times the zTree is re-created.

The code in this PR addresses this omission.

[bseddon]

In addition, I am suggesting an addition to the core, The 'searchNodes' example shows how nodes containing specific characteristics, such as user entered characters, can be identified by modifying the CSS used to display the nodes. While this is a very useful feature, it requires the CSS to be embedded in JavaScript code. This is so the 'view' callback 'fontCSS' is able to return the CSS directive to be applied to selected nodes.

For me it will be better if selected nodes can be identified by applying CSS classes rather than directives. Doing so provides more flexibility and allows designers to retain control of the styling without having to modify JS code.

The pull request implements a new core 'view' callback called 'nodeClasses'. It works in a similar way to fontCSS: the user implements a callback to return an object that defines classes to be added and removed.

The core 'searchNodes' demo page has also been updated to provide an extra checkbox so a viewer is able toggle between seeing selected nodes be identified by applying CSS directives (the fontCSS way) or identified by applying classes. The image shows examples of the zTree from the updated demo page at different stages of node expansion. Classes have been used to provide icons that not only mark selected nodes but to show when selected node exist within a collapsed node.

I am no designer and the choice of icons and colors could be better. However, because the icons and colors are defined by classes, a designer is able to improve the look without changing the JS code.

The new 'view' callback called 'nodeClasses' expects the function to return an object with two properties called 'add' and 'remove'. Both are an array of class names. The 'add' array is a list of class names to be added to nodes that contain the required characteristic. The 'remove' property is a list of class names that will be removed from all other nodes. If the complete set of classes that might be applied are 'highlight', 'hidden' and 'highlight_alt' then a class returned for a node might look like this:

{
    add: ['highlight', 'hidden'],
    remove: ['highlight', 'hidden', 'highlight_alt']
}

[zTree]

Thank you very much.

I'll merge your code. I agree your idea to add node's class name. But I will change your code for core.js.