mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-07 22:45:23 +02:00
the expand feature added during navigation
This commit is contained in:
parent
1af4e05027
commit
de7b34603a
2 changed files with 13 additions and 2 deletions
|
@ -17,6 +17,7 @@ export default class SidebarFilter {
|
|||
sectionHidden: 'docs-sidebar__section--hidden',
|
||||
sectionTitle: 'docs-sidebar__section-title',
|
||||
sectionTitleSelected: 'docs-sidebar__section-title--selected',
|
||||
sectionTitleActive: 'docs-sidebar__section-title--active',
|
||||
sectionList: 'docs-sidebar__section-list',
|
||||
sectionListItem: 'docs-sidebar__section-list-item',
|
||||
sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden',
|
||||
|
@ -47,12 +48,14 @@ export default class SidebarFilter {
|
|||
* @param {HTMLElement[]} sections - Array of sections.
|
||||
* @param {HTMLElement} sidebarContent - Sidebar content.
|
||||
* @param {HTMLElement} search - Search input.
|
||||
* @param {Function} setSectionCollapsed - Function to set section collapsed.
|
||||
*/
|
||||
init(sections, sidebarContent, search) {
|
||||
init(sections, sidebarContent, search, setSectionCollapsed) {
|
||||
// Store refs to HTML elements.
|
||||
this.sections = sections;
|
||||
this.sidebarContent = sidebarContent;
|
||||
this.search = search;
|
||||
this.setSectionCollapsed = setSectionCollapsed;
|
||||
let className = SidebarFilter.CSS.sidebarSearchWrapperOther;
|
||||
|
||||
// Search initialize with platform specific shortcut.
|
||||
|
@ -190,6 +193,13 @@ export default class SidebarFilter {
|
|||
element.classList.add(SidebarFilter.CSS.sectionTitleSelected);
|
||||
} else if (type === 'item') {
|
||||
element.classList.add(SidebarFilter.CSS.sectionListItemSlelected);
|
||||
// close section.
|
||||
const parentSection = element.closest('section');
|
||||
|
||||
// if item is in collapsed section, expand it.
|
||||
if (!parentSection.classList.contains(SidebarFilter.CSS.sectionTitleActive)) {
|
||||
this.setSectionCollapsed(parentSection, false);
|
||||
}
|
||||
}
|
||||
|
||||
// scroll to focused title or item.
|
||||
|
|
|
@ -90,7 +90,8 @@ export default class Sidebar {
|
|||
this.nodes.slider.addEventListener('click', () => this.handleSliderClick());
|
||||
|
||||
this.nodes.search = moduleEl.querySelector('.' + Sidebar.CSS.sidebarSearch);
|
||||
this.filter.init(this.nodes.sections, this.nodes.sidebarContent, this.nodes.search);
|
||||
this.filter.init(this.nodes.sections, this.nodes.sidebarContent,
|
||||
this.nodes.search, this.setSectionCollapsed);
|
||||
|
||||
this.ready();
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue