External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

implement PostOnHover component

Browse Source
This commit is contained in:
Tom
2023-06-03 16:33:59 +02:00
parent 98f000b173
commit 97e95005d3
6 changed files with 495 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PostOnHover.jsx
+185
View File
@@ -0,0 +1,185 @@
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { useAccount, useComment } from "@plebbit/plebbit-react-hooks";
import getDate from "../utils/getDate";
import getCommentMediaInfo from "../utils/getCommentMediaInfo";
import findShortParentCid from "../utils/findShortParentCid";
import Post from "./Post";
import EditLabel from "./EditLabel";
import useStateString from "../hooks/useStateString";
import { BoardForm, Container } from "./styled/views/Board.styled";
import useGeneralStore from "../hooks/stores/useGeneralStore";
const PostOnHover = ({ cid, feed }) => {
const selectedStyle = useGeneralStore(state => state.selectedStyle);
const account = useAccount();
const reply = useComment({commentCid: cid});
const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "assets/filedeleted-res.gif";
const selectedFeed = feed;
const thread = useComment({commentCid: reply.parentCid});
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
const stateString = useStateString(reply);
return (
<Container selectedStyle={selectedStyle} style={{margin: '0', padding: '0',
whiteSpace: 'nowrap', overflow: 'visible'}}>
<BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
<div className="board" style={{margin: '0', padding: '0'}}>
<div className="thread" style={{margin: '0', padding: '0'}}>
{reply.state === 'succeeded' ? (
<div className="reply-container">
<div className="post-reply post-reply-desktop">
<div className="post-info">
<span className="nameblock">
{reply.author?.displayName
? reply.author?.displayName.length > 20
? <Fragment >
<span className="name"
data-tooltip-id="tooltip"
data-tooltip-content={reply.author?.displayName}
data-tooltip-place="top">
{reply.author?.displayName.slice(0, 20) + " (...)"}
</span>
</Fragment>
: <span className="name">
{reply.author?.displayName}</span>
: <span className="name">
Anonymous</span>}
&nbsp;
<span className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}}
>
(u/
{reply.author?.shortAddress ?
(
<span >
{reply.author?.shortAddress}
</span>
) : (
<span >
{account?.author?.shortAddress}
</span>
)
}
)
</span>
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp;
<span className="post-number post-number-desktop">
<span >c/</span>
{reply.shortCid ? (
<Link to={() => {}} id="reply-button"
title="Reply to this post">{reply.shortCid}</Link>
) : (
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>&nbsp;
<div id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link key={`link-${index}`} to={() => {}}
className="quote-link">
c/{reply.shortCid}</Link>
&nbsp;
</div>
))
}
</div>
</div>
{replyMediaInfo?.url ? (
<div className="file"
style={{marginBottom: "5px"}}>
<div className="reply-file-text">
Link:&nbsp;
<a href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<div className="img-container">
<span className="file-thumb-reply">
{reply.thumbnailUrl ? (
<img
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{replyMediaInfo?.type === "image" ? (
<div className="img-container">
<span className="file-thumb-reply">
<img
src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<span className="file-thumb-reply">
<video controls
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "audio" ? (
<span className="file-thumb-reply">
<audio controls
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
{reply.content ? (
reply.content?.length > 500 ?
<Fragment >
<blockquote comment={reply} className="post-message">
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content?.slice(0, 500)} />
<span className="ttl"> (...)
<br /> <EditLabel
commentCid={reply.cid}
className="ttl"/><br />
Comment too long. Click the link to view.</span>
</blockquote>
</Fragment>
: <blockquote className="post-message">
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} comment={reply} />
<EditLabel
commentCid={reply.cid}
className="ttl"/>
</blockquote>)
: null}
</div>
</div>
) : (
<div className="reply-container">
<span className="ellipsis">{stateString}</span>
</div>
)}
</div>
</div>
</BoardForm>
</Container>
);
}
export default PostOnHover;
src/components/views/All.jsx
+75 -11
View File
@@ -1,4 +1,5 @@
import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
@@ -13,6 +14,7 @@ import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import PostOnHover from '../PostOnHover';
import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
@@ -47,6 +49,8 @@ const All = () => {
const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({});
const threadBacklinkRefs = useRef({});
const postOnHoverRef = useRef(null);
const [isReplyOpen, setIsReplyOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -54,6 +58,9 @@ const All = () => {
const [rotatedStates, setRotatedStates] = useState({});
const [errorMessage, setErrorMessage] = useState(null);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
useError(errorMessage, [errorMessage]);
@@ -189,6 +196,14 @@ const All = () => {
};
useLayoutEffect(() => {
if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height);
}
}, [outOfViewCid]);
return (
<>
<Helmet>
@@ -517,12 +532,28 @@ const All = () => {
{thread.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -702,16 +733,32 @@ const All = () => {
) : null}
</ul>
</div>
<div id="backlink-id" className="backlink">
<div key={`bi-${index}`} id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1159,6 +1206,23 @@ const All = () => {
/>
)}
</div>
{createPortal(
<div
ref={postOnHoverRef}
style={{
display: outOfViewCid ? "block" : "none",
position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left,
}}
>
<PostOnHover
cid={outOfViewCid}
feed={feed}
/>
</div>
, document.body
)}
</BoardForm>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Board.jsx
+77 -24
View File
@@ -1,4 +1,4 @@
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -19,6 +19,7 @@ import ModerationModal from '../modals/ModerationModal';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import PostOnHover from '../PostOnHover';
import StateLabel from '../StateLabel';
import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal';
@@ -74,8 +75,9 @@ const Board = () => {
const linkRef = useRef();
const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({});
const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const threadBacklinkRefs = useRef({});
const postOnHoverRef = useRef(null);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -97,6 +99,8 @@ const Board = () => {
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
@@ -122,10 +126,10 @@ const Board = () => {
};
const handleOutsideClick = useCallback((e) => {
if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
setOpenMenuCid(null);
}
}, [openMenuCid, postMenuRef, postMenuCatalogRef]);
}, [openMenuCid, postMenuCatalogRef]);
useEffect(() => {
@@ -524,6 +528,13 @@ const Board = () => {
}
};
useLayoutEffect(() => {
if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height);
}
}, [outOfViewCid]);
return (
<>
@@ -872,8 +883,7 @@ const Board = () => {
key={`pmb-${index}`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
threadMenuRefs.current[thread.cid] = el;
}}
className='post-menu-button'
rotated={openMenuCid === thread.cid}
@@ -968,17 +978,31 @@ const Board = () => {
{thread.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
c/{reply.shortCid}</Link>
&nbsp;
<Link key={`ql-${index}`}
to={() => {}}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
))
}
@@ -1098,7 +1122,6 @@ const Board = () => {
title="Post menu"
ref={el => {
replyMenuRefs.current[reply.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
rotated={openMenuCid === reply.cid}
@@ -1189,16 +1212,29 @@ const Board = () => {
</div>
</PostMenuCatalog>, document.body
)}
<div id="backlink-id" className="backlink">
<div key={`bi-${index}`} id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
@@ -1672,6 +1708,23 @@ const Board = () => {
) : (<PostLoader />)
)}
</div>
{createPortal(
<div
ref={postOnHoverRef}
style={{
display: outOfViewCid ? "block" : "none",
position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left,
}}
>
<PostOnHover
cid={outOfViewCid}
feed={feed}
/>
</div>
, document.body
)}
</BoardForm>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Subscriptions.jsx
+75 -11
View File
@@ -1,4 +1,5 @@
import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
@@ -13,6 +14,7 @@ import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import PostOnHover from '../PostOnHover';
import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
@@ -47,12 +49,17 @@ const Subscriptions = () => {
const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({});
const threadBacklinkRefs = useRef({});
const postOnHoverRef = useRef(null);
const [isReplyOpen, setIsReplyOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const [rotatedStates, setRotatedStates] = useState({});
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
@@ -187,6 +194,14 @@ const Subscriptions = () => {
navigate(`/p/${selected}`);
};
useLayoutEffect(() => {
if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height);
}
}, [outOfViewCid]);
return (
<>
@@ -522,12 +537,28 @@ const Subscriptions = () => {
{thread.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -707,16 +738,32 @@ const Subscriptions = () => {
) : null}
</ul>
</div>
<div id="backlink-id" className="backlink">
<div key={`bi-${index}`} id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1164,6 +1211,23 @@ const Subscriptions = () => {
/>
)}
</div>
{createPortal(
<div
ref={postOnHoverRef}
style={{
display: outOfViewCid ? "block" : "none",
position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left,
}}
>
<PostOnHover
cid={outOfViewCid}
feed={feed}
/>
</div>
, document.body
)}
</BoardForm>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Thread.jsx
+80 -24
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -18,6 +18,7 @@ import ModerationModal from '../modals/ModerationModal';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import PostOnHover from '../PostOnHover';
import StateLabel from '../StateLabel';
import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal';
@@ -74,6 +75,8 @@ const Thread = () => {
const replyMenuRefs = useRef({});
const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const threadBacklinkRefs = useRef({});
const postOnHoverRef = useRef(null);
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -91,6 +94,8 @@ const Thread = () => {
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
@@ -474,6 +479,14 @@ const Thread = () => {
};
useLayoutEffect(() => {
if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height);
}
}, [outOfViewCid]);
return (
<>
<Helmet>
@@ -919,20 +932,33 @@ const Thread = () => {
</div>
</PostMenuCatalog>, document.body
)}
<div id="backlink-id" className="backlink">
{comment?.replies?.pages?.topAll.comments
<div key={`bi-${index}`} id="backlink-id" className="backlink">
{comment.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</span>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
))
@@ -1107,20 +1133,33 @@ const Thread = () => {
</div>
</PostMenuCatalog>, document.body
)}
<div id="backlink-id" className="backlink">
<div key={`bi-${index}`} id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
.map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</span>
<div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => {
threadBacklinkRefs.current[reply.cid] = el;
}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
))
@@ -1585,6 +1624,23 @@ const Thread = () => {
) : (null)}
</>
)) : null}
{createPortal(
<div
ref={postOnHoverRef}
style={{
display: outOfViewCid ? "block" : "none",
position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left,
}}
>
<PostOnHover
cid={outOfViewCid}
feed={comment}
/>
</div>
, document.body
)}
</BoardForm>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
src/utils/handleQuoteHover.js
+3 -2
View File
@@ -23,7 +23,6 @@ function handleQuoteHover(reply, parentCid, onElementOutOfView) {
};
if (isInViewport(targetElement)) {
onElementOutOfView(cid);
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
@@ -33,9 +32,11 @@ function handleQuoteHover(reply, parentCid, onElementOutOfView) {
if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
targetElement.classList.add('highlighted');
}
} else {
onElementOutOfView();
}
} else {
return;
onElementOutOfView();
}
};