introduce avatar-file-with-cropper again

Author: wxiaoguang

templates/shared/avatar_upload_crop.tmpl

@@ -1,6 +1,6 @@
 {{- /* we do not need to set for/id here, global aria init code will add them automatically */ -}}
 <label>{{.LabelText}}</label>
-<input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+<input class="avatar-file-with-cropper" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
 {{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
 <div class="cropper-panel tw-hidden">
 	<div class="tw-my-2">{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>

web_src/css/features/cropper.css

@@ -1,6 +1,6 @@
 @import "cropperjs/dist/cropper.css";
 
-input[name="avatar"] + .cropper-panel .cropper-wrapper {
+.avatar-file-with-cropper + .cropper-panel .cropper-wrapper {
   max-width: 400px;
   max-height: 400px;
 }

web_src/js/features/admin/common.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import {checkAppUrl} from '../common-page.ts';
-import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
+import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
 import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts';
 
@@ -260,5 +260,5 @@ export function initAdminCommon(): void {
     });
   }
 
-  initAvatarUploaderWithCropper(document.querySelector('.admin.edit.user input[name="avatar"]'));
+  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }

web_src/js/features/common-organization.ts

@@ -1,5 +1,5 @@
 import {initCompLabelEdit} from './comp/LabelEdit.ts';
-import {toggleElem} from '../utils/dom.ts';
+import {queryElems, toggleElem} from '../utils/dom.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
 
 export function initCommonOrganization() {
@@ -15,5 +15,5 @@ export function initCommonOrganization() {
   // Labels
   initCompLabelEdit('.page-content.organization.settings.labels');
 
-  initAvatarUploaderWithCropper(document.querySelector('.organization.settings.options input[name="avatar"]'));
+  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }

web_src/js/features/comp/Cropper.ts

@@ -39,8 +39,7 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
   });
 }
 
-export async function initAvatarUploaderWithCropper(fileInput?: HTMLInputElement) {
-  if (!fileInput) return;
+export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
   const panel = fileInput.nextElementSibling as HTMLElement;
   if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
   const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');

web_src/js/features/repo-settings.ts

@@ -158,5 +158,5 @@ export function initRepoSettings() {
   initRepoSettingsGitHook();
   initRepoSettingsBranchesDrag();
 
-  initAvatarUploaderWithCropper(document.querySelector('.repository.settings.options input[name="avatar"]'));
+  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }

web_src/js/features/user-settings.ts

@@ -1,10 +1,10 @@
-import {hideElem, showElem} from '../utils/dom.ts';
+import {hideElem, queryElems, showElem} from '../utils/dom.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
 
 export function initUserSettings() {
   if (!document.querySelector('.user.settings.profile')) return;
 
-  initAvatarUploaderWithCropper(document.querySelector('.user.settings.profile input[name="avatar"]'));
+  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 
   const usernameInput = document.querySelector<HTMLInputElement>('#username');
   if (!usernameInput) return;