devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: add search enter shortcat key to jump to the page.

Browse Source
This commit is contained in:
jaywcjlove 2022-11-21 15:59:12 +08:00
parent c72654c5ab
commit 32af5af854
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scripts/js/main.js
View File

@ -55,7 +55,9 @@ const closeBtn = document.getElementById('mysearch-close');
const searchMenu = document.getElementById('mysearch-menu'); const searchMenu = document.getElementById('mysearch-menu');
const searchContent = document.getElementById('mysearch-content'); const searchContent = document.getElementById('mysearch-content');
const isHome = document.body.classList.contains('home'); const isHome = document.body.classList.contains('home');
function getDocUrl(url = '') {
return isHome ? url : url.replace('docs/', '');
}
searchBtn.addEventListener('click', (ev) => { searchBtn.addEventListener('click', (ev) => {
ev.preventDefault(); ev.preventDefault();
showSearch(); showSearch();
@ -65,15 +67,22 @@ closeBtn.addEventListener('click', hideSearch);
searchBox.addEventListener('click', hideSearch); searchBox.addEventListener('click', hideSearch);
searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation()); searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation());
searchInput.addEventListener('input', (evn) => searchResult(evn.target.value)); searchInput.addEventListener('input', (evn) => searchResult(evn.target.value));
let activeMenu = {}
let result = []
let inputValue = '';
document.addEventListener('keydown', (ev) => { document.addEventListener('keydown', (ev) => {
console.log('ev::', ev)
if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') { if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') {
searchBox.classList.contains('show') ? hideSearch() : showSearch(); searchBox.classList.contains('show') ? hideSearch() : showSearch();
} }
if (ev.key.toLocaleLowerCase() === 'enter') {
console.log('activeMenu:', activeMenu)
window.location.href = getDocUrl(activeMenu.path)
}
}); });
let result = []
let inputValue = '';
function showSearch() { function showSearch() {
document.body.classList.add('search'); document.body.classList.add('search');
searchBox.classList.add('show'); searchBox.classList.add('show');
@ -105,6 +114,7 @@ function searchResult(value) {
}) })
const href = isHome ? item.item.path : item.item.path.replace('docs/', ''); const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
if (idx === 0) { if (idx === 0) {
activeMenu = item.item;
menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`; menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
} else { } else {
menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`; menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
@ -117,6 +127,7 @@ function searchResult(value) {
anchor.onmouseenter = (evn) => { anchor.onmouseenter = (evn) => {
data.forEach(item => item.classList.remove('active')); data.forEach(item => item.classList.remove('active'));
evn.target.classList.add('active'); evn.target.classList.add('active');
activeMenu = result[idx];
searchSectionsResult(idx); searchSectionsResult(idx);
} }
}); });
@ -125,7 +136,6 @@ function searchResult(value) {
item.addEventListener('click', hideSearch); item.addEventListener('click', hideSearch);
}) })
} }
function searchSectionsResult(idx = 0) { function searchSectionsResult(idx = 0) {
const data = result[idx] || []; const data = result[idx] || [];
const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => { const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => {
@ -137,7 +147,7 @@ function searchSectionsResult(idx = 0) {
const label = item.t.replace(getValueReg(inputValue), (txt) => { const label = item.t.replace(getValueReg(inputValue), (txt) => {
return `<mark>${txt}</mark>` return `<mark>${txt}</mark>`
}) })
const href = isHome ? data.item.path : data.item.path.replace('docs/', ''); const href = getDocUrl(data.item.path);
if (item.l < 3) { if (item.l < 3) {
sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>` sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`
} else { } else {

2
scripts/style/style.css
View File

@ -549,7 +549,7 @@ a.text-grey {
.header-nav .menu .searchbtn span:last-child { .header-nav .menu .searchbtn span:last-child {
transition: all 0.3s; transition: all 0.3s;
border: 1px solid var(--color-border-default); border: 1px solid var(--color-border-default);
border-radius: 3px; border-radius: 0.4rem;
padding: 1px 1px 1px 3px; padding: 1px 1px 1px 3px;
letter-spacing: 3px; letter-spacing: 3px;
} }