diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/css/grid.css | 15 | ||||
| -rw-r--r-- | src/app/index.html | 3 | ||||
| -rw-r--r-- | src/app/js/mods.js | 37 |
3 files changed, 50 insertions, 5 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css index be405e0..2096b9b 100644 --- a/src/app/css/grid.css +++ b/src/app/css/grid.css @@ -1,6 +1,6 @@ @import "theming.css"; -.grid .el, .popup .misc, .popup .loading { +.grid, .grid .el, .popup .misc, .popup .loading { --spacing: calc(var(--padding) / 2); --height: calc(var(--padding) * 3.5); --mischeight: calc(var(--padding) * 1.5); @@ -22,7 +22,7 @@ animation-name: none; } -.grid .el, .popup .search, +.grid .el, input.search, .popup #close, .popup .misc button, .option .actions select, .option .actions input { color: white; @@ -36,7 +36,7 @@ width: calc(50% - var(--spacing) * 4); } -.popup .misc, .popup .search, .option .actions input { +.popup .misc, input.search, .option .actions input { --height: var(--mischeight); } @@ -53,7 +53,7 @@ position: fixed; } -.popup .search, +input.search, .option .actions input, .option .actions select { border: none; @@ -62,7 +62,7 @@ width: calc(100% - var(--spacing) * 2); } -.popup .search:focus, +input.search:focus, .option .actions input:focus, .option .actions button:active { filter: brightness(1.5); @@ -138,6 +138,11 @@ border-radius: var(--spacing); } +.grid input { + margin: 0; + width: 100%; +} + #modsdiv .el:has(.switch:not(.on)) .image img { opacity: 0.5; } diff --git a/src/app/index.html b/src/app/index.html index 5421a3f..17e5cf6 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -369,6 +369,9 @@ </button> </div> </div> + <div class="line"> + <input id="mods-search" class="search default-selection" placeholder="%%gui.search%%"> + </div> </div> </div> <div id="nsRelease" class="scroll-selection hidden section"></div> diff --git a/src/app/js/mods.js b/src/app/js/mods.js index 9eb528b..511c338 100644 --- a/src/app/js/mods.js +++ b/src/app/js/mods.js @@ -203,6 +203,43 @@ mods.load = (mods_obj) => { } } +// attempts to filter `#modsdiv` with `query` +mods.search = (query) => { + // if no `query` is given, use the search input's value + if (! query) { + query = mods.search.el.value; + } + + // normalizes `string` + let normalize = (string) => { + return string + .trim().toLowerCase() + .replaceAll(" ", "").replaceAll(".", ""); + } + + // normalize `query` + query = normalize(query); + + // get all mod elements + let mod_els = document.querySelectorAll("#modsdiv .el"); + + // run through all the mod elements + for (let mod_el of mod_els) { + // get the normalized name of the mod + let name = normalize(mod_el.querySelector(".title").innerText); + + // if the name has `query` in it, show it + if (name.match(query)) { + mod_el.style.display = null; + } else { // hide if it doesn't match + mod_el.style.display = "none"; + } + } +} + +mods.search.el = document.getElementById("mods-search"); +mods.search.el.addEventListener("keyup", () => {mods.search()}) + mods.remove = (mod) => { if (mod.toLowerCase().match(/^northstar\./)) { if (! confirm(lang("gui.mods.required_confirm"))) { |