app/lib/media/tile-nav.mjs

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/media-keyboard.tsx, app/routes/admin.media._index.tsx.

Source

1/**
2 * The media grid's arrow-key geometry, pure so it can be tested without a DOM. Rows come from
3 * rendered boxes, not a column model: the browser decides the column count, and a second layout
4 * engine would disagree with it at the widths nobody tested.
5 */
6
7/** @typedef {{ id: string, top: number, left: number, width: number }} TileBox */
8/** @typedef {{ top: number, items: Array<{ id: string, mid: number }> }} Band */
9/** @typedef {"left" | "right" | "up" | "down"} Direction */
10
11/**
12 * Visual rows, from the rendered boxes. Tiles within 6px share a row. A box with no width is not
13 * laid out (a hidden tile) and joins no row.
14 *
15 * @param {Iterable<TileBox>} boxes
16 * @returns {Band[]}
17 */
18export function bands(boxes) {
19  /** @type {Band[]} */
20  const out = [];
21  for (const r of boxes) {
22    if (!r.width) continue;
23    const entry = { id: r.id, mid: r.left + r.width / 2 };
24    const band = out.find((b) => Math.abs(b.top - r.top) < 6);
25    if (band) band.items.push(entry);
26    else out.push({ top: r.top, items: [entry] });
27  }
28  out.sort((a, b) => a.top - b.top);
29  for (const b of out) b.items.sort((x, y) => x.mid - y.mid);
30  return out;
31}
32
33/**
34 * The tile an arrow key moves to, or null to stay put. With nothing active, or an active id that is
35 * no longer on the page, the first tile. Left and right wrap across rows in reading order; up and
36 * down take the nearest tile by centre in the next row, and stop at the edges.
37 *
38 * @param {Band[]} rows
39 * @param {string} active
40 * @param {Direction} dir
41 * @returns {string | null}
42 */
43export function nextTile(rows, active, dir) {
44  const flat = rows.flatMap((b) => b.items.map((i) => i.id));
45  const firstId = flat[0];
46  if (firstId === undefined) return null;
47  if (!active) return firstId;
48
49  let ri = -1;
50  let ci = -1;
51  rows.forEach((b, i) =>
52    b.items.forEach((it, j) => {
53      if (it.id === active) {
54        ri = i;
55        ci = j;
56      }
57    }),
58  );
59  if (ri < 0) return firstId;
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    const k = flat.indexOf(active) + (dir === "right" ? 1 : -1);
67    return flat[k] || null;
68  }
69  const band = rows[ri + (dir === "down" ? 1 : -1)];
70  if (!band) return null;
71  const mid = current.mid;
72  let best = band.items[0];
73  if (!best) return null;
74  let bestD = Infinity;
75  for (const it of band.items) {
76    const d = Math.abs(it.mid - mid);
77    if (d < bestD) {
78      bestD = d;
79      best = it;
80    }
81  }
82  return best.id;
83}
84
85/**
86 * Which tile's controls are in the tab order: the one last focused, else the one the inspector is
87 * open on, else the first. One tile only, so Tab crosses the whole grid in that tile's few controls.
88 *
89 * @param {string[]} visible the keys on this page, in document order
90 * @param {string} active the tile focus was last on, or ""
91 * @param {string} inspected the key the inspector is open on, or ""
92 * @returns {string} the key, or "" on an empty page
93 */
94export function rovingKey(visible, active, inspected) {
95  if (active && visible.includes(active)) return active;
96  if (inspected && visible.includes(inspected)) return inspected;
97  return visible[0] ?? "";
98}