Gets the name of a number, even if it's stupidly big. Supersedes TheoryOfNekomata/number-name.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

247 lines
7.0 KiB

  1. <!DOCTYPE html>
  2. <html lang="en-PH">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>@modal-sh/numerica-core</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. .main-form {
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. display: flex;
  15. flex-direction: column;
  16. align-items: stretch;
  17. }
  18. .main-form > fieldset {
  19. display: contents;
  20. }
  21. .main-form > fieldset > div {
  22. padding: 1rem;
  23. box-sizing: border-box;
  24. display: flex;
  25. gap: 1rem;
  26. }
  27. .main-form > fieldset > legend {
  28. position: absolute;
  29. left: -999999px;
  30. }
  31. .main-form > div {
  32. flex-direction: column;
  33. display: flex;
  34. flex: auto;
  35. }
  36. .main-form > div > textarea {
  37. flex: auto;
  38. width: 100%;
  39. height: 0;
  40. font-size: 1.5rem;
  41. padding: 1rem;
  42. border: 0;
  43. outline: 0;
  44. resize: none;
  45. box-sizing: border-box;
  46. }
  47. .main-form > div > textarea:invalid {
  48. color: red;
  49. }
  50. .select {
  51. font: inherit;
  52. padding: 0 1rem;
  53. }
  54. .checkbox > input {
  55. position: absolute;
  56. left: -999999px;
  57. }
  58. .checkbox > input + span {
  59. display: inline-flex;
  60. align-items: center;
  61. justify-content: center;
  62. height: 3rem;
  63. padding: 0 1rem;
  64. border: 1px solid #ccc;
  65. border-radius: 0.25rem;
  66. cursor: pointer;
  67. }
  68. .checkbox > input:checked + span {
  69. border-color: #000;
  70. background-color: #000;
  71. color: #fff;
  72. }
  73. @media (min-width: 1080px) {
  74. .main-form > div {
  75. flex-direction: row;
  76. }
  77. .main-form > div > textarea {
  78. width: 0;
  79. height: 100%;
  80. }
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <form id="mainForm" class="main-form">
  86. <fieldset>
  87. <legend>
  88. Options
  89. </legend>
  90. <div>
  91. <select class="select" aria-label="Locale" name="system.locale">
  92. <option value="enUS">
  93. English (US)
  94. </option>
  95. <option value="enUK">
  96. English (UK)
  97. </option>
  98. </select>
  99. <select class="select" aria-label="Variant" name="system.count">
  100. <option value="shortCount">
  101. Short Count
  102. </option>
  103. <option value="longCount">
  104. Long Count
  105. </option>
  106. </select>
  107. <label class="checkbox">
  108. <input type="checkbox" name="shortenMillia">
  109. <span>Shorten millia</span>
  110. </label><label class="checkbox">
  111. <input type="checkbox" name="addTensDashes" checked>
  112. <span>Add dashes to tens</span>
  113. </label><label class="checkbox">
  114. <input type="checkbox" name="oneGroupPerLine" checked>
  115. <span>One group per line</span>
  116. </label><!--<label class="checkbox">
  117. <input type="groupDigits" name="groupDigits" checked>
  118. <span>Group digits</span>
  119. </label>-->
  120. </div>
  121. </fieldset>
  122. <div>
  123. <textarea aria-label="Number" name="number" placeholder="1234"></textarea>
  124. <textarea aria-label="Name" name="name" placeholder="one thousand&#x0A;two hundred thirty-four"></textarea>
  125. </div>
  126. </form>
  127. <script type="module">
  128. import { stringify, parse, systems } from './numerica.js';
  129. function MainForm(el) {
  130. const numberInput = el.querySelector('[name="number"]');
  131. const nameInput = el.querySelector('[name="name"]');
  132. const addTensDashesCheckbox = el.querySelector('[name="addTensDashes"]');
  133. const shortenMilliaCheckbox = el.querySelector('[name="shortenMillia"]');
  134. const oneGroupPerLineCheckbox = el.querySelector('[name="oneGroupPerLine"]');
  135. const localeSelect = el.querySelector('[name="system.locale"]');
  136. const variantSelect = el.querySelector('[name="system.count"]');
  137. const options = {
  138. stringify: {
  139. makeGroupOptions: {},
  140. finalizeOptions: {},
  141. },
  142. parse: {
  143. type: 'bigint',
  144. },
  145. };
  146. const createNamePlaceholder = (theOptions) => {
  147. return stringify(1234, theOptions.stringify);
  148. };
  149. numberInput.addEventListener('input', (e) => {
  150. e.currentTarget.setCustomValidity('');
  151. nameInput.value = '';
  152. if (e.currentTarget.value.trim() === '') {
  153. return;
  154. }
  155. try {
  156. nameInput.value = stringify(e.currentTarget.value, options.stringify);
  157. } catch (err) {
  158. console.error(err);
  159. e.currentTarget.setCustomValidity('Invalid number.');
  160. }
  161. });
  162. nameInput.addEventListener('input', (e) => {
  163. e.currentTarget.setCustomValidity('');
  164. numberInput.value = '';
  165. if (e.currentTarget.value.trim() === '') {
  166. return;
  167. }
  168. try {
  169. numberInput.value = parse(e.currentTarget.value, options.parse)
  170. .toString();
  171. // TODO group digits function from system.
  172. } catch (err) {
  173. console.error(err);
  174. e.currentTarget.setCustomValidity('Invalid name.');
  175. }
  176. });
  177. addTensDashesCheckbox.addEventListener('change', (e) => {
  178. options.stringify.makeGroupOptions.addTensDashes = e.currentTarget.checked;
  179. numberInput.dispatchEvent(new Event('input'));
  180. nameInput.placeholder = createNamePlaceholder(options);
  181. });
  182. shortenMilliaCheckbox.addEventListener('change', (e) => {
  183. options.stringify.makeGroupOptions.shortenMillia = e.currentTarget.checked;
  184. numberInput.dispatchEvent(new Event('input'));
  185. nameInput.placeholder = createNamePlaceholder(options);
  186. });
  187. oneGroupPerLineCheckbox.addEventListener('change', (e) => {
  188. options.stringify.finalizeOptions.oneGroupPerLine = e.currentTarget.checked;
  189. numberInput.dispatchEvent(new Event('input'));
  190. nameInput.placeholder = createNamePlaceholder(options);
  191. });
  192. localeSelect.addEventListener('change', (e) => {
  193. const variantOptions = Array.from(variantSelect.options);
  194. variantOptions.forEach((option) => {
  195. option.disabled = !systems[e.currentTarget.value][option.value];
  196. });
  197. variantSelect.value = variantOptions.find((option) => !option.disabled).value;
  198. options.stringify.system = systems[e.currentTarget.value][variantSelect.value];
  199. options.parse.system = systems[e.currentTarget.value][variantSelect.value];
  200. numberInput.dispatchEvent(new Event('input'));
  201. nameInput.placeholder = createNamePlaceholder(options);
  202. });
  203. variantSelect.addEventListener('change', (e) => {
  204. options.stringify.system = systems[localeSelect.value][e.currentTarget.value];
  205. options.parse.system = systems[localeSelect.value][e.currentTarget.value];
  206. numberInput.dispatchEvent(new Event('input'));
  207. nameInput.placeholder = createNamePlaceholder(options);
  208. });
  209. options.stringify.makeGroupOptions.addTensDashes = addTensDashesCheckbox.checked;
  210. options.stringify.makeGroupOptions.shortenMillia = shortenMilliaCheckbox.checked;
  211. options.stringify.finalizeOptions.oneGroupPerLine = oneGroupPerLineCheckbox.checked;
  212. options.stringify.system = systems[localeSelect.value][variantSelect.value];
  213. options.parse.system = systems[localeSelect.value][variantSelect.value];
  214. Array.from(variantSelect.options).forEach((option) => {
  215. option.disabled = !systems[localeSelect.value][option.value];
  216. });
  217. nameInput.placeholder = createNamePlaceholder(options);
  218. }
  219. const mainForm = window.document.getElementById('mainForm');
  220. new MainForm(mainForm);
  221. </script>
  222. </body>
  223. </html>