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/Board.jsx
+106 -36
View File
@@ -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,
}}
>