2024-01-30 EoD - Menu 90%

Material-Blazor · Jan 30, 2024 · 78515c8 · 78515c8
1 parent 1c8dd48
commit 78515c8
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 66 deletions.
diff --git a/Material.Blazor.MD3/Components/Menu/MBMenu.cs b/Material.Blazor.MD3/Components/Menu/MBMenu.cs
@@ -92,7 +92,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             {
                 builder.AddAttribute(rendSeq++, "anchor", MenuButtonId);
                 builder.AddAttribute(rendSeq++, "id", MenuId);
-                builder.AddAttribute(rendSeq++, "onmenuclose", EventCallback.Factory.Create<MenuCloseEventArgs>(this, OnMenuCloseInternal));
+                builder.AddAttribute(rendSeq++, "onmenuselectionreport", EventCallback.Factory.Create<MenuSelectionReportEventArgs>(this, OnMenuSelectionReportInternal));
                 builder.AddAttribute(rendSeq++, "positioning", MenuPositioning.ToString().ToLower());
 
                 if (MenuItems is not null)
@@ -190,21 +190,19 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        await InvokeJsVoidAsync("MaterialBlazor.MBMenu.logAfterRenderEvent").ConfigureAwait(false);
-
         await base.OnAfterRenderAsync(firstRender);
 
         if (firstRender)
         {
-            await InvokeJsVoidAsync("MaterialBlazor.MBMenu.setMenuEventListeners", MenuButtonId, MenuId, firstRender).ConfigureAwait(false);
+            await InvokeJsVoidAsync("MaterialBlazor.MBMenu.setMenuEventListeners", MenuButtonId, MenuId).ConfigureAwait(false);
         }
     }
 
     #endregion
 
-    #region OnMenuCloseInternal
+    #region OnMenuSelectionReportInternal
 
-    private async Task OnMenuCloseInternal(MenuCloseEventArgs args)
+    private async Task OnMenuSelectionReportInternal(MenuSelectionReportEventArgs args)
     {
         await Task.CompletedTask;
     }

diff --git a/Material.Blazor.MD3/Components/Menu/MBMenu.md b/Material.Blazor.MD3/Components/Menu/MBMenu.md
@@ -16,5 +16,9 @@ The following attributes are reserved by Material Components Web and will be ign
 - role
 - type
 
