delite/KeyNav
This is a base class to enable keyboard navigation between the widget's descendants. Navigation can be performed via arrow keys and HOME/END keys, and also a letter key search. A List, Tree, or Grid widget could all be subclasses of KeyNav.
Keystroke Handlers
To use this base class, the subclass should implement methods for the keystrokes that it wants to handle. For LEFT/RIGHT/UP/DOWN arrow key navigation, implement:
- previousKeyHandler(event, currentDescendant)
- nextKeyHandler(event, currentDescendant)
- downKeyHandler(event, currentDescendant)
- upKeyHandler(event, currentDescendant)
The subclass can implement methods for other keys too, following the naming pattern above, for example spaceKeyHandler(), f2KeyHandler(), etc.
If a handler is defined, then KeyNav
automatically calls evt.preventDefault()
and evt.stopPropagation()
.
Other Requirements
In addition to setting up keystroke handler methods, the subclass must:
- Set all descendants' initial tabIndex to "-1"; both initial descendants and any
descendants added later, by for example
addChild()
. Exception: iffocusDescendants
is false then the descendants shouldn't have any tabIndex at all. - Define
descendantSelector
as a function (descendantSelector(Element)
) or CSS selector (ex: ".list-item") that identifies navigable descendant widgets. - Define
this.containerNode
.
Also, child widgets must implement a .focus()
method.