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

improve PostOnHover positioning logic

Browse Source
This commit is contained in:
plebeius.eth
2023-06-10 12:28:21 +02:00
parent bb6bb379ca
commit 023d84c350
6 changed files with 298 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PostOnHover.jsx
+10 -2
View File
@@ -22,8 +22,16 @@ const PostOnHover = ({ cid, feed }) => {
const stateString = useStateString(reply); const stateString = useStateString(reply);
return ( return (
<Container selectedStyle={selectedStyle} style={{margin: '0', padding: '0', <Container selectedStyle={selectedStyle} style={{
whiteSpace: 'nowrap', overflow: 'visible'}}> margin: '0',
padding: '0',
whiteSpace: 'normal',
maxWidth: '100vw',
overflowWrap: 'break-word',
wordWrap: 'break-word',
wordBreak: 'break-all',
boxSizing: 'border-box',
}}>
<BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}> <BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
<div className="board" style={{margin: '0', padding: '0'}}> <div className="board" style={{margin: '0', padding: '0'}}>
<div className="thread" style={{margin: '0', padding: '0'}}> <div className="thread" style={{margin: '0', padding: '0'}}>
src/components/StateLabel.jsx
-2
View File
@@ -15,8 +15,6 @@ const StateLabel = ({ commentIndex, className }) => {
if (commentIndex === undefined) return null; if (commentIndex === undefined) return null;
console.log(commentIndex, stateString, comment);
return ( return (
commentIndex && stateString !== "Succeeded" ? ( commentIndex && stateString !== "Succeeded" ? (
(comment.state === "failed" || (stateString === undefined && !isLoading)) ? ( (comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
src/components/views/All.jsx
+74 -26
View File
@@ -198,8 +198,8 @@ const All = () => {
useLayoutEffect(() => { useLayoutEffect(() => {
if (postOnHoverRef.current) { if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect(); const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height); setPostOnHoverHeight(rect.height);
} }
}, [outOfViewCid]); }, [outOfViewCid]);
@@ -542,10 +542,22 @@ const All = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -747,10 +759,22 @@ const All = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -836,10 +860,22 @@ const All = () => {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
console.log("risposta: ", reply.parentCid); console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
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.innerWidth - 5,
maxWidth: rect.left
}); });
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -871,10 +907,22 @@ const All = () => {
} else { } else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -1247,23 +1295,23 @@ const All = () => {
<PostLoader /> <PostLoader />
)} )}
</div> </div>
{createPortal( {outOfViewCid && outOfViewPosition && createPortal(
<div <div
ref={postOnHoverRef} ref={postOnHoverRef}
style={{ style={{
display: outOfViewCid ? "block" : "none", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left, left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
<PostOnHover <PostOnHover
cid={outOfViewCid} cid={outOfViewCid}
feed={feed} feed={feed}
/> />
</div> </div>
, document.body , document.body)}
)}
</BoardForm> </BoardForm>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Board.jsx
+77 -28
View File
@@ -528,14 +528,16 @@ const Board = () => {
} }
}; };
useLayoutEffect(() => { useLayoutEffect(() => {
if (postOnHoverRef.current) { if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect(); const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height); setPostOnHoverHeight(rect.height);
} }
}, [outOfViewCid]); }, [outOfViewCid]);
return ( return (
<> <>
<Helmet> <Helmet>
@@ -989,12 +991,24 @@ const Board = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
setOutOfViewCid(reply.cid);
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1228,10 +1242,22 @@ const Board = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1315,12 +1341,23 @@ const Board = () => {
return; return;
} else { } else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
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.innerWidth - 5,
maxWidth: rect.left
}); });
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -1359,10 +1396,22 @@ const Board = () => {
} else { } else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -1743,23 +1792,23 @@ const Board = () => {
) : (<PostLoader />) ) : (<PostLoader />)
)} )}
</div> </div>
{createPortal( {outOfViewCid && outOfViewPosition && createPortal(
<div <div
ref={postOnHoverRef} ref={postOnHoverRef}
style={{ style={{
display: outOfViewCid ? "block" : "none", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left, left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
<PostOnHover <PostOnHover
cid={outOfViewCid} cid={outOfViewCid}
feed={feed} feed={feed}
/> />
</div> </div>
, document.body , document.body)}
)}
</BoardForm> </BoardForm>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Subscriptions.jsx
+74 -26
View File
@@ -197,8 +197,8 @@ const Subscriptions = () => {
useLayoutEffect(() => { useLayoutEffect(() => {
if (postOnHoverRef.current) { if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect(); const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height); setPostOnHoverHeight(rect.height);
} }
}, [outOfViewCid]); }, [outOfViewCid]);
@@ -549,10 +549,22 @@ const Subscriptions = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -754,10 +766,22 @@ const Subscriptions = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -843,10 +867,22 @@ const Subscriptions = () => {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
console.log("risposta: ", reply.parentCid); console.log("risposta: ", reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
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.innerWidth - 5,
maxWidth: rect.left
}); });
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -878,10 +914,22 @@ const Subscriptions = () => {
} else { } else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, if (distanceToRight < 200) {
}); setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width - 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -1252,23 +1300,23 @@ const Subscriptions = () => {
/> />
)} )}
</div> </div>
{createPortal( {outOfViewCid && outOfViewPosition && createPortal(
<div <div
ref={postOnHoverRef} ref={postOnHoverRef}
style={{ style={{
display: outOfViewCid ? "block" : "none", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left, left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
<PostOnHover <PostOnHover
cid={outOfViewCid} cid={outOfViewCid}
feed={feed} feed={feed}
/> />
</div> </div>
, document.body , document.body)}
)}
</BoardForm> </BoardForm>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Thread.jsx
+58 -25
View File
@@ -482,8 +482,8 @@ const Thread = () => {
useLayoutEffect(() => { useLayoutEffect(() => {
if (postOnHoverRef.current) { if (postOnHoverRef.current) {
const rect = postOnHoverRef.current.getBoundingClientRect(); const rect = postOnHoverRef.current.getBoundingClientRect();
setPostOnHoverHeight(rect.height); setPostOnHoverHeight(rect.height);
} }
}, [outOfViewCid]); }, [outOfViewCid]);
@@ -949,10 +949,21 @@ const Thread = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2, if (distanceToRight < 200) {
left: rect.left + rect.width + 5, setOutOfViewPosition({
}); top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1150,10 +1161,21 @@ const Thread = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2, if (distanceToRight < 200) {
left: rect.left + rect.width + 5, setOutOfViewPosition({
}); top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1233,10 +1255,21 @@ const Thread = () => {
} else { } else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
setOutOfViewPosition({ const distanceToRight = window.innerWidth - rect.right;
top: rect.top + window.scrollY - rect.height / 2, if (distanceToRight < 200) {
left: rect.left + rect.width + 5, setOutOfViewPosition({
}); top: rect.top + window.scrollY - rect.height / 2,
left: rect.left - rect.innerWidth - 5,
maxWidth: rect.left
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width
});
}
} }
}); });
}} }}
@@ -1639,23 +1672,23 @@ const Thread = () => {
) : (null)} ) : (null)}
</> </>
)) : null} )) : null}
{createPortal( {outOfViewCid && outOfViewPosition && createPortal(
<div <div
ref={postOnHoverRef} ref={postOnHoverRef}
style={{ style={{
display: outOfViewCid ? "block" : "none", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
left: outOfViewPosition.left, left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
<PostOnHover <PostOnHover
cid={outOfViewCid} cid={outOfViewCid}
feed={comment} feed={comment}
/> />
</div> </div>
, document.body , document.body)}
)}
</BoardForm> </BoardForm>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{