(() => { var MIN = 3, MAX = 40; // The width a board is a laptop's: Tailwind's xl, 80rem (rulings Batches 40 and 43). var LAPTOP = '(min-width: 80rem)'; function boards() { return [].slice.call(document.querySelectorAll('table[data-board]')) .filter(function (t) { return t.querySelector('colgroup col[data-col-key]'); }); } // The board's own fields, as the columns menu posts them. Every column is named, so the server sees a complete // layout rather than a diff it has to merge — and the board is named too, so the write lands on THIS board's // per-account row and no other. A table with no data-board is not a persisted board; the server validates the // empty board away rather than guessing. function fields(table, order, weights) { var cols = [].slice.call(table.querySelectorAll('colgroup col[data-col-key]')); var out = [['back', location.pathname + location.search], ['board', table.getAttribute('data-board') || '']]; order.forEach(function (key, i) { out.push(['o_' + key, i + 1]); out.push(['w_' + key, weights[key] != null ? weights[key] : Number( cols.filter(function (c) { return c.getAttribute('data-col-key') === key; })[0] .getAttribute('data-weight'))]); // Everything drawn is visible by definition — hiding belongs to the menu. A column the board's width does not // draw (Business unit below 1440, `wideOnly`, rulings Batch 48 #1) is not on screen, so it saves hidden: the // layout saved is the board as it was shown. var th = table.querySelector('thead th[data-col="' + key + '"]'); if (!th || th.getClientRects().length) out.push(['v_' + key, 'on']); }); return out; } // Post the fields the way the menu does, and let the server draw the board again. function commit(table, order, weights) { var f = document.createElement('form'); f.method = 'post'; f.action = '/api/columns'; f.style.display = 'none'; fields(table, order, weights).forEach(function (kv) { var i = document.createElement('input'); i.type = 'hidden'; i.name = kv[0]; i.value = String(kv[1]); f.appendChild(i); }); document.body.appendChild(f); f.submit(); } // ⚠ THE SAME FIELDS TO THE SAME ROUTE, IN THE BACKGROUND — Zach, 2026-10-20 (euOMdxombJue): *"would that stop the // reloading of the table everytime we resize it?"* The board on screen is already the one saved, so nothing is // drawn again; the server's whitelist and clamp still decide what is kept. A post that fails falls back to the // form, which reloads, so a width is never silently lost. `data-layout-saved` says it landed. function save(table, order, weights) { var fd = new FormData(); fields(table, order, weights).forEach(function (kv) { fd.append(kv[0], String(kv[1])); }); fetch('/api/columns', { method: 'POST', body: fd, redirect: 'manual', credentials: 'same-origin' }) .then(function (r) { if (r.type !== 'opaqueredirect' && !r.ok) throw new Error('HTTP ' + r.status); Object.keys(weights).forEach(function (key) { var c = table.querySelector('colgroup col[data-col-key="' + key + '"]'); if (c) c.setAttribute('data-weight', String(weights[key])); }); table.setAttribute('data-layout-saved', String(Date.now())); }) .catch(function () { commit(table, order, weights); }); } // The board's columns as drawn: each column's weight, pixels and floor (DataTable's `data-floor`), in order; a column // the page drew in front of the board's own (`data-col-fixed`) is among them, since it takes its share of the width. function shownCols(table) { return [].slice.call(table.querySelectorAll('colgroup col[data-col-key]')).map(function (c) { var k = c.getAttribute('data-col-key'); var th = table.querySelector('thead th[data-col="' + k + '"]'); return { col: c, key: k, th: th, fixed: !!th && th.hasAttribute('data-col-fixed'), w: Number(c.getAttribute('data-weight')) || 0, px: th ? th.getBoundingClientRect().width : 0, floor: Number(c.getAttribute('data-floor')) || 24, // The width the server drew, put back exactly when a press comes to nothing: blanking it re-laid the whole // board between the two clicks of a double-click, and the second landed on a sort link (DC-1, 2026-10-20). drawnWidth: c.style.width }; }).filter(function (d) { return d.th && d.th.getClientRects().length; }); } // The natural width of everything a column draws, its head included: each cell's content laid out on one line, as // wide as it wants (a hidden copy inside the cell, so it takes the cell's own font), plus the cell's padding. function widest(table, key) { var th = table.querySelector('thead th[data-col="' + key + '"]'); if (!th) return 0; var cells = [th].concat([].slice.call(table.querySelectorAll('tbody td[data-col-cell="' + key + '"]'))); var most = 0; cells.forEach(function (cell) { var probe = document.createElement('div'); probe.setAttribute('aria-hidden', 'true'); probe.style.cssText = 'position:absolute;left:0;top:0;visibility:hidden;width:max-content;white-space:nowrap;'; for (var n = cell.firstChild; n; n = n.nextSibling) { // The gripper is the head's own control, not its content. if (n.nodeType === 1 && n.hasAttribute('data-col-resize')) continue; probe.appendChild(n.cloneNode(true)); } cell.appendChild(probe); var cs = getComputedStyle(cell); var w = probe.getBoundingClientRect().width + parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); cell.removeChild(probe); if (w > most) most = w; }); return Math.ceil(most) + 2; } function keysOf(table) { return [].slice.call(table.querySelectorAll('colgroup col[data-col-key]')) .map(function (c) { return c.getAttribute('data-col-key'); }); } function enhance(table) { var heads = [].slice.call(table.querySelectorAll('thead th[data-col]')); if (!heads.length) return; table.setAttribute('data-draggable-columns', String(heads.length)); heads.forEach(function (th, index) { // A column the page draws in front of the board's own (`Col.fixed`) is not in its layout: no resize, no move. if (th.hasAttribute('data-col-fixed')) return; // ---- the resize gripper: DataTable draws it, this only binds it ---- // It straddles the right edge, 12px wide, so the zone is centred on the // line a person aims at (see DataTable). The reorder handler below // ignores [data-col-resize], so the gripper takes precedence for free. // // ⚠ THE EDGE FOLLOWS THE POINTER AND THE LEFT SIDE HOLDS STILL — Zach, 2026-10-20 (euOMdxombJue): *"when i click // to move this one it moves the other side of the border … currently the field next to it looks larger in the // preview, and then you have to wait for the table to reset with the updated size"*. The preview used to set one // column's share and let the browser spread the rest: dragging Grade's edge 80px moved its OTHER edge 24px left // and left the edge itself 32px behind the pointer (measured). Now every column left of the edge keeps its pixels, // the dragged one meets the pointer, and the columns to its right give or take in proportion, so the table keeps // its width. On release the weights that draw exactly that are saved in the background (`save`), with no // reload, as long as every column stays at its floor; a board that swipes (`data-min-w`), or a drag that // squeezes a column under its floor, is laid out by the server, so there it reloads. var grip = th.querySelector('[data-col-resize]'); if (grip) grip.addEventListener('pointerdown', function (e) { if (!window.matchMedia(LAPTOP).matches) return; e.preventDefault(); e.stopPropagation(); var D = shownCols(table); var k = -1; D.forEach(function (d, i) { if (d.th === th) k = i; }); if (k < 0) return; var tr = table.getBoundingClientRect(); var T = tr.width; var S = D.reduce(function (n, d) { return n + d.w; }, 0); var left = D[k].th.getBoundingClientRect().left; var right = D.slice(k + 1); var R0 = right.reduce(function (n, d) { return n + d.px; }, 0); // The least the right side may be and still hold every column there at its floor, as they scale together. // A drag may go past it (a board already at its floors could not move at all): then the server lays the // board out, swiping, as it does any layout that squeezes a column under its floor. var Rmin = R0 * right.reduce(function (m, d) { return Math.max(m, d.px > 0 ? d.floor / d.px : 1); }, 0); var swiping = !!table.closest('[data-min-w]'); var startX = e.clientX, px = D[k].px; grip.setPointerCapture(e.pointerId); document.body.style.cursor = 'col-resize'; function widthsAt(pxK) { var rest = tr.right - left - pxK; return D.map(function (d, i) { return i < k ? d.px : i === k ? pxK : (R0 > 0 ? d.px * rest / R0 : d.px); }); } function move(ev) { var most = Math.min(tr.right - left - right.length * 8, MAX * T / S); px = Math.min(most, Math.max(D[k].floor, D[k].px + (ev.clientX - startX))); var w = widthsAt(px); D.forEach(function (d, i) { d.col.style.width = (w[i] / T * 100) + '%'; }); } function up() { document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); document.body.style.cursor = ''; if (Math.abs(px - D[k].px) < 1) { D.forEach(function (d) { d.col.style.width = d.drawnWidth; }); return; } var w = widthsAt(px), weights = {}; // The weights that draw exactly these widths: each column's share of the same sum, to a tenth. D.forEach(function (d, i) { if (!d.fixed) weights[d.key] = Math.min(MAX, Math.max(MIN, Math.round(w[i] / T * S * 10) / 10)); }); if (swiping || tr.right - left - px < Rmin - 0.5) { commit(table, keysOf(table), weights); return; } save(table, keysOf(table), weights); } document.addEventListener('pointermove', move); document.addEventListener('pointerup', up); }); // ---- double-click the gripper: fit the column to what it holds ------- // Zach, 2026-10-20 (UrqW0Sacje0c): *"add the ability to double click and have it fit the column size to the // data that exists"*, a spreadsheet's fit. Every cell the column draws, its head included, is measured on one // line, nothing cut, and the widest is the width to fit. It is still a WEIGHT: the one that gives the column // that share of the table while the others keep theirs (w = target x S / (W - target), S the other drawn // columns' weights), rounded UP so nothing is cut, clamped to what columnPrefs accepts, and saved through the // same form as a drag. A press-and-release on the gripper commits nothing, so the two clicks before it are free. if (grip) grip.addEventListener('dblclick', function (e) { if (!window.matchMedia(LAPTOP).matches) return; e.preventDefault(); e.stopPropagation(); var cols = [].slice.call(table.querySelectorAll('colgroup col[data-col-key]')); var col = cols[index]; if (!col) return; var key = col.getAttribute('data-col-key'); var target = widest(table, key); // The board's own box, the width the table has once its layout fits — never the table's own width: a column // squeezed under its floor makes the board swipe and the table as wide as that floor needs (measured // 2026-10-20: 2953px in a 1536px window), and a fit worked against that came out half as wide as the words. var W = (table.parentElement || table).clientWidth; var others = 0; cols.forEach(function (c) { var k = c.getAttribute('data-col-key'); if (k === key) return; // A column this width does not draw takes no share of it. var h = table.querySelector('thead th[data-col="' + k + '"]'); if (h && !h.getClientRects().length) return; others += Number(c.getAttribute('data-weight')) || 0; }); if (!target || target >= W || others <= 0) return; var w = Math.min(MAX, Math.max(MIN, Math.ceil(target * others / (W - target)))); if (w === Number(col.getAttribute('data-weight'))) return; var weights = {}; weights[key] = w; if (table.closest('[data-min-w]')) { commit(table, keysOf(table), weights); return; } // Laid out as the server will draw it, every column its share of the new sum, then saved behind it. var D = shownCols(table); var S2 = D.reduce(function (t, d) { return t + (d.key === key ? w : d.w); }, 0); D.forEach(function (d) { d.col.style.width = ((d.key === key ? w : d.w) / S2 * 100) + '%'; }); save(table, keysOf(table), weights); }); // ---- reorder by dragging the header itself ------------------------ // ⚠ A LINK IS NATIVELY DRAGGABLE, and what it drags is its own URL. Press // and move on the label and Chrome starts a link drag — a ghost of the // href following the cursor while the column stays put. The markup carries // draggable={false}; this catches the head's other children too. th.addEventListener('dragstart', function (e) { e.preventDefault(); }); th.addEventListener('pointerdown', function (e) { // ⚠ THE LETTER a IS NOT IN THIS LIST ANY MORE, and that is Zach's fix // on 2026-09-16: the sort link now fills the head, so excluding links // left the draggable area at zero. A press on the label starts a drag; // a press that never moves 4px is still a click and still sorts, and the // click that follows a real drag is swallowed in up() below. // // ⚠ THE FILTER KEEPS ITS EXCLUSION. A

opens on pointerdown, // so a drag begun there would open the popover under the cursor — and // the funnel is a 20px target that nobody needs to drag by. if (e.target.closest('summary, details, input, button, [data-col-resize]')) return; if (!window.matchMedia(LAPTOP).matches) return; var from = index; var startX = e.clientX; var dragging = false; function move(ev) { if (!dragging && Math.abs(ev.clientX - startX) < 4) return; // ⚠ CAPTURE ONLY ONCE THE DRAG IS REAL, NEVER ON pointerdown. A // captured pointer retargets the compatibility mouse events too, so a // plain click on the head arrived at the instead of the sort link // inside it — the column head stopped sorting altogether the moment // links became draggable. Measured, not reasoned: CLICK-1 went red on // the first build and green the moment this moved down here. if (!dragging) { th.setPointerCapture(ev.pointerId); // The whole document says what is happening, not just the 24 pixels // under the cursor — a drag you cannot feel is a drag people give up // on halfway and report as broken. document.body.style.cursor = 'grabbing'; } dragging = true; th.style.opacity = '0.55'; var over = heads.filter(function (h) { var r = h.getBoundingClientRect(); return ev.clientX >= r.left && ev.clientX <= r.right; })[0]; heads.forEach(function (h) { h.style.boxShadow = ''; }); if (over && over !== th) { var r = over.getBoundingClientRect(); var after = ev.clientX > r.left + r.width / 2; over.style.boxShadow = (after ? 'inset -2px 0 0 0 ' : 'inset 2px 0 0 0 ') + 'var(--accent)'; } } function up(ev) { document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); th.style.opacity = ''; document.body.style.cursor = ''; heads.forEach(function (h) { h.style.boxShadow = ''; }); if (!dragging) return; // ⚠ THE DRAG ENDED ON A LINK, SO A CLICK IS COMING. Without this the // header you just dragged also sorts the board — two layouts changing // at once, and the reorder is the one that loses, because the sort // navigates. Capture phase, so it is swallowed before the link sees // it; the timeout is the release valve for a release that produces no // click at all (dropped outside the document, or a cancelled pointer). var swallow = function (ce) { ce.preventDefault(); ce.stopPropagation(); }; document.addEventListener('click', swallow, true); setTimeout(function () { document.removeEventListener('click', swallow, true); }, 0); var over = heads.filter(function (h) { var r = h.getBoundingClientRect(); return ev.clientX >= r.left && ev.clientX <= r.right; })[0]; if (!over || over === th) return; var to = heads.indexOf(over); var r = over.getBoundingClientRect(); if (ev.clientX > r.left + r.width / 2) to += 1; if (to > from) to -= 1; var keys = keysOf(table); var moved = keys.splice(from, 1)[0]; keys.splice(to, 0, moved); commit(table, keys, {}); } document.addEventListener('pointermove', move); document.addEventListener('pointerup', up); }); }); } // THE BOARD ARRIVES AFTER THIS SCRIPT DOES, and the first version gave up. // These pages stream: React 19 sends the shell, then the row segments, so at // DOMContentLoaded there is often no colgroup to read and boards() returns an // empty list. Attaching once and never again looked exactly like a listener // that does not fire -- DRAG-0 caught it, which is why that case drives a real // pointer instead of asserting the script tag is present. // // AND IT IS IDEMPOTENT, because it now runs many times. The // data-draggable-columns attribute is the marker; enhancing twice would stack // two pointerdown handlers on every header and commit two layouts per drag. function run() { boards().forEach(function (t) { if (t.getAttribute('data-draggable-columns')) return; enhance(t); }); } run(); document.addEventListener('DOMContentLoaded', run); if (window.MutationObserver) { new MutationObserver(run).observe(document.documentElement, { childList: true, subtree: true }); } else { var tries = 0; var iv = setInterval(function () { run(); if (++tries > 40) clearInterval(iv); }, 150); } })()

Privacy policy