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

improve popup layout calculation

Browse Source
This commit is contained in:
plebeius.eth
2023-09-08 15:48:33 +02:00
parent 854a05e4fd
commit 6d597aac7e
3 changed files with 78 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/AllCatalog.jsx
+12 -8
View File
@@ -97,12 +97,13 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {}; const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {}; const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
if (isMediaShowed) { if (isMediaShowed) {
ref = imageRef.current; ref = imageRef.current;
} else { } else {
@@ -114,14 +115,17 @@ const CatalogPost = ({post}) => {
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left; const spaceLeft = rect.left;
const popupWidth = popupRef.current.getBoundingClientRect().width;
if (spaceRight < 200 && spaceLeft > spaceRight) { if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`; popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) { } else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`; popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else { } else {
popupRef.current.style.maxWidth = `${popupWidth}px`; popupRef.current.style.maxWidth = `500px`;
} }
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
@@ -137,7 +141,7 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
src/components/views/Catalog.jsx
+11 -9
View File
@@ -104,8 +104,8 @@ const CatalogPost = ({post}) => {
(commentMediaInfo.type === 'iframe' && (commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {}; const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {}; const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
@@ -122,14 +122,17 @@ const CatalogPost = ({post}) => {
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left; const spaceLeft = rect.left;
const popupWidth = popupRef.current.getBoundingClientRect().width;
if (spaceRight < 200 && spaceLeft > spaceRight) { if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`; popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) { } else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`; popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else { } else {
popupRef.current.style.maxWidth = `${popupWidth}px`; popupRef.current.style.maxWidth = `500px`;
} }
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
@@ -145,8 +148,7 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
src/components/views/SubscriptionsCatalog.jsx
+12 -8
View File
@@ -97,12 +97,13 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {}; const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {}; const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
if (isMediaShowed) { if (isMediaShowed) {
ref = imageRef.current; ref = imageRef.current;
} else { } else {
@@ -114,14 +115,17 @@ const CatalogPost = ({post}) => {
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left; const spaceLeft = rect.left;
const popupWidth = popupRef.current.getBoundingClientRect().width;
if (spaceRight < 200 && spaceLeft > spaceRight) { if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`; popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) { } else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`; popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else { } else {
popupRef.current.style.maxWidth = `${popupWidth}px`; popupRef.current.style.maxWidth = `500px`;
} }
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
@@ -137,7 +141,7 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {