Hold reads scroll position

This commit is contained in:
Bojan Mojsilovic 2024-06-20 11:09:25 +02:00
parent 16c7c1c650
commit 94c91bdc42
2 changed files with 47 additions and 3 deletions

View File

@ -16,6 +16,7 @@ import LoginModal from '../LoginModal/LoginModal';
import { userName } from '../../stores/profile'; import { userName } from '../../stores/profile';
import { PrimalUser } from '../../types/primal'; import { PrimalUser } from '../../types/primal';
import ReedSelect from '../FeedSelect/ReedSelect'; import ReedSelect from '../FeedSelect/ReedSelect';
import { useReadsContext } from '../../contexts/ReadsContext';
const ReadsHeader: Component< { const ReadsHeader: Component< {
id?: string, id?: string,
@ -25,6 +26,48 @@ const ReadsHeader: Component< {
newPostAuthors: PrimalUser[], newPostAuthors: PrimalUser[],
} > = (props) => { } > = (props) => {
const reads = useReadsContext();
let lastScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const onScroll = () => {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// const smallHeader = document.getElementById('small_header');
const border = document.getElementById('small_bottom_border');
reads?.actions.updateScrollTop(scrollTop);
const isScrollingDown = scrollTop > lastScrollTop;
lastScrollTop = scrollTop;
if (scrollTop < 2) {
if (border) {
border.style.display = 'none';
}
return;
}
if (lastScrollTop < 2) {
return;
}
if (border) {
border.style.display = 'flex';
}
if (!isScrollingDown) {
return;
}
}
onMount(() => {
window.addEventListener('scroll', onScroll);
});
onCleanup(() => {
window.removeEventListener('scroll', onScroll);
});
return ( return (
<div id={props.id}> <div id={props.id}>
<div class={`${styles.bigFeedSelect} ${styles.readsFeed}`}> <div class={`${styles.bigFeedSelect} ${styles.readsFeed}`}>

View File

@ -64,7 +64,7 @@ const Home: Component = () => {
onMount(() => { onMount(() => {
setIsHome(true); // setIsHome(true);
scrollWindowTo(context?.scrollTop); scrollWindowTo(context?.scrollTop);
}); });
@ -138,14 +138,14 @@ const Home: Component = () => {
createEffect(() => { createEffect(() => {
if (account?.isKeyLookupDone && account.publicKey) { if (account?.isKeyLookupDone && account.publicKey) {
context?.actions.clearNotes();
if (params.topic) { if (params.topic) {
context?.actions.clearNotes();
context?.actions.fetchNotes(`filter;${decodeURIComponent(params.topic)}`, APP_ID); context?.actions.fetchNotes(`filter;${decodeURIComponent(params.topic)}`, APP_ID);
return; return;
} }
context?.actions.resetSelectedFeed(); // context?.actions.resetSelectedFeed();
context?.actions.selectFeed({ hex: account.publicKey, name: 'My Reads'}); context?.actions.selectFeed({ hex: account.publicKey, name: 'My Reads'});
} }
}); });
@ -175,6 +175,7 @@ const Home: Component = () => {
<Link <Link
class={styles.backToReads} class={styles.backToReads}
href={'/reads'} href={'/reads'}
onClick={() => context?.actions.resetSelectedFeed()}
> >
Reads: Reads:
</Link> </Link>