USEFULL
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <wxiaoguang@gmail.com>
pull/33910/head
Kerwin Bryant 2025-03-30 14:19:54 +08:00 committed by GitHub
parent b59705fa34
commit 2a9c5c9e3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 30 deletions
Show Stats 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 {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', () => {

36
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) {
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) {