From dab4bcd41e1d84a15a1f9fa48861a6d5c9e5115e Mon Sep 17 00:00:00 2001 From: ilia tapazukk Date: Thu, 20 Apr 2023 14:01:15 +0000 Subject: [PATCH 01/11] Anchor revert --- src/components/Article/FullArticle.tsx | 9 +++++- src/components/Feed/Card.tsx | 12 +++++++- src/components/Nav/Header.tsx | 6 ++-- src/components/Views/Author.tsx | 42 ++++++++++++-------------- src/stores/router.ts | 27 +---------------- src/stores/zine/common.ts | 1 - 6 files changed, 42 insertions(+), 55 deletions(-) diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index c299fbf8..1dccce99 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -90,7 +90,6 @@ export const FullArticle = (props: ArticleProps) => { }) const commentsRef: { current: HTMLDivElement } = { current: null } - const scrollToComments = () => { window.scrollTo({ top: commentsRef.current.offsetTop - 96, @@ -98,12 +97,20 @@ export const FullArticle = (props: ArticleProps) => { behavior: 'smooth' }) } + const { searchParams } = useRouter() createEffect(() => { if (props.scrollToComments) { scrollToComments() } }) + const { changeSearchParam } = useRouter() + createEffect(() => { + if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { + scrollToComments() + changeSearchParam('scrollTo', null) + } + }) const { actions: { loadReactionsBy } diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index 4424badf..ff651bf0 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -12,6 +12,8 @@ import stylesHeader from '../Nav/Header.module.scss' import { getDescription } from '../../utils/meta' import { FeedArticlePopup } from './FeedArticlePopup' import { useLocalize } from '../../context/localize' +import { openPage } from '@nanostores/router' +import { router, useRouter } from '../../stores/router' interface ArticleCardProps { settings?: { @@ -35,6 +37,7 @@ interface ArticleCardProps { isBeside?: boolean } article: Shout + scrollTo: 'comments' } const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string } => { @@ -75,6 +78,13 @@ export const ArticleCard = (props: ArticleCardProps) => { const { cover, layout, slug, authors, stat, body } = props.article + const { changeSearchParam } = useRouter() + const scrollToComments = (event) => { + event.preventDefault() + openPage(router, 'article', { slug: slug }) + changeSearchParam('scrollTo', 'comments') + } + return (
{
- + scrollToComments(event)}> {stat?.commented || t('Add comment')} diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 0407cb3b..87de7880 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -80,7 +80,8 @@ export const Header = (props: Props) => { }) }) - const scrollToComments = (value) => { + const scrollToComments = (event, value) => { + event.preventDefault() props.scrollToComments(value) } @@ -110,7 +111,6 @@ export const Header = (props: Props) => {
{props.title}
-