Motschen/midnightdust-eu
1
0
Fork 0
mirror of https://github.com/Motschen/midnightdust-eu.git synced 2025-12-15 10:05:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve reliability of the version selector

Browse Source
This commit is contained in:
Martin Prokoph
2024-09-18 14:39:30 +02:00
parent 93732a4b27
commit 04b741b133
1 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/VersionDropdown.astro
View File

@@ -3,59 +3,63 @@ import { Icon } from 'astro-icon/components'
import { loaderList, versionList} from '../js/modversion.js'
---
<div id="version-dropdown">
<div class="">
<div class="wrapper">
<label for="loader-selector" class="sr-only">Select the Modloader</label>
<select
name="loader-selector"
id="loader-selector"
class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
aria-label="Choose the Modloader">
{ loaderList.map((loader) =>
<option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
)}
</select>
<label for="version-selector" class="sr-only">Select the Version</label>
<select
name="version-selector"
id="version-selector"
class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
aria-label="Choose the Version">
{ versionList.map((version) =>
<option value={version}>{version}</option>
)}
<Icon name="ion:copy-outline"></Icon>
</select>
</div>
<version-dropdown>
<div class="wrapper">
<label for="loader-selector" class="sr-only">Select the Modloader</label>
<select
name="loader-selector"
id="loader-selector"
class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
aria-label="Choose the Modloader">
{ loaderList.map((loader) =>
<option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
)}
</select>
<label for="version-selector" class="sr-only">Select the Version</label>
<select
name="version-selector"
id="version-selector"
class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
aria-label="Choose the Version">
{ versionList.map((version) =>
<option value={version}>{version}</option>
)}
<Icon name="ion:copy-outline"></Icon>
</select>
</div>
</div>
</version-dropdown>
<script>
import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
// Get the gradle.properties code block
const versionLabel = document.getElementById("midnightlib-version");
// Get the 2 selectors defined above
const loaderSelector = document.getElementById("loader-selector");
const versionSelector = document.getElementById("version-selector");
// Define the behaviour for our new type of HTML element.
class VersionDropdown extends HTMLElement {
connectedCallback() {
// Get the gradle.properties code block
const versionLabel = document.getElementById("midnightlib-version");
// Get the 2 selectors defined above
const loaderSelector = document.getElementById("loader-selector");
const versionSelector = document.getElementById("version-selector");
loaderSelector?.addEventListener("change", async (e) => {
const {
target: { value }, // Returns the current loader string
} = e;
loaderSelector?.addEventListener("change", async (e) => {
const {
target: { value }, // Returns the current loader string
} = e;
setLoaderVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
});
versionSelector?.addEventListener("change", async (e) => {
const {
target: { value }, // Returns the current version string
} = e;
setGameVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
});
setLoaderVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
});
versionSelector?.addEventListener("change", async (e) => {
const {
target: { value }, // Returns the current version string
} = e;
setGameVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
});
}
}
// Tell the browser to use our VersionDropdown class for <version-dropdown> elements.
customElements.define('version-dropdown', VersionDropdown);
</script>
<style lang="scss" is:global>