44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
|
import { h, replace } from "./dom.js";
|
||
|
|
import { mountInbox } from "./inbox.js";
|
||
|
|
import { mountTranscript } from "./task.js";
|
||
|
|
import { mountTasks } from "./tasks.js";
|
||
|
|
const views = {
|
||
|
|
transcript: { label: "Transcript", mount: mountTranscript },
|
||
|
|
tasks: { label: "Tasks", mount: mountTasks },
|
||
|
|
inbox: { label: "Inbox", mount: mountInbox },
|
||
|
|
};
|
||
|
|
const order = ["transcript", "tasks", "inbox"];
|
||
|
|
export class Pane {
|
||
|
|
key;
|
||
|
|
el;
|
||
|
|
tabs;
|
||
|
|
body;
|
||
|
|
view;
|
||
|
|
dispose = () => { };
|
||
|
|
constructor(key, fallback) {
|
||
|
|
this.key = key;
|
||
|
|
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());
|
||
|
|
this.view = saved && saved in views ? saved : fallback;
|
||
|
|
this.show(this.view);
|
||
|
|
}
|
||
|
|
show(view) {
|
||
|
|
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}` });
|
||
|
|
replace(this.body, root);
|
||
|
|
this.dispose = views[view].mount(root);
|
||
|
|
}
|
||
|
|
storageKey() {
|
||
|
|
return `byre.pane.${this.key}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=panes.js.map
|