aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorGitExample <git@example.com>2022-02-03 22:52:01 +0100
committerGitExample <git@example.com>2022-02-03 22:52:01 +0100
commitbe4dc389305ad203328188c2b88383871916ebe0 (patch)
tree9e3c59bf04f5e9676b56d354b332de9d33b91d91 /src
parentea671766d7589d4efdb81996237dca9290b329c1 (diff)
downloadViper-be4dc389305ad203328188c2b88383871916ebe0.tar.gz
Viper-be4dc389305ad203328188c2b88383871916ebe0.zip
added search functionality
This should be future proof, however I'm not sure how well it'll handle thousands of mods to search through. It should do it somewhat well, but idk. We'll see, I'll perhaps implement a simpler search function in the future instead of using Fuse if it becomes a problem.
Diffstat (limited to 'src')
-rw-r--r--src/app/browser.js78
1 files changed, 65 insertions, 13 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index 7fbae1d..b387a6a 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,3 +1,7 @@
+const Fuse = require("fuse.js");
+var fuse;
+var packages = [];
+
var Browser = {
toggle: (state) => {
if (state) {
@@ -16,24 +20,40 @@ var Browser = {
browser.classList.toggle("shown")
},
loadfront: async () => {
- let packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+ Browser.loading();
- for (let i in packages) {
- let pkg = {...packages[i], ...packages[i].versions[0]};
-
- new BrowserEl({
- title: pkg.name,
- image: pkg.icon,
- author: pkg.owner,
- download: pkg.download_url,
- version: pkg.version_number,
- description: pkg.description
+ if (packages.length < 1) {
+ packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+
+ fuse = new Fuse(packages, {
+ keys: ["full_name"]
})
}
+
+ for (let i in packages) {
+ new BrowserElFromObj(packages[i]);
+ }
},
- loading: () => {
+ loading: (string) => {
+ if (string) {
+ browserEntries.innerHTML = `<div class="loading">${string}</div>`;
+ }
+
if (! browserEntries.querySelector(".loading")) {
- browserEntries.innerHTML = `<div class="loading">${lang("gui.browser.loading")}</div>`;
+ browserEntries.innerHTML = `<div class="loading">${lang('gui.browser.loading')}</div>`;
+ }
+ },
+ search: (string) => {
+ Browser.loading();
+ let res = fuse.search(string);
+
+ if (res.length < 1) {
+ Browser.loading("No results...")
+ return
+ }
+
+ for (let i = 0; i < res.length; i++) {
+ new BrowserElFromObj(res[i].item);
}
}
}; Browser.toggle()
@@ -43,6 +63,19 @@ document.body.addEventListener("keyup", (e) => {
if (e.key == "Escape") {Browser.toggle(false)}
})
+function BrowserElFromObj(obj) {
+ let pkg = {...obj, ...obj.versions[0]};
+
+ new BrowserEl({
+ title: pkg.name,
+ image: pkg.icon,
+ author: pkg.owner,
+ download: pkg.download_url,
+ version: pkg.version_number,
+ description: pkg.description
+ })
+}
+
function BrowserEl(properties) {
properties = {
title: "No name",
@@ -105,3 +138,22 @@ function normalize(items) {
return newArray;
}
}
+
+let searchtimeout;
+let searchstr = "";
+search.addEventListener("keyup", () => {
+ clearTimeout(searchtimeout);
+
+ if (searchstr != search.value) {
+ if (search.value.replaceAll(" ", "") == "") {
+ searchstr = "";
+ Browser.loadfront();
+ return
+ }
+
+ searchtimeout = setTimeout(() => {
+ Browser.search(search.value);
+ searchstr = search.value;
+ }, 500)
+ }
+})