Browse Source

Update example page

Make placeholders responsive.
master
TheoryOfNekomata 1 year ago
parent
commit
87d05b7c49
1 changed files with 20 additions and 7 deletions
  1. +20
    -7
      packages/example-web/index.html

+ 20
- 7
packages/example-web/index.html View File

@@ -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&#x0A;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);


Loading…
Cancel
Save