diff options
| author | Gusted <williamzijl7@hotmail.com> | 2022-06-12 14:08:23 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-06-12 20:08:23 +0800 |
| commit | 796c4eca0bacf67c186768de66fcfee21867045f (patch) | |
| tree | 3fc7947372c955953c0c6d443b05d3585a6ce300 /web_src/js | |
| parent | 0097fbc2ac153a686b68af43e791704e9b5cf74b (diff) | |
| download | gitea-796c4eca0bacf67c186768de66fcfee21867045f.tar.gz gitea-796c4eca0bacf67c186768de66fcfee21867045f.zip | |
Prettify number of issues (#17760)
* Prettify number of issues
- Use the PrettyNumber function to add commas in large amount of issues.
* Use client-side formatting
* prettify on both server and client
* remove unused i18n entries
* handle more cases, support other int types in PrettyNumber
* specify locale to avoid issues with node default locale
* remove superfluos argument
* introduce template helper, octicon tweaks, js refactor
* Update modules/templates/helper.go
* Apply some suggestions.
* Add comment
* Update templates/user/dashboard/issues.tmpl
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Diffstat (limited to 'web_src/js')
| -rw-r--r-- | web_src/js/features/formatting.js | 14 | ||||
| -rw-r--r-- | web_src/js/index.js | 5 | ||||
| -rw-r--r-- | web_src/js/utils.js | 7 | ||||
| -rw-r--r-- | web_src/js/utils.test.js | 14 |
4 files changed, 38 insertions, 2 deletions
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js new file mode 100644 index 0000000000..a7ee7ec3cf --- /dev/null +++ b/web_src/js/features/formatting.js @@ -0,0 +1,14 @@ +import {prettyNumber} from '../utils.js'; + +const {lang} = document.documentElement; + +export function initFormattingReplacements() { + // replace english formatted numbers with locale-specific separators + for (const el of document.getElementsByClassName('js-pretty-number')) { + const num = Number(el.getAttribute('data-value')); + const formatted = prettyNumber(num, lang); + if (formatted && formatted !== el.textContent) { + el.textContent = formatted; + } + } +} diff --git a/web_src/js/index.js b/web_src/js/index.js index b6a1aee779..0568da64ae 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -84,6 +84,11 @@ import {initRepoBranchButton} from './features/repo-branch.js'; import {initCommonOrganization} from './features/common-organization.js'; import {initRepoWikiForm} from './features/repo-wiki.js'; import {initRepoCommentForm, initRepository} from './features/repo-legacy.js'; +import {initFormattingReplacements} from './features/formatting.js'; + +// Run time-critical code as soon as possible. This is safe to do because this +// script appears at the end of <body> and rendered HTML is accessible at that point. +initFormattingReplacements(); // Silence fomantic's error logging when tabs are used without a target content element $.fn.tab.settings.silent = true; diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 67f8f1cc98..f01f2d3b22 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -90,3 +90,10 @@ export function strSubMatch(full, sub) { } return res; } + +// pretty-print a number using locale-specific separators, e.g. 1200 -> 1,200 +export function prettyNumber(num, locale = 'en-US') { + if (typeof num !== 'number') return ''; + const {format} = new Intl.NumberFormat(locale); + return format(num); +} diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js index acf3f1ece3..ba5335e3e4 100644 --- a/web_src/js/utils.test.js +++ b/web_src/js/utils.test.js @@ -1,5 +1,5 @@ import { - basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, + basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber, } from './utils.js'; test('basename', () => { @@ -85,7 +85,6 @@ test('parseIssueHref', () => { expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined}); }); - test('strSubMatch', () => { expect(strSubMatch('abc', '')).toEqual(['abc']); expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']); @@ -98,3 +97,14 @@ test('strSubMatch', () => { expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']); expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']); }); + +test('prettyNumber', () => { + expect(prettyNumber()).toEqual(''); + expect(prettyNumber(null)).toEqual(''); + expect(prettyNumber(undefined)).toEqual(''); + expect(prettyNumber('1200')).toEqual(''); + expect(prettyNumber(12345678, 'en-US')).toEqual('12,345,678'); + expect(prettyNumber(12345678, 'de-DE')).toEqual('12.345.678'); + expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678'); + expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678'); +}); |