// Tools layer for the Museum of Forgotten Moments.
// A folder tab on the RIGHT edge, sitting directly below the INDEX tab, opens a
// "workshop" drawer of curator tools. The first tool is a ZINE GENERATOR:
// it imposes the live collection onto ONE A4 sheet that, printed single-sided,
// folds & cuts into an 8-page mini-zine — 1 front cover, 6 interior pages
// (each holding two horizontal photos or one vertical photo), and 1 back cover.
// The top row of the sheet is rotated 180° so every panel reads upright once
// the sheet is folded the classic single-cut way.
const { useState: useToolState, useMemo: useToolMemo, useEffect: useToolEffect, useRef: useToolRef } = React;
const ZINE_DRAWER_W = 460;
// ─── small helpers ───
function escZ(s) {
return String(s == null ? '' : s)
.replace(/&/g, '&').replace(//g, '>')
.replace(/"/g, '"');
}
function padZ(n) { return String(n).padStart(2, '0'); }
function absSrc(s) { try { return new URL(s, document.baseURI).href; } catch (e) { return s; } }
const ZINE_MONTHS = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE',
'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'];
function zineRatio(aspect) {
const parts = String(aspect || '3:2').split(':').map(Number);
if (parts.length !== 2 || !parts[1]) return 1.5;
return parts[0] / parts[1];
}
function isVerticalWork(w) { return zineRatio(w.aspect) < 0.98; }
// ─── zine counters (persist across sessions) ───
// · personal — how many zines THIS device has exported; drives the cover N°.
// · community total lives server-side (see MU.getZineTotal / bumpZineTotal).
const ZINE_MINE_KEY = 'mu_zine_mine_v1';
function readMine() {
const n = parseInt(localStorage.getItem(ZINE_MINE_KEY) || '0', 10);
return (isNaN(n) || n < 0) ? 0 : n;
}
// ─── Folder-tab on the right edge, below INDEX ───
function ToolsTab({ theme, open, onClick }) {
const t = window.THEMES[theme];
const mobile = window.useIsMobile ? window.useIsMobile() : false;
return (
);
}
// ─── Tools drawer — slides in from the right; lists available tools ───
function ToolsDrawer({ open, onClose, theme, onOpenZine }) {
const t = window.THEMES[theme];
useToolEffect(() => {
function onKey(e) { if (e.key === 'Escape') onClose(); }
if (open) document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [open, onClose]);
const toolBtn = {
display: 'flex', flexDirection: 'column', gap: 8,
width: '100%', textAlign: 'left',
padding: '20px 20px',
background: 'transparent',
color: t.fg,
border: `1px solid ${t.rule}`,
cursor: 'pointer',
fontFamily: 'inherit',
transition: 'background 160ms, color 160ms',
};
return (
<>
);
}
// ─────────────────────────────────────────────────────────────────────
// ZINE IMPOSITION
// One A4 sheet, LANDSCAPE: 297 × 210 mm → 1123 × 794 px @ 96dpi.
// Divided into a 4-column × 2-row grid; each panel is 1/8 of the sheet
// (≈ 74 × 105 mm, portrait). Printed single-sided and folded the classic
// single-cut way, the panels assemble into an 8-page booklet. The TOP ROW is
// rotated 180° so it reads upright in the finished zine.
//
// Booklet order → sheet position (F & B adjacent first, then interior 1–6):
// bottom row L→R : FRONT · BACK · page1 · page2
// top row L→R : page3 · page4 · page5 · page6 (rotated 180°)
// ─────────────────────────────────────────────────────────────────────
const SHEET_W = 1123, SHEET_H = 794;
const CELL_W = SHEET_W / 4; // 280.75
const CELL_H = SHEET_H / 2; // 397
// Six interior pages, each an array of placed work ids (manual drag-drop).
const EMPTY_PLACEMENT = [[], [], [], [], [], []];
const EMPTY_OPTS = {};
const ZINE_PANELS = [
// bottom row (upright) — F, B, then interior 1 & 2
{ r: 1, c: 0, rotate: false, kind: 'front' }, // F
{ r: 1, c: 1, rotate: false, kind: 'back' }, // B
{ r: 1, c: 2, rotate: false, kind: 'content', page: 0 }, // 1
{ r: 1, c: 3, rotate: false, kind: 'content', page: 1 }, // 2
// top row (rotated 180°) — interior 3–6
{ r: 0, c: 0, rotate: true, kind: 'content', page: 2 }, // 3
{ r: 0, c: 1, rotate: true, kind: 'content', page: 3 }, // 4
{ r: 0, c: 2, rotate: true, kind: 'content', page: 4 }, // 5
{ r: 0, c: 3, rotate: true, kind: 'content', page: 5 }, // 6
];
function paperFor(paper) {
// Reuse the museum's own light / dark tokens as paper stocks.
if (paper === 'ink') return window.THEMES.dark;
if (paper === 'blank') {
// Pure-white stock: prints a solid white ground so coloured paper won't tint it.
return { ...window.THEMES.light, bg: '#ffffff', matte: '#f1f0ea' };
}
return window.THEMES.light; // cream
}
// Distribute selected works across the 6 interior pages.
// · a vertical photo fills a page on its own
// · horizontal photos pair two-up
function paginateWorks(works) {
const pages = [];
let i = 0;
while (i < works.length && pages.length < 6) {
const w = works[i];
if (isVerticalWork(w)) { pages.push([w]); i++; }
else {
const grp = [w]; i++;
if (i < works.length && !isVerticalWork(works[i])) { grp.push(works[i]); i++; }
pages.push(grp);
}
}
const placed = pages.reduce((n, g) => n + g.length, 0);
while (pages.length < 6) pages.push([]);
return { pages, placed };
}
// ─── panel content (fills a 280 × 397 cell) ───
function frontPanel(p, info) {
return `
EST. 2024${escZ(info.issue)}
PHOTOGRAPH ZINE
${escZ(info.siteTitle)}
${escZ(info.author)}
${escZ(info.issue)}${escZ(info.date)}
`;
}
// Fallback contact details for the zine back cover — used only until the
// site's ABOUT page has its own contact links. The back cover otherwise mirrors
// the ABOUT page (see aboutToZineContact + the `about` prop threaded into the tool).
const ZINE_CONTACT = {
email: 'STUDIO@ACOZGUNES.COM',
instagram: '@A.C.OZGUNES',
web: 'ACOZGUNES.COM',
location: 'İZMIR · TR',
};
// Derive the zine back-cover contact from the ABOUT page data
// ({ statement, links:[{label,value,kind}] }). Contact-type links (email/link)
// become the credit lines; the first free-text link becomes the location note.
// Returns null when ABOUT has no usable links, so callers fall back to ZINE_CONTACT.
function aboutToZineContact(about) {
const links = (about && Array.isArray(about.links))
? about.links.filter(l => l && (l.value || '').trim()) : [];
if (!links.length) return null;
const contactLinks = links.filter(l => l.kind === 'email' || l.kind === 'link');
const textLinks = links.filter(l => l.kind === 'text');
let creditsLines = contactLinks.map(l => l.value.trim());
let location = textLinks.length ? textLinks[0].value.trim() : '';
if (!creditsLines.length) { creditsLines = links.map(l => l.value.trim()); location = ''; }
return { creditsLines, creditsText: creditsLines.join('\n'), location };
}
function backPanel(p, info) {
const c = info.contact || {};
const lines = (c.creditsLines && c.creditsLines.length)
? c.creditsLines : [ZINE_CONTACT.email, ZINE_CONTACT.instagram, ZINE_CONTACT.web];
const location = (c.location != null && c.location !== '') ? c.location : ZINE_CONTACT.location;
return `
);
}
// ─── Editable — a contentEditable text node bound to a field. Initialises its
// text once on mount and never overwrites the DOM while typing, so the caret is
// preserved; the parent keys it per item+field to re-init when selection changes.
function Editable({ value, multiline, style, onInput, placeholder }) {
const ref = useToolRef(null);
useToolEffect(() => {
if (ref.current && ref.current.innerText !== (value || '')) ref.current.innerText = value || '';
// eslint-disable-next-line
}, []);
return (
e.stopPropagation()}
onInput={(e) => onInput(e.currentTarget.innerText)}
style={{ outline: 'none', cursor: 'text', whiteSpace: multiline ? 'pre-wrap' : 'pre', wordBreak: 'break-word', ...style }}
/>
);
}
// React render of a designed template with each field directly editable on the
// page. Mirrors templateInnerHTML's layout (which still drives the A4 / print).
function TemplateEditView({ it, p, onField }) {
p = p || TEXT_PAPER;
const f = it.f || {};
const E = (k, style, multiline, ph) => (
onField(k, v)} style={style} />
);
const base = { position: 'absolute', inset: 0, color: p.fg, fontFamily: "'JetBrains Mono', monospace" };
if (it.tpl === 'front') {
return (
✎{tpl ? `EDITING · ${(TEMPLATES[active.tpl] || {}).label || ''}` : 'EDITING · PLAIN TEXT'} CLICK ANY LINE ON THE PAGE TO TYPE.
{tpl ? 'TEMPLATE' : 'PLAIN TEXT'}
{!tpl && (
<>
{variants.map(([v, l]) => )}
{sizes.map(([v, l]) => )}
{aligns.map((aa) => (
))}
)}
);
}
// ─── Zine Generator — renders INLINE in place of the photo viewing area ───
function ZineOverlay({ theme, collection, photographerName, siteName, onClose, inline, indexOpen, onRequestIndex, placement, setPlacement, imgOpts, setImgOpts, cornerInfo, setCornerInfo, about, myOwn, tapPlace }) {
const t = window.THEMES[theme];
const mobile = window.useIsMobile ? window.useIsMobile() : false;
const today = useToolMemo(() => {
const d = new Date();
return `${ZINE_MONTHS[d.getMonth()]} ${d.getFullYear()}`;
}, []);
// Back-cover contact mirrors the site's ABOUT page (falls back to ZINE_CONTACT).
const aboutContact = useToolMemo(() => aboutToZineContact(about), [about]);
const [mine, setMine] = useToolState(readMine);
const issueNo = mine + 1;
const [zineTotal, setZineTotal] = useToolState(null);
const [archiveTotal, setArchiveTotal] = useToolState(null);
useToolEffect(() => {
let alive = true;
if (window.MU && window.MU.getZineTotals) {
window.MU.getZineTotals().then((v) => {
if (!alive) return;
setZineTotal(v.total); setArchiveTotal(v.archive);
}).catch(() => {});
}
return () => { alive = false; };
}, []);
const [paper, setPaper] = useToolState('blank');
const [view, setView] = useToolState('pages'); // 'pages' (edit) | 'sheet' (preview)
const [dragOverPage, setDragOverPage] = useToolState(null);
const [sel, setSel] = useToolState(0); // editor selection: 'F' | 0..5 | 'B'
const [textMode, setTextMode] = useToolState(false);
const [editId, setEditId] = useToolState(null); // text item being edited
// In "my own" mode pages 1–8 are all plain content pages (the maker builds
// their own covers with the text editor + templates). Reset selection on toggle.
useToolEffect(() => { setSel(0); setEditId(null); }, [myOwn]);
// Auto-fill: every time the archive zine opens, seed the six interior pages
// with one randomly-chosen series from the collection (grouped by the primary
// series key — text before the first "·"). Runs once per open; the maker can
// then rearrange, swap, or clear from there. Skipped in "my own" mode, which
// is built from the maker's own uploaded images.
const didAutoFill = useToolRef(false);
useToolEffect(() => {
if (myOwn || didAutoFill.current) return;
didAutoFill.current = true;
if (!collection || !collection.length) return;
const groups = {};
collection.forEach(w => {
const key = String(w.series || 'Untitled').split('·')[0].trim();
(groups[key] = groups[key] || []).push(w);
});
const keys = Object.keys(groups);
if (!keys.length) return;
const pick = keys[Math.floor(Math.random() * keys.length)];
const { pages: grouped } = paginateWorks(groups[pick]);
setPlacement(grouped.map(g => g.map(w => ({ k: 'img', id: w.id }))));
}, []);
const issueLabel = 'N°' + padZ(issueNo);
// Resolve placed ids → live work objects.
const byId = useToolMemo(() => {
const m = {}; collection.forEach(w => { m[w.id] = w; }); return m;
}, [collection]);
const placeArr = placement || EMPTY_PLACEMENT;
const optMap = imgOpts || EMPTY_OPTS;
const pages = useToolMemo(
() => placeArr.map(items => items.map(it => {
if (it.k === 'txt') return it;
const w = byId[it.id];
if (!w) return null;
return { k: 'img', ...w, _rot: (optMap[it.id] && optMap[it.id].rot) || 0, _fit: (optMap[it.id] && optMap[it.id].fit) || 'cover' };
}).filter(Boolean)),
[placeArr, byId, optMap]
);
const placed = useToolMemo(() => pages.reduce((n, g) => n + g.length, 0), [pages]);
const activeItem = (typeof sel === 'number') ? ((pages[sel] || []).find(it => it.k === 'txt' && it.id === editId) || null) : null;
// Drop a work onto a page. A page holds up to two items (images or text).
const placeWork = (pageIdx, workId) => {
if (!byId[workId]) return;
setPlacement(prev => {
const base = (prev || EMPTY_PLACEMENT).map(a => a.filter(it => it.id !== workId)); // de-dupe images globally
const cur = base[pageIdx];
const item = { k: 'img', id: workId };
if (cur.length === 0) base[pageIdx] = [item];
else if (cur.length === 1) base[pageIdx] = [cur[0], item]; // pair two-up
else base[pageIdx] = [item]; // already full → reset
return base;
});
};
const removeWork = (pageIdx, itemId) => {
setPlacement(prev => (prev || EMPTY_PLACEMENT).map((a, i) => i === pageIdx ? a.filter(it => it.id !== itemId) : a));
};
const createText = (pageIdx, preset) => {
const id = 't' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
const meta = { siteTitle: siteName, author: photographerName, issue: issueLabel, date: today, contact: aboutContact };
let draft, fullPage = false;
if (preset.tpl) {
draft = { tpl: preset.tpl, f: TEMPLATES[preset.tpl].seed(meta), rot: 0 };
fullPage = true; // designed templates occupy the whole page
} else {
draft = { text: 'Text', variant: 'title', size: 'm', align: 'mc', rot: 0 };
}
setPlacement(prev => {
const base = (prev || EMPTY_PLACEMENT).map(a => a.slice());
const item = { k: 'txt', id, ...draft };
const cur = base[pageIdx];
base[pageIdx] = fullPage ? [item] : (cur.length >= 2 ? [item] : [...cur, item]);
return base;
});
setEditId(id);
};
const updateText = (pageIdx, itemId, patch) => {
setPlacement(prev => (prev || EMPTY_PLACEMENT).map((a, i) => i === pageIdx ? a.map(it => it.id === itemId ? { ...it, ...patch } : it) : a));
};
const clearAll = () => setPlacement(prev => (prev || EMPTY_PLACEMENT).map(() => []));
const rotateWork = (workId) => {
if (!setImgOpts) return;
setImgOpts(prev => { const m = prev || {}; const o = m[workId] || {}; return { ...m, [workId]: { ...o, rot: o.rot === 90 ? 0 : 90 } }; });
};
const toggleFit = (workId) => {
if (!setImgOpts) return;
setImgOpts(prev => { const m = prev || {}; const o = m[workId] || {}; return { ...m, [workId]: { ...o, fit: o.fit === 'contain' ? 'cover' : 'contain' } }; });
};
// Touch tap-to-place: when the host bumps tapPlace.n, drop that work onto the
// currently-selected page (covers fall back to the first interior page).
const lastTapRef = useToolRef(0);
useToolEffect(() => {
if (!tapPlace || !tapPlace.id || tapPlace.n === lastTapRef.current) return;
lastTapRef.current = tapPlace.n;
const target = (typeof sel === 'number') ? sel : 0;
if (typeof sel !== 'number') setSel(0);
placeWork(target, tapPlace.id);
}, [tapPlace && tapPlace.n]);
const zineMark = myOwn ? '' : 'M·F·M';
const opts = { siteName, byline: photographerName, issue: issueLabel, date: today, paper, count: placed, cornerInfo, contact: aboutContact, myOwn, mark: zineMark };
const info = { siteTitle: siteName, author: photographerName, issue: issueLabel, date: today, count: placed, contact: aboutContact, myOwn, mark: zineMark };
const sheetHTML = useToolMemo(
() => buildZineSheet(opts, pages, (s) => s, true),
[pages, paper, issueLabel, today, placed, siteName, photographerName, cornerInfo, aboutContact, myOwn]
);
useToolEffect(() => {
function onKey(e) { if (e.key === 'Escape') onClose(); }
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [onClose]);
const handlePrint = () => {
if (placed === 0) return;
printZine(opts, pages);
const nextMine = mine + 1;
localStorage.setItem(ZINE_MINE_KEY, String(nextMine));
setMine(nextMine);
const isArchive = !myOwn; // built from the owner's archive photos
if (window.MU && window.MU.bumpZineTotals) {
window.MU.bumpZineTotals(isArchive).then((v) => {
setZineTotal(v.total); setArchiveTotal(v.archive);
}).catch(() => {});
} else {
setZineTotal((n) => (n == null ? null : n + 1));
if (isArchive) setArchiveTotal((n) => (n == null ? null : n + 1));
}
};
const labelStyle = { fontSize: 9, letterSpacing: '0.2em', color: t.veryMuted, marginBottom: 7, display: 'block' };
const seg = (active) => ({
flex: 1, padding: '8px 6px', fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.12em',
background: active ? t.fg : 'transparent', color: active ? t.bg : t.fg,
border: 'none', cursor: 'pointer', transition: 'background 140ms, color 140ms',
});
const segWrap = { display: 'flex', border: `1px solid ${t.rule}` };
const segBtn = { flex: 'none', width: mobile ? 78 : 104, padding: '7px 0', textAlign: 'center' };
const canPrint = placed > 0;
const vw = window.useViewportWidth ? window.useViewportWidth() : 1280;
// On mobile the A4 sheet is landscape, so we rotate the preview 90° to fill the
// narrow screen: scale to fit SHEET_H (the post-rotation visual width).
const SHEET_S = mobile ? Math.min(0.62, (vw - 36) / SHEET_H) : 0.6; // imposed-sheet preview scale
const EDIT_S = mobile ? Math.min(1.05, (vw - 40) / CELL_W) : 1.05; // single editable page scale
const sheetBoxW = mobile ? SHEET_H * SHEET_S : SHEET_W * SHEET_S;
const sheetBoxH = mobile ? SHEET_W * SHEET_S : SHEET_H * SHEET_S;
const outerStyle = inline
? {
flex: '1 0 auto',
background: t.bg,
display: 'flex', flexDirection: 'column',
overflowY: 'auto',
paddingRight: (indexOpen && !mobile) ? 460 : 0,
fontFamily: '"JetBrains Mono", monospace',
transition: 'padding 360ms cubic-bezier(.2,.8,.2,1)',
}
: {
position: 'fixed', inset: 0, zIndex: 60,
background: theme === 'dark' ? 'rgba(8,8,6,0.92)' : 'rgba(232,230,223,0.94)',
backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
overflowY: 'auto', padding: '40px 24px',
fontFamily: '"JetBrains Mono", monospace',
};
return (
{/* header — actions live here so the panel has no bottom bar (keeps height compact, no page resize) */}
WORKSHOP · TOOL 01
ZINE GENERATOR
{!mobile && (
{canPrint ? `1 A4 SHEET · ${issueLabel} · OPENS PRINT DIALOG — “SAVE AS PDF”` : (myOwn ? 'YOUR IMAGES · UPLOAD VIA INDEX → MY OWN, THEN DRAG ONTO A PAGE' : 'DRAG WORKS ONTO A PAGE TO BEGIN')}
)}
{/* single column — preview fills the width; controls live in the toolbar + bottom bar */}
{view === 'sheet' ? (
<>
ONE A4, SINGLE-SIDED · TOP ROW PRINTS INVERTED BY DESIGN
FOLD INTO EIGHTHS · CUT THE CENTRE SLIT · FOLD INTO A BOOKLET
) : (
{/* text editor column */}
{textMode && (
{ if (typeof sel === 'number') createText(sel, pr); }}
onUpdate={(patch) => { if (typeof sel === 'number' && editId) updateText(sel, editId, patch); }}
onRemove={() => { if (typeof sel === 'number' && editId) { removeWork(sel, editId); setEditId(null); } }}
cornerInfo={cornerInfo} setCornerInfo={setCornerInfo} />
)}
{pages[sel].length === 0 ? (mobile ? 'TAP THE PAGE TO PICK AN IMAGE' : 'DROP A WORK HERE') : (mobile ? 'TAP AN IMAGE’S ↻ / FILL / × TO EDIT' : 'HOVER AN IMAGE TO ROTATE · FILL / FIT · REMOVE')}
{myOwn ? 'EVERY PAGE IS YOURS · ADD TITLES & CONTACT WITH + TEXT, DRAG YOUR IMAGES FROM THE INDEX.' : 'COVERS ARE AUTOMATIC · ISSUE NUMBER ADVANCES ON EACH PRINT / EXPORT.'}
PAGES · {padZ(placed)} PLACED
{placed > 0 && (
)}
DRAG WORKS FROM THE INDEX ONTO A PAGE. UP TO TWO IMAGES PER PAGE.
);
}
// ─── Tools layer — tab + drawer; the zine now renders inline in the page,
// so opening it is delegated to the host (MuseumLanding) via onOpenZine. ───
function ToolsLayer({ theme, open, onToggle, onClose, onOpenZine }) {
return (
<>
);
}
window.ToolsLayer = ToolsLayer;
window.ZineOverlay = ZineOverlay;