components/media/media-grid.ts

Functions

Imports

It imports no other module of this repo. Imported by components/media/media.ts.

Source

1// The media grid's two-dimensional arrow keys.
2
3// ---------------------------------------------------------------------------------------
4// The grid's arrow keys, from the rendered boxes: the
5// browser decides the column count, and a second layout engine would disagree with it at the
6// widths nobody tested.
7
8export interface TileBox {
9  id: string;
10  top: number;
11  left: number;
12  width: number;
13}
14export interface Band {
15  top: number;
16  items: Array<{ id: string; mid: number }>;
17}
18export type Direction = "left" | "right" | "up" | "down" | "first" | "last" | "prev" | "next";
19
20// Visual rows: tiles within 6 px of one another share a row. A box with no width is not laid out.
21export function bands(boxes: Iterable<TileBox>): Band[] {
22  const out: Band[] = [];
23  for (const r of boxes) {
24    if (!r.width) continue;
25    const entry = { id: r.id, mid: r.left + r.width / 2 };
26    const band = out.find((b) => Math.abs(b.top - r.top) < 6);
27    if (band) band.items.push(entry);
28    else out.push({ top: r.top, items: [entry] });
29  }
30  out.sort((a, b) => a.top - b.top);
31  for (const b of out) b.items.sort((x, y) => x.mid - y.mid);
32  return out;
33}
34
35// The tile an arrow key moves to, or null to stay put. With nothing active, or an active id no
36// longer on the page, the first tile. Left and right wrap across rows in reading order; up and
37// down take the nearest tile by centre in the next row, and stop at the edges. First and last
38// are Home and End; prev and next step in reading order (the inspector's Alt+arrows).
39export function nextTile(rows: Band[], active: string, dir: Direction): string | null {
40  const flat = rows.flatMap((b) => b.items.map((i) => i.id));
41  const first = flat[0];
42  if (first === undefined) return null;
43  if (dir === "first") return first;
44  if (dir === "last") return flat[flat.length - 1] ?? null;
45  if (!active) return first;
46  const at = flat.indexOf(active);
47  if (at < 0) return first;
48  if (dir === "prev") return flat[at - 1] ?? null;
49  if (dir === "next") return flat[at + 1] ?? null;
50  let ri = -1;
51  let ci = -1;
52  rows.forEach((b, i) =>
53    b.items.forEach((it, j) => {
54      if (it.id === active) {
55        ri = i;
56        ci = j;
57      }
58    }),
59  );
60  const row = rows[ri];
61  const current = row?.items[ci];
62  if (!row || !current) return null;
63  if (dir === "left" || dir === "right") {
64    const next = row.items[ci + (dir === "right" ? 1 : -1)];
65    if (next) return next.id;
66    return flat[at + (dir === "right" ? 1 : -1)] ?? null;
67  }
68  const band = rows[ri + (dir === "down" ? 1 : -1)];
69  if (!band) return null;
70  let best = band.items[0];
71  let bestD = Infinity;
72  for (const it of band.items) {
73    const d = Math.abs(it.mid - current.mid);
74    if (d < bestD) {
75      bestD = d;
76      best = it;
77    }
78  }
79  return best?.id ?? null;
80}
81