|
|
@@ -42,7 +42,7 @@ |
|
|
|
flex: auto; |
|
|
|
width: 100%; |
|
|
|
height: 0; |
|
|
|
font-size: 2rem; |
|
|
|
font-size: 1.5rem; |
|
|
|
padding: 1rem; |
|
|
|
border: 0; |
|
|
|
outline: 0; |
|
|
@@ -111,12 +111,12 @@ |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
<div> |
|
|
|
<textarea aria-label="Number" name="number" placeholder="123"></textarea> |
|
|
|
<textarea aria-label="Name" name="name" placeholder="one hundred twenty three"></textarea> |
|
|
|
<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 } from './numerica.js'; |
|
|
|
import { stringify, parse, systems } from './numerica.js'; |
|
|
|
|
|
|
|
function MainForm(el) { |
|
|
|
const numberInput = el.querySelector('[name="number"]'); |
|
|
@@ -127,6 +127,7 @@ |
|
|
|
|
|
|
|
const options = { |
|
|
|
stringify: { |
|
|
|
system: systems.enUS.shortCount, |
|
|
|
makeGroupOptions: { |
|
|
|
shortenMillia: false, |
|
|
|
addTensDashes: true, |
|
|
@@ -136,8 +137,13 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
parse: { |
|
|
|
system: systems.enUS.shortCount, |
|
|
|
type: 'bigint', |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
const createNamePlaceholder = (theOptions) => { |
|
|
|
return stringify(1234, theOptions.stringify); |
|
|
|
}; |
|
|
|
|
|
|
|
numberInput.addEventListener('input', (e) => { |
|
|
@@ -148,7 +154,8 @@ |
|
|
|
} |
|
|
|
try { |
|
|
|
nameInput.value = stringify(e.currentTarget.value, options.stringify); |
|
|
|
} catch { |
|
|
|
} catch (err) { |
|
|
|
console.error(err); |
|
|
|
e.currentTarget.setCustomValidity('Invalid number.'); |
|
|
|
} |
|
|
|
}); |
|
|
@@ -163,7 +170,8 @@ |
|
|
|
numberInput.value = parse(e.currentTarget.value, options.parse) |
|
|
|
.toString(); |
|
|
|
// TODO group digits function from system. |
|
|
|
} catch { |
|
|
|
} catch (err) { |
|
|
|
console.error(err); |
|
|
|
e.currentTarget.setCustomValidity('Invalid name.'); |
|
|
|
} |
|
|
|
}); |
|
|
@@ -171,17 +179,22 @@ |
|
|
|
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); |
|
|
|
}); |
|
|
|
|
|
|
|
nameInput.placeholder = createNamePlaceholder(options); |
|
|
|
} |
|
|
|
const mainForm = window.document.getElementById('mainForm'); |
|
|
|
new MainForm(mainForm); |
|
|
|