ackandClaude Fable 5.1
60ad747e32
The host's rights and the co-host are gone: anyone in a session may start a new page, put an image on the page, load a kept page, hide, expand and shrink, and move or remove images and Hides; the page left is kept in every notebook. Fit and Normal scale act on your own screen only. A session goes on without whoever started it, and a newcomer to an empty room starts page 1 with New. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
417 lines
16 KiB
JavaScript
417 lines
16 KiB
JavaScript
// @ts-check
|
||
/**
|
||
* The notebook chooser: the "Notebook" button's dialog, which shows the
|
||
* notebooks and the pages kept in them, and loads the chosen page.
|
||
*
|
||
* It also deletes (Andy, 2026-10-11): every notebook and every page card
|
||
* carries a mark at its left, a × that a tap turns into a tick (at the
|
||
* left, since a × at the top right means "delete" itself in many
|
||
* interfaces; a dot was tried and implied a generality that does not
|
||
* exist), and one "Delete"
|
||
* button in the header, which appears as soon as something is marked,
|
||
* says how much is marked and asks for a second press before anything
|
||
* goes, as the file chooser does for replacing a file; no system dialog.
|
||
* One gesture serves one page and twenty. Where the local program has
|
||
* a Trash the entries are moved there, and the button says so;
|
||
* in the browser they are gone for good, and the button says that. The
|
||
* notebook being written in cannot be marked: its mark explains.
|
||
* Everyone has the chooser (Andy, 2026-10-11), so that anyone can see
|
||
* and clear what their notebook holds, in a browser above all, and
|
||
* since 2026-10-18 anyone may load a page into the session from it.
|
||
*/
|
||
|
||
import {
|
||
currentPageChanged, discardNotebook, discardPage, listKeptPageDetails, listNotebooks, readPage,
|
||
} from './notebook.js';
|
||
import { pageFromSvg } from './page_file.js';
|
||
|
||
/** How much of a page's first text the card's tooltip shows. */
|
||
const FIRST_TEXT_CHARS = 60;
|
||
|
||
/**
|
||
* @param {string} id
|
||
* @returns {HTMLElement}
|
||
*/
|
||
function element(id) {
|
||
return /** @type {HTMLElement} */ (document.getElementById(id));
|
||
}
|
||
|
||
/**
|
||
* @param {string} pageName
|
||
* @returns {string} "2026_10_02_01.svg" shown as "2026-10-02 (1)".
|
||
*/
|
||
function pageTitle(pageName) {
|
||
const match = /^(\d{4})_(\d{2})_(\d{2})_(\d+)\.svg$/.exec(pageName);
|
||
return match ? `${match[1]}-${match[2]}-${match[3]} (${Number(match[4])})` : pageName;
|
||
}
|
||
|
||
/**
|
||
* @param {number} count
|
||
* @param {string} noun
|
||
* @returns {string} "1 page", "3 pages".
|
||
*/
|
||
function counted(count, noun) {
|
||
return `${count} ${noun}${count === 1 ? '' : 's'}`;
|
||
}
|
||
|
||
/**
|
||
* @param {number} time Milliseconds since the epoch.
|
||
* @returns {string} The day and the time of day, in the user's notation.
|
||
*/
|
||
function when(time) {
|
||
const date = new Date(time);
|
||
return `${date.toLocaleDateString()} at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
|
||
}
|
||
|
||
/**
|
||
* The facts about a kept page for its card's tooltip (Andy, 2026-10-11):
|
||
* the first text on it, if any, as a heading (the block nearest the
|
||
* top, then nearest the left: reading order), then when it was last
|
||
* changed, who wrote on it, what is on it, and the sheet's size.
|
||
* @param {string} text The page file.
|
||
* @param {number} changed When it was last written, in milliseconds.
|
||
* @returns {string}
|
||
*/
|
||
export function describePage(text, changed) {
|
||
const read = pageFromSvg(text);
|
||
if (!read) return 'Not a Kokkoja page.';
|
||
const { page } = read;
|
||
const lines = [];
|
||
/** @type {{x: number, y: number, text: string} | null} */
|
||
let first = null;
|
||
let strokes = 0;
|
||
let blocks = 0;
|
||
const writers = [];
|
||
for (const layer of page.layers.values()) {
|
||
if (layer.isEmpty()) continue;
|
||
writers.push(layer.name || 'Unnamed');
|
||
strokes += layer.strokes.size;
|
||
blocks += layer.texts.size;
|
||
for (const block of layer.texts.values()) {
|
||
if (!block.text.trim()) continue;
|
||
if (!first || block.y < first.y || (block.y === first.y && block.x < first.x)) first = block;
|
||
}
|
||
}
|
||
if (first) {
|
||
const heading = first.text.replace(/\s+/g, ' ').trim();
|
||
lines.push(heading.length > FIRST_TEXT_CHARS ? `${heading.slice(0, FIRST_TEXT_CHARS - 1)}…` : heading);
|
||
}
|
||
if (changed) lines.push(`Last changed ${when(changed)}`);
|
||
if (writers.length) lines.push(`Written by ${writers.join(', ')}`);
|
||
const contents = [];
|
||
if (page.images.length) contents.push(counted(page.images.length, 'image'));
|
||
if (strokes) contents.push(counted(strokes, 'stroke'));
|
||
if (blocks) contents.push(counted(blocks, 'text block'));
|
||
lines.push(contents.length ? contents.join(', ') : 'Nothing on it');
|
||
lines.push(`Sheet ${(page.baseWidth / 100).toFixed(1)} × ${(page.baseHeight / 100).toFixed(1)} cm`);
|
||
return lines.join('\n');
|
||
}
|
||
|
||
/**
|
||
* The facts about a notebook for its button's tooltip: how many pages
|
||
* are kept and from when to when, when it was last written in, and
|
||
* where it is.
|
||
* @param {string} notebook
|
||
* @param {string} directory Where the notebooks are, or '' in the browser.
|
||
* @returns {Promise<string>}
|
||
*/
|
||
async function describeNotebook(notebook, directory) {
|
||
const kept = await listKeptPageDetails(notebook);
|
||
const written = await currentPageChanged(notebook);
|
||
const lines = [];
|
||
if (kept.length) {
|
||
const days = kept.map((page) => pageTitle(page.name).slice(0, 10));
|
||
const span = days[0] === days[days.length - 1] ? `on ${days[0]}` : `from ${days[0]} to ${days[days.length - 1]}`;
|
||
lines.push(`${counted(kept.length, 'kept page')}, ${span}`);
|
||
} else {
|
||
lines.push('No kept pages');
|
||
}
|
||
if (written) lines.push(`Last written in ${when(written)}`);
|
||
lines.push(directory ? `In ${directory}/${notebook}` : 'Kept in this browser');
|
||
return lines.join('\n');
|
||
}
|
||
|
||
/**
|
||
* A mark button: × until marked, then ✓.
|
||
* @param {string} help The tooltip.
|
||
* @returns {HTMLButtonElement}
|
||
*/
|
||
function markButton(help) {
|
||
const mark = document.createElement('button');
|
||
mark.type = 'button';
|
||
mark.className = 'mark';
|
||
mark.textContent = '×';
|
||
mark.setAttribute('aria-label', 'Mark for deletion');
|
||
mark.setAttribute('aria-pressed', 'false');
|
||
mark.dataset.help = help;
|
||
return mark;
|
||
}
|
||
|
||
export class NotebookChooser {
|
||
/**
|
||
* @param {(notebook: string, pageName: string, text: string) => void} onChosen
|
||
* Called with the chosen page file.
|
||
* @param {() => void} [onDeleted] Called after notebooks or pages were
|
||
* deleted, for lists elsewhere that name them.
|
||
*/
|
||
constructor(onChosen, onDeleted = () => {}) {
|
||
this.onChosen = onChosen;
|
||
this.onDeleted = onDeleted;
|
||
this.dialog = /** @type {HTMLDialogElement} */ (element('notebook_chooser'));
|
||
this.notebook = '';
|
||
/** The notebook being written in, which cannot be deleted while it is. */
|
||
this.writing = '';
|
||
/** Whether this participant may load a page into the session. */
|
||
/** Whether deletions go to a Trash (the local program's) or are for good. */
|
||
this.trash = false;
|
||
/** Counts openings, so that pictures fetched for an earlier one are dropped. */
|
||
this.opening = 0;
|
||
/** @type {string[]} */
|
||
this.pictureAddresses = [];
|
||
/** @type {Set<string>} Notebooks marked for deletion. */
|
||
this.markedNotebooks = new Set();
|
||
/** @type {Map<string, Set<string>>} Pages marked for deletion, by notebook. */
|
||
this.markedPages = new Map();
|
||
/** Whether the Delete button has been pressed once and awaits its second press. */
|
||
this.armed = false;
|
||
|
||
element('chooser_close').addEventListener('click', () => this.dialog.close());
|
||
element('chooser_delete').addEventListener('click', () => { this.deleteMarked().catch(() => {}); });
|
||
this.dialog.addEventListener('close', () => {
|
||
this.forgetPictures();
|
||
this.clearMarks();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Show the notebooks, or the pages of the only notebook.
|
||
* @param {string} [notebook] Open on this notebook: the one being written in.
|
||
*/
|
||
async open(notebook) {
|
||
this.opening += 1;
|
||
this.writing = notebook ?? '';
|
||
this.clearMarks();
|
||
this.dialog.showModal();
|
||
element('chooser_message').textContent = '';
|
||
element('chooser_pages').replaceChildren(); // Nothing stale while the lists load.
|
||
try {
|
||
const { notebooks, trash, directory } = await listNotebooks();
|
||
this.trash = trash;
|
||
this.showNotebooks(notebooks, directory);
|
||
// The notebook being written in is chosen already, its pages shown;
|
||
// the list is always there to see (Andy, 2026-10-06).
|
||
const chosen = notebook && notebooks.includes(notebook) ? notebook
|
||
: notebooks.length === 1 ? notebooks[0] : '';
|
||
await this.showPages(chosen);
|
||
} catch (error) {
|
||
this.say(error instanceof Error ? error.message : String(error));
|
||
}
|
||
}
|
||
|
||
/** @param {string} text */
|
||
say(text) {
|
||
element('chooser_message').textContent = text;
|
||
}
|
||
|
||
/**
|
||
* @param {string[]} notebooks
|
||
* @param {string} [directory] Where the notebooks are, for their tooltips.
|
||
*/
|
||
showNotebooks(notebooks, directory = '') {
|
||
const list = element('chooser_notebooks');
|
||
list.replaceChildren();
|
||
for (const notebook of notebooks) {
|
||
const row = document.createElement('div');
|
||
row.className = 'notebook_row';
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
button.className = 'notebook_pick';
|
||
button.textContent = notebook;
|
||
button.dataset.help = `The notebook “${notebook}”.`;
|
||
describeNotebook(notebook, directory).then((facts) => {
|
||
if (button.isConnected) button.dataset.help = facts; // Not a list since replaced.
|
||
}).catch(() => {});
|
||
button.addEventListener('click', () => { this.showPages(notebook); });
|
||
const mark = markButton(notebook === this.writing
|
||
? 'This is the notebook you are writing in. To delete it, choose another notebook in the toolbar first.'
|
||
: 'Mark this notebook, with every page in it, for deletion. The Delete button above then deletes what is marked.');
|
||
if (notebook === this.writing) mark.classList.add('unavailable');
|
||
mark.addEventListener('click', () => {
|
||
if (notebook === this.writing) {
|
||
this.say('You are writing in this notebook. To delete it, choose another notebook in the toolbar first.');
|
||
return;
|
||
}
|
||
this.toggleMark(mark, this.markedNotebooks, notebook);
|
||
});
|
||
row.append(mark, button);
|
||
list.append(row);
|
||
}
|
||
this.showMarks();
|
||
}
|
||
|
||
/** @param {string} notebook */
|
||
async showPages(notebook) {
|
||
this.notebook = notebook;
|
||
this.disarm();
|
||
for (const button of element('chooser_notebooks').querySelectorAll('button.notebook_pick')) {
|
||
button.setAttribute('aria-pressed', String(button.textContent === notebook));
|
||
}
|
||
const grid = element('chooser_pages');
|
||
grid.replaceChildren();
|
||
this.forgetPictures();
|
||
if (!notebook) {
|
||
this.say('Choose a notebook.');
|
||
return;
|
||
}
|
||
const opening = this.opening += 1;
|
||
const pages = await listKeptPageDetails(notebook);
|
||
if (opening !== this.opening) return;
|
||
this.say(pages.length ? '' : 'This notebook has no kept pages.');
|
||
|
||
const marked = this.markedPages.get(notebook) ?? new Set();
|
||
/** @type {Map<string, {picture: HTMLImageElement, card: HTMLElement, changed: number}>} */
|
||
const pictures = new Map();
|
||
for (const { name: pageName, changed } of pages) {
|
||
const slot = document.createElement('div');
|
||
slot.className = 'page_slot';
|
||
const card = document.createElement('button');
|
||
card.type = 'button';
|
||
card.className = 'page_card';
|
||
const picture = document.createElement('img');
|
||
picture.alt = '';
|
||
pictures.set(pageName, { picture, card, changed });
|
||
card.dataset.help = `Kept as ${pageName}.`;
|
||
const title = document.createElement('span');
|
||
title.textContent = pageTitle(pageName);
|
||
card.append(picture, title);
|
||
card.addEventListener('click', async () => {
|
||
const text = await readPage(notebook, pageName);
|
||
if (text === null) return;
|
||
this.dialog.close();
|
||
this.onChosen(notebook, pageName, text);
|
||
});
|
||
const mark = markButton('Mark this page for deletion. The Delete button above then deletes what is marked.');
|
||
mark.addEventListener('click', () => { this.toggleMark(mark, marked, pageName); });
|
||
if (marked.has(pageName)) {
|
||
mark.textContent = '✓';
|
||
mark.setAttribute('aria-pressed', 'true');
|
||
slot.classList.add('marked');
|
||
}
|
||
slot.append(mark, card);
|
||
grid.append(slot);
|
||
}
|
||
this.markedPages.set(notebook, marked);
|
||
|
||
// The pictures are the page files themselves, fetched one by one; the
|
||
// same text gives the card's tooltip.
|
||
for (const [pageName, { picture, card, changed }] of pictures) {
|
||
const text = await readPage(notebook, pageName);
|
||
if (opening !== this.opening) return;
|
||
if (text === null) continue;
|
||
const address = URL.createObjectURL(new Blob([text], { type: 'image/svg+xml' }));
|
||
this.pictureAddresses.push(address);
|
||
picture.src = address;
|
||
card.dataset.help = describePage(text, changed);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Mark or unmark one entry.
|
||
* @param {HTMLButtonElement} mark
|
||
* @param {Set<string>} marked The set the entry belongs in.
|
||
* @param {string} name
|
||
*/
|
||
toggleMark(mark, marked, name) {
|
||
const now = !marked.has(name);
|
||
if (now) marked.add(name); else marked.delete(name);
|
||
mark.textContent = now ? '✓' : '×';
|
||
mark.setAttribute('aria-pressed', String(now));
|
||
/** @type {HTMLElement} */ (mark.parentElement).classList.toggle('marked', now);
|
||
this.disarm();
|
||
this.showMarks();
|
||
}
|
||
|
||
/** @returns {{notebooks: number, pages: number}} What is marked, a marked notebook's pages not counted. */
|
||
countMarks() {
|
||
let pages = 0;
|
||
for (const [notebook, names] of this.markedPages) {
|
||
if (!this.markedNotebooks.has(notebook)) pages += names.size;
|
||
}
|
||
return { notebooks: this.markedNotebooks.size, pages };
|
||
}
|
||
|
||
/** @returns {string} "1 notebook and 3 pages", or '' when nothing is marked. */
|
||
describeMarks() {
|
||
const { notebooks, pages } = this.countMarks();
|
||
const parts = [];
|
||
if (notebooks) parts.push(counted(notebooks, 'notebook'));
|
||
if (pages) parts.push(counted(pages, 'page'));
|
||
return parts.join(' and ');
|
||
}
|
||
|
||
/** The Delete button says what is marked, or is hidden when nothing is. */
|
||
showMarks() {
|
||
const button = element('chooser_delete');
|
||
const what = this.describeMarks();
|
||
button.hidden = !what;
|
||
if (!what) return;
|
||
button.textContent = this.armed
|
||
? (this.trash ? `Press again to move ${what} to the Trash`
|
||
: `Press again to delete ${what} for good`)
|
||
: `Delete ${what}?`;
|
||
}
|
||
|
||
/** The second press is no longer awaited: something else happened. */
|
||
disarm() {
|
||
if (!this.armed) return;
|
||
this.armed = false;
|
||
this.showMarks();
|
||
}
|
||
|
||
clearMarks() {
|
||
this.markedNotebooks.clear();
|
||
this.markedPages.clear();
|
||
this.armed = false;
|
||
element('chooser_delete').hidden = true;
|
||
}
|
||
|
||
/** The Delete button: arm on the first press, delete on the second. */
|
||
async deleteMarked() {
|
||
if (!this.armed) {
|
||
this.armed = true;
|
||
this.showMarks();
|
||
return;
|
||
}
|
||
const what = this.describeMarks();
|
||
const notebooks = [...this.markedNotebooks];
|
||
const pages = [...this.markedPages].filter(([notebook]) => !this.markedNotebooks.has(notebook));
|
||
this.clearMarks();
|
||
let failed = '';
|
||
try {
|
||
for (const notebook of notebooks) await discardNotebook(notebook);
|
||
for (const [notebook, names] of pages) {
|
||
for (const name of names) await discardPage(notebook, name);
|
||
}
|
||
} catch (error) {
|
||
failed = error instanceof Error ? error.message : String(error);
|
||
}
|
||
this.onDeleted();
|
||
try {
|
||
const listed = await listNotebooks();
|
||
this.showNotebooks(listed.notebooks);
|
||
await this.showPages(listed.notebooks.includes(this.notebook) ? this.notebook : '');
|
||
} catch (error) {
|
||
this.say(error instanceof Error ? error.message : String(error));
|
||
return;
|
||
}
|
||
const sentence = what.charAt(0).toUpperCase() + what.slice(1);
|
||
this.say(failed ? `Deleting stopped: ${failed}`
|
||
: this.trash ? `${sentence} moved to the Trash.` : `${sentence} deleted.`);
|
||
}
|
||
|
||
forgetPictures() {
|
||
for (const address of this.pictureAddresses) URL.revokeObjectURL(address);
|
||
this.pictureAddresses = [];
|
||
}
|
||
}
|