Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow key as well as keyCode for directional key #34

Merged
merged 1 commit into from
Sep 22, 2023
Merged

Allow key as well as keyCode for directional key #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Move focus around a HTML document using Left, Right, Up, Down keys.
## API

<pre>
getNextFocus(<i>currentFocus</i>, <i>keyCode</i>, <i>[scope]</i>)
getNextFocus(<i>currentFocus</i>, <i>keyOrKeyCode</i>, <i>[scope]</i>)
</pre>

### Parameters
Expand All @@ -16,8 +16,9 @@ getNextFocus(<i>currentFocus</i>, <i>keyCode</i>, <i>[scope]</i>)
[`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
that you want LRUD spatial to consider as the element you are navigating _from_.
In simple applications, this can just be a reference to `document.activeElement`.
- `keyCode` should be a
[`keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
- `keyOrKeyCode` should be a
[`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) string or
a [`keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
decimal representing the directional key pressed.
- `scope` is an optional `HTMLElement` that you only want to look for focusable candidates inside of. Defaults to the whole page if not provided.

Expand Down
19 changes: 16 additions & 3 deletions lib/lrud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,14 @@ const isValidCandidate = (entryRect, exitDir, exitPoint, entryWeighting) => {
return false;
};

/**
* Get the closest spatial candidate
*
* @param {HTMLElement} elem The search origin
* @param {HTMLElement[]} candidates An set of candidate elements to assess
* @param {string} exitDir The direction in which we exited the elem (left, right, up, down)
* @return {HTMLElement|null} The element that was spatially closest elem in candidates
*/
const getBestCandidate = (elem, candidates, exitDir) => {
let bestCandidate = null;
let bestDistance = Infinity;
Expand Down Expand Up @@ -272,13 +280,14 @@ const getBestCandidate = (elem, candidates, exitDir) => {
* Get the next focus candidate
*
* @param {HTMLElement} elem The search origin
* @param {string} exitDir The direction in which we exited the elem (left, right, up, down)
* @param {string|number} keyOrKeyCode The key or keyCode value (from KeyboardEvent) of the pressed key
* @param {HTMLElement} scope The element LRUD spatial is scoped to operate within
* @return {HTMLElement} The element that should receive focus next
*/
export const getNextFocus = (elem, keyCode, scope) => {
export const getNextFocus = (elem, keyOrKeyCode, scope) => {
if (!scope || !scope.querySelector) scope = document.body;
if (!elem) return getFocusables(scope)?.[0];
const exitDir = _keyMap[keyCode];
const exitDir = _keyMap[keyOrKeyCode];

// Get parent focus container
const parentContainer = getParentContainer(elem);
Expand Down Expand Up @@ -353,4 +362,8 @@ const _keyMap = {
212: _down,
204: _down,
216: _down,
"ArrowLeft": _left,
"ArrowRight": _right,
"ArrowUp": _up,
"ArrowDown": _down
};