X-Git-Url: http://git.scottworley.com/vopamoi/blobdiff_plain/caa93fd1819b0d57029de637029daf0bc867d17e..23be73e31d2e432bb56323937bab90fafba13b91:/vopamoi.ts?ds=inline diff --git a/vopamoi.ts b/vopamoi.ts index f127da9..3042add 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -17,6 +17,7 @@ const Model = { createTask: function (timestamp: string, description: string) { const task = document.createElement("div"); task.appendChild(document.createTextNode(description)); + task.setAttribute("class", "task"); task.setAttribute("tabindex", "0"); task.setAttribute("data-created", timestamp); return task; @@ -26,23 +27,33 @@ const Model = { document.body.appendChild(this.createTask(timestamp, description)).focus(); }, - moveCursor: function (offset: number): boolean { - var active = document.activeElement; - if (offset === 1 && active) { - active = active.nextElementSibling; + getTask: function (createTimestamp: string) { + for (const task of document.getElementsByClassName("task")) { + if (task.getAttribute("data-created") === createTimestamp) { + return task; + } } - if (offset === -1 && active) { - active = active.previousElementSibling; + }, + + destroyTask: function (createTimestamp: string) { + const task = this.getTask(createTimestamp); + if (task) { + task.parentElement!.removeChild(task); } - if (active && active instanceof HTMLElement) { - active.focus(); - return true; + }, + + setState: function (stateTimestamp: string, createTimestamp: string, state: string) { + const task = this.getTask(createTimestamp); + if (task) { + task.setAttribute(`data-${state}`, stateTimestamp); + if (task instanceof HTMLElement) { + task.style.display = "none"; // Until view filtering + } } - return false; }, }; -const Log = (function () { +function Log(prefix: string = "vp-") { var next_log_index = 0; return { apply: function (entry: string) { @@ -50,10 +61,17 @@ const Log = (function () { if (command == "Create") { Model.addTask(timestamp, data); } + if (command == "Destroy") { + Model.destroyTask(data.split(" ", 1)[0]); + } + if (command == "State") { + const [createTimestamp, state] = splitN(data, " ", 1); + Model.setState(timestamp, createTimestamp, state); + } }, record: function (entry: string) { - window.localStorage.setItem(`${next_log_index++}`, entry); + window.localStorage.setItem(`${prefix}${next_log_index++}`, entry); }, recordAndApply: function (entry: string) { @@ -63,7 +81,7 @@ const Log = (function () { replay: function () { while (true) { - const entry = window.localStorage.getItem(`${next_log_index}`); + const entry = window.localStorage.getItem(`${prefix}${next_log_index}`); if (entry === null) { break; } @@ -72,11 +90,18 @@ const Log = (function () { } }, }; -})(); +} +const log = Log(); const UI = { addTask: function (description: string) { - Log.recordAndApply(`${Date.now()} Create ${description}`); + log.recordAndApply(`${Date.now()} Create ${description}`); + }, + destroyTask: function (createTimestamp: string) { + log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`); + }, + setState: function (createTimestamp: string, state: string) { + log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`); }, }; @@ -88,22 +113,66 @@ const BrowserUI = { } return false; }, -}; -function focusTaskNameInput(event: any) { - document.getElementById("taskName")!.focus(); - event.preventDefault(); -} + destroyTask: function () { + const createTimestamp = document.activeElement?.getAttribute("data-created"); + this.moveCursor(1) || this.moveCursor(-1); + return UI.destroyTask(createTimestamp!); + }, + + focusTaskNameInput: function (event: any) { + document.getElementById("taskName")!.focus(); + event.preventDefault(); + }, + + visibleTaskAtOffset(task: Element, offset: number): Element { + var cursor: Element | null = task; + var valid_cursor = cursor; + const increment = offset / Math.abs(offset); + while (true) { + cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling; + if (!cursor || !(cursor instanceof HTMLElement)) break; + if (cursor.style.display !== "none") { + offset -= increment; + valid_cursor = cursor; + } + if (Math.abs(offset) < 0.5) break; + } + return valid_cursor; + }, + + moveCursor: function (offset: number): boolean { + const active = document.activeElement; + if (!active) return false; + const dest = this.visibleTaskAtOffset(active, offset); + if (dest !== active && dest instanceof HTMLElement) { + dest.focus(); + return true; + } + return false; + }, + + setState: function (state: string) { + const createTimestamp = document.activeElement?.getAttribute("data-created"); + this.moveCursor(1) || this.moveCursor(-1); + return UI.setState(createTimestamp!, state); + }, +}; function handleKey(event: any) { if (event.target.tagName !== "INPUT") { - if (event.key == "j") return Model.moveCursor(1); - if (event.key == "k") return Model.moveCursor(-1); - if (event.key == "c") return focusTaskNameInput(event); + if (event.key == "j") return BrowserUI.moveCursor(1); + if (event.key == "k") return BrowserUI.moveCursor(-1); + if (event.key == "n") return BrowserUI.focusTaskNameInput(event); + if (event.key == "s") return BrowserUI.setState("someday-maybe"); + if (event.key == "w") return BrowserUI.setState("waiting"); + if (event.key == "d") return BrowserUI.setState("done"); + if (event.key == "c") return BrowserUI.setState("cancelled"); + if (event.key == "X") return BrowserUI.destroyTask(); } } function browserInit() { document.body.addEventListener("keydown", handleKey, { capture: false }); - Log.replay(); + log.replay(); }