mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add PostOnHover to mobile view
This commit is contained in:
plebeius.eth
+252
-128
@@ -36,154 +36,278 @@ const PostOnHover = ({ cid, feed }) => {
|
||||
<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>
|
||||
<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">
|
||||
{reply.author?.displayName}</span>
|
||||
: <span className="name">
|
||||
Anonymous</span>}
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
)
|
||||
Anonymous</span>}
|
||||
|
||||
<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>
|
||||
</span>
|
||||
|
||||
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div className="reply-file-text">
|
||||
Link:
|
||||
<a href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({replyMediaInfo?.type})
|
||||
|
||||
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
||||
|
||||
<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>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((reply, index) => (
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<Link to={() => {}}
|
||||
className="quote-link">
|
||||
c/{reply.shortCid}</Link>
|
||||
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{replyMediaInfo?.type === "webpage" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-reply">
|
||||
{reply.thumbnailUrl ? (
|
||||
</div>
|
||||
{replyMediaInfo?.url ? (
|
||||
<div className="file"
|
||||
style={{marginBottom: "5px"}}>
|
||||
<div className="reply-file-text">
|
||||
Link:
|
||||
<a href={replyMediaInfo.url} target="_blank"
|
||||
rel="noopener noreferrer">{
|
||||
replyMediaInfo?.url.length > 30 ?
|
||||
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
||||
replyMediaInfo?.url
|
||||
}</a> ({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.thumbnail} alt={replyMediaInfo.type}
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "image" ? (
|
||||
<div className="img-container">
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{replyMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb-reply">
|
||||
<img
|
||||
<video controls
|
||||
|
||||
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">
|
||||
) : 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?.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}
|
||||
<Post content={reply.content} comment={reply} />
|
||||
<EditLabel
|
||||
commentCid={reply.cid}
|
||||
className="ttl"/>
|
||||
</blockquote>)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="reply-container">
|
||||
<span className="ellipsis">{stateString}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="thread-mobile">
|
||||
{reply.state === 'succeeded' ? (
|
||||
<div className="reply-container">
|
||||
<div className="post-reply post-reply-mobile">
|
||||
<div className="post-info-mobile">
|
||||
<span className="name-block-mobile">
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 20
|
||||
? <Fragment>
|
||||
<span className="name-mobile">
|
||||
{reply.author.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</Fragment>
|
||||
: <span className="name-mobile">
|
||||
{reply.author.displayName}</span>
|
||||
: <span className="name-mobile">
|
||||
Anonymous</span>}
|
||||
|
||||
<span className="poster-address-mobile address-mobile"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ?
|
||||
(
|
||||
<span className="highlight-address-mobile">
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
{account?.author?.shortAddress}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
||||
</span>
|
||||
<br />
|
||||
</span>
|
||||
<span className="date-time-mobile post-number-mobile">
|
||||
{getDate(reply.timestamp)}
|
||||
<span>c/</span>
|
||||
<Link to={() => {}} id="reply-button"
|
||||
>{reply.shortCid}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
{reply.link ? (
|
||||
<div className="file-mobile">
|
||||
{replyMediaInfo?.url ? (
|
||||
replyMediaInfo.type === "webpage" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-mobile">
|
||||
{reply.thumbnailUrl ? (
|
||||
<img
|
||||
src={replyMediaInfo.thumbnail} alt="thumbnail"
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "image" ? (
|
||||
<div className="img-container">
|
||||
<span className="file-thumb-mobile">
|
||||
<img
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{cursor: "pointer"}}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
</div>
|
||||
) : replyMediaInfo.type === "video" ? (
|
||||
<span className="file-thumb-mobile">
|
||||
<video
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
style={{ pointerEvents: "none" }}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
) : replyMediaInfo.type === "audio" ? (
|
||||
<span className="file-thumb-mobile">
|
||||
<audio
|
||||
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
||||
</span>
|
||||
) : null
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{reply.content ? (
|
||||
reply.content?.length > 500 ?
|
||||
<Fragment>
|
||||
<blockquote className="post-message">
|
||||
<Link to={() => {}} className="quotelink">
|
||||
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
||||
</Link>
|
||||
<Post content={reply.content?.slice(0, 500)} comment={reply} />
|
||||
<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>
|
||||
|
||||
@@ -81,9 +81,11 @@ const Board = () => {
|
||||
const postMenuCatalogRef = useRef(null);
|
||||
const backlinkRefs = useRef({});
|
||||
const quoteRefs = useRef({});
|
||||
const backlinkRefsMobile = useRef({});
|
||||
const quoteRefsMobile = useRef({});
|
||||
const postOnHoverRef = useRef(null);
|
||||
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
const stateString = useStateString(subplebbit);
|
||||
@@ -1716,8 +1718,37 @@ const Board = () => {
|
||||
<Fragment key={`fragment15-${index}`}>
|
||||
<blockquote key={`mob-pm-${index}`} className="post-message">
|
||||
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
|
||||
ref={el => {
|
||||
quoteRefsMobile.current[shortParentCid] = el;
|
||||
}}
|
||||
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
|
||||
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
|
||||
onMouseOver={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuoteHover(reply, shortParentCid, () => {
|
||||
if (shortParentCid === thread.shortCid) {
|
||||
return;
|
||||
} else {
|
||||
setOutOfViewCid(reply.parentCid);
|
||||
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
|
||||
const distanceToRight = window.innerWidth - rect.right;
|
||||
|
||||
if (distanceToRight < 200) {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
right: window.innerWidth - rect.left - 10,
|
||||
maxWidth: rect.left - 5
|
||||
});
|
||||
|
||||
} else {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
left: rect.left + rect.width + 5,
|
||||
maxWidth: window.innerWidth - rect.left - rect.width + 5
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
@@ -1741,8 +1772,37 @@ const Board = () => {
|
||||
</Fragment>
|
||||
: <blockquote key={`mob-pm-${index}`} className="post-message">
|
||||
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
|
||||
ref={el => {
|
||||
quoteRefsMobile.current[shortParentCid] = el;
|
||||
}}
|
||||
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
|
||||
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
|
||||
onMouseOver={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuoteHover(reply, shortParentCid, () => {
|
||||
if (shortParentCid === thread.shortCid) {
|
||||
return;
|
||||
} else {
|
||||
setOutOfViewCid(reply.parentCid);
|
||||
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
|
||||
const distanceToRight = window.innerWidth - rect.right;
|
||||
|
||||
if (distanceToRight < 200) {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
right: window.innerWidth - rect.left - 10,
|
||||
maxWidth: rect.left - 5
|
||||
});
|
||||
|
||||
} else {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
left: rect.left + rect.width + 5,
|
||||
maxWidth: window.innerWidth - rect.left - rect.width + 5
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
@@ -1763,10 +1823,35 @@ const Board = () => {
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((reply, index) => (
|
||||
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
|
||||
<div key={`div-back${index}`} style={{display: 'inline-block'}}
|
||||
ref={el => {
|
||||
backlinkRefsMobile.current[reply.cid] = el;
|
||||
}}>
|
||||
<Link key={`ql-${index}`} to={() => {}}
|
||||
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
|
||||
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
|
||||
onMouseOver={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuoteHover(reply, reply.shortCid, () => {
|
||||
setOutOfViewCid(reply.cid)
|
||||
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
|
||||
const distanceToRight = window.innerWidth - rect.right;
|
||||
|
||||
if (distanceToRight < 200) {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
right: window.innerWidth - rect.left - 10,
|
||||
maxWidth: rect.left - 5
|
||||
});
|
||||
|
||||
} else {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
left: rect.left + rect.width + 5,
|
||||
maxWidth: window.innerWidth - rect.left - rect.width + 5
|
||||
});
|
||||
}
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
|
||||
@@ -78,7 +78,7 @@ const Catalog = () => {
|
||||
const [openMenuCid, setOpenMenuCid] = useState(null);
|
||||
|
||||
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
|
||||
const { subplebbitAddress } = useParams();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
|
||||
const account = useAccount();
|
||||
|
||||
@@ -98,6 +98,8 @@ const Thread = () => {
|
||||
const [outOfViewCid, setOutOfViewCid] = useState(null);
|
||||
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
|
||||
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
|
||||
const backlinkRefsMobile = useRef({});
|
||||
const quoteRefsMobile = useRef({});
|
||||
|
||||
|
||||
const comment = useComment({commentCid: selectedThread});
|
||||
@@ -1519,12 +1521,41 @@ const Thread = () => {
|
||||
) : null}
|
||||
<blockquote key={`mob-pm-${index}`} className="post-message-mobile">
|
||||
<span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile"
|
||||
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
|
||||
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
}}>
|
||||
ref={el => {
|
||||
quoteRefsMobile.current[shortParentCid] = el;
|
||||
}}
|
||||
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
|
||||
onMouseOver={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuoteHover(reply, shortParentCid, () => {
|
||||
if (shortParentCid === comment.shortCid) {
|
||||
return;
|
||||
} else {
|
||||
setOutOfViewCid(reply.parentCid);
|
||||
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
|
||||
const distanceToRight = window.innerWidth - rect.right;
|
||||
|
||||
if (distanceToRight < 200) {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
right: window.innerWidth - rect.left - 10,
|
||||
maxWidth: rect.left - 5
|
||||
});
|
||||
|
||||
} else {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
left: rect.left + rect.width + 5,
|
||||
maxWidth: window.innerWidth - rect.left - rect.width + 5
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
}}>
|
||||
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
|
||||
</span>
|
||||
<Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
|
||||
@@ -1540,14 +1571,39 @@ const Thread = () => {
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
.map((reply, index) => (
|
||||
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
|
||||
<div key={`div-back${index}`} style={{display: 'inline-block'}}
|
||||
ref={el => {
|
||||
backlinkRefsMobile.current[reply.cid] = el;
|
||||
}}>
|
||||
<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))}
|
||||
onMouseOver={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuoteHover(reply, reply.shortCid, () => {
|
||||
setOutOfViewCid(reply.cid)
|
||||
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
|
||||
const distanceToRight = window.innerWidth - rect.right;
|
||||
|
||||
if (distanceToRight < 200) {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
right: window.innerWidth - rect.left - 10,
|
||||
maxWidth: rect.left - 5
|
||||
});
|
||||
|
||||
} else {
|
||||
setOutOfViewPosition({
|
||||
top: rect.top + window.scrollY - rect.height / 2,
|
||||
left: rect.left + rect.width + 5,
|
||||
maxWidth: window.innerWidth - rect.left - rect.width + 5
|
||||
});
|
||||
}
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
removeHighlight();
|
||||
setOutOfViewCid(null);
|
||||
}}>
|
||||
}} >
|
||||
c/{reply.shortCid}</span>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user