src/client.ts

   1 import { Outline, RawOutline } from './outline';
   2 import { Cursor } from './cursor';
   3 import keyboardJS from 'keyboardjs';
   4 import * as rawOutline from './test-data.json';
   5 import {showHelp} from 'help';
   6
   7 let outlineData = rawOutline;
   8 if(localStorage.getItem('activeOutline')) {
   9   const outlineId = localStorage.getItem('activeOutline');
  10   outlineData = JSON.parse(localStorage.getItem(outlineId));
  11 }
  12
  13 const state = new Map<string, any>();
  14 const outline = new Outline(outlineData as unknown as RawOutline);
  15 outliner().innerHTML = outline.render();
  16
  17 const cursor = new Cursor();
  18 // place the cursor at the top!
  19 cursor.set('.node');
  20
  21 function outliner() {
  22   return document.querySelector('#outliner');
  23 }
  24
  25 document.getElementById('display-help').addEventListener('click', e => {
  26   e.preventDefault();
  27   e.stopPropagation();
  28
  29   showHelp();
  30 });
  31
  32 // move down
  33 keyboardJS.withContext('navigation', () => {
  34   keyboardJS.bind('j', e => {
  35     // move cursor down
  36     // if shift key is held, swap the node with its next sibling
  37     const sibling = cursor.get().nextElementSibling;
  38
  39     if(sibling) {
  40       if(e.shiftKey) {
  41         // swap this node with its previous sibling
  42         const res = outline.swapNodeWithNextSibling(cursor.getIdOfNode());
  43         const html = outline.renderNode(res.parentNode);
  44
  45         if(res.parentNode.id === '000000') {
  46           cursor.get().parentElement.innerHTML = html;
  47         }
  48         else {
  49           cursor.get().parentElement.outerHTML = html;
  50         }
  51
  52         cursor.set(`#id-${res.targetNode.id}`);
  53         save();
  54       }
  55       else {
  56         cursor.set(`#id-${sibling.getAttribute('data-id')}`);
  57       }
  58     }
  59   });
  60
  61
  62   keyboardJS.bind('shift + /', e => {
  63     showHelp();
  64   });
  65
  66   keyboardJS.bind('k', e => {
  67     // move cursor up
  68     // if shift key is held, swap the node with its previous sibling
  69     const sibling = cursor.get().previousElementSibling;
  70
  71     if(sibling && !sibling.classList.contains('nodeContent')) {
  72       if(e.shiftKey) {
  73         // swap this node with its previous sibling
  74         const res = outline.swapNodeWithPreviousSibling(cursor.getIdOfNode());
  75         // re-render the parent node and display that!
  76         const html = outline.renderNode(res.parentNode);
  77
  78         if(res.parentNode.id === '000000') {
  79           cursor.get().parentElement.innerHTML = html;
  80         }
  81         else {
  82           cursor.get().parentElement.outerHTML = html;
  83         }
  84
  85         cursor.set(`#id-${res.targetNode.id}`);
  86         save();
  87       }
  88       else {
  89         cursor.set(`#id-${sibling.getAttribute('data-id')}`);
  90       }
  91     }
  92   });
  93
  94   keyboardJS.bind('l', e => {
  95     // if the node is collapsed, we can't go into its children
  96     if(cursor.isNodeCollapsed()) {
  97       return;
  98     }
  99     if(e.shiftKey) {
 100       const res = outline.lowerNodeToChild(cursor.getIdOfNode());
 101       const html = outline.renderNode(res.oldParentNode);
 102
 103       if(res.oldParentNode.id === '000000') {
 104         cursor.get().parentElement.innerHTML = html;
 105       }
 106       else {
 107         cursor.get().parentElement.outerHTML = html;
 108       }
 109       cursor.set(`#id-${res.targetNode.id}`);
 110     }
 111     else {
 112       const children = cursor.get().querySelector('.node');
 113       if(children) {
 114         cursor.set(`#id-${children.getAttribute('data-id')}`);
 115       }
 116     }
 117   });
 118
 119   keyboardJS.bind('h', e => {
 120     const parent = cursor.get().parentElement;
 121     if(parent && parent.classList.contains('node')) {
 122       if(e.shiftKey) {
 123         if(outline.data.tree.children.map(n => n.id).includes(cursor.getIdOfNode())) {
 124           // if this is a top level item, we can't elevate any further
 125           return;
 126         }
 127         const res = outline.liftNodeToParent(cursor.getIdOfNode());
 128
 129         const html = outline.renderNode(res.parentNode);
 130
 131         if(res.parentNode.id === '000000') {
 132           cursor.get().parentElement.parentElement.innerHTML = html;
 133         }
 134         else {
 135           cursor.get().parentElement.parentElement.outerHTML = html;
 136         }
 137
 138         cursor.set(`#id-${res.targetNode.id}`);
 139         save();
 140       }
 141       else {
 142         cursor.set(`#id-${parent.getAttribute('data-id')}`);
 143       }
 144     }
 145   });
 146
 147   keyboardJS.bind('z', e => {
 148     // toggle collapse
 149     if(cursor.isNodeExpanded()) {
 150       cursor.collapse();
 151       outline.fold(cursor.getIdOfNode());
 152     }
 153     else if(cursor.isNodeCollapsed()) {
 154       cursor.expand();
 155       outline.unfold(cursor.getIdOfNode());
 156     }
 157     save();
 158   });
 159
 160   keyboardJS.bind('shift + 4', e => {
 161     e.preventDefault();
 162     // switch to editing mode
 163     cursor.get().classList.add('hidden-cursor');
 164     const contentNode = cursor.get().querySelector('.nodeContent') as HTMLElement;
 165
 166     // swap the content to the default!
 167     contentNode.innerHTML = outline.data.contentNodes[cursor.getIdOfNode()].content;
 168     contentNode.contentEditable = "true";
 169
 170     const range = document.createRange();
 171     range.selectNodeContents(contentNode);
 172     range.collapse(false);
 173
 174     const selection = window.getSelection();
 175     selection.removeAllRanges();
 176     selection.addRange(range);
 177
 178     contentNode.focus();
 179     keyboardJS.setContext('editing');
 180   });
 181
 182   keyboardJS.bind('i', e => {
 183     e.preventDefault();
 184     // switch to editing mode
 185     cursor.get().classList.add('hidden-cursor');
 186     const contentNode = cursor.get().querySelector('.nodeContent') as HTMLElement;
 187
 188     // swap the content to the default!
 189     contentNode.innerHTML = outline.data.contentNodes[cursor.getIdOfNode()].content;
 190     contentNode.contentEditable = "true";
 191     contentNode.focus();
 192     keyboardJS.setContext('editing');
 193   });
 194
 195   keyboardJS.bind('shift + x', e => {
 196     e.preventDefault();
 197     // toggle "strikethrough" of node
 198     cursor.get().classList.toggle('strikethrough');
 199     outline.data.contentNodes[cursor.getIdOfNode()].strikethrough = cursor.get().classList.contains('strikethrough');
 200     save();
 201   });
 202
 203   keyboardJS.bind('tab', e => {
 204     e.preventDefault();
 205
 206     const res = outline.createChildNode(cursor.getIdOfNode());
 207     const html = outline.renderNode(res.parentNode);
 208
 209     cursor.get().outerHTML = html;
 210
 211     cursor.set(`#id-${res.node.id}`);
 212     save();
 213   });
 214
 215   keyboardJS.bind('enter', e => {
 216     // create a new node as a sibling of the selected node
 217     if(e.shiftKey) {
 218       return;
 219     }
 220     e.preventDefault();
 221     e.preventRepeat();
 222
 223     const res = outline.createSiblingNode(cursor.getIdOfNode());
 224
 225     const html = outline.renderNode(res.parentNode);
 226     if(res.parentNode.id === '000000') {
 227       cursor.get().parentElement.innerHTML = html;
 228     }
 229     else {
 230       cursor.get().parentElement.outerHTML = html;
 231     }
 232
 233     cursor.set(`#id-${res.node.id}`);
 234     save();
 235   });
 236
 237   keyboardJS.bind('d', e => {
 238     // deleting a node requires d + shift
 239     if(!e.shiftKey) {
 240       return;
 241     }
 242
 243     const res = outline.removeNode(cursor.getIdOfNode());
 244     const html = outline.renderNode(res.parentNode);
 245     // the previous sibling!
 246     const prevSibling = cursor.get().previousElementSibling;
 247     const nextSibling = cursor.get().nextElementSibling;
 248     if(res.parentNode.id === '000000') {
 249       cursor.get().parentElement.innerHTML = html;
 250     }
 251     else {
 252       cursor.get().parentElement.outerHTML = html;
 253     }
 254
 255     if(prevSibling.getAttribute('data-id')) {
 256       cursor.set(`#id-${prevSibling.getAttribute('data-id')}`);
 257     }
 258     else if(nextSibling.getAttribute('data-id')) {
 259       cursor.set(`#id-${nextSibling.getAttribute('data-id')}`);
 260     }
 261     else {
 262       console.log(res.parentNode.id);
 263       cursor.set(`#id-${res.parentNode.id}`);
 264     }
 265
 266     save();
 267   });
 268 });
 269
 270 keyboardJS.withContext('editing', () => {
 271   keyboardJS.bind(['esc', 'enter'], e => {
 272     cursor.get().classList.remove('hidden-cursor');
 273
 274     const contentNode = cursor.get().querySelector('.nodeContent') as HTMLElement;
 275
 276     contentNode.contentEditable = "false";
 277     contentNode.blur();
 278     keyboardJS.setContext('navigation');
 279
 280     outline.updateContent(cursor.getIdOfNode(), contentNode.innerHTML.trim());
 281     // re-render this node!
 282     contentNode.innerHTML = outline.renderContent(cursor.getIdOfNode());
 283     save();
 284   });
 285 });
 286
 287 keyboardJS.setContext('navigation');
 288
 289 function saveImmediate() {
 290   localStorage.setItem(outline.data.id, JSON.stringify(outline.data));
 291   localStorage.setItem('activeOutline', outline.data.id);
 292   console.log('saved...', outline.data);
 293   state.delete('saveTimeout');
 294 }
 295
 296 function save() {
 297   if(!state.has('saveTimeout')) {
 298     state.set('saveTimeout', setTimeout(saveImmediate, 2000));
 299   }
 300 }
 301
 302
 303 save();