zaire/campfire
1
0
Fork 0
forked from blisstown/campfire
Code Pull requests Activity

finish sk restructure, a11y and optimisations

Browse source
This commit is contained in:
ari melody 2024-06-29 14:48:34 +01:00
parent 9ef27fd2a2
commit 3ae05b3f9f
Signed by: ari
GPG key ID: CF99829C92678188
61 changed files with 416 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/lib/ui/Feed.svelte
View file

@ -2,104 +2,33 @@
import Button from './Button.svelte';
import Post from './post/Post.svelte';
import Error from './Error.svelte';
import { Client } from '../client/client.js';
import { parsePost } from '../client/api.js';
import { Client } from '$lib/client/client.js';
import { parsePost } from '$lib/client/api.js';
import { get } from 'svelte/store';
import { posts, getTimeline } from '$lib/timeline.js';
let params = new URLSearchParams(location.search);
let client = get(Client.get());
let posts = [];
let loading = false;
let focus_post_id = location.pathname.startsWith("/post/") ? location.pathname.substring(6) : false;
let error;
async function getTimeline() {
if (loading) return; // no spamming!!
loading = true;
let timeline_data;
if (posts.length === 0) timeline_data = await client.getTimeline()
else timeline_data = await client.getTimeline(posts[posts.length - 1].id);
if (!timeline_data) {
console.error(`Failed to retrieve timeline.`);
loading = false;
return;
getTimeline();
document.addEventListener("scroll", event => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
}
for (let i in timeline_data) {
const post_data = timeline_data[i];
const post = await parsePost(post_data, 1, false);
if (!post) {
if (post === null || post === undefined) {
if (post_data.id) {
console.warn("Failed to parse post #" + post_data.id);
} else {
console.warn("Failed to parse post:");
console.warn(post_data);
}
}
continue;
}
posts = [...posts, post];
}
loading = false;
}
async function getPost(post_id) {
loading = true;
const post_data = await client.getPost(post_id);
if (!post_data) {
console.error(`Failed to retrieve post ${post_id}.`);
loading = false;
return;
}
const post = await parsePost(post_data, 10, true);
posts = [post];
for (let i in post.replies) {
posts = [...posts, post.replies[i]];
}
loading = false;
}
if (focus_post_id) {
getPost(focus_post_id);
} else {
getTimeline();
document.addEventListener("scroll", event => {
if (!loading && window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
}
});
}
});
</script>
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<div id="feed">
<div id="feed" role="feed">
{#if posts.length <= 0}
<div class="throb">
<span>just a moment...</span>
<div class="loading throb">
<span>getting the feed...</span>
</div>
{/if}
{#each posts as post}
<Post post_data={post} focused={post.id === focus_post_id} />
{#each $posts as post}
<Post post_data={post} />
{/each}
</div>
<style>
header {
width: 100%;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
@ -120,7 +49,7 @@
margin-bottom: 20vh;
}
.throb {
.loading {
width: 100%;
height: 80vh;
display: flex;