domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

[v7.0/forgejo] Add optional pronoun field in user settings (#3076)

Browse source 
**Backport:** https://codeberg.org/forgejo/forgejo/pulls/1518

An attempt at adding an optional pronoun field for user profiles, as suggested here 3 years ago: https://github.com/go-gitea/gitea/issues/13990

![A Forgejo profile showing pronouns to the right of the user's username](/attachments/2e5ff300-d333-46db-9074-f030f199843c)

I made this for [my own instance](https://git.gay/h) and didn't initially think I'd make a PR because of the previous closed issue, but I thought I'd ask the Forgejo matrix chat to see if there was any support and there was!

I'm told I should make a database migration, some help as to how to do that would be appreciated.

Co-authored-by: hazycora <hazysu@riseup.net>
Co-authored-by: Gergely Nagy <forgejo@gergo.csillger.hu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3076
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
This commit is contained in:
forgejo-backport-action 2024-04-06 13:23:43 +00:00 • committed by Earl Warren
parent a070f28c81
commit 5bde9555b1
21 changed files with 331 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web_src/js/features/user-settings.js
View file

@ -1,5 +1,35 @@
import {hideElem, showElem} from '../utils/dom.js';
function onPronounsDropdownUpdate() {
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsDropdown = document.getElementById('pronouns-dropdown');
const pronounsInput = pronounsDropdown.querySelector('input');
// must be kept in sync with `routers/web/user/setting/profile.go`
const isCustom = !(
pronounsInput.value === '' ||
pronounsInput.value === 'he/him' ||
pronounsInput.value === 'she/her' ||
pronounsInput.value === 'they/them' ||
pronounsInput.value === 'it/its' ||
pronounsInput.value === 'any pronouns'
);
if (isCustom) {
if (pronounsInput.value === '!') {
pronounsCustom.value = '';
} else {
pronounsCustom.value = pronounsInput.value;
}
pronounsCustom.style.display = '';
} else {
pronounsCustom.style.display = 'none';
}
}
function onPronounsCustomUpdate() {
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsInput = document.querySelector('#pronouns-dropdown input');
pronounsInput.value = pronounsCustom.value;
}
export function initUserSettings() {
if (!document.querySelectorAll('.user.settings.profile').length) return;
@ -16,4 +46,18 @@ export function initUserSettings() {
hideElem(promptRedirect);
}
});
const pronounsDropdown = document.getElementById('pronouns-dropdown');
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsInput = pronounsDropdown.querySelector('input');
// If JS is disabled, the page will show the custom input, as the dropdown requires JS to work.
// JS progressively enhances the input by adding a dropdown, but it works regardless.
pronounsCustom.removeAttribute('name');
pronounsInput.setAttribute('name', 'pronouns');
pronounsDropdown.style.display = '';
onPronounsDropdownUpdate();
pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
pronounsCustom.addEventListener('input', onPronounsCustomUpdate);
}