Disallow all-spaces task descriptions and tag-names

[vopamoi] / vopamoi.ts

diff --git a/vopamoi.ts b/vopamoi.ts
index 7c51935a2c14535444199ddb68da35ec2eca4e17..6519cbfc4367a1f2290a5598b07f9f001d9a87c4 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -29,10 +29,19 @@ function Clock() {
 }
 const clock = 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");
 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);
     task.classList.add("task");
     task.setAttribute("tabindex", "0");
     task.setAttribute("data-created", timestamp);


@@ -44,10 +53,19 @@ const Model = {
   addTag: function (createTimestamp: string, tagName: string): Element | null {
     const task = this.getTask(createTimestamp);
     if (!task) return null;
   addTag: function (createTimestamp: string, tagName: string): Element | null {
     const task = this.getTask(createTimestamp);
     if (!task) return null;

+    const existingTag = this.hasTag(task, tagName);
+    if (existingTag) return existingTag;

     const tag = document.createElement("span");
     tag.appendChild(document.createTextNode(tagName));
     tag.classList.add("tag");
     tag.setAttribute("tabindex", "0");
     const tag = document.createElement("span");
     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;
   },
     task.appendChild(tag);
     return tag;
   },


@@ -72,18 +90,18 @@ const Model = {
         target.setAttribute("data-description", newDescription);
       }
     } else {
         target.setAttribute("data-description", newDescription);
       }
     } else {

-      target.textContent = newDescription;
+      target.getElementsByClassName("desc")[0].textContent = newDescription;

     }
     return target;
   },
 
     }
     return target;
   },
 

-  hasTag: function (task: Element, tag: string) {
-    for (const child of task.children) {
-      if (child.classList.contains("tag") && child.textContent === tag) {
-        return true;
+  hasTag: function (task: Element, tag: string): Element | null {
+    for (const child of task.getElementsByClassName("tag")) {
+      if (child.textContent === tag) {
+        return child;

       }
     }
       }
     }

-    return false;
+    return null;

   },
 
   getPriority: function (task: Element): number {
   },
 
   getPriority: function (task: Element): number {


@@ -213,21 +231,21 @@ enum CommitOrAbort {
 function BrowserUI() {
   var currentViewState = "todo";
   var taskFocusedBeforeJumpingToInput: HTMLElement | null = null;
 function BrowserUI() {
   var currentViewState = "todo";
   var taskFocusedBeforeJumpingToInput: HTMLElement | null = null;

+  var lastTagNameEntered = "";

   return {
     addTask: function (event: KeyboardEvent) {
       const input = <HTMLInputElement>document.getElementById("taskName");
   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]);

       }
     },
 
       }
     },
 


@@ -235,11 +253,12 @@ function BrowserUI() {
       const task = document.activeElement;
       if (!task) return;
       const input = document.createElement("input");
       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.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();
       task.insertBefore(input, task.firstChild);
       input.focus();
       event.preventDefault();


@@ -251,22 +270,25 @@ function BrowserUI() {
       const input = document.createElement("input");
       input.classList.add("tag");
       input.addEventListener("blur", this.completeTagEdit, { once: true });
       const input = document.createElement("input");
       input.classList.add("tag");
       input.addEventListener("blur", this.completeTagEdit, { once: true });

+      input.value = lastTagNameEntered;

       task.appendChild(input);
       input.focus();
       task.appendChild(input);
       input.focus();

+      input.select();

       event.preventDefault();
     },
 
     completeEdit: function (event: Event, resolution: CommitOrAbort = CommitOrAbort.Commit) {
       const input = event.target as HTMLInputElement;
       const task = input.parentElement!;
       event.preventDefault();
     },
 
     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();
       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);
       }
       } else {
         ui.edit(task.getAttribute("data-created")!, newDescription, oldDescription);
       }


@@ -279,8 +301,9 @@ function BrowserUI() {
       input.removeEventListener("blur", this.completeTagEdit);
       task.removeChild(input);
       task.focus();
       input.removeEventListener("blur", this.completeTagEdit);
       task.removeChild(input);
       task.focus();

-      if (!Model.hasTag(task, newTagName)) {
+      if (resolution === CommitOrAbort.Commit && !newTagName.match(/^ *$/) && !Model.hasTag(task, newTagName)) {

         ui.addTag(task.getAttribute("data-created")!, newTagName);
         ui.addTag(task.getAttribute("data-created")!, newTagName);

+        lastTagNameEntered = newTagName;

       }
     },
 
       }
     },
 


@@ -373,10 +396,12 @@ function BrowserUI() {
       return ui.setState(createTimestamp, newState, oldState);
     },
 
       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 }`);
       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();
       currentViewState = state;
       if (document.activeElement?.getAttribute("data-state") !== state) {
         this.firstVisibleTask()?.focus();


@@ -428,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 == "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() {
     }
   }
 }
 
 function browserInit() {

-  document.body.addEventListener("keydown", handleKey, { capture: false });

   log.replay();
   browserUI.firstVisibleTask()?.focus();
   log.replay();
   browserUI.firstVisibleTask()?.focus();

+  document.body.addEventListener("keydown", handleKey, { capture: false });

 }
 }