From bd5f4005f5750584d4946e79c6964092cc4ac4ec Mon Sep 17 00:00:00 2001
From: Casey Rodarmor <casey@rodarmor.com>
Date: Sun, 6 Sep 2026 14:21:55 -0700
Subject: [PATCH] Add popover and fullscreen toggle keyboard shortcuts

---
 src/templates/item.rs |  2 ++
 static/item.js        | 20 ++++++++++++++++++--
 templates/item.html   |  2 ++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/templates/item.rs b/src/templates/item.rs
index 84244e09..258e92fb 100644
--- a/src/templates/item.rs
+++ b/src/templates/item.rs
@@ -350,6 +350,8 @@ mod tests {
               <div><dt><kbd>p</kbd></dt><dd>go to previous item</dd></div>
               <div><dt><kbd>n</kbd></dt><dd>go to next item</dd></div>
               <div><dt><kbd>u</kbd></dt><dd>go to package</dd></div>
+              <div><dt><kbd>f</kbd></dt><dd>toggle full screen</dd></div>
+              <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
             </dl>
     "
     .trim();
diff --git a/static/item.js b/static/item.js
index e79f2f52..4e970e71 100644
--- a/static/item.js
+++ b/static/item.js
@@ -1,9 +1,25 @@
-let prev = document.querySelector('link[rel=prev]');
+let media = document.querySelector('img, video');
 let next = document.querySelector('link[rel=next]');
+let prev = document.querySelector('link[rel=prev]');
+let shortcuts = document.querySelector('#shortcuts');
 let up = document.querySelector('link[rel=up]');
 
 document.addEventListener('keydown', (event) => {
-  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+  if (event.altKey || event.ctrlKey || event.metaKey) {
+    return;
+  }
+
+  if (event.key === '?') {
+    shortcuts.togglePopover();
+    return;
+  }
+
+  if (event.key === 'f' && document.fullscreenEnabled) {
+    if (document.fullscreenElement === null) {
+      media.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
     return;
   }
 
diff --git a/templates/item.html b/templates/item.html
index e638c622..c315888f 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -39,5 +39,7 @@ <h1>{{ self.item().display_title(self.index) }}</h1>
     <div><dt><kbd>p</kbd></dt><dd>go to previous item</dd></div>
     <div><dt><kbd>n</kbd></dt><dd>go to next item</dd></div>
     <div><dt><kbd>u</kbd></dt><dd>go to package</dd></div>
+    <div><dt><kbd>f</kbd></dt><dd>toggle full screen</dd></div>
+    <div><dt><kbd>?</kbd></dt><dd>toggle shortcuts</dd></div>
   </dl>
 </footer>