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.
+  cal.querySelectorAll(".diary-cal-drop > button").forEach(wireDropdown);
-  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");
-    });
-  });
 
   var pageHeader = document.querySelector("header");
   function updateTop() {

assets/global-shortcuts.js

@@ -17,3 +17,33 @@
         }
     });
 })();
+
+// Wire a dropdown: clicking the trigger toggles its sibling .dropdown-menu;
+// clicking outside or pressing Escape closes all wired menus. Safe to call
+// multiple times on the same trigger (no-op on re-registration).
+function wireDropdown(trigger) {
+    if (!trigger || trigger.dataset.wired) return;
+    var menu = trigger.parentElement && trigger.parentElement.querySelector('.dropdown-menu');
+    if (!menu) return;
+    trigger.dataset.wired = '1';
+    trigger.addEventListener('click', function (e) {
+        e.stopPropagation();
+        document.querySelectorAll('.dropdown-menu.is-open').forEach(function (m) {
+            if (m !== menu) m.classList.remove('is-open');
+        });
+        menu.classList.toggle('is-open');
+    });
+    menu.addEventListener('click', function () { menu.classList.remove('is-open'); });
+}
+
+document.addEventListener('click', function (e) {
+    document.querySelectorAll('.dropdown-menu.is-open').forEach(function (menu) {
+        if (!menu.parentElement.contains(e.target)) menu.classList.remove('is-open');
+    });
+});
+document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Escape') return;
+    document.querySelectorAll('.dropdown-menu.is-open').forEach(function (menu) {
+        menu.classList.remove('is-open');
+    });
+});

assets/page-actions.js

@@ -68,24 +68,5 @@ function deletePage() {
 }
 
 document.addEventListener('DOMContentLoaded', function () {
-    var trigger = document.querySelector('[data-action="actions-drop"]');
+    wireDropdown(document.querySelector('[data-action="actions-drop"]'));
-    if (!trigger) return;
-    var menu = trigger.parentElement.querySelector('.dropdown-menu');
-    if (!menu) return;
-
-    trigger.addEventListener('click', function (e) {
-        e.stopPropagation();
-        menu.classList.toggle('is-open');
-    });
-    menu.addEventListener('click', function () {
-        menu.classList.remove('is-open');
-    });
-    document.addEventListener('click', function (e) {
-        if (!trigger.contains(e.target) && !menu.contains(e.target)) {
-            menu.classList.remove('is-open');
-        }
-    });
-    document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') menu.classList.remove('is-open');
-    });
 });

assets/page.html

@@ -99,9 +99,6 @@
             {{end}}
             {{end}}
         </main>
-        {{if .DiaryWidget}}
+        {{if .SidebarWidget}}{{.SidebarWidget}}{{end}}
-        {{.DiaryWidget}}
-        <script src="/_/diary/diary-calendar.js"></script>
-        {{end}}
     </body>
 </html>

assets/style.css

@@ -417,7 +417,7 @@ hr {
     font-size: 0.85rem;
 }
 
-.toc-header {
+.panel-header {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -455,7 +455,7 @@ hr {
     padding-left: 1.6rem;
 }
 
-.toc-toggle {
+.panel-toggle {
     display: none;
 }
 
@@ -528,16 +528,6 @@ hr {
     font-size: 0.85rem;
 }
 
-.diary-cal-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-    border-bottom: 1px dashed var(--secondary);
-    padding-bottom: 0.25rem;
-    margin-bottom: 0.4rem;
-}
-
 .diary-cal-nav {
     display: flex;
     align-items: center;
@@ -609,13 +599,9 @@ hr {
     color: var(--primary-hover);
 }
 
-.diary-cal-toggle {
-    display: none;
-}
-
 /* === Responsive === */
 @media (max-width: 1100px) {
-    .diary-cal-toggle {
+    .panel-toggle {
         display: block;
         background: none;
         border: 1px solid var(--secondary);
@@ -630,13 +616,14 @@ hr {
         width: calc(100% - 2rem);
         max-width: 860px;
     }
-    .diary-cal-toggle::before {
+    .panel-toggle::before {
         content: "▸ ";
         color: var(--secondary);
     }
-    .diary-cal-toggle[aria-expanded="true"]::before {
+    .panel-toggle[aria-expanded="true"]::before {
         content: "▾ ";
     }
+    .toc,
     .diary-cal {
         position: static;
         display: none;
@@ -645,48 +632,12 @@ hr {
         margin: 0 auto 1rem;
         max-height: none;
     }
+    .toc.is-open,
     .diary-cal.is-open {
         display: block;
     }
 }
 
-/* === Responsive === */
-@media (max-width: 1100px) {
-    .toc-toggle {
-        display: block;
-        background: none;
-        border: 1px solid var(--secondary);
-        color: var(--text);
-        font: inherit;
-        font-size: 0.8rem;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        cursor: pointer;
-        padding: 0.4rem 0.75rem;
-        margin: 1rem auto;
-        width: calc(100% - 2rem);
-        max-width: 860px;
-    }
-    .toc-toggle::before {
-        content: "▸ ";
-        color: var(--secondary);
-    }
-    .toc-toggle[aria-expanded="true"]::before {
-        content: "▾ ";
-    }
-    .toc {
-        position: static;
-        display: none;
-        width: calc(100% - 2rem);
-        max-width: 860px;
-        margin: 0 auto 1rem;
-        max-height: none;
-    }
-    .toc.is-open {
-        display: block;
-    }
-}
-
 @media (max-width: 600px) {
     header {
         padding: 0.5rem 0.75rem;
@@ -697,11 +648,8 @@ hr {
     textarea {
         min-height: 50vh;
     }
-    .toc-toggle,
+    .panel-toggle,
-    .toc.is-open {
+    .toc.is-open,
-        width: calc(100% - 1.5rem);
-    }
-    .diary-cal-toggle,
     .diary-cal.is-open {
         width: calc(100% - 1.5rem);
     }

assets/toc.js

@@ -9,7 +9,7 @@
   nav.className = "toc";
 
   var header = document.createElement("div");
-  header.className = "toc-header";
+  header.className = "panel-header";
   header.textContent = "Contents";
   nav.appendChild(header);
 
@@ -28,7 +28,7 @@
 
   var toggle = document.createElement("button");
   toggle.type = "button";
-  toggle.className = "toc-toggle";
+  toggle.className = "panel-toggle";
   toggle.textContent = "Contents";
   toggle.setAttribute("aria-expanded", "false");
   toggle.addEventListener("click", function () {

main.go

@@ -170,10 +170,10 @@ func (h *handler) serveDir(w http.ResponseWriter, r *http.Request, urlPath, fsPa
 	}
 
 	var specialContent template.HTML
-	var diaryWidget template.HTML
+	var sidebarWidget template.HTML
 	if special != nil {
 		specialContent = special.Content
-		diaryWidget = special.Widget
+		sidebarWidget = special.Widget
 	}
 
 	rawContent := string(rawMD)
@@ -196,7 +196,7 @@ func (h *handler) serveDir(w http.ResponseWriter, r *http.Request, urlPath, fsPa
 		Content:        rendered,
 		Entries:        entries,
 		SpecialContent: specialContent,
-		DiaryWidget:    diaryWidget,
+		SidebarWidget:  sidebarWidget,
 	}
 
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")

render.go

@@ -46,7 +46,7 @@ type pageData struct {
 	Content        template.HTML
 	Entries        []entry
 	SpecialContent template.HTML
-	DiaryWidget    template.HTML
+	SidebarWidget  template.HTML
 }
 
 // pageSettings holds the parsed contents of a .page-settings file.