frontend: implement autoscroll

This commit is contained in:
hippoz 2022-04-20 17:49:31 +03:00
parent 0d95b02401
commit e267ca4fc4
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 17 additions and 2 deletions

View file

@ -1,7 +1,7 @@
<script> <script>
import { HashIcon } from "svelte-feather-icons"; import { HashIcon } from "svelte-feather-icons";
import request from "../../../request"; import request from "../../../request";
import { apiRoute } from "../../../storage"; import { apiRoute } from "../../../storage";
import { messagesStoreProvider, userInfoStore } from "../../../stores"; import { messagesStoreProvider, userInfoStore } from "../../../stores";
import Messages from "./Messages.svelte"; import Messages from "./Messages.svelte";
@ -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.scrollIntoView();
}
});
const onScroll = (e) => { const onScroll = (e) => {
const { scrollTop, offsetHeight, scrollHeight } = e.target; const { scrollTop, offsetHeight, scrollHeight } = e.target;
if (scrollTop === 0) { if (scrollTop === 0) {
@ -37,4 +50,5 @@
<span>{ message.content }</span> <span>{ message.content }</span>
</div> </div>
{/each} {/each}
<div bind:this={ scrollTarget }></div>
</div> </div>