client/users: add keyboard shortcuts to user list

client/html/help-keyboard.hbs

@@ -10,27 +10,27 @@ shortcuts:</p>
     </thead>
     <tbody>
         <tr>
-            <td><code>[Q]</code></td>
+            <td><kbd>Q</kbd></td>
             <td>Focus search field, if available</td>
         </tr>
 
         <tr>
-            <td><code>[A]</code> and <code>[D]</code></td>
+            <td><kbd>A</kbd> and <kbd>D</kbd>, <kbd>←</kbd> and <kbd>→</kbd></td>
             <td>Go to newer/older page or post</td>
         </tr>
 
         <tr>
-            <td><code>[F]</code></td>
+            <td><kbd>F</kbd></td>
             <td>Cycle post fit mode</td>
         </tr>
 
         <tr>
-            <td><code>[E]</code></td>
+            <td><kbd>E</kbd></td>
             <td>Edit post</td>
         </tr>
 
         <tr>
-            <td><code>[P]</code></td>
+            <td><kbd>P</kbd></td>
             <td>Focus first post in post list</td>
         </tr>
     </tbody>

client/html/settings.hbs

@@ -8,6 +8,10 @@
                     {{checkbox text='Endless scroll' id='endless-scroll' name='endless-scroll' checked=this.browsingSettings.endlessScroll}}
                     <p class='hint'>Rather than using a paged navigation, smoothly scroll through the content.</p>
                 </li>
+                <li>
+                    {{checkbox text='Enable keyboard shortcuts' id='keyboard-shortcuts' name='keyboard-shortcuts' checked=this.browsingSettings.keyboardShortcuts}}
+                    <a class='append icon' href='/help/keyboard'><i class='fa fa-question-circle-o'></i></a>
+                </li>
             </ul>
         </div>
         <div class='messages'></div>

client/js/main.js

@@ -2,6 +2,13 @@
 
 require('./util/polyfill.js');
 
+const page = require('page');
+const mousetrap = require('mousetrap');
+page(/.*/, (ctx, next) => {
+    mousetrap.reset();
+    next();
+});
+
 let controllers = [];
 controllers.push(require('./controllers/auth_controller.js'));
 controllers.push(require('./controllers/posts_controller.js'));
@@ -15,7 +22,6 @@ controllers.push(require('./controllers/settings_controller.js'));
 controllers.push(require('./controllers/home_controller.js'));
 
 const events = require('./events.js');
-const page = require('page');
 for (let controller of controllers) {
     controller.registerRoutes();
 }

client/js/settings.js

@@ -11,6 +11,7 @@ function saveSettings(browsingSettings) {
 function getSettings(settings) {
     const defaultSettings = {
         endlessScroll: false,
+        keyboardShortcuts: true,
     };
     let ret = {};
     let userSettings = localStorage.getItem('settings');

client/js/util/keyboard.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const mousetrap = require('mousetrap');
+const settings = require('../settings.js');
+
+function bind(hotkey, func) {
+    if (settings.getSettings().keyboardShortcuts) {
+        mousetrap.bind(hotkey, func);
+        return true;
+    }
+    return false;
+}
+
+function unbind(hotkey) {
+    mousetrap.unbind(hotkey);
+}
+
+module.exports = {
+    bind: bind,
+    unbind: unbind,
+};

client/js/views/manual_page_view.js

@@ -1,6 +1,8 @@
 'use strict';
 
+const page = require('page');
 const events = require('../events.js');
+const keyboard = require('../util/keyboard.js');
 const misc = require('../util/misc.js');
 const views = require('../util/views.js');
 
@@ -76,6 +78,17 @@ class ManualPageView {
             const pageNumbers = getVisiblePageNumbers(currentPage, totalPages);
             const pages = getPages(currentPage, pageNumbers, ctx.clientUrl);
 
+            keyboard.bind(['a', 'left'], () => {
+                if (currentPage > 1) {
+                    page.show(ctx.clientUrl.format({page: currentPage - 1}));
+                }
+            });
+            keyboard.bind(['d', 'right'], () => {
+                if (currentPage < totalPages) {
+                    page.show(ctx.clientUrl.format({page: currentPage + 1}));
+                }
+            });
+
             if (response.total) {
                 views.showView(pageNav, this.navTemplate({
                     prevLink: ctx.clientUrl.format({page: currentPage - 1}),

client/js/views/settings_view.js

@@ -18,7 +18,10 @@ class SettingsView {
             e.preventDefault();
             views.clearMessages(source);
             ctx.saveSettings({
-                endlessScroll: form.querySelector('#endless-scroll').checked,
+                endlessScroll:
+                    form.querySelector('#endless-scroll').checked,
+                keyboardShortcuts:
+                    form.querySelector('#keyboard-shortcuts').checked,
             });
         });
 

client/js/views/user_list_header_view.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const page = require('page');
+const keyboard = require('../util/keyboard.js');
 const misc = require('../util/misc.js');
 const views = require('../util/views.js');
 
@@ -15,6 +16,10 @@ class UserListHeaderView {
 
         const form = source.querySelector('form');
 
+        keyboard.bind('q', () => {
+            form.querySelector('input').focus();
+        });
+
         form.addEventListener('submit', e => {
             e.preventDefault();
             const searchTextInput = form.querySelector('[name=search-text]');

client/package.json

@@ -18,6 +18,7 @@
     "js-cookie": "^2.1.0",
     "js-yaml": "^3.5.5",
     "merge": "^1.2.0",
+    "mousetrap": "^1.5.3",
     "page": "^1.7.1",
     "stylus": "^0.54.2",
     "superagent": "^1.8.3",