22 lines
1.0 KiB
TypeScript
22 lines
1.0 KiB
TypeScript
const MARKED_ROW_ATTRIBUTE = 'data-row-marked';
|
|
const SELECTABLE_ROW = 'table tbody tr:not([aria-hidden="true"]), [role="table"] [role="row"]:not(.results-browser-head)';
|
|
|
|
/** Keep one reading marker per table, including tables rendered in floating portals. */
|
|
export function installTableRowMarking(documentRoot: Document): () => void {
|
|
const markClickedRow = (event: MouseEvent) => {
|
|
const target = event.target;
|
|
if (!(target instanceof Element)) return;
|
|
if (target.closest('[data-table-row-marking="off"]')) return;
|
|
const row = target.closest(SELECTABLE_ROW);
|
|
const table = row?.closest('table, [role="table"]');
|
|
if (!row || !table) return;
|
|
table.querySelectorAll(`[${MARKED_ROW_ATTRIBUTE}="true"]`).forEach(marked => {
|
|
if (marked !== row) marked.removeAttribute(MARKED_ROW_ATTRIBUTE);
|
|
});
|
|
row.setAttribute(MARKED_ROW_ATTRIBUTE, 'true');
|
|
};
|
|
|
|
documentRoot.addEventListener('click', markClickedRow, true);
|
|
return () => documentRoot.removeEventListener('click', markClickedRow, true);
|
|
}
|