Render all months in sidebar

assets/diary/calendar.js

@@ -3,47 +3,43 @@
   if (!cal) return;
   cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
 
-  var displayYear = parseInt(cal.dataset.displayYear, 10);
-  var current = parseInt(cal.dataset.displayMonth, 10);
-  var monthLabel = cal.querySelector("[data-cal-month-link]");
+  var displayMonth = parseInt(cal.dataset.displayMonth, 10);
   var months = {};
   cal.querySelectorAll("[data-cal-month]").forEach(function (t) {
     months[parseInt(t.dataset.calMonth, 10)] = t;
   });
-  var jumpLinks = {};
-  cal.querySelectorAll("[data-cal-month-jump]").forEach(function (a) {
-    jumpLinks[parseInt(a.dataset.calMonthJump, 10)] = a;
-  });
 
-  function show(m) {
-    if (m === current) return;
-    if (!months[m]) return;
-    months[current].hidden = true;
-    months[m].hidden = false;
-    current = m;
-    if (monthLabel) {
-      var label = jumpLinks[m];
-      if (label) monthLabel.textContent = " " + label.textContent + " ";
+  // Centering only applies inside the persistent desktop rail (.sidebar). On
+  // mobile the widget is re-parented into .overlay-body, where we leave the
+  // grids stacked from January and do not scroll (design decision).
+  function railContainer() {
+    var el = cal.parentElement;
+    while (el) {
+      if (el.classList) {
+        if (el.classList.contains("overlay-body")) return null;
+        if (el.classList.contains("sidebar")) return el;
+      }
+      el = el.parentElement;
     }
+    return null;
   }
 
-  // Dropdown month picks scroll via the href anchor; we also swap the grid
-  // so the calendar reflects what the user just navigated to.
-  Object.keys(jumpLinks).forEach(function (key) {
-    var a = jumpLinks[key];
-    a.addEventListener("click", function () { show(parseInt(key, 10)); });
-  });
-
-  // Any in-page anchor click (#YYYY-MM or #YYYY-MM-DD) updates the calendar
-  // so it tracks the user's focus through the year page.
-  function syncFromHash() {
-    var h = window.location.hash;
-    if (!h) return;
-    var m = h.match(/^#(\d{4})-(\d{2})(?:-\d{2})?$/);
-    if (!m) return;
-    if (parseInt(m[1], 10) !== displayYear) return;
-    show(parseInt(m[2], 10));
+  // Scroll only the rail so the given month grid sits in its vertical center;
+  // the main document/window position is untouched (priority: don't disturb
+  // the reading position).
+  function centerMonth(m) {
+    var grid = months[m];
+    if (!grid) return;
+    var container = railContainer();
+    if (!container) return;
+    var offset = grid.getBoundingClientRect().top -
+      container.getBoundingClientRect().top + container.scrollTop;
+    container.scrollTop = offset - (container.clientHeight - grid.clientHeight) / 2;
   }
-  window.addEventListener("hashchange", syncFromHash);
-  syncFromHash();
+
+  // Center the current month once, on initial render. Anchor navigation
+  // (#YYYY-MM / #YYYY-MM-DD) deliberately does NOT re-center the rail —
+  // re-scrolling on every hop is disorienting; the today/current cell
+  // highlighting is enough to keep bearings.
+  centerMonth(displayMonth);
 })();