forgejo/web_src/js/features/user-settings.js

64 lines
2.4 KiB
JavaScript
Raw Normal View History

import {hideElem, showElem} from '../utils/dom.js';
2023-09-26 05:56:20 +00:00
function onPronounsDropdownUpdate() {
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsDropdown = document.getElementById('pronouns-dropdown');
const pronounsInput = pronounsDropdown.querySelector('input');
2024-02-26 19:43:04 +00:00
// must be kept in sync with `routers/web/user/setting/profile.go`
2023-09-26 05:56:20 +00:00
const isCustom = !(
pronounsInput.value === '' ||
2023-09-26 05:56:20 +00:00
pronounsInput.value === 'he/him' ||
pronounsInput.value === 'she/her' ||
pronounsInput.value === 'they/them' ||
2023-09-26 17:54:18 +00:00
pronounsInput.value === 'it/its' ||
2024-02-24 18:24:12 +00:00
pronounsInput.value === 'any pronouns'
2023-09-26 05:56:20 +00:00
);
if (isCustom) {
if (pronounsInput.value === '!') {
pronounsCustom.value = '';
} else {
pronounsCustom.value = pronounsInput.value;
}
2023-09-26 05:56:20 +00:00
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);
}
});
2023-09-26 05:56:20 +00:00
const pronounsDropdown = document.getElementById('pronouns-dropdown');
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsInput = pronounsDropdown.querySelector('input');
2024-02-26 19:43:04 +00:00
// 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.
2023-09-26 05:56:20 +00:00
pronounsCustom.removeAttribute('name');
pronounsInput.setAttribute('name', 'pronouns');
2023-09-26 05:56:20 +00:00
pronounsDropdown.style.display = '';
2024-02-26 19:43:04 +00:00
2023-09-26 05:56:20 +00:00
onPronounsDropdownUpdate();
pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
pronounsCustom.addEventListener('input', onPronounsCustomUpdate);
}