* convert component as Razor Class Library
This commit is contained in:
parent
a0d557383f
commit
9511bcca3a
16 changed files with 138 additions and 106 deletions
|
@ -5,6 +5,8 @@ VisualStudioVersion = 17.2.32314.265
|
|||
MinimumVisualStudioVersion = 10.0.40219.1
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorReorderExample", "BlazorReorderExample\BlazorReorderExample.csproj", "{43EF61CE-4621-48DB-8648-AA686391D140}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorReorderList", "BlazorReorderList\BlazorReorderList.csproj", "{3DCD1165-CC1D-4015-A6D4-CE97E8A4A72B}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
Debug|Any CPU = Debug|Any CPU
|
||||
|
@ -15,6 +17,10 @@ Global
|
|||
{43EF61CE-4621-48DB-8648-AA686391D140}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{43EF61CE-4621-48DB-8648-AA686391D140}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{43EF61CE-4621-48DB-8648-AA686391D140}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
{3DCD1165-CC1D-4015-A6D4-CE97E8A4A72B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
||||
{3DCD1165-CC1D-4015-A6D4-CE97E8A4A72B}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{3DCD1165-CC1D-4015-A6D4-CE97E8A4A72B}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{3DCD1165-CC1D-4015-A6D4-CE97E8A4A72B}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
EndGlobalSection
|
||||
GlobalSection(SolutionProperties) = preSolution
|
||||
HideSolutionNode = FALSE
|
||||
|
|
|
@ -11,6 +11,10 @@
|
|||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.2" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\BlazorReorderList\BlazorReorderList.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<PropertyGroup>
|
||||
<LibSassOutputStyle>compressed</LibSassOutputStyle>
|
||||
|
|
|
@ -1,57 +0,0 @@
|
|||
@page "/fetchdata"
|
||||
@inject HttpClient Http
|
||||
|
||||
<PageTitle>Weather forecast</PageTitle>
|
||||
|
||||
<h1>Weather forecast</h1>
|
||||
|
||||
<p>This component demonstrates fetching data from the server.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Temp. (C)</th>
|
||||
<th>Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
|
||||
}
|
||||
|
||||
public class WeatherForecast
|
||||
{
|
||||
public DateTime Date { get; set; }
|
||||
|
||||
public int TemperatureC { get; set; }
|
||||
|
||||
public string? Summary { get; set; }
|
||||
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
|
@ -17,8 +17,6 @@ Welcome to your new reorderer list.
|
|||
|
||||
@code
|
||||
{
|
||||
public record ListItem(string title, string url, string details);
|
||||
|
||||
public List<ListItem> list = new()
|
||||
{
|
||||
new ListItem("Google", "google.com", "Again looking for a bug ..."),
|
||||
|
|
|
@ -7,5 +7,8 @@ builder.RootComponents.Add<App>("#app");
|
|||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
builder.Services.AddTransient<BlazorReorderList.ReorderJsInterop<ListItem>>();
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
|
||||
public record ListItem(string title, string url, string details);
|
||||
|
|
|
@ -19,11 +19,6 @@
|
|||
<span class="oi oi-plus" aria-hidden="true"></span> Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="fetchdata">
|
||||
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -8,3 +8,4 @@
|
|||
@using Microsoft.JSInterop
|
||||
@using BlazorReorderExample
|
||||
@using BlazorReorderExample.Shared
|
||||
@using BlazorReorderList
|
||||
|
|
|
@ -20,39 +20,6 @@
|
|||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
|
||||
// get position of mouse/touch in relation to viewport
|
||||
function getPoint( e ) {
|
||||
var scrollX = Math.max( 0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0 ) - ( _d.clientLeft || 0 ),
|
||||
scrollY = Math.max( 0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0 ) - ( _d.clientTop || 0 ),
|
||||
pointX = e ? ( Math.max( 0, e.pageX || e.clientX || 0 ) - scrollX ) : 0,
|
||||
pointY = e ? ( Math.max( 0, e.pageY || e.clientY || 0 ) - scrollY ) : 0;
|
||||
|
||||
return { x: pointX, y: pointY };
|
||||
}
|
||||
|
||||
function initEvents(dotNetInstance) {
|
||||
window.addEventListener("mousemove", (e) => dotNetInstance.invokeMethodAsync("onMove", getPoint(e)), true);
|
||||
window.addEventListener("touchmove", (e) => dotNetInstance.invokeMethodAsync("onMove", getPoint(e)), true);
|
||||
window.addEventListener("mouseup", (e) => dotNetInstance.invokeMethodAsync("onRelease", e), true);
|
||||
window.addEventListener("touchend", (e) => dotNetInstance.invokeMethodAsync("onRelease", e), true);
|
||||
}
|
||||
|
||||
function getWidth(e) {
|
||||
return e.offsetWidth;
|
||||
}
|
||||
function getPosition(e) {
|
||||
return { x: e.offsetLeft, y: e.offsetTop };
|
||||
}
|
||||
function getClientRect(e) {
|
||||
return e.getBoundingClientRect();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
25
BlazorReorderList/BlazorReorderList.csproj
Normal file
25
BlazorReorderList/BlazorReorderList.csproj
Normal file
|
@ -0,0 +1,25 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
<ItemGroup>
|
||||
<SupportedPlatform Include="browser" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.2" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Update="Reorder.razor.scss">
|
||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
||||
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
|
||||
</None>
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
5
BlazorReorderList/Model.cs
Normal file
5
BlazorReorderList/Model.cs
Normal file
|
@ -0,0 +1,5 @@
|
|||
namespace BlazorReorderList;
|
||||
|
||||
public record point(int x, int y);
|
||||
public record clientRect(float left, float top, float right, float bottom, float x, float y, float width, float height);
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@typeparam TItem
|
||||
@inject IJSRuntime JS
|
||||
@using Microsoft.JSInterop
|
||||
@inject ReorderJsInterop<TItem> js
|
||||
|
||||
@if (debug)
|
||||
{
|
||||
|
@ -31,9 +32,6 @@
|
|||
[Parameter, EditorRequired] public List<TItem> Items { get; set; } = null!;
|
||||
[Parameter] public bool withShadow { get; set; } = true;
|
||||
|
||||
public record point(int x, int y);
|
||||
public record clientRect(float left, float top, float right, float bottom, float x, float y, float width, float height);
|
||||
|
||||
private bool shouldRender = true;
|
||||
private DotNetObjectReference<Reorder<TItem>>? dotNetHelper;
|
||||
ElementReference container;
|
||||
|
@ -63,7 +61,7 @@
|
|||
if (firstRender)
|
||||
{
|
||||
dotNetHelper = DotNetObjectReference.Create(this);
|
||||
await JS.InvokeVoidAsync("initEvents", dotNetHelper);
|
||||
await js.initEvents(dotNetHelper);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -72,9 +70,9 @@
|
|||
ghost = item;
|
||||
ghostElem = itemElem[index];
|
||||
elemIndex = index;
|
||||
elemWidth = await JS.InvokeAsync<int>("getWidth", ghostElem);
|
||||
elemPosition = await JS.InvokeAsync<point>("getPosition", ghostElem);
|
||||
elemClickPosition = await JS.InvokeAsync<point>("getPoint", m);
|
||||
elemWidth = await js.getWidth(ghostElem);
|
||||
elemPosition = await js.getPosition(ghostElem);
|
||||
elemClickPosition = await js.getPoint(m);
|
||||
Log($"onPress ({elemPosition.x}, {elemPosition.y}) {item}");
|
||||
await onMove(elemClickPosition);
|
||||
}
|
||||
|
@ -154,7 +152,7 @@
|
|||
// checks if mouse x/y is on top of an item
|
||||
async Task<bool> isOnTop(ElementReference item, point pos)
|
||||
{
|
||||
var box = await JS.InvokeAsync<clientRect>("getClientRect", item);
|
||||
var box = await js.getClientRect(item);
|
||||
Log($"\npos x: {pos.x}, y: {pos.y}\n item: left:{box.left}, width:{box.width}\nitem: top:{box.top}, height:{box.height}", true);
|
||||
var isx = (pos.x > box.left && pos.x < (box.left + box.width));
|
||||
var isy = (pos.y > box.top && pos.y < (box.top + box.height));
|
55
BlazorReorderList/ReorderJsInterop.cs
Normal file
55
BlazorReorderList/ReorderJsInterop.cs
Normal file
|
@ -0,0 +1,55 @@
|
|||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace BlazorReorderList;
|
||||
|
||||
public class ReorderJsInterop<TItem> : IAsyncDisposable
|
||||
{
|
||||
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
|
||||
|
||||
public ReorderJsInterop(IJSRuntime jsRuntime)
|
||||
{
|
||||
moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./_content/BlazorReorderList/ReorderJsInterop.js").AsTask());
|
||||
}
|
||||
|
||||
public async ValueTask initEvents(DotNetObjectReference<Reorder<TItem>> dotNetInstance)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
await module.InvokeVoidAsync("initEvents", dotNetInstance);
|
||||
}
|
||||
|
||||
public async ValueTask<int> getWidth(ElementReference el)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
return await module.InvokeAsync<int>("getWidth", el);
|
||||
}
|
||||
|
||||
public async ValueTask<point> getPosition(ElementReference el)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
return await module.InvokeAsync<point>("getPosition", el);
|
||||
}
|
||||
|
||||
public async ValueTask<point> getPoint(MouseEventArgs ev)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
return await module.InvokeAsync<point>("getPoint", ev);
|
||||
}
|
||||
|
||||
public async ValueTask<clientRect> getClientRect(ElementReference el)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
return await module.InvokeAsync<clientRect>("getClientRect", el);
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (moduleTask.IsValueCreated)
|
||||
{
|
||||
var module = await moduleTask.Value;
|
||||
await module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
}
|
1
BlazorReorderList/_Imports.razor
Normal file
1
BlazorReorderList/_Imports.razor
Normal file
|
@ -0,0 +1 @@
|
|||
@using Microsoft.AspNetCore.Components.Web
|
31
BlazorReorderList/wwwroot/ReorderJsInterop.js
Normal file
31
BlazorReorderList/wwwroot/ReorderJsInterop.js
Normal file
|
@ -0,0 +1,31 @@
|
|||
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
|
||||
// get position of mouse/touch in relation to viewport
|
||||
export function getPoint(e) {
|
||||
var scrollX = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
|
||||
scrollY = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0),
|
||||
pointX = e ? (Math.max(0, e.pageX || e.clientX || 0) - scrollX) : 0,
|
||||
pointY = e ? (Math.max(0, e.pageY || e.clientY || 0) - scrollY) : 0;
|
||||
|
||||
return { x: pointX, y: pointY };
|
||||
}
|
||||
|
||||
export function initEvents(dotNetInstance) {
|
||||
window.addEventListener("mousemove", (e) => dotNetInstance.invokeMethodAsync("onMove", getPoint(e)), true);
|
||||
window.addEventListener("touchmove", (e) => dotNetInstance.invokeMethodAsync("onMove", getPoint(e)), true);
|
||||
window.addEventListener("mouseup", (e) => dotNetInstance.invokeMethodAsync("onRelease", e), true);
|
||||
window.addEventListener("touchend", (e) => dotNetInstance.invokeMethodAsync("onRelease", e), true);
|
||||
}
|
||||
|
||||
export function getWidth(e) {
|
||||
return e.offsetWidth;
|
||||
}
|
||||
export function getPosition(e) {
|
||||
return { x: e.offsetLeft, y: e.offsetTop };
|
||||
}
|
||||
export function getClientRect(e) {
|
||||
return e.getBoundingClientRect();
|
||||
}
|
Loading…
Reference in a new issue