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
+36 -34
View File
@@ -104,49 +104,51 @@ 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 = () => {
let ref; let ref;
if (isMediaShowed) { if (isMediaShowed) {
ref = imageRef.current; ref = imageRef.current;
} else {
ref = textRef.current;
}
if (ref && popupRef.current) {
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left;
const popupWidth = popupRef.current.getBoundingClientRect().width;
if (spaceRight < 200 && spaceLeft > spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
} else { } else {
popupRef.current.style.maxWidth = `${popupWidth}px`; ref = textRef.current;
} }
setSpaceOnRight(spaceRight); if (ref && popupRef.current) {
setIsCalculationDone(true); const rect = ref.getBoundingClientRect();
} const viewportWidth = document.documentElement.clientWidth;
}; const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left;
if (isHoveringOnThread) { if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250); popupRef.current.style.maxWidth = `calc(
return () => { 100vw -
clearTimeout(timeoutId); ${isMediaShowed ? imageWidth : textWidth}px
setIsCalculationDone(false); - ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else {
popupRef.current.style.maxWidth = `500px`;
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
}; };
}
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]); if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
clearTimeout(timeoutId);
setIsCalculationDone(false);
};
}
}, [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 = () => {