From aeb70052455ba0b8c1b35709ae8d541765332027 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Sat, 19 Apr 2025 08:17:07 +0800 Subject: [PATCH] Optimize the calling code of queryElems (#34235) --- templates/shared/avatar_upload_crop.tmpl | 2 +- web_src/js/features/admin/common.ts | 3 --- web_src/js/features/common-organization.ts | 5 +---- web_src/js/features/common-page.ts | 5 +++++ web_src/js/features/repo-settings.ts | 3 --- web_src/js/features/user-settings.ts | 5 +---- web_src/js/index.ts | 3 ++- web_src/js/utils/dom.ts | 2 +- 8 files changed, 11 insertions(+), 17 deletions(-) diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl index 2c4166fa9c..3bc012dd99 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/js/features/admin/common.ts b/web_src/js/features/admin/common.ts index 3652ea7d39..4ed5d62eee 100644 --- a/web_src/js/features/admin/common.ts +++ b/web_src/js/features/admin/common.ts @@ -1,7 +1,6 @@ import {checkAppUrl} from '../common-page.ts'; import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts'; import {POST} from '../../modules/fetch.ts'; -import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts'; import {fomanticQuery} from '../../modules/fomantic/base.ts'; const {appSubUrl} = window.config; @@ -23,8 +22,6 @@ export function initAdminCommon(): void { initAdminUser(); initAdminAuthentication(); initAdminNotice(); - - queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper); } function initAdminUser() { diff --git a/web_src/js/features/common-organization.ts b/web_src/js/features/common-organization.ts index 9d5964c4c7..a1f19bedea 100644 --- a/web_src/js/features/common-organization.ts +++ b/web_src/js/features/common-organization.ts @@ -1,6 +1,5 @@ import {initCompLabelEdit} from './comp/LabelEdit.ts'; -import {queryElems, toggleElem} from '../utils/dom.ts'; -import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; +import {toggleElem} from '../utils/dom.ts'; export function initCommonOrganization() { if (!document.querySelectorAll('.organization').length) { @@ -14,6 +13,4 @@ export function initCommonOrganization() { // Labels initCompLabelEdit('.page-content.organization.settings.labels'); - - queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper); } diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts index 6aabfc5d4f..5a02ee7a6a 100644 --- a/web_src/js/features/common-page.ts +++ b/web_src/js/features/common-page.ts @@ -3,6 +3,7 @@ import {showGlobalErrorMessage} from '../bootstrap.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; import {queryElems} from '../utils/dom.ts'; import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts'; +import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; const {appUrl} = window.config; @@ -80,6 +81,10 @@ export function initGlobalTabularMenu() { fomanticQuery('.ui.menu.tabular:not(.custom) .item').tab(); } +export function initGlobalAvatarUploader() { + registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper); +} + // for performance considerations, it only uses performant syntax function attachInputDirAuto(el: Partial) { if (el.type !== 'hidden' && diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index 27dc4e9bfe..be1821664f 100644 --- a/web_src/js/features/repo-settings.ts +++ b/web_src/js/features/repo-settings.ts @@ -2,7 +2,6 @@ import {minimatch} from 'minimatch'; import {createMonaco} from './codeeditor.ts'; import {onInputDebounce, queryElems, toggleClass, toggleElem} from '../utils/dom.ts'; import {POST} from '../modules/fetch.ts'; -import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; @@ -149,6 +148,4 @@ export function initRepoSettings() { initRepoSettingsSearchTeamBox(); initRepoSettingsGitHook(); initRepoSettingsBranchesDrag(); - - 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 21d20e676f..6fbb56e540 100644 --- a/web_src/js/features/user-settings.ts +++ b/web_src/js/features/user-settings.ts @@ -1,11 +1,8 @@ -import {hideElem, queryElems, showElem} from '../utils/dom.ts'; -import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; +import {hideElem, showElem} from '../utils/dom.ts'; export function initUserSettings() { if (!document.querySelector('.user.settings.profile')) return; - queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper); - const usernameInput = document.querySelector('#username'); if (!usernameInput) return; usernameInput.addEventListener('input', function () { diff --git a/web_src/js/index.ts b/web_src/js/index.ts index 839a160168..7e84773bc1 100644 --- a/web_src/js/index.ts +++ b/web_src/js/index.ts @@ -60,7 +60,7 @@ import {initColorPickers} from './features/colorpicker.ts'; import {initAdminSelfCheck} from './features/admin/selfcheck.ts'; import {initOAuth2SettingsDisableCheckbox} from './features/oauth2-settings.ts'; import {initGlobalFetchAction} from './features/common-fetch-action.ts'; -import {initFootLanguageMenu, initGlobalDropdown, initGlobalInput, initGlobalTabularMenu, initHeadNavbarContentToggle} from './features/common-page.ts'; +import {initFootLanguageMenu, initGlobalAvatarUploader, initGlobalDropdown, initGlobalInput, initGlobalTabularMenu, initHeadNavbarContentToggle} from './features/common-page.ts'; import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} from './features/common-button.ts'; import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts'; import {callInitFunctions} from './modules/init.ts'; @@ -72,6 +72,7 @@ initSubmitEventPolyfill(); onDomReady(() => { const initStartTime = performance.now(); const initPerformanceTracer = callInitFunctions([ + initGlobalAvatarUploader, initGlobalDropdown, initGlobalTabularMenu, initGlobalFetchAction, diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts index 98e5170a2b..c7562c92b0 100644 --- a/web_src/js/utils/dom.ts +++ b/web_src/js/utils/dom.ts @@ -89,7 +89,7 @@ export function queryElemChildren(parent: Element | ParentNod } // it works like parent.querySelectorAll: all descendants are selected -// in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent +// in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent if the targets are not for page-level components. export function queryElems(parent: Element | ParentNode, selector: string, fn?: ElementsCallback): ArrayLikeIterable { return applyElemsCallback(parent.querySelectorAll(selector), fn); }