aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-05-16 20:09:43 +0200
committer0neGal <mail@0negal.com>2022-05-16 20:09:43 +0200
commit0b893f9f2b01196b583222df072ae51631457649 (patch)
tree925cabf4f459b637bb2d95f628cdfdd278983c0c
parentb65cb550e0e26b2cf290573248fe28e341fa4807 (diff)
downloadViper-0b893f9f2b01196b583222df072ae51631457649.tar.gz
Viper-0b893f9f2b01196b583222df072ae51631457649.zip
a lot of stuff, but mainly a "Load more..." button
In the past when more than 50 packages was loaded it'd simply display a "Maximum packages loaded" message, and it wasn't actually 50, as it just took the first 50 packages loaded, whether or not they were filtered out, so now that's fixed and a "Load more..." button has been added. With that comes some changes to the lang strings for "gui.browser.endoflist" and a new one "gui.browser.loadmore". I also fixed the filtered packages issue also occurring in searches. This will overall allow a user to more easily find the maximum amount of packages without loading literally over a hundred packages at once, not good for performance...
-rw-r--r--src/app/browser.js89
-rw-r--r--src/app/main.css4
-rw-r--r--src/lang/en.json3
3 files changed, 87 insertions, 9 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index 5c943ba..0646ad1 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -2,9 +2,21 @@ const Fuse = require("fuse.js");
var fuse;
var packages = [];
+var packagecount = 0;
+
var Browser = {
maxentries: 50,
filters: {
+ getpkgs: () => {
+ let pkgs = [];
+ for (let i in packages) {
+ if (! Browser.filters.isfiltered(packages[i].categories)) {
+ pkgs.push(packages[i]);
+ }
+ }
+
+ return pkgs;
+ },
get: () => {
let filtered = [];
let unfiltered = [];
@@ -81,6 +93,8 @@ var Browser = {
},
loadfront: async () => {
Browser.loading();
+
+ packagecount = 0;
if (packages.length < 1) {
packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
@@ -90,8 +104,15 @@ var Browser = {
})
}
- for (let i in packages) {
- new BrowserElFromObj(packages[i]);
+ let pkgs = Browser.filters.getpkgs();
+ for (let i in pkgs) {
+ if (packagecount >= Browser.maxentries) {
+ Browser.endoflist();
+ break
+ }
+
+ new BrowserElFromObj(pkgs[i]);
+ packagecount++;
}
},
loading: (string) => {
@@ -107,9 +128,31 @@ var Browser = {
browserEntries.innerHTML = `<div class="loading">${lang('gui.browser.loading')}</div>`;
}
},
- endoflist: () => {
- if (browserEntries.querySelector(".message")) {return}
- browserEntries.innerHTML += `<div class="message">${lang('gui.browser.endoflist')}</div>`
+ endoflist: (isEnd) => {
+ let pkgs = [];
+ let filtered = Browser.filters.getpkgs();
+ for (let i = 0; i < filtered.length; i++) {
+ if ([packagecount + i]) {
+ pkgs.push(filtered[packagecount + i]);
+ } else {
+ break
+ }
+ }
+
+ if (browserEntries.querySelector(".message")) {
+ browserEntries.querySelector(".message").remove();
+ }
+
+ if (pkgs.length == 0 || isEnd) {
+ browserEntries.innerHTML += `<div class="message">${lang('gui.browser.endoflist')}</div>`
+ return
+ }
+
+ browserEntries.innerHTML += `<div class="message"><button id="loadmore">${lang("gui.browser.loadmore")}</button></div>`
+ loadmore.addEventListener("click", () => {
+ Browser.loadpkgs(pkgs);
+ Browser.endoflist(pkgs);
+ })
},
search: (string) => {
Browser.loading();
@@ -120,8 +163,14 @@ var Browser = {
return
}
+ packagecount = 0;
+
+ let count = 0;
for (let i = 0; i < res.length; i++) {
+ if (count >= Browser.maxentries) {break}
+ if (Browser.filters.isfiltered(res[i].item.categories)) {continue}
new BrowserElFromObj(res[i].item);
+ count++;
}
},
setbutton: (mod, string) => {
@@ -157,6 +206,33 @@ var Browser = {
}
}, 1501)
}
+ },
+ loadpkgs: (pkgs, clear) => {
+ if (clear) {packagecount = 0}
+
+ if (browserEntries.querySelector(".message")) {
+ browserEntries.querySelector(".message").remove();
+ }
+
+ let count = 0;
+ for (let i in pkgs) {
+ if (count >= Browser.maxentries) {
+ if (pkgs[i] === undefined) {
+ Browser.endoflist(true);
+ }
+
+ Browser.endoflist();
+ console.log(pkgs)
+ break
+ }
+
+ try {
+ new BrowserElFromObj(pkgs[i])
+ }catch(e) {}
+
+ count++;
+ packagecount++;
+ }
}
}
@@ -179,9 +255,6 @@ function BrowserElFromObj(obj) {
function BrowserEl(properties) {
if (Browser.filters.isfiltered(properties.categories)) {return}
- let entries = browser.querySelectorAll(".el").length;
- if (entries == Browser.maxentries) {Browser.endoflist();return}
-
properties = {
title: "No name",
version: "1.0.0",
diff --git a/src/app/main.css b/src/app/main.css
index 7b54ec7..d7f8284 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -245,6 +245,10 @@ button {
font-weight: 700;
}
+.popup .message #loadmore {
+ background: rgb(var(--blue2));
+}
+
.popup .el .description {font-size: 0.8em}
.popup .el button {
background: rgb(var(--blue));
diff --git a/src/lang/en.json b/src/lang/en.json
index 024b44a..345a83c 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -77,7 +77,8 @@
"gui.browser.install": "Install",
"gui.browser.reinstall": "Re-Install",
"gui.browser.loading": "Loading mods...",
- "gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
+ "gui.browser.loadmore": "Load more...",
+ "gui.browser.endoflist": "All packages have been loaded.",
"gui.browser.noresults": "No results...",
"gui.browser.filter.mods": "Mods",
"gui.browser.filter.skins": "Skins",