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

add PostOnHover for quotes in replies

Browse Source
This commit is contained in:
Tom
2023-06-03 17:22:39 +02:00
parent 97e95005d3
commit a6faed9ada
4 changed files with 193 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+54 -12
View File
@@ -49,7 +49,8 @@ const All = () => {
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({}); const replyMenuRefs = useRef({});
const threadBacklinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
const [isReplyOpen, setIsReplyOpen] = useState(false); const [isReplyOpen, setIsReplyOpen] = useState(false);
@@ -534,7 +535,7 @@ const All = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -543,7 +544,7 @@ const All = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -739,7 +740,7 @@ const All = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -748,7 +749,7 @@ const All = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -825,9 +826,30 @@ const All = () => {
<Fragment key={`fragment8-${index}`}> <Fragment key={`fragment8-${index}`}>
<blockquote key={`pm-${index}`} comment={reply} className="post-message"> <blockquote key={`pm-${index}`} comment={reply} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)} ref={el => {
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, thread.shortCid, event)} quoteRefs.current[shortParentCid] = el;
onMouseLeave={removeHighlight}> }}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} /> <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -839,10 +861,30 @@ const All = () => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`pm-${index}`} className="post-message"> : <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
handleQuoteClick(reply, shortParentCid, thread.shortCid, event)} ref={el => {
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, thread.shortCid, event)} quoteRefs.current[shortParentCid] = el;
onMouseLeave={removeHighlight}> }}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} /> <Post content={reply.content} key={`post-${index}`} comment={reply} />
src/components/views/Board.jsx
+43 -7
View File
@@ -76,7 +76,8 @@ const Board = () => {
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({}); const replyMenuRefs = useRef({});
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const threadBacklinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
@@ -980,7 +981,7 @@ const Board = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} to={() => {}}
@@ -990,7 +991,7 @@ const Board = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -1218,7 +1219,7 @@ const Board = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -1227,7 +1228,7 @@ const Board = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -1304,8 +1305,26 @@ const Board = () => {
<Fragment key={`fragment8-${index}`}> <Fragment key={`fragment8-${index}`}>
<blockquote key={`pm-${index}`} comment={reply} className="post-message"> <blockquote key={`pm-${index}`} comment={reply} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
ref={el => {
quoteRefs.current[shortParentCid] = el;
}}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} 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);
console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
@@ -1329,8 +1348,25 @@ const Board = () => {
</Fragment> </Fragment>
: <blockquote key={`pm-${index}`} className="post-message"> : <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
ref={el => {
quoteRefs.current[shortParentCid] = el;
}}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} 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 = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
src/components/views/Subscriptions.jsx
+53 -11
View File
@@ -49,7 +49,8 @@ const Subscriptions = () => {
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({}); const replyMenuRefs = useRef({});
const threadBacklinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
const [isReplyOpen, setIsReplyOpen] = useState(false); const [isReplyOpen, setIsReplyOpen] = useState(false);
@@ -539,7 +540,7 @@ const Subscriptions = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -548,7 +549,7 @@ const Subscriptions = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -744,7 +745,7 @@ const Subscriptions = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -753,7 +754,7 @@ const Subscriptions = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -830,9 +831,30 @@ const Subscriptions = () => {
<Fragment key={`fragment8-${index}`}> <Fragment key={`fragment8-${index}`}>
<blockquote key={`pm-${index}`} comment={reply} className="post-message"> <blockquote key={`pm-${index}`} comment={reply} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)} ref={el => {
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, thread.shortCid, event)} quoteRefs.current[shortParentCid] = el;
onMouseLeave={removeHighlight}> }}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} /> <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -845,9 +867,29 @@ const Subscriptions = () => {
</Fragment> </Fragment>
: <blockquote key={`pm-${index}`} className="post-message"> : <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)} ref={el => {
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, thread.shortCid, event)} quoteRefs.current[shortParentCid] = el;
onMouseLeave={removeHighlight}> }}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} /> <Post content={reply.content} key={`post-${index}`} comment={reply} />
src/components/views/Thread.jsx
+27 -12
View File
@@ -75,7 +75,8 @@ const Thread = () => {
const replyMenuRefs = useRef({}); const replyMenuRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const threadBacklinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [triggerPublishComment, setTriggerPublishComment] = useState(false);
@@ -938,7 +939,7 @@ const Thread = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -947,7 +948,7 @@ const Thread = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -1139,7 +1140,7 @@ const Thread = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-${index}`} style={{display: 'inline-block'}} <div key={`div-${index}`} style={{display: 'inline-block'}}
ref={el => { ref={el => {
threadBacklinkRefs.current[reply.cid] = el; backlinkRefs.current[reply.cid] = el;
}}> }}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
@@ -1148,7 +1149,7 @@ const Thread = () => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
@@ -1219,18 +1220,32 @@ const Thread = () => {
</div> </div>
) : null} ) : null}
<blockquote key={`pm-${index}`} className="post-message"> <blockquote key={`pm-${index}`} className="post-message">
<span style={{cursor: 'pointer'}} className="quote-link" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => { ref={el => {
handleQuoteClick(reply, shortParentCid, comment.shortCid, event); quoteRefs.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 = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
});
}
});
}} }}
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);
}} }}>
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span> </Link>
<Post content={reply.content} comment={reply} key={`post-${index}`} /> <Post content={reply.content} comment={reply} key={`post-${index}`} />
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}