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

implement portal for catalog popups

Browse Source
This commit is contained in:
plebeius.eth
2023-09-08 14:49:30 +02:00
parent 7ef7b1e17a
commit 876b866348
4 changed files with 1028 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Catalog.styled.jsx
+98 -64
View File
@@ -12,57 +12,11 @@ export const Threads = styled.div`
max-height: 320px;
vertical-align: top;
display: inline-block;
word-wrap: break-word;
margin-top: 5px;
margin-bottom: 20px;
padding: 5px 0 3px;
}
.thread_popup {
display: inline-block;
background-color: black;
position: absolute;
margin-top: 0px;
text-align: left;
z-index: 10;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
/* overflow-wrap: break-word; */
}
.thread_popup_content {
max-width: 500px;
margin: 5px 3px 2px 3px !important;
color: #dedede;
display: inline-block;
overflow: hidden;
font-size: 13px;
white-space: normal;
}
.thread_popup_lastReply {
margin: 0px 4px 5px 4px !important;
color: #bbbfbd;
display: block;
min-width: 250px;
font-size: 90%;
}
.thread_popup_title {
color:#a89baa
}
.thread_popup_author {
color:#519860;
font-weight: bold
}
.thread_popup_authorAdmin {
color: purple;
font-weight: 700;
}
video, audio, img {
max-width: 150px;
max-height: 150px;
@@ -137,82 +91,162 @@ export const Threads = styled.div`
display: block;
padding: 0 15px;
overflow: hidden;
word-wrap: break-word;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return ``;
case 'Yotsuba-B':
return ``;
case 'Futaba':
return ``;
case 'Burichan':
return ``;
case 'Tomorrow':
return `
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}`;
case 'Photon':
return ``;
default:
return '';
}
}}
`;
export const PostPreview = styled.div`
.post-preview {
position: absolute;
background-color: #000;
border-radius: 3px;
padding: 5px 8px 4px;
z-index: 100000;
word-wrap: break-word;
white-space: normal;
max-width: 500px;
width: fit-content;
color: #bbbfbd;
font-size: 10pt;
text-align: left;
}
.post-author {
font-weight: 700;
}
.post-last {
margin-top: 3px;
color: #bbbfbd;
font-size: 90%;
}
.post-authorAdmin {
color: purple;
font-weight: 700;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
.thread_popup_title{
.post-subject{
color:#cc1105;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#00a550;font-weight:bold
}`;
case 'Yotsuba-B':
return `
.thread_popup_title{
.post-subject{
color:#dedede;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#00a550;font-weight:bold
}`;
case 'Futaba':
return `
.thread_popup{
.post-preview{
font-family: arial,helvetica,sans-serif;
}
.thread_popup_title{
.post-subject{
color:#cc1105;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700;
}`;
case 'Burichan':
return `
.thread_popup{
.post-preview{
font-family: arial,helvetica,sans-serif;
}
.thread_popup_title{
.post-subject{
color:#dedede;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700;
}`;
case 'Tomorrow':
return `
.thread_popup{
.post-preview{
font-family: arial,helvetica,sans-serif;
}
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}
.thread_popup_title{
.post-subject{
color:#b294bb;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700;
}`;
case 'Photon':
return `
.thread_popup{
.post-preview{
font-family: arial,helvetica,sans-serif;
}
.thread_popup_title{
.post-subject{
color:#dedede;
font-weight:700;
};
.thread_popup_author{
.post-author{
color:#dedede;font-weight:700;
}`;
default:
return '';
}}}
}
}}
`;
export const PostMenuCatalog = styled.div`
@@ -250,7 +284,7 @@ export const PostMenuCatalog = styled.div`
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `.thread_popup_title{
return `.post-subject{
color:red;
}`;
src/components/views/AllCatalog.jsx
+52 -47
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null);
const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
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;
@@ -109,14 +110,21 @@ const CatalogPost = ({post}) => {
}
if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect();
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
const spaceLeft = threadRect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500);
setIsEnoughSpaceOnRight(spaceRight > 500);
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 {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true);
}
};
@@ -129,7 +137,7 @@ const CatalogPost = ({post}) => {
};
}
}, [isHoveringOnThread, isMediaShowed]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") {
setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false);
}
};
@@ -350,61 +357,57 @@ const CatalogPost = ({post}) => {
return (
<div key={`thread-`} className="thread"
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
<>
{isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef}
className="thread_popup"
className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
visibility: isCalculationDone ? 'visible' : 'hidden',
left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right:
isCalculationDone && isEnoughSpaceOnRight !== null &&
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
isCalculationDone && spaceOnRight > 250
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
isCalculationDone && spaceOnRight < 250
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: 'auto',
top: popupPosition.top + 5,
}}>
<p
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
<span className="post-subject" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
<span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p>
<div>
</span>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
<div className='post-last'>
Last reply by
<span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
<span className="post-author"> Anonymous </span>
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</div>
: null}
</div>
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
@@ -621,12 +624,13 @@ const CatalogPost = ({post}) => {
</BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -635,6 +639,7 @@ const CatalogPost = ({post}) => {
</div>
</Link>
</div>
</>
);
};
src/components/views/Catalog.jsx
+55 -49
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import EditModal from '../modals/EditModal';
@@ -67,6 +67,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,7 +75,10 @@ const CatalogPost = ({post}) => {
const [commentCid, setCommentCid] = useState(null);
const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null);
const popupRef = useRef(null);
const imageRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const textRef = useRef(null);
const { subplebbitAddress } = useParams();
@@ -85,13 +89,7 @@ const CatalogPost = ({post}) => {
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const account = useAccount();
const popupRef = useRef(null);
const threadRefs = useRef([]);
const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -106,6 +104,9 @@ 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;
@@ -116,14 +117,21 @@ const CatalogPost = ({post}) => {
}
if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect();
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
const spaceLeft = threadRect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500);
setIsEnoughSpaceOnRight(spaceRight > 500);
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 {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true);
}
};
@@ -136,7 +144,8 @@ const CatalogPost = ({post}) => {
};
}
}, [isHoveringOnThread, isMediaShowed]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => {
@@ -146,7 +155,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") {
setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false);
}
};
@@ -590,61 +598,57 @@ const CatalogPost = ({post}) => {
)
} else {
return (
<div key={`thread-`} className="thread"
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
<>
{isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef}
className="thread_popup"
className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
visibility: isCalculationDone ? 'visible' : 'hidden',
left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right:
isCalculationDone && isEnoughSpaceOnRight !== null &&
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
isCalculationDone && spaceOnRight > 250
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
isCalculationDone && spaceOnRight < 250
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: 'auto',
top: popupPosition.top + 5,
}}>
<p
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
<span className="post-subject" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
<span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p>
<div>
</span>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
<div className='post-last'>
Last reply by
<span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
<span className="post-author"> Anonymous </span>
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</div>
: null}
</div>
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
@@ -873,12 +877,13 @@ const CatalogPost = ({post}) => {
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}}
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<div style={{cursor:"text"}}>
<span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -888,6 +893,7 @@ const CatalogPost = ({post}) => {
</div>
</Link>
</div>
</>
)
}
};
src/components/views/SubscriptionsCatalog.jsx
+52 -47
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null);
const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
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;
@@ -109,14 +110,21 @@ const CatalogPost = ({post}) => {
}
if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect();
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
const spaceLeft = threadRect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500);
setIsEnoughSpaceOnRight(spaceRight > 500);
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 {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true);
}
};
@@ -129,7 +137,7 @@ const CatalogPost = ({post}) => {
};
}
}, [isHoveringOnThread, isMediaShowed]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") {
setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false);
}
};
@@ -350,61 +357,57 @@ const CatalogPost = ({post}) => {
return (
<div key={`thread-`} className="thread"
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
<>
{isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef}
className="thread_popup"
className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
visibility: isCalculationDone ? 'visible' : 'hidden',
left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right:
isCalculationDone && isEnoughSpaceOnRight !== null &&
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
isCalculationDone && spaceOnRight > 250
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
isCalculationDone && spaceOnRight < 250
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: 'auto',
top: popupPosition.top + 5,
}}>
<p
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
<span className="post-subject" >
{thread.title ? `${thread.title} ` : "Posted "}
</span>
by
<span className="thread_popup_author">
<span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p>
<div>
</span>
{thread.replyCount > 0 ?
<p className="thread_popup_lastReply">
<div className='post-last'>
Last reply by
<span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
<span className="post-author"> Anonymous </span>
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</div>
: null}
</div>
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
@@ -621,12 +624,13 @@ const CatalogPost = ({post}) => {
</BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -635,6 +639,7 @@ const CatalogPost = ({post}) => {
</div>
</Link>
</div>
</>
);
};