convert js/browser.js to a CommonJS module

And `js/popups.js`, but it was already technically a CommonJS module, it
was just leftover in `index.html` due to `js/browser.js` not being a
CommonJS module.

5 files changed, 92 insertions, 79 deletions

diff --git a/src/app/index.html b/src/app/index.html
index a591a26..ffc13de 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -205,10 +205,10 @@
 
 			<div class="misc">
 				<input class="search" placeholder="%%gui.search%%">
-				<button id="filter" onclick="Browser.filters.toggle()">
+				<button id="filter" onclick="browser.filters.toggle()">
 					<img src="icons/filter.png">
 				</button>
-				<button id="close" onclick="Browser.toggle(false)">
+				<button id="close" onclick="browser.toggle(false)">
 					<img src="icons/close.png">
 				</button>
 			</div>
@@ -218,7 +218,7 @@
 		</div>
 		<div class="popup small blur" id="preview">
 			<div class="misc fixed vertical">
-				<button id="close" onclick="Preview.hide()">
+				<button id="close" onclick="browser.preview.hide()">
 					<img src="icons/close.png">
 				</button>
 				<button id="external" onclick="">
@@ -302,7 +302,7 @@
 										<img src="icons/downloads.png">
 										%%gui.mods.install%%
 									</button>
-									<button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">
+									<button id="findmod" class="bg-blue2" onclick="browser.toggle(true)">
 										<img src="icons/search.png">
 										%%gui.mods.find%%
 									</button>
@@ -333,7 +333,5 @@
 		</div>
 
 		<script src="main.js"></script>
-		<script src="js/popups.js"></script>
-		<script src="js/browser.js"></script>
 	</body>
 </html>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index ec5a31d..d94b970 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -1,18 +1,28 @@
+const Fuse = require("fuse.js");
+const ipcRenderer = require("electron").ipcRenderer;
+
+const lang = require("../../lang");
+
+const popups = require("./popups");
+const toasts = require("./toasts");
+const request = require("./request");
+
 var browser_fuse;
 var packages = [];
 
 var packagecount = 0;
 
-var mod_versions = {};
+var browser_el = document.getElementById("browser")
 
