mirror of https://github.com/lissy93/dashy
98 lines
4.2 KiB
JavaScript
98 lines
4.2 KiB
JavaScript
/**
|
|
* Class encapsulating the functionality that enables the user to
|
|
* navigate through tiles/ search result grid using the arrow keys
|
|
* This code is very hacky, it's best not to look at it for too long
|
|
*/
|
|
export default class ArrowKeyNavigation {
|
|
constructor(index) {
|
|
this.index = index;
|
|
}
|
|
|
|
resetIndex() {
|
|
this.index = 0;
|
|
}
|
|
|
|
/* Figures out which element is next, based on the key pressed *
|
|
* current index and total number of items. Then calls focus function */
|
|
arrowNavigation(key) {
|
|
if (this.index === undefined) this.index = 0; // Start at beginning
|
|
else if (key === 37) { // Left --> Previous
|
|
this.index -= 1;
|
|
} else if (key === 38) { // Up --> Previous
|
|
this.index = ArrowKeyNavigation.goToPrevious(this.index);
|
|
} else if (key === 39) { // Right --> Next
|
|
this.index += 1;
|
|
} else if (key === 40) { // Down --> Next
|
|
this.index = ArrowKeyNavigation.goToNext(this.index);
|
|
}
|
|
/* Ensure the index is within bounds, then focus element */
|
|
this.index = ArrowKeyNavigation.getSafeElementIndex(this.index);
|
|
ArrowKeyNavigation.selectItemByIndex(this.index).focus();
|
|
}
|
|
|
|
/* Returns the number of visible items / results */
|
|
static getNumResults() {
|
|
return document.getElementsByClassName('item').length;
|
|
}
|
|
|
|
/* Returns the index for an element, ensuring that it's within bounds */
|
|
static getSafeElementIndex(index) {
|
|
const numResults = ArrowKeyNavigation.getNumResults();
|
|
if (index < 0) return numResults - 1;
|
|
else if (index >= numResults) return 0;
|
|
return index;
|
|
}
|
|
|
|
/* Selects a given element, by it's ID. If out of bounds, returns element 0 */
|
|
static selectItemByIndex(index) {
|
|
return (index >= 0 && index <= ArrowKeyNavigation.getNumResults())
|
|
? document.getElementsByClassName('item')[index] : [document.getElementsByClassName('item')];
|
|
}
|
|
|
|
/* Returns the index of the first cell in the previous/ above row */
|
|
static findPreviousRow(startingIndex) {
|
|
const isSameRow = (indx, pos) => ArrowKeyNavigation.selectItemByIndex(indx).offsetTop === pos;
|
|
const checkPreviousIndex = (currentIndex, yPos) => {
|
|
if (currentIndex >= ArrowKeyNavigation.getNumResults()) return checkPreviousIndex(0, yPos);
|
|
else if (isSameRow(currentIndex, yPos)) return checkPreviousIndex(currentIndex - 1, yPos);
|
|
return currentIndex;
|
|
};
|
|
const position = ArrowKeyNavigation.selectItemByIndex(startingIndex).offsetTop;
|
|
return checkPreviousIndex(startingIndex, position);
|
|
}
|
|
|
|
/* Moves to the cell directly above the current */
|
|
static goToPrevious(startingIndex) {
|
|
const isBelow = (start, end) => (ArrowKeyNavigation.selectItemByIndex(start).offsetTop
|
|
< ArrowKeyNavigation.selectItemByIndex(end).offsetTop);
|
|
const nextIndex = ArrowKeyNavigation.findPreviousRow(startingIndex);
|
|
const count = nextIndex - startingIndex;
|
|
const rowLen = nextIndex - ArrowKeyNavigation.findNextRow(startingIndex) + 1;
|
|
const adjustment = isBelow(startingIndex, nextIndex) ? 0 : rowLen - count;
|
|
return nextIndex + adjustment;
|
|
}
|
|
|
|
/* Returns the index of the first cell in the next/ below row */
|
|
static findNextRow(startingIndex) {
|
|
const isSameRow = (indx, pos) => ArrowKeyNavigation.selectItemByIndex(indx).offsetTop === pos;
|
|
const checkNextIndex = (currentIndex, yPos) => {
|
|
if (currentIndex >= ArrowKeyNavigation.getNumResults()) return checkNextIndex(0, yPos);
|
|
else if (isSameRow(currentIndex, yPos)) return checkNextIndex(currentIndex + 1, yPos);
|
|
return currentIndex;
|
|
};
|
|
const position = ArrowKeyNavigation.selectItemByIndex(startingIndex).offsetTop;
|
|
return checkNextIndex(startingIndex, position);
|
|
}
|
|
|
|
/* Moves to the cell directly below the current */
|
|
static goToNext(startingIndex) {
|
|
const isAbove = (start, end) => (ArrowKeyNavigation.selectItemByIndex(start).offsetTop
|
|
> ArrowKeyNavigation.selectItemByIndex(end).offsetTop);
|
|
const nextIndex = ArrowKeyNavigation.findNextRow(startingIndex);
|
|
const count = nextIndex - startingIndex;
|
|
const rowLen = nextIndex - ArrowKeyNavigation.findPreviousRow(startingIndex) - 1;
|
|
const adjustment = isAbove(startingIndex, nextIndex) ? 0 : rowLen - count;
|
|
return nextIndex + adjustment;
|
|
}
|
|
}
|