Skip to content

Commit

Permalink
2024-01-04 EoD
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarkStega
MarkStega committed Jan 4, 2024
1 parent 2e311c6 commit 6530bc4
Show file tree
Hide file tree
Showing 12 changed files with 220 additions and 196 deletions.
71 changes: 42 additions & 29 deletions Material.Blazor.MD3/Components/Menu/MBMenu.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ public class MBMenu : ComponentFoundation



private string MenuButtonId { get; } = "menu-id-" + Guid.NewGuid().ToString().ToLower();
private string MenuId { get; set; } = "menu-button-id-" + Guid.NewGuid().ToString().ToLower();
private string MenuButtonId { get; } = "menu-button-id-" + Guid.NewGuid().ToString().ToLower();
private string MenuId { get; set; } = "menu-id-" + Guid.NewGuid().ToString().ToLower();


#endregion
Expand Down Expand Up @@ -92,6 +92,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.AddAttribute(rendSeq++, "anchor", MenuButtonId);
builder.AddAttribute(rendSeq++, "id", MenuId);
//builder.AddAttribute(rendSeq++, "menu-close", "displayMenuCloseEvent()");
//builder.AddAttribute(rendSeq++, "onmenuclose", EventCallback.Factory.Create<MenuCloseEventArgs>(this, OnMenuCloseInternal));
builder.AddAttribute(rendSeq++, "positioning", MenuPositioning.ToString().ToLower());

Expand Down Expand Up @@ -123,6 +124,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)

if (menuItem.Headline.Length > 0)
{
builder.AddAttribute(rendSeq++, "id", menuItem.Headline);

builder.OpenElement(rendSeq++, "div");
{
if (menuItem.HeadlineColor.Length > 0)
Expand All @@ -133,34 +136,34 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
builder.AddContent(rendSeq++, menuItem.Headline);
}
builder.CloseElement();
}

if (menuItem.LeadingIcon is not null && !menuItem.SuppressLeadingIcon)
{
MBIcon.BuildRenderTreeWorker(
builder,
ref rendSeq,
CascadingDefaults,
null,
null,
null,
null,
menuItem.LeadingIcon,
"start");
}
if (menuItem.LeadingIcon is not null && !menuItem.SuppressLeadingIcon)
{
MBIcon.BuildRenderTreeWorker(
builder,
ref rendSeq,
CascadingDefaults,
null,
null,
null,
null,
menuItem.LeadingIcon,
"start");
}

if (menuItem.TrailingIcon is not null)
{
MBIcon.BuildRenderTreeWorker(
builder,
ref rendSeq,
CascadingDefaults,
null,
null,
null,
null,
menuItem.TrailingIcon,
"end");
}
if (menuItem.TrailingIcon is not null)
{
MBIcon.BuildRenderTreeWorker(
builder,
ref rendSeq,
CascadingDefaults,
null,
null,
null,
null,
menuItem.TrailingIcon,
"end");
}
}
builder.CloseComponent();
Expand All @@ -170,6 +173,11 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
}
}
builder.CloseElement();
builder.OpenElement(rendSeq++, "pre");
{
builder.AddAttribute(rendSeq++, "class", "output");
}
builder.CloseElement();
}
builder.CloseElement();

Expand All @@ -181,9 +189,14 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await InvokeJsVoidAsync("MaterialBlazor.MBMenu.logAfterRenderEvent").ConfigureAwait(false);

await base.OnAfterRenderAsync(firstRender);

await InvokeJsVoidAsync("MaterialBlazor.MBMenu.setMenuEventListeners", MenuButtonId, MenuId).ConfigureAwait(false);
if (firstRender)
{
await InvokeJsVoidAsync("MaterialBlazor.MBMenu.setMenuEventListeners", MenuButtonId, MenuId, firstRender).ConfigureAwait(false);
}
}

#endregion
Expand Down
5 changes: 5 additions & 0 deletions Material.Blazor.MD3/Components/Menu/MBMenu.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.output {
color: var(--md-sys-color-on-background);
margin-top: 6px;
font-family: sans-serif;
}
51 changes: 27 additions & 24 deletions Material.Blazor.MD3/Components/Menu/MBMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,8 @@
//import { MdButton } from '@material/web/button/button.js';
import { Corner, FocusState, MdMenu, MenuItem } from '@material/web/menu/menu.js';

