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
+18 -14
View File
@@ -97,38 +97,42 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
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)`;
if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} 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 {
popupRef.current.style.maxWidth = `${popupWidth}px`;
popupRef.current.style.maxWidth = `500px`;
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
@@ -136,8 +140,8 @@ const CatalogPost = ({post}) => {
setIsCalculationDone(false);
};
}
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => {
src/components/views/Catalog.jsx
+42 -40
View File
@@ -104,49 +104,51 @@ const CatalogPost = ({post}) => {
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
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)`;
const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
ref = imageRef.current;
} else {
popupRef.current.style.maxWidth = `${popupWidth}px`;
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;
if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${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);
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
clearTimeout(timeoutId);
setIsCalculationDone(false);
};
}
}, [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 = () => {
src/components/views/SubscriptionsCatalog.jsx
+18 -14
View File
@@ -97,38 +97,42 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
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)`;
if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} 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 {
popupRef.current.style.maxWidth = `${popupWidth}px`;
popupRef.current.style.maxWidth = `500px`;
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
@@ -136,8 +140,8 @@ const CatalogPost = ({post}) => {
setIsCalculationDone(false);
};
}
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => {