Add the possibility to activate and deactivate mods

This commit is contained in:
2026-03-01 20:17:08 +01:00
parent 0e895fe1fb
commit 380b9a4604
5 changed files with 122 additions and 58 deletions

View File

@@ -170,6 +170,11 @@
<div class="horizontal-div">
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="uninstall-mod-button">Uninstall</a>
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
<p>Activated:</p>
<label class="checkbox-container">
<input type="checkbox" name="activated-mod" id="activated-mod" />
<span class="checkmark"></span>
</label>
</div>
</div>
@@ -221,7 +226,7 @@
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
</div>
</div>
<label class="lace-pin-checkbox-container">
<label class="checkbox-container">
<input type="checkbox" name="lace-pin" id="lace-pin" />
<span class="checkmark"></span>
Lace Pin

View File

@@ -98,14 +98,15 @@ async function navigate(page) {
toggleSelectedListButton("sort-menu", installedSortFilter);
setSortOrderButton();
const { modsInfo, installedTotalCount } = await nexus.getMods(page);
const { installedModsInfo, installedTotalCount } = await mods.getMods(page);
installedModsTotalCount = installedTotalCount;
if (modsInfo == []) {
if (installedModsInfo == []) {
break;
}
for (const modInfo of modsInfo) {
for (const modInfo of installedModsInfo) {
const installedModTemplateCopy = installedModTemplate.content.cloneNode(true);
if (modInfo.name) {
const modTitleText = installedModTemplateCopy.getElementById("mod-title");
modTitleText.innerText = modInfo.name;
@@ -143,6 +144,21 @@ async function navigate(page) {
modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updatedAt.slice(0, 10)}`;
}
const isActivatedCheckbox = installedModTemplateCopy.getElementById("activated-mod");
if (modInfo.activated) {
isActivatedCheckbox.checked = true;
}
isActivatedCheckbox.addEventListener("change", async function () {
if (this.checked) {
mods.activateMods(modInfo.modId);
searchInstalledMods();
} else {
mods.deactivateMods(modInfo.modId);
searchInstalledMods();
}
});
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.modId}`;
const modLinkButton = installedModTemplateCopy.getElementById("external-link");
@@ -156,7 +172,7 @@ async function navigate(page) {
const uninstallModButton = installedModTemplateCopy.getElementById("uninstall-mod-button");
uninstallModButton.addEventListener("click", async function (event) {
event.preventDefault();
await nexus.uninstall(modInfo.modId);
await mods.uninstall(modInfo.modId);
navigate("refresh");
});
@@ -182,12 +198,12 @@ async function navigate(page) {
toggleSelectedListButton("sort-menu", onlineSortFilter);
setSortOrderButton();
const { mods, onlineTotalCount } = await nexus.getMods(page);
const { onlineModsInfo, onlineTotalCount } = await mods.getMods(page);
onlineModsTotalCount = onlineTotalCount;
if (mods == undefined) {
if (onlineModsInfo == undefined) {
break;
}
for (const mod of mods) {
for (const mod of onlineModsInfo) {
if (mod.name == undefined) {
continue;
}
@@ -448,7 +464,7 @@ async function setBepinexVersion() {
async function searchInstalledMods() {
const searchInput = document.getElementById("search-input");
searchValueInstalled = searchInput.value;
await nexus.searchInstalled(searchValueInstalled, installedOffset, installedModsCount, installedSortFilter, installedSortOrder);
await mods.searchInstalled(searchValueInstalled, installedOffset, installedModsCount, installedSortFilter, installedSortOrder);
await navigate("refresh");
}

View File

@@ -347,7 +347,7 @@ body {
background: var(--primary-color);
}
.lace-pin-checkbox-container {
.checkbox-container {
display: flex;
align-items: center;
position: relative;
@@ -356,13 +356,13 @@ body {
user-select: none;
}
.lace-pin-checkbox-container input {
.checkbox-container input {
opacity: 0;
height: 0;
width: 0;
}
.lace-pin-checkbox-container .checkmark {
.checkbox-container .checkmark {
position: absolute;
left: 0;
height: 30px;
@@ -373,27 +373,27 @@ body {
transition: all 0.2s ease;
}
.lace-pin-checkbox-container:hover .checkmark {
.checkbox-container:hover .checkmark {
background: var(--darker-transparent-black);
border-color: var(--primary-color);
}
.lace-pin-checkbox-container input:checked ~ .checkmark {
.checkbox-container input:checked ~ .checkmark {
background: var(--primary-color);
border-color: var(--primary-color);
}
.lace-pin-checkbox-container .checkmark:after {
.checkbox-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.lace-pin-checkbox-container input:checked ~ .checkmark:after {
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.lace-pin-checkbox-container .checkmark:after {
.checkbox-container .checkmark:after {
left: 8px;
width: 10px;
height: 20px;