Feature: uui-time-ago

[umbraco]

Feature: uui-time-ago

[bjarnef]

@nielslyngsoe you may also want to look at this example to render relative time, which also use Intl.RelativeTimeFormat API: https://shoelace.style/components/relative-time

[leekelleher]

FYI, GitHub (the org) has a bundle of elements that extend the native <time> element:
<local-time>, <relative-time> and <time-ago>
https://github.com/github/time-elements

I found these on the Awesome Standalones repo, (for framework-agnostic standalone web components).

[bjarnef]

@warrenbuckley not yet, so feel free start working on this :)

[bjarnef]

@nielslyngsoe I just saw this on Twitter: https://twitter.com/Steve8708/status/1504131981444980739

Maybe a similar utility function?
Not sure what it return right after midnight though.

[bjarnef]

@leekelleher that's probably a good idea to extend the native <time> element.

It also use Intl.RelativeTimeFormat API as well via some utility methods:
https://github.com/github/time-elements/blob/main/src/utils.ts#L166-L179

Update: I think these functions were moved to here: https://github.com/github/relative-time-element/blob/main/src/relative-time-element.ts#L116-L200

[warrenbuckley]

@bjarnef you planning on working this, if not I may try and give this a go :)

[iOvergaard]

@warrenbuckley great that you'd like to take a stab at it! FYI, the component should handle the lang attribute directly as well as observe the lang attribute set on the browser element through the global variable known as document.documentElement.lang. I'm not sure if the Intl API picks up on this automatically. In the backoffice at least, we have to listen for changes to that attribute.

[bjarnef]

@iOvergaard the component could probably observe document lang attribute, but not sure if there's a need to specify a different language than backoffice language (or if used in other contexts). I this this Shoelace component may use default language in
https://shoelace.style/components/relative-time#localization

I think they handled English as the default/fallback language as part of the localization utility.
https://github.com/shoelace-style/shoelace/blob/7500cabc587abead71f2440ad8f87aa4c1f468f9/src/utilities/localize.ts#L2

Not sure if the localization in UI library or backoffice is aware of the locale/culture, but also other stuff like direction (LTR / RTL).
https://www.w3.org/International/questions/qa-html-dir

It seems the direction in that library was defined in each language:
https://github.com/shoelace-style/shoelace/blob/7500cabc587abead71f2440ad8f87aa4c1f468f9/src/utilities/localize.ts#L14

[iOvergaard]

@bjarnef

not sure if there's a need to specify a different language than backoffice language

No, probably not, but how does it get the backoffice language. Does the Intl Api get it from the lang attribute automatically?

[bjarnef]

@iOvergaard this project https://github.com/github/relative-time-element seems to get language from closest lang attribute: https://github.com/github/relative-time-element/blob/main/src/relative-time-element.ts#L84-L90

Regarding Intl.RelativeTimeFormat() I think it use en if locale is not provided.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat

[bjarnef]

Lang is a built-in global attribute. Relative Time will use this to provide an applicable language to the Intl APIs. If the individual element does not have a lang attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to en.

https://github.com/github/relative-time-element#lang

[warrenbuckley]

@bjarnef you seem to be more active on this and realistically with my workload and little free time I doubt I will get to this, so if you have been working on this please feel free to as I won't be right now.