57 lines
2.6 KiB
JavaScript
57 lines
2.6 KiB
JavaScript
// Phone layout only: the shelf along the top of the desk. It shows the date and a small dial,
|
||
// cycles the speed, and picks which single paper is on the desk (tray, briefing, news,
|
||
// calendar, and the ledger while a budget review is open).
|
||
|
||
import { t, dateParts } from "../i18n/i18n.js";
|
||
import { dateOfDay } from "../engine/index.js";
|
||
import { $, dialSvg, setDial } from "./desk.js";
|
||
|
||
const VIEWS = ["tray", "brief", "news", "clock"];
|
||
|
||
export function createShelf(root, bal, { getView, onView, onSpeed, onMenu }) {
|
||
const speeds = [0, ...bal.time.speeds];
|
||
root.innerHTML = `
|
||
<div class="shelf__time">
|
||
${dialSvg("shelf__dial")}
|
||
<div class="shelf__date"><b></b><span></span></div>
|
||
<button class="brass shelf__speed" data-speed-cycle></button>
|
||
</div>
|
||
<div class="shelf__tabs" role="group" aria-label="${t("shelf.nav")}">
|
||
${VIEWS.map((v) => `<button class="shelf__tab" data-view="${v}"><span>${t("shelf." + v)}</span>${v === "tray" ? `<i class="shelf__badge" data-badge></i>` : ""}</button>`).join("")}
|
||
<button class="shelf__tab shelf__tab--ledger" data-view="ledger" hidden><span>${t("shelf.ledger")}</span></button>
|
||
<button class="shelf__tab shelf__tab--menu" data-menu><span>${t("shelf.menu")}</span></button>
|
||
</div>`;
|
||
|
||
const dial = $(root, ".shelf__dial");
|
||
let speed = 0;
|
||
|
||
root.addEventListener("click", (e) => {
|
||
const b = e.target.closest("button");
|
||
if (!b) return;
|
||
if (b.dataset.menu !== undefined) onMenu();
|
||
else if (b.dataset.speedCycle !== undefined) onSpeed(speeds[(speeds.indexOf(speed) + 1) % speeds.length]);
|
||
else if (b.dataset.view) onView(b.dataset.view);
|
||
});
|
||
|
||
function update(state) {
|
||
const d = dateParts(dateOfDay(state.startDate, state.day).iso);
|
||
$(root, ".shelf__date b").textContent = `${d.weekday} ${d.day} ${d.month}`;
|
||
$(root, ".shelf__date span").textContent = d.year;
|
||
speed = state.speed;
|
||
const sp = $(root, ".shelf__speed");
|
||
sp.textContent = speed === 0 ? "II" : `${speed}×`;
|
||
sp.setAttribute("aria-label", speed === 0 ? t("cal.pause") : t("cal.speed", { n: speed }));
|
||
|
||
const view = getView();
|
||
const ledger = Boolean(state.pending.review && !state.pending.profile && !state.over);
|
||
$(root, '[data-view="ledger"]').hidden = !ledger;
|
||
for (const b of root.querySelectorAll("[data-view]")) b.setAttribute("aria-pressed", String(b.dataset.view === view));
|
||
const badge = $(root, "[data-badge]");
|
||
badge.textContent = state.inbox.length || "";
|
||
badge.hidden = state.inbox.length === 0;
|
||
badge.classList.toggle("is-warn", state.inbox.length >= bal.cards.inboxMax - 2);
|
||
}
|
||
|
||
return { update, clockHand: (p) => setDial(dial, p) };
|
||
}
|