maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove chars-count from user fields; fix inconsistent loading (#15309)

Browse source 
* remove chars-count from user fields; fix inconsistent loading

* remove "if loaded" check

* simplify iteration
This commit is contained in:
Arit Amana 2021-11-09 08:27:18 -05:00 • committed by GitHub
parent 04c7d61dd5
commit dcf1e08477
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/javascript/packs/userProfileSettings.js
View file

@ -1,31 +1,23 @@
const userFieldIds = ['user[name]', 'user[email]', 'user[username]'];
const profileFieldIds = Array.from(
document.querySelectorAll('[id^="profile["]'),
).map((node) => node.id);
const allFieldIds = [...userFieldIds, ...profileFieldIds];
const userSettingForm = document.getElementById('user-profile-form');
const profileFields = document.querySelectorAll('[id^="profile["]');
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;
});
profileFields.forEach((node) => {
const field = document.getElementById(node.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;
}
userSettingForm.addEventListener('keyup', (event) => {
if (!event.target.dataset.characterSpanId) {
return;
}
document.getElementById(
event.target.dataset.characterSpanId,
).innerHTML = event.target.value.length;
});
document.getElementById(event.target.dataset.characterSpanId).innerHTML =
event.target.value.length;
});
}

24
app/views/users/_profile.html.erb
View file

@ -13,13 +13,7 @@
maxlength: 30,
class: "crayons-textfield",
placeholder: "John Doe",
value: @user.name,
aria: { describedby: "name-description" },
data: { character_span_id: "name-characters" } %>
<p id="name-description" class="crayons-field__description align-right">
<span class="screen-reader-only">Available characters used: </span>
<span id="name-characters"></span>/30
</p>
value: @user.name %>
</div>
<div class="crayons-field">
@ -28,13 +22,7 @@
maxlength: 50,
class: "crayons-textfield",
placeholder: "john.doe@example.com",
value: @user.email,
aria: { describedby: "email-description" },
data: { character_span_id: "email-characters" } %>
<p id="email-description" class="crayons-field__description align-right">
<span class="screen-reader-only">Available characters used: </span>
<span id="email-characters"></span>/50
</p>
value: @user.email %>
</div>
<div class="crayons-field crayons-field--checkbox">
@ -48,13 +36,7 @@
maxlength: 30,
class: "crayons-textfield",
placeholder: "johndoe",
value: @user.username,
aria: { describedby: "username-description" },
data: { character_span_id: "username-characters" } %>
<p id="username-description" class="crayons-field__description align-right">
<span class="screen-reader-only">Available characters used: </span>
<span id="username-characters"></span>/30
</p>
value: @user.username %>
</div>
<div class="crayons-field">