From cf1b23c001098411b6b18ea14a2bef17f6002e63 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 11 Oct 2022 13:05:17 +0000 Subject: [PATCH 1/7] Respect user's locale when rendering the date range in the repo activity page Previously, to make the date range understood by all, we used the format "2006-01-02" for the dates as it's locale-generic. This commit changes the rendering logic. Instead of rendering the date on the server, we send a formatted computer-readable timestamp. The client's javascript then renders it according to the user's locale. This approach is reusable across the codebase, any tag with the "data-format-text-according-to-datetime" attribute would get rendered according to the user's chosen locale. Signed-off-by: Yarden Shoham --- routers/web/repo/activity.go | 4 ++-- templates/repo/activity.tmpl | 2 +- web_src/js/features/formatting.js | 10 ++++++++++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/routers/web/repo/activity.go b/routers/web/repo/activity.go index a1f1106159c51..316cbcd95f3b6 100644 --- a/routers/web/repo/activity.go +++ b/routers/web/repo/activity.go @@ -47,8 +47,8 @@ func Activity(ctx *context.Context) { ctx.Data["Period"] = "weekly" timeFrom = timeUntil.Add(-time.Hour * 168) } - ctx.Data["DateFrom"] = timeFrom.Format("2006-01-02") - ctx.Data["DateUntil"] = timeUntil.Format("2006-01-02") + ctx.Data["DateFrom"] = timeFrom.UTC().Format(time.RFC3339) + ctx.Data["DateUntil"] = timeUntil.UTC().Format(time.RFC3339) ctx.Data["PeriodText"] = ctx.Tr("repo.activity.period." + ctx.Data["Period"].(string)) var err error diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index c2f6c2d982e05..963ff18c0f8a2 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-

{{.DateFrom}} - {{.DateUntil}} +

-
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index a7ee7ec3cf36f..217d69b8fcd21 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -11,4 +11,14 @@ export function initFormattingReplacements() { el.textContent = formatted; } } + + // for each tag, if it has the data-format-text-according-to-datetime, format + // the text according to the user's chosen locale + const locale = document.getElementsByTagName('html')[0].lang; + const formatter = new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}); + for (const timeElement of document.getElementsByTagName('time')) { + if (timeElement.hasAttribute('data-format-text-according-to-datetime')) { + timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); + } + } } From c964835d08da051b3341df6e6735241125aa5762 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 11 Oct 2022 21:54:00 +0000 Subject: [PATCH 2/7] Rename data-format-text-according-to-datetime to data-date-format Signed-off-by: Yarden Shoham --- templates/repo/activity.tmpl | 2 +- web_src/js/features/formatting.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index 963ff18c0f8a2..ed9a9359e0b4b 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-

- +

-
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index 217d69b8fcd21..3910e0b5190f8 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -12,12 +12,12 @@ export function initFormattingReplacements() { } } - // for each tag, if it has the data-format-text-according-to-datetime, format + // for each tag, if it has the data-date-format, format // the text according to the user's chosen locale const locale = document.getElementsByTagName('html')[0].lang; const formatter = new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}); for (const timeElement of document.getElementsByTagName('time')) { - if (timeElement.hasAttribute('data-format-text-according-to-datetime')) { + if (timeElement.hasAttribute('data-date-format')) { timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); } } From f777fac494019b8ff13079d6d06355966738f14b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 12 Oct 2022 01:35:38 +0300 Subject: [PATCH 3/7] Update web_src/js/features/formatting.js Co-authored-by: silverwind --- web_src/js/features/formatting.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index 3910e0b5190f8..61dbc92436d12 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -14,8 +14,8 @@ export function initFormattingReplacements() { // for each tag, if it has the data-date-format, format // the text according to the user's chosen locale - const locale = document.getElementsByTagName('html')[0].lang; - const formatter = new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}); + const {lang} = document.documentElement; + const formatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'}); for (const timeElement of document.getElementsByTagName('time')) { if (timeElement.hasAttribute('data-date-format')) { timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); From a22b21b016525cb76c968ffef9720b774ebdcb57 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 11 Oct 2022 22:48:40 +0000 Subject: [PATCH 4/7] Use string instead of boolean value in time tag locale automation Signed-off-by: Yarden Shoham --- templates/repo/activity.tmpl | 2 +- web_src/js/features/formatting.js | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index ed9a9359e0b4b..0c642f6d6a400 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-

- +

-
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index 61dbc92436d12..0cb4d3e0b6029 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -12,13 +12,10 @@ export function initFormattingReplacements() { } } - // for each tag, if it has the data-date-format, format + // for each tag, if it has the data-format="date" attribute, format // the text according to the user's chosen locale - const {lang} = document.documentElement; const formatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'}); - for (const timeElement of document.getElementsByTagName('time')) { - if (timeElement.hasAttribute('data-date-format')) { - timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); - } + for (const timeElement of document.querySelectorAll('time[data-format="date"]')) { + timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); } } From dd76642761291c7d718fbf94e1bab56929308228 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 12 Oct 2022 09:14:02 +0000 Subject: [PATCH 5/7] Refactor formatting.js to reorder formatter initialization Signed-off-by: Yarden Shoham --- web_src/js/features/formatting.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index 0cb4d3e0b6029..fe1ab3f096ef8 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -1,6 +1,7 @@ import {prettyNumber} from '../utils.js'; const {lang} = document.documentElement; +const dateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'}); export function initFormattingReplacements() { // replace english formatted numbers with locale-specific separators @@ -14,8 +15,7 @@ export function initFormattingReplacements() { // for each tag, if it has the data-format="date" attribute, format // the text according to the user's chosen locale - const formatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'}); for (const timeElement of document.querySelectorAll('time[data-format="date"]')) { - timeElement.innerText = formatter.format(new Date(timeElement.dateTime)); + timeElement.innerText = dateFormatter.format(new Date(timeElement.dateTime)); } } From 733739d35bfb81d4abc7969d44a5aee4e1424e53 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 12 Oct 2022 19:54:17 +0300 Subject: [PATCH 6/7] Update templates/repo/activity.tmpl Co-authored-by: silverwind --- templates/repo/activity.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index 0c642f6d6a400..cc6ca95edbdb8 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,7 +2,7 @@
{{template "repo/header" .}}
-

- +

-
From da91763f0c41e7b9b66a9bb4ff7e8feaf65fc0ec Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 12 Oct 2022 19:54:29 +0300 Subject: [PATCH 7/7] Update web_src/js/features/formatting.js Co-authored-by: silverwind --- web_src/js/features/formatting.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js index fe1ab3f096ef8..5f4633bba2120 100644 --- a/web_src/js/features/formatting.js +++ b/web_src/js/features/formatting.js @@ -16,6 +16,6 @@ export function initFormattingReplacements() { // for each tag, if it has the data-format="date" attribute, format // the text according to the user's chosen locale for (const timeElement of document.querySelectorAll('time[data-format="date"]')) { - timeElement.innerText = dateFormatter.format(new Date(timeElement.dateTime)); + timeElement.textContent = dateFormatter.format(new Date(timeElement.dateTime)); } }