summaryrefslogtreecommitdiffstats
path: root/web_src/js/webcomponents/absolute-date.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
committerDaniel Baumann <daniel@debian.org>2024-12-12 23:57:56 +0100
commite68b9d00a6e05b3a941f63ffb696f91e554ac5ec (patch)
tree97775d6c13b0f416af55314eb6a89ef792474615 /web_src/js/webcomponents/absolute-date.js
parentInitial commit. (diff)
downloadforgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.tar.xz
forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.zip
Adding upstream version 9.0.3.
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/js/webcomponents/absolute-date.js')
-rw-r--r--web_src/js/webcomponents/absolute-date.js40
1 files changed, 40 insertions, 0 deletions
diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js
new file mode 100644
index 0000000..d2be455
--- /dev/null
+++ b/web_src/js/webcomponents/absolute-date.js
@@ -0,0 +1,40 @@
+import {Temporal} from 'temporal-polyfill';
+
+export function toAbsoluteLocaleDate(dateStr, lang, opts) {
+ return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
+}
+
+window.customElements.define('absolute-date', class extends HTMLElement {
+ static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
+
+ update = () => {
+ const year = this.getAttribute('year') ?? '';
+ const month = this.getAttribute('month') ?? '';
+ const weekday = this.getAttribute('weekday') ?? '';
+ const day = this.getAttribute('day') ?? '';
+ const lang = this.closest('[lang]')?.getAttribute('lang') ||
+ this.ownerDocument.documentElement.getAttribute('lang') || '';
+
+ // only use the first 10 characters, e.g. the `yyyy-mm-dd` part
+ const dateStr = this.getAttribute('date').substring(0, 10);
+
+ if (!this.shadowRoot) this.attachShadow({mode: 'open'});
+ this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, {
+ ...(year && {year}),
+ ...(month && {month}),
+ ...(weekday && {weekday}),
+ ...(day && {day}),
+ });
+ };
+
+ attributeChangedCallback(_name, oldValue, newValue) {
+ if (!this.initialized || oldValue === newValue) return;
+ this.update();
+ }
+
+ connectedCallback() {
+ this.initialized = false;
+ this.update();
+ this.initialized = true;
+ }
+});