4f1bdcda22
* Start implementation * Extend raw implementation; will refactor later * still building * basic implementation * create JS pack * Rename JS pack; use existing CSS property * complete implementation for profile fields * Add guard againt irrelevant profile fields * extract view logic to helper and add specs
32 lines
997 B
JavaScript
32 lines
997 B
JavaScript
const userFieldIds = ['user[name]', 'user[email]', 'user[username]'];
|
|
const profileFieldIds = Array.from(
|
|
document.querySelectorAll('[id^="profile["]'),
|
|
).map((node) => node.id);
|
|
const allFieldIds = [...userFieldIds, ...profileFieldIds];
|
|
|
|
export function fieldCharacterLimits() {
|
|
window.addEventListener('load', () => {
|
|
allFieldIds.forEach((field_id) => {
|
|
const field = document.getElementById(field_id);
|
|
const fieldValueLength = field.value.length;
|
|
const fieldCharacterSpan = document.getElementById(
|
|
field.dataset.characterSpanId,
|
|
);
|
|
fieldCharacterSpan.innerHTML = fieldValueLength;
|
|
});
|
|
|
|
document
|
|
.getElementById('user-profile-form')
|
|
.addEventListener('keyup', (event) => {
|
|
if (!event.target.dataset.characterSpanId) {
|
|
return;
|
|
}
|
|
|
|
document.getElementById(
|
|
event.target.dataset.characterSpanId,
|
|
).innerHTML = event.target.value.length;
|
|
});
|
|
});
|
|
}
|
|
|
|
fieldCharacterLimits();
|