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; max-height: 320px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
word-wrap: break-word;
margin-top: 5px; margin-top: 5px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 5px 0 3px; 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 { video, audio, img {
max-width: 150px; max-width: 150px;
max-height: 150px; max-height: 150px;
@@ -137,82 +91,162 @@ export const Threads = styled.div`
display: block; display: block;
padding: 0 15px; padding: 0 15px;
overflow: hidden; 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 }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return ` return `
.thread_popup_title{ .post-subject{
color:#cc1105; color:#cc1105;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:bold color:#00a550;font-weight:bold
}`; }`;
case 'Yotsuba-B': case 'Yotsuba-B':
return ` return `
.thread_popup_title{ .post-subject{
color:#dedede; color:#dedede;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:bold color:#00a550;font-weight:bold
}`; }`;
case 'Futaba': case 'Futaba':
return ` return `
.thread_popup{ .post-preview{
font-family: arial,helvetica,sans-serif; font-family: arial,helvetica,sans-serif;
} }
.thread_popup_title{
.post-subject{
color:#cc1105; color:#cc1105;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700; color:#00a550;font-weight:700;
}`; }`;
case 'Burichan': case 'Burichan':
return ` return `
.thread_popup{ .post-preview{
font-family: arial,helvetica,sans-serif; font-family: arial,helvetica,sans-serif;
} }
.thread_popup_title{
.post-subject{
color:#dedede; color:#dedede;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700; color:#00a550;font-weight:700;
}`; }`;
case 'Tomorrow': case 'Tomorrow':
return ` return `
.thread_popup{ .post-preview{
font-family: arial,helvetica,sans-serif; font-family: arial,helvetica,sans-serif;
} }
.file-thumb { .file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important; background-color: rgba(255, 255, 255, 0.01) !important;
} }
.thread_popup_title{
.post-subject{
color:#b294bb; color:#b294bb;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:700; color:#00a550;font-weight:700;
}`; }`;
case 'Photon': case 'Photon':
return ` return `
.thread_popup{ .post-preview{
font-family: arial,helvetica,sans-serif; font-family: arial,helvetica,sans-serif;
} }
.thread_popup_title{
.post-subject{
color:#dedede; color:#dedede;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#dedede;font-weight:700; color:#dedede;font-weight:700;
}`; }`;
default: default:
return ''; return '';
}}} }
}}
`; `;
export const PostMenuCatalog = styled.div` export const PostMenuCatalog = styled.div`
@@ -250,7 +284,7 @@ export const PostMenuCatalog = styled.div`
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return `.thread_popup_title{ return `.post-subject{
color:red; 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 { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; 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 { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,15 +75,12 @@ const CatalogPost = ({post}) => {
const account = useAccount(); const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress}); const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null); const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null); const textRef = useRef(null);
const imageRef = 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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -109,14 +110,21 @@ const CatalogPost = ({post}) => {
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
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); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
@@ -129,7 +137,7 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -350,61 +357,57 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef} <div ref={popupRef}
className="thread_popup" className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, visibility: isCalculationDone ? 'visible' : 'hidden',
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight isCalculationDone && spaceOnRight > 250
? isMediaShowed ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
? `calc(50% + ${imageRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: `calc(50% + ${textRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: '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)`
: 'auto', : 'auto',
top: popupPosition.top + 5,
}}> }}>
<p <span className="post-subject" >
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p> </span>
<div>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <div className='post-last'>
Last reply by Last reply by
<span className="thread_popup_author"> Anonymous </span> <span className="post-author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)} <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</p>
: null}
</div>
</div> </div>
: null} : null}
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)} onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
@@ -621,12 +624,13 @@ const CatalogPost = ({post}) => {
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef} <span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -635,6 +639,7 @@ const CatalogPost = ({post}) => {
</div> </div>
</Link> </Link>
</div> </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 { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled'; 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 { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
@@ -67,6 +67,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,7 +75,10 @@ const CatalogPost = ({post}) => {
const [commentCid, setCommentCid] = useState(null); const [commentCid, setCommentCid] = useState(null);
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const popupRef = useRef(null);
const imageRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const textRef = useRef(null); const textRef = useRef(null);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
@@ -85,12 +89,6 @@ const CatalogPost = ({post}) => {
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const account = useAccount(); 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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
@@ -106,6 +104,9 @@ 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: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -116,14 +117,21 @@ const CatalogPost = ({post}) => {
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
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); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
@@ -136,7 +144,8 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -146,7 +155,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -590,61 +598,57 @@ const CatalogPost = ({post}) => {
) )
} else { } else {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef} <div ref={popupRef}
className="thread_popup" className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, visibility: isCalculationDone ? 'visible' : 'hidden',
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight isCalculationDone && spaceOnRight > 250
? isMediaShowed ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
? `calc(50% + ${imageRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: `calc(50% + ${textRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: '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)`
: 'auto', : 'auto',
top: popupPosition.top + 5,
}}> }}>
<p <span className="post-subject" >
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p> </span>
<div>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <div className='post-last'>
Last reply by Last reply by
<span className="thread_popup_author"> Anonymous </span> <span className="post-author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)} <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</p>
: null}
</div>
</div> </div>
: null} : null}
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)} onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
@@ -873,12 +877,13 @@ const CatalogPost = ({post}) => {
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}} <div style={{cursor:"text"}}>
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef} <span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -888,6 +893,7 @@ const CatalogPost = ({post}) => {
</div> </div>
</Link> </Link>
</div> </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 { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; 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 { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,15 +75,12 @@ const CatalogPost = ({post}) => {
const account = useAccount(); const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress}); const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null); const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null); const textRef = useRef(null);
const imageRef = 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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -109,14 +110,21 @@ const CatalogPost = ({post}) => {
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
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); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
@@ -129,7 +137,7 @@ const CatalogPost = ({post}) => {
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -350,61 +357,57 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
createPortal(
<PostPreview selectedStyle={selectedStyle}>
<div ref={popupRef} <div ref={popupRef}
className="thread_popup" className="post-preview"
onMouseOver={() => handleMouseOnLeaveThread()} onMouseOver={() => handleMouseOnLeaveThread()}
style={{ style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, visibility: isCalculationDone ? 'visible' : 'hidden',
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: left:
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight isCalculationDone && spaceOnRight > 250
? isMediaShowed ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
? `calc(50% + ${imageRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: `calc(50% + ${textRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
: '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)`
: 'auto', : 'auto',
top: popupPosition.top + 5,
}}> }}>
<p <span className="post-subject" >
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}>
<span className="thread_popup_title" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
<span className='post-ago'>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
</p> </span>
<div>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <div className='post-last'>
Last reply by Last reply by
<span className="thread_popup_author"> Anonymous </span> <span className="post-author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)} <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</p>
: null}
</div>
</div> </div>
: null} : null}
</div>
</PostPreview>, document.body
)
: null }
<div key={`thread-`} className="thread"
ref={el => {
threadRefs.current[thread.cid] = el;
}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)} onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
@@ -621,12 +624,13 @@ const CatalogPost = ({post}) => {
</BoardForm> </BoardForm>
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef} <span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringOnThread(thread.cid); setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid); setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
@@ -635,6 +639,7 @@ const CatalogPost = ({post}) => {
</div> </div>
</Link> </Link>
</div> </div>
</>
); );
}; };