|
|
@@ -54,6 +54,11 @@ |
|
|
|
color: red; |
|
|
|
} |
|
|
|
|
|
|
|
.select { |
|
|
|
font: inherit; |
|
|
|
padding: 0 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.checkbox > input { |
|
|
|
position: absolute; |
|
|
|
left: -999999px; |
|
|
@@ -95,6 +100,19 @@ |
|
|
|
Options |
|
|
|
</legend> |
|
|
|
<div> |
|
|
|
<select class="select" aria-label="Locale" name="system.locale"> |
|
|
|
<option value="enUS"> |
|
|
|
English (US) |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
<select class="select" aria-label="Variant" name="system.count"> |
|
|
|
<option value="shortCount"> |
|
|
|
Short Count |
|
|
|
</option> |
|
|
|
<option value="longCount"> |
|
|
|
Long Count |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
<label class="checkbox"> |
|
|
|
<input type="checkbox" name="shortenMillia"> |
|
|
|
<span>Shorten millia</span> |
|
|
@@ -124,15 +142,15 @@ |
|
|
|
const addTensDashesCheckbox = el.querySelector('[name="addTensDashes"]'); |
|
|
|
const shortenMilliaCheckbox = el.querySelector('[name="shortenMillia"]'); |
|
|
|
const oneGroupPerLineCheckbox = el.querySelector('[name="oneGroupPerLine"]'); |
|
|
|
const localeSelect = el.querySelector('[name="system.locale"]'); |
|
|
|
const variantSelect = el.querySelector('[name="system.count"]'); |
|
|
|
|
|
|
|
const options = { |
|
|
|
stringify: { |
|
|
|
system: systems.enUS.shortCount, |
|
|
|
makeGroupOptions: {}, |
|
|
|
finalizeOptions: {}, |
|
|
|
}, |
|
|
|
parse: { |
|
|
|
system: systems.enUS.shortCount, |
|
|
|
type: 'bigint', |
|
|
|
}, |
|
|
|
}; |
|
|
@@ -189,9 +207,33 @@ |
|
|
|
nameInput.placeholder = createNamePlaceholder(options); |
|
|
|
}); |
|
|
|
|
|
|
|
localeSelect.addEventListener('change', (e) => { |
|
|
|
const variantOptions = Array.from(variantSelect.options); |
|
|
|
variantOptions.forEach((option) => { |
|
|
|
option.disabled = !systems[e.currentTarget.value][option.value]; |
|
|
|
}); |
|
|
|
variantSelect.value = variantOptions.find((option) => !option.disabled).value; |
|
|
|
options.stringify.system = systems[e.currentTarget.value][variantSelect.value]; |
|
|
|
options.parse.system = systems[e.currentTarget.value][variantSelect.value]; |
|
|
|
numberInput.dispatchEvent(new Event('input')); |
|
|
|
nameInput.placeholder = createNamePlaceholder(options); |
|
|
|
}); |
|
|
|
|
|
|
|
variantSelect.addEventListener('change', (e) => { |
|
|
|
options.stringify.system = systems[localeSelect.value][e.currentTarget.value]; |
|
|
|
options.parse.system = systems[localeSelect.value][e.currentTarget.value]; |
|
|
|
numberInput.dispatchEvent(new Event('input')); |
|
|
|
nameInput.placeholder = createNamePlaceholder(options); |
|
|
|
}); |
|
|
|
|
|
|
|
options.stringify.makeGroupOptions.addTensDashes = addTensDashesCheckbox.checked; |
|
|
|
options.stringify.makeGroupOptions.shortenMillia = shortenMilliaCheckbox.checked; |
|
|
|
options.stringify.finalizeOptions.oneGroupPerLine = oneGroupPerLineCheckbox.checked; |
|
|
|
options.stringify.system = systems[localeSelect.value][variantSelect.value]; |
|
|
|
options.parse.system = systems[localeSelect.value][variantSelect.value]; |
|
|
|
Array.from(variantSelect.options).forEach((option) => { |
|
|
|
option.disabled = !systems[localeSelect.value][option.value]; |
|
|
|
}); |
|
|
|
nameInput.placeholder = createNamePlaceholder(options); |
|
|
|
} |
|
|
|
const mainForm = window.document.getElementById('mainForm'); |
|
|
|