https://www.iana.org/static/js/dtable.46ee921d4414.js

1// Progressive enhancement for the shared .dtable table component.
2//
3// Reads the per-column narrow-screen behaviour declared on each
4// <th data-stack="primary|merge|hide"> and stamps every body cell in that
5// column with the matching class (and, for labelled columns, a data-label
6// taken from the header). Once a table is processed it gets
7// .dtable--stack-ready, which is what unlocks the stacked-card layout in the
8// stylesheet's narrow-screen media query.
9//
10// This is purely additive: if this script never runs, a .dtable--stack table
11// keeps its default behaviour and simply scrolls horizontally on narrow
12// screens. Nothing here is required for a table to be usable.
13(function () {
14    "use strict";
15
16    var CLASS = {
17        primary: "dtable__cell--primary",
18        merge: "dtable__cell--merge",
19        hide: "dtable__cell--hide",
20        label: "dtable__cell--label"
21    };
22
23    function columnMeta(table) {
24        var headRow = table.tHead && table.tHead.rows[0];
25        if (!headRow) return null;
26        var meta = [];
27        for (var i = 0; i < headRow.cells.length; i++) {
28            var th = headRow.cells[i];
29            var kind = th.getAttribute("data-stack") || "label";
30            if (!CLASS[kind]) kind = "label";
31            meta.push({
32                kind: kind,
33                label: (th.getAttribute("data-stack-label") || th.textContent || "").trim()
34            });
35        }
36        return meta;
37    }
38
39    function stampTable(table) {
40        var meta = columnMeta(table);
41        if (!meta) return;
42        for (var b = 0; b < table.tBodies.length; b++) {
43            var rows = table.tBodies[b].rows;
44            for (var r = 0; r < rows.length; r++) {
45                var row = rows[r];
46                if (row.classList.contains("dtable__group")) continue;
47                for (var c = 0; c < row.cells.length && c < meta.length; c++) {
48                    var cell = row.cells[c];
49                    var col = meta[c];
50                    cell.classList.add(CLASS[col.kind]);
51                    // Labelled columns need the header text for the "Label: value"
52                    // prefix; don't clobber a data-label the template set itself.
53                    if (col.kind === "label" && !cell.hasAttribute("data-label")) {
54                        cell.setAttribute("data-label", col.label);
55                    }
56                }
57            }
58        }
59        table.classList.add("dtable--stack-ready");
60    }
61
62    function enhance() {
63        var tables = document.querySelectorAll("table.dtable--stack");
64        for (var i = 0; i < tables.length; i++) {
65            stampTable(tables[i]);
66        }
67    }
68
69    if (document.readyState === "loading") {
70        document.addEventListener("DOMContentLoaded", enhance);
71    } else {
72        enhance();
73    }
74})();