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

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
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;