Interaktyvi kortelė — stopPropagation spąstas

Dabar padarom kortelę interaktyvią. Kodo stulpelyje — atnaujintas js/components/card.js: prisideda createFavButton (♡ mygtukas) ir paspaudimas ant visos kortelės, kuris atidaro detalų vaizdą. Pastebėk: kortelė nežino, ką iš tikro reiškia „atidaryti" ar „išsaugoti" — kvietėjas paduoda apdorotojus (onOpen, onToggleFavorite). Tikra būsena ateis 8 pamokoje, tikras maršrutizatorius — 14; komponentui su callback'ais jų nereikia. Šiandien svarbu įvykių jungimas.

Čia ir slypi klasikinis burbuliavimo spąstas. Turim du paspaudimo taikinius, vienas kito viduje:

card.addEventListener('click', () => {
  if (onOpen) onOpen(pic);      // visa kortelė
});

btn.addEventListener('click', (e) => {
  e.stopPropagation();          // ← BE ŠITO ♡ paspaudimas ATIDARO ir detalų vaizdą
  if (onToggleFavorite) onToggleFavorite(pic);
});

Spąstai 1 (stopPropagation). Spusteli ♡. Įvykis suveikia ant mygtuko — bet burbuliuoja iki kortelės, tad suveikia ir kortelės klausytojas. Rezultatas: išsaugai nuotrauką IR atsidaro detalus vaizdas. Vartotojui atrodo, kad ♡ „meta" jį kitur. e.stopPropagation() sustabdo burbuliavimą — kortelės klausytojas nebesuveikia. Klaida tikra ir jos lengva nepastebėti, kol nespustelini būtent ♡.

Spąstai 2 (preventDefault). Formos (nustatymų, kontaktų — 11–12 pamokos) turi tą pačią problemą kitu pavidalu:

form.addEventListener('submit', (e) => {
  e.preventDefault();           // ← BE ŠITO puslapis PERSIKRAUNA ir viską praranda
  handleSubmit();
});

Numatytasis formos submit elgesys — nusiųsti duomenis ir perkrauti puslapį. Vieno puslapio programoje to nenorim niekada: perkrovus dingsta visa būsena. e.preventDefault() sustabdo naršyklės numatytąjį veiksmą, o duomenis tvarkom patys.

Patikrink. Prijunk kortelę su laikinais apdorotojais — createCard(pic, { onOpen: p => console.log('open', p.title), onToggleFavorite: p => console.log('fav', p.title) }) — tada:

1. Spusteli kortelę (ne ♡) → atsidaro detalus vaizdas (arba log'as).
2. Spusteli ♡ → tik išsaugo/pašalina; detalus vaizdas NEATSIDARO.
3. Užkomentuoji e.stopPropagation() → dabar ♡ daro ABU. Grąžini — sutvarkyta.

Spąstai (santrauka). stopPropagation sustabdo įvykio kelionę per DOM (vaikas → tėvas). preventDefault sustabdo naršyklės numatytąjį veiksmą (submit, nuoroda). Skirtingos problemos — nesukeisk jų vietomis.

card.js MODIFIKUOTI 39 eilutės pakeistos

Redaguok šį failą kataloge js/components/

// The picture card — now INTERACTIVE. Two click targets, one nested in the other:
// the whole card opens the detail view, and the ♡ button inside it saves the
// picture. That nesting is the classic bubbling trap this lesson is about.
//
// The card does NOT know what "open" or "save" actually do — the caller passes
// handlers IN (onOpen, onToggleFavorite). Real state arrives in lesson 8 and a
// real router in lesson 14; today's focus is the EVENT wiring.

import { formatDateHuman } from '../utils.js';

export function createCard(pic, { onOpen, onToggleFavorite } = {}) {
  const card = document.createElement('article');
  card.className = 'picture-card';

  const header = document.createElement('div');
  header.className = 'card-header';

  const img = document.createElement('img');
  img.src = pic.url;
  img.alt = pic.title;          // a real alt — screen readers read it, not decoration
  img.loading = 'lazy';         // native lazy-loading (more in lesson 5)
  header.appendChild(img);

  header.appendChild(createFavButton(pic, onToggleFavorite));   // the ♡, nested inside the card
  card.appendChild(header);

  const body = document.createElement('div');
  body.className = 'card-body';

  const title = document.createElement('h2');
  title.textContent = pic.title;     // textContent — NEVER innerHTML for API data
  body.appendChild(title);

  const date = document.createElement('p');
  date.className = 'picture-date';
  date.textContent = formatDateHuman(pic.date);
  body.appendChild(date);

  card.appendChild(body);

  // Clicking anywhere on the card opens the detail view...
  card.addEventListener('click', () => {
    if (onOpen) onOpen(pic);    // handlers are optional — the gallery may not wire them yet
  });

  return card;                   // caller decides where to put it
}

function createFavButton(pic, onToggleFavorite) {
  const btn = document.createElement('button');
  btn.className = 'fav-btn';
  btn.textContent = '♡';
  btn.title = 'Save to collection';
  btn.setAttribute('aria-label', btn.title);

  btn.addEventListener('click', (e) => {
    e.stopPropagation();          // ...but NOT when you click the ♡ inside it!

    // Flip the visual state. REAL persistence (favorites that survive a
    // reload) arrives with the state store in lessons 8–9.
    const saved = btn.classList.toggle('is-fav');
    btn.textContent = saved ? '♥' : '♡';
    btn.title = saved ? 'Remove from collection' : 'Save to collection';
    btn.setAttribute('aria-label', btn.title);

    if (onToggleFavorite) onToggleFavorite(pic);
  });

  return btn;
}