mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-03 02:14:50 +02:00
**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>
63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
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;
|
|
|
|
const usernameInput = document.getElementById('username');
|
|
if (!usernameInput) return;
|
|
usernameInput.addEventListener('input', function () {
|
|
const prompt = document.getElementById('name-change-prompt');
|
|
const promptRedirect = document.getElementById('name-change-redirect-prompt');
|
|
if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
|
|
showElem(prompt);
|
|
showElem(promptRedirect);
|
|
} else {
|
|
hideElem(prompt);
|
|
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);
|
|
}
|