+## Build quirk
+
+When Material.Blazor.MD3.lib.module.js is built, it is built as a module. The file needs to be modified, removing all traces of the module system and ADDING 'export' to the function lines
+
 [![Components](https://img.shields.io/static/v1?label=Components&message=Core&color=blue)](xref:A.CoreComponents)
 [![Docs](https://img.shields.io/static/v1?label=API%20Documentation&message=MBMenu&color=brightgreen)](xref:Material.Blazor.MBMenu)
diff --git a/Material.Blazor.MD3/Components/Menu/MBMenu.ts b/Material.Blazor.MD3/Components/Menu/MBMenu.ts
@@ -1,14 +1,9 @@
 import { CloseMenuEvent } from '@material/web/menu/internal/controllers/shared.js';
-//import { MdButton } from '@material/web/button/button.js';
-import { Corner, FocusState, MdMenu, MenuItem } from '@material/web/menu/menu.js';
-
-export function logAfterRenderEvent() {
-    console.log("Blazor OnAfterRenderAsync event...");
-}
+import { MenuItem } from '@material/web/menu/menu.js';
 
 /**
  * Searches for an element with `class="output"` set on it, and updates the
- * text of that element with the menu-closed event's content.
+ * text of that element with the menu-closed event content.
  */
 function displayCloseMenuEvent(event: CloseMenuEvent) {
     console.log("displayCloseMenuEvent invoked");
@@ -38,28 +33,12 @@ function displayCloseMenuEvent(event: CloseMenuEvent) {
 }`;
 }
 
-export function setMenuEventListeners(menuButtonID: string, menuID: string, isFirstRender: boolean) {
+export function setMenuEventListeners(menuButtonID: string, menuID: string) {
     const buttonElement: HTMLElement | null = document.getElementById(menuButtonID);
     const menuElement: HTMLElement | null = document.getElementById(menuID);
     if ((buttonElement != null) && (menuElement != null)) {
         console.log("Adding listener for button click events");
-        if (!isFirstRender) {
-            buttonElement.removeEventListener('click', toggleMenu);
-        }
         buttonElement.addEventListener('click', () => { toggleMenu(menuElement) });
-
-        if (!isFirstRender) {
-            // TS2769
-            // @ts-expect-error
-            menuElement.removeEventListener('close-menu', displayCloseMenuEvent);
-        }
-        menuElement.addEventListener('close-menu', (event: any) =>
-        {
-            console.log("***Close-Menu Event***");
-            displayCloseMenuEvent(event)
-        });
-
-        console.log("...");
     }
 }
 

diff --git a/Material.Blazor.MD3/Components/Menu/MBMenuCloseMenuCustomEvent.cs b/Material.Blazor.MD3/Components/Menu/MBMenuCloseMenuCustomEvent.cs
diff --git a/Material.Blazor.MD3/Components/Menu/MBMenuEvents.cs b/Material.Blazor.MD3/Components/Menu/MBMenuEvents.cs
@@ -8,10 +8,11 @@ namespace Material.Blazor.MenuClose;
 **
 ** This must match the ts definition found in material.blazor.custom.events.ts
 */
-public class MenuCloseEventArgs : EventArgs
+public class MenuSelectionReportEventArgs : EventArgs
 {
 #pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
-    public string? CustomProperty1 { get; set; }
-    public string? CustomProperty2 { get; set; }
+    public string? menuID { get; set; }
+    public string? menuHeadline { get; set; }
+    public string? reason { get; set; }
 #pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
 }
diff --git a/Material.Blazor.MD3/Components/Menu/MBMenuSelectionReportCustomEvent.cs b/Material.Blazor.MD3/Components/Menu/MBMenuSelectionReportCustomEvent.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Material.Blazor.MenuClose;
+
+[EventHandler(
+    attributeName: "onmenuselectionreport",
+    eventArgsType: typeof(MenuSelectionReportEventArgs),
+    enableStopPropagation: false,
+    enablePreventDefault: false)]
+public static class EventHandlers
+{
+}
diff --git a/Material.Blazor.MD3/Material.Blazor.MD3.csproj b/Material.Blazor.MD3/Material.Blazor.MD3.csproj
@@ -111,7 +111,7 @@
 
 	<ItemGroup>
 		<InputStaticAssetsEventScripts Include="scripts\material.blazor.custom.events.ts" />
-		<OutputStaticAssetsEventScripts Include="wwwroot\material.blazor.md3.lib.module.js" />
+		<OutputStaticAssetsEventScripts Include="wwwroot\Material.Blazor.MD3.lib.module.js" />
 		<!--Keep this Remove/Include pair-->
 		<Content Remove="@(OutputStaticAssetsEventScripts)" />
 		<Content Include="@(OutputStaticAssetsEventScripts)" />

diff --git a/Material.Blazor.MD3/Scripts/material.blazor.custom.events.ts b/Material.Blazor.MD3/Scripts/material.blazor.custom.events.ts
@@ -1,23 +1,27 @@
-import { MenuItem } from '@material/web/menu/menu.js';
+import { CloseMenuEvent } from '@material/web/menu/internal/controllers/shared.js';
+import { MenuItem } from '@material/web/menu/menu.js';
 
 /*
-** MW3 menu-close event arguments
+** MW3 close-menu event arguments
 **
 ** This must match the C# definition found in MBMenuEvents.cs
 */
-export function eventArgsCreatorMenuClose(event) {
+export function eventArgsCreatorMenuSelectionReport(event: CloseMenuEvent) {
+    var target: MenuItem = event.target as unknown as MenuItem;
     return {
-        customProperty1: 'any value for property 1',
-        customProperty2: event.srcElement.value
+        menuID: target.id,
+        menuHeadline: target.typeaheadText,
+        reason: JSON.stringify(event.detail.reason)
     };
 }
 
 /*
 ** Register all custom events
 */
 export function afterStarted(blazor) {
-    blazor.registerCustomEventType('menuclose', {
+    console.log("Registering menuselectionreport event");
+    blazor.registerCustomEventType('menuselectionreport', {
         browserEventName: "close-menu",
-        createEventArgs: eventArgsCreatorMenuClose
+        createEventArgs: eventArgsCreatorMenuSelectionReport
     });
 }
diff --git a/Material.Blazor.MD3/Styles/_material-symbols-outlined.scss b/Material.Blazor.MD3/Styles/_material-symbols-outlined.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v156/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v160/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
 }
 
 .material-symbols-outlined {

diff --git a/Material.Blazor.MD3/Styles/_material-symbols-rounded.scss b/Material.Blazor.MD3/Styles/_material-symbols-rounded.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v154/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v158/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
 }
 
 .material-symbols-rounded {

diff --git a/Material.Blazor.MD3/Styles/_material-symbols-sharp.scss b/Material.Blazor.MD3/Styles/_material-symbols-sharp.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Sharp';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v153/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWE.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v156/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWE.woff2) format('woff2');
 }
 
 .material-symbols-sharp {

diff --git a/Material.Blazor.Website.MD3/Pages/Menu.razor b/Material.Blazor.Website.MD3/Pages/Menu.razor
@@ -78,8 +78,7 @@
                                 ButtonLabelColor="darkblue"
                                 ButtonStyle="@MBButtonStyle.Outlined"
                                 MenuItems="@menuItems"
-                                MenuPositioning="MBMenuPositioning.Popover"
-                                @onmenuclose="@OnMenuCloseClickHandler" />
+                                MenuPositioning="MBMenuPositioning.Popover" />
                     </p>
                 </Primary>
             </Material.Blazor.MD2.MBCard>
@@ -195,8 +194,8 @@
         menuItems[7].SuppressLeadingIcon = !EightSelected;
     }
 
-    protected void OnMenuCloseClickHandler(MenuCloseEventArgs args)
+    protected void OnMenuCloseClickHandler(MenuSelectionReportEventArgs args)
     {
-        ToastService.ShowToast(heading: "MW3 menu close", message: $"Value: '{args.CustomProperty2}'", level: MBToastLevel.Success, showIcon: false);
+        ToastService.ShowToast(heading: "MW3 menu close", message: $"ID: '{args.menuID}'", level: MBToastLevel.Success, showIcon: false);
     }
 }
diff --git a/Material.Blazor.Website.Server.MD3/Pages/Host.cshtml b/Material.Blazor.Website.Server.MD3/Pages/Host.cshtml
@@ -63,9 +63,8 @@
         <a class="dismiss">🗙</a>
     </div>
 
-@*     <script src="_content/Material.Blazor.MD3/material.blazor.min.js"></script>
- *@
-    <script src="_content/Material.Blazor.MD3/material.blazor.js"></script>
+    @* <script src="_content/Material.Blazor.MD3/material.blazor.js"></script> *@
+    <script src="_content/Material.Blazor.MD3/material.blazor.min.js"></script>
     <script src="_content/Material.Blazor.Website.MD3/js/material.blazor.website.min.js"></script>
 
     <script src="_content/GoogleAnalytics.Blazor/googleanalytics.blazor.js"></script>

diff --git a/Material.Blazor/Styles/_material-symbols-outlined.scss b/Material.Blazor/Styles/_material-symbols-outlined.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v154/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v160/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
 }
 
 .material-symbols-outlined {

diff --git a/Material.Blazor/Styles/_material-symbols-rounded.scss b/Material.Blazor/Styles/_material-symbols-rounded.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v153/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v158/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
 }
 
 .material-symbols-rounded {

diff --git a/Material.Blazor/Styles/_material-symbols-sharp.scss b/Material.Blazor/Styles/_material-symbols-sharp.scss
@@ -3,7 +3,7 @@
   font-family: 'Material Symbols Sharp';
   font-style: normal;
   font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v151/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWE.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v156/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWE.woff2) format('woff2');
 }
 
 .material-symbols-sharp {