github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-29 23:54:05 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Added keyboard navigation to breadcrumb dropdowns

Browse Source
This commit is contained in:
Dan Brown 2019-06-04 11:25:19 +01:00
parent a9f983f156
commit fe64248e86
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/assets/js/components/breadcrumb-listing.js
View File

@ -16,6 +16,26 @@ class BreadcrumbListing {
this.toggleElem.addEventListener('click', this.onShow.bind(this)); this.toggleElem.addEventListener('click', this.onShow.bind(this));
this.searchInput.addEventListener('input', this.onSearch.bind(this)); this.searchInput.addEventListener('input', this.onSearch.bind(this));
this.elem.addEventListener('keydown', this.keyDown.bind(this));
}
keyDown(event) {
if (event.key === 'ArrowDown') {
this.listFocusChange(1);
event.preventDefault();
} else if (event.key === 'ArrowUp') {
this.listFocusChange(-1);
event.preventDefault();
}
}
listFocusChange(indexChange = 1) {
const links = Array.from(this.entityListElem.querySelectorAll('a:not(.hidden)'));
const currentFocused = this.entityListElem.querySelector('a:focus');
const currentFocusedIndex = links.indexOf(currentFocused);
const defaultFocus = (indexChange > 0) ? links[0] : this.searchInput;
const nextElem = links[currentFocusedIndex + indexChange] || defaultFocus;
nextElem.focus();
} }
onShow() { onShow() {
@ -28,6 +48,7 @@ class BreadcrumbListing {
for (let listItem of listItems) { for (let listItem of listItems) {
const match = !input || listItem.textContent.toLowerCase().includes(input); const match = !input || listItem.textContent.toLowerCase().includes(input);
listItem.style.display = match ? 'flex' : 'none'; listItem.style.display = match ? 'flex' : 'none';
listItem.classList.toggle('hidden', !match);
} }
} }