fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add section asks what shape, and creates one

Browse Source 
Pressing the button drawn inside the page opens a dialog: a name, and a choice between one column and
two, then Create section. The row lands in the database and the frame re-renders to show it.

The layouts are DRAWN rather than named. "One column" is words for a shape, and a shape is faster to
recognise than to read; the words stay underneath for anybody the picture does not reach.

The name is asked for and not generated. It never appears on the site — it exists so a page of eight
bands is navigable, and "Section 4" tells nobody anything, which is exactly the state a generated name
would leave every page in. Asked at the only moment somebody knows what they are about to build.

The frame is remounted after a write rather than the admin drawing the new band itself. The site
renders from the database; the admin does not know how to render a page, and if it learnt it would be
a second implementation of the very thing this preview exists to avoid.

The canvas now finds the empty-page placeholder by its `data-page-empty` marker instead of taking
`firstElementChild`. That was right for exactly as long as an empty page was the only kind — the moment
a page has a section, the first child IS that section, and it would have hidden the thing being edited.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-31 04:06:27 +01:00
co-authored by Claude Opus 5
parent 5af0d9d9d1
commit e2a74e3337
4 changed files with 181 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/canvas.ts
+10 -8
View File
@@ -58,15 +58,17 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
root.querySelectorAll(`[${MARK}]`).forEach((node) => node.remove());
/*
The page's own content is hidden rather than removed.
The site's EMPTY-PAGE placeholder, hidden while the builder draws its own controls in that space.
Removed, it would be gone until the frame reloaded — and the builder wants to put controls AROUND
what is there, not instead of it. Today the page is the empty placeholder and hiding it is the whole
effect; tomorrow, when a page has blocks, the same call leaves them visible and this hides nothing.
Found by its marker rather than by position. It was `firstElementChild`, which was right for exactly
as long as an empty page was the only page — the moment a page has a section, the first child IS
that section and hiding it would hide the thing being edited.
Hidden rather than removed, so the cleanup can simply put it back. A page whose last section is
deleted then shows it again without a reload.
*/
const placeholder = root.firstElementChild as HTMLElement | null;
const hadPlaceholder = Boolean(placeholder && !placeholder.hasAttribute(MARK));
if (hadPlaceholder && placeholder) placeholder.style.display = 'none';
const placeholder = root.querySelector<HTMLElement>('[data-page-empty]');
if (placeholder) placeholder.style.display = 'none';
const zone = document.createElement('div');
zone.setAttribute(MARK, 'add-section');
@@ -104,6 +106,6 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
return () => {
button.removeEventListener('click', canvas.onAddSection);
zone.remove();
if (hadPlaceholder && placeholder) placeholder.style.display = '';
if (placeholder) placeholder.style.display = '';
};
}