// ============ CONFIG ============ // Issue data is server-injected by the legacy shim (see lib/legacy-page.ts). // If __AXIOM_ISSUE__ is missing (legacy fallback or dev with no issue in // DB), fall back to the old mock layout so the page still renders. const ISSUE = window.__AXIOM_ISSUE__ || null; const TOTAL_PAGES_EN = ISSUE ? ISSUE.pageCount : 56; const FREE_PAGES = ISSUE ? ISSUE.freePages : 5; const ISSUE_SLUG = ISSUE ? ISSUE.slug : 'n01'; const ISSUE_ID = ISSUE ? ISSUE.id : null; const PUBLIC_BASE = ISSUE ? ISSUE.publicBase : ''; function pageUrl(n) { // Free pages: public R2 (CDN-cacheable, no auth round-trip). // Paywalled pages: through the API which validates the session and // 302-redirects to a short-lived presigned URL. if (ISSUE_ID && n <= FREE_PAGES) { const nn = String(n).padStart(3, '0'); return PUBLIC_BASE + '/issues/' + ISSUE_ID + '/pages/' + nn + '.jpg'; } if (ISSUE_ID) { return '/api/issue/' + ISSUE_SLUG + '/page/' + n; } // Legacy fallback (no issue injected) — keep the old asset path so // local dev / standalone preview still shows something. return 'assets/issue-01/pages/page-' + String(n).padStart(2, '0') + '.jpg'; } // Issue-meta line in the topbar: number + dateLabel from the DB. if (ISSUE) { const metaEl = document.getElementById('issueMeta'); if (metaEl) { const nn = 'N°' + String(ISSUE.number).padStart(2, '0'); metaEl.textContent = ISSUE.dateLabel ? (nn + ' · ' + ISSUE.dateLabel) : nn; } } const LANG = (window.AXIOM_I18N && window.AXIOM_I18N.getLang()) || 'en'; const t = (k, p) => (window.AXIOM_I18N ? window.AXIOM_I18N.t(k, p) : k); // Apply user font size preference (from settings) const fs = localStorage.getItem('axiom_font_size') || 'm'; const FS_MAP = { s:'0.94rem', m:'1.05rem', l:'1.18rem', xl:'1.3rem' }; document.documentElement.style.setProperty('--reader-fs', FS_MAP[fs] || FS_MAP.m); // ============ AUTH (mock) ============ function getSub(){ try { return JSON.parse(localStorage.getItem('axiom_subscription') || 'null'); } catch(e){ return null; } } const sub = getSub(); const isSubscriber = !!(sub && sub.active); const stage = document.getElementById('stage'); const pagesEl = document.getElementById('pages'); const curPageEl = document.getElementById('curPage'); const totPageEl = document.getElementById('totPage'); const statusPill= document.getElementById('statusPill'); const subscribeBtn = document.getElementById('subscribeBtn'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); // The magazine PDF is the canonical source — we always render the original // English page images. The interface still translates, but the magazine // content itself stays in its original typography until the publisher // supplies a French version. const pagesList = []; for (let i = 1; i <= TOTAL_PAGES_EN; i++) { pagesList.push({ kind: 'img', html: ` Page ${i}

P. ${String(i).padStart(2,'0')}

`, }); } const TOTAL_PAGES = pagesList.length; const lastPage = isSubscriber ? TOTAL_PAGES : Math.min(FREE_PAGES, TOTAL_PAGES); totPageEl.textContent = TOTAL_PAGES; if (isSubscriber){ const tail = (sub.email || '').replace(/(.{2}).*(@.*)/, '$1•••$2'); statusPill.textContent = t('reader.subscriber') + ' · ' + tail; statusPill.classList.add('sub'); } else { statusPill.textContent = t('reader.previewPages', { n: FREE_PAGES }); subscribeBtn.style.display = 'inline-block'; subscribeBtn.textContent = t('reader.subContinue'); } // ============ RENDER PAGES ============ const accessiblePages = []; for (let i = 1; i <= lastPage; i++){ const wrap = document.createElement('div'); wrap.className = 'page'; wrap.dataset.wm = sub ? (sub.email || 'AXIOM SUBSCRIBER') : 'AXIOM PREVIEW'; wrap.dataset.page = i; wrap.innerHTML = pagesList[i-1].html; pagesEl.appendChild(wrap); accessiblePages.push(wrap); } // ============ PAYWALL ============ if (!isSubscriber){ const paywall = document.createElement('div'); paywall.className = 'paywall'; paywall.id = 'paywall'; paywall.innerHTML = `

${t('reader.pagesRemain', { n: TOTAL_PAGES - FREE_PAGES })}

${t('reader.keepReadingLong')}

${t('reader.subTagline')}

${t('pricing.monthly')}

€9.90${t('pricing.perMonth')}

${t('pricing.firstYear')}. ${t('pricing.renewMonthly')}.

${t('pricing.chooseMonthly')}

${t('pricing.annual')} · -17%

€99${t('pricing.perYear')}

${t('pricing.firstYear')}. ${t('pricing.renewAnnual')}.

${t('pricing.chooseAnnual')}

