aboutsummaryrefslogtreecommitdiff
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
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.
-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)
+ }
+})