modal-soft
/
numerica

<!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>
					</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&#x0A;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: {
						makeGroupOptions: {},
						finalizeOptions: {},
					},
					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.makeGroupOptions.addTensDashes = e.currentTarget.checked;
					numberInput.dispatchEvent(new Event('input'));
					nameInput.placeholder = createNamePlaceholder(options);
				});

				shortenMilliaCheckbox.addEventListener('change', (e) => {
					options.stringify.makeGroupOptions.shortenMillia = e.currentTarget.checked;
					numberInput.dispatchEvent(new Event('input'));
					nameInput.placeholder = createNamePlaceholder(options);
				});

				oneGroupPerLineCheckbox.addEventListener('change', (e) => {
					options.stringify.finalizeOptions.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.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');
			new MainForm(mainForm);
		</script>
	</body>
</html>