web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Introduce GiteaLocaleNumber custom element to handle number localization on pages. (#23861)

Browse source 
Follow #21429 & #22861

Use `<gitea-locale-number>` instead of backend `PrettyNumber`. All old
`PrettyNumber` related functions are removed. A lot of code could be
simplified.

And some functions haven't been used for long time (dead code), so they
are also removed by the way (eg: `SplitStringAtRuneN`, `Dedent`)

This PR only tries to improve the `PrettyNumber` rendering problem, it
doesn't touch the "plural" problem.

Screenshot:


![image](https://user-images.githubusercontent.com/2114189/229290804-1f63db65-1e34-4a54-84ba-e00b44331b17.png)


![image](https://user-images.githubusercontent.com/2114189/229290911-c88dea00-b11d-48dd-accb-9f52edd73ce4.png)
This commit is contained in:
wxiaoguang 2023-04-04 00:58:09 +08:00 • committed by GitHub
parent 01d9466bfd
commit 19de52e0f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 94 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web_src/js/webcomponents/GiteaLocaleNumber.js Normal file
View file

@ -0,0 +1,20 @@
// Convert a number to a locale string by data-number attribute.
// Or add a tooltip by data-number-in-tooltip attribute. JSON: {message: "count: %s", number: 123}
window.customElements.define('gitea-locale-number', class extends HTMLElement {
connectedCallback() {
// ideally, the number locale formatting and plural processing should be done by backend with translation strings.
// if we have complete backend locale support (eg: Golang "x/text" package), we can drop this component.
const number = this.getAttribute('data-number');
if (number) {
this.attachShadow({mode: 'open'});
this.shadowRoot.textContent = new Intl.NumberFormat().format(Number(number));
}
const numberInTooltip = this.getAttribute('data-number-in-tooltip');
if (numberInTooltip) {
// TODO: only 2 usages of this, we can replace it with Golang's "x/text/number" package in the future
const {message, number} = JSON.parse(numberInTooltip);
const tooltipContent = message.replace(/%[ds]/, new Intl.NumberFormat().format(Number(number)));
this.setAttribute('data-tooltip-content', tooltipContent);
}
}
});