configurable keyboard shortcuts

package.json

@@ -257,6 +257,7 @@
     "html-webpack-plugin": "^3.2.0",
     "i18next-json-sync": "^2.3.1",
     "jest": "^24.9.0",
+    "json-diff": "^0.5.4",
     "markdown-loader": "^5.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "ncp": "^2.0.0",

src/common/keyboard.ts

@@ -96,3 +96,10 @@ export function keyboardShortcutMatch(ks: TKeyboardShortcut, e: KeyboardEvent):
         && (ks.meta && e.metaKey || !ks.meta && !e.metaKey)
         && (ks.shift && e.shiftKey || !ks.shift && !e.shiftKey);
 }
+export function keyboardShortcutMatch_(ks: TKeyboardShortcut, e: TKeyboardShortcut): boolean {
+    return ks.key === e.key
+        && (ks.alt && e.alt || !ks.alt && !e.alt)
+        && (ks.control && e.control || !ks.control && !e.control)
+        && (ks.meta && e.meta || !ks.meta && !e.meta)
+        && (ks.shift && e.shift || !ks.shift && !e.shift);
+}

src/common/redux/reducers/keyboard.ts

@@ -22,13 +22,26 @@ export function keyboardReducer(
     ): KeyboardState {
     switch (action.type) {
         case keyboardActions.setShortcuts.ID:
-            return Object.assign({}, state, {
-                shortcuts: action.payload.shortcuts,
-            } as KeyboardState);
+            return (
+                {
+                    ...state,
+                    ...{
+                        shortcuts: action.payload.shortcuts,
+                    },
+                }
+            );
         case keyboardActions.showShortcuts.ID:
-            return Object.assign({}, state);
+            return (
+                {
+                    ...state,
+                }
+            );
         case keyboardActions.reloadShortcuts.ID:
-            return Object.assign({}, state);
+            return (
+                {
+                    ...state,
+                }
+            );
         default:
             return state;
     }

src/main/keyboard.ts

@@ -25,12 +25,13 @@ reset();
 function cloneDefaults(): TKeyboardShortcutsMap {
     // TODO: better deep clone with recursive freeze
     const obj = JSON.parse(JSON.stringify(defaults)) as TKeyboardShortcutsMap;
-    for (const id in obj) {
+    for (const id_ in obj) {
         // just good practice
-        if (!obj.hasOwnProperty(id)) {
+        if (!obj.hasOwnProperty(id_)) {
             continue;
         }
-        obj[id as TKeyboardShortcutId] = Object.freeze<TKeyboardShortcut>(obj[id as TKeyboardShortcutId]);
+        const id = id_ as TKeyboardShortcutId;
+        obj[id] = Object.freeze<TKeyboardShortcut>(obj[id]);
     }
     return obj;
 }
@@ -84,13 +85,15 @@ function load(fileName: string): TKeyboardShortcutsMapReadOnly | undefined {
     const json = JSON.parse(txt); // can throw!
 
     const obj = cloneDefaults();
-    for (const id in json) {
+    for (const id_ in json) {
         // just good practice
-        if (!json.hasOwnProperty(id)) {
+        if (!json.hasOwnProperty(id_)) {
             continue;
         }
+        const id = id_ as TKeyboardShortcutId;
+
         // filters out non-recognised names
-        if (!defaults[id as TKeyboardShortcutId]) {
+        if (!defaults[id]) {
             continue;
         }
 
@@ -115,7 +118,7 @@ function load(fileName: string): TKeyboardShortcutsMapReadOnly | undefined {
         };
 
         // replaces the default
-        obj[id as TKeyboardShortcutId] = s;
+        obj[id] = s;
     }
     return Object.freeze<TKeyboardShortcutsMapReadOnly>(obj);
 }

src/main/redux/sagas/keyboard.ts

@@ -6,11 +6,17 @@
 // ==LICENSE-END==
 
 import * as debug_ from "debug";
-import { keyboardActions } from "readium-desktop/common/redux/actions";
+import { ToastType } from "readium-desktop/common/models/toast";
+import { keyboardActions, toastActions } from "readium-desktop/common/redux/actions";
+import { takeTyped } from "readium-desktop/common/redux/typed-saga";
+import { diMainGet } from "readium-desktop/main/di";
 import { keyboardShortcuts } from "readium-desktop/main/keyboard";
+import { IS_DEV } from "readium-desktop/preprocessor-directives";
 import { all, call, takeEvery } from "redux-saga/effects";
 import { put } from "typed-redux-saga";
 
+import { sortObject } from "@r2-utils-js/_utils/JsonUtils";
+
 const debug = debug_("readium-desktop:main:redux:sagas:keyboard");
 
 function* showShortcuts(action: keyboardActions.showShortcuts.TAction) {
@@ -35,32 +41,65 @@ function* setShortcuts(action: keyboardActions.setShortcuts.TAction) {
         call(debugShortcuts),
     ]);
 }
-function* reloadShortcuts(action: keyboardActions.reloadShortcuts.TAction) {
-    const loadShortcutsFromJson = async () => {
-        if (action.payload.defaults) {
-            keyboardShortcuts.loadDefaults();
-        }
-        const okay = action.payload.defaults ? true : keyboardShortcuts.loadUser();
+// function* reloadShortcuts(action: keyboardActions.reloadShortcuts.TAction) {
+//     const loadShortcutsFromJson = async () => {
+//         if (action.payload.defaults) {
+//             keyboardShortcuts.loadDefaults();
+//         }
+//         const okay = action.payload.defaults ? true : keyboardShortcuts.loadUser();
 
-        debug(`Keyboard shortcuts reload JSON (defaults: ${action.payload.defaults}) => ${okay}`);
-        if (okay) {
-            put(keyboardActions.setShortcuts.build(keyboardShortcuts.getAll()));
-        }
-    };
+//         debug(`Keyboard shortcuts reload JSON (defaults: ${action.payload.defaults}) => ${okay}`);
+//         if (okay) {
+//             yield put(keyboardActions.setShortcuts.build(keyboardShortcuts.getAll()));
+//         }
+//     };
 
-    yield all([
-        call(loadShortcutsFromJson),
-    ]);
-}
+//     yield all([
+//         call(loadShortcutsFromJson),
+//     ]);
+// }
 
 function* keyboardSetWatcher() {
     yield takeEvery(keyboardActions.setShortcuts.build, setShortcuts);
 }
 function* keyboardShowWatcher() {
     yield takeEvery(keyboardActions.showShortcuts.build, showShortcuts);
 }
+// function* keyboardReloadWatcher() {
+//     yield takeEvery(keyboardActions.reloadShortcuts.build, reloadShortcuts);
+// }
 function* keyboardReloadWatcher() {
-    yield takeEvery(keyboardActions.reloadShortcuts.build, reloadShortcuts);
+    while (true) {
+        const action = yield* takeTyped(keyboardActions.reloadShortcuts.build);
+        if (action.payload.defaults) {
+            keyboardShortcuts.loadDefaults();
+        }
+        const okay = action.payload.defaults ? true : keyboardShortcuts.loadUser();
+
+        debug(`Keyboard shortcuts reload JSON (defaults: ${action.payload.defaults}) => ${okay}`);
+
+        const currentKeyboardShortcuts = keyboardShortcuts.getAll();
+        if (IS_DEV) {
+            const jsonDiff = require("json-diff");
+
+            const defaultKeyboardShortcuts = keyboardShortcuts.getAllDefaults();
+            const json1 = sortObject(JSON.parse(JSON.stringify(defaultKeyboardShortcuts)));
+            const json2 = sortObject(JSON.parse(JSON.stringify(currentKeyboardShortcuts)));
+            debug(jsonDiff.diffString(json1, json2) + "\n");
+        }
+
+        if (okay) {
+            yield put(keyboardActions.setShortcuts.build(currentKeyboardShortcuts));
+
+            const translator = diMainGet("translator");
+            const kind = action.payload.defaults ?
+                translator.translate("settings.keyboard.defaults") :
+                translator.translate("settings.keyboard.user");
+
+            yield put(toastActions.openRequest.build(ToastType.Success,
+                `${translator.translate("settings.keyboard.keyboardShortcuts")} (${kind})`));
+        }
+    }
 }
 
 export function* watchers() {

src/renderer/assets/styles/settings.css

@@ -53,25 +53,89 @@
 
 .keyboard_shortcuts_section {
 	display: flex;
-	align-items: center;
-	justify-content: center;
+	/* align-items: center; */
+	/* justify-content: center; */
 
 	& .keyboard_shortcuts_button {
+		display: inline-block;
+		width: 23%;
+		height: auto;
 		cursor: pointer;
 		font-size: 1rem;
 		border: 1px solid rgb(50, 50, 50);
 		border-radius: 5px;
 		color: black;
-		display: inline-block;
-		width: 30%;
-		height: auto;
 		padding: 10px;
 		margin: 0;
 		margin-left: 0.5em;
 		margin-right: 0.5em;
 	}
+	& .keyboard_shortcuts_button_hide {
+		display: none;
+	}
+	& .keyboard_shortcuts_button_primary {
+		font-weight: bold;
+	}
 }
 
+.keyboard_shortcuts_list {
+	margin-top: 2em !important;
+	margin-bottom: 2em !important;
+	margin-left: 3em !important;
+
+	& li {
+		margin-bottom: 1.5em;
+
+		& .keyboard_shortcuts_edit_title {
+			/* text-decoration: underline; */
+			margin-right: 1em;
+		}
+		& div {
+			display: block;
+			float: right;
+		}
+		& div.keyboard_shortcuts_edit_div {
+			display: inline-block;
+			float: none;
+		}
+
+		& .keyboard_shortcuts_edit_save_button {
+			width: auto;
+			height: auto;
+			padding: 0.4em;
+			border: 1px solid grey;
+			border-radius: 3px;
+			margin-right: 1em;
+		}
+
+		& .keyboard_shortcuts_key {
+			width: auto;
+			height: auto;
+			font-size: 80%;
+			display: inline;
+			padding: 0.3em;
+			margin-right: 1em;
+			border: 2px solid rgb(171, 171, 171);
+			border-bottom: 2px solid rgb(41, 41, 41);
+			border-right: 2px solid rgb(41, 41, 41);
+			border-radius: 3px;
+			background-color: #d0d0d0;
+		}
+		& .keyboard_shortcuts_key_off {
+			background-color: #d1bcbc;
+		}
+		& .keyboard_shortcuts_key_on{
+			background-color: #bac0b8;
+			border: 2px solid rgb(41, 41, 41);
+			border-bottom: 2px solid rgb(171, 171, 171);
+			border-right: 2px solid rgb(171, 171, 171);
+		}
+	}
+
+	& li.keyboard_shortcuts_edit_li {
+		outline: 1pt dashed rgb(0, 56, 74);
+	}
+}
 
 /* LANGUAGES */