diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 68e4e058..d984ba16 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -849,40 +849,44 @@ const All = () => { >
- >
- ) : null}
- {thread.locked ? (
- <>
-
-
- >
- ) : null}
-
- [
- setSelectedThread(thread.cid)} className="reply-link" >Reply
- ]
-
-
- --- (...) -
-- -
- Post too long. - setSelectedThread(thread.cid)} className="ttl-link">Click here - to view. - -
-) - : null} -- - -
+ >
+ ) : null}
+ {thread.locked ? (
+ <>
+
+
+ >
+ ) : null}
+
+ [
+ setSelectedThread(thread.cid)} className="reply-link" >Reply
+ ]
+
+
+ +++ (...) +
++ +
+ Post too long. + setSelectedThread(thread.cid)} className="ttl-link">Click here + to view. + +
+) + : null} ++ + +
+ {}} key={`r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefs.current[reply.cid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + ++{ + postRefs.current[quoteShortParentCid] = ref; + }} + postQuoteOnClick={(quoteShortParentCid) => { + handleQuoteClick(reply, quoteShortParentCid, null) + }} + postQuoteOnOver={(quoteShortParentCid) => { + const quoteParentCid = cidTracker[quoteShortParentCid]; + if (outOfViewCid !== quoteParentCid) { + handleQuoteHover(reply, quoteShortParentCid, () => { + setOutOfViewCid(quoteParentCid); + + const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }) + }} + } + postQuoteOnLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }} + /> + (...) +
++ +
+ Comment too long. + setSelectedThread(thread.cid)} className="ttl-link">Click here + to view. +
+ {}} key={`r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefs.current[reply.cid] = el; + }} + onClick={() => handleQuoteClick(reply, shortParentCid, null)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + +) + : null} +{ + postRefs.current[quoteShortParentCid] = ref; + }} + postQuoteOnClick={(quoteShortParentCid) => { + handleQuoteClick(reply, quoteShortParentCid, null) + }} + postQuoteOnOver={(quoteShortParentCid) => { + const quoteParentCid = cidTracker[quoteShortParentCid]; + if (outOfViewCid !== quoteParentCid) { + handleQuoteHover(reply, quoteShortParentCid, () => { + setOutOfViewCid(quoteParentCid); + + const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }) + }} + } + postQuoteOnLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }} + /> + + +
+ ) : null}
+ {thread.locked ? (
+
+ ) : null}
+
+ +++ (...) +
++ +
+ Post too long. + setSelectedThread(thread.cid)} className="ttl-link">Click here + to view. +
+) + : null} ++ + +
+ {}} key={`mob-r-pm-${index}`} className="quotelink" ref={el => { - backlinkRefs.current[reply.cid] = el; - }}> - {}} className="quote-link" - onClick={(event) => handleQuoteClick(reply, null, event)} + quoteRefsMobile.current[reply.cid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} onMouseOver={(event) => { event.stopPropagation(); - handleQuoteHover(reply, null, () => { - setOutOfViewCid(reply.cid); - const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; const distanceToTop = rect.top; const distanceToBottom = window.innerHeight - rect.bottom; @@ -1897,86 +2596,28 @@ const Board = () => { removeHighlight(); setOutOfViewCid(null); }}> - c/{reply.shortCid} - -
- {}} key={`r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefs.current[reply.cid] = el; - }} - onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + ++{ + postRefs.current[quoteShortParentCid] = ref; + }} + postQuoteOnClick={(quoteShortParentCid) => { + handleQuoteClick(reply, quoteShortParentCid, null) + }} + postQuoteOnOver={(quoteShortParentCid) => { + const quoteParentCid = cidTracker[quoteShortParentCid]; + if (outOfViewCid !== quoteParentCid) { + handleQuoteHover(reply, quoteShortParentCid, () => { + setOutOfViewCid(quoteParentCid); + + const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; const distanceToTop = rect.top; const distanceToBottom = window.innerHeight - rect.bottom; let top; - + if (distanceToTop < postOnHoverHeight / 2) { top = window.scrollY - 5; } else if (distanceToBottom < postOnHoverHeight / 2) { @@ -1998,16 +2639,75 @@ const Board = () => { maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } + }) + }} + } + postQuoteOnLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }} + /> + (...) +
++ +
+ Comment too long. + setSelectedThread(thread.cid)} className="ttl-link">Click here + to view. +
+ {}} key={`mob-r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefsMobile.current[reply.cid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} -- - :{ postRefs.current[quoteShortParentCid] = ref; }} @@ -2055,31 +2755,30 @@ const Board = () => { setOutOfViewCid(null); }} /> - (...) -
-- -
- Comment too long. - setSelectedThread(thread.cid)} className="ttl-link">Click here - to view. -
- {}} key={`r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefs.current[reply.cid] = el; - }} - onClick={() => handleQuoteClick(reply, shortParentCid, null)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); +) + : null} + {reply.replyCount > 0 ? ( +
- ) : null}
- {thread.locked ? (
-
- ) : null}
-
- --- (...) -
-- -
- Post too long. - setSelectedThread(thread.cid)} className="ttl-link">Click here - to view. -
-) - : null} -- - -
- {}} key={`mob-r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefsMobile.current[reply.cid] = el; - }} - onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - --{ - postRefs.current[quoteShortParentCid] = ref; - }} - postQuoteOnClick={(quoteShortParentCid) => { - handleQuoteClick(reply, quoteShortParentCid, null) - }} - postQuoteOnOver={(quoteShortParentCid) => { - const quoteParentCid = cidTracker[quoteShortParentCid]; - if (outOfViewCid !== quoteParentCid) { - handleQuoteHover(reply, quoteShortParentCid, () => { - setOutOfViewCid(quoteParentCid); - - const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }) - }} - } - postQuoteOnLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }} - /> - (...) -
-- -
- Comment too long. - setSelectedThread(thread.cid)} className="ttl-link">Click here - to view. -
- {}} key={`mob-r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefsMobile.current[reply.cid] = el; - }} - onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - -) - : null} - {reply.replyCount > 0 ? ( -{ - postRefs.current[quoteShortParentCid] = ref; - }} - postQuoteOnClick={(quoteShortParentCid) => { - handleQuoteClick(reply, quoteShortParentCid, null) - }} - postQuoteOnOver={(quoteShortParentCid) => { - const quoteParentCid = cidTracker[quoteShortParentCid]; - if (outOfViewCid !== quoteParentCid) { - handleQuoteHover(reply, quoteShortParentCid, () => { - setOutOfViewCid(quoteParentCid); - - const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }) - }} - } - postQuoteOnLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }} - /> - - -