Adding keyboard shortcuts

Author: navchandar

build-pwa.js

@@ -167,10 +167,10 @@ function generateIndexHtml() {
             <ul id="app-links">
               ${appLinks}
             </ul>
-            <div class="version-label">Version: ${versionString}</div>
+            <div class="version-label">${versionString}</div>
         </div>
       </nav>
-      <main><iframe name="appFrame" id="appFrame"></iframe></main>
+      <main><iframe name="appFrame" title="App Frame" id="appFrame"></iframe></main>
     </div>
 
     <script src="./static/app_script.js"></script>
@@ -252,10 +252,10 @@ self.addEventListener("install", (event) => {
         const failed = results.filter(result => result.status === 'rejected');
         const successful = results.filter(result => result.status === 'fulfilled');
 
+        console.log("[SW] Successfully cached", successful.length, "resources");
         if (failed.length > 0) {
           console.error("[SW]", failed.length, "resources failed to cache:", failed);
         }
-          console.error("[SW] Successfully cached", successful.length, "resources");
       });
     })
   );

static/app_script.js

@@ -155,6 +155,8 @@ function updateThemeColorFromIframe() {
     const computedStyle = window.getComputedStyle(iframeBody);
     const backgroundColor = computedStyle.getPropertyValue("background-color");
 
+    iframeBody.addEventListener("click", collapseSidebar);
+
     // Check if a color was successfully retrieved
     if (backgroundColor) {
       // Find or create the meta theme-color tag in the main document
@@ -247,26 +249,35 @@ function monitorIframeBackgroundColor() {
   }
 }
 
-function initializeAppUI() {
-  const iframe = document.getElementById("appFrame");
+const collapseSidebar = () => {
   const sidebar = document.getElementById("sidebar");
   const hamburger = document.getElementById("hamburger-menu");
   const header = document.querySelector("body header");
-  const links = document.querySelectorAll("#app-links li a");
 
-  // Initialize theme sync once at startup
-  monitorIframeBackgroundColor();
-
-  const collapseSidebar = () => {
+  if (!sidebar.classList.contains("collapsed")) {
     sidebar.classList.add("collapsed");
+  }
+  if (sidebar.classList.contains("overlay")) {
     sidebar.classList.remove("overlay");
+  }
+  if (hamburger.style.display !== "block") {
     hamburger.style.display = "block";
+  }
 
-    if (header) {
-      header.style.display = "none";
-      sidebar.style.paddingTop = "6.75em";
-    }
-  };
+  if (header && header.style.display !== "none") {
+    header.style.display = "none";
+    sidebar.style.paddingTop = "6.75em";
+  }
+};
+
+function initializeAppUI() {
+  const iframe = document.getElementById("appFrame");
+  const sidebar = document.getElementById("sidebar");
+  const hamburger = document.getElementById("hamburger-menu");
+  const links = document.querySelectorAll("#app-links li a");
+
+  // Initialize theme sync once at startup
+  monitorIframeBackgroundColor();
 
   iframe.addEventListener("load", collapseSidebar);
 
@@ -297,4 +308,21 @@ function initializeAppUI() {
   hamburger.addEventListener("click", () => {
     sidebar.classList.toggle("overlay");
   });
+
+  document.addEventListener("keydown", (event) => {
+    // '=' key shortcut to toggle the sidebar
+    if (event.key === "=") {
+      event.preventDefault();
+      sidebar.classList.toggle("overlay");
+    } else if (event.key === "Escape") {
+      collapseSidebar();
+    }
+  });
+
+  document.addEventListener("focusin", (event) => {
+    // Check if the element that received focus is an iframe
+    if (event.target.tagName === "IFRAME") {
+      collapseSidebar();
+    }
+  });
 }

static/app_stylesheet.css

@@ -185,9 +185,11 @@ iframe {
     border-top: 1px solid #444;
     background-color: #333;
     padding: 8px;
+    overflow: hidden;
     color: #ccc;
     font-size: 0.85em;
     text-align: center;
+    text-wrap: nowrap;
 }
 
 @media (max-width: 768px) {