124 lines
3.3 KiB
Svelte
124 lines
3.3 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { server } from '$lib/client/server';
|
|
import Lang from '$lib/lang';
|
|
|
|
import BoostContext from './BoostContext.svelte';
|
|
import ReplyContext from './ReplyContext.svelte';
|
|
import PostHeader from './PostHeader.svelte';
|
|
import Body from './Body.svelte';
|
|
import ActionBar from './ActionBar.svelte';
|
|
import ReactionBar from './ReactionBar.svelte';
|
|
|
|
export let post_data;
|
|
export let focused = false;
|
|
export let pinned = false;
|
|
|
|
const lang = Lang('en_GB');
|
|
|
|
let post_context = undefined;
|
|
let post = post_data;
|
|
let is_boost = !!post_data.boost;
|
|
if (is_boost) {
|
|
post_context = post_data;
|
|
post = post_data.boost;
|
|
}
|
|
|
|
let mouse_pos = { top: 0, left: 0 };
|
|
|
|
function gotoPost(event) {
|
|
if (focused) return;
|
|
if (event) {
|
|
if (event.type == "mouseup" && (
|
|
event.button !== 0 ||
|
|
event.shiftKey ||
|
|
event.ctrlKey)) return;
|
|
if (event.key && event.key !== "Enter") return;
|
|
}
|
|
goto(`/${$server.host}/${post.account.mention}/${post.id}`);
|
|
}
|
|
|
|
let el;
|
|
onMount(() => {
|
|
if (focused) {
|
|
window.scrollTo(0, el.scrollHeight);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="post-container">
|
|
{#if post.reply}
|
|
{#await post.reply then reply}
|
|
<ReplyContext post={reply} />
|
|
{/await}
|
|
{/if}
|
|
{#if pinned}
|
|
<p class="pinned">{lang.string('post.pinned')}</p>
|
|
{/if}
|
|
{#if is_boost && !post_context.text}
|
|
<BoostContext post={post_context} />
|
|
{/if}
|
|
<article
|
|
class={"post" + (focused ? " focused" : "")}
|
|
aria-label={post.account.username + '; ' + post.text + '; ' + post.created_at}
|
|
bind:this={el}
|
|
on:mousedown={e => {mouse_pos.left = e.pageX; mouse_pos.top = e.pageY}}
|
|
on:mouseup={e => {if (e.pageX == mouse_pos.left && e.pageY == mouse_pos.top) gotoPost(e)}}
|
|
on:keydown={gotoPost}>
|
|
<PostHeader post={post} />
|
|
<Body post={post} />
|
|
<footer class="post-footer">
|
|
{#if post.reactions}
|
|
<ReactionBar post={post} />
|
|
{/if}
|
|
<ActionBar post={post} />
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
|
|
<style>
|
|
.post-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1px solid color-mix(in srgb, transparent, var(--text) 20%);
|
|
background: var(--bg-900);
|
|
}
|
|
.post-container:first-of-type {
|
|
border-top: none;
|
|
}
|
|
|
|
.pinned {
|
|
margin: 1em 1.2em -.2em 1.2em;
|
|
font-size: .8em;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.post {
|
|
padding: 16px;
|
|
transition: background-color .1s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.post:not(.focused) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.post.focused {
|
|
border: 1px solid color-mix(in srgb, transparent, var(--accent) 20%);
|
|
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 20%);
|
|
}
|
|
|
|
.post:hover {
|
|
background-color: color-mix(in srgb, transparent, var(--bg-800) 25%);
|
|
}
|
|
|
|
.post-container:has(.post-context) .post {
|
|
padding-top: 40px;
|
|
margin-top: -32px;
|
|
}
|
|
|
|
.post-container :global(.emoji) {
|
|
height: 20px;
|
|
}
|
|
</style>
|