87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { mountAdmin } from "./admin.js";
|
|
import { mountChanges } from "./changes.js";
|
|
import { h, replace } from "./dom.js";
|
|
import { mountFiles } from "./files.js";
|
|
import { mountInbox } from "./inbox.js";
|
|
import { mountSettings } from "./settings.js";
|
|
import { mountTranscript } from "./task.js";
|
|
import { mountTasks } from "./tasks.js";
|
|
import { mountTodo } from "./todo.js";
|
|
|
|
export type View = "transcript" | "changes" | "files" | "tasks" | "todo" | "inbox" | "admin" | "settings";
|
|
|
|
const views: Record<View, { label: string; mount: (root: HTMLElement) => () => void }> = {
|
|
transcript: { label: "Transcript", mount: mountTranscript },
|
|
changes: { label: "Changes", mount: (root) => mountChanges(root) },
|
|
files: { label: "Files", mount: mountFiles },
|
|
tasks: { label: "Tasks", mount: mountTasks },
|
|
todo: { label: "Todo", mount: mountTodo },
|
|
inbox: { label: "Inbox", mount: mountInbox },
|
|
admin: { label: "Admin", mount: mountAdmin },
|
|
settings: { label: "Settings", mount: mountSettings },
|
|
};
|
|
|
|
const order: View[] = ["transcript", "changes", "files", "tasks", "todo", "inbox", "admin", "settings"];
|
|
|
|
const panes: Pane[] = [];
|
|
|
|
export function openTranscript(): void {
|
|
if (panes.some((p) => p.current() === "transcript")) {
|
|
return;
|
|
}
|
|
(panes.find((p) => p.current() !== "tasks") ?? panes[0])?.show("transcript");
|
|
}
|
|
|
|
export function openChanges(from: Element): void {
|
|
if (panes.some((p) => p.current() === "changes")) {
|
|
return;
|
|
}
|
|
(panes.find((p) => !p.el.contains(from)) ?? panes[0])?.show("changes");
|
|
}
|
|
|
|
export class Pane {
|
|
readonly el: HTMLElement;
|
|
private readonly tabs: HTMLElement;
|
|
private readonly body: HTMLElement;
|
|
private view: View;
|
|
private dispose: () => void = () => {};
|
|
|
|
constructor(private readonly key: string, fallback: View) {
|
|
this.tabs = h("nav", { class: "pane-tabs" });
|
|
this.body = h("div", { class: "pane-body" });
|
|
this.el = h("section", { class: "pane" }, this.tabs, this.body);
|
|
|
|
const saved = localStorage.getItem(this.storageKey()) as View | null;
|
|
this.view = saved && saved in views ? saved : fallback;
|
|
this.show(this.view);
|
|
panes.push(this);
|
|
}
|
|
|
|
current(): View {
|
|
return this.view;
|
|
}
|
|
|
|
show(view: View): void {
|
|
this.dispose();
|
|
this.view = view;
|
|
localStorage.setItem(this.storageKey(), view);
|
|
|
|
replace(
|
|
this.tabs,
|
|
...order.map((v) => {
|
|
const b = h("button", { class: v === view ? "active" : "" }, views[v].label);
|
|
b.onclick = () => this.show(v);
|
|
return b;
|
|
}),
|
|
);
|
|
|
|
const root = h("div", { class: `view view-${view}` });
|
|
replace(this.body, root);
|
|
this.dispose = views[view].mount(root);
|
|
}
|
|
|
|
private storageKey(): string {
|
|
return `byre.pane.${this.key}`;
|
|
}
|
|
}
|