export function setMenuCloseEvent(menuID: string) {
const menuElement: MdMenu | null = (document.getElementById(menuID) as MdMenu);
if (menuElement != null) {
console.log("Adding listener for menu-close events");
menuElement.addEventListener('menu-close', () => displayMenuCloseEvent);
console.log("Adding listener for closed events");
menuElement.addEventListener('closed', () => displayClosedEvent);
}
export function logAfterRenderEvent() {
console.log("Blazor OnAfterRenderAsync event...");
}

function displayClosedEvent() {
Expand Down Expand Up @@ -60,33 +54,42 @@ function displayOpeningEvent() {
console.log("displayOpeningEvent invoked");
}

export function setMenuEventListeners(menuButtonID: string, menuID: string) {
export function setMenuEventListeners(menuButtonID: string, menuID: string, isFirstRender: boolean) {
const buttonElement: HTMLElement | null = document.getElementById(menuButtonID);
const menuElement: MdMenu | null = (document.getElementById(menuID) as MdMenu);
const menuElement: HTMLElement | null = document.getElementById(menuID);
if ((buttonElement != null) && (menuElement != null)) {
console.log("Adding listener for button click events");
buttonElement.removeEventListener('click', toggleMenu);
if (!isFirstRender) {
buttonElement.removeEventListener('click', toggleMenu);
}
buttonElement.addEventListener('click', () => { toggleMenu(menuElement) });

console.log("Adding listener for menu closed events");
menuElement.removeEventListener('closed', displayClosedEvent);
menuElement.addEventListener('closed', () => displayClosedEvent);
//console.log("Adding listener for menu closed events");
//menuElement.removeEventListener('closed', displayClosedEvent);
//menuElement.addEventListener('closed', () => displayClosedEvent);

console.log("Adding listener for menu closing events");
menuElement.removeEventListener('closing', displayClosingEvent);
menuElement.addEventListener('closing', () => displayClosingEvent);
//console.log("Adding listener for menu closing events");
//menuElement.removeEventListener('closing', displayClosingEvent);
//menuElement.addEventListener('closing', () => displayClosingEvent);

console.log("Adding listener for menu-close events");
//menuElement.removeEventListener('menu-close', displayMenuCloseEvent);

if (!isFirstRender) {
// TS2769
// @ts-expect-error
menuElement.removeEventListener('menu-close', displayMenuCloseEvent);
}
menuElement.addEventListener('menu-close', () => displayMenuCloseEvent);

console.log("Adding listener for menu opened events");
menuElement.removeEventListener('opened', displayOpenedEvent);
menuElement.addEventListener('opened', () => displayOpenedEvent);
//console.log("Adding listener for menu opened events");
//menuElement.removeEventListener('opened', displayOpenedEvent);
//menuElement.addEventListener('opened', () => displayOpenedEvent);

console.log("Adding listener for menu opening events");
menuElement.removeEventListener('opening', displayOpeningEvent);
menuElement.addEventListener('opening', () => displayOpeningEvent);
//console.log("Adding listener for menu opening events");
//menuElement.removeEventListener('opening', displayOpeningEvent);
//menuElement.addEventListener('opening', () => displayOpeningEvent);

console.log("...");
}
}

Expand Down
2 changes: 1 addition & 1 deletion Material.Blazor.MD3/Styles/_material-symbols-outlined.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/v156/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
Expand Down
2 changes: 1 addition & 1 deletion Material.Blazor.MD3/Styles/_material-symbols-rounded.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/v154/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}

.material-symbols-rounded {
Expand Down
2 changes: 1 addition & 1 deletion Material.Blazor.MD3/Styles/_material-symbols-sharp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/v153/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWE.woff2) format('woff2');
}

.material-symbols-sharp {
Expand Down
1 change: 1 addition & 0 deletions Material.Blazor.MD3/Styles/material.blazor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use '_material-symbols-sharp.scss';

@use '../Components/Grid/MBGrid.scss';
@use '../Components/Menu/MBMenu.scss';
@use '../Components/Toast/MBToast.scss';

@use '../Components.MD2/Card/MBCard.scss';
Expand Down
Loading

0 comments on commit 6530bc4

Please sign in to comment.