|
1 |
+ |
// Folding a branch of an outline, which is the reader tidying their own view.
|
|
2 |
+ |
//
|
|
3 |
+ |
// `Row::depth` and `Row::open` describe a hierarchy as a flat list of rows,
|
|
4 |
+ |
// each saying how deep it sits. Which rows a shut branch hides falls out of
|
|
5 |
+ |
// that reading, and the renderer already did it once: every row is in the
|
|
6 |
+ |
// document and the ones under a shut branch arrived `hidden`. What is left is
|
|
7 |
+ |
// the gesture, and the gesture is a browser's.
|
|
8 |
+ |
//
|
|
9 |
+ |
// Nothing here asks the app anything. Folding changes what the reader is
|
|
10 |
+ |
// looking at and nothing anyone else can observe -- see `Row::open` for why
|
|
11 |
+ |
// that is not a write -- so a round trip would be a request for rows the page
|
|
12 |
+ |
// is already holding.
|
|
13 |
+ |
//
|
|
14 |
+ |
// It reads two hooks the renderer emits and nothing else: `[data-disclose]` on
|
|
15 |
+ |
// a branch's chevron, and `data-depth` on the rows. A page that never runs this
|
|
16 |
+ |
// keeps the outline in the shape the description gave it, with every row still
|
|
17 |
+ |
// reachable -- the shut branches simply stay shut.
|
|
18 |
+ |
(() => {
|
|
19 |
+ |
"use strict";
|
|
20 |
+ |
|
|
21 |
+ |
const DISCLOSE = "[data-disclose]";
|
|
22 |
+ |
const ROW = "[data-row]";
|
|
23 |
+ |
|
|
24 |
+ |
/** How deep a row sits. Absent means top level, which is what it means. */
|
|
25 |
+ |
const depth = (row) => Number(row.getAttribute("data-depth") ?? 0);
|
|
26 |
+ |
|
|
27 |
+ |
/** The row a chevron belongs to. */
|
|
28 |
+ |
const rowOf = (el) => el.closest(ROW);
|
|
29 |
+ |
|
|
30 |
+ |
/**
|
|
31 |
+ |
* The rows under `row`: the ones after it that are deeper, up to the first
|
|
32 |
+ |
* one no deeper than it.
|
|
33 |
+ |
*
|
|
34 |
+ |
* The same reading `quasi_router::folded` makes on the other side, and it
|
|
35 |
+ |
* has to be: a reader who folds a branch here and reloads the page must see
|
|
36 |
+ |
* the list the server would have folded.
|
|
37 |
+ |
*/
|
|
38 |
+ |
const under = (row) => {
|
|
39 |
+ |
const rows = [...row.parentElement.querySelectorAll(`:scope > ${ROW}`)];
|
|
40 |
+ |
const start = rows.indexOf(row);
|
|
41 |
+ |
const level = depth(row);
|
|
42 |
+ |
const kin = [];
|
|
43 |
+ |
for (const next of rows.slice(start + 1)) {
|
|
44 |
+ |
if (depth(next) <= level) break;
|
|
45 |
+ |
kin.push(next);
|
|
46 |
+ |
}
|
|
47 |
+ |
return kin;
|
|
48 |
+ |
};
|
|
49 |
+ |
|
|
50 |
+ |
/**
|
|
51 |
+ |
* Draw the outline under `row` as its chevrons say it should be.
|
|
52 |
+ |
*
|
|
53 |
+ |
* Walked rather than toggled row by row: a branch inside a shut branch
|
|
54 |
+ |
* keeps its own state and stays shut when the outer one opens, which is
|
|
55 |
+ |
* what a reader who left it shut expects to come back to. `folded` is the
|
|
56 |
+ |
* same one-variable walk the Rust side makes.
|
|
57 |
+ |
*/
|
|
58 |
+ |
const settle = (row) => {
|
|
59 |
+ |
let shut = null;
|
|
60 |
+ |
for (const next of under(row)) {
|
|
61 |
+ |
const level = depth(next);
|
|
62 |
+ |
if (shut !== null && level <= shut) shut = null;
|
|
63 |
+ |
const hidden = shut !== null;
|
|
64 |
+ |
next.hidden = hidden;
|
|
65 |
+ |
const chevron = next.querySelector(DISCLOSE);
|
|
66 |
+ |
if (!hidden && chevron?.getAttribute("aria-expanded") === "false") {
|
|
67 |
+ |
shut = level;
|
|
68 |
+ |
}
|
|
69 |
+ |
}
|
|
70 |
+ |
};
|
|
71 |
+ |
|
|
72 |
+ |
document.addEventListener("click", (event) => {
|
|
73 |
+ |
const chevron = event.target.closest(DISCLOSE);
|
|
74 |
+ |
if (!chevron) return;
|
|
75 |
+ |
const row = rowOf(chevron);
|
|
76 |
+ |
if (!row) return;
|
|
77 |
+ |
// Never the row's own act. A chevron is a separate hit target from the
|
|
78 |
+ |
// label precisely so that pressing it is not pressing the row, and a
|
|
79 |
+ |
// row that activates on click would otherwise navigate underneath the
|
|
80 |
+ |
// fold.
|
|
81 |
+ |
event.preventDefault();
|
|
82 |
+ |
event.stopPropagation();
|
|
83 |
+ |
const open = chevron.getAttribute("aria-expanded") === "true";
|
|
84 |
+ |
chevron.setAttribute("aria-expanded", String(!open));
|
|
85 |
+ |
chevron.setAttribute("aria-label", open ? "Expand" : "Collapse");
|
|
86 |
+ |
settle(row);
|
|
87 |
+ |
});
|
|
88 |
+ |
})();
|