From b382f3398fa767593d4a51a82bb0ab58c8abd7e0 Mon Sep 17 00:00:00 2001 From: rr- Date: Thu, 14 Apr 2016 21:01:33 +0200 Subject: [PATCH] client/users: add keyboard shortcuts to user list --- client/html/help-keyboard.hbs | 10 +++++----- client/html/settings.hbs | 4 ++++ client/js/main.js | 8 +++++++- client/js/settings.js | 1 + client/js/util/keyboard.js | 21 +++++++++++++++++++++ client/js/views/manual_page_view.js | 13 +++++++++++++ client/js/views/settings_view.js | 5 ++++- client/js/views/user_list_header_view.js | 5 +++++ client/package.json | 1 + 9 files changed, 61 insertions(+), 7 deletions(-) create mode 100644 client/js/util/keyboard.js diff --git a/client/html/help-keyboard.hbs b/client/html/help-keyboard.hbs index 8b046823..5b12324b 100644 --- a/client/html/help-keyboard.hbs +++ b/client/html/help-keyboard.hbs @@ -10,27 +10,27 @@ shortcuts:

- [Q] + Q Focus search field, if available - [A] and [D] + A and D, ← and → Go to newer/older page or post - [F] + F Cycle post fit mode - [E] + E Edit post - [P] + P Focus first post in post list diff --git a/client/html/settings.hbs b/client/html/settings.hbs index aea55749..fd7f99d1 100644 --- a/client/html/settings.hbs +++ b/client/html/settings.hbs @@ -8,6 +8,10 @@ {{checkbox text='Endless scroll' id='endless-scroll' name='endless-scroll' checked=this.browsingSettings.endlessScroll}}

Rather than using a paged navigation, smoothly scroll through the content.

+
  • + {{checkbox text='Enable keyboard shortcuts' id='keyboard-shortcuts' name='keyboard-shortcuts' checked=this.browsingSettings.keyboardShortcuts}} + +
    • diff --git a/client/js/main.js b/client/js/main.js index 366bc2f2..468386c7 100644 --- a/client/js/main.js +++ b/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(); } diff --git a/client/js/settings.js b/client/js/settings.js index 21227765..17c80f03 100644 --- a/client/js/settings.js +++ b/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'); diff --git a/client/js/util/keyboard.js b/client/js/util/keyboard.js new file mode 100644 index 00000000..e15e0ded --- /dev/null +++ b/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, +}; diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js index 0f54a0c6..a74729cf 100644 --- a/client/js/views/manual_page_view.js +++ b/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}), diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js index 60de50ad..19bf591f 100644 --- a/client/js/views/settings_view.js +++ b/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, }); }); diff --git a/client/js/views/user_list_header_view.js b/client/js/views/user_list_header_view.js index 3719ce11..9389ddc7 100644 --- a/client/js/views/user_list_header_view.js +++ b/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]'); diff --git a/client/package.json b/client/package.json index dc177744..9da87537 100644 --- a/client/package.json +++ b/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",