https://www.meshweaver.cloud/_content/Microsoft.FluentUI.AspNetCor…/NavMenu/FluentNavMenu.9fmja7pljs.razor.js

1export function onLoad() {
2    const mql = window.matchMedia("(max-width: 600px)");
3
4    for (let expander of document.getElementsByClassName("expander")) {
5        if (expander) {
6            const origStyle = expander.parentElement.style.cssText;
7            expander.addEventListener('click', (ev) => toggleMenuExpandedAsync(expander, origStyle, ev));
8            expander.addEventListener('keydown', (ev) => handleMenuExpanderKeyDownAsync(expander, origStyle, ev));
9
10            mql.onchange = (e) => {
11                if (e.matches) {
12                    setMenuExpanded(expander, origStyle, true)
13                }
14            };
15        }
16    }
17    for (let element of document.getElementsByClassName("fluent-nav-group")) {
18        attachEventHandlers(element);
19    }
20}
21export function onUpdate() {
22    
23}
24
25export function onDispose() {
26    for (let expander of document.getElementsByClassName("expander")) {
27        if (expander) {
28            expander.removeEventListener('click', toggleMenuExpandedAsync);
29            expander.removeEventListener('keydown', handleMenuExpanderKeyDownAsync);
30        }
31    }
32    for (let element of document.getElementsByClassName("fluent-nav-group")) {
33        detachEventHandlers(element);
34    }
35}
36
37function attachEventHandlers(element) {
38    let navlink = element.getElementsByClassName("fluent-nav-link")[0];
39    if (!navlink) {
40        return;
41    }
42    if (!navlink.href) {
43        navlink.addEventListener('click', () => toggleGroupExpandedAsync(element));
44    }
45    navlink.addEventListener('keydown', (ev) => handleExpanderKeyDownAsync(element, ev));
46
47    let expandCollapseButton = element.getElementsByClassName("expand-collapse-button")[0];
48    if (!expandCollapseButton) {
49        return;
50    }
51    expandCollapseButton.addEventListener('click', (ev) => toggleGroupExpandedAsync(element, navlink, ev));
52}
53
54function detachEventHandlers(element) {
55    let navlink = element.getElementsByClassName("fluent-nav-link")[0];
56    if (!navlink) {
57        return;
58    }
59    if (!navlink.href) {
60        navlink.removeEventListener('click', toggleGroupExpandedAsync);
61    }
62    navlink.removeEventListener('keydown', handleExpanderKeyDownAsync);
63
64    let expandCollapseButton = element.getElementsByClassName("expand-collapse-button")[0];
65    expandCollapseButton.removeEventListener('click', toggleGroupExpandedAsync);
66}
67
68function toggleMenuExpandedAsync(element, orig, event) {
69
70    let parent = element.parentElement;
71    if (!parent.classList.contains('collapsed')) {
72        parent.classList.add('collapsed');
73        parent.style.width = '40px';
74        parent.style.minWidth = '40px';
75        parent.ariaExpanded = 'false';
76        element.ariaExpanded = 'false';
77    }
78    else {
79        parent.classList.remove('collapsed');
80        parent.style.cssText = orig;
81        parent.ariaExpanded = 'true';
82        element.ariaExpanded = 'true';
83    }
84    event?.stopPropagation();
85}
86
87function toggleGroupExpandedAsync(element, navlink, event) {
88    if (navlink && navlink.href) {
89        event.preventDefault();
90    }
91    setExpanded(element, !element.classList.contains('expanded'));
92    event?.stopPropagation();
93}
94
95function handleExpanderKeyDownAsync(element, event) {
96    switch (event.code) {
97        case "NumpadEnter":
98        case "Enter":
99            toggleGroupExpandedAsync(element, null, event);
100            break;
101        case "NumpadArrowRight":
102        case "ArrowRight":
103            setExpanded(element, true);
104            break;
105        case "NumpadArrowLeft":
106        case "ArrowLeft":
107            setExpanded(element, false);
108            break;
109    }
110    event.stopPropagation();
111}
112
113function handleMenuExpanderKeyDownAsync(element, origStyle, event) {
114    switch (event.code) {
115        case "NumpadEnter":
116        case "Enter":
117            toggleMenuExpandedAsync(element, origStyle, event);
118            break;
119        case "NumpadArrowRight":
120        case "ArrowRight":
121            setMenuExpanded(element, origStyle, true);
122            break;
123        case "NumpadArrowLeft":
124        case "ArrowLeft":
125            setMenuExpanded(element, origStyle, false);
126            break;
127    }
128    event.stopPropagation();
129}
130
131function setExpanded(element, expand) {
132    var collapsibleRegion = element.getElementsByClassName("items")[0];
133    var button = element.getElementsByClassName("expand-collapse-button")[0];
134    if (expand) {
135        button.classList.add("rotate");
136        collapsibleRegion.style.height = 'auto';
137        element.classList.add('expanded');
138
139    } else {
140        button.classList.remove("rotate");
141        collapsibleRegion.style.height = '0px';
142        element.classList.remove('expanded');
143    }
144}
145

146function setMenuExpanded(element, origStyle, expand) {
147    let parent = element.parentElement;
148    if (expand) {
149        parent.classList.remove('collapsed');
150        parent.style.cssText = origStyle;
151        parent.ariaExpanded = 'true';
152        element.ariaExpanded = 'true';
153    }
154    else {
155        parent.classList.add('collapsed');
156        parent.style.width = '40px';
157        parent.style.minWidth = '40px';
158        parent.ariaExpanded = 'false';
159        element.ariaExpanded = 'false';
160    }
161}