Refactor calendar widget changes

assets/diary/diary-calendar.html

@@ -1,5 +1,5 @@
 <div class="diary-cal">
-  <div class="diary-cal-label"><a href="{{.DiaryURL}}">Chronological</a></div>
+  <div class="panel-header"><a href="{{.DiaryURL}}">Chronological</a></div>
   <div class="diary-cal-nav">
     <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
     <div class="dropdown diary-cal-drop">
@@ -26,3 +26,4 @@
     </tbody>
   </table>
 </div>
+<script src="/_/diary/diary-calendar.js"></script>

assets/diary/diary-calendar.js

@@ -4,7 +4,7 @@
 
   var toggle = document.createElement("button");
   toggle.type = "button";
-  toggle.className = "diary-cal-toggle";
+  toggle.className = "panel-toggle";
   toggle.textContent = "Kalender";
   toggle.setAttribute("aria-expanded", "false");
   toggle.addEventListener("click", function () {
@@ -18,35 +18,7 @@
     main.parentNode.insertBefore(cal, main);
   }
 
-  // Wire up month/year dropdowns inside the calendar.
-  var drops = cal.querySelectorAll(".diary-cal-drop");
-  drops.forEach(function (drop) {
-    var trigger = drop.querySelector("button");
-    var menu = drop.querySelector(".dropdown-menu");
-    if (!trigger || !menu) return;
-    trigger.addEventListener("click", function (e) {
-      e.stopPropagation();
-      drops.forEach(function (other) {
-        if (other !== drop) {
-          other.querySelector(".dropdown-menu").classList.remove("is-open");
-        }
-      });
-      menu.classList.toggle("is-open");
-    });
-  });
-  document.addEventListener("click", function (e) {
-    drops.forEach(function (drop) {
-      if (!drop.contains(e.target)) {
-        drop.querySelector(".dropdown-menu").classList.remove("is-open");
-      }
-    });
-  });
-  document.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
-    drops.forEach(function (drop) {
-      drop.querySelector(".dropdown-menu").classList.remove("is-open");
-    });
-  });
+  cal.querySelectorAll(".diary-cal-drop > button").forEach(wireDropdown);
 
   var pageHeader = document.querySelector("header");
   function updateTop() {