319 lines
11 KiB
JavaScript
319 lines
11 KiB
JavaScript
const { ItemView, Plugin, TFile, debounce, MarkdownView } = require("obsidian");
|
|
|
|
const VIEW_TYPE = "org-todo-list-view";
|
|
|
|
// Dates still come from the line text — these are Tasks-plugin emoji conventions,
|
|
// not something Obsidian's cache parses.
|
|
const DONE_DATE_RE = /✅\s*(\d{4}-\d{2}-\d{2})/;
|
|
const DUE_DATE_RE = /📅\s*(\d{4}-\d{2}-\d{2})/;
|
|
// Used only to strip the checkbox prefix and emoji-dates from the display text.
|
|
const TASK_RE = /^\s*(?:[-*+]|\d+\.)\s+\[( |x|X)\]\s+(.*)$/;
|
|
// Strip inline #tags out of the display text (cache gives us the tags themselves).
|
|
const HASHTAG_RE = /(?:^|\s)#[A-Za-z0-9_\-\/]+/g;
|
|
|
|
class OrgTodoListPlugin extends Plugin {
|
|
async onload() {
|
|
this.registerView(VIEW_TYPE, (leaf) => new OrgTodoListView(leaf, this));
|
|
|
|
this.addCommand({
|
|
id: "open-org-todo-list",
|
|
name: "Open TODO list",
|
|
callback: () => this.activateView(),
|
|
});
|
|
|
|
this.addRibbonIcon("checkmark", "Org TODO List", () => this.activateView());
|
|
}
|
|
|
|
async activateView() {
|
|
const { workspace } = this.app;
|
|
let leaf = workspace.getLeavesOfType(VIEW_TYPE)[0];
|
|
if (!leaf) {
|
|
leaf = workspace.getRightLeaf(false);
|
|
await leaf.setViewState({ type: VIEW_TYPE, active: true });
|
|
}
|
|
workspace.revealLeaf(leaf);
|
|
}
|
|
|
|
onunload() { }
|
|
}
|
|
|
|
class OrgTodoListView extends ItemView {
|
|
constructor(leaf, plugin) {
|
|
super(leaf);
|
|
this.plugin = plugin;
|
|
this.tasks = [];
|
|
this.filterText = "";
|
|
this.activeTags = new Set();
|
|
this.showDone = false;
|
|
this.ROW_H = 28; // fixed row height in px — MUST match CSS
|
|
this.BUFFER = 5; // extra rows above/below viewport, hides scroll seams
|
|
this.filtered = [];
|
|
}
|
|
|
|
getViewType() {
|
|
return VIEW_TYPE;
|
|
}
|
|
getDisplayText() {
|
|
return "TODO list";
|
|
}
|
|
getIcon() {
|
|
return "checkmark";
|
|
}
|
|
|
|
async onOpen() {
|
|
this.debouncedUpdate = debounce(
|
|
(file) => this.updateFile(file),
|
|
400,
|
|
true
|
|
);
|
|
|
|
// Fires AFTER the metadata cache re-parses — cache is fresh here.
|
|
this.registerEvent(
|
|
this.app.metadataCache.on("changed", (file) => this.debouncedUpdate(file))
|
|
);
|
|
// Deletions: just drop the file's tasks, nothing to reparse.
|
|
this.registerEvent(
|
|
this.app.vault.on("delete", (file) => this.removeFile(file.path))
|
|
);
|
|
// Rename: remove old-path entries, rescan under the new path.
|
|
this.registerEvent(
|
|
this.app.vault.on("rename", (file, oldPath) => {
|
|
this.removeFile(oldPath);
|
|
this.updateFile(file);
|
|
})
|
|
);
|
|
|
|
this.buildChrome();
|
|
await this.refresh();
|
|
}
|
|
|
|
async onClose() { }
|
|
|
|
buildChrome() {
|
|
const root = this.containerEl.children[1];
|
|
root.empty();
|
|
root.addClass("org-todo-root");
|
|
|
|
root.createEl("h4", { text: "TODO list" });
|
|
|
|
const input = root.createEl("input", {
|
|
type: "text",
|
|
placeholder: "Filter… (text or #tag)",
|
|
});
|
|
input.addClass("org-todo-filter");
|
|
input.addEventListener("input", () => {
|
|
this.filterText = input.value.toLowerCase();
|
|
this.renderList();
|
|
this.renderTagBar();
|
|
});
|
|
|
|
const toggleWrap = root.createDiv({ cls: "org-todo-toggle" });
|
|
const cb = toggleWrap.createEl("input", { type: "checkbox" });
|
|
toggleWrap.createEl("span", { text: " Show completed" });
|
|
cb.addEventListener("change", () => {
|
|
this.showDone = cb.checked;
|
|
this.renderList();
|
|
});
|
|
|
|
this.tagBarEl = root.createDiv({ cls: "org-todo-tagbar" });
|
|
this.listEl = root.createDiv({ cls: "org-todo-list" });
|
|
}
|
|
|
|
async refresh() {
|
|
this.tasks = await this.scanVault();
|
|
this.renderList();
|
|
this.renderTagBar();
|
|
}
|
|
|
|
async scanFile(file) {
|
|
if (!(file instanceof TFile) || file.extension !== "md") return [];
|
|
|
|
const cache = this.app.metadataCache.getFileCache(file);
|
|
const taskItems = cache?.listItems?.filter((li) => li.task !== undefined) ?? [];
|
|
if (taskItems.length === 0) return [];
|
|
|
|
const tagsByLine = new Map();
|
|
for (const t of cache?.tags ?? []) {
|
|
const ln = t.position.start.line;
|
|
if (!tagsByLine.has(ln)) tagsByLine.set(ln, []);
|
|
tagsByLine.get(ln).push(t.tag.replace(/^#/, ""));
|
|
}
|
|
|
|
const content = await this.app.vault.cachedRead(file);
|
|
const lines = content.split("\n");
|
|
const out = [];
|
|
|
|
for (const li of taskItems) {
|
|
const line = li.position.start.line;
|
|
const raw = lines[line] ?? "";
|
|
const m = raw.match(TASK_RE);
|
|
const done = (li.task ?? " ") !== " ";
|
|
const body = m ? m[2] : raw;
|
|
const tags = tagsByLine.get(line) ?? [];
|
|
const doneDate = body.match(DONE_DATE_RE)?.[1] ?? null;
|
|
const dueDate = body.match(DUE_DATE_RE)?.[1] ?? null;
|
|
const text = body
|
|
.replace(HASHTAG_RE, "")
|
|
.replace(DONE_DATE_RE, "")
|
|
.replace(DUE_DATE_RE, "")
|
|
.replace(/\s+/g, " ")
|
|
.trim();
|
|
out.push({ text, raw, done, tags, doneDate, dueDate, file, line });
|
|
}
|
|
return out;
|
|
}
|
|
|
|
async scanVault() {
|
|
const out = [];
|
|
for (const file of this.app.vault.getMarkdownFiles()) {
|
|
const fileTasks = await this.scanFile(file);
|
|
for (const t of fileTasks) out.push(t);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
// Remove all tasks belonging to a given path, then re-render.
|
|
removeFile(path) {
|
|
this.tasks = this.tasks.filter((t) => t.file.path !== path);
|
|
this.renderList();
|
|
this.renderTagBar();
|
|
}
|
|
|
|
// Rescan one file and splice its tasks in, replacing its previous entries.
|
|
async updateFile(file) {
|
|
if (!(file instanceof TFile) || file.extension !== "md") return;
|
|
const fresh = await this.scanFile(file);
|
|
this.tasks = this.tasks.filter((t) => t.file.path !== file.path);
|
|
for (const t of fresh) this.tasks.push(t);
|
|
this.renderList();
|
|
this.renderTagBar();
|
|
}
|
|
|
|
renderTagBar() {
|
|
this.tagBarEl.empty();
|
|
|
|
// Every tag in the vault — the chip bar is a stable, complete palette.
|
|
const all = new Set();
|
|
for (const t of this.tasks) t.tags.forEach((x) => all.add(x));
|
|
|
|
// Prune active filters whose tag no longer exists (the ghost-filter fix).
|
|
for (const tag of [...this.activeTags]) {
|
|
if (!all.has(tag)) this.activeTags.delete(tag);
|
|
}
|
|
|
|
// Narrow the CHIPS by the text box. Strip a leading '#' the user may type,
|
|
// so "#wo" and "wo" both match. Active tags always show so they stay clickable.
|
|
const needle = this.filterText.replace(/^#/, "");
|
|
const sorted = [...all].sort().filter(
|
|
(tag) => !needle || tag.toLowerCase().includes(needle) || this.activeTags.has(tag)
|
|
);
|
|
|
|
for (const tag of sorted) {
|
|
const chip = this.tagBarEl.createEl("button", { text: "#" + tag });
|
|
chip.addClass("org-todo-chip");
|
|
if (this.activeTags.has(tag)) chip.addClass("is-active");
|
|
chip.addEventListener("click", () => {
|
|
if (this.activeTags.has(tag)) this.activeTags.delete(tag);
|
|
else this.activeTags.add(tag);
|
|
this.renderList();
|
|
this.renderTagBar();
|
|
});
|
|
}
|
|
}
|
|
|
|
renderList() {
|
|
// 1. Filter (cheap — pure in-memory).
|
|
this.filtered = this.tasks.filter((t) => {
|
|
if (!this.showDone && t.done) return false;
|
|
if (this.activeTags.size > 0) {
|
|
for (const tag of this.activeTags) if (!t.tags.includes(tag)) return false;
|
|
}
|
|
if (this.filterText) {
|
|
const hay = (t.text + " " + t.tags.map((x) => "#" + x).join(" ")).toLowerCase();
|
|
if (!hay.includes(this.filterText)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
this.listEl.empty();
|
|
|
|
if (this.filtered.length === 0) {
|
|
this.listEl.createEl("div", { text: "No matching tasks.", cls: "org-todo-empty" });
|
|
return;
|
|
}
|
|
|
|
// 2. A tall spacer establishes the full scrollable height...
|
|
this.spacerEl = this.listEl.createDiv({ cls: "org-todo-spacer" });
|
|
this.spacerEl.style.height = this.filtered.length * this.ROW_H + "px";
|
|
|
|
// 3. ...and an absolutely-positioned layer holds the handful of visible rows.
|
|
this.rowsEl = this.spacerEl.createDiv({ cls: "org-todo-rows" });
|
|
|
|
// Repaint visible rows on scroll. Registered once per renderList; the old
|
|
// listEl (and its listener) is discarded by empty() above.
|
|
this.listEl.onscroll = () => this.renderVisible();
|
|
|
|
this.renderVisible();
|
|
}
|
|
|
|
// Paints only the rows currently in the viewport, recycling on scroll.
|
|
renderVisible() {
|
|
if (!this.filtered || this.filtered.length === 0) return;
|
|
|
|
const scrollTop = this.listEl.scrollTop;
|
|
const viewportH = this.listEl.clientHeight;
|
|
|
|
const first = Math.max(0, Math.floor(scrollTop / this.ROW_H) - this.BUFFER);
|
|
const visibleCount = Math.ceil(viewportH / this.ROW_H) + this.BUFFER * 2;
|
|
const last = Math.min(this.filtered.length, first + visibleCount);
|
|
|
|
// Offset the rows layer so the painted slice sits at the right scroll position.
|
|
this.rowsEl.style.transform = `translateY(${first * this.ROW_H}px)`;
|
|
this.rowsEl.empty();
|
|
|
|
for (let i = first; i < last; i++) {
|
|
const t = this.filtered[i];
|
|
const row = this.rowsEl.createDiv({ cls: "org-todo-row" });
|
|
|
|
const box = row.createEl("input", { type: "checkbox" });
|
|
box.checked = t.done;
|
|
box.addEventListener("change", () => this.toggleTask(t, box.checked));
|
|
|
|
const label = row.createSpan({ cls: "org-todo-text" });
|
|
label.setText(t.text);
|
|
if (t.done) label.addClass("is-done");
|
|
|
|
for (const tag of t.tags) {
|
|
row.createSpan({ text: "#" + tag, cls: "org-todo-rowtag" });
|
|
}
|
|
if (t.dueDate) row.createSpan({ text: "📅 " + t.dueDate, cls: "org-todo-date" });
|
|
|
|
label.addEventListener("click", () => this.openTask(t));
|
|
}
|
|
}
|
|
|
|
async toggleTask(t, done) {
|
|
const content = await this.plugin.app.vault.read(t.file);
|
|
const lines = content.split("\n");
|
|
if (lines[t.line] === t.raw) {
|
|
lines[t.line] = t.raw.replace(/\[( |x|X)\]/, done ? "[x]" : "[ ]");
|
|
await this.plugin.app.vault.modify(t.file, lines.join("\n"));
|
|
}
|
|
}
|
|
|
|
async openTask(t) {
|
|
const leaf = this.app.workspace.getLeaf(false);
|
|
await leaf.openFile(t.file);
|
|
const view = leaf.view;
|
|
if (view instanceof MarkdownView) {
|
|
view.editor.setCursor({ line: t.line, ch: 0 });
|
|
view.editor.scrollIntoView(
|
|
{ from: { line: t.line, ch: 0 }, to: { line: t.line, ch: 0 } },
|
|
true
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = OrgTodoListPlugin;
|