diff --git a/docs/css/release-selector.css b/docs/css/release-selector.css index 7fe5dc9..393281d 100644 --- a/docs/css/release-selector.css +++ b/docs/css/release-selector.css @@ -57,12 +57,21 @@ .release-group { margin-bottom: 1.5rem; - border: 1px solid var(--md-default-fg-color--lightest); + border: 1px solid var(--md-default-fg-color--lightest) !important; border-radius: 6px; overflow: hidden; + padding: 0 !important; } -.release-group h4 { +.release-group > summary:before { + content: none; +} +.release-group > summary:after { + left: 0.725rem !important; + top: 1.125rem !important; +} + +.release-group summary { margin: 0; padding: 0.75rem 1rem; background: var(--md-default-fg-color--lightest); @@ -71,6 +80,12 @@ display: flex; align-items: center; gap: 0.5rem; + cursor: pointer; + font-weight: 500; +} + +.release-group summary:hover { + background: var(--md-primary-fg-color--light); } .prerelease-badge { @@ -122,7 +137,6 @@ } .download-details { - margin-left: auto; font-size: 0.85rem; opacity: 0.7; } @@ -139,28 +153,22 @@ .selector-row { flex-direction: column; } - + .selector-group { min-width: unset; } - - .release-group h4 { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - + .release-date { margin-left: 0; } - + .download-link { flex-direction: column; align-items: flex-start; gap: 0.5rem; } - + .download-details { margin-left: 0; } -} \ No newline at end of file +} diff --git a/docs/javascripts/release-selector.js b/docs/javascripts/release-selector.js index b03cab5..6217663 100644 --- a/docs/javascripts/release-selector.js +++ b/docs/javascripts/release-selector.js @@ -10,20 +10,23 @@ class ReleaseSelector { macos: "macOS", android: "Android", ios: "iOS", - "web-nothreads": "Web (No Threads)", - web: "Web", + "web-no": "Web (No Threads)", + "web-yes": "Web (With Threads)", }; this.engines = { v8: "V8", "qjs-ng": "QuickJS NG", + browser: "Browser", }; this.targets = { editor: "Editor", - "template-release": "Release Template", - "template-debug": "Debug Template", + template_release: "Release Template", + template_debug: "Debug Template", }; + + this.versions = ["4.4", "4.5"]; } async init() { @@ -58,13 +61,17 @@ class ReleaseSelector { const target = Object.keys(this.targets).find((key) => asset.name.includes(key), ); + const godotVersion = this.versions.find((key) => + asset.name.includes(key), + ); this.assets.push({ name: asset.name, downloadUrl: asset.browser_download_url, - os: os, - target: target, - jsEngine: jsEngine, + os, + target, + jsEngine, + godotVersion, releaseTag: release.tag_name, releaseDate: release.published_at, isPrerelease: release.prerelease, @@ -93,6 +100,7 @@ class ReleaseSelector { const osOptions = this.getUniqueValues("os"); const targetOptions = this.getUniqueValues("target"); const jsEngineOptions = this.getUniqueValues("jsEngine"); + const versionOptions = this.getUniqueValues("godotVersion"); container.innerHTML = `
@@ -101,24 +109,55 @@ class ReleaseSelector {
+
+ +
+ +
@@ -146,8 +185,7 @@ class ReleaseSelector { formatTargetName(target) { return ( - this.targets[target] || - target.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()) + this.targets[target] || this.targets[target.replace("-", "_")] || target ); } @@ -155,26 +193,44 @@ class ReleaseSelector { const osSelect = document.getElementById("os-select"); const targetSelect = document.getElementById("target-select"); const engineSelect = document.getElementById("engine-select"); + const versionSelect = document.getElementById("version-select"); const prereleaseCheckbox = document.getElementById("include-prerelease"); if (osSelect) { osSelect.addEventListener("change", () => { this.updateTargetOptions(); + this.updateEngineOptions(); + this.updateVersionOptions(); this.updateResults(); }); } - [targetSelect, engineSelect, prereleaseCheckbox].forEach( - (element) => { - if (element) { - element.addEventListener("change", () => this.updateResults()); - } - }, - ); + if (targetSelect) { + targetSelect.addEventListener("change", () => { + this.updateEngineOptions(); + this.updateVersionOptions(); + this.updateResults(); + }); + } + + if (engineSelect) { + engineSelect.addEventListener("change", () => { + this.updateVersionOptions(); + this.updateResults(); + }); + } + + [versionSelect, prereleaseCheckbox].forEach((element) => { + if (element) { + element.addEventListener("change", () => this.updateResults()); + } + }); // Set default values if (osSelect) osSelect.value = this.detectOS(); this.updateTargetOptions(); + this.updateEngineOptions(); + this.updateVersionOptions(); if (targetSelect) targetSelect.value = "editor"; if (engineSelect) engineSelect.value = "v8"; @@ -192,30 +248,100 @@ class ReleaseSelector { updateTargetOptions() { const osSelect = document.getElementById("os-select"); const targetSelect = document.getElementById("target-select"); - + if (!osSelect || !targetSelect) return; - + const selectedOS = osSelect.value; const currentTarget = targetSelect.value; - + const availableTargets = this.getUniqueValues("target", { os: selectedOS }); - + targetSelect.innerHTML = ` - - ${availableTargets.map((target) => ``).join("")} + + ${availableTargets + .filter((target) => target) + .map( + (target) => + ``, + ) + .join("")} `; - + // Restore selection if still available if (availableTargets.includes(currentTarget)) { targetSelect.value = currentTarget; } } + updateEngineOptions() { + const osSelect = document.getElementById("os-select"); + const targetSelect = document.getElementById("target-select"); + const engineSelect = document.getElementById("engine-select"); + + if (!engineSelect) return; + + const filters = { + os: osSelect?.value || "", + target: targetSelect?.value || "", + }; + const currentEngine = engineSelect.value; + + const availableEngines = this.getUniqueValues("jsEngine", filters); + + engineSelect.innerHTML = ` + + ${availableEngines + .filter((engine) => engine) + .map( + (engine) => + ``, + ) + .join("")} + `; + + // Restore selection if still available + if (availableEngines.includes(currentEngine)) { + engineSelect.value = currentEngine; + } + } + + updateVersionOptions() { + const osSelect = document.getElementById("os-select"); + const targetSelect = document.getElementById("target-select"); + const engineSelect = document.getElementById("engine-select"); + const versionSelect = document.getElementById("version-select"); + + if (!versionSelect) return; + + const filters = { + os: osSelect?.value || "", + target: targetSelect?.value || "", + jsEngine: engineSelect?.value || "", + }; + const currentVersion = versionSelect.value; + + const availableVersions = this.getUniqueValues("godotVersion", filters); + + versionSelect.innerHTML = ` + + ${availableVersions + .filter((version) => version) + .map((version) => ``) + .join("")} + `; + + // Restore selection if still available + if (availableVersions.includes(currentVersion)) { + versionSelect.value = currentVersion; + } + } + updateResults() { const filters = { os: document.getElementById("os-select")?.value || "", target: document.getElementById("target-select")?.value || "", jsEngine: document.getElementById("engine-select")?.value || "", + godotVersion: document.getElementById("version-select")?.value || "", }; const includePrerelease = @@ -256,31 +382,30 @@ class ReleaseSelector { } const html = sortedReleases - .map((releaseTag) => { + .map((releaseTag, index) => { const assets = groupedAssets[releaseTag]; const release = this.releases.find((r) => r.tag_name === releaseTag); return ` -
-

+
+ ${releaseTag} ${release.prerelease ? 'Pre-release' : ""} ${new Date(release.published_at).toLocaleDateString()} -

+
${assets .map( (asset) => ` ⬇️ - ${asset.name} - ${this.formatOSName(asset.os)} • ${this.formatTargetName(asset.target)} • ${asset.jsEngine.toUpperCase()} + ${this.formatOSName(asset.os)} • ${this.formatTargetName(asset.target)} • ${this.formatEngineName(asset.jsEngine)} • ${asset.godotVersion ?? "Unknown"} `, ) .join("")}
-
+ `; }) .join("");