git.scottworley.com Git - vopamoi/blob - vopamoi.ts

   1 // Typescript doesn't know about MAX_SAFE_INTEGER??  This was supposed to be
   2 // fixed in typescript 2.0.1 in 2016, but is not working for me in typescript
   3 // 4.2.4 in 2022.  :( https://github.com/microsoft/TypeScript/issues/9937
   4 //const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER;
   5 const MAX_SAFE_INTEGER = 9007199254740991;
   6
   7 // A sane split that splits N *times*, leaving the last chunk unsplit.
   8 function splitN(str: string, delimiter: string, limit: number = MAX_SAFE_INTEGER): string[] {
   9   if (limit < 1) {
  10     return [str];
  11   }
  12   const at = str.indexOf(delimiter);
  13   return at === -1 ? [str] : [str.substring(0, at)].concat(splitN(str.substring(at + delimiter.length), delimiter, limit - 1));
  14 }
  15
  16 const Model = {
  17   addTask: function (timestamp: string, description: string) {
  18     document.getElementById("tasks")!.appendChild(this.createTask(timestamp, description)).focus();
  19   },
  20
  21   createTask: function (timestamp: string, description: string) {
  22     const task = document.createElement("div");
  23     task.appendChild(document.createTextNode(description));
  24     task.setAttribute("class", "task");
  25     task.setAttribute("tabindex", "0");
  26     task.setAttribute("data-created", timestamp);
  27     return task;
  28   },
  29
  30   destroyTask: function (createTimestamp: string) {
  31     const task = this.getTask(createTimestamp);
  32     if (task) {
  33       task.parentElement!.removeChild(task);
  34     }
  35   },
  36
  37   getTask: function (createTimestamp: string) {
  38     for (const task of document.getElementsByClassName("task")) {
  39       if (task.getAttribute("data-created") === createTimestamp) {
  40         return task;
  41       }
  42     }
  43   },
  44
  45   setState: function (stateTimestamp: string, createTimestamp: string, state: string) {
  46     const task = this.getTask(createTimestamp);
  47     if (task) {
  48       task.setAttribute(`data-${state}`, stateTimestamp);
  49       if (task instanceof HTMLElement) {
  50         task.style.display = "none"; // Until view filtering
  51       }
  52     }
  53   },
  54 };
  55
  56 function Log(prefix: string = "vp-") {
  57   var next_log_index = 0;
  58   return {
  59     apply: function (entry: string) {
  60       const [timestamp, command, data] = splitN(entry, " ", 2);
  61       if (command == "Create") {
  62         Model.addTask(timestamp, data);
  63       }
  64       if (command == "Destroy") {
  65         Model.destroyTask(data.split(" ", 1)[0]);
  66       }
  67       if (command == "State") {
  68         const [createTimestamp, state] = splitN(data, " ", 1);
  69         Model.setState(timestamp, createTimestamp, state);
  70       }
  71     },
  72
  73     record: function (entry: string) {
  74       window.localStorage.setItem(`${prefix}${next_log_index++}`, entry);
  75     },
  76
  77     recordAndApply: function (entry: string) {
  78       this.record(entry);
  79       this.apply(entry);
  80     },
  81
  82     replay: function () {
  83       while (true) {
  84         const entry = window.localStorage.getItem(`${prefix}${next_log_index}`);
  85         if (entry === null) {
  86           break;
  87         }
  88         this.apply(entry);
  89         next_log_index++;
  90       }
  91     },
  92   };
  93 }
  94 const log = Log();
  95
  96 const UI = {
  97   addTask: function (description: string) {
  98     log.recordAndApply(`${Date.now()} Create ${description}`);
  99   },
 100   destroyTask: function (createTimestamp: string) {
 101     log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`);
 102   },
 103   setState: function (createTimestamp: string, state: string) {
 104     log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`);
 105   },
 106 };
 107
 108 const BrowserUI = {
 109   addTask: function (form: any) {
 110     if (form.taskName.value) {
 111       UI.addTask(form.taskName.value);
 112       form.taskName.value = "";
 113     }
 114     return false;
 115   },
 116
 117   destroyTask: function () {
 118     const createTimestamp = document.activeElement?.getAttribute("data-created");
 119     this.moveCursor(1) || this.moveCursor(-1);
 120     return UI.destroyTask(createTimestamp!);
 121   },
 122
 123   focusTaskNameInput: function (event: any) {
 124     document.getElementById("taskName")!.focus();
 125     event.preventDefault();
 126   },
 127
 128   visibleTaskAtOffset(task: Element, offset: number): Element {
 129     var cursor: Element | null = task;
 130     var valid_cursor = cursor;
 131     const increment = offset / Math.abs(offset);
 132     while (true) {
 133       cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
 134       if (!cursor || !(cursor instanceof HTMLElement)) break;
 135       if (cursor.style.display !== "none") {
 136         offset -= increment;
 137         valid_cursor = cursor;
 138       }
 139       if (Math.abs(offset) < 0.5) break;
 140     }
 141     return valid_cursor;
 142   },
 143
 144   moveCursor: function (offset: number): boolean {
 145     const active = document.activeElement;
 146     if (!active) return false;
 147     const dest = this.visibleTaskAtOffset(active, offset);
 148     if (dest !== active && dest instanceof HTMLElement) {
 149       dest.focus();
 150       return true;
 151     }
 152     return false;
 153   },
 154
 155   setState: function (state: string) {
 156     const createTimestamp = document.activeElement?.getAttribute("data-created");
 157     this.moveCursor(1) || this.moveCursor(-1);
 158     return UI.setState(createTimestamp!, state);
 159   },
 160 };
 161
 162 function handleKey(event: any) {
 163   if (event.target.tagName !== "INPUT") {
 164     if (event.key == "j") return BrowserUI.moveCursor(1);
 165     if (event.key == "k") return BrowserUI.moveCursor(-1);
 166     if (event.key == "n") return BrowserUI.focusTaskNameInput(event);
 167     if (event.key == "s") return BrowserUI.setState("someday-maybe");
 168     if (event.key == "w") return BrowserUI.setState("waiting");
 169     if (event.key == "d") return BrowserUI.setState("done");
 170     if (event.key == "c") return BrowserUI.setState("cancelled");
 171     if (event.key == "X") return BrowserUI.destroyTask();
 172   }
 173 }
 174
 175 function browserInit() {
 176   document.body.addEventListener("keydown", handleKey, { capture: false });
 177   log.replay();
 178 }