return tag;
}
}
- task.appendChild(tag);
+ task.insertBefore(tag, task.getElementsByClassName("desc")[0]!);
return tag;
},
if (!target) return null;
if (target.hasAttribute("data-description")) {
// Oh no: An edit has arrived from a replica while a local edit is in progress.
- const input = target.firstChild as HTMLInputElement;
+ const input = target.getElementsByTagName("input")[0]!;
if (
input.value === target.getAttribute("data-description") &&
input.selectionStart === input.value.length &&
}
function BrowserUI() {
+ const viewColors: { [key: string]: string } = {
+ all: "Gold",
+ cancelled: "Red",
+ deleted: "Black",
+ done: "LawnGreen",
+ "someday-maybe": "DeepSkyBlue",
+ todo: "White",
+ waiting: "MediumOrchid",
+ };
+ var currentTagView: string | null = null;
var currentViewState = "todo";
var taskFocusedBeforeJumpingToInput: HTMLElement | null = null;
var lastTagNameEntered = "";
this.firstVisibleTask()?.focus();
}
input.value = "";
+ if (currentTagView) {
+ ui.addTag(task.getAttribute("data-created")!, currentTagView);
+ }
if (event.getModifierState("Control")) {
this.makeBottomPriority(task);
}
},
beginEdit: function (event: Event) {
- var task = document.activeElement;
+ const task = this.currentTask();
if (!task) return;
- if (task.classList.contains("tag")) task = task.parentElement!;
const input = document.createElement("input");
const desc = task.getElementsByClassName("desc")[0];
const oldDescription = desc.textContent!;
},
beginTagEdit: function (event: Event) {
- const task = document.activeElement;
+ const task = this.currentTask();
if (!task) return;
const input = document.createElement("input");
input.classList.add("tag");
}
},
+ currentTag: function (): Element | null {
+ var target = document.activeElement;
+ if (!target) return null;
+ if (target.classList.contains("task")) {
+ const tags = target.getElementsByClassName("tag");
+ target = tags[tags.length - 1];
+ }
+ if (!target || !target.classList.contains("tag")) return null;
+ return target;
+ },
+
+ currentTask: function (): HTMLElement | null {
+ var target = document.activeElement;
+ if (!target) return null;
+ if (target.classList.contains("tag")) target = target.parentElement!;
+ return target as HTMLElement;
+ },
+
firstVisibleTask: function () {
for (const task of document.getElementsByClassName("task")) {
const state = task.getAttribute("data-state");
- if (task instanceof HTMLElement && (state === currentViewState || (currentViewState === "all" && state !== "deleted"))) {
+ if (
+ task instanceof HTMLElement &&
+ (state === currentViewState || (currentViewState === "all" && state !== "deleted")) &&
+ !task.classList.contains("hide")
+ ) {
return task;
}
}
},
focusTaskNameInput: function (event: Event) {
- if (document.activeElement instanceof HTMLElement) {
- taskFocusedBeforeJumpingToInput = document.activeElement;
- }
+ taskFocusedBeforeJumpingToInput = this.currentTask();
document.getElementById("taskName")!.focus();
window.scroll(0, 0);
event.preventDefault();
cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
if (!cursor || !(cursor instanceof HTMLElement)) break;
const state = cursor.getAttribute("data-state")!;
- if (state === currentViewState || (currentViewState === "all" && state !== "deleted")) {
+ if (
+ (state === currentViewState || (currentViewState === "all" && state !== "deleted")) &&
+ !cursor.classList.contains("hide")
+ ) {
offset -= increment;
valid_cursor = cursor;
}
},
makeBottomPriority: function (task: Element | null = null) {
- if (!task) task = document.activeElement;
+ if (!task) task = this.currentTask();
if (!task) return;
this.setPriority(task, document.getElementById("tasks")!.lastElementChild, null);
},
makeTopPriority: function (task: Element | null = null) {
- if (!task) task = document.activeElement;
+ if (!task) task = this.currentTask();
if (!task) return;
ui.setPriority(task.getAttribute("data-created")!, clock.now(), Model.getPriority(task));
task instanceof HTMLElement && task.focus();
},
moveCursor: function (offset: number): boolean {
- const active = document.activeElement;
+ const active = this.currentTask();
if (!active) return false;
const dest = this.visibleTaskAtOffset(active, offset);
if (dest !== active && dest instanceof HTMLElement) {
},
moveTask: function (offset: number) {
- const active = document.activeElement;
+ const active = this.currentTask();
if (!active) return;
const dest = this.visibleTaskAtOffset(active, offset);
if (dest === active) return; // Already extremal
},
removeTag: function () {
- var target = document.activeElement;
+ const target = this.currentTag();
if (!target) return;
- if (target.classList.contains("task")) {
- const tags = target.getElementsByClassName("tag");
- target = tags[tags.length - 1];
- }
- if (!target || !target.classList.contains("tag")) return;
ui.removeTag(target.parentElement!.getAttribute("data-created")!, target.textContent!);
},
+ resetTagView: function () {
+ currentTagView = null;
+ for (const task of document.getElementsByClassName("task")) {
+ task.classList.remove("hide");
+ }
+ },
+
+ resetView: function () {
+ this.setView("todo");
+ this.resetTagView();
+ },
+
returnFocusAfterInput: function (): boolean {
if (taskFocusedBeforeJumpingToInput) {
taskFocusedBeforeJumpingToInput.focus();
},
setState: function (newState: string) {
- const task = document.activeElement;
+ const task = this.currentTask();
if (!task) return;
const oldState = task.getAttribute("data-state")!;
if (newState === oldState) return;
return ui.setState(createTimestamp, newState, oldState);
},
- setView: function (state: string, color: string) {
+ setTagView: function () {
+ const target = this.currentTag();
+ if (!target) return;
+ const tag = target.textContent!;
+ for (const task of document.getElementsByClassName("task")) {
+ if (Model.hasTag(task, tag)) {
+ task.classList.remove("hide");
+ } else {
+ task.classList.add("hide");
+ }
+ }
+ currentTagView = tag;
+ },
+
+ setView: function (state: string) {
const sheet = (document.getElementById("viewStyle") as HTMLStyleElement).sheet!;
if (state === "all") {
sheet.insertRule(`.task[data-state=deleted] { display: none }`);
} else {
sheet.insertRule(`.task:not([data-state=${state}]) { display: none }`);
}
- sheet.insertRule(`:root { --view-state-indicator-color: ${color}; }`);
+ sheet.insertRule(`:root { --view-state-indicator-color: ${viewColors[state]}; }`);
sheet.removeRule(2);
sheet.removeRule(2);
currentViewState = state;
- if (document.activeElement?.getAttribute("data-state") !== state) {
+ if (this.currentTask()?.getAttribute("data-state") !== state) {
this.firstVisibleTask()?.focus();
}
},
+ setUntaggedView: function () {
+ for (const task of document.getElementsByClassName("task")) {
+ if (task.getElementsByClassName("tag").length === 0) {
+ task.classList.remove("hide");
+ } else {
+ task.classList.add("hide");
+ }
+ }
+ },
+
undo: function () {
const ret = ui.undo();
if (ret && ret instanceof HTMLElement) ret.focus();
if (event.key == "m") return browserUI.setState("someday-maybe");
} else if (inputState === InputState.V) {
inputState = InputState.Root;
- if (event.key == "a") return browserUI.setView("all", "Gold");
- if (event.key == "c") return browserUI.setView("cancelled", "Red");
- if (event.key == "d") return browserUI.setView("done", "LawnGreen");
- if (event.key == "q") return browserUI.setView("todo", "White");
+ if (event.key == "a") return browserUI.setView("all");
+ if (event.key == "c") return browserUI.setView("cancelled");
+ if (event.key == "d") return browserUI.setView("done");
+ if (event.key == "i") return browserUI.setUntaggedView();
+ if (event.key == "q") return browserUI.setView("todo");
if (event.key == "s") return (inputState = InputState.VS);
- if (event.key == "v") return browserUI.setView("todo", "White");
- if (event.key == "w") return browserUI.setView("waiting", "MediumOrchid");
- if (event.key == "x") return browserUI.setView("deleted", "Black");
+ if (event.key == "T") return browserUI.resetTagView();
+ if (event.key == "t") return browserUI.setTagView();
+ if (event.key == "u") return browserUI.setUntaggedView();
+ if (event.key == "v") return browserUI.resetView();
+ if (event.key == "w") return browserUI.setView("waiting");
+ if (event.key == "x") return browserUI.setView("deleted");
} else if (inputState === InputState.VS) {
inputState = InputState.Root;
- if (event.key == "m") return browserUI.setView("someday-maybe", "DeepSkyBlue");
+ if (event.key == "m") return browserUI.setView("someday-maybe");
}
}
}
projects / vopamoi / blobdiff