mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-11-04 01:34:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add toggleClass function in dom.ts (#34063)

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

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant
2025-03-30 14:19:54 +08:00
committed by GitHub
parent b59705fa34
commit 2a9c5c9e3d
2 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web_src/js/features/repo-settings.ts
View File

@@ -1,6 +1,6 @@
import {minimatch} from 'minimatch'; import {minimatch} from 'minimatch';
import {createMonaco} from './codeeditor.ts'; 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 {POST} from '../modules/fetch.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts'; import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts'; import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
@@ -125,22 +125,14 @@ function initRepoSettingsOptions() {
const pageContent = document.querySelector('.page-content.repository.settings.options'); const pageContent = document.querySelector('.page-content.repository.settings.options');
if (!pageContent) return; 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. // Enable or select internal/external wiki system and issue tracker.
queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => { queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => {
const elTargets = document.querySelectorAll(el.getAttribute('data-target')); toggleClass(el.getAttribute('data-target'), 'disabled', !el.checked);
const elContexts = document.querySelectorAll(el.getAttribute('data-context')); toggleClass(el.getAttribute('data-context'), 'disabled', el.checked);
toggleClass(elTargets, 'disabled', !el.checked);
toggleClass(elContexts, 'disabled', el.checked);
})); }));
queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => { queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => {
const elTargets = document.querySelectorAll(el.getAttribute('data-target')); toggleClass(el.getAttribute('data-target'), 'disabled', el.value === 'false');
const elContexts = document.querySelectorAll(el.getAttribute('data-context')); toggleClass(el.getAttribute('data-context'), 'disabled', el.value === 'true');
toggleClass(elTargets, 'disabled', el.value === 'false');
toggleClass(elContexts, 'disabled', el.value === 'true');
})); }));
queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => { queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => {

30
web_src/js/utils/dom.ts
View File

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