`; pagesEl.appendChild(paywall); paywall.querySelectorAll('.plan').forEach(p => { p.addEventListener('click', () => { window.location.href = '/subscribe?plan=' + p.dataset.plan; }); }); document.getElementById('signInLink').addEventListener('click', (e) => { e.preventDefault(); // 2026-05-16 fix: the v1 mock (prompt() + localStorage.setItem) is // incompatible with v2 — the legacy shim ignores writes to // `axiom_subscription` because the server is the source of truth. // Redirect to the real magic-link signin instead, preserving the // current URL so the user returns here after auth. const ret = location.pathname + location.search; location.href = '/auth/signin?redirect=' + encodeURIComponent(ret); }); } // ============ NAVIGATION ============ let cur = 1; function scrollToPage(n){ const target = accessiblePages[n-1]; if (!target) return; cur = n; target.scrollIntoView({behavior:'smooth', block:'start'}); updateUI(); } function updateUI(){ curPageEl.textContent = cur; prevBtn.disabled = cur <= 1; nextBtn.disabled = cur >= lastPage; } prevBtn.addEventListener('click', () => scrollToPage(Math.max(1, cur-1))); nextBtn.addEventListener('click', () => { if (cur >= lastPage && !isSubscriber){ document.getElementById('paywall').scrollIntoView({behavior:'smooth'}); return; } scrollToPage(Math.min(lastPage, cur+1)); }); subscribeBtn.addEventListener('click', () => { document.getElementById('paywall')?.scrollIntoView({behavior:'smooth'}); }); // ============ FULLSCREEN ============ // Uses the browser Fullscreen API on documentElement, so the whole tab // takes over the screen (not just the reader stage). Toggles via the // button in the topbar and also via the `f` key. const fsBtn = document.getElementById('fsBtn'); function toggleFullscreen(){ const doc = document; const el = doc.documentElement; const enter = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen; const exit = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen || doc.msExitFullscreen; const active = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement; try { if (active) { exit && exit.call(doc); } else { enter && enter.call(el); } } catch (_) { /* user denied or unsupported — silent */ } } if (fsBtn) { fsBtn.addEventListener('click', toggleFullscreen); document.addEventListener('fullscreenchange', () => { const inFs = !!document.fullscreenElement; fsBtn.setAttribute('title', inFs ? 'Exit fullscreen' : 'Toggle fullscreen'); fsBtn.setAttribute('aria-label', inFs ? 'Exit fullscreen' : 'Toggle fullscreen'); }); } // Keyboard shortcut: `f` toggles fullscreen (ignored while typing in inputs) document.addEventListener('keydown', (e) => { if (e.key === 'f' || e.key === 'F') { const tag = (e.target && e.target.tagName) || ''; if (/^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return; e.preventDefault(); toggleFullscreen(); } }); // ============ SWIPE NAV (mobile / touchpad) ============ // Horizontal swipe → page navigation. Threshold + dominance check so we // don't hijack vertical scrolls (which are how readers move within a // single page). Passive listeners so the browser keeps scrolling smooth. (function () { let startX = 0, startY = 0, startT = 0, tracking = false; const THRESHOLD = 60; // px — minimum horizontal travel const DOMINANCE = 1.5; // |dx| must be > |dy| × DOMINANCE const MAX_DURATION = 600; // ms — anything slower isn't a swipe document.addEventListener('touchstart', (e) => { if (e.touches.length !== 1) { tracking = false; return; } // PASS 9: when the page is horizontally scrollable (mobile 2× mode), // native pan-x handles left/right gestures inside the page. Skip our // swipe-nav handler in that case to avoid double-action. const tgtPage = e.target.closest && e.target.closest('.page'); if (tgtPage && tgtPage.scrollWidth > tgtPage.clientWidth + 1) { tracking = false; return; } startX = e.touches[0].clientX; startY = e.touches[0].clientY; startT = Date.now(); tracking = true; }, { passive: true }); document.addEventListener('touchend', (e) => { if (!tracking) return; tracking = false; if (Date.now() - startT > MAX_DURATION) return; const t = e.changedTouches[0]; const dx = t.clientX - startX; const dy = t.clientY - startY; if (Math.abs(dx) < THRESHOLD) return; if (Math.abs(dx) < Math.abs(dy) * DOMINANCE) return; if (dx < 0) nextBtn.click(); else prevBtn.click(); }, { passive: true }); })(); // Track current page via scroll const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && e.intersectionRatio > 0.4){ cur = parseInt(e.target.dataset.page, 10); updateUI(); } }); // root=null → observe relative to the viewport, since the document // itself is now the scroll container (was `.stage` before the layout // refactor). }, {root:null, threshold:[0.4, 0.6]}); accessiblePages.forEach(p => io.observe(p)); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'PageDown') { e.preventDefault(); nextBtn.click(); } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); prevBtn.click(); } }); // Sign-out (hidden, via clicking the subscriber pill twice) let pillClicks = 0; statusPill.addEventListener('click', () => { if (!isSubscriber) return; pillClicks++; if (pillClicks >= 2){ if (confirm('Sign out of your AXIOM subscription?')){ localStorage.removeItem('axiom_subscription'); location.reload(); } } setTimeout(()=>pillClicks=0, 1200); }); // ============ ANTI-COPY (deterrent only) ============ // Block common save shortcuts document.addEventListener('keydown', (e) => { const k = e.key.toLowerCase(); if ((e.ctrlKey || e.metaKey) && ['s','p','u'].includes(k)){ e.preventDefault(); showToast('Saving and printing are disabled'); } }); function showToast(msg){ const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); clearTimeout(t._tm); t._tm = setTimeout(()=>t.classList.remove('show'), 2200); } updateUI();