Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-08 23:15:28 +02:00
Code Issues Releases Activity

the integration for input box completed

Browse source
This commit is contained in:
Umang G. Patel 2022-08-28 23:52:13 +05:30
parent 8b90e95270
commit 0ae88101a3
1 changed files with 121 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/frontend/js/modules/sidebar.js
View file

@ -240,11 +240,44 @@ export default class Sidebar {
callback: () => this.handleSliderClick(),
});
// Add event listener to focus search input on Ctrl+P or ⌘+P is pressed.
// eslint-disable-next-line no-new
new Shortcut({
name: 'CMD+P',
on: document.body,
callback: () => {this.nodes.search.focus()},
callback: () => {
this.nodes.search.focus();
},
});
// Add event listener for up key during search input focus.
// eslint-disable-next-line no-new
new Shortcut({
name: 'up',
on: document.body,
callback: () => {
this.handleKeyboardEventOnSearch('up');
},
});
// Add event listener for down key during search input focus.
// eslint-disable-next-line no-new
new Shortcut({
name: 'down',
on: document.body,
callback: () => {
this.handleKeyboardEventOnSearch('down');
},
});
// Add event listener for enter key during search input focus.
// eslint-disable-next-line no-new
new Shortcut({
name: 'enter',
on: document.body,
callback: () => {
this.handleKeyboardEventOnSearch('enter');
},
});
}
@ -270,21 +303,23 @@ export default class Sidebar {
}
/**
* Keyboard event listener added
* Handle keyboard events when search input is focused.
*
* @param {KeyboardEvent} e - keyboard event.
* @param {string} eventType - type of the event.
* @returns {void}
*/
keyboardListener(e) {
// If Ctrl+P or ⌘+P is pressed, focus search input.
if ((e.ctrlKey || e.metaKey) && e.code === 'KeyP') {
this.nodes.search.focus();
e.preventDefault();
handleKeyboardEventOnSearch(eventType) {
// Return if search is not focused.
if (this.nodes.search !== document.activeElement) {
return;
}
// If search is focused and arrow keys are pressed, move focus to next/previous item.
if (this.nodes.search === document.activeElement) {
if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
e.stopImmediatePropagation();
e.preventDefault();
// if enter is pressed and item is focused, then click on focused item.
if (eventType === 'enter' && this.nodes.selectedSearchResultIndex !== null) {
this.nodes.searchResults[this.nodes.selectedSearchResultIndex].element.click();
}
if (eventType === 'up' || eventType === 'down') {
// check for search results.
if (this.nodes.searchResults.length === 0) {
return;
@ -295,23 +330,23 @@ export default class Sidebar {
// get next item index.
if (this.nodes.selectedSearchResultIndex === null) {
// if no item is focused and up press, focus last item.
if (e.code === 'ArrowUp') {
if (eventType === 'up') {
this.nodes.selectedSearchResultIndex = this.nodes.searchResults.length - 1;
}
// if no item is focused and down press, focus first item.
if (e.code === 'ArrowDown') {
if (eventType === 'down') {
this.nodes.selectedSearchResultIndex = 0;
}
} else {
// if item is focused and up press, focus previous item.
if (e.code === 'ArrowUp') {
if (eventType === 'up') {
this.nodes.selectedSearchResultIndex--;
if (this.nodes.selectedSearchResultIndex < 0) {
this.nodes.selectedSearchResultIndex = this.nodes.searchResults.length - 1;
}
}
// if item is focused and down press, focus next item.
if (e.code === 'ArrowDown') {
if (eventType === 'down') {
this.nodes.selectedSearchResultIndex++;
if (this.nodes.selectedSearchResultIndex >= this.nodes.searchResults.length) {
this.nodes.selectedSearchResultIndex = 0;
@ -367,13 +402,6 @@ export default class Sidebar {
}
}
}
// if enter is pressed, click on focused item.
if (e.code === 'Enter') {
if (this.nodes.selectedSearchResultIndex !== null) {
this.nodes.searchResults[this.nodes.selectedSearchResultIndex].element.click();
}
}
}
}
/**