diff --git a/public/app.js b/public/app.js index 6b669d0..d035f69 100644 --- a/public/app.js +++ b/public/app.js @@ -72,7 +72,12 @@ function startApp() { document.querySelector('.container').style.display = ''; if (!appStarted) { setupEventListeners(); appStarted = true; } selectedScope = scopeFromHash(); - loadData(); + const model = modelFromHash(); // read now: drawing the page rewrites the address + loadData().then(() => { + if (!model) return; + if (findModel(model)) openModelDetail(model, { push: false }); + else syncAddress(); // gone, or in the trash: drop it from the address + }); } function showAuth(mode) { @@ -979,25 +984,38 @@ function setupEventListeners() { document.getElementById('addFilesInput').addEventListener('change', handleAddFiles); } -// The page you're on lives in the address — #filament, #collection/12 — so a -// refresh or a bookmark comes back to it, and Back and Forward move between pages. -function scopeHash(scope) { - if (scope === 'all') return ''; - return SPECIAL_SCOPES.includes(scope) ? `#${scope}` : `#collection/${scope}`; +// The page you're on lives in the address — #filament, #collection/12, and +// /model/34 on the end while a model is open — so a refresh or a bookmark comes +// back to it, and Back and Forward move between pages and models. +let shownModelId = null; // the model open in the detail view +let modelStepPushed = false; // opening it here added a Back step + +function scopeHash(scope, modelId = null) { + const page = scope === 'all' ? '' : SPECIAL_SCOPES.includes(scope) ? scope : `collection/${scope}`; + const parts = [page, modelId ? `model/${modelId}` : ''].filter(Boolean); + return parts.length ? `#${parts.join('/')}` : ''; +} + +function hashParts() { + const h = decodeURIComponent(location.hash.slice(1)); + const m = h.match(/^(.*?)\/?model\/(\d+)$/); + return { page: m ? m[1] : h, model: m ? Number(m[2]) : null }; } function scopeFromHash() { - const h = decodeURIComponent(location.hash.slice(1)); - const collection = h.match(/^collection\/(\d+)$/); + const { page } = hashParts(); + const collection = page.match(/^collection\/(\d+)$/); if (collection) return collection[1]; - return SPECIAL_SCOPES.includes(h) ? h : 'all'; + return SPECIAL_SCOPES.includes(page) ? page : 'all'; } -// Keeps the address in step with the page shown; `push` makes a Back step. +const modelFromHash = () => hashParts().model; + +// Keeps the address in step with what's shown; `push` makes a Back step. function syncAddress(push = false) { - const hash = scopeHash(String(selectedScope)); + const hash = scopeHash(String(selectedScope), shownModelId); if (location.hash === hash || (!hash && !location.hash)) return; - history[push ? 'pushState' : 'replaceState'](null, '', `${location.pathname}${location.search}${hash}`); + history[push ? 'pushState' : 'replaceState']({ model: shownModelId }, '', `${location.pathname}${location.search}${hash}`); } async function selectScope(scope, { push = true } = {}) { @@ -1010,7 +1028,14 @@ async function selectScope(scope, { push = true } = {}) { window.addEventListener('popstate', () => { if (!appStarted) return; const scope = scopeFromHash(); + const model = modelFromHash(); if (String(scope) !== String(selectedScope)) selectScope(scope, { push: false }); + if (model && model !== shownModelId) { + openModelDetail(model, { push: false }); + } else if (!model && shownModelId) { + modelStepPushed = false; // Back already took the step away + closeModal(fileDetailModal); + } }); // Tracks the file currently shown in the detail viewer (for thumbnail regen). @@ -1020,6 +1045,13 @@ let currentDetailThumb = null; // model image, used as a viewer fallback function closeModal(modal) { modal.classList.remove('active'); if (modal === slicerModal) pendingHandoff = null; + if (modal === fileDetailModal && shownModelId) { + shownModelId = null; + // Undo the step opening it added, so Back doesn't reopen what was just closed. + if (modelStepPushed && history.state && history.state.model) history.back(); + else syncAddress(); + modelStepPushed = false; + } if (modal === fileDetailModal) { hideSlicerNotice(); flushNotes(); @@ -1155,9 +1187,16 @@ function openImportModal() { importModal.classList.add('active'); } -function openModelDetail(modelId) { +function openModelDetail(modelId, { push = true } = {}) { const model = findModel(modelId); if (!model) return; + // Reopening the same model (to refresh it) leaves the address alone. + if (shownModelId !== Number(model.id)) { + const replacing = shownModelId !== null; // one model to the next: no extra Back step + shownModelId = Number(model.id); + syncAddress(push && !replacing); + if (push && !replacing) modelStepPushed = true; + } flushNotes(); // save any edit still pending for the previously open model fileDetailModal.dataset.currentModelId = modelId; currentDetailThumb = model.thumbnailUrl || null;