frontend: automatically keep scroll position when viewport is resized

This commit is contained in:
hippoz 2022-04-27 15:44:50 +03:00
parent 2847cfcebc
commit 1c87fa9758
Signed by: hippoz
GPG key ID: 7C52899193467641
3 changed files with 14 additions and 14 deletions

View file

@ -1,7 +1,7 @@
<script>
import request from "../request";
import { apiRoute } from "../storage";
import { messageInputFocusStatus, messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
export let channel;
let messageInput = "";
@ -76,7 +76,5 @@
class="message-input"
on:keydown={ onKeydown }
bind:value={ messageInput }
on:focus="{ () => messageInputFocusStatus.set(true) }"
on:blur="{ () => messageInputFocusStatus.set(false) }"
>
</div>

View file

@ -1,6 +1,6 @@
<script>
import { afterUpdate, beforeUpdate, onMount } from "svelte";
import { messageInputFocusStatus, messagesStoreProvider } from "../stores.js";
import { messagesStoreProvider, showSidebar } from "../stores.js";
import Message from "./Message.svelte";
export let channelId;
@ -8,17 +8,9 @@
let scrollAnchor;
let shouldAutoscroll = true;
let lastScrollHeight = null;
let isScrolledToBottom = false;
let isScrolledToBottom = true;
$: messages = messagesStoreProvider.getStore(channelId);
$: {
console.log($messageInputFocusStatus, isScrolledToBottom);
if ($messageInputFocusStatus && isScrolledToBottom) {
setTimeout(() => {
scrollTarget.scrollTop = scrollTarget.scrollHeight;
}, 0);
}
}
afterUpdate(() => {
// hacky way to preserve scroll position when messages are pushed back
@ -55,8 +47,19 @@
}
};
const windowDidResize = () => {
// TODO: hack
// showSidebar is false on small viewports
// scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
const isSmallViewport = !$showSidebar;
if (isScrolledToBottom || isSmallViewport) {
scrollAnchor.scrollIntoView(false);
}
};
</script>
<svelte:window on:resize={ windowDidResize } />
<style>
.messages-container {
height: 100%;

View file

@ -265,4 +265,3 @@ export const userInfoStore = new UserInfoStore();
export const overlayStore = new OverlayStore();
export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
export const showSidebar = writable(false);
export const messageInputFocusStatus = writable(false);