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

the sidebar search selected added

Browse source
This commit is contained in:
Umang G. Patel 2022-07-23 18:54:32 +05:30
parent dbce38ad67
commit 22f4a592f2
3 changed files with 40 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/backend/controllers/pages.ts
View file

@ -2,7 +2,7 @@ import Page, { PageData } from '../models/page';
import Alias from '../models/alias';
import PagesOrder from './pagesOrder';
import PageOrder from '../models/pageOrder';
import HttpException from "../exceptions/httpException";
import HttpException from '../exceptions/httpException';
type PageDataFields = keyof PageData;

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

@ -29,10 +29,12 @@ export default class Sidebar {
sectionAnimated: 'docs-sidebar__section--animated',
sectionTitle: 'docs-sidebar__section-title',
sectionTitleActive: 'docs-sidebar__section-title--active',
sectionTitleSelected: 'docs-sidebar__section-title--selected',
sectionList: 'docs-sidebar__section-list',
sectionListItem: 'docs-sidebar__section-list-item',
sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden',
sectionListItemActive: 'docs-sidebar__section-list-item--active',
sectionListItemSlelected: 'docs-sidebar__section-list-item--selected',
sidebarToggler: 'docs-sidebar__toggler',
sidebarContent: 'docs-sidebar__content',
sidebarContentHidden: 'docs-sidebar__content--hidden',
@ -55,6 +57,9 @@ export default class Sidebar {
sidebarContent: null,
toggler: null,
search:null,
searchResults: [],
selectedSearchResult: null,
selectedSearchResultIndex: null,
};
this.sidebarStorage = new Storage(LOCAL_STORAGE_KEY);
const storedState = this.sidebarStorage.get();
@ -202,18 +207,36 @@ export default class Sidebar {
if (this.nodes.search === document.activeElement) {
if (e.code === 'ArrowUp') {
console.log("up");
e.stopImmediatePropagation();
e.preventDefault();
}
if (e.code === 'ArrowDown') {
console.log("down");
e.stopImmediatePropagation();
e.preventDefault();
}
e.stopImmediatePropagation();
e.preventDefault();
}
}
search(e) {
const searchValue = e.target.value;
if (this.nodes.selectedSearchResult) {
const { element, type } = this.nodes.selectedSearchResult;
if (element) {
if (type === 'title') {
element.classList.remove(Sidebar.CSS.sectionTitleSelected);
}
if ( type === 'item') {
element.classList.remove(Sidebar.CSS.sectionListItemSlelected);
}
this.nodes.selectedSearchResult = null;
this.nodes.selectedSearchResultIndex = null;
}
}
this.nodes.searchResults = [];
this.nodes.sections.forEach(section => {
const sectionTitle = section.querySelector('.' + Sidebar.CSS.sectionTitle);
let isTitleMatch = true;
@ -233,6 +256,10 @@ export default class Sidebar {
if (item.innerText.trim().toLowerCase()
.indexOf(searchValue.toLowerCase()) !== -1) {
item.parentElement.classList.remove(Sidebar.CSS.sectionListItemWrapperHidden);
this.nodes.searchResults.push({
element:item,
type:'item',
});
isItemMatch = true;
} else {
item.parentElement.classList.add(Sidebar.CSS.sectionListItemWrapperHidden);
@ -243,6 +270,10 @@ export default class Sidebar {
section.classList.add(Sidebar.CSS.sectionHidden);
} else {
section.classList.remove(Sidebar.CSS.sectionHidden);
this.nodes.searchResults.push({
element:sectionTitle,
type:'title',
});
}
});
e.stopImmediatePropagation();

6
src/frontend/styles/components/sidebar.pcss
View file

@ -123,6 +123,12 @@
transition-property: background-color;
transition-duration: 0.1s;
@apply --squircle;
&--selected
{
border: 2px solid rgba(147, 166, 233, 0.5);
border-radius: 8px;
}
}
&__section-title > span,