173a1d18536325d2e8234fe57922c075e50d2fcf
[apps/outliner/.git] / src / help.ts
1 import keyboardJS from 'keyboardjs';
2 import { map } from 'lodash';
3
4 const keyboardCommands = {
5   'h': 'Move the cursor to the Parent Element of the current node',
6   'l': 'Move the cursor to the first Child Element of the current node',
7   'j': 'Move the cursor to the next sibling of the current node',
8   'k': 'Move the cursor to the previous sibling of the current node',
9   'enter': 'Add a new node as a sibling to the current node',
10   'tab': 'Add a new node as the child of the current node',
11   'shift + j': 'Swap the current node with next sibling node',
12   'shift + k': 'Swap the current node with the previous sibling node',
13   'shift + h': 'Lift the current node to be a sibling of the parent node',
14   'shift + l': 'Lower the current node to be a child of the previous sibling node',
15   'shift + d': 'Delete the current node',
16   'shift + f': 'Open the search modal',
17   'i': 'Enter "edit" mode, and place the cursor at the start of the editable content',
18   '$': 'Enter "edit" mode, and place the cursor at the end of the editable content',
19   'escape': 'Exit the current mode and return to "navigation" mode',
20   '?': 'Display this help dialogue'
21 };
22
23 const modalHTML = `
24   <div class="modal">
25   <div class="modal-content">
26     <h1>Help</h1>
27     <table>
28     <thead>
29     <tr>
30     <th>Key</th>
31     <th>Action</th>
32     </tr>
33     </thead>
34     <tbody>
35     ${map(keyboardCommands, (text, key) => {
36       return `
37       <tr>
38         <td>
39           <kbd>${key}</kbd>
40         </td>
41         <td>
42           ${text}
43         </td>
44       </tr>
45       `
46     }).join("\n")}
47     </tbody>
48     </table>
49   </div>
50   </div>
51 `
52
53 export function showHelp() {
54   document.querySelector('body').innerHTML += modalHTML;
55   keyboardJS.setContext('help');
56 }
57
58 keyboardJS.withContext('help', () => {
59   keyboardJS.bind('escape', e => {
60     document.querySelector('.modal').remove();
61     keyboardJS.setContext('navigation');
62   });
63 });