Convert year_picker to TypeScript; drop inline f-string script (issue #17)

- Add ts/year_picker.ts: typed onSwap port of the year-picker glue. Datepicker
  declared as an ambient global (vendored UMD); PickerElement types the
  _pickerInstance prop the Alpine toggle button reaches
- Remove the duplicate inline <script> from the YearPicker component (was a JS
  blob in a Python f-string — the CLAUDE.md anti-pattern) and the orphaned
  games/static/js/year_picker.js that nothing loaded; the component now declares
  dist/year_picker.js as media alongside the datepicker UMD bundle
- Module defer semantics keep the classic UMD bundle running before the
  deferred year_picker module, so Datepicker is defined in time

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 17:35:28 +02:00
parent 1decf588c1
commit e72d44b9be
3 changed files with 64 additions and 79 deletions
-38
View File
@@ -1,38 +0,0 @@
import { onSwap } from "./utils.js";
onSwap("#year-picker-input", function(pickerEl) {
const selectedYear = pickerEl.dataset.selectedYear;
const urlTemplate = pickerEl.dataset.urlTemplate;
const currentYear = new Date().getFullYear();
const availableYears = new Set(
pickerEl.dataset.availableYears
.split(",")
.map(s => parseInt(s.trim()))
.filter(n => !isNaN(n))
);
const picker = new Datepicker(pickerEl, {
pickLevel: 2,
format: "yyyy",
minDate: new Date(1999, 0, 1),
maxDate: new Date(currentYear, 11, 31),
autohide: false,
orientation: "bottom end",
showOnClick: false,
showOnFocus: false,
beforeShowYear: (date) => ({ enabled: availableYears.has(date.getFullYear()) }),
});
pickerEl._pickerInstance = picker;
picker.element.addEventListener("changeDate", (event) => {
const year = event.detail.date?.getFullYear();
if (year && urlTemplate) {
window.location.href = urlTemplate.replace("__year__", year);
}
});
if (selectedYear) {
picker.dates = [new Date(parseInt(selectedYear), 0, 1)];
picker.update();
}
});