122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
"use strict"
|
|
|
|
/**
|
|
* Relative Date/Time Custom HTML Element
|
|
*
|
|
* This creates an element that will take the existing date/time and replace it with words (ex. "about a year ago",
|
|
* "in 3 hours"). It will update based on the interval provided in the tag.
|
|
*
|
|
* ```html
|
|
* <relative-date-time interval=5000>2024-08-22T12:34:56+00:00</relative-date-time>
|
|
* ```
|
|
*/
|
|
class RelativeDateTime extends HTMLElement {
|
|
|
|
static #LessThanXMinutes = Symbol()
|
|
static #XMinutes = Symbol()
|
|
static #AboutXHours = Symbol()
|
|
static #XDays = Symbol()
|
|
static #AboutXMonths = Symbol()
|
|
static #XMonths = Symbol()
|
|
static #AboutXYears = Symbol()
|
|
static #OverXYears = Symbol()
|
|
static #AlmostXYears = Symbol()
|
|
|
|
static #messages = new Map([
|
|
[RelativeDateTime.#LessThanXMinutes, ['less than a minute', 'less than %d minutes']],
|
|
[RelativeDateTime.#XMinutes, ['a minute', '%d minutes']],
|
|
[RelativeDateTime.#AboutXHours, ['about an hour', 'about %d hours']],
|
|
[RelativeDateTime.#XDays, ['a day', '%d days']],
|
|
[RelativeDateTime.#AboutXMonths, ['about a month', 'about %d months']],
|
|
[RelativeDateTime.#XMonths, ['a month', '%d months']],
|
|
[RelativeDateTime.#AboutXYears, ['about a year', 'about %d years']],
|
|
[RelativeDateTime.#OverXYears, ['over a year', 'over %d years']],
|
|
[RelativeDateTime.#AlmostXYears, ['almost a year', 'almost %d years']],
|
|
])
|
|
|
|
static #aDay = 1440.0
|
|
static #almost2Days = 2520.0
|
|
static #aMonth = 43200.0
|
|
static #twoMonths = 86400.0
|
|
|
|
/**
|
|
* The date, parsed from the `innerHTML` of the element
|
|
* @type Date
|
|
*/
|
|
#jsDate
|
|
|
|
/**
|
|
* The ID of the interval (set via `setTimeout`, passed to `clearTimeout`)
|
|
* @type ?number
|
|
*/
|
|
#timeOut = null
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
#update() {
|
|
|
|
const now = new Date()
|
|
const minutes = Math.abs((this.#jsDate.getTime() - now.getTime()) / 60 / 1000);
|
|
const months = Math.round(minutes / RelativeDateTime.#aMonth);
|
|
const years = Math.floor(months / 12);
|
|
|
|
/** @type symbol */
|
|
let typ
|
|
/** @type number */
|
|
let nbr
|
|
|
|
if (minutes < 1.0) {
|
|
typ = RelativeDateTime.#LessThanXMinutes
|
|
nbr = 1
|
|
} else if (minutes < 45.0) {
|
|
typ = RelativeDateTime.#XMinutes
|
|
nbr = Math.round(minutes)
|
|
} else if (minutes < 90.0) {
|
|
typ = RelativeDateTime.#AboutXHours
|
|
nbr = 1
|
|
} else if (minutes < RelativeDateTime.#aDay) {
|
|
typ = RelativeDateTime.#AboutXHours
|
|
nbr = Math.round(minutes / 60)
|
|
} else if (minutes < RelativeDateTime.#almost2Days) {
|
|
typ = RelativeDateTime.#XDays
|
|
nbr = 1
|
|
} else if (minutes < RelativeDateTime.#aMonth) {
|
|
typ = RelativeDateTime.#XDays
|
|
nbr = Math.round(minutes / RelativeDateTime.#aDay)
|
|
} else if (minutes < RelativeDateTime.#twoMonths) {
|
|
typ = RelativeDateTime.#AboutXMonths
|
|
nbr = Math.round(minutes / RelativeDateTime.#aMonth)
|
|
} else if (months < 12) {
|
|
typ = RelativeDateTime.#XMonths
|
|
nbr = Math.round(minutes / RelativeDateTime.#aMonth)
|
|
} else if (months % 12 < 3) {
|
|
typ = RelativeDateTime.#AboutXYears
|
|
nbr = years
|
|
} else if (months % 12 < 9) {
|
|
typ = RelativeDateTime.#OverXYears
|
|
nbr = years
|
|
} else {
|
|
typ = RelativeDateTime.#AlmostXYears
|
|
nbr = years + 1
|
|
}
|
|
|
|
const tmpl = RelativeDateTime.#messages.get(typ)
|
|
const message = nbr === 1 ? tmpl[0] : tmpl[1].replace("%d", nbr.toString())
|
|
this.innerText = this.#jsDate < now ? `${message} ago` : `in ${message}`
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.#jsDate = new Date(this.innerText)
|
|
this.#update()
|
|
this.#timeOut = setInterval(() => this.#update(), parseInt(this.getAttribute("interval")))
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.#timeOut) clearInterval(this.#timeOut)
|
|
}
|
|
}
|
|
|
|
customElements.define("relative-date-time", RelativeDateTime)
|