}
const Model = {
+ addTask: function (timestamp: string, description: string) {
+ document.body.appendChild(this.createTask(timestamp, description)).focus();
+ },
+
createTask: function (timestamp: string, description: string) {
const task = document.createElement("div");
task.appendChild(document.createTextNode(description));
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);
+ }
},
getTask: function (createTimestamp: string) {
}
},
- destroyTask: function (createTimestamp: string) {
- const task = this.getTask(createTimestamp);
- if (task) {
- task.parentElement!.removeChild(task);
- }
- },
-
setState: function (stateTimestamp: string, createTimestamp: string, state: string) {
const task = this.getTask(createTimestamp);
if (task) {
},
};
-const Log = (function () {
+function Log(prefix: string = "vp-") {
var next_log_index = 0;
return {
apply: function (entry: string) {
},
record: function (entry: string) {
- window.localStorage.setItem(`${next_log_index++}`, entry);
+ window.localStorage.setItem(`${prefix}${next_log_index++}`, entry);
},
recordAndApply: function (entry: string) {
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;
}
}
},
};
-})();
+}
+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}`);
+ log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`);
},
setState: function (createTimestamp: string, state: string) {
- Log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`);
+ log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`);
},
};
event.preventDefault();
},
- moveCursor: function (offset: number): boolean {
- var active = document.activeElement;
- if (offset === 1 && active) {
- active = active.nextElementSibling;
- }
- if (offset === -1 && active) {
- active = active.previousElementSibling;
+ 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;
}
- if (active && active instanceof HTMLElement) {
- active.focus();
+ 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;
function browserInit() {
document.body.addEventListener("keydown", handleKey, { capture: false });
- Log.replay();
+ log.replay();
}