Browse Source

Update example

Render system selection.
master
TheoryOfNekomata 1 year ago
parent
commit
930a5c644b
1 changed files with 44 additions and 2 deletions
  1. +44
    -2
      packages/example-web/index.html

+ 44
- 2
packages/example-web/index.html View File

@@ -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');


Loading…
Cancel
Save