URL, History API ja popstate

CSS

HTML

Javascript

/* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat
   käsittelijät liitettäisiin toistamiseen. Elementti korvataan kopiollaan:
   kopio ei peri tapahtumankäsittelijöitä. */
const puhdista = function (elementti) {
  const kopio = elementti.cloneNode(true);
  elementti.replaceWith(kopio);
  return kopio;
};

/* Kehyksessä osoiteriviä ei näy, joten kyselyosa tulostetaan sivulle.
   Avaa esimerkki omana sivunaan, niin näet muutoksen myös osoiterivillä. */

const AUTOT = ["Polo", "Micra", "Corsa", "Kadett", "Fiesta", "Model S"];
const SIVUN_KOKO = 2;

const kentta = puhdista(document.getElementById("suodatin"));
const tulokset = document.getElementById("tulokset");
const osoiteNaytto = document.getElementById("osoite");
const sivunumero = document.getElementById("sivunumero");

/**
 * Päivittää näkymän. Tila luetaan OSOITTEESTA eikä muuttujista, joten
 * sama funktio kelpaa sivun latautumiseen, omaan muutokseen ja
 * paluunappiin. Näin osoite on yksi totuus näkymän tilasta.
 */
const paivita = function () {
  const p = new URL(window.location.href).searchParams;
  const suodatin = p.get("suodatin") ?? "";
  const sivu = Number(p.get("sivu") ?? 1);

kentta.value = suodatin;
  sivunumero.textContent = `sivu ${sivu}`;
  osoiteNaytto.textContent = window.location.search || "(tyhjä)";

const osuvat = AUTOT.filter(function (auto) {
    return auto.toLowerCase().includes(suodatin.toLowerCase());
  });

const alku = (sivu - 1) * SIVUN_KOKO;

tulokset.replaceChildren();

for (const auto of osuvat.slice(alku, alku + SIVUN_KOKO)) {
    const li = document.createElement("li");
    li.textContent = auto;
    tulokset.append(li);
  }

console.log("näkymä päivitetty:", { suodatin, sivu, osumia: osuvat.length });
};

/**
 * Kirjoittaa parametrin osoitteeseen.
 *
 * @param {string} nimi Parametrin nimi
 * @param {string} arvo Arvo; tyhjä poistaa parametrin
 * @param {boolean} uusiHistoriaan Tuleeko muutoksesta oma kohta historiaan
 */
const aseta = function (nimi, arvo, uusiHistoriaan) {
  const osoite = new URL(window.location.href);

if (arvo === "") {
    /* Tyhjää parametria ei kannata jättää osoitteeseen */
    osoite.searchParams.delete(nimi);
  }
  else {
    osoite.searchParams.set(nimi, arvo);
  }

/* Toinen parametri on jäänne eikä sillä ole vaikutusta */
  if (uusiHistoriaan) {
    history.pushState(null, "", osoite);
  }
  else {
    history.replaceState(null, "", osoite);
  }

paivita();
};

/* Hakukentän kirjoittaminen: replaceState. Muuten jokainen kirjain
   jättäisi historiaan oman kohdan ja paluunapin painelu kestäisi
   ikuisuuden. Viive karsii turhat päivitykset. */
let tunniste = null;

kentta.addEventListener("input", function (e) {
  clearTimeout(tunniste);
  const arvo = e.target.value;

tunniste = setTimeout(function () {
    aseta("suodatin", arvo, false);
  }, 300);
});

/* Sivun vaihtaminen: pushState. Tähän paluu on mielekästä. */
const siirra = function (askel) {
  const nyt = Number(new URL(window.location.href).searchParams.get("sivu") ?? 1);
  const uusi = Math.max(1, nyt + askel);

aseta("sivu", String(uusi), true);
};

puhdista(document.getElementById("seuraava"))
  .addEventListener("click", () => siirra(1));

puhdista(document.getElementById("edellinen"))
  .addEventListener("click", () => siirra(-1));

/* TÄMÄ ON SE OSA, JOKA JÄÄ TAVALLISESTI TEKEMÄTTÄ. Osoitteen vaihtaminen
   ei riitä: on myös kuunneltava selaimen paluunappia, tai osoite muuttuu
   eikä näkymä seuraa.

Huomaa, ettei pushState laukaise popstate-tapahtumaa. Se laukeaa vain
   käyttäjän liikkumisesta historiassa. */
window.addEventListener("popstate", function () {
  console.log("popstate: käyttäjä liikkui historiassa");
  paivita();
});

paivita();

Tila osoiterivillä

CSS

HTML

Javascript

Konsoli