fix FluentNavMenu.razor.js for non SSR (#1560)

* fix FluentNavMenu SSR script * test with Blazor object instead * fixes onDispose - event listener could have been added before switching to wasm --------- Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>
microsoft · Feb 26, 2024 · 8ecf0f2 · 8ecf0f2
1 parent 2069802
commit 8ecf0f2
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.js b/src/Core/Components/NavMenu/FluentNavMenu.razor.js
@@ -1,25 +1,28 @@
 export function onLoad() {
-    const mql = window.matchMedia("(max-width: 600px)");
+    if (!isRunningInWASM()) {
+        const mql = window.matchMedia("(max-width: 600px)");
 
-    for (let expander of document.getElementsByClassName("expander")) {
-        if (expander) {
-            const origStyle = expander.parentElement.style.cssText;
-            expander.addEventListener('click', (ev) => toggleMenuExpandedAsync(expander, origStyle, ev));
-            expander.addEventListener('keydown', (ev) => handleMenuExpanderKeyDownAsync(expander, origStyle, ev));
-
-            mql.onchange = (e) => {
-                if (e.matches) {
-                    setMenuExpanded(expander, origStyle, true)
-                }
-            };
+        for (let expander of document.getElementsByClassName("expander")) {
+            if (expander) {
+                const origStyle = expander.parentElement.style.cssText;
+                expander.addEventListener('click', (ev) => toggleMenuExpandedAsync(expander, origStyle, ev));
+                expander.addEventListener('keydown', (ev) => handleMenuExpanderKeyDownAsync(expander, origStyle, ev));
+
+                mql.onchange = (e) => {
+                    if (e.matches) {
+                        setMenuExpanded(expander, origStyle, true)
+                    }
+                };
+            }
+        }
+        for (let element of document.getElementsByClassName("fluent-nav-group")) {
+            attachEventHandlers(element);
         }
-    }
-    for (let element of document.getElementsByClassName("fluent-nav-group")) {
-        attachEventHandlers(element);
     }
 }
+
 export function onUpdate() {
-    
+
 }
 
 export function onDispose() {
@@ -34,6 +37,10 @@ export function onDispose() {
     }
 }
 
+function isRunningInWASM() {
+    return Object.getOwnPropertyNames(Blazor.runtime).length > 0;
+}
+
 function attachEventHandlers(element) {
     let navlink = element.getElementsByClassName("fluent-nav-link")[0];
     if (!navlink) {
@@ -66,7 +73,6 @@ function detachEventHandlers(element) {
 }
 
 function toggleMenuExpandedAsync(element, orig, event) {
-
     let parent = element.parentElement;
     if (!parent.classList.contains('collapsed')) {
         parent.classList.add('collapsed');