40 lines
999 B
Svelte
40 lines
999 B
Svelte
|
<script>
|
||
|
|
import { messagesStoreProvider } from "../../../stores.js";
|
||
|
|
|
||
|
|
export let channelId;
|
||
|
|
|
||
|
|
const messages = messagesStoreProvider.getStore(channelId);
|
||
|
|
if (!messages.didInitialLoad)
|
||
|
|
messages.doInitialLoad();
|
||
|
|
|
||
|
|
const onScroll = (e) => {
|
||
|
|
const { scrollTop, offsetHeight, scrollHeight } = e.target;
|
||
|
|
if ((scrollTop + offsetHeight) >= scrollHeight) {
|
||
|
|
setIsCollectingOldMessages(true);
|
||
|
|
} else {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="messages-container" on:scroll={ onScroll }>
|
||
|
|
{#each $messages as message (message.id)}
|
||
|
|
<div>
|
||
|
|
<b>{ message.author_username }</b>
|
||
|
|
<span>{ message.content }</span>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|