From: Scott Worley Date: Thu, 27 Jan 2022 20:52:53 +0000 (-0800) Subject: Keep description in its own span X-Git-Url: http://git.scottworley.com/vopamoi/commitdiff_plain/267376878a35c6548d3b3bf2ea70cc2344450da5?ds=inline Keep description in its own span Tags broke task.textContent being an easy way to get the task description, which editTask was using. This restores neatness & fixes a bug in which tag names were slurped into the edit-task buffer. --- diff --git a/vopamoi.ts b/vopamoi.ts index cbb9af2..5916d0a 100644 --- 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,7 +77,7 @@ const Model = { target.setAttribute("data-description", newDescription); } } else { - target.textContent = newDescription; + target.getElementsByClassName("desc")[0].textContent = newDescription; } return target; }, @@ -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); }