132 lines
4 KiB
Text
132 lines
4 KiB
Text
@page "/pics"
|
|
@inject State State
|
|
@inject IJSRuntime JS
|
|
|
|
|
|
<div class="row center-align">
|
|
<h3>
|
|
<i class="fa-solid fa-images"></i> Some.pics
|
|
</h3>
|
|
</div>
|
|
<div class="row center-align">
|
|
<p>Sit back, relax, and look at <a href="https://some.pics/">some.pics</a></p>
|
|
</div>
|
|
|
|
<AuthorizeView>
|
|
<Authorized>
|
|
<button class="fab circle extra large-elevate" data-ui="#post-modal">
|
|
<i class="fa-solid fa-camera-retro"></i>
|
|
</button>
|
|
<NewPicDialog id="post-modal"></NewPicDialog>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
|
|
<template id="PicCard">
|
|
<article class="no-padding">
|
|
<img src="{{Pic.Url}}" loading="lazy">
|
|
<div class="padding">
|
|
<nav>
|
|
<a class="author" href="/person/{{Pic.Address}}#pics">
|
|
<i class="fa-solid fa-fw fa-at"></i>{{Pic.Address}}
|
|
</a>
|
|
<span class="max"></span>
|
|
<a class="chip transparent-border right">
|
|
<i class="fa fa-clock"></i> {{Pic.RelativeTime}}
|
|
</a>
|
|
<span class="max"></span>
|
|
<button class="right-align share-button transparent circle">
|
|
<input type="hidden" name="url" value="{{Pic.Url}}" />
|
|
<input type="hidden" name="description" value="{{Pic.Description}}" />
|
|
<i class="fa-solid fa-share-nodes"></i>
|
|
</button>
|
|
</nav>
|
|
<p class="description">{{Pic.Description}}</p>
|
|
<nav>
|
|
<div class="max"></div>
|
|
@* @if (Editable) {
|
|
<button @onclick="EditPic"><i class="fa-solid fa-pencil"></i> Edit</button>
|
|
} *@
|
|
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<div id="pics" class="responsive card-grid">
|
|
@* <PicList PicsFunc="@State.VirtualPicsFunc()"></PicList> *@
|
|
<article id="pics-loading" class="middle-align center-align">
|
|
<div>
|
|
<i class="extra fa-solid fa-images"></i>
|
|
<div class="space"></div>
|
|
<progress class="circle"></progress>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<script>
|
|
const template = document.getElementById("PicCard")
|
|
let cSharp;
|
|
async function renderPics(somePics) {
|
|
for(const pic of somePics){
|
|
const clone = template.content.cloneNode(true)
|
|
let html = clone.children[0].innerHTML
|
|
|
|
html = html.replaceAll("{{Pic.Url}}", pic.url)
|
|
html = html.replaceAll("{{Pic.Address}}", pic.address)
|
|
html = html.replaceAll("{{Pic.RelativeTime}}", pic.relativeTime)
|
|
html = html.replaceAll("{{Pic.Description}}", pic.description)
|
|
|
|
clone.children[0].innerHTML = html
|
|
|
|
clone.querySelector('.share-button').addEventListener('click', shareClick)
|
|
document.getElementById("pics").insertBefore(clone, document.getElementById("pics-loading"))
|
|
}
|
|
}
|
|
async function clearLoading() {
|
|
document.getElementById("pics-loading").remove()
|
|
}
|
|
|
|
async function shareClick(e) {
|
|
const url = this.querySelector('input[name="url"]')?.value
|
|
const desc = this.querySelector('input[name="description"]')?.value
|
|
if (cSharp) cSharp.invokeMethodAsync('ShareClick', url, desc)
|
|
}
|
|
|
|
async function setDotNetHelper(helper) {
|
|
cSharp = helper;
|
|
}
|
|
</script>
|
|
|
|
@code {
|
|
private List<Pic> pics;
|
|
private DotNetObjectReference<Pics>? objRef;
|
|
|
|
protected override void OnInitialized() {
|
|
objRef = DotNetObjectReference.Create(this);
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender) {
|
|
await base.OnAfterRenderAsync(firstRender);
|
|
if (firstRender) {
|
|
await JS.InvokeVoidAsync("setDotNetHelper", objRef);
|
|
RestService api = new RestService();
|
|
if (pics == null || pics.Count == 0) pics = await api.SomePics();
|
|
|
|
int page_size = 1;
|
|
for(int i = 0; i < pics.Count; i += page_size) {
|
|
await JS.InvokeVoidAsync("renderPics", pics.Skip(i * page_size).Take(page_size));
|
|
}
|
|
await JS.InvokeVoidAsync("clearLoading");
|
|
}
|
|
}
|
|
|
|
[JSInvokable]
|
|
public async Task ShareClick(string? url, string? description) {
|
|
await Share.Default.RequestAsync(new ShareTextRequest {
|
|
Uri = url,
|
|
Text = description,
|
|
Title = "I saw this on some.pics",
|
|
Subject = "I saw this on some.pics"
|
|
});
|
|
}
|
|
}
|