diff options
author | Yarden Shoham <git@yardenshoham.com> | 2023-04-11 02:01:20 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-04-11 01:01:20 +0200 |
commit | b7b58348317cbe0145dc453d45c886b8e2764b4c (patch) | |
tree | cec91679aaba2b2d74242e6acdc7d9a8f8d3f213 /web_src/js/features/formatting.js | |
parent | 2b91841cd3e1213ff3e4ed4209d6a4be89c2fa79 (diff) | |
download | gitea-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.js | 31 |
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'); - } -} |