Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-10 07:55:24 +02:00
Code Issues Releases Activity

the scroll added if element is not visble

Browse source
This commit is contained in:
Umang G. Patel 2022-07-24 00:57:15 +05:30
parent 8cd1b12f5b
commit ad5f9cb656
1 changed files with 23 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -93,6 +93,8 @@ export default class Sidebar {
e.preventDefault(); e.preventDefault();
this.search(e.target.value); this.search(e.target.value);
}); });
// Get search results if search input is empty.
this.search('');
// Add event listener for keyboard events. // Add event listener for keyboard events.
document.addEventListener('keydown', e => this.keyboardListener(e)); document.addEventListener('keydown', e => this.keyboardListener(e));
@ -216,8 +218,6 @@ export default class Sidebar {
if (e.ctrlKey && e.code === 'KeyP') { if (e.ctrlKey && e.code === 'KeyP') {
this.nodes.search.focus(); this.nodes.search.focus();
e.preventDefault(); e.preventDefault();
// Get search results if search input is empty.
this.search('');
} }
// If search is focused and arrow keys are pressed, move focus to next/previous item. // If search is focused and arrow keys are pressed, move focus to next/previous item.
if (this.nodes.search === document.activeElement) { if (this.nodes.search === document.activeElement) {
@ -283,6 +283,27 @@ export default class Sidebar {
if ( type === 'item') { if ( type === 'item') {
element.classList.add(Sidebar.CSS.sectionListItemSlelected); element.classList.add(Sidebar.CSS.sectionListItemSlelected);
} }
// find the parent section.
const parentSection = element.closest('section');
// check if it's visible.
const rect = parentSection.getBoundingClientRect();
const elemTop = rect.top;
const elemBottom = rect.bottom;
// scroll top if item is not visible.
if ( elemTop < 0) {
this.nodes.sidebarContent.scroll({
top: elemTop,
behavior: 'smooth',
});
}
// scroll bottom if item is not visible.
if (elemBottom > window.innerHeight) {
this.nodes.sidebarContent.scroll({
top: elemBottom,
behavior: 'smooth',
});
}
} }
} }
// if enter is pressed, click on focused item. // if enter is pressed, click on focused item.