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

fix catalog popup distance calculation

Browse Source
This commit is contained in:
plebeius.eth
2023-08-31 17:16:29 +02:00
parent 44a458af28
commit 5c2a4e3b08
3 changed files with 88 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/AllCatalog.jsx
+30 -8
View File
@@ -78,10 +78,21 @@ const CatalogPost = ({post}) => {
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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const textRect = textRef.current?.getBoundingClientRect();
const imageRect = imageRef.current?.getBoundingClientRect();
const isMediaShowed = (thread.link && commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
useLayoutEffect(() => {
@@ -337,8 +348,17 @@ const CatalogPost = ({post}) => {
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight ? '100%' : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight ? '100%' : 'auto',}}
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
@@ -369,7 +389,7 @@ const CatalogPost = ({post}) => {
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -380,7 +400,7 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -389,14 +409,14 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
<video className="card" ref={imageRef} key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
<audio className="card" ref={imageRef} controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
@@ -574,8 +594,10 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
<span key={`teaser-width${thread.cid}`} ref={textRef}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</Link>
</div>
src/components/views/Catalog.jsx
+30 -9
View File
@@ -76,6 +76,7 @@ const CatalogPost = ({post}) => {
const threadMenuRefs = useRef({});
const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null);
const textRef = useRef(null);
const { subplebbitAddress } = useParams();
const [, setNewErrorMessage] = useError();
@@ -86,12 +87,21 @@ const CatalogPost = ({post}) => {
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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
const textRect = textRef.current?.getBoundingClientRect();
const imageRect = imageRef.current?.getBoundingClientRect();
const isMediaShowed = (thread.link && commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
@@ -588,8 +598,17 @@ const CatalogPost = ({post}) => {
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight ? '100%' : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight ? '100%' : 'auto',}}
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
@@ -620,7 +639,7 @@ const CatalogPost = ({post}) => {
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -631,7 +650,7 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -640,14 +659,14 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
<video className="card" ref={imageRef} key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
<audio className="card" ref={imageRef} controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
@@ -844,8 +863,10 @@ const CatalogPost = ({post}) => {
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}}
ref={(el) => (threadRefs.current[thread.cid] = el)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
<span key={`teaser-width${thread.cid}`} ref={textRef}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</div>
</Link>
src/components/views/SubscriptionsCatalog.jsx
+28 -6
View File
@@ -78,10 +78,21 @@ const CatalogPost = ({post}) => {
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 [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const textRect = textRef.current?.getBoundingClientRect();
const imageRect = imageRef.current?.getBoundingClientRect();
const isMediaShowed = (thread.link && commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
useLayoutEffect(() => {
@@ -337,8 +348,17 @@ const CatalogPost = ({post}) => {
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight ? '100%' : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight ? '100%' : 'auto',}}
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
@@ -369,7 +389,7 @@ const CatalogPost = ({post}) => {
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -380,7 +400,7 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
@@ -389,14 +409,14 @@ const CatalogPost = ({post}) => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
<video className="card" ref={imageRef} key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
<audio className="card" ref={imageRef} controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
@@ -574,8 +594,10 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
<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}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</Link>
</div>