root/BlazorReorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

* convert component as Razor Class Library

Browse source
This commit is contained in:
Santiago Cattaneo 2022-04-05 18:43:31 -03:00
parent a0d557383f
commit 9511bcca3a
16 changed files with 138 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
BlazorReorder.sln
View file

@ -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

4
BlazorReorderExample/BlazorReorderExample.csproj
View file

@ -12,6 +12,10 @@
<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>
<LibSassOutputStyle Condition="'$(Configuration)' == 'Debug'">expanded</LibSassOutputStyle>

57
BlazorReorderExample/Pages/FetchData.razor
View file

@ -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);
}
}

2
BlazorReorderExample/Pages/Index.razor
View file

@ -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 ..."),

3
BlazorReorderExample/Program.cs
View file

@ -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);

5
BlazorReorderExample/Shared/NavMenu.razor
View file

@ -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>

1
BlazorReorderExample/_Imports.razor
View file

@ -8,3 +8,4 @@
@using Microsoft.JSInterop
@using BlazorReorderExample
@using BlazorReorderExample.Shared
@using BlazorReorderList

33
BlazorReorderExample/wwwroot/index.html
View file

@ -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
View 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
View 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);

16
BlazorReorderExample/Shared/Reorder.razor → BlazorReorderList/Reorder.razor
View file

@ -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));

0
BlazorReorderExample/Shared/Reorder.razor.css → BlazorReorderList/Reorder.razor.css
View file

0
BlazorReorderExample/Shared/Reorder.razor.scss → BlazorReorderList/Reorder.razor.scss
View file

55
BlazorReorderList/ReorderJsInterop.cs Normal file
View 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
View file

@ -0,0 +1 @@
@using Microsoft.AspNetCore.Components.Web

31
BlazorReorderList/wwwroot/ReorderJsInterop.js Normal file
View 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();
}