X-Git-Url: http://git.scottworley.com/vopamoi/blobdiff_plain/caa93fd1819b0d57029de637029daf0bc867d17e..68a72fde2851bd9c176b8862708b71707c1d3ea1:/vopamoi.ts diff --git a/vopamoi.ts b/vopamoi.ts index f127da9..b899c71 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -14,35 +14,68 @@ function splitN(str: string, delimiter: string, limit: number = MAX_SAFE_INTEGER } const Model = { + addTask: function (timestamp: string, description: string) { + document.getElementById("tasks")!.appendChild(this.createTask(timestamp, description)).focus(); + }, + 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; }, - addTask: function (timestamp: string, description: string) { - document.body.appendChild(this.createTask(timestamp, description)).focus(); + destroyTask: function (createTimestamp: string) { + const task = this.getTask(createTimestamp); + if (task) { + task.parentElement!.removeChild(task); + } }, - moveCursor: function (offset: number): boolean { - var active = document.activeElement; - if (offset === 1 && active) { - active = active.nextElementSibling; + getPriority: function (task: Element): number { + if (task.hasAttribute("data-priority")) { + return parseFloat(task.getAttribute("data-priority")!); } - if (offset === -1 && active) { - active = active.previousElementSibling; + return parseFloat(task.getAttribute("data-created")!); + }, + + getTask: function (createTimestamp: string) { + for (const task of document.getElementsByClassName("task")) { + if (task.getAttribute("data-created") === createTimestamp) { + return task; + } } - if (active && active instanceof HTMLElement) { - active.focus(); - return true; + }, + + setPriority: function (createTimestamp: string, priority: number) { + const target = this.getTask(createTimestamp); + if (!target) return; + target.setAttribute("data-priority", `${priority}`); + for (const task of document.getElementsByClassName("task")) { + if (task !== target && this.getPriority(task) > priority) { + task.parentElement!.insertBefore(target, task); + target instanceof HTMLElement && target.focus(); + return; + } + } + document.getElementById("tasks")!.appendChild(target); + target instanceof HTMLElement && target.focus(); + }, + + 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 +83,21 @@ 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); + } + if (command == "Priority") { + const [createTimestamp, newPriority] = splitN(data, " ", 1); + Model.setPriority(createTimestamp, parseFloat(newPriority)); + } }, 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 +107,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 +116,21 @@ 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}`); + }, + setPriority: function (createTimestamp: string, priority: number) { + log.recordAndApply(`${Date.now()} Priority ${createTimestamp} ${priority}`); + }, + setState: function (createTimestamp: string, state: string) { + log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`); }, }; @@ -88,22 +142,95 @@ 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; + }, + + moveTask: function (offset: number) { + const active = document.activeElement; + if (!active) return; + const dest = this.visibleTaskAtOffset(active, offset); + if (dest === active) return; // Already extremal + var onePastDest: Element | null = this.visibleTaskAtOffset(dest, offset / Math.abs(offset)); + if (onePastDest == dest) onePastDest = null; // Will become extremal + if (offset > 0) { + this.setPriority(active, dest, onePastDest); + } else { + this.setPriority(active, onePastDest, dest); + } + }, + + // Change task's priority to be between other tasks a and b. + setPriority: function (task: Element, a: Element | null, b: Element | null) { + const aPriority = a === null ? 0 : Model.getPriority(a); + const bPriority = b === null ? Date.now() : Model.getPriority(b); + console.assert(aPriority < bPriority, aPriority, "<", bPriority); + const span = bPriority - aPriority; + const newPriority = aPriority + 0.1 * span + 0.8 * span * Math.random(); + console.assert(aPriority < newPriority && newPriority < bPriority, aPriority, "<", newPriority, "<", bPriority); + const newPriorityRounded = Math.round(newPriority); + const okToRound = aPriority < newPriorityRounded && newPriorityRounded < bPriority; + UI.setPriority(task.getAttribute("data-created")!, okToRound ? newPriorityRounded : newPriority); + }, + + 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 == "J") return BrowserUI.moveTask(1); + if (event.key == "K") return BrowserUI.moveTask(-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(); }