js/url-state.js — paieška URL'e

Kodo stulpelyje — js/url-state.js. Jis įrašo paiešką į URL: #/gallery?q=moon. Taip nuoroda „įsimena", ką matei, „Atgal" pereina per tavo paieškas, o perkrovimas neišmeta filtrų.

Galerijos maršrutas skaito parametrus atėjus, o paieškos laukas juos rašo:

// atėjus į galeriją — atkuriam iš URL:
const { q } = getParams();
if (q) { setSearchQuery(q); searchInput.value = q; }

// rašant — įrašom į URL:
searchInput.addEventListener('input', debounce((e) => {
  setSearchQuery(e.target.value.trim());
  setParams({ q: e.target.value.trim() });
}));

Du sprendimai čia — abu spąstai, jei padarysi ne taip.

Spąstai 1 (replaceState, ne location.hash =). setParams naudoja history.replaceState, kuris pakeičia dabartinį istorijos įrašą, o ne prideda naują:

history.replaceState(null, '', `#${path}?${query}`);   // ✅ pakeičia vietoje
// location.hash = ...                                  // ❌ prideda įrašą KAS raidę

Jei rašytum location.hash = ..., kiekvienas paieškos klavišas pridėtų naują istorijos įrašą. Įvedus „moon" — 4 įrašai. Vartotojas paspaudžia „Atgal" tikėdamasis grįžti į pradžią, o vietoj to „ištrina" po vieną raidę. „Atgal" tampa bevertis. replaceState tai išsprendžia: paieška keičia URL, bet neteršia istorijos.

Spąstai 2 (URLSearchParams, ne rankinis skaidymas). Užklausą (q=moon&days=30) niekada neskaidyk pats per split('&') ir split('='). Reikšmėse būna &, =, tarpai, unikodas — tavo skaidymas anksčiau ar vėliau sulūš. URLSearchParams viską koduoja/dekoduoja teisingai:

new URLSearchParams('q=deep%20space&days=30').get('q');   // "deep space"

Patikrink.

1. Galerijoje ieškai „moon" → URL virsta #/gallery?q=moon. Nukopijuok, atidaryk naujame skirtuke → galerija jau nufiltruota.
2. Naršai galeriją → nuotraukos detalę → paspaudi „Atgal" → grįžti į galeriją. Veikia pats.
3. Gilios nuorodos: #/apod/<data> atidaryta iš naujo → detalus vaizdas užsikrauna pats.

Toliau. Tu ką tik parašei maršrutizatorių rankomis — ir būtent todėl suprasi, ką už tave daro tikras (React Router, Vue Router): hash/history valdymą, parametrus, gilias nuorodas, „Atgal". Tai — Part 2 pabaiga: turi pilną, tikrą vanilla programą. Part 3 (15 pamoka) nukreipsim į ją TypeScript kompiliatorių — ir jis atras tikras klaidas, kurių nė nepastebėjom (pvz. detail.js pic.hdurl ir pic.copyright, kurie ne visada egzistuoja).

url-state.js SUKURTI

Sukurk šį failą kataloge js/

// Putting shareable state in the URL: #/gallery?q=moon&days=30
//
// Right now, if you search for "moon" and send someone the link, they see an
// unfiltered gallery — the search lives only in a JS variable and dies with the
// page. In the URL, a link captures exactly what you were looking at, the back
// button steps through your searches, and a refresh keeps your filters.
//
// URLSearchParams does the parsing for you — never split on "&" by hand.

/** Read the query part of the hash: "#/gallery?q=moon" → { q: "moon" } */
export function getParams() {
  const hash = window.location.hash.slice(1);
  const i = hash.indexOf('?');
  if (i === -1) return {};
  return Object.fromEntries(new URLSearchParams(hash.slice(i + 1)).entries());
}

/** Update the query WITHOUT adding a history entry. */
export function setParams(updates) {
  const hash = window.location.hash.slice(1);
  const i = hash.indexOf('?');
  const path = i === -1 ? hash : hash.slice(0, i);
  const params = new URLSearchParams(i === -1 ? '' : hash.slice(i + 1));

  for (const [key, value] of Object.entries(updates)) {
    if (value === '' || value == null) params.delete(key);   // empty → drop, keep URLs clean
    else params.set(key, String(value));
  }

  const query = params.toString();
  // replaceState, NOT `location.hash = ...` — otherwise every keystroke of a
  // search would push a new history entry and the back button would be useless.
  history.replaceState(null, '', `#${query ? `${path}?${query}` : path}`);
}

/** Strip the query — the router compares PATHS, not queries. */
export function getPath() {
  const hash = window.location.hash.slice(1) || '/';
  const i = hash.indexOf('?');
  return i === -1 ? hash : hash.slice(0, i);
}