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   createTask: 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     return task;
  24   },
  25
  26   addTask: function (timestamp: string, description: string) {
  27     document.body.appendChild(this.createTask(timestamp, description)).focus();
  28   },
  29
  30   getTask: function (createTimestamp: string) {
  31     for (const task of document.getElementsByClassName("task")) {
  32       if (task.getAttribute("data-created") === createTimestamp) {
  33         return task;
  34       }
  35     }
  36   },
  37
  38   destroyTask: function (createTimestamp: string) {
  39     const task = this.getTask(createTimestamp);
  40     if (task) {
  41       task.parentElement!.removeChild(task);
  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   moveCursor: function (offset: number): boolean {
 129     var initial_cursor = document.activeElement;
 130     if (!initial_cursor) return false;
 131     var cursor: Element | null = initial_cursor;
 132     var valid_cursor = cursor;
 133     const increment = offset / Math.abs(offset);
 134     while (true) {
 135       cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
 136       if (!cursor || !(cursor instanceof HTMLElement)) break;
 137       if (cursor.style.display !== "none") {
 138         offset -= increment;
 139         valid_cursor = cursor;
 140       }
 141       if (Math.abs(offset) < 0.5) break;
 142     }
 143     if (valid_cursor !== initial_cursor && valid_cursor instanceof HTMLElement) {
 144       valid_cursor.focus();
 145       return true;
 146     }
 147     return false;
 148   },
 149
 150   setState: function (state: string) {
 151     const createTimestamp = document.activeElement?.getAttribute("data-created");
 152     this.moveCursor(1) || this.moveCursor(-1);
 153     return UI.setState(createTimestamp!, state);
 154   },
 155 };
 156
 157 function handleKey(event: any) {
 158   if (event.target.tagName !== "INPUT") {
 159     if (event.key == "j") return BrowserUI.moveCursor(1);
 160     if (event.key == "k") return BrowserUI.moveCursor(-1);
 161     if (event.key == "n") return BrowserUI.focusTaskNameInput(event);
 162     if (event.key == "s") return BrowserUI.setState("someday-maybe");
 163     if (event.key == "w") return BrowserUI.setState("waiting");
 164     if (event.key == "d") return BrowserUI.setState("done");
 165     if (event.key == "c") return BrowserUI.setState("cancelled");
 166     if (event.key == "X") return BrowserUI.destroyTask();
 167   }
 168 }
 169
 170 function browserInit() {
 171   document.body.addEventListener("keydown", handleKey, { capture: false });
 172   log.replay();
 173 }