Compare commits

...

2 commits

Author SHA1 Message Date
hippoz
addfddd3ac
frontend: fix autoscroll breaking message loading 2022-04-20 17:53:20 +03:00
hippoz
e267ca4fc4
frontend: implement autoscroll 2022-04-20 17:49:31 +03:00
2 changed files with 17 additions and 3 deletions

View file

@ -28,9 +28,10 @@ import { apiRoute } from "../../../storage";
createdAt: Date.now().toString() createdAt: Date.now().toString()
}; };
messages.addMessage(optimisticMessage); messages.addMessage(optimisticMessage);
messageInput = "";
const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, { const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
content: messageInput content: optimisticMessage.content
}); });
if (res.success && res.ok) { if (res.success && res.ok) {

View file

@ -1,10 +1,23 @@
<script> <script>
import { afterUpdate, beforeUpdate } from "svelte";
import { messagesStoreProvider } from "../../../stores.js"; import { messagesStoreProvider } from "../../../stores.js";
export let channelId; export let channelId;
let scrollTarget;
let shouldAutoscroll = false;
$: messages = messagesStoreProvider.getStore(channelId); $: messages = messagesStoreProvider.getStore(channelId);
beforeUpdate(() => {
shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
});
afterUpdate(() => {
if (shouldAutoscroll && scrollTarget) {
scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
}
});
const onScroll = (e) => { const onScroll = (e) => {
const { scrollTop, offsetHeight, scrollHeight } = e.target; const { scrollTop, offsetHeight, scrollHeight } = e.target;
if (scrollTop === 0) { if (scrollTop === 0) {
@ -30,7 +43,7 @@
} }
</style> </style>
<div class="messages-container" on:scroll={ onScroll }> <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)} {#each $messages as message (message.id)}
<div> <div>
<b>{ message.author_username }</b> <b>{ message.author_username }</b>