<!DOCTYPE html>
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>@modal-sh/numerica-core</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.main-form {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.main-form > fieldset {
display: contents;
}
.main-form > fieldset > div {
padding: 1rem;
box-sizing: border-box;
display: flex;
gap: 1rem;
}
.main-form > fieldset > legend {
position: absolute;
left: -999999px;
}
.main-form > div {
flex-direction: column;
display: flex;
flex: auto;
}
.main-form > div > textarea {
flex: auto;
width: 100%;
height: 0;
font-size: 1.5rem;
padding: 1rem;
border: 0;
outline: 0;
resize: none;
box-sizing: border-box;
}
.main-form > div > textarea:invalid {
color: red;
}
.select {
font: inherit;
padding: 0 1rem;
}
.checkbox > input {
position: absolute;
left: -999999px;
}
.checkbox > input + span {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3rem;
padding: 0 1rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
cursor: pointer;
}
.checkbox > input:checked + span {
border-color: #000;
background-color: #000;
color: #fff;
}
@media (min-width: 1080px) {
.main-form > div {
flex-direction: row;
}
.main-form > div > textarea {
width: 0;
height: 100%;
}
}
</style>
</head>
<body>
<form id="mainForm" class="main-form">
<fieldset>
<legend>
Options
</legend>
<div>
<select class="select" aria-label="Locale" name="system.locale">
<option value="enUS">
English (US)
</option>
<option value="enUK">
English (UK)
</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>
</label><label class="checkbox">
<input type="checkbox" name="addTensDashes" checked>
<span>Add dashes to tens</span>
</label><label class="checkbox">
<input type="checkbox" name="oneGroupPerLine" checked>
<span>One group per line</span>
</label><!--<label class="checkbox">
<input type="groupDigits" name="groupDigits" checked>
<span>Group digits</span>
</label>-->
</div>
</fieldset>
<div>
<textarea aria-label="Number" name="number" placeholder="1234"></textarea>
<textarea aria-label="Name" name="name" placeholder="one thousand
two hundred thirty-four"></textarea>
</div>
</form>
<script type="module">
import { stringify, parse, systems } from './numerica.js';
function MainForm(el) {
const numberInput = el.querySelector('[name="number"]');
const nameInput = el.querySelector('[name="name"]');
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: {
stringifyGroupsOptions: {},
mergeTokensOptions: {},
},
parse: {
type: 'bigint',
},
};
const createNamePlaceholder = (theOptions) => {
return stringify(1234, theOptions.stringify);
};
numberInput.addEventListener('input', (e) => {
e.currentTarget.setCustomValidity('');
nameInput.value = '';
if (e.currentTarget.value.trim() === '') {
return;
}
try {
nameInput.value = stringify(e.currentTarget.value, options.stringify);
} catch (err) {
console.error(err);
e.currentTarget.setCustomValidity('Invalid number.');
}
});
nameInput.addEventListener('input', (e) => {
e.currentTarget.setCustomValidity('');
numberInput.value = '';
if (e.currentTarget.value.trim() === '') {
return;
}
try {
numberInput.value = parse(e.currentTarget.value, options.parse)
.toString();
// TODO group digits function from system.
} catch (err) {
console.error(err);
e.currentTarget.setCustomValidity('Invalid name.');
}
});
addTensDashesCheckbox.addEventListener('change', (e) => {
options.stringify.stringifyGroupsOptions.addTensDashes = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
nameInput.placeholder = createNamePlaceholder(options);
});
shortenMilliaCheckbox.addEventListener('change', (e) => {
options.stringify.stringifyGroupsOptions.shortenMillia = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
nameInput.placeholder = createNamePlaceholder(options);
});
oneGroupPerLineCheckbox.addEventListener('change', (e) => {
options.stringify.mergeTokensOptions.oneGroupPerLine = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
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.stringifyGroupsOptions.addTensDashes = addTensDashesCheckbox.checked;
options.stringify.stringifyGroupsOptions.shortenMillia = shortenMilliaCheckbox.checked;
options.stringify.mergeTokensOptions.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');
new MainForm(mainForm);
</script>
</body>
</html>