From 3e91ea2c71426b1d8b2737178c0184f82b120d82 Mon Sep 17 00:00:00 2001 From: Zachary Taylor Date: Tue, 28 Oct 2025 22:06:12 +0000 Subject: [PATCH 1/4] add support for evaluating format based on user's preferred threshold --- src/relative-time-element.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 353655b..22a0c6b 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -154,9 +154,19 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor // 'auto' is an alias for 'relative' if ((format === 'auto' || format === 'relative') && typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) { - const tense = this.tense - if (tense === 'past' || tense === 'future') return 'relative' - if (Duration.compare(duration, this.threshold) === 1) return 'relative' + // This attribute will only be present if the user has setting enabled + const userPreferredThreshold = this.ownerDocument.body?.getAttribute('data-preferred-threshold') + if (userPreferredThreshold) { + // "PT0S" would be at threshold of 0 seconds, corresponding to "always show absolute time" + if (isDuration(userPreferredThreshold)) { + if (Duration.compare(duration, userPreferredThreshold) === 1) return 'relative' + } + return 'datetime' + } else { + const tense = this.tense + if (tense === 'past' || tense === 'future') return 'relative' + if (Duration.compare(duration, this.threshold) === 1) return 'relative' + } } return 'datetime' } From f7ab161fb0b86c498aa0184ce5fea388d3cda380 Mon Sep 17 00:00:00 2001 From: Zachary Taylor Date: Tue, 28 Oct 2025 22:07:00 +0000 Subject: [PATCH 2/4] set element root text based on resolvedFormat --- src/relative-time-element.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 22a0c6b..e1ce1af 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -513,7 +513,12 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor // Experimental: Enable absolute time if users prefers it, but never for `duration` format const displayUserPreferredAbsoluteTime = this.#shouldDisplayUserPreferredAbsoluteTime(format) if (displayUserPreferredAbsoluteTime) { - newText = this.#getUserPreferredAbsoluteTimeFormat(date) + if (format === 'relative') { + newText = this.#getRelativeFormat(duration) + } else { + // datetime + newText = this.#getUserPreferredAbsoluteTimeFormat(date) + } } else { if (format === 'duration') { newText = this.#getDurationFormat(duration) From 0dfe5f90d5f81be613b894bb02c372a133141ecd Mon Sep 17 00:00:00 2001 From: Zachary Taylor Date: Tue, 28 Oct 2025 22:13:58 +0000 Subject: [PATCH 3/4] remove dependence on absolute time setting for dateObserver enablement --- src/relative-time-element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index e1ce1af..1860286 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -540,7 +540,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor this.dispatchEvent(new RelativeTimeUpdatedEvent(oldText, newText, oldTitle, newTitle)) } - if ((format === 'relative' || format === 'duration') && !displayUserPreferredAbsoluteTime) { + if (format === 'relative' || format === 'duration') { dateObserver.observe(this) } else { dateObserver.unobserve(this) From 7f0c982492b9beafe58fcaec2d33f256142cbdd0 Mon Sep 17 00:00:00 2001 From: Zachary Taylor Date: Tue, 28 Oct 2025 22:27:19 +0000 Subject: [PATCH 4/4] Add comment detailing planned supported threshold values --- src/relative-time-element.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 1860286..52fbd1f 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -157,7 +157,12 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor // This attribute will only be present if the user has setting enabled const userPreferredThreshold = this.ownerDocument.body?.getAttribute('data-preferred-threshold') if (userPreferredThreshold) { - // "PT0S" would be at threshold of 0 seconds, corresponding to "always show absolute time" + // Possible values of ISO 8601 durations for our cases are: + // - "PT0S" (always) would be a threshold of 0 seconds, corresponding to always showing absolute time + // - "P1D" (1 day) + // - "P7D" (1 week) + // - "P1M" (1 month) + // - "P1Y" (1 year) if (isDuration(userPreferredThreshold)) { if (Duration.compare(duration, userPreferredThreshold) === 1) return 'relative' }