aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-03-26 01:42:20 +0100
committer0neGal <mail@0negal.com>2022-03-26 01:42:20 +0100
commitbfbdfec664866ac9d968e29fd57119a03e747536 (patch)
tree0a4e582681fb3eb42dd0b9351dc392edfe62be8e
parent93f6592bc79d570191fa28ae6994e88c56c0fbfd (diff)
downloadViper-bfbdfec664866ac9d968e29fd57119a03e747536.tar.gz
Viper-bfbdfec664866ac9d968e29fd57119a03e747536.zip
added filters
Fully implemented (I think? Maybe there's an edge case?), albeit it's missing "Updateable" and "Installed" filters, but they'll be added later
-rw-r--r--src/app/browser.js79
-rw-r--r--src/app/icons/filter.pngbin0 -> 1074 bytes
-rw-r--r--src/app/index.html12
-rw-r--r--src/app/main.css43
4 files changed, 132 insertions, 2 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index 8a8c6e4..b9ab165 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -4,6 +4,58 @@ var packages = [];
var Browser = {
maxentries: 50,
+ filters: {
+ get: () => {
+ let filtered = [];
+ let unfiltered = [];
+ let checks = browser.querySelectorAll("#filters .check");
+
+ for (let i = 0; i < checks.length; i++) {
+ if (! checks[i].classList.contains("checked")) {
+ filtered.push(checks[i].getAttribute("value"));
+ } else {
+ unfiltered.push(checks[i].getAttribute("value"));
+ }
+ }
+
+ return {
+ filtered,
+ unfiltered
+ };
+ },
+ isfiltered: (categories) => {
+ let filtered = Browser.filters.get().filtered;
+ let unfiltered = Browser.filters.get().unfiltered;
+ let state = false;
+ if (categories.length == 0) {return true}
+ for (let i = 0; i < categories.length; i++) {
+ if (filtered.includes(categories[i])) {
+ state = true;
+ continue
+ } else if (unfiltered.includes(categories[i])) {
+ state = false;
+ continue
+ }
+
+ state = true;
+ }
+
+ return state;
+ },
+ toggle: (state) => {
+ if (state == false) {
+ filters.classList.remove("shown");
+ return
+ }
+
+ filters.classList.toggle("shown");
+ let filterRect = filter.getBoundingClientRect();
+ let spacing = parseInt(getComputedStyle(filters).getPropertyValue("--spacing"));
+
+ filters.style.top = filterRect.bottom - spacing;
+ filters.style.right = filterRect.right - filterRect.left + filterRect.width;
+ },
+ },
toggle: (state) => {
if (state) {
browser.scrollTo(0, 0);
@@ -16,6 +68,7 @@ var Browser = {
return
} else if (! state) {
if (state != undefined) {
+ Browser.filters(false);
overlay.classList.remove("shown")
browser.classList.remove("shown")
return
@@ -38,11 +91,14 @@ var Browser = {
}
for (let i in packages) {
- if (i == Browser.maxentries) {Browser.endoflist();break}
new BrowserElFromObj(packages[i]);
}
},
loading: (string) => {
+ if (Browser.filters.get().unfiltered.length == 0) {
+ string = "No mods found...";
+ }
+
if (string) {
browserEntries.innerHTML = `<div class="loading">${string}</div>`;
}
@@ -52,6 +108,7 @@ var Browser = {
}
},
endoflist: () => {
+ if (browserEntries.querySelector(".message")) {return}
browserEntries.innerHTML += `<div class="message">${lang('gui.browser.endoflist')}</div>`
},
search: (string) => {
@@ -64,7 +121,6 @@ var Browser = {
}
for (let i = 0; i < res.length; i++) {
- if (i == Browser.maxentries) {Browser.endoflist();break}
new BrowserElFromObj(res[i].item);
}
},
@@ -114,11 +170,17 @@ function BrowserElFromObj(obj) {
url: pkg.package_url,
download: pkg.download_url,
version: pkg.version_number,
+ categories: pkg.categories,
description: pkg.description
})
}
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",
@@ -243,6 +305,7 @@ function normalize(items) {
let searchtimeout;
let searchstr = "";
search.addEventListener("keyup", () => {
+ Browser.filters.toggle(false);
clearTimeout(searchtimeout);
if (searchstr != search.value) {
@@ -258,3 +321,15 @@ search.addEventListener("keyup", () => {
}, 500)
}
})
+
+browser.addEventListener("scroll", () => {
+ Browser.filters.toggle(false);
+})
+
+Browser.toggle(true);
+Browser.filters.toggle();
+
+let checks = document.querySelectorAll(".check");
+for (let i = 0; i < checks.length; i++) {
+ checks[i].setAttribute("onclick", "this.classList.toggle('checked');Browser.loadfront();search.value = ''")
+}
diff --git a/src/app/icons/filter.png b/src/app/icons/filter.png
new file mode 100644
index 0000000..ade45ef
--- /dev/null
+++ b/src/app/icons/filter.png
Binary files differ
diff --git a/src/app/index.html b/src/app/index.html
index ac1e276..eab84e3 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -86,8 +86,20 @@
</div>
<div class="popup" id="browser">
+ <div class="overlay" id="filters">
+ <div class="checks">
+ <div class="check checked" value="Mods">Mods</div>
+ <div class="check checked" value="Skins">Skins</div>
+ <div class="check checked" value="Client-side">Client-side</div>
+ <div class="check" value="Server-side">Server-side</div>
+ </div>
+ </div>
+
<div class="misc">
<input id="search" placeholder="%%gui.browser.search%%">
+ <button id="filter" onclick="Browser.filters.toggle()">
+ <img src="icons/filter.png">
+ </button>
<button id="close" onclick="Browser.toggle(false)">
<img src="icons/close.png">
</button>
diff --git a/src/app/main.css b/src/app/main.css
index 18afc41..bd52df1 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -236,6 +236,49 @@ button {
justify-content: space-between;
}
+.popup .overlay {
+ z-index: 1;
+ color: white;
+ opacity: 0.0;
+ position: fixed;
+ pointer-events: none;
+ transform: scale(0.9);
+ background: var(--selbg);
+ backdrop-filter: blur(15px);
+ transition: 0.15s ease-in-out;
+ padding: calc(var(--spacing) / 2);
+ border-radius: calc(var(--spacing) / 2);
+}
+
+.popup .overlay.shown {
+ opacity: 1.0;
+ pointer-events: all;
+ transform: scale(1.0);
+}
+
+.checks {
+}
+
+.check {
+ display:flex;
+ cursor: pointer;
+}
+
+.check::before {
+ width: 1em;
+ height: 1em;
+ content: " ";
+ filter: brightness(1.3);
+ background: var(--selbg);
+ transition: 0.15s ease-in-out;
+ margin-right: calc(var(--spacing) / 3);
+ border-radius: calc(var(--spacing) / 4);
+}
+
+.check.checked::before {
+ background: rgb(var(--red));
+}
+
.option .text {font-weight: 600}
.option .text .desc {
opacity: 0.8;