From 6d597aac7ed95801411ecad848815c52f1a8f250 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 8 Sep 2023 15:48:33 +0200 Subject: [PATCH] improve popup layout calculation --- src/components/views/AllCatalog.jsx | 32 ++++---- src/components/views/Catalog.jsx | 82 ++++++++++--------- src/components/views/SubscriptionsCatalog.jsx | 32 ++++---- 3 files changed, 78 insertions(+), 68 deletions(-) diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index 4ab042a6..39d6f290 100755 --- a/src/components/views/AllCatalog.jsx +++ b/src/components/views/AllCatalog.jsx @@ -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 = () => { diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index b1fe1675..6031c5b9 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -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 = () => { diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index d345c94f..38937c37 100755 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/src/components/views/SubscriptionsCatalog.jsx @@ -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 = () => {