js/shortcuts.js — vienas klausytojas visiems klavišams

Kodo stulpelyje — js/shortcuts.js. Tai idealus delegavimo pavyzdys: vienas klausytojas ant document aptarnauja visus klaviatūros klavišus. Nekabinam po klausytoją kiekvienam klavišui — leidžiam įvykiams suburbuliuoti iki document ir ten nusprendžiam, ką daryti.

Kaip veikia: register('g', () => navigate('/gallery')) įsimena klavišą; initShortcuts() klausosi keydown ant document ir, radęs atitikmenį, iškviečia veiksmą.

Du sprendimai čia svarbūs (ir abu — realaus UX klausimai):

Nevogti klavišų, kai vartotojas rašo. isTyping(e.target) patikrina, ar fokusas įvesties laukelyje. Jei taip — praleidžiam (kad / paieškos laukelyje įrašytų pasvirą brūkšnį, o ne atidarytų paiešką). Išimtis — Escape, kuris visada turi „išeiti".
Nesikauti su naršykle. Jei paspaustas Ctrl/Cmd/Alt — praleidžiam, kad neperimtume Ctrl+F, Cmd+R ir pan.

document.addEventListener('keydown', (e) => {
  if (isTyping(e.target)) { if (e.key === 'Escape') e.target.blur(); return; }
  if (e.metaKey || e.ctrlKey || e.altKey) return;
  const entry = shortcuts.get(e.key.toLowerCase());
  if (entry) { e.preventDefault(); entry.handler(e); }
});

Pastebėk e.preventDefault() — kai klavišas mūsų, sustabdom naršyklės numatytąjį veiksmą, kad, tarkim, / neatidarytų naršyklės paieškos.

Patarimas. Šis modelis — „vienas klausytojas, žemėlapis veiksmų" — kartojasi visur: klaviatūra, sąrašų paspaudimai, meniu. Užuot pridėję N klausytojų (ir juos valę), pridedi vieną prie tėvo. Mažiau kodo, mažiau nutekėjimų (memory leaks), veikia ir dinamiškai atsiradusiam turiniui.

shortcuts.js SUKURTI

Sukurk šį failą kataloge js/

// Keyboard shortcuts.
//
// Two things worth learning here:
//   1. A single listener on `document` handles every shortcut. You do NOT
//      add a listener per key — that's what event bubbling is for.
//   2. You must NOT hijack keys while the user is typing in a field.
//      Pressing "/" inside a textarea should type a slash, not open search.

const shortcuts = new Map();

/** register('/', () => searchInput.focus()) */
export function register(key, handler, description = '') {
  shortcuts.set(key.toLowerCase(), { handler, description });
}

export function getShortcuts() {
  return [...shortcuts.entries()].map(([key, { description }]) => ({ key, description }));
}

function isTyping(target) {
  const tag = target.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
}

export function initShortcuts() {
  document.addEventListener('keydown', (e) => {
    // Never steal keys from a form field...
    if (isTyping(e.target)) {
      // ...except Escape, which should always blur/close.
      if (e.key === 'Escape') e.target.blur();
      return;
    }

    // Don't fight the browser's own shortcuts (Ctrl+F, Cmd+R…)
    if (e.metaKey || e.ctrlKey || e.altKey) return;

    const entry = shortcuts.get(e.key.toLowerCase());
    if (entry) {
      e.preventDefault();
      entry.handler(e);
    }
  });
}