Add toggleClass function in dom.ts (#34063)

This PR adds a toggleClass function in dom.ts, aiming to implement DOM
class toggling functionality.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: kerwin612

web_src/js/features/repo-settings.ts

@@ -1,6 +1,6 @@
 import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.ts';
-import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.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';
@@ -125,22 +125,14 @@ function initRepoSettingsOptions() {
   const pageContent = document.querySelector('.page-content.repository.settings.options');
   if (!pageContent) return;
 
-  const toggleClass = (elems: NodeListOf<Element>, className: string, value: boolean) => {
-    for (const el of elems) el.classList.toggle(className, value);
-  };
-
   // Enable or select internal/external wiki system and issue tracker.
   queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => {
-    const elTargets = document.querySelectorAll(el.getAttribute('data-target'));
-    const elContexts = document.querySelectorAll(el.getAttribute('data-context'));
-    toggleClass(elTargets, 'disabled', !el.checked);
-    toggleClass(elContexts, 'disabled', el.checked);
+    toggleClass(el.getAttribute('data-target'), 'disabled', !el.checked);
+    toggleClass(el.getAttribute('data-context'), 'disabled', el.checked);
   }));
   queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => {
-    const elTargets = document.querySelectorAll(el.getAttribute('data-target'));
-    const elContexts = document.querySelectorAll(el.getAttribute('data-context'));
-    toggleClass(elTargets, 'disabled', el.value === 'false');
-    toggleClass(elContexts, 'disabled', el.value === 'true');
+    toggleClass(el.getAttribute('data-target'), 'disabled', el.value === 'false');
+    toggleClass(el.getAttribute('data-context'), 'disabled', el.value === 'true');
   }));
 
   queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => {

web_src/js/utils/dom.ts

@@ -25,32 +25,34 @@ function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: a
   }
 }
 
+export function toggleClass(el: ElementArg, className: string, force?: boolean) {
+  elementsCall(el, (e: Element) => {
+    if (force === true) {
+      e.classList.add(className);
+    } else if (force === false) {
+      e.classList.remove(className);
+    } else if (force === undefined) {
+      e.classList.toggle(className);
+    } else {
+      throw new Error('invalid force argument');
+    }
+  });
+}
+
 /**
- * @param el Element
+ * @param el ElementArg
  * @param force force=true to show or force=false to hide, undefined to toggle
  */
-function toggleShown(el: Element, force: boolean) {
-  if (force === true) {
-    el.classList.remove('tw-hidden');
-  } else if (force === false) {
-    el.classList.add('tw-hidden');
-  } else if (force === undefined) {
-    el.classList.toggle('tw-hidden');
-  } else {
-    throw new Error('invalid force argument');
-  }
+export function toggleElem(el: ElementArg, force?: boolean) {
+  toggleClass(el, 'tw-hidden', !force);
 }
 
 export function showElem(el: ElementArg) {
-  elementsCall(el, toggleShown, true);
+  toggleElem(el, true);
 }
 
 export function hideElem(el: ElementArg) {
-  elementsCall(el, toggleShown, false);
-}
-
-export function toggleElem(el: ElementArg, force?: boolean) {
-  elementsCall(el, toggleShown, force);
+  toggleElem(el, false);
 }
 
 export function isElemHidden(el: ElementArg) {