7 Commits (4de224469774a502f560cbf62060a03016c97167)

Author	SHA1	Message	Date
wxiaoguang	e5b3f53d36	Add minimum polyfill to support "relative-time-element" in PaleMoon (#26575) ... Close #26525	1 year ago
wxiaoguang	7681d582cd	Refactor locale number (#24134) ... Before, the `GiteaLocaleNumber.js` was just written as a a drop-in replacement for old `js-pretty-number`. Actually, we can use Golang's `text` package to format. This PR partially completes the TODOs in `GiteaLocaleNumber.js`: > if we have complete backend locale support (eg: Golang "x/text" package), we can drop this component. > tooltip: only 2 usages of this, we can replace it with Golang's "x/text/number" package in the future. This PR also helps #24131 Screenshots: <details>   </details>	2 years ago
Yarden Shoham	b7b5834831	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   ### Tooltips #### Native for dates  #### Interactive for relative  ### Auto-update  --------- 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>	2 years ago
wxiaoguang	19de52e0f4	Introduce GiteaLocaleNumber custom element to handle number localization on pages. (#23861) ... 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:  	2 years ago
wxiaoguang	529bac1950	Polyfill the window.customElements (#23592) ... Related: #23590 Reference: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs It seems that there are some users using old browsers, so the `window.customElements` need polyfill. The Custom Elements would help a lot for Gitea's UI problems, including: * `<span class="js-pretty-number">` * `<time data-format>` So it's worth get polyfill. --------- Co-authored-by: delvh <dev.lh@web.de>	2 years ago
wxiaoguang	0bfcbcc5e7	Add document for `webcomponents` (#23261)	2 years ago
wxiaoguang	e7ef94e00f	Introduce customized HTML elements, fix incorrect AppUrl usages in templates (#22861) ... This PR follows: * #21986 * #22831 This PR also introduce customized HTML elements, which would also help problems like: * #17760 * #21429 * #21440 With customized HTML elements, there won't be any load-search-replace operations, and it can avoid page flicking (which @silverwind cares a lot). Browser support: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements # FAQ ## Why the component has the prefix? As usual, I would strongly suggest to add prefixes for our own/private names. The dedicated prefix will avoid conflicts in the future, and it makes it easier to introduce various 3rd components, like GitHub's `relative-time` component. If there is no prefix, it's impossible to introduce another public component with the same name in the future. ## Why the `custcomp.js` is loaded before HTML body? The `index.js` is after HTML body. Customized components must be registered before the content loading. Otherwise there would be still some flicking. `custcomp.js` should have its own dependencies and should be very light, so it won't affect the page loading time too much. ## Why use `data-url` attribute but not use the `textContent`? According to the standard, the `connectedCallback` occurs on the tag-opening moment. The element's children are not ready yet. ## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide the absolute URL? It's difficult for backend to guess the correct protocol(scheme) correctly with zero configuration. Generating the absolute URL from frontend can guarantee that the URL is 100% correct -- since the user is visiting it. # Screenshot <details>  </details>	2 years ago