Skip to content

Commit

Permalink
feat(websites): improve Notification page of Butil docs in Platform w…
Browse files Browse the repository at this point in the history 
…ebsite #9190 (#9191)
  • Loading branch information
@msynk
msynk authored Nov 11, 2024
1 parent 2ab82d4 commit 5e4cc0f
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 44 deletions.
43 changes: 23 additions & 20 deletions ...sites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08NotificationPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
@@inject Bit.Butil.Notification notification

@@code {
notification.IsSupported();
notification.Show("title", new() { Body = "this is body." });
await notification.IsSupported();
await notification.Show("title", new() { Body = "this is body." });
}</CodeBox>
</div>
</section>
Expand All @@ -43,6 +43,8 @@
</CodeBox>
</BitPivotItem>
<BitPivotItem HeaderText="Result">
<br />
<BitText>Notification supported? [@isNotificationSupported]</BitText>
<br />
<BitButton OnClick="CheckIsSupported">IsSupported</BitButton>
<br />
Expand All @@ -51,68 +53,69 @@
</BitAccordion>
<br /><br />

<b>Show</b>: <br />
Requests a native notification to show to the user.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification" target="_blank">MDN</a>).
<b>GetPermission</b>: <br />
Gets the current permission of the Notification API.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission_static" target="_blank">MDN</a>).
<br /><br />
<BitAccordion Title="Sample">
<BitPivot>
<BitPivotItem HeaderText="Code">
<CodeBox>
@showExampleCode
@getPermissionExampleCode
</CodeBox>
</BitPivotItem>
<BitPivotItem HeaderText="Result">
<br />
<BitButton OnClick="ShowNotification">Show</BitButton>
<BitText>Current permission state: [@permissionResult]</BitText>
<br />
<BitButton OnClick="GetCurrentPermissionState">GetPermission</BitButton>
<br />
</BitPivotItem>
</BitPivot>
</BitAccordion>
<br /><br />

<b>GetPermission</b>: <br />
Gets the current permission of the Notification API.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission_static" target="_blank">MDN</a>).
<b>RequestPermission</b>: <br />
Requests permission from the user for the current origin to display notifications.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission_static" target="_blank">MDN</a>).
<br /><br />
<BitAccordion Title="Sample">
<BitPivot>
<BitPivotItem HeaderText="Code">
<CodeBox>
@getPermissionExampleCode
@requestPermissionExampleCode
</CodeBox>
</BitPivotItem>
<BitPivotItem HeaderText="Result">
<br />
<BitText>Current permission state: [@permissionResult]</BitText>
<BitText>Request permission result: [@requestPermissionResult]</BitText>
<br />
<BitButton OnClick="GetCurrentPermissionState">GetPermission</BitButton>
<BitButton OnClick="RequestPermission">RequestPermission</BitButton>
<br />
</BitPivotItem>
</BitPivot>
</BitAccordion>
<br /><br />

<b>RequestPermission</b>: <br />
Requests permission from the user for the current origin to display notifications.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission_static" target="_blank">MDN</a>).
<b>Show</b>: <br />
Requests a native notification to show to the user.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification" target="_blank">MDN</a>).
<br /><br />
<BitAccordion Title="Sample">
<BitPivot>
<BitPivotItem HeaderText="Code">
<CodeBox>
@requestPermissionExampleCode
@showExampleCode
</CodeBox>
</BitPivotItem>
<BitPivotItem HeaderText="Result">
<br />
<BitText>Request permission result: [@requestPermissionResult]</BitText>
<br />
<BitButton OnClick="RequestPermission">RequestPermission</BitButton>
<BitButton OnClick="ShowNotification">Show</BitButton>
<br />
</BitPivotItem>
</BitPivot>
</BitAccordion>
<br /><br />
</div>
</section>
</div>
Expand Down
61 changes: 37 additions & 24 deletions ...es/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08NotificationPage.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,85 @@ namespace Bit.Websites.Platform.Client.Pages.Butil;

public partial class Butil08NotificationPage
{
private bool? isNotificationSupported;
private async Task CheckIsSupported()
{
var isNotificationSupported = await notification.IsSupported();
}

private async Task ShowNotification()
{
await notification.Show("title", new() { Body = "this is body." });
isNotificationSupported = await notification.IsSupported();
}

private NotificationPermission? permissionResult = null;

private async Task GetCurrentPermissionState()
{
permissionResult = await notification.GetPermission();
}

private NotificationPermission? requestPermissionResult = null;

private async Task RequestPermission()
{
requestPermissionResult = await notification.RequestPermission();
}

private async Task ShowNotification()
{
await notification.Show("title", new() { Body = "this is body." });
}



private string isSupportedExampleCode =
@"@inject Bit.Butil.Notification notification
<BitText>Notification supported? [@isNotificationSupported]</BitText>
<BitButton OnClick=""CheckIsSupported"">IsSupported</BitButton>
@code {
private bool? isNotificationSupported;
private async Task CheckIsSupported()
{
var isNotificationSupported = await notification.IsSupported();
isNotificationSupported = await notification.IsSupported();
}
}";
private string showExampleCode =
private string getPermissionExampleCode =
@"@inject Bit.Butil.Notification notification
<BitButton OnClick=""ShowNotification"">Show</BitButton>
<BitText>Current permission state: [@permissionResult]</BitText>
<BitButton OnClick=""GetCurrentPermissionState"">GetPermission</BitButton>
@code {
private async Task ShowNotification()
private NotificationPermission? permissionResult = null;
private async Task GetCurrentPermissionState()
{
await notification.Show(""title"", new() { Body = ""this is body."" });
permissionResult = await notification.GetPermission();
}
}";
private string getPermissionExampleCode =
@"@inject Bit.Butil.Console console
private string requestPermissionExampleCode =
@"@inject Bit.Butil.Notification notification
<BitTextField @bind-Value=""value"" />
<BitText>Request permission result: [@requestPermissionResult]</BitText>
<BitButton OnClick=""@(() => console.CountReset(value))"">CountReset</BitButton>
<BitButton OnClick=""RequestPermission"">RequestPermission</BitButton>
@code {
private string value = ""Test"";
}";
private string requestPermissionExampleCode =
@"@inject Bit.Butil.Console console
private NotificationPermission? requestPermissionResult = null;
<BitTextField @bind-Value=""value"" />
private async Task RequestPermission()
{
requestPermissionResult = await notification.RequestPermission();
}
}";
private string showExampleCode =
@"@inject Bit.Butil.Notification notification
<BitButton OnClick=""@(() => console.Debug(value))"">Debug</BitButton>
<BitButton OnClick=""ShowNotification"">Show</BitButton>
@code {
private string value = ""Test"";
private async Task ShowNotification()
{
await notification.Show(""title"", new() { Body = ""this is body."" });
}
}";
}

0 comments on commit 5e4cc0f

Please sign in to comment.