From 821bdeeb160d2a8ef44e10cf2093f1ae33b1d160 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Fri, 7 May 2021 21:41:29 +0700
Subject: [PATCH] feat: add search

---
 assets/js/index.js            |  3 ++-
 assets/js/lib/nav-collapse.js |  3 ++-
 assets/js/lib/search.js       | 37 +++++++++++++++++++++++++++++++++++
 partials/navigation.hbs       | 26 +++++++++++++++---------
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/lib/search.js

diff --git a/assets/js/index.js b/assets/js/index.js
index 084313a..9dfc8e3 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,4 +1,5 @@
 import './lib/dark-mode';
 import './lib/fitvids';
 import './lib/infinite-scroll';
-import './lib/nav-collapse';
\ No newline at end of file
+import './lib/nav-collapse';
+import './lib/search';
\ No newline at end of file
diff --git a/assets/js/lib/nav-collapse.js b/assets/js/lib/nav-collapse.js
index a39649e..386eafe 100644
--- a/assets/js/lib/nav-collapse.js
+++ b/assets/js/lib/nav-collapse.js
@@ -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');
diff --git a/assets/js/lib/search.js b/assets/js/lib/search.js
new file mode 100644
index 0000000..c879b28
--- /dev/null
+++ b/assets/js/lib/search.js
@@ -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 = ``;
+        }
+    });
+}
\ No newline at end of file
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index 3654424..b1944a8 100644
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@@ -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>
\ No newline at end of file