From ada060d76e8d158ee56aee89402a674e3a82be9f Mon Sep 17 00:00:00 2001 From: Scott Worley Date: Wed, 26 Jan 2022 23:28:51 -0800 Subject: [PATCH 1/1] Allow browserUI private fields --- vopamoi.ts | 263 +++++++++++++++++++++++++++-------------------------- 1 file changed, 133 insertions(+), 130 deletions(-) diff --git a/vopamoi.ts b/vopamoi.ts index f93c51c..94c26e6 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -176,133 +176,136 @@ const UI = { }, }; -const BrowserUI = { - addTask: function (event: KeyboardEvent) { - const input = document.getElementById("taskName"); - if (input.value) { - const task = UI.addTask(input.value); - if (task && task instanceof HTMLElement) task.focus(); - input.value = ""; - if (event.getModifierState("Control")) { - this.setPriority(task, null, document.getElementsByClassName("task")[0]); +function BrowserUI() { + return { + addTask: function (event: KeyboardEvent) { + const input = document.getElementById("taskName"); + if (input.value) { + const task = UI.addTask(input.value); + if (task && task instanceof HTMLElement) task.focus(); + input.value = ""; + if (event.getModifierState("Control")) { + this.setPriority(task, null, document.getElementsByClassName("task")[0]); + } } - } - }, + }, - beginEdit: function (event: Event) { - const task = document.activeElement; - if (!task) return; - const input = document.createElement("input"); - const oldDescription = task.textContent!; - task.setAttribute("data-description", oldDescription); - input.value = oldDescription; - input.addEventListener("blur", BrowserUI.completeEdit, { once: true }); - task.textContent = ""; - task.appendChild(input); - input.focus(); - input.select(); - event.preventDefault(); - }, + beginEdit: function (event: Event) { + const task = document.activeElement; + if (!task) return; + const input = document.createElement("input"); + const oldDescription = task.textContent!; + task.setAttribute("data-description", oldDescription); + input.value = oldDescription; + input.addEventListener("blur", this.completeEdit, { once: true }); + task.textContent = ""; + task.appendChild(input); + input.focus(); + input.select(); + event.preventDefault(); + }, - completeEdit: function (event: Event) { - const input = event.target as HTMLInputElement; - const task = input.parentElement!; - const oldDescription = task.getAttribute("data-description")!; - const newDescription = input.value; - input.removeEventListener("blur", BrowserUI.completeEdit); - task.removeChild(task.children[0]); - task.removeAttribute("data-description"); - task.focus(); - if (newDescription === oldDescription) { - task.textContent = oldDescription; - } else { - UI.edit(task.getAttribute("data-created")!, newDescription, oldDescription); - } - }, + completeEdit: function (event: Event) { + const input = event.target as HTMLInputElement; + const task = input.parentElement!; + const oldDescription = task.getAttribute("data-description")!; + const newDescription = input.value; + input.removeEventListener("blur", this.completeEdit); + task.removeChild(task.children[0]); + task.removeAttribute("data-description"); + task.focus(); + if (newDescription === oldDescription) { + task.textContent = oldDescription; + } else { + UI.edit(task.getAttribute("data-created")!, newDescription, oldDescription); + } + }, - firstVisibleTask: function () { - for (const task of document.getElementsByClassName("task")) { - if (task instanceof HTMLElement && task.getAttribute("data-state")! === "todo") { - return task; + firstVisibleTask: function () { + for (const task of document.getElementsByClassName("task")) { + if (task instanceof HTMLElement && task.getAttribute("data-state")! === "todo") { + return task; + } } - } - }, + }, - focusTaskNameInput: function (event: Event) { - document.getElementById("taskName")!.focus(); - event.preventDefault(); - }, + focusTaskNameInput: function (event: Event) { + 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.getAttribute("data-state")! === "todo") { - offset -= increment; - valid_cursor = cursor; + 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.getAttribute("data-state")! === "todo") { + offset -= increment; + valid_cursor = cursor; + } + if (Math.abs(offset) < 0.5) break; } - if (Math.abs(offset) < 0.5) break; - } - return valid_cursor; - }, + 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; - }, + 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); - } - }, + 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 ? clock.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, Model.getPriority(task)); - task instanceof HTMLElement && task.focus(); - }, + // 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 ? clock.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, Model.getPriority(task)); + task instanceof HTMLElement && task.focus(); + }, - setState: function (newState: string) { - const task = document.activeElement; - if (!task) return; - const oldState = task.getAttribute("data-state")!; - if (newState === oldState) return; - const createTimestamp = task.getAttribute("data-created")!; - this.moveCursor(1) || this.moveCursor(-1); - return UI.setState(createTimestamp, newState, oldState); - }, + setState: function (newState: string) { + const task = document.activeElement; + if (!task) return; + const oldState = task.getAttribute("data-state")!; + if (newState === oldState) return; + const createTimestamp = task.getAttribute("data-created")!; + this.moveCursor(1) || this.moveCursor(-1); + return UI.setState(createTimestamp, newState, oldState); + }, - undo: function () { - const ret = UI.undo(); - if (ret && ret instanceof HTMLElement) ret.focus(); - }, -}; + undo: function () { + const ret = UI.undo(); + if (ret && ret instanceof HTMLElement) ret.focus(); + }, + }; +} +const browserUI = BrowserUI(); enum InputState { Command, @@ -313,25 +316,25 @@ var inputState = InputState.Command; function handleKey(event: any) { if (event.target.tagName === "INPUT") { if (event.target.id === "taskName") { - if (event.key == "Enter") return BrowserUI.addTask(event); + if (event.key == "Enter") return browserUI.addTask(event); } else { - if (event.key == "Enter") return BrowserUI.completeEdit(event); + if (event.key == "Enter") return browserUI.completeEdit(event); } } else { if (inputState === InputState.Command) { - 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 == "t") return BrowserUI.setState("todo"); - if (event.key == "X") return BrowserUI.setState("deleted"); - if (event.key == "u") return BrowserUI.undo(); - if (event.key == "e") return BrowserUI.beginEdit(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 == "t") return browserUI.setState("todo"); + if (event.key == "X") return browserUI.setState("deleted"); + if (event.key == "u") return browserUI.undo(); + if (event.key == "e") return browserUI.beginEdit(event); if (event.key == "v") return (inputState = InputState.View); } else if (inputState === InputState.View) { return (inputState = InputState.Command); @@ -342,5 +345,5 @@ function handleKey(event: any) { function browserInit() { document.body.addEventListener("keydown", handleKey, { capture: false }); log.replay(); - BrowserUI.firstVisibleTask()?.focus(); + browserUI.firstVisibleTask()?.focus(); } -- 2.44.1