summaryrefslogtreecommitdiffstats
path: root/web_src/js/webcomponents
Commit message (Collapse)AuthorAgeFilesLines
* Use `Temporal.PlainDate` for absolute dates (#29804) (#29808)silverwind2024-03-152-10/+25
| | | | | | | | | | | | | | | | | | | | | | | Backport https://github.com/go-gitea/gitea/pull/29804. Use the upcoming [Temporal.PlainDate](https://tc39.es/proposal-temporal/docs/plaindate.html) via polyfill. If there is any remaining bugs in `<absolute-date>` this will iron them out. I opted for the lightweight polyfill because both seem to achieve our goal of localizeable absolute dates. - With [`@js-temporal/polyfill`](https://www.npmjs.com/package/@js-temporal/polyfill) chunk size goes from 81.4 KiB to 274 KiB - With [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) chunk size goes from 81.4 KiB to 142 KiB Also see [this table](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#comparison-with-js-temporalpolyfill) for more comparisons of these polyfills. Soon there will be [treeshakable API](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#tree-shakable-api) as well which will further reduce size.
* Fix date rendering by adding `<gitea-absolute-date>` (#29725) (#29747)Giteabot2024-03-132-0/+41
| | | | | | | | | | | | | | | | | Backport #29725 by @silverwind Alternative to: https://github.com/go-gitea/gitea/pull/29698 Fixes: https://github.com/go-gitea/gitea/issues/29034 <img width="278" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/12ecd967-2723-410d-8a28-a1b0f41b7bba"> It also fixes a secondary issue that we were showing timestamp tooltips over date, which makes no sense, so these are now gone as well: <img width="284" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/a70432f3-97b6-41e6-b202-b53b76924a66"> Co-authored-by: silverwind <me@silverwind.io>
* Fix URL calculation in clone input box (#29470) (#29473)Giteabot2024-02-281-2/+3
| | | | | | | | | | Backport #29470 by @silverwind Ported the function as-is and added comments so we don't forget about this in the future. Fixes: https://github.com/go-gitea/gitea/issues/29462 Co-authored-by: silverwind <me@silverwind.io>
* Fix gitea-origin-url with default ports (#29085) (#29088)Giteabot2024-02-082-12/+33
| | | | | | | | | | | | | | | | | | Backport #29085 by @silverwind When setting `url.host` on a URL object with no port specified (like is the case of default port), the resulting URL's port will not change. Workaround this quirk in the URL standard by explicitely setting port for the http and https protocols. Extracted the logic to a function for the purpose of testing. Initially I wanted to have the function in utils.js, but it turns out esbuild can not treeshake the unused functions which would result in the webcomponents chunk having all 2kB utils.js inlined, so it seemed not worth. Fixes: https://github.com/go-gitea/gitea/issues/29084 Co-authored-by: silverwind <me@silverwind.io>
* Polyfill SubmitEvent for PaleMoon (#28441) (#28478)Giteabot2023-12-151-1/+1
| | | | | | | | | | Backport #28441 by wxiaoguang Fix #28319 It only polyfills if there is no "SubmitEvent" class, so it has no side effect for most users. Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Add minimum polyfill to support "relative-time-element" in PaleMoon (#26575)wxiaoguang2023-08-182-0/+19
| | | Close #26525
* Refactor locale number (#24134)wxiaoguang2023-04-172-21/+0
| | | | | | | | | | | | | | | | | | | | | | | | | | 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> ![image](https://user-images.githubusercontent.com/2114189/232179420-b1b9974b-9d96-4408-b209-b80182c8b359.png) ![image](https://user-images.githubusercontent.com/2114189/232179416-14f36aa0-3f3e-4ac9-b366-7bd3a4464a11.png) </details>
* Use auto-updating, natively hoverable, localized time elements (#23988)Yarden Shoham2023-04-112-6/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | - 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>
* Introduce GiteaLocaleNumber custom element to handle number localization on ↵wxiaoguang2023-04-034-4/+24
| | | | | | | | | | | | | | | | | | | | | | | 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: ![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)
* Polyfill the window.customElements (#23592)wxiaoguang2023-03-201-0/+2
| | | | | | | | | | | | | | | | | | | | 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>
* Add document for `webcomponents` (#23261)wxiaoguang2023-03-031-0/+19
|
* Introduce customized HTML elements, fix incorrect AppUrl usages in templates ↵wxiaoguang2023-02-171-0/+17
(#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> ![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png) </details>