Iceshrimp.NET/Iceshrimp.Frontend/Components/EmojiPicker.razor
2024-09-13 21:44:31 +02:00

55 lines
No EOL
1.9 KiB
Text

@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas.Web
@inject EmojiService EmojiService
@inject GlobalComponentSvc GlobalComponentSvc
@inject IJSRuntime Js
<dialog class="dialog" @ref="EmojiPickerRef">
<div class="emoji-picker" style="--top: @(_top)px; --left: @(_left)px">
@foreach (var el in EmojiList)
{
<div class="emoji">
<img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
</div>
}
</div>
<ClosingBackdrop OnClose="Close"></ClosingBackdrop>
</dialog>
@code {
private EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
private List<EmojiResponse> EmojiList { get; set; } = [];
private ElementReference EmojiPickerRef { get; set; }
private float _top;
private float _left;
private IJSInProcessObjectReference _module = null!;
protected override async Task OnInitializedAsync()
{
GlobalComponentSvc.EmojiPicker = this;
EmojiList = await EmojiService.GetEmoji();
_module = (IJSInProcessObjectReference)await Js.InvokeAsync<IJSObjectReference>("import",
"./Components/EmojiPicker.razor.js");
}
private async void Select(EmojiResponse emoji)
{
await OnEmojiSelect.InvokeAsync(emoji);
}
private void Close()
{
_module.InvokeVoid("closeDialog", EmojiPickerRef);
}
public void Open(ElementReference root, EventCallback<EmojiResponse> func)
{
OnEmojiSelect = func;
var pos = _module.Invoke<List<float>>("getPosition", root);
_left = pos[0];
_top = pos[1];
StateHasChanged();
_module.InvokeVoid("openDialog", EmojiPickerRef);
}
}