js/router.js — maršrutų lentelė ir hashchange

Kodo stulpelyje — js/router.js. Trys dalys: lentelė (routes Map), parseRoute (hash → maršruto objektas) ir handleRoute (paleidžia atitinkamą funkciją).

parseRoute suskaido kelią ir grąžina maršrutą su parametrais:

if (parts[0] === 'apod' && parts[1]) return { name: 'detail', date: parts[1] };

#/apod/2026-07-11 → { name: 'detail', date: '2026-07-11' }. Data — maršruto parametras, ir būtent ji leidžia gilias nuorodas.

navigate(path) tik nustato location.hash — o tai savaime iššaukia hashchange. Nekviečiam handleRoute tiesiogiai; leidžiam įvykiui viską sujungti. Todėl ir nuoroda, ir „Atgal" veda per tą patį kelią.

Atkreipk dėmesį į kelio pasikeitimo apsaugą:

if (path === lastPath) return;     // ta pati vieta? nieko neperkraunam
lastPath = path;

Kam? Nes paieška rašo ?q=… į URL (kitas žingsnis), o tai irgi iššaukia hashchange. Bet kelias (/gallery) nesikeičia — tik užklausa. Be šios apsaugos kiekvienas paieškos klavišas iš naujo paleistų viso vaizdo perpiešimą ir „nušoktų" į viršų. Reaguojam tik į kelio pokyčius.

Maršrutai susiejami su vaizdais (kurie jau parašyti ankstesnėse pamokose):

onRoute('home', renderHome);
onRoute('gallery', () => { /* atkurk paiešką iš URL, tada */ renderGallery(); });
onRoute('detail', (route) => renderDetail(route));    // route.date → deep link

home.js (pradžios ekranas su statistika) ir detail.js (viena nuotrauka) — paskutiniai vaizdai, atsirandantys būtent čia, nes jų prasmė — būti maršrutais.

Patarimas. renderDetail(route) gaunа route.date. Jei nuotraukos dar nėra atmintyje (atėjai per gilią nuorodą), detail.js pats atsisiunčia ją (fetchPicture(date)), tada per addPicture → notify() persipiešia. Deep link „veikia iš niekur" — nes vaizdas moka užsikrauti pats.

router.js SUKURTI

Sukurk šį failą kataloge js/

// A hand-rolled router built on the URL hash.
//   #/                → home
//   #/gallery         → gallery
//   #/collection      → collection
//   #/apod/2026-07-11 → one picture (shareable, bookmarkable)
//
// `hashchange` fires on link clicks AND on browser back/forward, so the back
// button works for free — we never wire it up ourselves.

import { getPath } from './url-state.js';

const routes = new Map();
let notFoundHandler = () => {};
let lastPath = null;

export function onRoute(name, handler) { routes.set(name, handler); }
export function onNotFound(handler) { notFoundHandler = handler; }

/** Turn the current hash into a route object. Query params (?q=…) are stripped
 *  here — "#/gallery?q=moon" is still the gallery route. */
export function parseRoute() {
  const parts = getPath().split('/').filter(Boolean);
  if (parts.length === 0)                     return { name: 'home' };
  if (parts[0] === 'gallery')                 return { name: 'gallery' };
  if (parts[0] === 'collection')              return { name: 'collection' };
  if (parts[0] === 'apod' && parts[1])        return { name: 'detail', date: parts[1] };
  return { name: 'notfound' };
}

export function getCurrentRoute() { return parseRoute(); }

/** Go to a path — sets the hash, which fires hashchange, which runs the router. */
export function navigate(path) { window.location.hash = path; }

function handleRoute() {
  const route = parseRoute();
  const path = getPath();

  // Typing in the search box updates ?q=… → that fires hashchange too, but the
  // PATH is unchanged. Only re-run the handler (and scroll to top) on a real
  // path change, or every keystroke would reset the view.
  if (path === lastPath) return;
  lastPath = path;

  (routes.get(route.name) || notFoundHandler)(route);
  window.scrollTo(0, 0);
}

export function initRouter() {
  window.addEventListener('hashchange', handleRoute);
  handleRoute();          // handle whatever route we first landed on
}