From 7826bf07bcac126aeba11e1eef3011fbd9646d8a Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 11 Jun 2023 13:59:56 +0200 Subject: [PATCH] fix PostOnHover positioning calculation --- src/components/views/All.jsx | 139 +++++++++++++-------- src/components/views/Board.jsx | 142 +++++++++++++++------ src/components/views/Subscriptions.jsx | 165 +++++++++++++++---------- src/components/views/Thread.jsx | 109 +++++++++++----- 4 files changed, 370 insertions(+), 185 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index a0a4a500..9ea8d57d 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -543,19 +543,29 @@ const All = () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -760,19 +770,29 @@ const All = () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -854,29 +874,34 @@ const All = () => { 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(); - const distanceToRight = window.innerWidth - rect.right; + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 - }); - } - } + 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={() => { @@ -902,28 +927,34 @@ const All = () => { onMouseOver={(event) => { event.stopPropagation(); handleQuoteHover(reply, shortParentCid, () => { - if (shortParentCid === thread.shortCid) { - return; - } else { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 - }); - } - } + 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={() => { @@ -1301,9 +1332,9 @@ const All = () => { style={{ display: "block", position: "absolute", - top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, - left: outOfViewPosition.left, + top: outOfViewPosition.top, right: outOfViewPosition.right, + left: outOfViewPosition.left, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index b33388c1..fd9eba2a 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -995,19 +995,29 @@ const Board = () => { handleQuoteHover(reply, null, () => { const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } setOutOfViewCid(reply.cid); @@ -1245,19 +1255,29 @@ const Board = () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1342,19 +1362,29 @@ const Board = () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefs.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1392,19 +1422,29 @@ const Board = () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefs.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1720,19 +1760,29 @@ const Board = () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefsMobile.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1770,19 +1820,29 @@ const Board = () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefsMobile.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1819,19 +1879,29 @@ const Board = () => { setOutOfViewCid(reply.cid) const rect = backlinkRefsMobile.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1867,9 +1937,9 @@ const Board = () => { style={{ display: "block", position: "absolute", - top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, - left: outOfViewPosition.left, + top: outOfViewPosition.top, right: outOfViewPosition.right, + left: outOfViewPosition.left, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index a63d0c1c..9bad3885 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -550,21 +550,31 @@ const Subscriptions = () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } + 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={() => { @@ -767,19 +777,29 @@ const Subscriptions = () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -861,29 +881,34 @@ const Subscriptions = () => { 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(); - const distanceToRight = window.innerWidth - rect.right; - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } - } + 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={() => { @@ -909,28 +934,34 @@ const Subscriptions = () => { onMouseOver={(event) => { event.stopPropagation(); handleQuoteHover(reply, shortParentCid, () => { - if (shortParentCid === thread.shortCid) { - return; - } else { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } - } + 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={() => { @@ -1306,9 +1337,9 @@ const Subscriptions = () => { style={{ display: "block", position: "absolute", - top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, - left: outOfViewPosition.left, + top: outOfViewPosition.top, right: outOfViewPosition.right, + left: outOfViewPosition.left, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 44672b98..495d3ce8 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -951,19 +951,30 @@ const Thread = () => { handleQuoteHover(reply, null, () => { setOutOfViewCid(reply.cid); const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; + 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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1161,21 +1172,32 @@ const Thread = () => { onMouseOver={(event) => { event.stopPropagation(); handleQuoteHover(reply, null, () => { - setOutOfViewCid(reply.cid); - const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; + setOutOfViewCid(reply.cid); + const rect = backlinkRefs.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1254,19 +1276,30 @@ const Thread = () => { handleQuoteHover(reply, shortParentCid, () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; + 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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1527,19 +1560,29 @@ const Thread = () => { setOutOfViewCid(reply.parentCid); const rect = quoteRefsMobile.current[shortParentCid].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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1575,19 +1618,29 @@ const Thread = () => { setOutOfViewCid(reply.cid) const rect = backlinkRefsMobile.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: rect.top + window.scrollY - rect.height / 2, + top, right: window.innerWidth - rect.left - 10, maxWidth: rect.left - 5 }); - } else { setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, + top, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + 5 + maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } }); @@ -1726,9 +1779,9 @@ const Thread = () => { style={{ display: "block", position: "absolute", - top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, - left: outOfViewPosition.left, + top: outOfViewPosition.top, right: outOfViewPosition.right, + left: outOfViewPosition.left, maxWidth: outOfViewPosition.maxWidth, }} >