hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: automatically keep scroll position when viewport is resized

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/MessageInput.svelte
View file

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

23
frontend/src/components/Messages.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import { afterUpdate, beforeUpdate, onMount } from "svelte"; import { afterUpdate, beforeUpdate, onMount } from "svelte";
import { messageInputFocusStatus, messagesStoreProvider } from "../stores.js"; import { messagesStoreProvider, showSidebar } from "../stores.js";
import Message from "./Message.svelte"; import Message from "./Message.svelte";
export let channelId; export let channelId;
@ -8,17 +8,9 @@
let scrollAnchor; let scrollAnchor;
let shouldAutoscroll = true; let shouldAutoscroll = true;
let lastScrollHeight = null; let lastScrollHeight = null;
let isScrolledToBottom = false; let isScrolledToBottom = true;
$: messages = messagesStoreProvider.getStore(channelId); $: messages = messagesStoreProvider.getStore(channelId);
$: {
console.log($messageInputFocusStatus, isScrolledToBottom);
if ($messageInputFocusStatus && isScrolledToBottom) {
setTimeout(() => {
scrollTarget.scrollTop = scrollTarget.scrollHeight;
}, 0);
}
}
afterUpdate(() => { afterUpdate(() => {
// hacky way to preserve scroll position when messages are pushed back // 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> </script>
<svelte:window on:resize={ windowDidResize } />
<style> <style>
.messages-container { .messages-container {
height: 100%; height: 100%;

1
frontend/src/stores.js
View file

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