components/permission-matrix/permission-matrix.ts

Functions

Imports

It imports no other module of this repo. Imported by components/permission-matrix/permission-matrix.react.tsx.

Source

1// The permission matrix's behaviour: the view switch (By agent, By permission), and the
2// pure helpers that turn a matrix into each view's sentences. No framework; the React
3// wrapper uses the same helpers.
4
5export type PermView = "agent" | "permission";
6
7export interface PermAgent {
8  name: string;
9  // The permissions this agent holds, by name.
10  holds: readonly string[];
11}
12
13export interface PermMatrix {
14  // The permissions, in the order the columns show them.
15  permissions: readonly string[];
16  agents: readonly PermAgent[];
17}
18
19export interface Holding {
20  agent: string;
21  held: string[];
22  text: string;
23}
24
25export interface Holders {
26  permission: string;
27  agents: string[];
28  text: string;
29}
30
31// One entry per agent: what it holds, in column order, and the card's sentence.
32export function holdings(m: PermMatrix): Holding[] {
33  return m.agents.map((a) => {
34    const held = m.permissions.filter((p) => a.holds.includes(p));
35    return { agent: a.name, held, text: held.length ? `Holds: ${held.join(", ")}` : "Holds no permissions" };
36  });
37}
38
39// One entry per permission: who holds it, in row order, and the card's sentence.
40export function holders(m: PermMatrix): Holders[] {
41  return m.permissions.map((p) => {
42    const agents = m.agents.filter((a) => a.holds.includes(p)).map((a) => a.name);
43    return { permission: p, agents, text: agents.length ? `Held by: ${agents.join(", ")}` : "Nobody holds this" };
44  });
45}
46
47// Shows one view of one matrix and hides the other with the hidden attribute, so the
48// hidden view leaves the accessibility tree too.
49export function showView(root: HTMLElement, view: PermView): void {
50  for (const el of root.querySelectorAll<HTMLElement>(".cap-perms-view[data-view]")) {
51    if (el.closest("[data-cap='permission-matrix']") !== root) continue;
52    el.hidden = el.dataset.view !== view;
53  }
54  root.dataset.current = view;
55}
56
57function isView(v: string): v is PermView {
58  return v === "agent" || v === "permission";
59}
60
61// Attaches to every [data-cap="permission-matrix"] under root that is not attached yet.
62// Returns a function that detaches them all.
63export function enhance(root: ParentNode = document): () => void {
64  const undo: Array<() => void> = [];
65  for (const matrix of root.querySelectorAll<HTMLElement>("[data-cap='permission-matrix']:not([data-cap-ready])")) {
66    matrix.dataset.capReady = "";
67    const checked = matrix.querySelector<HTMLInputElement>(".cap-perms-bar input[type='radio']:checked");
68    if (checked && isView(checked.value)) showView(matrix, checked.value);
69
70    const onChange = (e: Event) => {
71      const input = e.target as HTMLInputElement;
72      if (input.type !== "radio" || !input.closest(".cap-perms-bar") || !isView(input.value)) return;
73      showView(matrix, input.value);
74    };
75    matrix.addEventListener("change", onChange);
76    undo.push(() => {
77      matrix.removeEventListener("change", onChange);
78      delete matrix.dataset.capReady;
79    });
80  }
81  return () => undo.forEach((f) => f());
82}