-var Browser = {
+var browser = {
 	maxentries: 50,
+	mod_versions: {},
 	filters: {
 		getpkgs: () => {
 			let pkgs = [];
 			let other = [];
 			for (let i in packages) {
-				if (! Browser.filters.isfiltered(packages[i].categories)) {
+				if (! browser.filters.isfiltered(packages[i].categories)) {
 					pkgs.push(packages[i]);
 				} else {
 					other.push(packages[i]);
@@ -24,7 +34,7 @@ var Browser = {
 		get: () => {
 			let filtered = [];
 			let unfiltered = [];
-			let checks = browser.querySelectorAll("#filters .check");
+			let checks = browser_el.querySelectorAll("#filters .check");
 
 			for (let i = 0; i < checks.length; i++) {
 				if (! checks[i].classList.contains("checked")) {
@@ -40,8 +50,8 @@ var Browser = {
 			};
 		},
 		isfiltered: (categories) => {
-			let filtered = Browser.filters.get().filtered;
-			let unfiltered = Browser.filters.get().unfiltered;
+			let filtered = browser.filters.get().filtered;
+			let unfiltered = browser.filters.get().unfiltered;
 			let state = false;
 
 			let filters = [
@@ -86,15 +96,15 @@ var Browser = {
 		},
 	},
 	toggle: (state) => {
-		browser.scrollTo(0, 0);
+		browser_el.scrollTo(0, 0);
 		popups.set("#browser", state);
 
 		if (state) {
 			if (browserEntries.querySelectorAll(".el").length == 0) {
-				Browser.loadfront();
+				browser.loadfront();
 			}
 		} else if (state === false) {
-			Browser.filters.toggle(false);
+			browser.filters.toggle(false);
 		}
 	},
 	install: (package_obj, clear_queue = false) => {
@@ -140,7 +150,7 @@ var Browser = {
 			}
 
 			let install = () => {
-				return Browser.install({...properties});
+				return browser.install({...properties});
 			}
 
 			packages[i].install = install;
@@ -148,7 +158,7 @@ var Browser = {
 			packages[i].local_version = local_version;
 
 			if (local_version) {
-				mod_versions[normalized] = {
+				browser.mod_versions[normalized] = {
 					install: install,
 					has_update: has_update,
 					local_name: local_name,
@@ -160,7 +170,7 @@ var Browser = {
 		}
 	},
 	loadfront: async () => {
-		Browser.loading();
+		browser.loading();
 
 		packagecount = 0;
 		
@@ -181,26 +191,26 @@ var Browser = {
 				console.error(err)
 			}
 
-			Browser.add_pkg_properties();
+			browser.add_pkg_properties();
 
 			browser_fuse = new Fuse(packages, {
 				keys: ["full_name"]
 			})
 		}
 		
-		let pkgs = Browser.filters.getpkgs();
+		let pkgs = browser.filters.getpkgs();
 		for (let i in pkgs) {
-			if (packagecount >= Browser.maxentries) {
-				Browser.endoflist();
+			if (packagecount >= browser.maxentries) {
+				browser.endoflist();
 				break
 			}
 
-			new BrowserElFromObj(pkgs[i]);
+			browser.mod_el_from_obj(pkgs[i]);
 			packagecount++;
 		}
 	},
 	loading: (string) => {
-		if (Browser.filters.get().unfiltered.length == 0) {
+		if (browser.filters.get().unfiltered.length == 0) {
 			string = lang("gui.browser.no_results");
 		}
 
@@ -214,7 +224,7 @@ var Browser = {
 	},
 	endoflist: (is_end) => {
 		let pkgs = [];
-		let filtered = Browser.filters.getpkgs();
+		let filtered = browser.filters.getpkgs();
 		for (let i = 0; i < filtered.length; i++) {
 			if (filtered[packagecount + i]) {
 				pkgs.push(filtered[packagecount + i]);
@@ -228,26 +238,26 @@ var Browser = {
 		}
 
 		if (pkgs.length == 0 || is_end) {
-			Browser.msg(`${lang('gui.browser.endoflist')}`);
+			browser.msg(`${lang('gui.browser.endoflist')}`);
 			return
 		}
 
-		Browser.msg(`<button id="loadmore">` +
+		browser.msg(`<button id="loadmore">` +
 				`<img src="icons/down.png">` +
 				`<span>${lang("gui.browser.load_more")}</span>` +
 			`</button>`);
 
 		loadmore.addEventListener("click", () => {
-			Browser.loadpkgs(pkgs);
-			Browser.endoflist(! pkgs.length);
+			browser.loadpkgs(pkgs);
+			browser.endoflist(! pkgs.length);
 		})
 	},
 	search: (string) => {
-		Browser.loading();
+		browser.loading();
 		let res = browser_fuse.search(string);
 
 		if (res.length < 1) {
-			Browser.loading(lang("gui.browser.no_results"));
+			browser.loading(lang("gui.browser.no_results"));
 			return
 		}
 
@@ -255,14 +265,14 @@ var Browser = {
 
 		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);
+			if (count >= browser.maxentries) {break}
+			if (browser.filters.isfiltered(res[i].item.categories)) {continue}
+			browser.mod_el_from_obj(res[i].item);
 			count++;
 		}
 
 		if (count < 1) {
-			Browser.loading(lang("gui.browser.no_results"));
+			browser.loading(lang("gui.browser.no_results"));
 		}
 	},
 	setbutton: (mod, string, icon) => {
@@ -281,7 +291,7 @@ var Browser = {
 		} else {
 			let make = (str) => {
 				if (browserEntries.querySelector(`#mod-${str}`)) {
-					return Browser.setbutton(str, string, icon);
+					return browser.setbutton(str, string, icon);
 				} else {
 					return false;
 				}
@@ -313,17 +323,17 @@ var Browser = {
 
 		let count = 0;
 		for (let i in pkgs) {
-			if (count >= Browser.maxentries) {
+			if (count >= browser.maxentries) {
 				if (pkgs[i] === undefined) {
-					Browser.endoflist(true);
+					browser.endoflist(true);
 				}
 
-				Browser.endoflist();
+				browser.endoflist();
 				break
 			}
 
 			try {
-				new BrowserElFromObj(pkgs[i]);
+				browser.mod_el_from_obj(pkgs[i]);
 			}catch(e) {}
 
 			count++;
@@ -339,18 +349,14 @@ var Browser = {
 	}
 }
 
-setInterval(Browser.add_pkg_properties, 1500);
+setInterval(browser.add_pkg_properties, 1500);
 
 if (navigator.onLine) {
-	Browser.loadfront();
-}
-
-function openExternal(url) {
-	require("electron").shell.openExternal(url);
+	browser.loadfront();
 }
 
 var view = document.querySelector(".popup#preview webview");
-var Preview = {
+browser.preview = {
 	show: () => {
 		preview.classList.add("shown");
 	},
@@ -358,16 +364,21 @@ var Preview = {
 		preview.classList.remove("shown");
 	},
 	set: (url, autoshow) => {
-		if (autoshow != false) {Preview.show()}
+		if (autoshow != false) {browser.preview.show()}
+
 		view.src = url;
-		document.querySelector("#preview #external").setAttribute("onclick", `openExternal("${url}")`);
+
+		document.querySelector("#preview #external").setAttribute(
+			"onclick",
+			`require("electron").shell.openExternal("${url}")`
+		)
 	}
 }
 
-function BrowserElFromObj(obj) {
+browser.mod_el_from_obj = (obj) => {
 	let pkg = {...obj, ...obj.versions[0]};
 
-	new BrowserEl({
+	browser.mod_el({
 		pkg: pkg,
 		title: pkg.name,
 		image: pkg.icon,
@@ -381,8 +392,8 @@ function BrowserElFromObj(obj) {
 	})
 }
 
-function BrowserEl(properties) {
-	if (Browser.filters.isfiltered(properties.categories)) {return}
+browser.mod_el = (properties) => {
+	if (browser.filters.isfiltered(properties.categories)) {return}
 
 	properties = {
 		title: "No name",
@@ -435,7 +446,7 @@ function BrowserEl(properties) {
 				<img src="icons/${installicon}.png">
 				<span>${installstr}</span>
 			</button>
-			<button class="info" onclick="Preview.set('${properties.url}')">
+			<button class="info" onclick="browser.preview.set('${properties.url}')">
 				<img src="icons/open.png">
 				<span>${lang('gui.browser.view')}</span>
 			</button>
@@ -449,7 +460,7 @@ function BrowserEl(properties) {
 	`
 
 	entry.querySelector("button.install").addEventListener("click", () => {
-		Browser.install(properties);
+		browser.install(properties);
 	})
 
 	browserEntries.appendChild(entry);
@@ -466,16 +477,16 @@ function add_recent_toast(name, timeout = 3000) {
 	}, timeout)
 }
 
-ipcRenderer.on("removed-mod", (event, mod) => {
+ipcRenderer.on("removed-mod", (_, mod) => {
 	set_buttons(true);
-	Browser.setbutton(mod.name, lang("gui.browser.install"), "downloads");
+	browser.setbutton(mod.name, lang("gui.browser.install"), "downloads");
 
 	if (mod.manifest_name) {
-		Browser.setbutton(mod.manifest_name, lang("gui.browser.install"), "downloads");
+		browser.setbutton(mod.manifest_name, lang("gui.browser.install"), "downloads");
 	}
 })
 
-ipcRenderer.on("failed-mod", (event, modname) => {
+ipcRenderer.on("failed-mod", (_, modname) => {
 	if (recent_toasts["failed" + modname]) {return}
 	add_recent_toast("failed" + modname);
 
@@ -488,7 +499,7 @@ ipcRenderer.on("failed-mod", (event, modname) => {
 	})
 })
 
-ipcRenderer.on("legacy-duped-mod", (event, modname) => {
+ipcRenderer.on("legacy-duped-mod", (_, modname) => {
 	if (recent_toasts["duped" + modname]) {return}
 	add_recent_toast("duped" + modname);
 
@@ -501,7 +512,7 @@ ipcRenderer.on("legacy-duped-mod", (event, modname) => {
 	})
 })
 
-ipcRenderer.on("no-internet", (event, modname) => {
+ipcRenderer.on("no-internet", () => {
 	set_buttons(true);
 	toasts.show({
 		timeout: 10000,
@@ -511,14 +522,14 @@ ipcRenderer.on("no-internet", (event, modname) => {
 	})
 })
 
-ipcRenderer.on("installed-mod", (event, mod) => {
+ipcRenderer.on("installed-mod", (_, mod) => {
 	if (recent_toasts["installed" + mod.name]) {return}
 	add_recent_toast("installed" + mod.name);
 
 	let name = mod.fancy_name || mod.name;
 
 	set_buttons(true);
-	Browser.setbutton(name, lang("gui.browser.reinstall"), "redo");
+	browser.setbutton(name, lang("gui.browser.reinstall"), "redo");
 
 	if (mod.malformed) {
 		toasts.show({
@@ -549,18 +560,18 @@ let searchtimeout;
 let searchstr = "";
 let search = document.querySelector("#browser .search");
 search.addEventListener("keyup", () => {
-	Browser.filters.toggle(false);
+	browser.filters.toggle(false);
 	clearTimeout(searchtimeout);
 
 	if (searchstr != search.value) {
 		if (search.value.replaceAll(" ", "") == "") {
 			searchstr = "";
-			Browser.loadfront();
+			browser.loadfront();
 			return
 		}
 
 		searchtimeout = setTimeout(() => {
-			Browser.search(search.value);
+			browser.search(search.value);
 			searchstr = search.value;
 		}, 500)
 	}
@@ -568,16 +579,16 @@ search.addEventListener("keyup", () => {
 
 let mouse_events = ["scroll", "mousedown", "touchdown"];
 mouse_events.forEach((event) => {
-	document.body.addEventListener(event, (e) => {
+	document.body.addEventListener(event, () => {
 		let mouse_at = document.elementsFromPoint(mouseX, mouseY);
 
 		if (! mouse_at.includes(document.querySelector("#preview"))) {
-			Preview.hide();
+			browser.preview.hide();
 		}
 
 		if (! mouse_at.includes(document.querySelector("#filter"))
 			&& ! mouse_at.includes(document.querySelector(".overlay"))) {
-			Browser.filters.toggle(false);
+			browser.filters.toggle(false);
 		}
 	})
 });
@@ -605,7 +616,7 @@ view.addEventListener("did-start-loading", () => {
 
 let mouseY = 0;
 let mouseX = 0;
-browser.addEventListener("mousemove", (event) => {
+browser_el.addEventListener("mousemove", (event) => {
 	mouseY = event.clientY;
 	mouseX = event.clientX;
 })
@@ -613,6 +624,8 @@ browser.addEventListener("mousemove", (event) => {
 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 = ''"
+		"this.classList.toggle('checked');browser.loadfront();search.value = ''"
 	)
 }
+
+module.exports = browser;
diff --git a/src/app/js/dom_events.js b/src/app/js/dom_events.js
index 73e9998..c16a838 100644
--- a/src/app/js/dom_events.js
+++ b/src/app/js/dom_events.js
@@ -27,7 +27,7 @@ document.addEventListener("drop", (e) => {
 
 document.body.addEventListener("keyup", (e) => {
 	if (e.key == "Escape") {
-		Browser.toggle(false);
+		browser.toggle(false);
 		settings.popup.toggle(false);
 	}
 })
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 7110d7e..f463ddb 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -151,8 +151,8 @@ mods.load = (mods_obj) => {
 		let image_el = image_container.querySelector("img")
 		let image_blur_el = image_container.querySelector("img.blur")
 
-		if (mod_versions[mod]) {
-			image_el.src = mod_versions[mod].package.versions[0].icon;
+		if (browser.mod_versions[mod]) {
+			image_el.src = browser.mod_versions[mod].package.versions[0].icon;
 		}
 
 		if (image_el.getAttribute("src") &&
@@ -166,13 +166,13 @@ mods.load = (mods_obj) => {
 			image_container.parentElement.classList.add("has-icon");
 		}
 
-		if (mod_versions[mod]
-			&& mod_versions[mod].has_update) {
+		if (browser.mod_versions[mod]
+			&& browser.mod_versions[mod].has_update) {
 
 			mod_els[i].querySelector(".update").style.display = null;
 
 			mod_els[i].querySelector(".update").setAttribute(
-				"onclick", `mod_versions["${mod}"].install()`
+				"onclick", `browser.mod_versions["${mod}"].install()`
 			)
 
 			if (mod_update_els.includes(mod_els[i].id)) {
@@ -188,8 +188,8 @@ mods.load = (mods_obj) => {
 			mod_el.classList.add("no-animation");
 
 			mod_el.querySelector(".switch").addEventListener("click", () => {
-				if (mod_versions[mod].local_name) {
-					mods.toggle(mod_versions[mod].local_name);
+				if (browser.mod_versions[mod].local_name) {
+					mods.toggle(browser.mod_versions[mod].local_name);
 				}
 			})
 
diff --git a/src/app/main.js b/src/app/main.js
index 04055a8..b33c88b 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -32,6 +32,8 @@ const toasts = require("./js/toasts");
 const update = require("./js/update");
 const events = require("./js/events");
 const launch = require("./js/launch");
+const popups = require("./js/popups");
+const browser = require("./js/browser");
 const tooltip = require("./js/tooltip");
 const version = require("./js/version");
 const request = require("./js/request");