mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-08-20 01:11:10 +00:00
When running relative-time tests on my local system, the tests fail. I've verified this failure does occur when the local system time is configured to use these timezones: - America/Edmonton - America/Boise - America/Goose Bay But the tests pass if the local system time is in these timezones: - America/Phoenix (has no DST) - Europe/Berlin (different DST rules) "7 months ago" (the existing test case output) is accurate considering the offsets used in the test, but internally dayjs calculates it to be 7.99 months when the system TZ is in the "success" TZs, and 8.0001 months in the "failure" TZs. I believe the source of the difference is that... - dayjs takes timestamps with offsets, applies the offset, and then treats them as local times... - Summer Time ended on Oct 27 (the "now" date under test) in Europe, but did not end until November 3rd in the US/Canada... - In Europe there would have been one hour less between those local timestamps than there would be in US/Canada. My proposed fix is to perform the diff calculations after converting the timestamps to UTC values. This provides consistent successful output regardless of the local system TZ. As the tests are sensitive to system timezone, I've modified the CI build to run the frontend tests twice with two different TZ environment variables. This is a pretty coarse way to exercise the problem and I'm open to improvements. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8858 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net> Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
240 lines
8.9 KiB
JavaScript
240 lines
8.9 KiB
JavaScript
import dayjs from 'dayjs';
|
|
import utc from 'dayjs/plugin/utc.js';
|
|
const {pageData} = window.config;
|
|
|
|
dayjs.extend(utc);
|
|
|
|
export const HALF_MINUTE = 30 * 1000;
|
|
export const ONE_MINUTE = 60 * 1000;
|
|
export const ONE_HOUR = 60 * ONE_MINUTE;
|
|
export const ONE_DAY = 24 * ONE_HOUR;
|
|
|
|
const ABSOLUTE_DATETIME_FORMAT = new Intl.DateTimeFormat(navigator.language, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZoneName: 'short',
|
|
});
|
|
const FALLBACK_DATETIME_FORMAT = new Intl.RelativeTimeFormat(navigator.language, {style: 'long'});
|
|
|
|
/**
|
|
* A list of plural rules for all languages.
|
|
* `plural_rules.go` defines the index for each of the 14 known plural rules.
|
|
*
|
|
* `pageData.PLURAL_RULE_LANG` is the index of the plural rule for the current language.
|
|
* `pageData.PLURAL_RULE_FALLBACK` is the index of the plural rule for the default language,
|
|
* to be used when a string is not translated in the current language.
|
|
*
|
|
* Each plural rule is a function that maps an amount `n` to the appropriate plural form index.
|
|
* Which index means which rule is specific for each language and also defined in `plural_rules.go`.
|
|
* The actual strings are in `pageData.PLURALSTRINGS_LANG` and `pageData.PLURALSTRINGS_FALLBACK`
|
|
* respectively, which is an array indexed by the plural form index.
|
|
*
|
|
* Links to the language plural rule and form definitions:
|
|
* https://codeberg.org/forgejo/forgejo/src/branch/forgejo/modules/translation/plural_rules.go
|
|
* https://www.unicode.org/cldr/charts/46/supplemental/language_plural_rules.html
|
|
* https://translate.codeberg.org/languages/$LANGUAGE_CODE/#information
|
|
* https://github.com/WeblateOrg/language-data/blob/main/languages.csv
|
|
*/
|
|
const PLURAL_RULES = [
|
|
// [ 0] Common 2-form, e.g. English, German
|
|
function (n) { return n !== 1 ? 1 : 0 },
|
|
|
|
// [ 1] Bengali 2-form
|
|
function (n) { return n > 1 ? 1 : 0 },
|
|
|
|
// [ 2] Icelandic 2-form
|
|
function (n) { return n % 10 !== 1 || n % 100 === 11 ? 1 : 0 },
|
|
|
|
// [ 3] Filipino 2-form
|
|
function (n) { return n !== 1 && n !== 2 && n !== 3 && (n % 10 === 4 || n % 10 === 6 || n % 10 === 9) ? 1 : 0 },
|
|
|
|
// [ 4] One form
|
|
function (_) { return 0 },
|
|
|
|
// [ 5] Czech 3-form
|
|
function (n) { return (n === 1) ? 0 : (n >= 2 && n <= 4) ? 1 : 2 },
|
|
|
|
// [ 6] Russian 3-form
|
|
function (n) { return n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
|
|
|
|
// [ 7] Polish 3-form
|
|
function (n) { return n === 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 },
|
|
|
|
// [ 8] Latvian 3-form
|
|
function (n) { return (n % 10 === 0 || n % 100 >= 11 && n % 100 <= 19) ? 0 : ((n % 10 === 1 && n % 100 !== 11) ? 1 : 2) },
|
|
|
|
// [ 9] Lithunian 3-form
|
|
function (n) { return (n % 10 === 1 && (n % 100 < 11 || n % 100 > 19)) ? 0 : ((n % 10 >= 2 && n % 10 <= 9 && (n % 100 < 11 || n % 100 > 19)) ? 1 : 2) },
|
|
|
|
// [10] French 3-form
|
|
function (n) { return (n === 0 || n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
|
|
|
|
// [11] Catalan 3-form
|
|
function (n) { return (n === 1) ? 0 : ((n !== 0 && n % 1000000 === 0) ? 1 : 2) },
|
|
|
|
// [12] Slovenian 4-form
|
|
function (n) { return n % 100 === 1 ? 0 : n % 100 === 2 ? 1 : n % 100 === 3 || n % 100 === 4 ? 2 : 3 },
|
|
|
|
// [13] Arabic 6-form
|
|
function (n) { return n === 0 ? 0 : n === 1 ? 1 : n === 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5 },
|
|
];
|
|
|
|
/**
|
|
* Look up the correct localized plural form for amount `n` for the string with the translation key `key`.
|
|
* If the current language does not contain a translation for this key, fallback to the browser's formatting.
|
|
*/
|
|
function GetPluralizedStringOrFallback(key, n, unit) {
|
|
const translation = pageData.PLURALSTRINGS_LANG[key]?.[PLURAL_RULES[pageData.PLURAL_RULE_LANG](n)];
|
|
if (translation) return translation.replace('%d', n);
|
|
return FALLBACK_DATETIME_FORMAT.format(-n, unit);
|
|
}
|
|
|
|
/**
|
|
* Update the displayed text of the given relative-time DOM element with its
|
|
* human-readable, localized relative time string.
|
|
* Returns the recommended interval in milliseconds until the object should be updated again,
|
|
* or null if the object is invalid.
|
|
*/
|
|
export function DoUpdateRelativeTime(object, now) {
|
|
const absoluteTime = object.getAttribute('datetime');
|
|
if (!absoluteTime) {
|
|
return null; // Object does not contain a datetime.
|
|
}
|
|
|
|
if (!now) now = Date.now();
|
|
|
|
const nowJS = dayjs.utc(now);
|
|
const thenJS = dayjs.utc(absoluteTime);
|
|
|
|
object.setAttribute('data-tooltip-content', ABSOLUTE_DATETIME_FORMAT.format(thenJS.toDate()));
|
|
|
|
if (nowJS.isBefore(thenJS)) {
|
|
// Datetime is in the future.
|
|
object.textContent = pageData.DATETIMESTRINGS.FUTURE;
|
|
return -Math.floor(nowJS.diff(thenJS, 'millisecond'));
|
|
}
|
|
|
|
const years = Math.floor(nowJS.diff(thenJS, 'year'));
|
|
if (years >= 1) {
|
|
// Datetime is at least one year ago.
|
|
if (years === 1 && pageData.DATETIMESTRINGS['relativetime.1year']) {
|
|
// Datetime is one year ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.1year'];
|
|
} else if (years === 2 && pageData.DATETIMESTRINGS['relativetime.2years']) {
|
|
// Datetime is two year ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.2years'];
|
|
} else {
|
|
// Datetime is more than a year ago.
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.years', years, 'year');
|
|
}
|
|
return ONE_DAY;
|
|
}
|
|
|
|
const months = Math.floor(nowJS.diff(thenJS, 'month'));
|
|
if (months >= 1) {
|
|
// Datetime is at least one month but less than a year ago.
|
|
if (months === 1 && pageData.DATETIMESTRINGS['relativetime.1month']) {
|
|
// Datetime is one month ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.1month'];
|
|
} else if (months === 2 && pageData.DATETIMESTRINGS['relativetime.2months']) {
|
|
// Datetime is two months ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.2months'];
|
|
} else {
|
|
// Datetime is several months ago (but less than a year).
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.months', months, 'month');
|
|
}
|
|
return ONE_DAY;
|
|
}
|
|
|
|
const weeks = Math.floor(nowJS.diff(thenJS, 'week'));
|
|
if (weeks >= 1) {
|
|
// Datetime is at least one week but less than a month ago.
|
|
if (weeks === 1 && pageData.DATETIMESTRINGS['relativetime.1week']) {
|
|
// Datetime is one week ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.1week'];
|
|
} else if (weeks === 2 && pageData.DATETIMESTRINGS['relativetime.2weeks']) {
|
|
// Datetime is two week ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.2weeks'];
|
|
} else {
|
|
// Datetime is several weeks ago (but less than a month).
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.weeks', weeks, 'week');
|
|
}
|
|
return ONE_DAY;
|
|
}
|
|
|
|
const days = Math.floor(nowJS.diff(thenJS, 'day'));
|
|
if (days >= 1) {
|
|
if (days === 1 && pageData.DATETIMESTRINGS['relativetime.1day']) {
|
|
// Datetime is one day ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.1day'];
|
|
} else if (days === 2 && pageData.DATETIMESTRINGS['relativetime.2days']) {
|
|
// Datetime is two days ago.
|
|
object.textContent = pageData.DATETIMESTRINGS['relativetime.2days'];
|
|
} else {
|
|
// Datetime is several days but less than a week ago.
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.days', days, 'day');
|
|
}
|
|
return ONE_DAY;
|
|
}
|
|
|
|
const hours = Math.floor(nowJS.diff(thenJS, 'hour'));
|
|
if (hours >= 1) {
|
|
// Datetime is one or more hours but less than a day ago.
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.hours', hours, 'hour');
|
|
return ONE_HOUR;
|
|
}
|
|
|
|
const minutes = Math.floor(nowJS.diff(thenJS, 'minute'));
|
|
if (minutes >= 1) {
|
|
// Datetime is one or more minutes but less than an hour ago.
|
|
object.textContent = GetPluralizedStringOrFallback('relativetime.mins', minutes, 'minute');
|
|
return ONE_MINUTE;
|
|
}
|
|
|
|
// Datetime is very recent.
|
|
object.textContent = pageData.DATETIMESTRINGS.NOW;
|
|
return HALF_MINUTE;
|
|
}
|
|
|
|
window.customElements.define('relative-time', class extends HTMLElement {
|
|
static observedAttributes = ['datetime'];
|
|
|
|
alive = false;
|
|
contentSpan = null;
|
|
|
|
update = (recurring) => {
|
|
if (!this.alive) return;
|
|
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({mode: 'open'});
|
|
this.contentSpan = document.createElement('span');
|
|
this.shadowRoot.append(this.contentSpan);
|
|
}
|
|
|
|
const next = DoUpdateRelativeTime(this);
|
|
if (recurring && next !== null) setTimeout(() => { this.update(true) }, next);
|
|
};
|
|
|
|
connectedCallback() {
|
|
this.alive = true;
|
|
this.update(true);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.alive = false;
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (name === 'datetime' && oldValue !== newValue) this.update(false);
|
|
}
|
|
|
|
set textContent(value) {
|
|
if (this.contentSpan) this.contentSpan.textContent = value;
|
|
}
|
|
get textContent() {
|
|
return this.contentSpan?.textContent;
|
|
}
|
|
});
|