Disallow all-spaces task descriptions and tag-names

[vopamoi] / vopamoi.ts

diff --git a/vopamoi.ts b/vopamoi.ts
index cbb9af23d308527302aedc4fc40493cf297f90a0..6519cbfc4367a1f2290a5598b07f9f001d9a87c4 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -29,10 +29,19 @@ function Clock() {
 }
 const clock = Clock();
 
+// Returns a promise for a hue based on a hash of the string
+function hashHue(str: string) {
+  // Using crypto for this is overkill
+  return crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)).then((buf) => (new Uint16Array(buf)[0] * 360) / 2 ** 16);
+}
+
 const Model = {
   addTask: function (timestamp: string, description: string): Element {
     const task = document.createElement("div");
-    task.appendChild(document.createTextNode(description));
+    const desc = document.createElement("span");
+    desc.textContent = description;
+    desc.classList.add("desc");
+    task.appendChild(desc);
     task.classList.add("task");
     task.setAttribute("tabindex", "0");
     task.setAttribute("data-created", timestamp);
@@ -50,6 +59,13 @@ const Model = {
     tag.appendChild(document.createTextNode(tagName));
     tag.classList.add("tag");
     tag.setAttribute("tabindex", "0");
+    hashHue(tagName).then((hue) => (tag.style.backgroundColor = `hsl(${hue},90%,45%)`));
+    for (const child of task.getElementsByClassName("tag")) {
+      if (tagName > child.textContent!) {
+        task.insertBefore(tag, child);
+        return tag;
+      }
+    }
     task.appendChild(tag);
     return tag;
   },
@@ -74,7 +90,7 @@ const Model = {
         target.setAttribute("data-description", newDescription);
       }
     } else {
-      target.textContent = newDescription;
+      target.getElementsByClassName("desc")[0].textContent = newDescription;
     }
     return target;
   },
@@ -219,18 +235,17 @@ function BrowserUI() {
   return {
     addTask: function (event: KeyboardEvent) {
       const input = <HTMLInputElement>document.getElementById("taskName");
-      if (input.value) {
-        const task = ui.addTask(input.value);
-        if (currentViewState === "todo") {
-          task instanceof HTMLElement && task.focus();
-        } else if (this.returnFocusAfterInput()) {
-        } else {
-          this.firstVisibleTask()?.focus();
-        }
-        input.value = "";
-        if (event.getModifierState("Control")) {
-          this.setPriority(task, null, document.getElementsByClassName("task")[0]);
-        }
+      if (input.value.match(/^ *$/)) return;
+      const task = ui.addTask(input.value);
+      if (currentViewState === "todo") {
+        task instanceof HTMLElement && task.focus();
+      } else if (this.returnFocusAfterInput()) {
+      } else {
+        this.firstVisibleTask()?.focus();
+      }
+      input.value = "";
+      if (event.getModifierState("Control")) {
+        this.setPriority(task, null, document.getElementsByClassName("task")[0]);
       }
     },
 
@@ -238,11 +253,12 @@ function BrowserUI() {
       const task = document.activeElement;
       if (!task) return;
       const input = document.createElement("input");
-      const oldDescription = task.textContent!;
+      const desc = task.getElementsByClassName("desc")[0];
+      const oldDescription = desc.textContent!;
       task.setAttribute("data-description", oldDescription);
       input.value = oldDescription;
       input.addEventListener("blur", this.completeEdit, { once: true });
-      task.textContent = "";
+      desc.textContent = "";
       task.insertBefore(input, task.firstChild);
       input.focus();
       event.preventDefault();
@@ -264,14 +280,15 @@ function BrowserUI() {
     completeEdit: function (event: Event, resolution: CommitOrAbort = CommitOrAbort.Commit) {
       const input = event.target as HTMLInputElement;
       const task = input.parentElement!;
+      const desc = task.getElementsByClassName("desc")[0];
       const oldDescription = task.getAttribute("data-description")!;
       const newDescription = input.value;
       input.removeEventListener("blur", this.completeEdit);
       task.removeChild(input);
       task.removeAttribute("data-description");
       task.focus();
-      if (newDescription === oldDescription || resolution === CommitOrAbort.Abort) {
-        task.textContent = oldDescription;
+      if (resolution === CommitOrAbort.Abort || newDescription.match(/^ *$/) || newDescription === oldDescription) {
+        desc.textContent = oldDescription;
       } else {
         ui.edit(task.getAttribute("data-created")!, newDescription, oldDescription);
       }
@@ -284,7 +301,7 @@ function BrowserUI() {
       input.removeEventListener("blur", this.completeTagEdit);
       task.removeChild(input);
       task.focus();
-      if (resolution === CommitOrAbort.Commit && newTagName && !Model.hasTag(task, newTagName)) {
+      if (resolution === CommitOrAbort.Commit && !newTagName.match(/^ *$/) && !Model.hasTag(task, newTagName)) {
         ui.addTag(task.getAttribute("data-created")!, newTagName);
         lastTagNameEntered = newTagName;
       }
@@ -379,10 +396,12 @@ function BrowserUI() {
       return ui.setState(createTimestamp, newState, oldState);
     },
 
-    setView: function (state: string) {
+    setView: function (state: string, color: string) {
       const sheet = (document.getElementById("viewStyle") as HTMLStyleElement).sheet!;
       sheet.insertRule(`.task:not([data-state=${state}]) { display: none }`);
-      sheet.removeRule(1);
+      sheet.insertRule(`:root { --view-state-indicator-color: ${color}; }`);
+      sheet.removeRule(2);
+      sheet.removeRule(2);
       currentViewState = state;
       if (document.activeElement?.getAttribute("data-state") !== state) {
         this.firstVisibleTask()?.focus();
@@ -434,18 +453,18 @@ function handleKey(event: any) {
       if (event.key == "v") return (inputState = InputState.View);
     } else if (inputState === InputState.View) {
       inputState = InputState.Command;
-      if (event.key == "c") return browserUI.setView("cancelled");
-      if (event.key == "d") return browserUI.setView("done");
-      if (event.key == "q") return browserUI.setView("todo");
-      if (event.key == "s") return browserUI.setView("someday-maybe");
-      if (event.key == "w") return browserUI.setView("waiting");
-      if (event.key == "x") return browserUI.setView("deleted");
+      if (event.key == "c") return browserUI.setView("cancelled", "Red");
+      if (event.key == "d") return browserUI.setView("done", "LawnGreen");
+      if (event.key == "q") return browserUI.setView("todo", "White");
+      if (event.key == "s") return browserUI.setView("someday-maybe", "DeepSkyBlue");
+      if (event.key == "w") return browserUI.setView("waiting", "MediumOrchid");
+      if (event.key == "x") return browserUI.setView("deleted", "Black");
     }
   }
 }
 
 function browserInit() {
-  document.body.addEventListener("keydown", handleKey, { capture: false });
   log.replay();
   browserUI.firstVisibleTask()?.focus();
+  document.body.addEventListener("keydown", handleKey, { capture: false });
 }