diff options
-rw-r--r-- | src/app/index.html | 10 | ||||
-rw-r--r-- | src/app/js/browser.js | 143 | ||||
-rw-r--r-- | src/app/js/dom_events.js | 2 | ||||
-rw-r--r-- | src/app/js/mods.js | 14 | ||||
-rw-r--r-- | src/app/main.js | 2 |
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"); |