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 onElementOutOfView

Browse Source
This commit is contained in:
Tom
2023-06-02 13:50:58 +02:00
parent 19a3286ae0
commit 98f000b173
3 changed files with 65 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+36 -14
View File
@@ -96,6 +96,7 @@ const Board = () => {
const [commentCid, setCommentCid] = useState(null);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
@@ -971,8 +972,11 @@ const Board = () => {
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1193,8 +1197,11 @@ const Board = () => {
<Link to={() => {}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1262,8 +1269,11 @@ const Board = () => {
<blockquote key={`pm-${index}`} comment={reply} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -1284,8 +1294,11 @@ const Board = () => {
: <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} />
@@ -1584,8 +1597,11 @@ const Board = () => {
<blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
@@ -1606,8 +1622,11 @@ const Board = () => {
: <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
@@ -1627,8 +1646,11 @@ const Board = () => {
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`} to={() => {}}
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
className="quote-link">
c/{reply.shortCid}</Link>
&nbsp;
src/components/views/Thread.jsx
+27 -11
View File
@@ -90,6 +90,7 @@ const Thread = () => {
const [commentCid, setCommentCid] = useState(null);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [outOfViewCid, setOutOfViewCid] = useState(null);
useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
@@ -926,8 +927,11 @@ const Thread = () => {
<span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</span>
&nbsp;
</div>
@@ -1111,8 +1115,11 @@ const Thread = () => {
<span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</span>
&nbsp;
</div>
@@ -1177,8 +1184,11 @@ const Thread = () => {
onClick={(event) => {
handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
}}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span>
@@ -1422,9 +1432,12 @@ 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, comment.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}>
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span>
<Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1443,8 +1456,11 @@ const Thread = () => {
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
c/{reply.shortCid}</span>
&nbsp;
</div>
src/utils/handleQuoteHover.js
+2 -1
View File
@@ -1,4 +1,4 @@
function handleQuoteHover(reply, parentCid) {
function handleQuoteHover(reply, parentCid, onElementOutOfView) {
const cid = parentCid ? parentCid : reply.shortCid;
const isMobile = window.innerWidth <= 480;
const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
@@ -23,6 +23,7 @@ function handleQuoteHover(reply, parentCid) {
};
if (isInViewport(targetElement)) {
onElementOutOfView(cid);
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {