mirror of
https://github.com/Damillora/Yuika
synced 2024-12-25 13:43:46 +00:00
feat: add search
This commit is contained in:
parent
5fdf85ce7a
commit
821bdeeb16
@ -1,4 +1,5 @@
|
||||
import './lib/dark-mode';
|
||||
import './lib/fitvids';
|
||||
import './lib/infinite-scroll';
|
||||
import './lib/nav-collapse';
|
||||
import './lib/nav-collapse';
|
||||
import './lib/search';
|
@ -5,9 +5,10 @@ function toggleMenu() {
|
||||
}
|
||||
|
||||
document.querySelector("#menushow").addEventListener("click", toggleMenu);
|
||||
document.querySelectorAll(".menu__item").forEach(menu =>
|
||||
document.querySelectorAll(".menu__nav-item").forEach(menu =>
|
||||
menu.addEventListener("click", toggleMenu)
|
||||
);
|
||||
document.getElementById("darkMode").addEventListener("click", toggleMenu);
|
||||
|
||||
var nav = document.querySelector('.site-header');
|
||||
var feed = document.querySelector('main');
|
||||
|
37
assets/js/lib/search.js
Normal file
37
assets/js/lib/search.js
Normal file
@ -0,0 +1,37 @@
|
||||
async function searchPosts(query) {
|
||||
const apiEndpoint = window.yurikoSearchEndpoint + "/api/article/search?"
|
||||
const queryString = "q="
|
||||
const pageString = "&page="
|
||||
let page = 1
|
||||
|
||||
var data = await fetch(apiEndpoint + queryString + query + pageString + page)
|
||||
var search = await data.json();
|
||||
var result = search.result.map(x => {
|
||||
return `
|
||||
<div class="menu__search-result">
|
||||
<a href="${x.url}"><h2 class="menu__search-title">${x.title}</h2></a>
|
||||
<p class="menu__search-desc">${x.excerpt}</p>
|
||||
</div>
|
||||
`;
|
||||
}).join("");
|
||||
|
||||
document.getElementById("search-results").innerHTML = result;
|
||||
}
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
if (window.yurikoSearchEndpoint != undefined) {
|
||||
var el = document.getElementById("search-query");
|
||||
el.addEventListener("input", function (e) {
|
||||
if (searchTimeout) window.clearTimeout(searchTimeout);
|
||||
var val = el.value;
|
||||
if (val !== "") {
|
||||
document.getElementById("nav-menu").classList.add("menu__item--hidden")
|
||||
searchTimeout = window.setTimeout(() => searchPosts(val), 2000);
|
||||
} else {
|
||||
document.getElementById("nav-menu").classList.remove("menu__item--hidden")
|
||||
|
||||
document.getElementById("search-results").innerHTML = ``;
|
||||
}
|
||||
});
|
||||
}
|
@ -1,14 +1,22 @@
|
||||
<div class="menu">
|
||||
{{#foreach navigation}}
|
||||
<div class="menu__item">
|
||||
<a href={{url absolute="true" }}>
|
||||
<p class="menu__text">{{label}}</p>
|
||||
</a>
|
||||
<div id="nav-menu">
|
||||
{{#foreach navigation}}
|
||||
<div class="menu__item menu__nav-item">
|
||||
<a href={{url absolute="true" }}>
|
||||
<p class="menu__text">{{label}}</p>
|
||||
</a>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
<div class="menu__item" id="darkMode">
|
||||
<i class="menu__icon material-icons md-24">brightness_low</i>
|
||||
<p class="menu__text">Dark Mode</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
<div class="menu__item" id="search">
|
||||
<i class="menu__icon material-icons md-24">search</i>
|
||||
<input type="text" id="search-query" class="menu__search-input"></input>
|
||||
</div>
|
||||
<div id="search-results" class="menu__search-results">
|
||||
|
||||
<div class="menu__item" id="darkMode">
|
||||
<i class="menu__icon material-icons md-24">brightness_low</i>
|
||||
<p class="menu__text">Dark Mode</p>
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user