108 lines
3.8 KiB
Text
108 lines
3.8 KiB
Text
@inject IJSRuntime JS
|
|
@inject State State
|
|
@inject ApiService api
|
|
@inject NavigationManager navigationManager
|
|
@inject NavigatorService navigatorService
|
|
|
|
<div class="overlay @(Active ? "active" : string.Empty)" data-ui="#@id"></div>
|
|
<dialog id="@id" class="@(Active ? "active" : string.Empty)" open="@Active">
|
|
<h5>Share your status</h5>
|
|
<div class="row">
|
|
<div class="min square extra">
|
|
<button class="transparent square extra no-margin">
|
|
<object id="new-status-emoji" class="large emoji @(Emoji == null ? "animated" : string.Empty)" data-emoji="@(Emoji ?? "🫥")">@(Emoji ?? "🫥")</object>
|
|
<menu class="no-wrap">
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
|
|
<emoji-picker emoji-version="15.1"></emoji-picker>
|
|
<script>
|
|
document.querySelector('emoji-picker')
|
|
.addEventListener('emoji-click', event => {
|
|
document.getElementById('new-status-emoji').setAttribute('data-emoji', event.detail.unicode)
|
|
const input = document.getElementById('new-status-emoji-input')
|
|
input.value = event.detail.unicode
|
|
var event = new Event('change');
|
|
input.dispatchEvent(event);
|
|
})
|
|
</script>
|
|
</menu>
|
|
</button>
|
|
</div>
|
|
<div class="field textarea border max">
|
|
<textarea @bind="@Content" @bind:event="oninput" />
|
|
<div class="right-align"><small class="@( Content.Length >= 500 ? "red" : Content.Length >= 260 ? "yellow-text" : "")">@Content.Length / 500</small></div>
|
|
</div>
|
|
</div>
|
|
<nav class="right-align no-space">
|
|
@if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false) {
|
|
<label class="checkbox">
|
|
<InputCheckbox @bind-Value="postToMastodon"></InputCheckbox>
|
|
<span>Post this to Mastodon</span>
|
|
</label>
|
|
}
|
|
<InputText id="new-status-emoji-input" class="invisible" @bind-Value="Emoji"></InputText>
|
|
<button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
|
|
<button @onclick="PostStatus" disabled="@loading">
|
|
@if (loading) {
|
|
<span>Saving...</span>
|
|
}
|
|
else {
|
|
<i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
|
|
}
|
|
</button>
|
|
</nav>
|
|
</dialog>
|
|
|
|
@code {
|
|
[Parameter]
|
|
public string? id { get; set; }
|
|
[Parameter]
|
|
public bool Active { get; set; }
|
|
[Parameter]
|
|
public string Content { get; set; } = string.Empty;
|
|
[Parameter]
|
|
public string? Emoji { get; set; } = null;
|
|
[Parameter]
|
|
public bool postToMastodon { get; set; } = true;
|
|
|
|
private bool loading = false;
|
|
|
|
public async Task PostStatus() {
|
|
|
|
StatusPost post = new StatusPost {
|
|
Emoji = Emoji,
|
|
Content = Content
|
|
};
|
|
|
|
if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false) {
|
|
post.SkipMastodonPost = !postToMastodon;
|
|
}
|
|
|
|
if(Content.Length >= 500) {
|
|
bool answer = await navigatorService.Page!.DisplayAlert(
|
|
"Character limit reached",
|
|
"Your message is over 500 characters, which is a lot for a status.\n"
|
|
+ ((postToMastodon && !(post.SkipMastodonPost ?? true))? "If you continue, your post will not make it over to Mastodon.\n" : "")
|
|
+ "Do you wish to post it anyway?",
|
|
"Yes", "No"
|
|
);
|
|
if (!answer) return;
|
|
}
|
|
|
|
loading = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
var result = await api.StatusPost(State!.SelectedAddressName!, post);
|
|
if(result != null){
|
|
await State.RefreshStatuses();
|
|
State.SendRefresh();
|
|
await InvokeAsync(StateHasChanged);
|
|
// navigationManager.NavigateTo("/statuslog/latest");
|
|
}
|
|
|
|
this.Active = false;
|
|
await JS.InvokeVoidAsync("ui", "#" + id);
|
|
Content = string.Empty;
|
|
Emoji = null;
|
|
postToMastodon = true;
|
|
loading = false;
|
|
}
|
|
}
|