Skip to content
This repository has been archived by the owner on Mar 21, 2024. It is now read-only.

Commit

Permalink
Merge pull request #27 from patrickjahr/feature/move-packages
Browse files Browse the repository at this point in the history
Feature/move packages
  • Loading branch information
christianliebel authored Mar 21, 2024
2 parents bdf741d + fc9cf66 commit 72d191a
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 79 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ jobs:
uses: actions/setup-dotnet@v1
with:
dotnet-version: 7.0.x

# Install dotnet wasm buildtools workload
- name: Install .NET WASM Build Tools
run: dotnet workload install wasm-tools

# Publishes Blazor project to the release-folder
- name: Publish .NET Core Project
run: dotnet publish samples/Thinktecture.Blazor.Sample/Thinktecture.Blazor.Sample.csproj -c:Release -p:GHPages=true -o dist/Web --nologo
Expand Down
8 changes: 6 additions & 2 deletions src/Thinktecture.Blazor.AsyncClipboard/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.AsyncClipboard](https://www.nuget.org/packages/PatrickJahr.Blazor.AsyncClipboard/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.AsyncClipboard

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.AsyncClipboard?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.AsyncClipboard/)
Expand Down Expand Up @@ -59,7 +63,7 @@ else
```

Internally, this method tests for the presence of the `write()` method on the `navigator.clipboard` object of the target browser.
This method allows copying (more or less) arbitrary data to the clipboard.
This method allows copying (more or less) arbitrary data to the clipboard.
Please note that Firefox only supports the `writeText()` method which writes plain text to the clipboard.
If you want to support browsers that only ship with support for `writeText()`, please implement a custom check.

Expand Down Expand Up @@ -103,7 +107,7 @@ With the following JavaScript code:

```js
export function getTextPromise() {
return new Promise((resolve) => resolve("Hello world"));
return new Promise((resolve) => resolve("Hello world"));
}
```

Expand Down
4 changes: 4 additions & 0 deletions src/Thinktecture.Blazor.Badging/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.Badging](https://www.nuget.org/packages/PatrickJahr.Blazor.Badging/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.Badging

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.Badging?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.Badging/)
Expand Down
20 changes: 13 additions & 7 deletions src/Thinktecture.Blazor.FileHandling/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.FileHandling](https://www.nuget.org/packages/PatrickJahr.Blazor.FileHandling/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.FileHandling

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.FileHandling?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.FileHandling/)
Expand Down Expand Up @@ -69,12 +73,14 @@ The `action` property contains the address that should be launched when a file w

```json
{
"file_handlers": [{
"action": "./",
"accept": {
"text/plain": [".txt"]
"file_handlers": [
{
"action": "./",
"accept": {
"text/plain": [".txt"]
}
}
}]
]
}
```

Expand All @@ -100,10 +106,10 @@ if (isSupported)
if (fileSystemHandle is FileSystemFileHandle fileSystemFileHandle)
{
var file = await fileSystemFileHandle.GetFileAsync();

var text1 = await file.TextAsync();
Console.WriteLine(text1);

var bytes = await file.ArrayBufferAsync();
var text2 = System.Text.Encoding.UTF8.GetString(bytes);
Console.WriteLine(text2);
Expand Down
16 changes: 9 additions & 7 deletions src/Thinktecture.Blazor.GrpcWeb.DevTools/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.GrpcWeb.DevTools](https://www.nuget.org/packages/PatrickJahr.Blazor.GrpcWeb.DevTools/), which offers improved features and better compatibility with the latest Blazor versions.

## Introduction

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.GrpcWeb.DevTools?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.GrpcWeb.DevTools/)
Expand All @@ -21,7 +25,6 @@ You also need the gRPC-Web Developer Tools Chrome Extsion

[Install gRPC-Web Developer Tools](https://chrome.google.com/webstore/detail/grpc-web-developer-tools/kanmilmfkjnoladbbamlclhccicldjaj)


### Platform support

The gRPC-Web Developer Tools only available for Google Chrome and Microsoft Edge browser.
Expand All @@ -38,20 +41,19 @@ dotnet add package Thinktecture.Blazor.GrpcWebDevTools

The package can be used in Blazor WebAssembly projects.


### Enable gRPC-Web Developer Tools on your project

At first you have to register a `GrpcChannel` in your `ServiceCollection` like this:

```csharp
builder.Services.AddScoped(services =>
{
var channel = GrpcChannel.ForAddress(backendUrl,
new GrpcChannelOptions
{
HttpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler())
var channel = GrpcChannel.ForAddress(backendUrl,
new GrpcChannelOptions
{
HttpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler())
});

return channel;
});
```
Expand Down
26 changes: 14 additions & 12 deletions src/Thinktecture.Blazor.PwaUpdate/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Thinktecture.Blazor.PwaUpdate
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.PwaUpdate](https://www.nuget.org/packages/PatrickJahr.Blazor.PwaUpdate/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.PwaUpdate

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.PwaUpdate?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.PwaUpdate/)

Expand Down Expand Up @@ -41,6 +44,7 @@ To make the UpdateService available on all pages, register it at the IServiceCol
builder.Services.AddUpdateService();

```

### Add to Imports

To use the default UpdateModal component on the hole app razor files, register it in the `_Imports.razor` file.
Expand Down Expand Up @@ -77,37 +81,37 @@ To use the default update modal, add the component to the main layout. For examp
<UpdateModal InformationMessage="Update available!"></UpdateModal>

...

```

As soon as an update is available, a modal will appear in the upper right corner as shown in the example.

![Pwa Update Model](../../images/update_sample.png)

If you do not want to use the default layout, you can also pass a ChildContent, which will be displayed instead of the default.
If you do not want to use the default layout, you can also pass a ChildContent, which will be displayed instead of the default.

```html
<UpdateModal>
<div>Update available!</div>
<button onclick="@Reload">Update</button>
<div>Update available!</div>
<button onclick="@Reload">Update</button>
</UpdateModal>
```

Another option is to override CSS variables:

- The color of the close icon can be changed by this variable: `--close-icon-color`
- The color must be an rgb valur like this: `255, 255, 255`
- The color must be an rgb valur like this: `255, 255, 255`
- The action button color can be changed by this variable: `--action-button-color`
- The color must be an rgb valur like this: `208, 188, 255`
- The color must be an rgb valur like this: `208, 188, 255`
- The background color of the modal can be changed by this variable: `--modal-background`
- The text color of the modal can be changed by this variable: `--on-modal-background`

### Update Service

If you do not want to use the modal, you can also use only the update service. To do this, you can make the `IUpdateService` service available to the component,
page, or service via dependency injection. To receive the event for an update, simply register for the `UpdateAvailable` event.
If you do not want to use the modal, you can also use only the update service. To do this, you can make the `IUpdateService` service available to the component,
page, or service via dependency injection. To receive the event for an update, simply register for the `UpdateAvailable` event.

Then call the initialization method `InitializeServiceWorkerUpdateAsync` to start the registration of the `StateChanged` event of the service worker.


```csharp
protected override async Task OnInitializedAsync()
{
Expand All @@ -117,8 +121,6 @@ protected override async Task OnInitializedAsync()
}
```



## Acknowledgements

Thanks to [Kristoffer Strube](https://twitter.com/kstrubeg) who provides [a Blazor wrapper for the File System Access API](https://github.com/KristofferStrube/Blazor.FileSystemAccess).
Expand Down
17 changes: 10 additions & 7 deletions src/Thinktecture.Blazor.ScreenWakeLock/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.ScreenWakeLock](https://www.nuget.org/packages/PatrickJahr.Blazor.ScreenWakeLock/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.ScreenWakeLock

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.ScreenWakeLock?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.ScreenWakeLock/)
Expand Down Expand Up @@ -60,16 +64,16 @@ else
### Request screen wake lock

To request a screen wake lock, you need to call the `RequestWakeLockAsync()` method from the `IScreenWakeLockService` service.
The browser can refuse the request for various reasons (for example, because the battery charge level is too low),
so it's a good practice to wrap the call in a `try…catch` statement.
The browser can refuse the request for various reasons (for example, because the battery charge level is too low),
so it's a good practice to wrap the call in a `try…catch` statement.
The exception's message will contain more details in case of failure.

```csharp
try
try
{
await _screenWakeLockService.RequestWakeLockAsync();
}
catch(Exception e)
catch(Exception e)
{
// Handle exxception
}
Expand All @@ -89,18 +93,17 @@ As soon as the object was released the action `WakeLockReleased` will be fired.
protected override async Task OnInitializedAsync()
{
//...
_screenWakeLockService.WakeLockReleased = () =>
{
_wakeLockRequested = false;
};

//...
await base.OnInitializedAsync();
}
```


## Related articles

- [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/WakeLock)
Expand Down
82 changes: 43 additions & 39 deletions src/Thinktecture.Blazor.ViewTransitions/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
⚠️ **This package is deprecated and will no longer receive updates.**

We recommend migrating to the new package, [PatrickJahr.ViewTransitions](https://www.nuget.org/packages/PatrickJahr.Blazor.ViewTransitions/), which offers improved features and better compatibility with the latest Blazor versions.

# Thinktecture.Blazor.ViewTransitions

[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.ViewTransitions?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.ViewTransitions/)

## Introduction

This package should help you to use the View Transition API in your Blazor application. The package contains two ways to use the View Transition API.
If you want to know how the View Transition API works look [here](https://drafts.csswg.org/css-view-transitions/#viewtransition).

Expand All @@ -22,14 +27,12 @@ Please note that View Transition API is not yet supported in all major browsers.

### Installation


You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:

```
dotnet add package Thinktecture.Blazor.ViewTransitions
```


## Usage

The package can be used in Blazor WebAssembly projects.
Expand Down Expand Up @@ -57,56 +60,57 @@ For this, you must add the component `RoutingViewTransition` to App.razor.
<RoutingViewTransition />

<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
```

### Manual view transition

The second option is to start the View Transition API using the IViewTransitionService.
The following steps are necessary for this:

- Add the IViewTransitionService to the component or class using DependencyInjection.

`[Inject] private IViewTransitionService _viewTransitionService { get; set; } = default!;`

- To perform a view transition, use the method `StartViewTransitionAsync()`. This takes two parameters.

- The first parameter is a task. This Task specifies when the transition can be performed. That means the new view is ready, and the transition can start. Please note that the View Transition API must first take a screenshot of the current state before the DOM is changed. The following example opens a dialog. The method `StartViewTransitionAsync()`, passed as a task, first waits briefly before setting the necessary parameters.

```csharp
private async Task ShowDialog(User user)
{
await _viewTransitionService.StartViewTransitionAsync(
InternalShowDialog(user),
CancellationToken.None);
}

private async Task InternalShowDialog(User user)
{
// New user is set and will dispatched
_dialogUser = user;
_dispatcher.Dispatch(new SelectUserAction(user));
// Wait for the first Screenshot of the current state
await Task.Delay(32);
// Reset the selected user. Because a view-transition-name css property may appear only once in the DOM.
_dispatcher.Dispatch(new SelectUserAction(null));
// Wait until the state has changed.
await Task.Delay(32);
_showDialog = true;
StateHasChanged();
}
```

- The second parameter is the `CancellationToken` to cancel the operation.
- The first parameter is a task. This Task specifies when the transition can be performed. That means the new view is ready, and the transition can start. Please note that the View Transition API must first take a screenshot of the current state before the DOM is changed. The following example opens a dialog. The method `StartViewTransitionAsync()`, passed as a task, first waits briefly before setting the necessary parameters.

```csharp
private async Task ShowDialog(User user)
{
await _viewTransitionService.StartViewTransitionAsync(
InternalShowDialog(user),
CancellationToken.None);
}

private async Task InternalShowDialog(User user)
{
// New user is set and will dispatched
_dialogUser = user;
_dispatcher.Dispatch(new SelectUserAction(user));
// Wait for the first Screenshot of the current state
await Task.Delay(32);
// Reset the selected user. Because a view-transition-name css property may appear only once in the DOM.
_dispatcher.Dispatch(new SelectUserAction(null));
// Wait until the state has changed.
await Task.Delay(32);
_showDialog = true;
StateHasChanged();
}
```

- The second parameter is the `CancellationToken` to cancel the operation.

That's it. Just try it out, and feel free to give feedback :-)

Expand Down
Loading

0 comments on commit 72d191a

Please sign in to comment.