Render all months in sidebar

assets/diary/calendar.html

@@ -1,29 +1,24 @@
 <div class="diary-cal panel panel-sidebar"
      data-display-year="{{.DisplayYear}}"
      data-display-month="{{.DisplayMonth}}">
-  <div class="panel-header"><a href="{{.DiaryURL}}">Chronological</a></div>
-  <div class="diary-cal-nav">
+  <div class="panel-header row">
+    <a href="{{.DiaryURL}}">Chronological</a>
     <div class="dropdown diary-cal-drop">
-      <button type="button" class="btn" data-cal-month-link data-action="cal-month-drop" aria-expanded="false" title="Monat wählen"> {{.DisplayMonthName}} </button>
-      <div class="dropdown-menu scrollable">
-        {{range .Months}}<a class="btn btn-block" data-cal-month-jump="{{.Num}}" href="{{.AnchorURL}}">{{.Name}}</a>{{end}}
-      </div>
-    </div>
-    <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
-    <div class="dropdown diary-cal-drop">
-      <button type="button" class="btn" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button>
+      <button type="button" class="btn" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">{{.DisplayYear}} ▾</button>
       <div class="dropdown-menu align-right scrollable">
         {{range .Years}}<a class="btn btn-block{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
       </div>
     </div>
   </div>
-  {{range .Months}}
-  <table class="diary-cal-grid" data-cal-month="{{.Num}}"{{if ne .Num $.DisplayMonth}} hidden{{end}}>
+  {{range $i, $m := .Months}}
+  {{if $i}}<hr/>{{end}}
+  <div class="diary-cal-month"><a href="{{$m.AnchorURL}}">{{$m.Name}}</a></div>
+  <table class="diary-cal-grid" data-cal-month="{{$m.Num}}">
     <thead>
       <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></tr>
     </thead>
     <tbody>
-    {{range .Weeks}}<tr>{{range .}}<td class="{{if .IsCurrent}}cal-current{{else if .IsToday}}cal-today{{end}}{{if and .Num (not .HasEntry)}} cal-empty{{end}}">{{if .Num}}<a href="{{.URL}}">{{.Num}}</a>{{end}}</td>{{end}}</tr>
+    {{range $m.Weeks}}<tr>{{range .}}<td class="{{if .IsCurrent}}cal-current{{else if .IsToday}}cal-today{{end}}{{if and .Num (not .HasEntry)}} cal-empty{{end}}">{{if .Num}}<a href="{{.URL}}">{{.Num}}</a>{{end}}</td>{{end}}</tr>
     {{end}}
     </tbody>
   </table>

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);
 })();