Add "dir=auto" for input/textarea elements by default (#26735)

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
wxiaoguang 2023-09-07 16:00:20 +08:00 committed by GitHub
parent d1dca38a2a
commit 1221221595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 0 deletions

View File

@ -478,6 +478,7 @@ a.label,
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */ /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
.ui.input > input { .ui.input > input {
line-height: var(--line-height-default); line-height: var(--line-height-default);
text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
} }
.ui.input.focus > input, .ui.input.focus > input,

View File

@ -84,9 +84,11 @@ import {onDomReady} from './utils/dom.js';
import {initRepoIssueList} from './features/repo-issue-list.js'; import {initRepoIssueList} from './features/repo-issue-list.js';
import {initCommonIssueListQuickGoto} from './features/common-issue-list.js'; import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'; import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
import {initDirAuto} from './modules/dirauto.js';
// Init Gitea's Fomantic settings // Init Gitea's Fomantic settings
initGiteaFomantic(); initGiteaFomantic();
initDirAuto();
onDomReady(() => { onDomReady(() => {
initGlobalCommon(); initGlobalCommon();

View File

@ -0,0 +1,39 @@
// for performance considerations, it only uses performant syntax
function attachDirAuto(el) {
if (el.type !== 'hidden' &&
el.type !== 'checkbox' &&
el.type !== 'radio' &&
el.type !== 'range' &&
el.type !== 'color') {
el.dir = 'auto';
}
}
export function initDirAuto() {
const observer = new MutationObserver((mutationList) => {
const len = mutationList.length;
for (let i = 0; i < len; i++) {
const mutation = mutationList[i];
const len = mutation.addedNodes.length;
for (let i = 0; i < len; i++) {
const addedNode = mutation.addedNodes[i];
if (addedNode.nodeType !== Node.ELEMENT_NODE && addedNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) continue;
attachDirAuto(addedNode);
const children = addedNode.querySelectorAll('input, textarea');
const len = children.length;
for (let childIdx = 0; childIdx < len; childIdx++) {
attachDirAuto(children[childIdx]);
}
}
}
});
const docNodes = document.querySelectorAll('input, textarea');
const len = docNodes.length;
for (let i = 0; i < len; i++) {
attachDirAuto(docNodes[i]);
}
observer.observe(document, {subtree: true, childList: true});
}