https://maritiemdigitaal.nl/_content/Microsoft.AspNetCore.Components.QuickGrid/QuickGrid.eu7w3d5g1a.razor.js

1export function init(tableElement) {
2
3    const bodyClickHandler = event => {
4        const columnOptionsElement = tableElement.tHead.querySelector('.col-options');
5        if (columnOptionsElement && event.composedPath().indexOf(columnOptionsElement) < 0) {
6            tableElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
7        }
8    };
9    const keyDownHandler = event => {
10        const columnOptionsElement = tableElement.tHead.querySelector('.col-options');
11        if (columnOptionsElement && event.key === "Escape") {
12            tableElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
13        }
14    };
15
16    document.body.addEventListener('click', bodyClickHandler);
17    document.body.addEventListener('mousedown', bodyClickHandler); // Otherwise it seems strange that it doesn't go away until you release the mouse button
18    document.body.addEventListener('keydown', keyDownHandler);
19
20    return {
21        stop: () => {
22            document.body.removeEventListener('click', bodyClickHandler);
23            document.body.removeEventListener('mousedown', bodyClickHandler);
24            document.body.removeEventListener('keydown', keyDownHandler);
25        }
26    };
27}
28
29export function checkColumnOptionsPosition(tableElement) {
30    const colOptions = tableElement.tHead && tableElement.tHead.querySelector('.col-options'); // Only match within *our* thead, not nested tables
31    if (colOptions) {
32        // We want the options popup to be positioned over the grid, not overflowing on either side, because it's possible that
33        // beyond either side is off-screen or outside the scroll range of an ancestor
34        const gridRect = tableElement.getBoundingClientRect();
35        const optionsRect = colOptions.getBoundingClientRect();
36        const leftOverhang = Math.max(0, gridRect.left - optionsRect.left);
37        const rightOverhang = Math.max(0, optionsRect.right - gridRect.right);
38        if (leftOverhang || rightOverhang) {
39            // In the unlikely event that it overhangs both sides, we'll center it
40            const applyOffset = leftOverhang && rightOverhang ? (leftOverhang - rightOverhang) / 2 : (leftOverhang - rightOverhang);
41            colOptions.style.transform = `translateX(${applyOffset}px)`;
42        }
43
44        colOptions.scrollIntoViewIfNeeded();
45
46        const autoFocusElem = colOptions.querySelector('[autofocus]');
47        if (autoFocusElem) {
48            autoFocusElem.focus();
49        }
50    }
51}
52