Keep description in its own span

[vopamoi] / vopamoi.ts

diff --git a/vopamoi.ts b/vopamoi.ts
index d0f4fa157b3645d32e1626b2cf582e208f8b2e22..5916d0a9b21d5fe722d5e05cfa2151b2e1057dd1 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -32,7 +32,10 @@ const clock = Clock();
 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);
@@ -74,14 +77,14 @@ const Model = {
         target.setAttribute("data-description", newDescription);
       }
     } else {
-      target.textContent = newDescription;
+      target.getElementsByClassName("desc")[0].textContent = newDescription;
     }
     return target;
   },
 
   hasTag: function (task: Element, tag: string): Element | null {
-    for (const child of task.children) {
-      if (child.classList.contains("tag") && child.textContent === tag) {
+    for (const child of task.getElementsByClassName("tag")) {
+      if (child.textContent === tag) {
         return child;
       }
     }
@@ -238,11 +241,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,6 +268,7 @@ 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);
@@ -271,7 +276,7 @@ function BrowserUI() {
       task.removeAttribute("data-description");
       task.focus();
       if (newDescription === oldDescription || resolution === CommitOrAbort.Abort) {
-        task.textContent = oldDescription;
+        desc.textContent = oldDescription;
       } else {
         ui.edit(task.getAttribute("data-created")!, newDescription, oldDescription);
       }