<!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: 2rem;
padding: 1rem;
border: 0;
outline: 0;
resize: none;
box-sizing: border-box;
}
.main-form > div > textarea:invalid {
color: red;
}
.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>
<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="123"></textarea>
<textarea aria-label="Name" name="name" placeholder="one hundred twenty three"></textarea>
</div>
</form>
<script type="module">
import { stringify, parse } 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 options = {
stringify: {
makeGroupOptions: {
shortenMillia: false,
addTensDashes: true,
},
finalizeOptions: {
oneGroupPerLine: true,
},
},
parse: {
type: 'bigint',
}
};
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 {
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 {
e.currentTarget.setCustomValidity('Invalid name.');
}
});
addTensDashesCheckbox.addEventListener('change', (e) => {
options.stringify.makeGroupOptions.addTensDashes = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
});
shortenMilliaCheckbox.addEventListener('change', (e) => {
options.stringify.makeGroupOptions.shortenMillia = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
});
oneGroupPerLineCheckbox.addEventListener('change', (e) => {
options.stringify.finalizeOptions.oneGroupPerLine = e.currentTarget.checked;
numberInput.dispatchEvent(new Event('input'));
});
}
const mainForm = window.document.getElementById('mainForm');
new MainForm(mainForm);
</script>
</body>
</html>