Optimize the calling code of queryElems.

Author: kerwin612

web_src/js/features/admin/common.ts

@@ -15,7 +15,8 @@ function onSecurityProtocolChange(): void {
 }
 
 export function initAdminCommon(): void {
-  if (!document.querySelector('.page-content.admin')) return;
+  const el = document.querySelector('.page-content.admin');
+  if (!el) return;
 
   // check whether appUrl(ROOT_URL) is correct, if not, show an error message
   checkAppUrl();
@@ -24,7 +25,7 @@ export function initAdminCommon(): void {
   initAdminAuthentication();
   initAdminNotice();
 
-  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
+  queryElems(el, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }
 
 function initAdminUser() {

web_src/js/features/common-organization.ts

@@ -3,17 +3,18 @@ import {queryElems, toggleElem} from '../utils/dom.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
 
 export function initCommonOrganization() {
-  if (!document.querySelectorAll('.organization').length) {
-    return;
-  }
+  const el = document.querySelector('.page-content.organization.settings');
+  if (!el) return;
 
-  document.querySelector<HTMLInputElement>('.organization.settings.options #org_name')?.addEventListener('input', function () {
-    const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name').toLowerCase();
-    toggleElem('#org-name-change-prompt', nameChanged);
+  queryElems(el, '#org_name', (e: HTMLInputElement) => {
+    e.addEventListener('input', function () {
+      const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name').toLowerCase();
+      toggleElem('#org-name-change-prompt', nameChanged);
+    });
   });
 
   // Labels
   initCompLabelEdit('.page-content.organization.settings.labels');
 
-  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
+  queryElems(el, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }

web_src/js/features/repo-settings.ts

@@ -10,7 +10,7 @@ const {appSubUrl, csrfToken} = window.config;
 
 function initRepoSettingsCollaboration() {
   // Change collaborator access mode
-  for (const dropdownEl of queryElems(document, '.page-content.repository .ui.dropdown.access-mode')) {
+  for (const dropdownEl of queryElems(document.querySelector<HTMLElement>('.page-content.repository'), '.ui.dropdown.access-mode')) {
     const textEl = dropdownEl.querySelector(':scope > .text');
     const $dropdown = fomanticQuery(dropdownEl);
     $dropdown.dropdown({
@@ -142,13 +142,15 @@ function initRepoSettingsOptions() {
 }
 
 export function initRepoSettings() {
-  if (!document.querySelector('.page-content.repository.settings')) return;
+  const el = document.querySelector('.page-content.repository.settings');
+  if (!el) return;
+
   initRepoSettingsOptions();
   initRepoSettingsBranches();
   initRepoSettingsCollaboration();
   initRepoSettingsSearchTeamBox();
   initRepoSettingsGitHook();
   initRepoSettingsBranchesDrag();
 
-  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
+  queryElems(el, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 }

web_src/js/features/user-settings.ts

@@ -2,21 +2,22 @@ import {hideElem, queryElems, showElem} from '../utils/dom.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
 
 export function initUserSettings() {
-  if (!document.querySelector('.user.settings.profile')) return;
+  const el = document.querySelector('.user.settings.profile');
+  if (!el) return;
 
-  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
+  queryElems(el, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
 
-  const usernameInput = document.querySelector<HTMLInputElement>('#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);
-    }
+  queryElems(el, '#username', (e: HTMLInputElement) => {
+    e.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);
+      }
+    });
   });
 }

web_src/js/utils/dom.ts

@@ -91,7 +91,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
 export function queryElems<T extends HTMLElement>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
-  return applyElemsCallback<T>(parent.querySelectorAll(selector), fn);
+  return parent ? applyElemsCallback<T>(parent.querySelectorAll(selector), fn) : [];
 }
 
 export function onDomReady(cb: () => Promisable<void>) {