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' import { loaderList, versionList} from '../js/modversion.js'
--- ---
<div id="version-dropdown"> <version-dropdown>
<div class=""> <div class="wrapper">
<div class="wrapper"> <label for="loader-selector" class="sr-only">Select the Modloader</label>
<label for="loader-selector" class="sr-only">Select the Modloader</label> <select
<select name="loader-selector"
name="loader-selector" id="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"
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">
aria-label="Choose the Modloader"> { loaderList.map((loader) =>
{ loaderList.map((loader) => <option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
<option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option> )}
)} </select>
</select> <label for="version-selector" class="sr-only">Select the Version</label>
<label for="version-selector" class="sr-only">Select the Version</label> <select
<select name="version-selector"
name="version-selector" id="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"
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">
aria-label="Choose the Version"> { versionList.map((version) =>
{ versionList.map((version) => <option value={version}>{version}</option>
<option value={version}>{version}</option> )}
)} <Icon name="ion:copy-outline"></Icon>
<Icon name="ion:copy-outline"></Icon> </select>
</select>
</div>
</div> </div>
</div> </version-dropdown>
<script> <script>
import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion"; import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
// Get the gradle.properties code block // Define the behaviour for our new type of HTML element.
const versionLabel = document.getElementById("midnightlib-version"); class VersionDropdown extends HTMLElement {
// Get the 2 selectors defined above connectedCallback() {
const loaderSelector = document.getElementById("loader-selector"); // Get the gradle.properties code block
const versionSelector = document.getElementById("version-selector"); 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) => { loaderSelector?.addEventListener("change", async (e) => {
const { const {
target: { value }, // Returns the current loader string target: { value }, // Returns the current loader string
} = e; } = e;
setLoaderVersion(value); setLoaderVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion(); if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
}); });
versionSelector?.addEventListener("change", async (e) => { versionSelector?.addEventListener("change", async (e) => {
const { const {
target: { value }, // Returns the current version string target: { value }, // Returns the current version string
} = e; } = e;
setGameVersion(value);
if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
});
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> </script>
<style lang="scss" is:global> <style lang="scss" is:global>