Add keyborad bindings for popup tabs.

1 files changed, 42 insertions, 0 deletions

diff --git a/static/popup.js b/static/popup.js
index bc4e766d..e19db6f2 100644
--- a/static/popup.js
+++ b/static/popup.js
@@ -59,3 +59,45 @@ function toggle_popup(popup_id) {
         open_popup(popup);
     }
 }
+
+/* Code for managing "selected" popup */
+/* Makes the popup last hovered over the selected popup, moving it to
+ * the top, and allowing global keyboard bindings to affect it. */
+
+let activePopup;
+
+for (let popup of document.querySelectorAll('.popup-container')) {
+    /* TODO possibly only change "active" element after a fraction of
+     * a second, for example when moving between tabs */
+    popup.addEventListener('mouseover', function () {
+        /* This is ever so slightly inefficient,
+           but it really dosen't mammet */
+        for (let other of
+             document.querySelectorAll('.popup-container'))
+        {
+            /* TODO get this from somewhere */
+            /* Currently it's manually copied from the stylesheet */
+            other.style['z-index'] = 1000;
+        }
+        popup.style['z-index'] += 1;
+        activePopup = popup;
+    });
+}
+
+document.addEventListener('keydown', function (event) {
+    /* Physical key position, names are what that key would
+       be in QWERTY */
+    let i = ({
+            'KeyQ': 0,
+            'KeyW': 1,
+            'KeyE': 2,
+            'KeyR': 3,
+    })[event.code];
+    if (i === undefined) return
+    if (! activePopup) return;
+    let element = activePopup.querySelectorAll(".tab > label")[i];
+    if (! element) return;
+    element.click();
+});
+
+/* END Code for managing "selected" popup */