summaryrefslogtreecommitdiffstats
path: root/web_src/js/features/formatting.js
diff options
context:
space:
mode:
authorYarden Shoham <git@yardenshoham.com>2023-04-11 02:01:20 +0300
committerGitHub <noreply@github.com>2023-04-11 01:01:20 +0200
commitb7b58348317cbe0145dc453d45c886b8e2764b4c (patch)
treecec91679aaba2b2d74242e6acdc7d9a8f8d3f213 /web_src/js/features/formatting.js
parent2b91841cd3e1213ff3e4ed4209d6a4be89c2fa79 (diff)
downloadgitea-b7b58348317cbe0145dc453d45c886b8e2764b4c.tar.gz
gitea-b7b58348317cbe0145dc453d45c886b8e2764b4c.zip
Use auto-updating, natively hoverable, localized time elements (#23988)
- Added [GitHub's `relative-time` element](https://github.com/github/relative-time-element) - Converted all formatted timestamps to use this element - No more flashes of unstyled content around time elements - These elements are localized using the `lang` property of the HTML file - Relative (e.g. the activities in the dashboard) and duration (e.g. server uptime in the admin page) time elements are auto-updated to keep up with the current time without refreshing the page - Code that is not needed anymore such as `formatting.js` and parts of `since.go` have been deleted Replaces #21440 Follows #22861 ## Screenshots ### Localized ![image](https://user-images.githubusercontent.com/20454870/230775041-f0af4fda-8f6b-46d3-b8e3-d340c791a50c.png) ![image](https://user-images.githubusercontent.com/20454870/230673393-931415a9-5729-4ac3-9a89-c0fb5fbeeeb7.png) ### Tooltips #### Native for dates ![image](https://user-images.githubusercontent.com/20454870/230797525-1fa0a854-83e3-484c-9da5-9425ab6528a3.png) #### Interactive for relative ![image](https://user-images.githubusercontent.com/115237/230796860-51e1d640-c820-4a34-ba2e-39087020626a.png) ### Auto-update ![rec](https://user-images.githubusercontent.com/20454870/230672159-37480d8f-435a-43e9-a2b0-44073351c805.gif) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: delvh <dev.lh@web.de>
Diffstat (limited to 'web_src/js/features/formatting.js')
-rw-r--r--web_src/js/features/formatting.js31
1 files changed, 0 insertions, 31 deletions
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js
deleted file mode 100644
index 5590ba44d1..0000000000
--- a/web_src/js/features/formatting.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const {lang} = document.documentElement;
-const dateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'});
-const shortDateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'short', day: 'numeric'});
-const dateTimeFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'});
-
-export function initFormattingReplacements() {
- // for each <time></time> tag, if it has the data-format attribute, format
- // the text according to the user's chosen locale and formatter.
- formatAllTimeElements();
-}
-
-function formatAllTimeElements() {
- const timeElements = document.querySelectorAll('time[data-format]');
- for (const timeElement of timeElements) {
- const formatter = getFormatter(timeElement.dataset.format);
- timeElement.textContent = formatter.format(new Date(timeElement.dateTime));
- }
-}
-
-function getFormatter(format) {
- switch (format) {
- case 'date':
- return dateFormatter;
- case 'short-date':
- return shortDateFormatter;
- case 'date-time':
- return dateTimeFormatter;
- default:
- throw new Error('Unknown format');
- }
-}