loading up the forgejo repo on tangled to test page performance
Add "dir=auto" for input/textarea elements by default (#26735)
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
authored by
wxiaoguang
silverwind
Giteabot
and committed by
GitHub
12212215
d1dca38a
+42
+1
web_src/css/base.css
+1
web_src/css/base.css
···
478
478
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
479
479
.ui.input > input {
480
480
line-height: var(--line-height-default);
481
+
text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
481
482
}
482
483
483
484
.ui.input.focus > input,
+2
web_src/js/index.js
+2
web_src/js/index.js
···
84
84
import {initRepoIssueList} from './features/repo-issue-list.js';
85
85
import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
86
86
import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
87
+
import {initDirAuto} from './modules/dirauto.js';
87
88
88
89
// Init Gitea's Fomantic settings
89
90
initGiteaFomantic();
91
+
initDirAuto();
90
92
91
93
onDomReady(() => {
92
94
initGlobalCommon();
+39
web_src/js/modules/dirauto.js
+39
web_src/js/modules/dirauto.js
···
1
+
// for performance considerations, it only uses performant syntax
2
+
3
+
function attachDirAuto(el) {
4
+
if (el.type !== 'hidden' &&
5
+
el.type !== 'checkbox' &&
6
+
el.type !== 'radio' &&
7
+
el.type !== 'range' &&
8
+
el.type !== 'color') {
9
+
el.dir = 'auto';
10
+
}
11
+
}
12
+
13
+
export function initDirAuto() {
14
+
const observer = new MutationObserver((mutationList) => {
15
+
const len = mutationList.length;
16
+
for (let i = 0; i < len; i++) {
17
+
const mutation = mutationList[i];
18
+
const len = mutation.addedNodes.length;
19
+
for (let i = 0; i < len; i++) {
20
+
const addedNode = mutation.addedNodes[i];
21
+
if (addedNode.nodeType !== Node.ELEMENT_NODE && addedNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) continue;
22
+
attachDirAuto(addedNode);
23
+
const children = addedNode.querySelectorAll('input, textarea');
24
+
const len = children.length;
25
+
for (let childIdx = 0; childIdx < len; childIdx++) {
26
+
attachDirAuto(children[childIdx]);
27
+
}
28
+
}
29
+
}
30
+
});
31
+
32
+
const docNodes = document.querySelectorAll('input, textarea');
33
+
const len = docNodes.length;
34
+
for (let i = 0; i < len; i++) {
35
+
attachDirAuto(docNodes[i]);
36
+
}
37
+
38
+
observer.observe(document, {subtree: true, childList: true});
39
+
}