Optimize the calling code of queryElems (#34235)

Author: kerwin612

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 class="avatar-file-with-cropper" 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" data-global-init="initAvatarUploader">
 {{- /* 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/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() {

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);
 }

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<HTMLInputElement | HTMLTextAreaElement>) {
   if (el.type !== 'hidden' &&

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);
 }

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<HTMLInputElement>('#username');
   if (!usernameInput) return;
   usernameInput.addEventListener('input', function () {

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,

web_src/js/utils/dom.ts

@@ -89,7 +89,7 @@ export function queryElemChildren<T extends Element>(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<T extends HTMLElement>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   return applyElemsCallback<T>(parent.querySelectorAll(selector), fn);
 }