68d9f36543
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 <[email protected]> Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: delvh <[email protected]> Co-authored-by: Giteabot <[email protected]>
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);
|
|
}
|
|
});
|
|
}
|