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 on hover cid highlight

Browse Source
This commit is contained in:
Tom
2023-06-01 21:41:48 +02:00
parent 20e746fe58
commit 6f4ca47a0f
6 changed files with 99 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Board.styled.jsx
+2 -2
View File
@@ -1822,7 +1822,7 @@ export const BoardForm = styled.div`
case 'Tomorrow': case 'Tomorrow':
return `.highlighted { return `.highlighted {
background-color: #1d1d21 !important; background-color: #1d1d21 !important;
border: 1px solid #111 !important; outline: 1px solid #111 !important;
} }
#post-menu { #post-menu {
@@ -1842,7 +1842,7 @@ export const BoardForm = styled.div`
case 'Photon': case 'Photon':
return `.highlighted { return `.highlighted {
background-color: #ccc !important; background-color: #ccc !important;
border: 1px solid #ccc !important; outline: 1px solid #ccc !important;
} }
#post-menu { #post-menu {
src/components/styled/views/Thread.styled.jsx
+2 -2
View File
@@ -1020,7 +1020,7 @@ export const BoardForm = styled.div`
case 'Tomorrow': case 'Tomorrow':
return `.highlighted { return `.highlighted {
background-color: #1d1d21 !important; background-color: #1d1d21 !important;
border: 1px solid #111 !important; outline: 1px solid #111 !important;
} }
#post-menu { #post-menu {
@@ -1042,7 +1042,7 @@ export const BoardForm = styled.div`
case 'Photon': case 'Photon':
return `.highlighted { return `.highlighted {
background-color: #ccc !important; background-color: #ccc !important;
border: 1px solid #ccc !important; outline: 1px solid #ccc !important;
} }
#post-menu { #post-menu {
src/components/views/Board.jsx
+28 -7
View File
@@ -28,7 +28,9 @@ import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick'; import handleAddressClick from '../../utils/handleAddressClick';
import handleImageClick from '../../utils/handleImageClick'; import handleImageClick from '../../utils/handleImageClick';
import handleQuoteClick from '../../utils/handleQuoteClick'; import handleQuoteClick from '../../utils/handleQuoteClick';
import handleQuoteHover from '../../utils/handleQuoteHover';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import removeHighlight from '../../utils/removeHighlight';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
@@ -968,7 +970,9 @@ const Board = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}> <div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`} <Link key={`ql-${index}`}
to={() => {}} className="quote-link" to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}> onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -1188,7 +1192,9 @@ const Board = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}> <div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${index}`} <Link to={() => {}} key={`ql-${index}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
@@ -1254,7 +1260,10 @@ const Board = () => {
reply.content?.length > 500 ? reply.content?.length > 500 ?
<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" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`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}`} />
@@ -1273,7 +1282,10 @@ const Board = () => {
</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) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`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} />
@@ -1570,7 +1582,10 @@ const Board = () => {
reply.content?.length > 500 ? reply.content?.length > 500 ?
<Fragment key={`fragment15-${index}`}> <Fragment key={`fragment15-${index}`}>
<blockquote key={`mob-pm-${index}`} className="post-message"> <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`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-mobile-${index}`} comment={reply} /> <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
@@ -1589,7 +1604,10 @@ const Board = () => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`mob-pm-${index}`} className="post-message"> : <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}> <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} /> <Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
@@ -1608,7 +1626,10 @@ const Board = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}> <div key={`div-back${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`} to={() => {}} <Link key={`ql-${index}`} to={() => {}}
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link"> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}
className="quote-link">
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
</div> </div>
src/components/views/Thread.jsx
+17 -5
View File
@@ -27,7 +27,9 @@ import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick'; import handleAddressClick from '../../utils/handleAddressClick';
import handleImageClick from '../../utils/handleImageClick'; import handleImageClick from '../../utils/handleImageClick';
import handleQuoteClick from '../../utils/handleQuoteClick'; import handleQuoteClick from '../../utils/handleQuoteClick';
import handleQuoteHover from '../../utils/handleQuoteHover';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import removeHighlight from '../../utils/removeHighlight';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
@@ -923,7 +925,9 @@ const Thread = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}> <div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} <span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}> onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</span> c/{reply.shortCid}</span>
&nbsp; &nbsp;
</div> </div>
@@ -1106,7 +1110,9 @@ const Thread = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}> <div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} <span style={{cursor: 'pointer'}} key={`ql-${index}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</span> c/{reply.shortCid}</span>
&nbsp; &nbsp;
</div> </div>
@@ -1171,7 +1177,9 @@ const Thread = () => {
onClick={(event) => { onClick={(event) => {
handleQuoteClick(reply, shortParentCid, comment.shortCid, event); handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
}} }}
> onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span> </span>
<Post content={reply.content} comment={reply} key={`post-${index}`} /> <Post content={reply.content} comment={reply} key={`post-${index}`} />
@@ -1414,7 +1422,9 @@ const Thread = () => {
) : null} ) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile"> <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
<span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile"
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span> </span>
<Post content={reply.content} comment={reply} key={`post-mobile-${index}`} /> <Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1432,7 +1442,9 @@ const Thread = () => {
.map((reply, index) => ( .map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}> <div key={`div-back${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}> onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</span> c/{reply.shortCid}</span>
&nbsp; &nbsp;
</div> </div>
src/utils/handleQuoteHover.js
+41
View File
@@ -0,0 +1,41 @@
function handleQuoteHover(reply, parentCid) {
const cid = parentCid ? parentCid : reply.shortCid;
const isMobile = window.innerWidth <= 480;
const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
const targetElementSelector = isMobile ? '.post-reply-mobile, .op-mobile' : '.post-reply-desktop, .op-desktop';
const targetElement = [...document.querySelectorAll(targetElementSelector)]
.find(el => {
const postNumberElement = el.querySelector(postNumberSelector);
return postNumberElement && postNumberElement.innerHTML.includes(cid);
});
if (targetElement) {
const isInViewport = (element) => {
const bounding = element.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
if (isInViewport(targetElement)) {
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});
if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
targetElement.classList.add('highlighted');
}
}
} else {
return;
}
};
export default handleQuoteHover;
src/utils/removeHighlight.js
+9
View File
@@ -0,0 +1,9 @@
function removeHighlight() {
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});
};
export default removeHighlight;