2726a31c18
Provide a cropping tool on the avatar editing page, allowing users to select the cropping area themselves. This way, users can decide the displayed area of the image, rather than us deciding for them. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import {hideElem, showElem} from '../utils/dom.ts';
|
|
import {initCompCropper} from './comp/Cropper.ts';
|
|
|
|
function initUserSettingsAvatarCropper() {
|
|
const fileInput = document.querySelector<HTMLInputElement>('#new-avatar');
|
|
const container = document.querySelector<HTMLElement>('.user.settings.profile .cropper-panel');
|
|
const imageSource = container.querySelector<HTMLImageElement>('.cropper-source');
|
|
initCompCropper({container, fileInput, imageSource});
|
|
}
|
|
|
|
export function initUserSettings() {
|
|
if (!document.querySelector('.user.settings.profile')) return;
|
|
|
|
initUserSettingsAvatarCropper();
|
|
|
|
const usernameInput = document.querySelector('#username');
|
|
if (!usernameInput) return;
|
|
usernameInput.addEventListener('input', function () {
|
|
const prompt = document.querySelector('#name-change-prompt');
|
|
const promptRedirect = document.querySelector('#name-change-redirect-prompt');
|
|
if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
|
|
showElem(prompt);
|
|
showElem(promptRedirect);
|
|
} else {
|
|
hideElem(prompt);
|
|
hideElem(promptRedirect);
|
|
}
|
|
});
|
|
}
|