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

the expand feature added during navigation

Browse source
This commit is contained in:
Umang G. Patel 2022-09-20 00:46:32 +05:30
parent 1af4e05027
commit de7b34603a
2 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/js/classes/sidebar-filter.js
View file

@ -17,6 +17,7 @@ export default class SidebarFilter {
sectionHidden: 'docs-sidebar__section--hidden', sectionHidden: 'docs-sidebar__section--hidden',
sectionTitle: 'docs-sidebar__section-title', sectionTitle: 'docs-sidebar__section-title',
sectionTitleSelected: 'docs-sidebar__section-title--selected', sectionTitleSelected: 'docs-sidebar__section-title--selected',
sectionTitleActive: 'docs-sidebar__section-title--active',
sectionList: 'docs-sidebar__section-list', sectionList: 'docs-sidebar__section-list',
sectionListItem: 'docs-sidebar__section-list-item', sectionListItem: 'docs-sidebar__section-list-item',
sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden', sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden',
@ -47,12 +48,14 @@ export default class SidebarFilter {
* @param {HTMLElement[]} sections - Array of sections. * @param {HTMLElement[]} sections - Array of sections.
* @param {HTMLElement} sidebarContent - Sidebar content. * @param {HTMLElement} sidebarContent - Sidebar content.
* @param {HTMLElement} search - Search input. * @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. // Store refs to HTML elements.
this.sections = sections; this.sections = sections;
this.sidebarContent = sidebarContent; this.sidebarContent = sidebarContent;
this.search = search; this.search = search;
this.setSectionCollapsed = setSectionCollapsed;
let className = SidebarFilter.CSS.sidebarSearchWrapperOther; let className = SidebarFilter.CSS.sidebarSearchWrapperOther;
// Search initialize with platform specific shortcut. // Search initialize with platform specific shortcut.
@ -190,6 +193,13 @@ export default class SidebarFilter {
element.classList.add(SidebarFilter.CSS.sectionTitleSelected); element.classList.add(SidebarFilter.CSS.sectionTitleSelected);
} else if (type === 'item') { } else if (type === 'item') {
element.classList.add(SidebarFilter.CSS.sectionListItemSlelected); 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. // scroll to focused title or item.

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

@ -90,7 +90,8 @@ export default class Sidebar {
this.nodes.slider.addEventListener('click', () => this.handleSliderClick()); this.nodes.slider.addEventListener('click', () => this.handleSliderClick());
this.nodes.search = moduleEl.querySelector('.' + Sidebar.CSS.sidebarSearch); 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(); this.ready();
} }