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     const task = document.createElement("div");
  19     task.appendChild(document.createTextNode(description));
  20     task.setAttribute("class", "task");
  21     task.setAttribute("tabindex", "0");
  22     task.setAttribute("data-created", timestamp);
  23     document.getElementById("tasks")!.appendChild(task);
  24     task.focus();
  25   },
  26
  27   destroyTask: function (createTimestamp: string) {
  28     const task = this.getTask(createTimestamp);
  29     if (task) {
  30       task.parentElement!.removeChild(task);
  31     }
  32   },
  33
  34   getPriority: function (task: Element): number {
  35     if (task.hasAttribute("data-priority")) {
  36       return parseFloat(task.getAttribute("data-priority")!);
  37     }
  38     return parseFloat(task.getAttribute("data-created")!);
  39   },
  40
  41   getTask: function (createTimestamp: string) {
  42     for (const task of document.getElementsByClassName("task")) {
  43       if (task.getAttribute("data-created") === createTimestamp) {
  44         return task;
  45       }
  46     }
  47   },
  48
  49   setPriority: function (createTimestamp: string, priority: number) {
  50     const target = this.getTask(createTimestamp);
  51     if (!target) return;
  52     target.setAttribute("data-priority", `${priority}`);
  53     for (const task of document.getElementsByClassName("task")) {
  54       if (task !== target && this.getPriority(task) > priority) {
  55         task.parentElement!.insertBefore(target, task);
  56         target instanceof HTMLElement && target.focus();
  57         return;
  58       }
  59     }
  60     document.getElementById("tasks")!.appendChild(target);
  61     target instanceof HTMLElement && target.focus();
  62   },
  63
  64   setState: function (stateTimestamp: string, createTimestamp: string, state: string) {
  65     const task = this.getTask(createTimestamp);
  66     if (task) {
  67       task.setAttribute(`data-${state}`, stateTimestamp);
  68       if (task instanceof HTMLElement) {
  69         task.style.display = "none"; // Until view filtering
  70       }
  71     }
  72   },
  73 };
  74
  75 function Log(prefix: string = "vp-") {
  76   var next_log_index = 0;
  77   return {
  78     apply: function (entry: string) {
  79       const [timestamp, command, data] = splitN(entry, " ", 2);
  80       if (command == "Create") {
  81         Model.addTask(timestamp, data);
  82       }
  83       if (command == "Destroy") {
  84         Model.destroyTask(data.split(" ", 1)[0]);
  85       }
  86       if (command == "State") {
  87         const [createTimestamp, state] = splitN(data, " ", 1);
  88         Model.setState(timestamp, createTimestamp, state);
  89       }
  90       if (command == "Priority") {
  91         const [createTimestamp, newPriority] = splitN(data, " ", 1);
  92         Model.setPriority(createTimestamp, parseFloat(newPriority));
  93       }
  94     },
  95
  96     record: function (entry: string) {
  97       window.localStorage.setItem(`${prefix}${next_log_index++}`, entry);
  98     },
  99
 100     recordAndApply: function (entry: string) {
 101       this.record(entry);
 102       this.apply(entry);
 103     },
 104
 105     replay: function () {
 106       while (true) {
 107         const entry = window.localStorage.getItem(`${prefix}${next_log_index}`);
 108         if (entry === null) {
 109           break;
 110         }
 111         this.apply(entry);
 112         next_log_index++;
 113       }
 114     },
 115   };
 116 }
 117 const log = Log();
 118
 119 const UI = {
 120   addTask: function (description: string) {
 121     log.recordAndApply(`${Date.now()} Create ${description}`);
 122   },
 123   destroyTask: function (createTimestamp: string) {
 124     log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`);
 125   },
 126   setPriority: function (createTimestamp: string, priority: number) {
 127     log.recordAndApply(`${Date.now()} Priority ${createTimestamp} ${priority}`);
 128   },
 129   setState: function (createTimestamp: string, state: string) {
 130     log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`);
 131   },
 132 };
 133
 134 const BrowserUI = {
 135   addTask: function () {
 136     const input = <HTMLInputElement>document.getElementById("taskName");
 137     if (input.value) {
 138       UI.addTask(input.value);
 139       input.value = "";
 140     }
 141   },
 142
 143   destroyTask: function () {
 144     const createTimestamp = document.activeElement?.getAttribute("data-created");
 145     this.moveCursor(1) || this.moveCursor(-1);
 146     return UI.destroyTask(createTimestamp!);
 147   },
 148
 149   focusTaskNameInput: function (event: any) {
 150     document.getElementById("taskName")!.focus();
 151     event.preventDefault();
 152   },
 153
 154   visibleTaskAtOffset(task: Element, offset: number): Element {
 155     var cursor: Element | null = task;
 156     var valid_cursor = cursor;
 157     const increment = offset / Math.abs(offset);
 158     while (true) {
 159       cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
 160       if (!cursor || !(cursor instanceof HTMLElement)) break;
 161       if (cursor.style.display !== "none") {
 162         offset -= increment;
 163         valid_cursor = cursor;
 164       }
 165       if (Math.abs(offset) < 0.5) break;
 166     }
 167     return valid_cursor;
 168   },
 169
 170   moveCursor: function (offset: number): boolean {
 171     const active = document.activeElement;
 172     if (!active) return false;
 173     const dest = this.visibleTaskAtOffset(active, offset);
 174     if (dest !== active && dest instanceof HTMLElement) {
 175       dest.focus();
 176       return true;
 177     }
 178     return false;
 179   },
 180
 181   moveTask: function (offset: number) {
 182     const active = document.activeElement;
 183     if (!active) return;
 184     const dest = this.visibleTaskAtOffset(active, offset);
 185     if (dest === active) return; // Already extremal
 186     var onePastDest: Element | null = this.visibleTaskAtOffset(dest, offset / Math.abs(offset));
 187     if (onePastDest == dest) onePastDest = null; // Will become extremal
 188     if (offset > 0) {
 189       this.setPriority(active, dest, onePastDest);
 190     } else {
 191       this.setPriority(active, onePastDest, dest);
 192     }
 193   },
 194
 195   // Change task's priority to be between other tasks a and b.
 196   setPriority: function (task: Element, a: Element | null, b: Element | null) {
 197     const aPriority = a === null ? 0 : Model.getPriority(a);
 198     const bPriority = b === null ? Date.now() : Model.getPriority(b);
 199     console.assert(aPriority < bPriority, aPriority, "<", bPriority);
 200     const span = bPriority - aPriority;
 201     const newPriority = aPriority + 0.1 * span + 0.8 * span * Math.random();
 202     console.assert(aPriority < newPriority && newPriority < bPriority, aPriority, "<", newPriority, "<", bPriority);
 203     const newPriorityRounded = Math.round(newPriority);
 204     const okToRound = aPriority < newPriorityRounded && newPriorityRounded < bPriority;
 205     UI.setPriority(task.getAttribute("data-created")!, okToRound ? newPriorityRounded : newPriority);
 206   },
 207
 208   setState: function (state: string) {
 209     const createTimestamp = document.activeElement?.getAttribute("data-created");
 210     this.moveCursor(1) || this.moveCursor(-1);
 211     return UI.setState(createTimestamp!, state);
 212   },
 213 };
 214
 215 function handleKey(event: any) {
 216   if (event.target.tagName === "INPUT") {
 217     if (event.key == "Enter") return BrowserUI.addTask();
 218   } else {
 219     if (event.key == "j") return BrowserUI.moveCursor(1);
 220     if (event.key == "k") return BrowserUI.moveCursor(-1);
 221     if (event.key == "J") return BrowserUI.moveTask(1);
 222     if (event.key == "K") return BrowserUI.moveTask(-1);
 223     if (event.key == "n") return BrowserUI.focusTaskNameInput(event);
 224     if (event.key == "s") return BrowserUI.setState("someday-maybe");
 225     if (event.key == "w") return BrowserUI.setState("waiting");
 226     if (event.key == "d") return BrowserUI.setState("done");
 227     if (event.key == "c") return BrowserUI.setState("cancelled");
 228     if (event.key == "X") return BrowserUI.destroyTask();
 229   }
 230 }
 231
 232 function browserInit() {
 233   document.body.addEventListener("keydown", handleKey, { capture: false });
 234   log.replay();
 235 }