Replace use of I18n in javascript with OSM.i18n

[rails.git] / app / assets / javascripts / heatmap.js

diff --git a/app/assets/javascripts/heatmap.js b/app/assets/javascripts/heatmap.js
index c557f96e39ced41f9fc6ad3555f1284f91a9a3e2..fccc9a7b02e6c2a10cb79d772249c46a1e5ad270 100644 (file)
--- a/app/assets/javascripts/heatmap.js
+++ b/app/assets/javascripts/heatmap.js
@@ -12,10 +12,11 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   const heatmapData = heatmapElement.dataset.heatmap ? JSON.parse(heatmapElement.dataset.heatmap) : [];
+  const displayName = heatmapElement.dataset.displayName;
   const colorScheme = document.documentElement.getAttribute("data-bs-theme") ?? "auto";
   const rangeColors = ["#14432a", "#166b34", "#37a446", "#4dd05a"];
   const startDate = new Date(Date.now() - (365 * 24 * 60 * 60 * 1000));
-  const monthNames = I18n.t("date.abbr_month_names");
+  const monthNames = OSM.i18n.t("date.abbr_month_names");
 
   const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -68,16 +69,30 @@ document.addEventListener("DOMContentLoaded", () => {
         text: (date, value) => getTooltipText(date, value)
       }]
     ]);
+
+    cal.on("mouseover", (event, _timestamp, value) => {
+      if (value) event.target.style.cursor = "pointer";
+    });
+
+    cal.on("click", (_event, timestamp) => {
+      if (!displayName) return;
+      for (const { date, max_id } of heatmapData) {
+        if (!max_id) continue;
+        if (timestamp !== Date.parse(date)) continue;
+        const params = new URLSearchParams([["before", max_id + 1]]);
+        location = `/user/${encodeURIComponent(displayName)}/history?${params}`;
+      }
+    });
   }
 
   function getTooltipText(date, value) {
-    const localizedDate = I18n.l("date.formats.long", date);
+    const localizedDate = OSM.i18n.l("date.formats.long", date);
 
     if (value > 0) {
-      return I18n.t("javascripts.heatmap.tooltip.contributions", { count: value, date: localizedDate });
+      return OSM.i18n.t("javascripts.heatmap.tooltip.contributions", { count: value, date: localizedDate });
     }
 
-    return I18n.t("javascripts.heatmap.tooltip.no_contributions", { date: localizedDate });
+    return OSM.i18n.t("javascripts.heatmap.tooltip.no_contributions", { date: localizedDate });
   }
 
   function getTheme() {