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

fix PostOnHover positioning calculation

Browse Source
This commit is contained in:
plebeius.eth
2023-06-11 13:59:56 +02:00
parent b03a542cec
commit 7826bf07bc
4 changed files with 370 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+82 -51
View File
@@ -543,19 +543,29 @@ const All = () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid); const distanceToTop = rect.top;
console.log("risposta: ", reply.parentCid); const distanceToBottom = window.innerHeight - rect.bottom;
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); let top;
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) { if (distanceToTop < postOnHoverHeight / 2) {
setOutOfViewPosition({ top = window.scrollY - 5;
top: rect.top + window.scrollY - rect.height / 2, } else if (distanceToBottom < postOnHoverHeight / 2) {
right: window.innerWidth - rect.left - 10, top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
maxWidth: rect.left - 5 } else {
}); top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
} else { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, right: window.innerWidth - rect.left - 10,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: rect.left - 5
}); });
} } else {
} setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -902,28 +927,34 @@ const All = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid); const distanceToTop = rect.top;
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const distanceToBottom = window.innerHeight - rect.bottom;
const distanceToRight = window.innerWidth - rect.right; let top;
if (distanceToRight < 200) { if (distanceToTop < postOnHoverHeight / 2) {
setOutOfViewPosition({ top = window.scrollY - 5;
top: rect.top + window.scrollY - rect.height / 2, } else if (distanceToBottom < postOnHoverHeight / 2) {
right: window.innerWidth - rect.left - 10, top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
maxWidth: rect.left - 5 } else {
}); top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
} else { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, right: window.innerWidth - rect.left - 10,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: rect.left - 5
}); });
} } else {
} setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1301,9 +1332,9 @@ const All = () => {
style={{ style={{
display: "block", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top,
left: outOfViewPosition.left,
right: outOfViewPosition.right, right: outOfViewPosition.right,
left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth, maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
src/components/views/Board.jsx
+100 -30
View File
@@ -995,19 +995,29 @@ const Board = () => {
handleQuoteHover(reply, null, () => { handleQuoteHover(reply, null, () => {
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.cid);
@@ -1245,19 +1255,29 @@ const Board = () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefsMobile.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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefsMobile.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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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) setOutOfViewCid(reply.cid)
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefsMobile.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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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={{ style={{
display: "block", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top,
left: outOfViewPosition.left,
right: outOfViewPosition.right, right: outOfViewPosition.right,
left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth, maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
src/components/views/Subscriptions.jsx
+94 -63
View File
@@ -550,21 +550,31 @@ const Subscriptions = () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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 (distanceToRight < 200) { if (distanceToTop < postOnHoverHeight / 2) {
setOutOfViewPosition({ top = window.scrollY - 5;
top: rect.top + window.scrollY - rect.height / 2, } else if (distanceToBottom < postOnHoverHeight / 2) {
left: rect.left - rect.innerWidth - 5, top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
maxWidth: rect.left } else {
}); top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
} else { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width - 5, right: window.innerWidth - rect.left - 10,
maxWidth: window.innerWidth - rect.left - rect.width maxWidth: rect.left - 5
}); });
} } else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -767,19 +777,29 @@ const Subscriptions = () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left - rect.innerWidth - 5, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width - 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width maxWidth: window.innerWidth - rect.left - rect.width - 5
}); });
} }
}); });
@@ -861,29 +881,34 @@ const Subscriptions = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid); const distanceToTop = rect.top;
console.log("risposta: ", reply.parentCid); const distanceToBottom = window.innerHeight - rect.bottom;
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); let top;
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) { if (distanceToTop < postOnHoverHeight / 2) {
setOutOfViewPosition({ top = window.scrollY - 5;
top: rect.top + window.scrollY - rect.height / 2, } else if (distanceToBottom < postOnHoverHeight / 2) {
left: rect.left - rect.innerWidth - 5, top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
maxWidth: rect.left } else {
}); top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
} else { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width - 5, right: window.innerWidth - rect.left - 10,
maxWidth: window.innerWidth - rect.left - rect.width maxWidth: rect.left - 5
}); });
} } else {
} setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -909,28 +934,34 @@ const Subscriptions = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid); const distanceToTop = rect.top;
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const distanceToBottom = window.innerHeight - rect.bottom;
const distanceToRight = window.innerWidth - rect.right; let top;
if (distanceToRight < 200) { if (distanceToTop < postOnHoverHeight / 2) {
setOutOfViewPosition({ top = window.scrollY - 5;
top: rect.top + window.scrollY - rect.height / 2, } else if (distanceToBottom < postOnHoverHeight / 2) {
left: rect.left - rect.innerWidth - 5, top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
maxWidth: rect.left } else {
}); top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
} else { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width - 5, right: window.innerWidth - rect.left - 10,
maxWidth: window.innerWidth - rect.left - rect.width maxWidth: rect.left - 5
}); });
} } else {
} setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1306,9 +1337,9 @@ const Subscriptions = () => {
style={{ style={{
display: "block", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top,
left: outOfViewPosition.left,
right: outOfViewPosition.right, right: outOfViewPosition.right,
left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth, maxWidth: outOfViewPosition.maxWidth,
}} }}
> >
src/components/views/Thread.jsx
+78 -25
View File
@@ -952,18 +952,29 @@ const Thread = () => {
setOutOfViewCid(reply.cid); setOutOfViewCid(reply.cid);
const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
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();
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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width - 5
}); });
} }
}); });
@@ -1255,18 +1277,29 @@ const Thread = () => {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); 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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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); setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefsMobile.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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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) setOutOfViewCid(reply.cid)
const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); const rect = backlinkRefsMobile.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) { if (distanceToRight < 200) {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5 maxWidth: rect.left - 5
}); });
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top,
left: rect.left + rect.width + 5, 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={{ style={{
display: "block", display: "block",
position: "absolute", position: "absolute",
top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, top: outOfViewPosition.top,
left: outOfViewPosition.left,
right: outOfViewPosition.right, right: outOfViewPosition.right,
left: outOfViewPosition.left,
maxWidth: outOfViewPosition.maxWidth, maxWidth: outOfViewPosition.maxWidth,
}} }}
> >