AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add feature: scroll into comment

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-03 14:55:07 +02:00
parent 22cf24dafc
commit d44ada4db8
5 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/CommentSection.svelte
View File

@ -2,9 +2,10 @@
import {getImageURL, formatDate} from '$lib/utils';
import toast from 'svelte-french-toast';
import { userRegion, commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked } from '$lib/store';
import { userRegion, commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked, scrollToComment } from '$lib/store';
import TextEditor from '$lib/components/TextEditor.svelte';
import { marked } from 'marked';
import { tick } from 'svelte';
export let moderators
export let comment;
@ -18,6 +19,7 @@ export let upvoteCounter;
export let downvoteCounter;
export let userAlreadyVoted;
if (userAlreadyVoted) {
upvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'upvote';
downvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'downvote';
@ -254,6 +256,18 @@ const handleDownvote = async (event) => {
$replyCommentClicked[comment?.id] = false
$editCommentClicked[comment?.id] = false
$: if ($scrollToComment?.length !== 0 && typeof window !== 'undefined') {
// Wait for the DOM to update
tick().then(() => {
const commentElement = document.getElementById($scrollToComment);
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: "center"});
}
});
}
/*
$: {
if($commentAdded?.length !== 0) {
@ -309,10 +323,10 @@ const handleDownvote = async (event) => {
</div>
<div class="text-md text-slate-400 mb-1 pl-7 pt-3 whitespace-pre-wrap w-11/12">
<div class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6 ">
<div class="text-sm text-[#D7DADC] whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
<div id={comment?.id} class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment ? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]' : ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
{#if !$editCommentClicked[comment?.id]}
{@html addClassesToHtml(marked(comment?.comment))}
{:else}

2
src/lib/store.ts
View File

@ -32,6 +32,7 @@ export const secFilingsClicked = writable(<boolean>(false));
export const discordMembers = writable(<Number> (308));
export const newAvatar = writable(<string> (""));
export const displayCompanyName = writable(<string> (""));
export const currentPrice = writable(<number> (0));
export const currentPortfolioPrice = writable(<number> (0));
@ -89,6 +90,7 @@ export const commentIdDeleted = writable(<string> (""));
export const postIdDeleted = writable(<string> (""));
export const commentAdded = writable(<string> (""));
export const commentUpdated = writable(<string> (""));
export const scrollToComment = writable(<string> (""));
export const searchBarData = writable([]);

6
src/routes/+page.svelte
View File

@ -120,7 +120,7 @@ onMount( async() => {
<div class=" m-auto flex flex-wrap flex-col justify-center items-center md:flex-row">
<div class=" m-auto flex flex-wrap flex-col justify-center items-center md:flex-row px-5">
<!--Left Col-->
@ -415,7 +415,7 @@ onMount( async() => {
</td>
<td class="text-white border-b border-[#202020]">
{item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
</td>
@ -561,7 +561,7 @@ onMount( async() => {
</td>
<td class="text-white border-b border-[#202020]">
{item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
</td>

4
src/routes/community/post/[postId]/+page.svelte
View File

@ -9,7 +9,7 @@ import VideoPlayer from '$lib/components/VideoPlayer.svelte';
import { onMount, onDestroy } from 'svelte';
import {userRegion, screenWidth, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import {userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
@ -354,9 +354,9 @@ function closePost(event) {
onDestroy( () => {
$commentAdded = '';
$commentIdDeleted = '';
$scrollToComment = '';
})

10
src/routes/notifications/+page.svelte
View File

@ -4,7 +4,7 @@
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { onMount } from 'svelte';
import {userRegion, screenWidth, numberOfUnreadNotification} from '$lib/store';
import {userRegion, screenWidth, numberOfUnreadNotification, scrollToComment } from '$lib/store';
export let data;
export let form;
@ -62,6 +62,12 @@ if (notificationIdList.length !== 0)
}
function goToPost(item) {
if (item?.comment && item?.notifyType === 'vote') {
$scrollToComment = item?.comment;
}
goto("/community/post/"+item?.post)
}
async function infiniteHandler({ detail: { loaded, complete } })
{
@ -136,7 +142,7 @@ onMount(async () => {
<div class="flex flex-col items-start w-full text-white">
{#each notificationList as item}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={()=> goto("/community/post/"+item?.post)} class="hover:bg-[#2B2B2B] p-3 mb-3 ml-1 text-gray-200 w-full {!item?.readed ? 'bg-[#F9AB00] bg-opacity-[0.1]' : ''} cursor-pointer">
<div on:click={()=> goToPost(item)} class="hover:bg-[#2B2B2B] p-3 mb-3 ml-1 text-gray-200 w-full {!item?.readed ? 'bg-[#F9AB00] bg-opacity-[0.1]' : ''} cursor-pointer">
<div class="flex flex-row items-center w-full">
<!-- svelte-ignore a11y-label-has-associated-control -->