https://utunote.com/_content/Microsoft.FluentUI.AspNetCore.Compone…/Overlay/FluentOverlay.kjm33rwg1a.razor.js

1/**
2 * Initialize the global click event handler
3 * @param {any} dotNetHelper
4 * @param {any} id
5 */
6export function overlayInitialize(dotNetHelper, containerId, id) {
7
8    if (!document.fluentOverlayData) {
9        document.fluentOverlayData = {};
10    }
11
12    if (document.fluentOverlayData[id]) {
13        return;
14    }
15
16    // Store the data
17    document.fluentOverlayData[id] = {
18
19        // Click event handler
20        clickHandler: async function (event) {
21            const isInsideContainer = isClickInsideContainer(event, document.getElementById(containerId));
22            const isInsideExcludedElement = !!document.getElementById(id) && isClickInsideContainer(event, document.getElementById(id));
23
24            if (isInsideContainer && !isInsideExcludedElement) {
25                dotNetHelper.invokeMethodAsync('OnCloseInteractiveAsync', event); 
26            }
27        }
28    };
29
30    // Let the user click on the container (containerId or the entire document)
31    document.addEventListener('click', document.fluentOverlayData[id].clickHandler);
32}
33
34/**
35 * Dispose the global click event handler
36 */
37export function overlayDispose(id) {
38    if (document.fluentOverlayData[id]) {
39
40        // Remove the event listener
41        document.removeEventListener('click', document.fluentOverlayData[id].clickHandler);
42
43        // Remove the data
44        document.fluentOverlayData[id] = null;
45        delete document.fluentOverlayData[id];
46    }
47}
48
49/**
50 * Determines whether a mouse click event occurred inside a specific HTML element.
51 */
52function isClickInsideContainer(event, container) {
53    if (!!container) {
54        const rect = container.getBoundingClientRect();
55
56        return (
57            event.clientX >= rect.left &&
58            event.clientX <= rect.right &&
59            event.clientY >= rect.top &&
60            event.clientY <= rect.bottom
61        );
62    }
63
64    // Default is true
65    return true;
66}