From 9f47b230769b52a54d80aa90868a4e274555bc64 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Wed, 5 Feb 2025 01:19:26 +0000 Subject: [PATCH 1/7] fixed #33321 --- templates/admin/user/edit.tmpl | 7 ++++++- web_src/js/features/admin/common.ts | 9 +++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl index d591a645d8983..3fdbfd8cbd050 100644 --- a/templates/admin/user/edit.tmpl +++ b/templates/admin/user/edit.tmpl @@ -196,7 +196,12 @@
- + +
+ +
+
{{ctx.Locale.Tr "settings.cropper_prompt"}}
+
diff --git a/web_src/js/features/admin/common.ts b/web_src/js/features/admin/common.ts index b991749d81acb..bd0ce9c9db704 100644 --- a/web_src/js/features/admin/common.ts +++ b/web_src/js/features/admin/common.ts @@ -2,6 +2,7 @@ import $ from 'jquery'; import {checkAppUrl} from '../common-page.ts'; import {hideElem, showElem, toggleElem} from '../../utils/dom.ts'; import {POST} from '../../modules/fetch.ts'; +import {initCompCropper} from '../comp/Cropper.ts'; const {appSubUrl} = window.config; @@ -258,4 +259,12 @@ export function initAdminCommon(): void { window.location.href = this.getAttribute('data-redirect'); }); } + + // Avatar Cropper + if (document.querySelector('.admin.edit.user')) { + const fileInput = document.querySelector('#new-avatar'); + const container = document.querySelector('.admin.edit.user .cropper-panel'); + const imageSource = container.querySelector('.cropper-source'); + initCompCropper({container, fileInput, imageSource}); + } } From 2255362226c8c3211a6630f96e6104fc0bdd3f17 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Wed, 5 Feb 2025 01:32:00 +0000 Subject: [PATCH 2/7] fix --- web_src/css/features/cropper.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/css/features/cropper.css b/web_src/css/features/cropper.css index ed7171e770b96..cc005af0d4286 100644 --- a/web_src/css/features/cropper.css +++ b/web_src/css/features/cropper.css @@ -1,6 +1,7 @@ @import "cropperjs/dist/cropper.css"; -.page-content.user.profile .cropper-panel .cropper-wrapper { +.page-content.user.profile .cropper-panel .cropper-wrapper, +.page-content.admin.edit.user .cropper-panel .cropper-wrapper { max-width: 400px; max-height: 400px; } From 7ab8dc33ce4c6b0fc3c14b997b8b548ce8b71548 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Wed, 5 Feb 2025 06:59:48 +0000 Subject: [PATCH 3/7] fix --- templates/org/settings/options.tmpl | 7 ++++++- templates/repo/settings/options.tmpl | 6 +++++- web_src/css/features/cropper.css | 6 ++++-- web_src/js/features/common-organization.ts | 9 +++++++++ web_src/js/features/repo-settings.ts | 9 +++++++++ 5 files changed, 33 insertions(+), 4 deletions(-) diff --git a/templates/org/settings/options.tmpl b/templates/org/settings/options.tmpl index 3b817d068b585..1c704aa4a977b 100644 --- a/templates/org/settings/options.tmpl +++ b/templates/org/settings/options.tmpl @@ -90,7 +90,12 @@ {{.CsrfTokenHtml}}
- + +
+ +
+
{{ctx.Locale.Tr "settings.cropper_prompt"}}
+
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index cb596f013b724..b15a8900aead6 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -41,7 +41,11 @@ {{.CsrfTokenHtml}}
- + +
+
+
{{ctx.Locale.Tr "settings.cropper_prompt"}}
+
diff --git a/web_src/css/features/cropper.css b/web_src/css/features/cropper.css index cc005af0d4286..3ab113aeb0125 100644 --- a/web_src/css/features/cropper.css +++ b/web_src/css/features/cropper.css @@ -1,7 +1,9 @@ @import "cropperjs/dist/cropper.css"; -.page-content.user.profile .cropper-panel .cropper-wrapper, -.page-content.admin.edit.user .cropper-panel .cropper-wrapper { +.page-content.admin.edit.user .cropper-panel .cropper-wrapper, +.page-content.organization.settings.options .cropper-panel .cropper-wrapper, +.page-content.repository.settings.options .cropper-panel .cropper-wrapper, +.page-content.user.profile .cropper-panel .cropper-wrapper { max-width: 400px; max-height: 400px; } diff --git a/web_src/js/features/common-organization.ts b/web_src/js/features/common-organization.ts index a1f19bedeae8e..d5959a0f9e641 100644 --- a/web_src/js/features/common-organization.ts +++ b/web_src/js/features/common-organization.ts @@ -1,5 +1,6 @@ import {initCompLabelEdit} from './comp/LabelEdit.ts'; import {toggleElem} from '../utils/dom.ts'; +import {initCompCropper} from './comp/Cropper.ts'; export function initCommonOrganization() { if (!document.querySelectorAll('.organization').length) { @@ -13,4 +14,12 @@ export function initCommonOrganization() { // Labels initCompLabelEdit('.page-content.organization.settings.labels'); + + // Avatar Cropper + if (document.querySelector('.organization.settings.options')) { + const fileInput = document.querySelector('#new-avatar'); + const container = document.querySelector('.organization.settings.options .cropper-panel'); + const imageSource = container.querySelector('.cropper-source'); + initCompCropper({container, fileInput, imageSource}); + } } diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index b61ef9a153cc4..015915c3cba26 100644 --- a/web_src/js/features/repo-settings.ts +++ b/web_src/js/features/repo-settings.ts @@ -3,6 +3,7 @@ import {minimatch} from 'minimatch'; import {createMonaco} from './codeeditor.ts'; import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts'; import {POST} from '../modules/fetch.ts'; +import {initCompCropper} from './comp/Cropper.ts'; import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts'; const {appSubUrl, csrfToken} = window.config; @@ -156,4 +157,12 @@ export function initRepoSettings() { initRepoSettingsSearchTeamBox(); initRepoSettingsGitHook(); initRepoSettingsBranchesDrag(); + + // Avatar Cropper + if (document.querySelector('.repository.settings.options')) { + const fileInput = document.querySelector('#new-avatar'); + const container = document.querySelector('.repository.settings.options .cropper-panel'); + const imageSource = container.querySelector('.cropper-source'); + initCompCropper({container, fileInput, imageSource}); + } } From 546f1339965fd602252e7413ac36343840aae977 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 5 Feb 2025 22:28:05 +0800 Subject: [PATCH 4/7] refactor --- templates/admin/user/edit.tmpl | 8 +------- templates/org/settings/options.tmpl | 9 +-------- templates/repo/settings/options.tmpl | 7 +------ templates/shared/avatar_upload_crop.tmpl | 8 ++++++++ templates/user/settings/profile.tmpl | 8 +------- web_src/css/features/cropper.css | 5 +---- web_src/js/features/admin/common.ts | 10 ++-------- web_src/js/features/common-organization.ts | 10 ++-------- web_src/js/features/comp/Cropper.ts | 12 ++++++++++-- web_src/js/features/repo-settings.ts | 10 ++-------- web_src/js/features/user-settings.ts | 11 ++--------- 11 files changed, 31 insertions(+), 67 deletions(-) create mode 100644 templates/shared/avatar_upload_crop.tmpl diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl index 3fdbfd8cbd050..c04d332660677 100644 --- a/templates/admin/user/edit.tmpl +++ b/templates/admin/user/edit.tmpl @@ -195,13 +195,7 @@
- - -
- -
-
{{ctx.Locale.Tr "settings.cropper_prompt"}}
-
+ {{template "shared/avatar_upload_crop" dict "LabelText" (ctx.Locale.Tr "settings.choose_new_avatar")}}
diff --git a/templates/org/settings/options.tmpl b/templates/org/settings/options.tmpl index 1c704aa4a977b..76315f3eac48d 100644 --- a/templates/org/settings/options.tmpl +++ b/templates/org/settings/options.tmpl @@ -89,15 +89,8 @@
{{.CsrfTokenHtml}}
- - + {{template "shared/avatar_upload_crop" dict "LabelText" (ctx.Locale.Tr "settings.choose_new_avatar")}}
- -
-
{{ctx.Locale.Tr "settings.cropper_prompt"}}
-
-
-
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index b15a8900aead6..0520c87cc1b18 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -40,12 +40,7 @@ {{.CsrfTokenHtml}}
- - -
-
-
{{ctx.Locale.Tr "settings.cropper_prompt"}}
-
+ {{template "shared/avatar_upload_crop" dict "LabelText" (ctx.Locale.Tr "settings.choose_new_avatar")}}
diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl new file mode 100644 index 0000000000000..6f250cee33e3d --- /dev/null +++ b/templates/shared/avatar_upload_crop.tmpl @@ -0,0 +1,8 @@ +{{- /* we do not need to set for/id here, global aria init code will add them automatically */ -}} + + +{{- /* the cropper-panel must be next sibling of the input "js-avatar-with-cropper" */ -}} +
+
{{ctx.Locale.Tr "settings.cropper_prompt"}}
+
+
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl index 197763425c434..03c3c18f28c1c 100644 --- a/templates/user/settings/profile.tmpl +++ b/templates/user/settings/profile.tmpl @@ -124,13 +124,7 @@
- - -
- -
-
{{ctx.Locale.Tr "settings.cropper_prompt"}}
-
+ {{template "shared/avatar_upload_crop" dict "LabelText" (ctx.Locale.Tr "settings.choose_new_avatar")}}
diff --git a/web_src/css/features/cropper.css b/web_src/css/features/cropper.css index 3ab113aeb0125..9d1e59281c448 100644 --- a/web_src/css/features/cropper.css +++ b/web_src/css/features/cropper.css @@ -1,9 +1,6 @@ @import "cropperjs/dist/cropper.css"; -.page-content.admin.edit.user .cropper-panel .cropper-wrapper, -.page-content.organization.settings.options .cropper-panel .cropper-wrapper, -.page-content.repository.settings.options .cropper-panel .cropper-wrapper, -.page-content.user.profile .cropper-panel .cropper-wrapper { +input[name="avatar"] + .cropper-panel .cropper-wrapper { max-width: 400px; max-height: 400px; } diff --git a/web_src/js/features/admin/common.ts b/web_src/js/features/admin/common.ts index bd0ce9c9db704..0f50d21f20013 100644 --- a/web_src/js/features/admin/common.ts +++ b/web_src/js/features/admin/common.ts @@ -2,7 +2,7 @@ import $ from 'jquery'; import {checkAppUrl} from '../common-page.ts'; import {hideElem, showElem, toggleElem} from '../../utils/dom.ts'; import {POST} from '../../modules/fetch.ts'; -import {initCompCropper} from '../comp/Cropper.ts'; +import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts'; const {appSubUrl} = window.config; @@ -260,11 +260,5 @@ export function initAdminCommon(): void { }); } - // Avatar Cropper - if (document.querySelector('.admin.edit.user')) { - const fileInput = document.querySelector('#new-avatar'); - const container = document.querySelector('.admin.edit.user .cropper-panel'); - const imageSource = container.querySelector('.cropper-source'); - initCompCropper({container, fileInput, imageSource}); - } + initAvatarUploaderWithCropper(document.querySelector('.admin.edit.user input[name="avatar"]')); } diff --git a/web_src/js/features/common-organization.ts b/web_src/js/features/common-organization.ts index d5959a0f9e641..e3c2ea84805c9 100644 --- a/web_src/js/features/common-organization.ts +++ b/web_src/js/features/common-organization.ts @@ -1,6 +1,6 @@ import {initCompLabelEdit} from './comp/LabelEdit.ts'; import {toggleElem} from '../utils/dom.ts'; -import {initCompCropper} from './comp/Cropper.ts'; +import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; export function initCommonOrganization() { if (!document.querySelectorAll('.organization').length) { @@ -15,11 +15,5 @@ export function initCommonOrganization() { // Labels initCompLabelEdit('.page-content.organization.settings.labels'); - // Avatar Cropper - if (document.querySelector('.organization.settings.options')) { - const fileInput = document.querySelector('#new-avatar'); - const container = document.querySelector('.organization.settings.options .cropper-panel'); - const imageSource = container.querySelector('.cropper-source'); - initCompCropper({container, fileInput, imageSource}); - } + initAvatarUploaderWithCropper(document.querySelector('.organization.settings.options input[name="avatar"]')); } diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts index e65dcfbe13534..9b23ada3a0e96 100644 --- a/web_src/js/features/comp/Cropper.ts +++ b/web_src/js/features/comp/Cropper.ts @@ -1,4 +1,4 @@ -import {showElem, type DOMEvent} from '../../utils/dom.ts'; +import {showElem, type DOMEvent, queryElemSiblings} from '../../utils/dom.ts'; type CropperOpts = { container: HTMLElement, @@ -6,7 +6,7 @@ type CropperOpts = { fileInput: HTMLInputElement, } -export async function initCompCropper({container, fileInput, imageSource}: CropperOpts) { +async function initCompCropper({container, fileInput, imageSource}: CropperOpts) { const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs'); let currentFileName = ''; let currentFileLastModified = 0; @@ -38,3 +38,11 @@ export async function initCompCropper({container, fileInput, imageSource}: Cropp } }); } + +export async function initAvatarUploaderWithCropper(fileInput?: HTMLInputElement) { + if (!fileInput) return; + const panel = queryElemSiblings(fileInput, '.cropper-panel')[0] as HTMLElement; + if (!panel) return; + const imageSource = panel.querySelector('.cropper-source'); + await initCompCropper({container: panel, fileInput, imageSource}); +} diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index 015915c3cba26..2856f0c002f8f 100644 --- a/web_src/js/features/repo-settings.ts +++ b/web_src/js/features/repo-settings.ts @@ -3,7 +3,7 @@ import {minimatch} from 'minimatch'; import {createMonaco} from './codeeditor.ts'; import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts'; import {POST} from '../modules/fetch.ts'; -import {initCompCropper} from './comp/Cropper.ts'; +import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts'; const {appSubUrl, csrfToken} = window.config; @@ -158,11 +158,5 @@ export function initRepoSettings() { initRepoSettingsGitHook(); initRepoSettingsBranchesDrag(); - // Avatar Cropper - if (document.querySelector('.repository.settings.options')) { - const fileInput = document.querySelector('#new-avatar'); - const container = document.querySelector('.repository.settings.options .cropper-panel'); - const imageSource = container.querySelector('.cropper-source'); - initCompCropper({container, fileInput, imageSource}); - } + initAvatarUploaderWithCropper(document.querySelector('.repository.settings.options input[name="avatar"]')); } diff --git a/web_src/js/features/user-settings.ts b/web_src/js/features/user-settings.ts index 6312a8b68269c..517bcd411da07 100644 --- a/web_src/js/features/user-settings.ts +++ b/web_src/js/features/user-settings.ts @@ -1,17 +1,10 @@ import {hideElem, showElem} from '../utils/dom.ts'; -import {initCompCropper} from './comp/Cropper.ts'; - -function initUserSettingsAvatarCropper() { - const fileInput = document.querySelector('#new-avatar'); - const container = document.querySelector('.user.settings.profile .cropper-panel'); - const imageSource = container.querySelector('.cropper-source'); - initCompCropper({container, fileInput, imageSource}); -} +import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; export function initUserSettings() { if (!document.querySelector('.user.settings.profile')) return; - initUserSettingsAvatarCropper(); + initAvatarUploaderWithCropper(document.querySelector('.user.settings.profile input[name="avatar"]')); const usernameInput = document.querySelector('#username'); if (!usernameInput) return; From 006dd61b51829750d8eba1b9bf37d6fd3b42be07 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 5 Feb 2025 22:30:57 +0800 Subject: [PATCH 5/7] fix --- templates/shared/avatar_upload_crop.tmpl | 2 +- web_src/js/features/comp/Cropper.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl index 6f250cee33e3d..5c071b33a4d90 100644 --- a/templates/shared/avatar_upload_crop.tmpl +++ b/templates/shared/avatar_upload_crop.tmpl @@ -1,7 +1,7 @@ {{- /* we do not need to set for/id here, global aria init code will add them automatically */ -}} -{{- /* the cropper-panel must be next sibling of the input "js-avatar-with-cropper" */ -}} +{{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
{{ctx.Locale.Tr "settings.cropper_prompt"}}
diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts index 9b23ada3a0e96..f2df5cd9fc6c8 100644 --- a/web_src/js/features/comp/Cropper.ts +++ b/web_src/js/features/comp/Cropper.ts @@ -1,4 +1,4 @@ -import {showElem, type DOMEvent, queryElemSiblings} from '../../utils/dom.ts'; +import {showElem, type DOMEvent} from '../../utils/dom.ts'; type CropperOpts = { container: HTMLElement, @@ -41,8 +41,8 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts) export async function initAvatarUploaderWithCropper(fileInput?: HTMLInputElement) { if (!fileInput) return; - const panel = queryElemSiblings(fileInput, '.cropper-panel')[0] as HTMLElement; - if (!panel) return; + const panel = fileInput.nextElementSibling as HTMLElement; + if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader'); const imageSource = panel.querySelector('.cropper-source'); await initCompCropper({container: panel, fileInput, imageSource}); } From b34ab6095441fc7337f65af19960d8014498a8bd Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 5 Feb 2025 22:41:28 +0800 Subject: [PATCH 6/7] fine tune prompt margin --- templates/shared/avatar_upload_crop.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl index 5c071b33a4d90..209e0ff9caafb 100644 --- a/templates/shared/avatar_upload_crop.tmpl +++ b/templates/shared/avatar_upload_crop.tmpl @@ -3,6 +3,6 @@ {{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
-
{{ctx.Locale.Tr "settings.cropper_prompt"}}
+
{{ctx.Locale.Tr "settings.cropper_prompt"}}
From f045e7716a398b2cdc64fe3387605767c1733e70 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 5 Feb 2025 23:32:13 +0800 Subject: [PATCH 7/7] introduce avatar-file-with-cropper again --- templates/shared/avatar_upload_crop.tmpl | 2 +- web_src/css/features/cropper.css | 2 +- web_src/js/features/admin/common.ts | 4 ++-- web_src/js/features/common-organization.ts | 4 ++-- web_src/js/features/comp/Cropper.ts | 3 +-- web_src/js/features/repo-settings.ts | 2 +- web_src/js/features/user-settings.ts | 4 ++-- 7 files changed, 10 insertions(+), 11 deletions(-) diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl index 209e0ff9caafb..2c4166fa9c93c 100644 --- a/templates/shared/avatar_upload_crop.tmpl +++ b/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 */ -}} - + {{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
{{ctx.Locale.Tr "settings.cropper_prompt"}}
diff --git a/web_src/css/features/cropper.css b/web_src/css/features/cropper.css index 9d1e59281c448..f7f8168006056 100644 --- a/web_src/css/features/cropper.css +++ b/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; } diff --git a/web_src/js/features/admin/common.ts b/web_src/js/features/admin/common.ts index 0f50d21f20013..14a49af81eda1 100644 --- a/web_src/js/features/admin/common.ts +++ b/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); } diff --git a/web_src/js/features/common-organization.ts b/web_src/js/features/common-organization.ts index e3c2ea84805c9..9d5964c4c7781 100644 --- a/web_src/js/features/common-organization.ts +++ b/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); } diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts index f2df5cd9fc6c8..aaa169115238d 100644 --- a/web_src/js/features/comp/Cropper.ts +++ b/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('.cropper-source'); diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index 2856f0c002f8f..7e890a43e0ccb 100644 --- a/web_src/js/features/repo-settings.ts +++ b/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); } diff --git a/web_src/js/features/user-settings.ts b/web_src/js/features/user-settings.ts index 517bcd411da07..21d20e676f8c1 100644 --- a/web_src/js/features/user-settings.ts +++ b/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('#username'); if (!usernameInput) return;