davideisinger.com

navigation.js (6370B)

---

 // Keep the header and its audio element attached while navigating HTML pages.
 (() => {
   const content = document.querySelector('#content');
   const status = document.querySelector('#navigation-status');
   if (!content || !status || !document.querySelector('#site-header')
       || !window.fetch || !window.AbortController) return;
 
   const stateKey = 'siteNavigation';
   let currentURL = new URL(location.href);
   let pending;
   let restoring = false;
   let scrollFrame;
 
   function saveScroll() {
     if (restoring) return;
     history.replaceState({ ...history.state, [stateKey]: { x: scrollX, y: scrollY } }, '');
   }
   saveScroll();
   history.scrollRestoration = 'manual';
   addEventListener('scroll', () => {
     cancelAnimationFrame(scrollFrame);
     scrollFrame = requestAnimationFrame(saveScroll);
   }, { passive: true });
   addEventListener('pagehide', saveScroll);
 
   function fragmentTarget(url) {
     if (!url.hash) return null;
     let id;
     try { id = decodeURIComponent(url.hash.slice(1)); } catch { return null; }
     return document.getElementById(id) || document.getElementsByName(id)[0];
   }
 
   function positionPage(url, savedScroll, focus) {
     const target = fragmentTarget(url);
     if (focus) {
       const element = target || content;
       if (!element.hasAttribute('tabindex')) {
         element.setAttribute('tabindex', '-1');
         element.addEventListener('blur', () => element.removeAttribute('tabindex'), { once: true });
       }
       element.focus({ preventScroll: true });
     }
     if (savedScroll) scrollTo(savedScroll.x, savedScroll.y);
     else if (target) target.scrollIntoView();
     else scrollTo(0, 0);
   }
 
   function assetSignature(doc) {
     return [...doc.head.querySelectorAll('link[rel="stylesheet"], script[src], style')]
       .map(node => node.outerHTML).join('\n');
   }
 
   async function navigate(url, { pop = false, savedScroll = null } = {}) {
     pending?.abort();
     const controller = new AbortController();
     pending = controller;
     cancelAnimationFrame(scrollFrame);
     if (!pop) saveScroll();
     restoring = true;
     content.setAttribute('aria-busy', 'true');
     status.textContent = 'Loading page…';
     const timeout = setTimeout(() => controller.abort('timeout'), 10000);
     try {
       const response = await fetch(url.href, {
         signal: controller.signal, headers: { Accept: 'text/html' },
       });
       if (!response.ok || !response.headers.get('content-type')?.includes('text/html')) {
         throw new Error('Use normal navigation for this response');
       }
       const destination = new URL(response.url);
       if (destination.origin !== location.origin) throw new Error('External redirect');
       destination.hash = url.hash;
       const next = new DOMParser().parseFromString(await response.text(), 'text/html');
       if (controller.signal.aborted) return;
       const nextContent = next.querySelector('#content');
       const nextFooter = next.querySelector('#site-footer');
       // Different assets or page-specific scripts need a real page load.
       if (!nextContent || !nextFooter || !next.querySelector('#site-header')
           || next.querySelector('base, #content script')
           || assetSignature(next) !== assetSignature(document)) {
         throw new Error('Incompatible page');
       }
       if (pop) history.replaceState(history.state, '', destination.href);
       else history.pushState({ [stateKey]: { x: 0, y: 0 } }, '', destination.href);
       currentURL = destination;
       content.replaceChildren(...nextContent.childNodes);
       document.dispatchEvent(new Event('site:navigated'));
       document.querySelector('#site-footer').replaceWith(nextFooter);
       document.title = next.title;
       document.body.className = next.body.className;
       // Update per-page metadata, including canonical links on republished posts.
       const metadata = 'meta[name="description"], meta[name="robots"], meta[property], link[rel="canonical"]';
       document.head.querySelectorAll(metadata).forEach(node => node.remove());
       next.head.querySelectorAll(metadata).forEach(node => document.head.append(node));
       positionPage(destination, savedScroll, true);
       status.textContent = `Loaded ${next.title}`;
     } catch (error) {
       if (pending !== controller) return;
       if (controller.signal.aborted && controller.signal.reason !== 'timeout') return;
       // Network failures, non-HTML responses, and new deployments fall back.
       if (pop) location.replace(url.href);
       else location.assign(url.href);
     } finally {
       clearTimeout(timeout);
       if (pending === controller) {
         pending = null;
         restoring = false;
         content.removeAttribute('aria-busy');
         if (status.textContent === 'Loading page…') status.textContent = '';
         saveScroll();
       }
     }
   }
 
   document.addEventListener('click', event => {
     const link = event.target.closest?.('a[href]');
     if (!link || event.defaultPrevented || event.button !== 0
         || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey
         || link.hasAttribute('download') || link.hasAttribute('data-no-navigation')
         || (link.target && link.target !== '_self')) return;
     const url = new URL(link.href);
     if (url.origin !== location.origin || !['http:', 'https:'].includes(url.protocol)) return;
     // Leave feeds, audio, images, and other files to the browser.
     if (/\.[^/]+$/.test(url.pathname) && !/\.html?$/.test(url.pathname)) return;
     if (url.pathname === currentURL.pathname && url.search === currentURL.search) {
       pending?.abort();
       saveScroll();
       if (!url.hash) {
         event.preventDefault();
         if (currentURL.hash) history.pushState({ [stateKey]: { x: 0, y: 0 } }, '', url.href);
         currentURL = url;
         positionPage(url, null, true);
       }
       return; // Native fragment navigation also preserves :target behavior.
     }
     event.preventDefault();
     navigate(url);
   });
 
   addEventListener('popstate', event => {
     const url = new URL(location.href);
     if (url.pathname === currentURL.pathname && url.search === currentURL.search) {
       pending?.abort();
       positionPage(url, event.state?.[stateKey], false);
       currentURL = url;
       return;
     }
     navigate(url, { pop: true, savedScroll: event.state?.[stateKey] });
   });
 
 })();