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
+85 -54
View File
@@ -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,
}}
>