`;
+ document.body.append(box);
+
+ const button = box.querySelector('.toolkit-button');
+ const panel = box.querySelector('.toolkit-panel');
+ const setOpen = (open, focus) => {
+ panel.hidden = !open;
+ button.setAttribute('aria-expanded', String(open));
+ if (!open && focus) button.focus();
+ };
+ button.addEventListener('click', () => setOpen(panel.hidden));
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !panel.hidden) setOpen(false, true); });
+ document.addEventListener('click', (e) => { if (!panel.hidden && !box.contains(e.target)) setOpen(false); });
+ panel.addEventListener('click', (e) => { if (e.target.closest('.toolkit-links a')) setOpen(false); });
+ };
+
// "13 min 42 s" / "13 分 42 秒", from the page's own data-unit-min / data-unit-s, else English.
const duration = (seconds, el) => {
const min = el.dataset.unitMin || 'min';
@@ -270,18 +329,20 @@
const start = () => {
const header = document.querySelector('[data-interimm-header]');
const footer = document.querySelector('[data-interimm-footer]');
- if (!header && !footer) { initThemeToggle(); initMenu(); startSignal(); return; }
+ if (!header && !footer) { initToolkit(); initThemeToggle(); initMenu(); startSignal(); return; }
const host = header || footer;
const lang = host.dataset.lang || (document.documentElement.lang.toLowerCase().startsWith('zh') ? 'cn' : 'en');
+ let navData = null;
fetch(new URL(`nav.${lang}.json`, base))
.then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); })
.then((nav) => {
+ navData = nav;
if (header) header.innerHTML = renderHeader(header, nav, header.dataset.current);
if (footer) footer.innerHTML = renderFooter(nav);
})
.catch(() => { /* keep the page's own fallback markup */ })
- .finally(() => { initThemeToggle(); initMenu(); startSignal(); });
+ .finally(() => { initToolkit(navData); initThemeToggle(); initMenu(); startSignal(); });
};
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
diff --git a/kit/README.md b/kit/README.md
index 1d1bb84..a87134c 100644
--- a/kit/README.md
+++ b/kit/README.md
@@ -64,6 +64,18 @@ The header's language link (中文 / English) goes to the interimm.org home page
that has its own page in another language says where it is with `data-lang-cn` or `data-lang-en` on the header,
for example `data-lang-cn="https://cities.interimm.org/?lang=cn"`, and the link goes there instead.
+### Toolkit button
+
+For pages that are mostly reading, put `data-toolkit` on the header (usually with `data-no-signal`). interimm.js then
+adds a small round button at the bottom right. It opens a panel with the live signal readings, the light/dark
+switch and the language links. To add a list of links to the panel (a chapter list, say), put them in any element
+marked `data-toolkit-links`, hidden if you like, and set `data-toolkit-title` for its heading:
+
+```html
+...
+
+```
+
### Light and dark
Every page follows the visitor's system setting, and the header has a switch (moon / sun) to pick light or dark