🧹 [Refactor bindFormattingSettings for maintainability]

Extracted DOM queries, state population, and save logic from `bindFormattingSettings` into dedicated helper functions (`getFormattingElements`, `populateFormattingSettings`, `saveFormattingSettings`).

Co-authored-by: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot] 2026-09-04 07:06:32 +00:00
parent 37cfd2144b
commit f6accf5699

View file

@ -382,64 +382,75 @@ function applySettings(): void {
); );
} }
function bindFormattingSettings(): void { function getFormattingElements() {
const themeSel = $<HTMLSelectElement>("#set-theme"); return {
const precision = $<HTMLInputElement>("#set-precision"); themeSel: $<HTMLSelectElement>("#set-theme"),
const groupSep = $<HTMLSelectElement>("#set-groupsep"); precision: $<HTMLInputElement>("#set-precision"),
const decimalSep = $<HTMLSelectElement>("#set-decimalsep"); groupSep: $<HTMLSelectElement>("#set-groupsep"),
const dateFmt = $<HTMLSelectElement>("#set-dateformat"); decimalSep: $<HTMLSelectElement>("#set-decimalsep"),
const langSel = $<HTMLSelectElement>("#set-lang"); dateFmt: $<HTMLSelectElement>("#set-dateformat"),
const fontSize = $<HTMLInputElement>("#set-fontsize"); langSel: $<HTMLSelectElement>("#set-lang"),
const resultsWidth = $<HTMLInputElement>("#set-resultswidth"); fontSize: $<HTMLInputElement>("#set-fontsize"),
resultsWidth: $<HTMLInputElement>("#set-resultswidth"),
};
}
themeSel.value = settings.theme; function populateFormattingSettings(): void {
precision.value = String(settings.precision); const els = getFormattingElements();
groupSep.value = settings.groupSeparator; els.themeSel.value = settings.theme;
decimalSep.value = settings.decimalSeparator; els.precision.value = String(settings.precision);
dateFmt.value = settings.dateFormat; els.groupSep.value = settings.groupSeparator;
langSel.value = settings.language; els.decimalSep.value = settings.decimalSeparator;
fontSize.value = String(settings.fontSize); els.dateFmt.value = settings.dateFormat;
resultsWidth.value = String(settings.resultsWidth); els.langSel.value = settings.language;
els.fontSize.value = String(settings.fontSize);
els.resultsWidth.value = String(settings.resultsWidth);
}
const save = () => { function saveFormattingSettings(): void {
settings.theme = themeSel.value as SettingsData["theme"]; const els = getFormattingElements();
settings.theme = els.themeSel.value as SettingsData["theme"];
settings.precision = Math.max( settings.precision = Math.max(
0, 0,
Math.min(15, Number(precision.value) || 2), Math.min(15, Number(els.precision.value) || 2),
); );
settings.groupSeparator = groupSep.value; settings.groupSeparator = els.groupSep.value;
settings.decimalSeparator = decimalSep.value; settings.decimalSeparator = els.decimalSep.value;
// "1,234,56" is unreadable — a comma decimal forces a space group separator // "1,234,56" is unreadable — a comma decimal forces a space group separator
if (settings.decimalSeparator === settings.groupSeparator) { if (settings.decimalSeparator === settings.groupSeparator) {
settings.groupSeparator = settings.decimalSeparator === "," ? " " : ","; settings.groupSeparator = settings.decimalSeparator === "," ? " " : ",";
groupSep.value = settings.groupSeparator; els.groupSep.value = settings.groupSeparator;
} }
settings.dateFormat = dateFmt.value as SettingsData["dateFormat"]; settings.dateFormat = els.dateFmt.value as SettingsData["dateFormat"];
settings.language = langSel.value; settings.language = els.langSel.value;
settings.fontSize = Math.max( settings.fontSize = Math.max(
10, 10,
Math.min(32, Number(fontSize.value) || 15), Math.min(32, Number(els.fontSize.value) || 15),
); );
settings.resultsWidth = Math.max( settings.resultsWidth = Math.max(
20, 20,
Math.min(60, Number(resultsWidth.value) || 42), Math.min(60, Number(els.resultsWidth.value) || 42),
); );
applySettings(); applySettings();
void saveSettings(settings); void saveSettings(settings);
}; }
function bindFormattingSettings(): void {
populateFormattingSettings();
const els = getFormattingElements();
for (const el of [ for (const el of [
themeSel, els.themeSel,
precision, els.precision,
groupSep, els.groupSep,
decimalSep, els.decimalSep,
dateFmt, els.dateFmt,
langSel, els.langSel,
fontSize, els.fontSize,
]) { ]) {
el.addEventListener("change", save); el.addEventListener("change", saveFormattingSettings);
} }
resultsWidth.addEventListener("input", save); // live while sliding els.resultsWidth.addEventListener("input", saveFormattingSettings); // live while sliding
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
if (settings.theme === "system") applySettings(); if (settings.theme === "system") applySettings();