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   'i': 'Enter "edit" mode, and place the cursor at the start of the editable content',
  17   '$': 'Enter "edit" mode, and place the cursor at the end of the editable content',
  18   'escape': 'Exit the current mode and return to "navigation" mode',
  19   '?': 'Display this help dialogue'
  20 };
  21
  22 const modalHTML = `
  23   <div class="modal">
  24   <div class="modal-content">
  25     <h1>Help</h1>
  26     <table>
  27     <thead>
  28     <tr>
  29     <th>Key</th>
  30     <th>Action</th>
  31     </tr>
  32     </thead>
  33     <tbody>
  34     ${map(keyboardCommands, (text, key) => {
  35       return `
  36       <tr>
  37         <td>
  38           <kbd>${key}</kbd>
  39         </td>
  40         <td>
  41           ${text}
  42         </td>
  43       </tr>
  44       `
  45     }).join("\n")}
  46     </tbody>
  47     </table>
  48   </div>
  49   </div>
  50 `
  51
  52 export function showHelp() {
  53   document.querySelector('body').innerHTML += modalHTML;
  54   keyboardJS.setContext('help');
  55 }
  56
  57 keyboardJS.withContext('help', () => {
  58   keyboardJS.bind('escape', e => {
  59     document.querySelector('.modal').remove();
  60     keyboardJS.setContext('navigation');
  61   });
  62 });