Compare commits
No commits in common. "addfddd3ac0342497e6215373eb773c0903fdf0f" and "0d95b0240191a1d0255d8455bb08f56a3a23f2b7" have entirely different histories.
addfddd3ac
...
0d95b02401
2 changed files with 3 additions and 17 deletions
|
@ -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,10 +28,9 @@
|
||||||
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: optimisticMessage.content
|
content: messageInput
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.success && res.ok) {
|
if (res.success && res.ok) {
|
||||||
|
|
|
@ -1,23 +1,10 @@
|
||||||
<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) {
|
||||||
|
@ -43,7 +30,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
|
<div class="messages-container" on:scroll={ onScroll }>
|
||||||
{#each $messages as message (message.id)}
|
{#each $messages as message (message.id)}
|
||||||
<div>
|
<div>
|
||||||
<b>{ message.author_username }</b>
|
<b>{ message.author_username }</b>
|
||||||
|
|
Loading…
Reference in a new issue