createNavManager():
object
Returns a new instance of the navigation manager.
The navigation manager simplifies keyboard navigation for a set of DOM elements. It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed (either by directly putting the directive on those elements, or by putting the directive on a parent element and specifying which child elements should be included through a selector function).
It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
object
a new instance of the navigation manager
directive: <
T>(node,args) =>void|object
• T = any
• node: SSRHTMLElement
• args: NavManagerItemConfig<T>
void | object
elementsInDomOrder$:
ReadableSignal<HTMLElement[]>
focusFirst: (
__namedParameters) =>null|HTMLElement
• __namedParameters = {}
• __namedParameters.event?: Event
null | HTMLElement
focusFirstLeft: (...
args) =>null|HTMLElement
• ...args: [Object?]
null | HTMLElement
focusFirstRight: (...
args) =>null|HTMLElement
• ...args: [Object?]
null | HTMLElement
focusIndex: (
index,moveDirection) =>null|HTMLElement
• index: number
• moveDirection: -1 | 0 | 1 = 0
null | HTMLElement
focusLast: (
__namedParameters) =>null|HTMLElement
• __namedParameters = {}
• __namedParameters.event?: Event
null | HTMLElement
focusLeft: (...
args) =>null|HTMLElement
• ...args: [Object?]
null | HTMLElement
focusNext: (
__namedParameters) =>null|HTMLElement
• __namedParameters = {}
• __namedParameters.event?: Event
• __namedParameters.referenceElement?: null | HTMLElement = ...
null | HTMLElement
focusPrevious: (
__namedParameters) =>null|HTMLElement
• __namedParameters = {}
• __namedParameters.event?: Event
• __namedParameters.referenceElement?: null | HTMLElement = ...
null | HTMLElement
focusRight: (...
args) =>null|HTMLElement
• ...args: [Object?]
null | HTMLElement
refreshElements: (
now) =>void
• now: boolean = true
void
getKeyName(
event):string
Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...), prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
• event: KeyboardEvent
keyboard event
string
the name of the key, including modifiers
isInternalInputNavigation(
event):boolean
Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move because it is already at one end of the input)
• event: KeyboardEvent
keyboard event
boolean
true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside the input and false otherwise.
NavManager:
ReturnType<*typeof*createNavManager>
Type of the parameter of the navigation manager directive.
• T = any
optionalcontext:T
optionalkeys:Record<string,NavManagerKeyHandler<T>>
Map of key handlers. The key in the map should match the result of calling getKeyName on the key event (for example "ArrowLeft" or "Ctrl+PageDown"). The value in the map is the corresponding key handler.
optionalselector: (directiveElement) =>Iterable<HTMLElement>
Function returning DOM elements to include in the navigation manager. It receives as a parameter the DOM element on which the navigation manager directive is used. If not specified, the default selector function only returns the element on which the navigation manager directive is used.
• directiveElement: HTMLElement
NavManagerKeyHandler<
T>: (info) =>void
Type of a key handler of the navigation manager. A key handler receives an object as its parameter, with the following properties:
• T = any
• info
• info.context?: T
• info.directiveElement: HTMLElement
• info.event: Event
• info.navManager: NavManager
void