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 });