Common shortcuts

p, Alt + ←: Previous hypha
n, Alt + →: Next hypha
s, Alt + ↑: Parent hypha

gh: Home hypha
gl: List of hyphae
gr: Recent changes
gu: User's hypha

g[1-9]: First 9 header links

Follow-up to the previous commit message: actually, you can press them
simultaneously too, just tested it. Ilya approves.

static/shortcuts.js

@@ -1,5 +1,6 @@
+(() => {
     const $ = document.querySelector.bind(document);
-const $$ = document.querySelectorAll.bind(document);
+    const $$ = (...args) => Array.prototype.slice.call(document.querySelectorAll(...args));
 
     function keyEventToShortcut(event) {
         let elideShift = event.key.toUpperCase() === event.key && event.shiftKey;
@@ -35,7 +36,7 @@ class ShortcutHandler {
             this.element.addEventListener('keydown', this.handleKeyDown);
         }
 
-    add(text, action) {
+        add(text, action, description = null) {
             let shortcuts = text.split(',').map(shortcut => shortcut.trim().split(' '));
 
             for (let shortcut of shortcuts) {
@@ -47,10 +48,14 @@ class ShortcutHandler {
                     node = node[key];
                     if (node.action) {
                         delete node.action;
+                        delete node.shortcut;
+                        delete node.description;
                     }
                 }
 
                 node.action = action;
+                node.shortcut = shortcut;
+                node.description = description;
             }
         }
 
@@ -86,9 +91,44 @@ class ShortcutHandler {
         }
     }
 
+    function bindElementFactory(handler) {
+        return (shortcut, element, ...other) => {
+            element = typeof element === 'string' ? $(element) : element;
+            if (!element) return;
+            handler.add(shortcut, () => {
+                if (isTextField(element)) {
+                    element.focus();
+                } else {
+                    element.click();
+                }
+            }, ...other);
+        };
+    }
+
+    function bindLinkFactory(handler) {
+        return (shortcut, link, ...other) => handler.add(shortcut, () => window.location.href = link, ...other);
+    }
+
+    window.addEventListener('load', () => {
         let notFormField = event => !(event.target instanceof Node && isTextField(event.target));
         let globalShortcuts = new ShortcutHandler(document, notFormField);
 
-globalShortcuts.add('p', () => alert('hello p'));
+        let bindElement = bindElementFactory(globalShortcuts);
-globalShortcuts.add('h', () => alert('hi h!'));
+        let bindLink = bindLinkFactory(globalShortcuts);
-globalShortcuts.add('g h', () => alert('hi g h!!!'));
+
+        bindElement('p, Alt+ArrowLeft', '.prevnext__prev', 'Next hypha');
+        bindElement('n, Alt+ArrowRight', '.prevnext__next', 'Previous hypha');
+        bindElement('s, Alt+ArrowTop', $$('.navi-title a').slice(1, -1).slice(-1)[0], 'Parent hypha');
+
+        bindLink('g h', '/', 'Home');
+        bindLink('g l', '/list/', 'List of hyphae');
+        bindLink('g r', '/recent-changes/', 'Recent changes');
+
+        bindElement('g u', '.header-links__entry_user .header-links__link', 'Your profile′s hypha')
+
+        let headerLinks = $$('.header-links__link');
+        for (let i = 1; i <= headerLinks.length && i < 10; i++) {
+            bindElement(`g ${i}`, headerLinks[i-1], `Header link #${i}`);
+        }
+    });
+})();