waffle/frontend/src/components/pages/main/Messages.svelte

58 lines
1.6 KiB
Svelte
Raw Normal View History

<script>
2022-04-20 17:49:31 +03:00
import { afterUpdate, beforeUpdate } from "svelte";
import { messagesStoreProvider } from "../../../stores.js";
export let channelId;
2022-04-20 17:49:31 +03:00
let scrollTarget;
let shouldAutoscroll = false;
$: messages = messagesStoreProvider.getStore(channelId);
2022-04-20 17:49:31 +03:00
beforeUpdate(() => {
shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
});
afterUpdate(() => {
if (shouldAutoscroll && scrollTarget) {
scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
2022-04-20 17:49:31 +03:00
}
});
const onScroll = (e) => {
const { scrollTop, offsetHeight, scrollHeight } = e.target;
if (scrollTop === 0) {
messages.loadOlderMessages();
}
if ((scrollTop + offsetHeight) >= scrollHeight) {
messages.setIsCollectingOldMessages(true);
} else {
messages.setIsCollectingOldMessages(false);
}
};
</script>
<style>
.messages-container {
padding: var(--space-sm);
height: 100%;
width: 100%;
flex-grow: 0;
overflow-y: auto;
background-color: var(--background-color-1);
}
.pending {
color: var(--foreground-color-2);
}
</style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)}
<div>
<b>{ message.author_username }</b>
<span class:pending={ message._isPending }>{ message.content }</span>
</div>
{/each}
</div>